:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12);

  --text:#fff;
  --muted:rgba(255,255,255,.70);

  --primary:#0d6efd;
  --primary-dark:#0b5ed7;

  --whatsapp:#25D366;

  --gold:#c58b52;
  --gold-soft:rgba(197,139,82,.18);
  --gold-border:rgba(197,139,82,.45);

  --transition:.25s ease;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:140px;
}

body{
  margin:0;
  padding-top:82px;
  overflow-x:hidden;

  background:
    radial-gradient(
      1200px 600px at 10% 10%,
      rgba(31,90,143,.28),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 90% 10%,
      rgba(197,139,82,.12),
      transparent 55%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    Inter,
    system-ui,
    sans-serif;

  line-height:1.6;
}

a{
  color:inherit;
}

.container{
  max-width:1120px;
}

/* NAVBAR */

.topbar{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  background:rgba(11,18,32,.88);

  border-bottom:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;
}

.brand-logo{
  width:42px;
  height:42px;

  object-fit:contain;
}

.brand-name{
  color:#fff;

  font-size:.95rem;
  font-weight:800;

  letter-spacing:.08em;
}

.nav-link{
  color:rgba(255,255,255,.78) !important;

  font-weight:600;

  transition:.25s ease;
}

.nav-link:hover{
  color:#fff !important;
}

.navbar .btn-primary{
  border-radius:14px;

  font-weight:700;
}

/* HERO */

.hero-section{
  position:relative;

  overflow:hidden;

  padding:30px 0 76px;
}

.hero-content{
  display:grid;

  grid-template-columns:
    1fr
    520px;

  align-items:center;

  gap:50px;
}

.hero-box{
  max-width:820px;
}

.hero-badge{
  display:inline-flex;

  margin-bottom:18px;

  padding:9px 16px;

  border-radius:999px;

  background:rgba(13,110,253,.16);

  border:1px solid rgba(13,110,253,.35);

  color:#fff;

  font-size:.9rem;
  font-weight:800;
}

.hero-box h1{
  margin:0 0 22px;

  font-size:clamp(2.4rem, 6vw, 4.5rem);

  font-weight:900;

  line-height:1.05;

  letter-spacing:-.04em;
}

.hero-box p{
  margin:0;

  color:var(--muted);

  font-size:1.1rem;

  line-height:1.85;
}

.hero-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-image{
  width:100%;
  max-width:520px;

  height:auto;

  object-fit:contain;

  border-radius:28px;

  border:1px solid rgba(255,255,255,.08);

  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,.35));
}

/* PACKAGE NAV */

.package-nav-wrap{
  position:sticky;

  top:65px;

  z-index:999;

  background:
    linear-gradient(
      to bottom,
      rgba(11,18,32,.98),
      rgba(11,18,32,.78)
    );

  border-bottom:1px solid rgba(255,255,255,.06);

  backdrop-filter:blur(10px);
}

.package-nav{
  display:flex;
  align-items:center;
  gap:12px;

  overflow-x:auto;

  padding:16px 0;

  -ms-overflow-style:none;
  scrollbar-width:none;
}

.package-nav::-webkit-scrollbar{
  display:none;
}

.package-nav a{
  flex:0 0 auto;

  padding:11px 17px;

  border-radius:999px;

  background:rgba(255,255,255,.05);

  border:1px solid var(--border);

  color:#fff;

  text-decoration:none;

  font-size:.95rem;
  font-weight:700;

  transition:all var(--transition);
}

.package-nav a:hover{
  background:rgba(13,110,253,.18);

  border-color:rgba(13,110,253,.40);
}

/* FEATURED */

.featured-section{
  padding:28px 0 70px;
}

.featured-card{
  display:grid;

  grid-template-columns:1fr 220px;

  gap:28px;

  padding:34px;

  border-radius:32px;

  background:
    linear-gradient(
      135deg,
      rgba(197,139,82,.18),
      rgba(13,110,253,.10),
      rgba(255,255,255,.05)
    );

  border:1px solid var(--gold-border);

  box-shadow:
    0 30px 80px rgba(0,0,0,.24);

  transition:all var(--transition);
}

.featured-card:hover{
  transform:translateY(-4px);
}

.featured-label{
  display:inline-flex;

  margin-bottom:16px;

  padding:8px 14px;

  border-radius:999px;

  background:var(--gold-soft);

  border:1px solid var(--gold-border);

  font-size:.82rem;
  font-weight:900;
}

.featured-card h2{
  margin:0;

  font-size:clamp(2rem, 4vw, 3.2rem);

  font-weight:900;
}

.featured-card h3{
  margin:10px 0 18px;

  color:#f3c27d;

  font-size:1.35rem;

  font-weight:800;
}

.featured-card p{
  color:rgba(255,255,255,.78);

  line-height:1.8;
}

.feature-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:10px;

  margin:24px 0;
}

.feature-grid div{
  padding:12px 14px;

  border-radius:16px;

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.10);

  font-size:.95rem;
}

.featured-note{
  padding:16px 18px;

  border-radius:20px;

  background:rgba(0,0,0,.18);

  border:1px solid rgba(255,255,255,.10);

  line-height:1.75;
}

/* PACKAGE CARDS */

.package-section{
  padding:76px 0;
}

.last-section{
  padding-bottom:180px;
}

.section-head{
  display:flex;

  gap:18px;

  margin-bottom:34px;
}

.section-head span{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:rgba(13,110,253,.16);

  border:1px solid rgba(13,110,253,.35);

  font-weight:900;
}

.section-head h2{
  margin:0 0 6px;

  font-size:clamp(1.8rem, 4vw, 2.5rem);

  font-weight:900;
}

.section-head p{
  margin:0;

  color:var(--muted);
}

.package-card,
.coming-card{
  height:100%;

  padding:28px;

  border-radius:28px;

  background:var(--card);

  border:1px solid var(--border);

  transition:all var(--transition);
}

.package-card:hover{
  transform:translateY(-5px);

  border-color:rgba(13,110,253,.32);
}

.package-card ul{
  list-style:none;

  padding:0;

  margin:22px 0 0;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.package-card li{
  position:relative;

  padding-left:26px;

  color:rgba(255,255,255,.78);
}

.package-card li::before{
  content:"✓";

  position:absolute;

  left:0;

  color:#6ee7a8;

  font-weight:900;
}

.select-btn{
  width:100%;

  margin-top:24px;

  padding:14px 18px;

  border:0;

  border-radius:16px;

  background:var(--primary);

  color:#fff;

  font-weight:850;

  transition:all var(--transition);
}

.select-btn:hover{
  background:var(--primary-dark);
}

/* FLOATING */

.floating-summary{
  position:fixed;

  left:50%;
  bottom:22px;

  transform:translateX(-50%);

  width:min(92%,760px);

  z-index:1001;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:17px 18px;

  border-radius:24px;

  background:rgba(11,18,32,.92);

  border:1px solid rgba(255,255,255,.14);

  backdrop-filter:blur(12px);
}

.summary-btn{
  padding:14px 22px;

  border:0;

  border-radius:16px;

  background:var(--whatsapp);

  color:#fff;

  font-weight:900;
}

/* FOOTER */

.site-footer{
  padding:90px 0 140px;

  border-top:1px solid rgba(255,255,255,.08);
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.2fr
    .8fr
    .8fr;

  gap:40px;
}

.footer-brand{
  margin-bottom:18px;

  font-size:1.2rem;
  font-weight:900;
}

.footer-text{
  max-width:420px;

  color:rgba(255,255,255,.70);

  line-height:1.8;
}

.footer-title{
  margin-bottom:18px;

  font-size:1.05rem;
  font-weight:800;
}

.footer-links{
  list-style:none;

  padding:0;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links a{
  color:rgba(255,255,255,.72);

  text-decoration:none;
}

.footer-links a:hover{
  color:#fff;
}

.footer-line{
  height:1px;

  margin:42px 0 22px;

  background:rgba(255,255,255,.08);
}

.footer-bottom{
  display:flex;

  justify-content:space-between;

  gap:18px;

  color:rgba(255,255,255,.58);
}

/* RESPONSIVE */

@media(max-width:992px){

  .hero-content{
    grid-template-columns:1fr;

    text-align:center;
  }

  .hero-box{
    margin:0 auto;
  }

  .hero-image{
  max-width:280px;
}

  .featured-card{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .brand-logo{
    width:34px;
    height:34px;
  }

  .brand-name{
    font-size:.78rem;
  }

  .package-section{
    padding:58px 0;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .floating-summary{
    flex-direction:column;
    align-items:stretch;
  }
  .summary-left{
  display:flex;
  flex-direction:column;
}

  .summary-btn{
    width:100%;
  }

}

/* SELECTED PACKAGE */

.selectable-package{
  cursor:pointer;
}

.selectable-package.is-selected{
  border-color:rgba(37,211,102,.65);

  box-shadow:
      0 0 0 1px rgba(37,211,102,.25),
  0 0 35px rgba(37,211,102,.22),
  0 22px 60px rgba(37,211,102,.10);
}

.selectable-package.is-selected .select-btn{
  background:var(--whatsapp);
}

.selectable-package.is-selected .selected-indicator{
  background:rgba(37,211,102,.18);

  border-color:rgba(37,211,102,.45);

  color:#fff;
}

@media(max-width:991px){

  body{
    padding-top:126px;
  }

  /* TOP NAVBAR */

  .topbar{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;
  }

  .navbar{
    min-height:68px;

    padding-top:6px;
    padding-bottom:6px;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .brand-wrap{
    gap:10px;

    max-width:78%;
  }

  .brand-logo{
    width:28px;
    height:28px;

    flex-shrink:0;
  }

  .brand-name{
    font-size:.62rem;

    line-height:1.15;

    letter-spacing:.03em;

    max-width:140px;
  }

  .navbar-toggler{
    padding:5px 8px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.12);

    font-size:.9rem;
  }

  .navbar-toggler:focus{
    box-shadow:none;
  }

  .navbar-collapse{
    margin-top:10px;

    padding:14px;

    border-radius:18px;

    background:rgba(11,18,32,.98);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
  }

  .navbar-nav{
    gap:10px !important;
  }

  .nav-link{
    font-size:.92rem;

    padding:8px 0;
  }

  .navbar .btn-primary{
    width:100%;

    padding:10px 14px;

    border-radius:14px;

    font-size:.92rem;
  }

  /* PACKAGE NAV */

  .package-nav-wrap{
    position:fixed;

    top:68px;
    left:0;

    width:100%;

    z-index:9998;
  }

  .package-nav{
    padding:12px 0;

    gap:10px;
  }

  .package-nav a{
    padding:9px 14px;

    font-size:.82rem;
  }

  /* HERO */

  .hero-section{
    padding:20px 0 58px;
  }

  .hero-content{
    grid-template-columns:1fr;

    text-align:center;

    gap:24px;
  }

  .hero-box{
    max-width:100%;
  }

  .hero-badge{
    font-size:.74rem;

    padding:8px 14px;
  }

  .hero-box h1{
    font-size:2rem;

    line-height:1.08;
  }

  .hero-box p{
    font-size:.96rem;

    line-height:1.7;
  }

  .hero-image{
    max-width:230px;
  }

}/* EXTRA MOBILE COMPACT */

@media(max-width:768px){

  body{
    padding-top:112px;
  }

  /* TOPBAR */

  .navbar{
    min-height:58px;

    padding-top:4px;
    padding-bottom:4px;
  }

  .brand-wrap{
    gap:8px;
  }

  .brand-logo{
    width:24px;
    height:24px;
  }

  .brand-name{
    font-size:.55rem;

    max-width:110px;

    line-height:1.1;
  }

  .navbar-toggler{
    padding:3px 6px;

    font-size:.78rem;
  }

  /* PACKAGE NAV */

  .package-nav-wrap{
    top:58px;
  }

  .package-nav{
    padding:8px 0;

    gap:8px;
  }

  .package-nav a{
    padding:7px 12px;

    font-size:.72rem;

    border-radius:999px;
  }

  /* FLOATING SUMMARY */

  .floating-summary{
    width:92%;

    bottom:12px;

    padding:12px;

    border-radius:18px;

    gap:12px;
  }

  .summary-left span{
    font-size:.78rem;
  }

  .summary-left strong{
    font-size:1rem;
  }

  .summary-btn{
    padding:10px 14px;

    font-size:.9rem;

    border-radius:12px;
  }

}

/* MOBILE CLEAN VERSION */

@media(max-width:768px){

  body{
    padding-top:68px;
  }

  /* TOP NAVBAR */

  .topbar{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;
  }

  .navbar{
    min-height:58px;

    padding-top:4px;
    padding-bottom:4px;
  }

  .brand-wrap{
    gap:8px;
  }

  .brand-logo{
    width:24px;
    height:24px;
  }

  .brand-name{
    font-size:.56rem;

    max-width:120px;

    line-height:1.1;
  }

  .navbar-toggler{
    padding:3px 6px;

    font-size:.78rem;
  }

  /* PACKAGE NAV HIDE */

  .package-nav-wrap{
    display:none;
  }

  /* HERO */

  .hero-section{
    padding:18px 0 48px;
  }

  /* FLOATING SUMMARY */

  .floating-summary{
    width:90%;

    bottom:10px;

    padding:10px 12px;

    border-radius:16px;

    gap:10px;
  }

  .summary-left span{
    font-size:.72rem;
  }

  .summary-left strong{
    font-size:.95rem;
  }

  .summary-btn{
    padding:10px 12px;

    font-size:.85rem;

    border-radius:12px;
  }

}

/* EXTRA SMALL MOBILE CARDS */

@media(max-width:768px){

  .package-card,
  .coming-card{
    padding:18px;

    border-radius:20px;
  }

  .featured-card{
    padding:20px;

    border-radius:22px;

    gap:18px;
  }

  .featured-card h2{
    font-size:1.5rem;
  }

  .featured-card h3{
    font-size:1rem;
  }

  .featured-card p{
    font-size:.9rem;
    line-height:1.65;
  }

  .feature-grid{
    gap:8px;

    margin:18px 0;
  }

  .feature-grid div{
    padding:10px 12px;

    border-radius:14px;

    font-size:.82rem;
  }

  .featured-note{
    padding:12px 14px;

    border-radius:14px;

    font-size:.84rem;

    line-height:1.6;
  }

  .section-head{
    gap:12px;

    margin-bottom:24px;
  }

  .section-head span{
    width:42px;
    height:42px;

    border-radius:14px;

    font-size:.82rem;
  }

  .section-head h2{
    font-size:1.35rem;
  }

  .section-head p{
    font-size:.85rem;
  }

  .package-card h3{
    font-size:1.1rem;
  }

  .package-card p{
    font-size:.88rem;
  }

  .package-card li{
    font-size:.84rem;
  }

  .select-btn{
    margin-top:18px;

    padding:10px 12px;

    border-radius:12px;

    font-size:.84rem;
  }

  @media(max-width:768px){

  .hero-image{
    max-width:210px;
  }

  .hero-box h1{
    font-size:1.7rem;
  }

}

}