/* ============================================================
   NUTRI POP · 2026 REDESIGN LAYER
   Research sources: awwwards / reactbits / aceternity / uiverse / motionsites
   2026 shifts applied here:
   - glassmorphism retired → solid, low-noise surfaces with hairline borders
   - "gradient everything" retired → restrained two-tone light, used surgically
   - motion becomes product demo, not decoration
   - one or two tuned reveals per viewport, no bounce spam
   ============================================================ */

:root{
  --bg:#08080A; --surface:#101015; --surface2:#16161D;
  --ink:#FFFFFF; --muted:#A5A5B0; --dim:#6E6E7A;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --pink:#FF2D78; --rose:#FF6BA5; --yellow:#FFD23F; --orange:#FF8A3D;
  --cyan:#22D3EE; --violet:#A855F7; --green:#34D399;
  --r:20px; --shadow:0 24px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.16,.84,.24,1);
}

body{background:var(--bg);color:var(--ink)}
html{scroll-behavior:smooth}

/* ---------- background: restrained two-tone + masked dot field ---------- */
.aurora{background:#08080A!important}
.aurora .blob{display:none!important}
.aurora::before,.aurora::after{display:none!important}
.grid-bg{
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px)!important;
  background-size:34px 34px!important;opacity:1!important;
  -webkit-mask-image:radial-gradient(72% 58% at 50% 26%,#000 30%,transparent 100%);
  mask-image:radial-gradient(72% 58% at 50% 26%,#000 30%,transparent 100%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% -8%,rgba(255,45,120,.20),transparent 72%),
    radial-gradient(38% 34% at 88% 8%,rgba(255,210,63,.11),transparent 72%),
    radial-gradient(34% 30% at 6% 24%,rgba(34,211,238,.07),transparent 70%);
}
/* fine film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.h1-display{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(60px,11.4vw,168px);line-height:.9;letter-spacing:-.045em}
.ph-title{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(44px,7.4vw,96px);line-height:.95}
h2{font-size:clamp(34px,5.2vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.grad-t{background:linear-gradient(100deg,var(--pink),var(--orange) 42%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* kinetic per-line reveal, tighter easing for 2026 */
.h1-display .ln>span{transition:transform 1s var(--ease)!important}

/* ---------- nav: floating pill, shrinks on scroll, no blur box ---------- */
#hdr{padding:14px 0!important}
#hdr.solid{padding:8px 0!important}
#hdr.solid .nav{
  background:rgba(10,10,12,.72)!important;border-color:var(--line)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.55)!important;backdrop-filter:blur(14px)!important;
  border-radius:100px!important;padding:6px 8px 6px 18px!important}
.nav{border-radius:100px;transition:.4s var(--ease)}
.nl-top{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--muted);border-radius:100px;
  padding:9px 14px;transition:.3s var(--ease)}
.nl-top:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.nl-item.cur>.nl-top{color:var(--ink);background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px var(--line2)}
.nl-item.cur>.nl-top::after{content:"";display:block;height:2px;margin-top:5px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--yellow))}
.dropdown-in{background:#111117!important;border:1px solid var(--line2)!important;
  border-radius:20px;box-shadow:0 34px 80px rgba(0,0,0,.75)!important;backdrop-filter:none!important}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em}

/* ---------- buttons: solid candy gradient + magnetic + sheen ---------- */
.btn{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.012em;
  border-radius:100px!important;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),filter .3s}
.btn-p{background:linear-gradient(100deg,var(--pink),var(--orange) 55%,var(--yellow))!important;
  color:#12040A!important;border:none!important;box-shadow:0 10px 30px rgba(255,45,120,.34)}
.btn-p::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,.42),transparent 42%);
  transform:translateX(-100%);transition:transform .7s var(--ease)}
.btn-p:hover::after{transform:translateX(100%)}
.btn-p:hover{filter:brightness(1.08);box-shadow:0 16px 44px rgba(255,45,120,.5)}
.btn-g,.btn-s{background:rgba(255,255,255,.06)!important;border:1px solid var(--line2)!important;
  color:var(--ink)!important}
.btn-g:hover,.btn-s:hover{background:rgba(255,255,255,.12)!important;transform:translateY(-2px)}

/* ---------- surfaces: kill glass, add hairline + depth ---------- */
.card,.ov-card,.chart-card,.prod,.audit,.swot,.pest,.tl-card,.member,.pillar,.pt,
.pcard,.upsell,.soft-box,.shop-hero,.fstep,.src-note,.insight-box{
  background:var(--surface)!important;backdrop-filter:none!important;
  border:1px solid var(--line)!important;border-radius:var(--r)}
.chart-card{background:var(--surface2)!important}

/* spotlight, painted as a background layer so it can never fight with the
   existing ::before / ::after decorations these cards already carry */
.spot{
  background:
    radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.085),transparent 62%),
    var(--surface)!important;
  background-repeat:no-repeat!important;
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease)}
.spot:hover{
  background:
    radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 64%),
    var(--surface)!important}

/* hover identity: candy-tinted hairline + lift, no pseudo-element needed */
.gborder:hover{
  border-color:rgba(255,45,120,.42)!important;
  box-shadow:0 26px 64px rgba(255,45,120,.16),0 1px 0 rgba(255,255,255,.07) inset}


/* lift, no bounce */
.ov-card:hover,.prod:hover,.card:hover,.audit:hover{transform:translateY(-6px)!important;
  border-color:var(--line2)!important}

/* ---------- hero ---------- */
#hero{padding:150px 0 130px}
.hero-grid{gap:64px}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.kicker .pulse{background:var(--pink)}
.lede{color:var(--muted);font-size:clamp(16px,1.5vw,20px);line-height:1.6;max-width:52ch}
.trust span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.05em;
  color:var(--dim);text-transform:uppercase}
.hero-stats{border-top:1px solid var(--line);padding-top:26px;margin-top:34px}
.hstat b{font-family:'Space Grotesk',sans-serif}
.scroll-cue{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--dim)}

/* the lollipop becomes the product demo: mouse-driven rotation */
.candy-stage{transform-style:preserve-3d}
.lolly-ball{box-shadow:0 30px 80px rgba(255,45,120,.34),inset 0 -14px 30px rgba(0,0,0,.24)}
.lolly-ring{border-color:rgba(255,255,255,.14)!important}

/* ---------- reveal: tuned, no bounce ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- marquee: solid band, no glass ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#0B0B0E;color:var(--dim);font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  overflow:hidden;padding:15px 0;position:relative;z-index:3}
.mq-track{display:flex;width:max-content;white-space:nowrap;
  animation:mq 26s linear infinite;will-change:transform}
.mq-track span{padding-right:18px}
.mq-track i{font-style:normal;color:var(--pink);padding:0 14px}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* legacy tinted decorations: whispered, not loud */
.ov-card::before{opacity:.05!important}
.ov-card::after{opacity:.05!important}
.card::before{opacity:.05!important}
.audit::before{opacity:.04!important}
#candy{opacity:.55}

/* ---------- progress bar ---------- */
#progress{height:3px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan))}

/* ---------- cursor: candy core + trailing ring ---------- */
.cursor{background:var(--pink);mix-blend-mode:normal;width:7px;height:7px}
.cursor-d{border:1px solid rgba(255,45,120,.6);background:radial-gradient(circle,rgba(255,45,120,.22),transparent 70%);
  mix-blend-mode:normal}
.cursor-d.hot{border-color:var(--yellow);transform:scale(1.35)}

/* ---------- section headers ---------- */
.sec-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.sec-head h2{max-width:22ch}
.sec-head p{color:var(--muted);max-width:62ch}

/* ---------- product cards ---------- */
.prod-vis{background:linear-gradient(165deg,#14141A,#0C0C10)!important;
  border-bottom:1px solid var(--line)!important}
.prod h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
.price{font-family:'Space Grotesk',sans-serif}
.addbtn{border-radius:100px!important;font-family:'Space Grotesk',sans-serif;font-weight:700;
  background:rgba(255,255,255,.07)!important;border:1px solid var(--line2)!important}
.addbtn:hover{background:linear-gradient(100deg,var(--pink),var(--orange))!important;
  color:#12040A!important;border-color:transparent!important}
.f-btn{border-radius:100px!important;font-weight:600;transition:.3s var(--ease)}
.f-btn.on{background:linear-gradient(100deg,var(--pink),var(--yellow))!important;color:#12040A!important;
  border-color:transparent!important}

/* ---------- cart drawer & checkout: solid panels ---------- */
#cart .cart-drawer{background:#0E0E13!important;border-left:1px solid var(--line2)!important}
.cart-ft{background:#0A0A0E!important}
.checkout{border-radius:100px!important;font-family:'Space Grotesk',sans-serif}
#co .co-card{background:#0E0E13!important;border:1px solid var(--line2)!important;
  backdrop-filter:none!important}

/* ---------- footing ---------- */
footer{background:#08080A;border-top:1px solid var(--line)}
.foot-word{opacity:.06}
.foot-grid a:hover{color:var(--pink)}

/* ---------- misc surfaces ---------- */
.tblwrap{background:var(--surface)!important;border:1px solid var(--line)!important;
  backdrop-filter:none!important}
.ph-chips a{background:var(--surface2)!important;border-color:var(--line)!important;
  border-radius:100px!important}
.pulse-grid{background:var(--surface)!important;backdrop-filter:none!important}
.swot{background:var(--surface)!important;backdrop-filter:none!important}
.pest,.tl-card,.member,.pillar{background:var(--surface)!important}
.hint,.tip{color:var(--dim)}

/* ---------- hover state everywhere ---------- */
@media(hover:hover){
  a,button{transition:color .3s var(--ease),background .3s var(--ease),
    border-color .3s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
}

/* ---------- disabled / a11y ---------- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
}