@import url("./tokens.css");
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--grad-hero), var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}
a{ color: rgba(238,240,255,.88); text-decoration:none; }
a:hover{ color: var(--text); }
.container{ width: var(--container); margin-inline:auto; }

#bg3d{ position: fixed; inset:0; width:100vw; height:100vh; display:block; z-index:-2; }

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(to bottom, rgba(5,5,16,.78), rgba(5,5,16,.30));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem 0; }
.logo{ display:inline-flex; align-items:center; gap:.7rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.logo-badge{
  padding:.55rem .8rem; border:1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.04); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.nav-toggle{ display:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); border-radius: .9rem; padding:.55rem .65rem; color:var(--text); }
.burger{ display:block; width:22px; height:14px; position:relative; }
.burger:before,.burger:after{ content:""; position:absolute; left:0; right:0; height:2px; background:rgba(238,240,255,.86); border-radius:2px; top:0; }
.burger:after{ top:auto; bottom:0; }
.burger{ background: rgba(238,240,255,.86); height:2px; top:6px; border-radius:2px; }

.nav-menu{ display:flex; gap:.8rem; align-items:center; }
.nav-link{
  color:var(--muted); padding:.55rem .7rem; border-radius:.8rem; border:1px solid transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-link:hover{ color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); transform: translateY(-1px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.1rem; border-radius: 1rem; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: var(--text); cursor:pointer;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.20); box-shadow: var(--shadow-1); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn-primary{
  color:#00160a; font-weight:900; border-color: transparent; background: var(--grad-brand);
  position:relative; overflow:hidden;
}
.btn-primary::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%); transition: transform .65s var(--ease);
}
.btn-primary:hover::after{ transform: translateX(120%); }
.btn-ghost{ background: rgba(255,255,255,.03); }
.btn-small{ padding:.7rem .9rem; border-radius:.9rem; font-size:.92rem; }
.btn-link{ border-color: transparent; background: transparent; padding:.55rem .2rem; color: rgba(238,240,255,.78); }
.btn-link:hover{ box-shadow:none; background: transparent; border-color: transparent; color: var(--text); transform:none; }

.hero{ padding: 4.4rem 0 2.8rem; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
.kicker{ color: rgba(238,240,255,.62); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
.hero-title{ margin: .9rem 0 .7rem; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.03; letter-spacing:-.02em; font-weight: 900; }
.gradient-text{
  background: linear-gradient(90deg, var(--mint), var(--violet), var(--blue));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: 0 0 26px rgba(73,255,208,.12);
}
.hero-subtitle{ color: var(--muted); font-size: 1.05rem; line-height:1.6; max-width: 60ch; }
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem; }

/* Epic hero card (packaging mock) */
.pack{
  position:relative; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: var(--shadow-2); overflow:hidden; min-height: 360px;
}
.pack::before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(520px 320px at 20% 10%, rgba(73,255,208,.18), transparent 65%),
              radial-gradient(520px 320px at 90% 40%, rgba(53,183,255,.14), transparent 60%),
              radial-gradient(520px 320px at 60% 95%, rgba(255,122,47,.12), transparent 65%);
  pointer-events:none;
}
.pack-inner{ position:relative; padding: 1.4rem 1.2rem; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.mock{ display:grid; place-items:center; perspective: 1100px; margin-top: .6rem; }
.box3d{
  width: 260px; height: 330px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  transform: rotateY(-18deg) rotateX(8deg);
  position:relative; overflow:hidden;
}
.box3d::before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(420px 260px at 15% 10%, rgba(73,255,208,.22), transparent 60%),
              radial-gradient(420px 260px at 90% 40%, rgba(140,124,255,.16), transparent 60%);
}
.box3d .label{ position:absolute; inset:0; padding: 1.2rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.label-top{ display:flex; align-items:center; justify-content:space-between; font-weight:900; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; }
.chip{ padding:.35rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22); color: rgba(238,240,255,.82); font-weight:700; }
.label-mid{ margin-top: .2rem; font-size: 2rem; font-weight: 900; letter-spacing: -.02em; }
.label-sub{ color: var(--muted); }
.label-foot{ margin-top:auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: .9rem; display:flex; justify-content:space-between; align-items:center; color: rgba(238,240,255,.72); font-size:.92rem; }

.section{ padding: 3.2rem 0; }
.section-head{ margin-bottom: 1.4rem; }
.section-head h2{ margin:0 0 .35rem; font-size: 2.05rem; letter-spacing:-.01em; }
.muted{ color: var(--muted); }
.legal{ color: rgba(238,240,255,.55); font-size:.88rem; line-height:1.55; }

.cards{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.card{
  border-radius: var(--r-lg);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 1.1rem 1rem;
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transform: translateY(0);
}
.card::before{
  content:""; position:absolute; inset:-2px;
  opacity:0; transition: opacity var(--dur-3) var(--ease);
  background: radial-gradient(320px 220px at 50% 0%, rgba(73,255,208,.22), transparent 70%);
  pointer-events:none;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.card:hover::before{ opacity:1; }
.card h3{ margin:.8rem 0 .2rem; letter-spacing:.10em; }
.card-actions{ display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-top: .95rem; }
.icon-wrap{ width:56px; height:56px; border-radius: 1.1rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.icon{ font-size: 1.35rem; }

/* Facts table */
.facts{
  border-radius: var(--r-lg);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.facts-head{
  padding: .9rem 1rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.facts-title{ font-weight: 900; letter-spacing:.10em; text-transform:uppercase; }
.facts-sub{ color: rgba(238,240,255,.72); }
table{ width:100%; border-collapse:collapse; }
th,td{ padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.10); text-align:left; }
th{ color: rgba(238,240,255,.82); font-weight:800; font-size:.95rem; }
td{ color: rgba(238,240,255,.72); }
tr:last-child td{ border-bottom:none; }

/* Checkout layout */
.checkout-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; align-items:start; }
.panel{
  border-radius: var(--r-lg);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  overflow:hidden;
}
.panel-inner{ padding: 1rem; }
.line{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.line:last-child{ border-bottom:none; }
.qty{ display:inline-flex; gap:.4rem; align-items:center; }
.qty button{ all:unset; cursor:pointer; padding:.35rem .55rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.qty button:hover{ background: rgba(255,255,255,.06); }
.total{ font-weight:900; letter-spacing:.04em; }

.badge{ display:inline-flex; align-items:center; justify-content:center; min-width: 24px; padding: .15rem .45rem; border-radius: 999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.20); color: rgba(238,240,255,.80); font-size:.85rem; }

.faq details{
  border-radius: var(--r-md);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: .8rem 1rem;
  margin-bottom: .8rem;
}
.faq summary{ cursor:pointer; font-weight:900; }
.faq summary::-webkit-details-marker{ display:none; }

.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,5,16,.60);
  backdrop-filter: blur(12px) saturate(140%);
  padding: 2.2rem 0 1.4rem;
}
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.footer-title{ font-weight:900; margin-bottom:.4rem; }
.footer-bottom{
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

@media (max-width: 1060px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .hero-grid{ grid-template-columns: 1fr; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    position:absolute; right: 1rem; top: 72px;
    flex-direction:column; align-items:stretch;
    min-width: 260px;
    padding: .8rem;
    border-radius: var(--r-lg);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(5,5,16,.88);
    box-shadow: var(--shadow-1);
    display:none;
  }
  .nav-menu.open{ display:flex; }
  .nav-link, .btn{ width:100%; text-align:center; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}