/* Theme: Neural Blue — deep-space navy, electric cyan glow, magenta signal accents (from the Biohacking Secrets cover).
   Futuristic HUD look: starfield + grid backdrop, glass cards, glowing gradient buttons, framed and colour-graded media.
   Tokens first; the rules below only restyle existing site.css components, so every page picks them up. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");
:root{
  --accent:#38b6ff; --accent-2:#7dd3fc; --accent-glow:rgba(56,182,255,.45); --accent-soft:rgba(56,182,255,.14); --on-accent:#021022;
  --cta2:#ff3ea5; --on-cta2:#fff; --cta2-glow:rgba(255,62,165,.45);
  --bg:#030814; --bg2:#06101f; --bg3:#0a1730; --line:rgba(125,200,255,.16); --hero-bg:transparent; --bar-bg:rgba(3,8,20,.72); --media-bg:#020611;
  --glass:rgba(4,12,28,.78); --overlay:rgba(1,4,12,.82); --input-bg:rgba(2,8,20,.75); --tint:rgba(56,182,255,.06);
  --text:#e6f1ff; --text-2:#b9cae4; --muted:#8094b5; --strong:#ffffff;
  --paper:#040b1b; --ink:#e6f1ff;
  --chip-on:#38b6ff; --on-chip-on:#021022;
  --green:#34e0a1; --red:#ff5c7a; --gold:#ffd166;
  --need-bg:#2a0b22; --need-text:#ffc2e2; --ph-text:#bfe6ff;
  --display:"Sora",system-ui,sans-serif; --display-case:none; --display-weight:600; --display-track:-.025em; --display-lh:1.08;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:18px; --btn-radius:12px;
  --glass-card:linear-gradient(180deg,rgba(18,40,78,.55),rgba(8,20,42,.5));
  --glass-line:rgba(125,200,255,.18);
}

/* backdrop: nebula glow + starfield + faint HUD grid, fixed behind every page */
html{background:var(--bg)}
body{background:
  radial-gradient(1100px 620px at 85% -10%,rgba(56,182,255,.16),transparent 62%),
  radial-gradient(900px 520px at -15% 35%,rgba(255,62,165,.07),transparent 60%),
  radial-gradient(1000px 700px at 50% 115%,rgba(37,99,235,.12),transparent 60%),
  var(--bg) fixed}
body:before{content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1px 1px at 72% 9%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 66%,rgba(190,230,255,.7),transparent 60%),
    radial-gradient(1px 1px at 88% 52%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 88%,rgba(255,180,230,.55),transparent 60%),
    radial-gradient(1px 1px at 58% 34%,rgba(255,255,255,.45),transparent 60%),
    linear-gradient(rgba(125,200,255,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(125,200,255,.045) 1px,transparent 1px) 0 0/64px 64px;
  background-size:420px 420px,520px 520px,610px 610px,470px 470px,700px 700px,380px 380px,64px 64px,64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 95%);mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 95%);
  animation:drift 90s linear infinite}
@keyframes drift{to{transform:translate3d(64px,64px,0)}}

/* type */
h1.dsp,.hero h1,.uhero h1{text-shadow:0 0 40px rgba(56,182,255,.22)}
h2.dsp{font-size:clamp(32px,5.4vw,58px)}
.hero h1{font-size:clamp(34px,5.6vw,74px)}
.uhero h1{font-size:clamp(32px,5.2vw,60px)}
.pk{background:linear-gradient(92deg,#a5e4ff 0%,#38b6ff 45%,#8b7bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.kick{color:var(--accent-2)}
.kick:before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 1px 0;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);vertical-align:middle;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* buttons: glowing gradient with a light sweep */
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,#5cc8ff 0%,#2a8cff 55%,#3b5bff 100%);color:#fff;font-weight:700;font-size:clamp(17px,2.1vw,20px);letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(165,228,255,.55) inset,0 10px 34px rgba(42,140,255,.45),0 0 60px rgba(56,182,255,.25)}
.btn:hover{box-shadow:0 0 0 1px rgba(200,240,255,.8) inset,0 14px 44px rgba(42,140,255,.6),0 0 80px rgba(56,182,255,.35)}
.btn:before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{0%,70%{left:-60%}100%{left:130%}}
.demo-tc a.btn{color:#fff;font:700 18px/1.1 var(--display)}

/* bars */
.bar,.fbar{background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-line)}
.brand{font-weight:600;letter-spacing:.06em}
.bar .lnk{border-radius:10px;background:linear-gradient(135deg,#ff5cb4,#e5178a);box-shadow:0 0 0 1px rgba(255,170,215,.5) inset,0 8px 26px var(--cta2-glow)}
.alert{background:linear-gradient(90deg,#c0136f,#ff3ea5 50%,#c0136f);font-weight:600}
.ticker{background:linear-gradient(90deg,rgba(56,182,255,.12),rgba(56,182,255,.22),rgba(56,182,255,.12));color:var(--accent-2);border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line)}
.secnav{background:rgba(3,8,20,.8);border-bottom:1px solid var(--glass-line)}
.secnav a.on{box-shadow:0 0 18px var(--accent-glow)}
.secnav a.buy{background:linear-gradient(135deg,#ff5cb4,#e5178a);color:#fff}

/* sections: transparent so the backdrop shows; .alt is a faint glass band */
.hero .headline{background:radial-gradient(800px 340px at 50% 100%,rgba(56,182,255,.18),transparent 70%)}
.alt{background:linear-gradient(180deg,rgba(10,26,54,.5),rgba(6,16,34,.42));border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line)}
.story{background:radial-gradient(900px 400px at 50% 50%,rgba(56,182,255,.12),transparent 70%),var(--paper);border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line)}
.story p{font-family:var(--display);font-weight:300;letter-spacing:-.025em}
.story p em{color:var(--accent-2);text-shadow:0 0 24px rgba(56,182,255,.5)}
.uhero{background:radial-gradient(800px 380px at 50% 0,rgba(56,182,255,.2),transparent 70%)}
.vstrip{background:rgba(4,12,28,.7);border-bottom:1px solid var(--glass-line)}
.phases{border-top:1px solid var(--glass-line)}
.controls button{background:rgba(10,24,50,.7);border-color:var(--glass-line)}

/* glass cards */
.ftf .card,.rv,.pillars div,.cmp .cell,.summary,.ty-steps .card,.paths .card,.quote-card,.modal-box{background:var(--glass-card);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 50px rgba(0,0,0,.35)}
.modal-box{background:linear-gradient(180deg,#0b1a36,#06101f);border-color:rgba(125,200,255,.4);box-shadow:0 0 0 1px rgba(56,182,255,.15),0 30px 90px rgba(0,0,0,.6),0 0 80px rgba(56,182,255,.18)}
.mods li{background:rgba(56,182,255,.06);border:1px solid var(--glass-line)}
.mods .n{font-family:var(--mono);font-weight:700;font-size:16px;padding-top:2px;text-shadow:0 0 12px var(--accent-glow)}
.pillars b{background:linear-gradient(180deg,#e9f7ff,#38b6ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700}
.pillars h3{font-weight:600}
.cmp .hd.us{background:linear-gradient(135deg,#5cc8ff,#2a8cff);color:#fff;box-shadow:0 0 30px rgba(56,182,255,.3)}
.cmp .hd.them{background:rgba(10,24,50,.6);border:1px solid var(--glass-line)}
.cmp .cell{background:rgba(6,16,34,.55)}
.offer,.buybox{background:linear-gradient(180deg,rgba(16,38,76,.75),rgba(6,16,34,.8));border:1px solid rgba(125,200,255,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(56,182,255,.12),0 30px 90px rgba(0,0,0,.5),0 0 90px rgba(56,182,255,.16)}
.price b{font-weight:700;letter-spacing:-.03em;text-shadow:0 0 30px rgba(56,182,255,.35)}
.seal{border-color:var(--accent);box-shadow:0 0 30px rgba(56,182,255,.25),inset 0 0 30px rgba(56,182,255,.12)}
.ty-steps .n{background:linear-gradient(135deg,#5cc8ff,#2a8cff);color:#fff;box-shadow:0 0 22px var(--accent-glow)}
.progress span.on{background:linear-gradient(90deg,#5cc8ff,#3b5bff);box-shadow:0 0 12px var(--accent-glow)}
.progress span.done{box-shadow:0 0 10px rgba(52,224,161,.5)}
.modal input{border-color:var(--glass-line)}
.faq details{border-bottom-color:var(--glass-line)}
footer{border-top:1px solid var(--glass-line)}
.sticky-cta{border-top:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* media: the photos are rendered in the night palette (assets/gen); light scanlines and HUD corner brackets so photos sit inside the look */
.zz-media,.split .pic,.ftf .pic,.media,.vframe{position:relative;border:1px solid var(--glass-line);box-shadow:0 0 0 1px rgba(56,182,255,.06),0 24px 60px rgba(0,0,0,.5),0 0 50px rgba(56,182,255,.1)}
.vframe{border-left:0;border-right:0}
.zz-media:after,.split .pic:after,.ftf .pic:after,.vframe:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(56,182,255,.06),rgba(3,8,20,0) 40%,rgba(3,8,20,.3));
  mix-blend-mode:normal}
.ftf .pic{position:relative}
.zz-media:before,.split .pic:before,.ftf .pic:before,.media:before{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) top left/2px 18px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top right/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) top right/2px 18px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom left/2px 18px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/2px 18px no-repeat;
  opacity:.85;filter:drop-shadow(0 0 4px var(--accent))}
.media:has(audio):before,.media:has(.ph):before{display:none}
.book3d img{box-shadow:-2px 0 0 rgba(255,255,255,.25) inset,18px 24px 60px rgba(0,0,0,.6),0 0 70px rgba(56,182,255,.35)}
.secure img{filter:brightness(1.05)}

/* reveal on scroll where the browser supports scroll-driven animation (no JS) */
@supports (animation-timeline:view()){
  .zz-row,.ftf .card,.pillars div,.rv,.mods li,.cmp .cell,.paths .card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  body:before,.btn:before,.kick:before{animation:none}
  .zz-row,.ftf .card,.pillars div,.rv,.mods li,.cmp .cell,.paths .card{animation:none}
}

/* upsell pages */
.mod-card,.player{background:var(--glass-card);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.alt .mod-card{background:var(--glass-card)}
.up-card .buybox{box-shadow:0 0 0 1px rgba(56,182,255,.12),0 30px 90px rgba(0,0,0,.5),0 0 90px rgba(56,182,255,.16)}