/* PeptoPurity shared stylesheet - dark clinical premium */

:root{
  /* ground */
  --paper:#060A0C; --paper-2:#080F11;
  --surface:#0D1517; --surface-2:#121C1F; --surface-3:#172326;
  /* ink */
  --ink:#EAF3F2; --ink-2:#A7BCBC; --muted:#6E8488;
  /* structure */
  --rule:#1B282B; --rule-strong:#2A3B3E;
  --hair:rgba(255,255,255,.055);
  /* accents */
  --accent:#4FD1BC; --accent-deep:#1F8F80;
  --accent-soft:#0E2A28; --accent-line:#2E6C65;
  --gold:#D8B36A; --gold-soft:#2A2313; --gold-line:#6A5629;
  --warn:#E0B255; --warn-soft:#2B2312; --warn-line:#6B5320;
  --hot:#EF8B73; --hot-soft:#331B17; --hot-line:#7A3A31;
  /* depth */
  --shadow:0 1px 0 var(--hair) inset, 0 2px 4px rgba(0,0,0,.4), 0 24px 60px -34px rgba(0,0,0,.95);
  --glow:0 0 0 1px var(--accent-line), 0 18px 50px -26px rgba(79,209,188,.5);
  --radius:12px; --radius-sm:8px;
  color-scheme:dark;
}

/* explicit light escape hatch, kept so the palette is not lost */
:root[data-theme="light"]{
  --paper:#F1F4F5; --paper-2:#E9EEEF;
  --surface:#FFFFFF; --surface-2:#E7EDEE; --surface-3:#DFE7E8;
  --ink:#0E1719; --ink-2:#39494D; --muted:#6A7C80;
  --rule:#D5DEE0; --rule-strong:#B5C4C7;
  --hair:rgba(14,23,25,.04);
  --accent:#0C6B62; --accent-deep:#08897A;
  --accent-soft:#DCEBE8; --accent-line:#8FC4BC;
  --gold:#8A6B1F; --gold-soft:#F3EAD3; --gold-line:#D3BE84;
  --warn:#8C5D06; --warn-soft:#F5E9D0; --warn-line:#D9B771;
  --hot:#9E362A; --hot-soft:#F6E0DB; --hot-line:#DCA096;
  --shadow:0 1px 2px rgba(14,23,25,.05), 0 10px 30px -20px rgba(14,23,25,.35);
  --glow:0 0 0 1px var(--accent-line), 0 18px 40px -26px rgba(12,107,98,.4);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; position:relative; min-height:100%;
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@supports (overflow-x:clip){body{overflow-x:clip}}

/* ---------------------------------------------------------- ambient aura */
.aura{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.aura b{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); will-change:transform;
}
.aura .a1{
  width:62vw; height:62vw; max-width:840px; max-height:840px;
  top:-22vw; left:-14vw; opacity:.55;
  background:radial-gradient(circle,rgba(31,143,128,.6) 0%,rgba(31,143,128,0) 68%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.aura .a2{
  width:52vw; height:52vw; max-width:720px; max-height:720px;
  top:46vh; right:-18vw; opacity:.5;
  background:radial-gradient(circle,rgba(216,179,106,.26) 0%,rgba(216,179,106,0) 66%);
  animation:drift-b 34s ease-in-out infinite alternate;
}
:root[data-theme="light"] .aura b{opacity:.2}
@keyframes drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7vw,6vh,0) scale(1.14)}
}
@keyframes drift-b{
  from{transform:translate3d(0,0,0) scale(1.05)}
  to{transform:translate3d(-6vw,-8vh,0) scale(.9)}
}
/* faint lab grid, keeps the ground from reading flat */
.aura .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 78% 58% at 50% 0%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 0%,#000 18%,transparent 76%);
}

/* ------------------------------------------------------- scroll progress */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:80;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--gold));
  box-shadow:0 0 14px rgba(79,209,188,.55);
  will-change:transform;
}

img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
::selection{background:var(--accent-soft); color:var(--ink)}

.wrap{max-width:880px; margin:0 auto; padding:0 28px 88px; position:relative; z-index:1}
section[id],[id]:target{scroll-margin-top:92px}

/* ---------------------------------------------------------------- masthead */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  position:sticky; top:0; z-index:40;
  margin:0 -28px; padding:26px 28px 14px;
  transition:padding .35s ease;
}
/* the frosted bar must span the viewport, not just the text column, so it
   rides on a full-bleed pseudo-element rather than the masthead box itself */
.masthead::before{
  content:""; position:absolute; top:0; bottom:0; z-index:-1;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:rgba(6,10,12,.72);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule);
  opacity:0; transition:opacity .35s ease;
}
.masthead.stuck::before{opacity:1}
.masthead.stuck{padding-top:14px}
:root[data-theme="light"] .masthead::before{background:rgba(241,244,245,.8)}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink);
}
.mark{
  width:15px; height:15px; border-radius:50%;
  border:2.5px solid var(--accent); position:relative; flex:none;
  box-shadow:0 0 14px rgba(79,209,188,.45);
}
.mark::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
  animation:pulse-dot 3.4s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.7)}}
.masthead nav{
  display:flex; gap:22px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
}
.masthead nav a{color:var(--muted); text-decoration:none; position:relative; padding-bottom:3px}
.masthead nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.masthead nav a:hover{color:var(--accent)}
.masthead nav a:hover::after,.masthead nav a[aria-current]::after{transform:scaleX(1)}
.masthead nav a[aria-current]{color:var(--accent)}

/* -------------------------------------------------------------------- type */
h2{
  font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:31px;
  letter-spacing:-.014em; margin:0 0 8px; text-wrap:balance;
}
.sec-tag{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.sec-tag::before{
  content:""; width:18px; height:1px; background:var(--accent); flex:none;
  box-shadow:0 0 8px rgba(79,209,188,.7);
}
p{margin:0 0 18px; max-width:64ch}
.lead{color:var(--ink-2); max-width:62ch; margin-bottom:26px}

/* ------------------------------------------------------------ 3D surfaces */
.card{
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 62%);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .5s ease;
}
.card::after{
  /* specular sheen tracking the pointer */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(79,209,188,.13),transparent 62%);
  transition:opacity .4s ease;
}
.card:hover{border-color:var(--accent-line); box-shadow:var(--glow)}
.card:hover::after{opacity:1}
.card h3{
  font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:20px;
  margin:0 0 8px; letter-spacing:-.012em;
}
.card p{font-size:14px; color:var(--ink-2); margin:0; max-width:none}

/* ------------------------------------------------------------------ signup */
.signup{
  margin-top:30px; border-radius:var(--radius); padding:28px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface) 70%);
  border:1px solid var(--rule); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.signup::before{
  content:""; position:absolute; top:-60%; right:-10%; width:60%; height:200%;
  background:radial-gradient(circle,rgba(79,209,188,.13),transparent 62%);
  pointer-events:none;
}
.signup h3{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:23px; margin:0 0 8px; position:relative}
.signup p{font-size:14.5px; color:var(--ink-2); margin:0 0 18px; max-width:56ch; position:relative}
form{display:flex; flex-wrap:wrap; gap:10px; position:relative}
input[type=email]{
  flex:1 1 260px; padding:12px 15px; font:inherit; font-size:15px;
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--radius-sm);
  transition:border-color .25s ease, box-shadow .25s ease;
}
input[type=email]:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none}
input[type=email]::placeholder{color:var(--muted)}
button{
  padding:12px 24px; font:inherit; font-size:15px; font-weight:600;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  color:#04100E; border:none; border-radius:var(--radius-sm);
  cursor:pointer; position:relative;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  box-shadow:0 10px 26px -14px rgba(79,209,188,.8);
}
button:hover{transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(79,209,188,.95)}
button:active{transform:translateY(0)}
:root[data-theme="light"] button{color:var(--paper)}
.fineprint{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); margin:14px 0 0; position:relative}

/* ------------------------------------------------------------------ footer */
footer{
  margin-top:88px; padding-top:26px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between;
  font-size:13.5px; color:var(--muted); position:relative;
}
footer::before{
  content:""; position:absolute; top:-1px; left:0; width:120px; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
footer p{margin:0; max-width:52ch; font-size:13px}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}

/* ------------------------------------------------------------ scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--rd,0ms);
}
[data-reveal].in{opacity:1; transform:none}
/* deeper 3D entrance for panels */
[data-reveal="lift"]{transform:perspective(1200px) translate3d(0,34px,-70px) rotateX(7deg)}
[data-reveal="lift"].in{transform:none}

/* -------------------------------------------------------- the 3D helix */
.helix-stage{
  position:relative; margin:44px 0 0; height:300px;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 108%,rgba(31,143,128,.16),transparent 62%),
    linear-gradient(165deg,var(--surface-2),var(--paper-2) 78%);
  box-shadow:var(--shadow); overflow:hidden;
  transform:translate3d(0,var(--depth,0px),0);
  transition:transform .35s ease-out;
}
.helix-stage canvas{display:block; width:100%; height:100%; cursor:crosshair}
.helix-stage figcaption{
  position:absolute; left:20px; bottom:16px; margin:0; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); pointer-events:none;
}
.helix-stage figcaption b{color:var(--accent); font-weight:500}
.helix-stage .hint{
  position:absolute; right:20px; bottom:16px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); opacity:.65; pointer-events:none;
}
@media (max-width:640px){
  .helix-stage{height:220px}
  .helix-stage .hint{display:none}
  .helix-stage figcaption .det{display:none}
}

/* ------------------------------------------------ shared surface upgrades
   These use body-scoped selectors so they win against the per-page inline
   <style> blocks without needing every page rewritten. */
body .latest,body .rel,body .verdict,body .viz,body .disclosure,
body .note,body .faq,body .std,body .ladder,body .signup,body .card,
body .stance,body .hub-card{border-radius:var(--radius)}
body .note{border-radius:0 var(--radius) var(--radius) 0}

body .latest,body .rel,body .verdict,body .viz,body .disclosure{
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 64%);
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .5s ease;
}
body .latest::before,body .rel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
  opacity:0; transition:opacity .35s ease;
}
body .latest:hover,body .rel:hover{border-color:var(--accent-line); box-shadow:var(--glow)}
body .latest:hover::before,body .rel:hover::before{opacity:1}

body .tilting{transition:transform .1s linear}

/* the chart tooltip ships as an inverted white block, which glares on this
   ground; make it an elevated dark panel instead */
body .viz-tip{
  background:var(--surface-3); color:var(--ink);
  border:1px solid var(--accent-line); border-radius:var(--radius-sm);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
}

body .faq>div,body .std>div,body .ladder .rung{
  transition:background .3s ease, box-shadow .3s ease;
}
body .faq>div:hover,body .std>div:hover,body .ladder .rung:hover{background:var(--surface-2)}
body tbody tr{transition:background .25s ease}
body tbody tr:hover{background:var(--surface-2)}

@media (max-width:640px){
  .wrap{padding:0 20px 64px}
  .masthead{margin:0 -20px; padding:20px 20px 12px}
  h2{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  [data-reveal]{opacity:1!important; transform:none!important}
  .progress{display:none}
}