/* ============================================================
   Atmosoft v2 design system  (ATMO-11 / ATMO-23)
   Adopted from the approved prototype design language.
   Type: Jost (headings) · EB Garamond (body, serif) · JetBrains Mono (labels)
   Full light + dark themes as tokens. Light is the readable default.
   Loaded by: index.html + product pages (first pass). Site-wide later.
   ============================================================ */

/* ---- Tokens: LIGHT is the bare :root default (readable default) ---- */
:root{
  --ground:#F7F5FC; --panel:#FFFFFF; --soft:#EDE8FA; --line:#DED6F2;
  --ink:#1A1533; --muted:#5A5473; --faint:#8A83A3;
  --primary:#462AB5; --accent:#6F55D7; --accent-soft:#EDE7FB;
  --verify:#2E8B73; --verify-soft:#E1F1EB; --critical:#D65648; --critical-soft:#FBE7E4;
  --rail:linear-gradient(#6F55D7,#462AB5);
  --shadow:0 1px 2px rgba(26,21,51,.05), 0 12px 32px -18px rgba(70,42,181,.25);
  --disp:'Jost','Century Gothic',system-ui,sans-serif;
  --body:'EB Garamond',Garamond,Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
}
/* System-dark fallback for no-JS users who have NOT explicitly chosen light.
   (The inline head script sets data-theme="light" by default, so JS users get light.) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){
  --ground:#100E1C; --panel:#191627; --soft:#201B33; --line:#2C2742;
  --ink:#ECE9F8; --muted:#A9A2C4; --faint:#7A7397;
  --primary:#B7A2FF; --accent:#9A82F0; --accent-soft:#241E3B;
  --verify:#5FC4A6; --verify-soft:#16281F; --critical:#F0897C; --critical-soft:#2C1A17;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
}}
/* Explicit dark (toggle) — wins in both directions */
:root[data-theme="dark"]{
  --ground:#100E1C; --panel:#191627; --soft:#201B33; --line:#2C2742;
  --ink:#ECE9F8; --muted:#A9A2C4; --faint:#7A7397;
  --primary:#B7A2FF; --accent:#9A82F0; --accent-soft:#241E3B;
  --verify:#5FC4A6; --verify-soft:#16281F; --critical:#F0897C; --critical-soft:#2C1A17;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0 0 1em}
img{max-width:100%}
.mono{font-family:var(--mono)}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.measure{max-width:64ch}

/* accent rail — the brand's margin bar */
.rail{position:fixed;left:0;top:0;bottom:0;width:6px;background:var(--rail);z-index:60}
@media(max-width:640px){.rail{width:4px}}

/* ---- Atmobot mascot slot (ATMO-22) --------------------------------------
   Reserved top-corner mount point for the Atmobot mascot widget on every page.
   Placeholder only; the character is still being finalized. Do NOT invent one.
   Kept empty + non-interactive until the widget ships; then mount into #atmobot-mascot. */
.mascot-slot{position:fixed;top:88px;right:16px;width:108px;height:108px;z-index:55;
  pointer-events:none}
.mascot-slot svg{width:100%;height:100%;display:block;overflow:visible}
.mascot-slot .bob{animation:atmobot-bob 4.5s ease-in-out infinite;transform-origin:50% 50%}
@keyframes atmobot-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@media(max-width:820px){.mascot-slot{width:76px;height:76px;top:78px;right:8px}}
@media(prefers-reduced-motion:reduce){.mascot-slot .bob{animation:none}}

/* ---- nav ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;height:76px}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.brand img{height:60px;width:auto;display:block}
@media(max-width:640px){.nav{height:66px}.brand img{height:48px}}
/* theme-aware logo: dark wordmark on light theme, white wordmark on dark */
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]) .brand .logo-light{display:none}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand .logo-dark{display:block}}
.links{display:flex;align-items:center;gap:2px}
.links a{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--muted);
  text-decoration:none;padding:9px 13px;border-radius:8px;transition:.15s}
.links a:hover{color:var(--ink);background:var(--soft)}
.links a[aria-current="page"]{color:var(--primary);background:var(--accent-soft)}

/* dropdown groups (Products, Services) */
.has-drop{position:relative}
.drop-toggle{font-family:var(--disp);font-weight:500;font-size:15px;color:var(--muted);
  background:none;border:0;padding:9px 11px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:.15s}
.drop-toggle:hover{color:var(--ink);background:var(--soft)}
.drop-toggle .caret{font-size:11px;opacity:.7}
.drop{position:absolute;top:100%;left:0;margin-top:0;min-width:210px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 8px 8px;
  display:none;flex-direction:column;gap:2px;z-index:70}
/* transparent hover bridge: keeps :hover continuous from the toggle into the panel — no dead-gap */
.has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;display:none}
.has-drop:hover::after,.has-drop:focus-within::after,.has-drop.open::after{display:block}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{display:flex}
.drop a{font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--muted);
  text-decoration:none;padding:9px 12px;border-radius:8px;transition:.15s;white-space:nowrap}
.drop a:hover{color:var(--primary);background:var(--accent-soft)}

/* theme toggle (ATMO-23) — always visible */
.theme-toggle{font-family:var(--mono);font-size:13px;color:var(--muted);background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;line-height:1}
.theme-toggle:hover{color:var(--primary);border-color:var(--accent)}
.theme-toggle .ti-ico{width:15px;height:15px;display:inline-block}

.navcta{font-family:var(--disp);font-weight:600;font-size:15px;background:var(--primary);color:#fff;
  border:0;border-radius:9px;padding:10px 16px;cursor:pointer;margin-left:2px;text-decoration:none;display:inline-block}
.navcta:hover{background:var(--accent);color:#fff}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--ink);font-size:20px;line-height:1}

@media(max-width:820px){
  .navcta{display:none}
  .menu{display:block;order:3}
  .theme-toggle{order:2}
  .links{display:none;order:4;flex-basis:100%}
  .links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--panel);border-bottom:1px solid var(--line);padding:12px;gap:2px}
  .links.open a{padding:11px 13px}
  .has-drop{width:100%}
  .drop-toggle{width:100%;justify-content:space-between}
  .drop{position:static;box-shadow:none;border:0;padding:2px 0 8px 12px;background:none;min-width:0}
  .has-drop.open .drop{display:flex}
  .has-drop .drop{display:none}
}

/* ---- sections / type ---- */
section{padding:clamp(56px,8vw,104px) 0}
section+section{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
h1{font-size:clamp(38px,6vw,68px);font-weight:700;margin:0 0 24px}
h2{font-size:clamp(27px,3.6vw,40px);margin:0 0 20px}
h3{font-size:21px;margin:0 0 10px}
h4{font-size:19px;margin:0 0 8px}
.lead{font-size:clamp(20px,2.3vw,24px);color:var(--muted);line-height:1.55}
.kicker{font-size:17px;color:var(--muted)}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-20%;right:-10%;width:640px;height:640px;pointer-events:none;
  background:radial-gradient(circle,rgba(111,85,215,.22),rgba(111,85,215,0) 66%);filter:blur(6px)}
.hero .wrap{position:relative}
.orbit{position:absolute;right:2%;top:8%;width:340px;height:340px;pointer-events:none;opacity:.9}
@media(max-width:900px){.orbit{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:16px;
  border-radius:11px;padding:14px 22px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:.15s}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--accent);transform:translateY(-1px);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--primary)}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* cards / grid */
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.prod{cursor:pointer;transition:.18s;text-decoration:none;color:inherit}
.prod:hover{transform:translateY(-3px);border-color:var(--accent)}
.prod .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.prod h3{font-size:23px}
.prod .go{margin-top:auto;padding-top:16px;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--primary)}
.dot{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:16px;color:var(--primary)}
.dot svg{width:19px;height:19px}

/* problem split / list */
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.holecard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--critical);border-radius:12px;padding:22px 24px}
.holecard.sec{border-left-color:var(--critical)}
.holecard.cor{border-left-color:var(--accent)}
.holecard h3{font-size:19px;color:var(--primary)}
.ul{list-style:none;margin:0;padding:0}
.ul li{position:relative;padding:5px 0 5px 26px;color:var(--muted)}
.ul li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.ul.crit li::before{background:var(--critical)}

/* steps */
.steps{counter-reset:s;display:grid;gap:2px}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{counter-increment:s;font-family:var(--mono);font-weight:700;font-size:15px;color:#fff;background:var(--primary);
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.step .n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:19px;margin-bottom:4px}
.step p{margin:0;color:var(--muted)}

/* versus */
.vs{display:grid;gap:16px}
.vrow{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
@media(max-width:700px){.vrow{grid-template-columns:1fr;gap:8px}}
.vrow .vh{font-family:var(--disp);font-weight:600;color:var(--primary);font-size:17px}
.vrow .vh small{display:block;font-weight:400;color:var(--muted);font-size:13px;font-family:var(--mono);margin-top:3px}
.vrow p{margin:0;color:var(--muted);font-size:17px}
.vrow.win .vh{color:var(--verify)}

/* proof — coded */
.proof{background:#171233;border-radius:16px;padding:30px;color:#EDE9F8;font-family:var(--mono);font-size:14.5px;line-height:1.9;border:1px solid rgba(111,85,215,.25)}
:root[data-theme="dark"] .proof{background:#0C0A18}
.proof .c{color:#8A83A3}
.proof .ok{color:#6FD3B4}.proof .cr{color:#F0897C}.proof .k{color:#B7A2FF}
.proof .row{display:block}

/* callouts / stat band */
.band{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.band .big{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6vw,64px);color:var(--primary);line-height:1}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  background:var(--verify-soft);color:var(--verify);border-radius:999px;padding:5px 12px;text-transform:uppercase}
.chip.warn{background:var(--critical-soft);color:var(--critical)}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{font-family:var(--disp);font-weight:600;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:24px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin:14px 0 2px;color:var(--muted)}

/* pricing line */
.price{font-family:var(--disp);font-weight:700;color:var(--primary)}

/* services / rules two-up */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
@media(max-width:700px){.svc{grid-template-columns:1fr}}
.svc div{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.svc b{font-family:var(--disp);font-weight:500;color:var(--ink);font-size:17px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{font-family:var(--mono);font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.contact{grid-template-columns:1fr}}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.cbox .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.cbox a,.cbox .v{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);text-decoration:none;display:block}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--faint);font-size:15px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .fl{display:flex;gap:20px;flex-wrap:wrap}
.foot .fl a{color:var(--muted);text-decoration:none;font-family:var(--disp);font-size:15px}
.foot .fl a:hover{color:var(--accent)}
.foot .brand img{height:58px}
.note{max-width:70ch;margin-top:14px;font-size:13.5px;color:var(--faint)}

/* misc */
.tt{font-family:var(--mono);font-size:.82em;background:var(--soft);padding:2px 6px;border-radius:5px;color:var(--primary)}
.sub{color:var(--muted)}
hr.soft{border:0;border-top:1px solid var(--line);margin:0}
.center{text-align:center}
.stack>*+*{margin-top:14px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.prod:hover,.btn.primary:hover{transform:none}}