/* =========================================================
   GOOD EARTH PLATFORMS — PACKAGE SYSTEM CORE UI
   Refined Professional Backbone
========================================================= */

:root{
  --primary:#0ea1f1;
  --primary-dark:#0b6fa4;
  --secondary:#2563eb;
  --dark:#0f172a;
  --dark-2:#1e293b;
  --light:#f8fafc;
  --white:#ffffff;
  --text:#334155;
  --border:rgba(15,23,42,0.08);

  --shadow-sm:0 8px 20px rgba(0,0,0,0.05);
  --shadow-md:0 15px 40px rgba(0,0,0,0.08);
  --shadow-lg:0 25px 60px rgba(0,0,0,0.12);

  --transition:all 0.35s ease;
}

/* =========================================================
   GLOBAL
========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  background:var(--light);
  color:var(--text);
  overflow-x:hidden;
  font-family:'Segoe UI',sans-serif;
  line-height:1.7;
}

/* =========================================================
   BACK BUTTON
========================================================= */

.back-container{
  padding:30px 7% 10px;
}

.back-btn{
  background:transparent;
  border:2px solid var(--primary);
  color:var(--primary);
  padding:12px 22px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.3px;
  transition:var(--transition);
  margin-top:55px;
}

.back-btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateX(-4px);
  box-shadow:0 10px 25px rgba(14,161,241,0.25);
}

.back-btn a{
  text-decoration:none;
  color:inherit;
}

/* =========================================================
   HEADER
========================================================= */

.header{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:80px 20px;
  background:
    linear-gradient(
      135deg,
      rgba(14,161,241,0.95),
      rgba(11,111,164,0.96),
      rgba(15,23,42,0.96)
    );
  color:white;
}

/* subtle glow layer */

.header::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(255,255,255,0.05);
  top:-200px;
  right:-150px;
  border-radius:50%;
  filter:blur(10px);
}

.header h1{
  position:relative;
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:15px;
}

.header p{
  position:relative;
  max-width:700px;
  margin:auto;
  font-size:clamp(1rem,2vw,1.15rem);
  opacity:0.92;
}

/* =========================================================
   SERVICE SECTION
========================================================= */

.service{
  padding:70px 7%;
}

.service h2{
  text-align:center;
  margin-bottom:50px;
  font-size:clamp(1.7rem,4vw,2.6rem);
  color:var(--dark);
  font-weight:700;
  letter-spacing:-0.5px;
  position:relative;
}

.service h2::after{
  content:"";
  width:70px;
  height:4px;
  background:var(--primary);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-15px;
}

/* =========================================================
   PACKAGE GRID
========================================================= */

.packages,
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  max-width:1300px;
  margin:auto;
}

/* =========================================================
   CARD DESIGN
========================================================= */

.card{
  position:relative;
  overflow:hidden;
  background:var(--white);
  padding:35px 30px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition);
}

/* top glow line */

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
  );

  transform:scaleX(0);
  transform-origin:left;
  transition:0.4s ease;
}

.card:hover::before{
  transform:scaleX(1);
}

.card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
}

.card h3{
  font-size:1.5rem;
  color:var(--dark);
  margin-bottom:15px;
  font-weight:700;
}

.card p{
  font-size:0.97rem;
  color:#64748b;
}

.card ul{
  list-style:none;
  padding:0;
  margin:25px 0;
}

.card ul li{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,0.05);
  font-size:0.95rem;
  color:#475569;
}

/* =========================================================
   PRICE
========================================================= */

.price{
  display:block;
  font-size:2rem;
  font-weight:800;
  margin:18px 0 25px;
  color:var(--secondary);
}

/* =========================================================
   FEATURED / POPULAR
========================================================= */

.featured,
.popular{
  background:var(--dark);
  color:#fff;
  border:none;
  transform:scale(1.03);
  box-shadow:0 30px 70px rgba(15,23,42,0.18);
}

.featured h3,
.popular h3,
.featured .price,
.popular .price{
  color:#fff;
}

.featured ul li,
.popular ul li{
  color:rgba(255,255,255,0.82);
  border-color:rgba(255,255,255,0.08);
}

/* badge */

.popular::after,
.featured::after{
  content:"Most Popular";
  position:absolute;
  top:18px;
  right:-35px;
  background:var(--primary);
  color:#fff;
  padding:7px 40px;
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  transform:rotate(45deg);
  letter-spacing:1px;
}

/* =========================================================
   BUTTONS
========================================================= */

.button0,
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
  );

  color:#fff;
  border:none;
  text-decoration:none;
  padding:15px 24px;
  cursor:pointer;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;

  transition:var(--transition);
}

/* hover */

.button0:hover,
.btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 12px 30px rgba(14,161,241,0.28);
}

/* shine effect */

.button0::before,
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.15);
  transition:0.5s ease;
}

.button0:hover::before,
.btn:hover::before{
  left:100%;
}

/* featured buttons */

.featured .btn,
.popular .button0{
  background:#fff;
  color:var(--dark);
}

.featured .btn:hover,
.popular .button0:hover{
  background:var(--primary);
  color:#fff;
}

/* =========================================================
   CURRENCY SWITCH
========================================================= */

.currency-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px 0 50px;
  font-weight:700;
  color:var(--dark);
}

.switch{
  position:relative;
  width:52px;
  height:28px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  width:100%;
  height:100%;
  background:#d1d5db;
  cursor:pointer;
  transition:0.3s ease;
}

.slider::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  top:4px;
  left:4px;
  background:#fff;
  transition:0.3s ease;
}

.switch input:checked + .slider{
  background:var(--secondary);
}

.switch input:checked + .slider::before{
  transform:translateX(24px);
}

/* =========================================================
   TABS
========================================================= */

.tabs{
  padding:0 7% 80px;
}

.tabs input{
  display:none;
}

.tab-labels{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:50px;
}

.tab-labels label{
  position:relative;
  cursor:pointer;
  font-weight:700;
  color:#475569;
  padding:14px 28px;
  background:#fff;
  border:1px solid var(--border);
  transition:var(--transition);
}

.tab-labels label:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
}

#web:checked ~ .tab-labels label[for="web"],
#interactive:checked ~ .tab-labels label[for="interactive"],
#promo:checked ~ .tab-labels label[for="promo"],
#uiux:checked ~ .tab-labels label[for="uiux"],
#mcreatives:checked ~ .tab-labels label[for="mcreatives"],
#dmarket:checked ~ .tab-labels label[for="dmarket"]{
  background:var(--secondary);
  color:#fff;
  box-shadow:0 10px 25px rgba(37,99,235,0.2);
}

/* =========================================================
   TAB CONTENT
========================================================= */

.tab-content{
  display:none;
  animation:fadeUp 0.6s ease;
}

#web:checked ~ .web,
#interactive:checked ~ .interactive,
#promo:checked ~ .promo,
#uiux:checked ~ .uiux,
#mcreatives:checked ~ .mcreatives,
#dmarket:checked ~ .dmarket{
  display:block;
}

/* =========================================================
   CARD ANIMATION
========================================================= */

.card{
  opacity:0;
  transform:translateY(30px);
}

.card.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

  .service{
    padding:60px 5%;
  }

  .tabs{
    padding:0 5% 70px;
  }

  .featured,
  .popular{
    transform:none;
  }

}

@media(max-width:768px){

  .header{
    padding:70px 20px;
  }

  .tab-labels{
    flex-direction:column;
  }

  .tab-labels label{
    width:100%;
    text-align:center;
  }

  .card{
    padding:30px 25px;
  }

  .price{
    font-size:1.7rem;
  }

}

@media(max-width:480px){

  .header h1{
    font-size:2rem;
  }

  .service h2{
    font-size:1.6rem;
  }

  .button0,
  .btn{
    width:100%;
  }

}