/* ── ChemCheck — site styles ─────────────────────────────────────────────
   Design language follows the house template (deep ink, blueprint icon
   tiles, circuit traces, sheen) with ChemCheck's own mark and the three
   verdict colours. Motion patterns adapted from site-template/kit/
   motion.css. Reduced motion respected. No external fonts, no external
   assets — everything on this page is this page's own. */

:root{
  --ink:#070d18;
  --ink2:#0a1322;
  --panel:#0c1729;
  --panel2:#0e1a30;
  --line:rgba(120,170,255,.16);
  --line2:rgba(120,170,255,.32);
  --blue:#58a6ff;
  --blue2:#2f7fe0;
  --txt:#e9f2fc;
  --mut:#96a9c6;
  --mut2:#7186a3;
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#f87171;
  --radius:16px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--txt);font-family:var(--font);
  font-size:17px;line-height:1.6;
  background-image:
    radial-gradient(1100px 520px at 70% -80px, rgba(47,127,224,.16), transparent 60%),
    radial-gradient(800px 480px at -10% 30%, rgba(47,127,224,.07), transparent 60%);
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(7,13,24,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--txt);font-weight:700;font-size:20px;letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;flex:none}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;line-height:1}
nav.main{margin-left:auto;display:flex;gap:24px;align-items:center}
nav.main a{color:var(--mut);font-size:15.5px;font-weight:600}
nav.main a:hover{color:var(--txt);text-decoration:none}
nav.main a.cta{
  color:#06101f;background:linear-gradient(180deg,#7db8ff,#4a97f5);
  padding:9px 16px;border-radius:99px;font-weight:700;
  box-shadow:0 6px 18px rgba(47,127,224,.35);
}
nav.main a.cta:hover{color:#06101f;filter:brightness(1.06)}
@media(max-width:820px){ nav.main a:not(.cta){display:none} }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:86px 0 64px;text-align:center}
.hero::after{content:"";position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(140,190,255,.06),transparent);
  animation:sheenMove 7s ease-in-out infinite}
.hero .mark{width:104px;height:104px;margin:0 auto 22px;
  animation:floaty 7s ease-in-out infinite,glowPulse 5s ease-in-out infinite}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.08;margin:0 auto 20px;max-width:860px;letter-spacing:-.01em}
.hero h1 .hl{color:var(--blue)}
.hero p.lede{max-width:700px;margin:0 auto 30px;color:var(--mut);font-size:19.5px}
.hero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:99px;font-weight:700;font-size:16px;
  transition:transform .15s ease,box-shadow .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.primary{color:#06101f;background:linear-gradient(180deg,#7db8ff,#4a97f5);box-shadow:0 10px 24px rgba(47,127,224,.35)}
.btn.ghost{color:var(--txt);border:1px solid var(--line2);background:rgba(88,166,255,.05)}
.btn.ghost:hover{border-color:var(--blue)}
.hero .honest{margin-top:26px;color:var(--mut2);font-size:14.5px}
.hero .honest .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);
  margin-right:8px;vertical-align:1px;animation:dotPulseAmber 2.4s infinite}

/* ── Sections ───────────────────────────────────────────────────────── */
section.block{padding:72px 0 8px;position:relative}
section.block h2{font-size:clamp(27px,3.6vw,38px);line-height:1.15;margin:0 0 12px;letter-spacing:-.01em}
section.block .sub{color:var(--mut);max-width:720px;margin:0 0 36px;font-size:17.5px}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}

/* ── Video frame ────────────────────────────────────────────────────── */
.video-frame{
  position:relative;border:1px solid var(--line2);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.video-frame video{width:100%;aspect-ratio:16/9;background:#05090f;object-fit:cover}
.video-cap{display:flex;gap:12px;align-items:center;justify-content:center;color:var(--mut);
  font-size:15px;padding:16px 20px 26px;text-align:center}

/* ── Cards (four-part system) ───────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;overflow:hidden;background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px;
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(140,190,255,.12) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .8s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(120,185,255,.7);
  box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 24px rgba(47,129,247,.16)}
.card:hover::after{transform:translateX(120%)}
.card .ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:13px;
  background:radial-gradient(120% 120% at 30% 20%,rgba(88,166,255,.22),rgba(88,166,255,.05) 60%),
  linear-gradient(rgba(88,166,255,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(88,166,255,.10) 1px,transparent 1px);
  background-size:auto,11px 11px,11px 11px;border:1px solid rgba(88,166,255,.45);
  box-shadow:inset 0 0 14px rgba(88,166,255,.14),0 4px 14px rgba(0,0,0,.35);
  transition:box-shadow .35s,transform .35s}
.card:hover .ic{box-shadow:inset 0 0 18px rgba(88,166,255,.28),0 0 18px rgba(88,166,255,.35);transform:scale(1.05)}
.card .ic svg{width:28px;height:28px;filter:drop-shadow(0 0 5px rgba(88,166,255,.5))}
.card .step-no{font-family:var(--mono);font-size:12.5px;color:var(--mut2);letter-spacing:.14em}
.card h3{margin:4px 0 9px;font-size:21px}
.card p{margin:0 0 10px;color:var(--mut);font-size:16px}
.card p:last-child{margin-bottom:0}
.card p strong,.card li strong{color:var(--txt)}
.card ul{margin:6px 0 0;padding-left:19px;color:var(--mut);font-size:15.5px}
.card li{margin:4px 0}

/* proof band */
.band{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(88,166,255,.09),rgba(88,166,255,.02));
  padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
}
@media(max-width:700px){.band{grid-template-columns:1fr}}
.band .qr{width:92px;height:92px;flex:none;border-radius:12px;border:1px solid var(--line2);
  background:#0a1322;display:grid;place-items:center}
.band .qr svg{width:64px;height:64px}
.band h3{margin:0 0 6px;font-size:19px}
.band p{margin:0;color:var(--mut);font-size:15.5px}

/* ── Verdicts ───────────────────────────────────────────────────────── */
.verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.verdicts{grid-template-columns:1fr}}
.verdict{border-radius:var(--radius);padding:24px;border:1px solid var(--line);background:var(--panel)}
.verdict .word{font-size:20px;font-weight:800;line-height:1.3;margin:10px 0 10px}
.verdict p{color:var(--mut);font-size:15.5px;margin:0 0 10px}
.verdict p:last-child{margin-bottom:0}
.verdict .cure{border-top:1px dashed var(--line2);padding-top:10px;font-size:15px}
.verdict .cure b{color:var(--txt)}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:99px;border:1px solid}
.chip svg{width:15px;height:15px}
.chip.g{color:var(--green);border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08)}
.chip.a{color:var(--amber);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.chip.r{color:var(--red);border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08)}
.verdict.g{box-shadow:inset 0 2px 0 var(--green)}
.verdict.a{box-shadow:inset 0 2px 0 var(--amber)}
.verdict.r{box-shadow:inset 0 2px 0 var(--red)}

/* ── Two-column feature (Cora / evaluation) ─────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.panelbox{border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(170deg,var(--panel2),var(--panel));padding:26px}
.panelbox h3{margin:0 0 10px;font-size:20px}
.panelbox p,.panelbox li{color:var(--mut);font-size:16px}
.panelbox ul{padding-left:19px;margin:8px 0}
.panelbox li{margin:5px 0}
.wave{display:flex;gap:4px;align-items:flex-end;height:44px;margin:6px 0 14px}
.wave i{flex:1;background:linear-gradient(180deg,var(--blue),var(--blue2));border-radius:3px;
  animation:waveDance 2.6s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:.3s}.wave i:nth-child(4n){animation-delay:.6s}
.wave i:nth-child(5n){animation-delay:.9s}.wave i:nth-child(7n){animation-delay:1.2s}
.rule-line{border-left:3px solid var(--blue);padding:4px 0 4px 16px;margin:18px 0;color:var(--txt);
  font-size:18px;font-weight:600}

/* layers stack (rules) */
.layers{list-style:none;margin:14px 0 0;padding:0}
.layers li{display:flex;justify-content:space-between;gap:14px;padding:9px 13px;margin:6px 0;
  border:1px solid var(--line);border-radius:10px;background:rgba(88,166,255,.04);font-size:15px}
.layers li b{color:var(--txt)}
.layers li span{color:var(--mut2);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}

/* ── Long-form pages (support / privacy) ────────────────────────────── */
.page-head{padding:64px 0 10px}
.page-head h1{font-size:clamp(32px,4.6vw,46px);margin:0 0 12px;line-height:1.12}
.page-head p{color:var(--mut);max-width:700px;font-size:18px;margin:0}
.prose{max-width:760px;padding-bottom:20px}
.prose h2{font-size:24px;margin:38px 0 10px}
.prose p,.prose li{color:var(--mut);font-size:16.5px}
.prose strong{color:var(--txt)}
.prose ul{padding-left:20px}
.prose li{margin:5px 0}
.prose .updated{color:var(--mut2);font-size:14px;font-family:var(--mono)}
.contact-panel{border:1px solid var(--line2);border-radius:var(--radius);
  background:linear-gradient(170deg,var(--panel2),var(--panel));padding:26px;max-width:760px}
.contact-panel h2{margin-top:0}
.field{margin:14px 0}
.field label{display:block;font-size:14px;font-weight:700;color:var(--txt);margin-bottom:6px}
.field .box{border:1px solid var(--line);border-radius:10px;background:rgba(7,13,24,.55);
  color:var(--mut2);padding:11px 13px;font-size:15px;min-height:20px}
.field .box.tall{min-height:86px}
.note{border-left:3px solid var(--amber);padding:4px 0 4px 16px;color:var(--mut);margin:18px 0;font-size:15.5px}
.note b{color:var(--txt)}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.site{margin-top:84px;border-top:1px solid var(--line);background:var(--ink2)}
footer.site .wrap{padding-top:38px;padding-bottom:42px}
.foot-grid{display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot-brand{max-width:340px}
.foot-brand p{color:var(--mut2);font-size:14.5px;margin:10px 0 0}
.foot-links{display:flex;gap:52px;flex-wrap:wrap}
.foot-links h4{margin:0 0 10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.foot-links a{display:block;color:var(--mut);font-size:15px;margin:6px 0}
.foot-links a:hover{color:var(--txt)}
.foot-base{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;color:var(--mut2);font-size:13.5px}

/* ── Motion (adapted from the kit) ──────────────────────────────────── */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 10px 26px rgba(88,166,255,.22))}50%{filter:drop-shadow(0 14px 44px rgba(88,166,255,.45))}}
@keyframes sheenMove{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes dotPulseAmber{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(251,191,36,.45)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(251,191,36,0)}}
@keyframes waveDance{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.modwrap{position:relative}
.circuit-bg{position:absolute;left:0;right:0;top:-14px;width:100%;height:330px;opacity:.30;pointer-events:none;z-index:0}
.circuit-bg .trace{stroke-dasharray:7 9;animation:dashflow 7s linear infinite}
.circuit-bg .trace.t2{animation-duration:10s;animation-direction:reverse}
.circuit-bg .trace.t3{animation-duration:8.5s}
.circuit-bg .node{opacity:.85;animation:nodepulse 3.2s ease-in-out infinite}
.circuit-bg .node.n2{animation-delay:1.1s}.circuit-bg .node.n3{animation-delay:2s}
@keyframes dashflow{to{stroke-dashoffset:-320}}
@keyframes nodepulse{0%,100%{opacity:.35}50%{opacity:1}}
.modwrap>h2,.modwrap>.sub,.modwrap>.cards,.modwrap>.band{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}