/* SaKa Prime — two themes, one stylesheet.
   Dark (brand navy) is the default. Light is the Glacier Light structure recoloured
   to the brand palette, applied only when the visitor chooses it.
   Theme resolves as: stored choice > dark. */

:root{
  --blue:#2563EB;
  --cyan:#00B6F1;
  --green:#00C48C;
  --amber:#F2B705;
  --navy:#0A1628;

  /* dark — the default */
  --bg:#0A1628;
  --surface:#0F1D33;
  --surface-2:#0D1B31;
  --surface-3:#13253E;
  --ink:#FFFFFF;
  --ink-2:#93A6BE;
  --ink-3:#7E92AB;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --brand:#2563EB;
  --brand-ink:#FFFFFF;
  --shadow:none;
  --shadow-hi:none;
  --header-bg:rgba(10,22,40,.9);
  --hero-bg:radial-gradient(900px 560px at 74% 8%,rgba(37,99,235,.30),transparent 62%),
            radial-gradient(680px 480px at 6% 92%,rgba(0,182,241,.14),transparent 60%),var(--bg);
  --grid-line:rgba(255,255,255,.03);
  --dg-node:rgba(255,255,255,.045);
  --dg-node-line:rgba(255,255,255,.16);
  --dg-label:#C9D8EA;
  --dg-sub:#7E93AC;
  --dg-in:#00B6F1;
  --dg-out:#00C48C;
  --accent:#00B6F1;      /* kickers, panel labels, hero emphasis */
  --accent-2:#F2B705;    /* PRIME / wordmark accent */
  --maxw:1200px;
}

:root[data-theme="light"]{
  --bg:#FAFBFF;
  --surface:#FFFFFF;
  --surface-2:#F2F5FC;
  --surface-3:#E9EEFA;
  --ink:#0A1628;
  --ink-2:#4A596D;
  --ink-3:#6E7C8E;
  --line:#DFE5F0;
  --line-soft:#EAEFF8;
  --shadow:0 4px 6px -1px rgba(10,22,40,.05), 0 2px 4px -2px rgba(10,22,40,.03);
  --shadow-hi:0 18px 34px -18px rgba(10,22,40,.28);
  --header-bg:rgba(255,255,255,.82);
  --hero-bg:radial-gradient(900px 560px at 76% 6%,rgba(37,99,235,.10),transparent 62%),
            radial-gradient(700px 460px at 4% 94%,rgba(0,182,241,.09),transparent 60%),var(--bg);
  --grid-line:rgba(10,22,40,.045);
  --dg-node:rgba(10,22,40,.025);
  --dg-node-line:rgba(10,22,40,.12);
  --dg-label:#2C3B50;
  --dg-sub:#7A8798;
  --dg-in:#0A85B8;
  --dg-out:#00976C;
  --accent:#2563EB;
  --accent-2:#B98A00;
}

/* theme-specific assets: show one, hide the other, no JS involved */
.light-only{display:none}
.dark-only{display:block}
:root[data-theme="light"] .light-only{display:block}
:root[data-theme="light"] .dark-only{display:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600;line-height:1.16;margin:0;letter-spacing:-.022em}
h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.03em}
h2{font-size:clamp(26px,3.4vw,38px)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.kicker{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lede{font-size:clamp(15.5px,1.5vw,17.5px);color:var(--ink-2);max-width:62ch;margin-top:16px;font-weight:300}
.lede + .lede{margin-top:14px}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);
  backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{height:30px;width:auto}
.brand__name{font-weight:600;letter-spacing:.02em;font-size:17px}
.brand__name i{font-style:normal;color:var(--accent-2)}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{color:var(--ink-2);font-size:14px;position:relative;padding:6px 0;transition:color .18s}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__end{display:flex;align-items:center;gap:12px}
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.theme-toggle:hover{color:var(--ink);border-color:var(--brand)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* below 940px the links wrap to a second, scrollable row rather than disappearing —
   with six pages, a nav that vanishes on mobile strands every page but this one */
@media(max-width:940px){
  .nav{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:10px;row-gap:8px}
  .brand{order:1}
  .nav__end{order:2;margin-left:auto}
  .nav__links{order:3;width:100%;gap:8px 20px;flex-wrap:wrap;padding-bottom:4px}
  .nav__links a{white-space:nowrap;font-size:13.5px}
}
@media(max-width:420px){
  .nav__end .btn{display:none}
  .theme-toggle{width:34px;height:34px}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;font-weight:500;font-size:14.5px;
  padding:13px 26px;transition:transform .18s,background .2s,box-shadow .2s,border-color .2s,color .2s}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 12px 30px -14px rgba(37,99,235,.8)}
.btn--primary:hover{background:#1D57D6;transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--line{color:var(--ink);border-bottom:1px solid var(--line);border-radius:0;padding:4px 0}
.btn--line:hover{border-color:var(--brand);color:var(--brand)}
.btns{display:flex;gap:22px;align-items:center;margin-top:34px;flex-wrap:wrap}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);padding:88px 0 0}
.hero__grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(78% 70% at 55% 35%,#000,transparent)}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center;padding-bottom:64px}
@media(max-width:980px){.hero__inner{grid-template-columns:1fr;gap:40px}}
.hero h1{text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--ink-2);font-weight:300;font-size:clamp(15.5px,1.6vw,18px);margin-top:20px;max-width:52ch}
.hero__tag{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px 7px 12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:22px;background:var(--surface)}
.hero__rule{display:inline-flex;align-items:center;gap:14px;margin-top:34px;color:var(--ink-3);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.hero__rule::before,.hero__rule::after{content:"";width:30px;height:1.5px;background:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,196,140,.18)}

/* page heads (non-home) */
.page-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:76px 0 68px}

/* ---------------- tiles ---------------- */
.tiles{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:56px}
@media(max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  background:var(--surface);box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.tile svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile span{font-size:13.5px;font-weight:500;line-height:1.35}

/* ---------------- bar ---------------- */
.bar{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bar__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:24px 0;flex-wrap:wrap}
.bar__inner p{color:var(--ink-3);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.bar__list{display:flex;gap:32px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px;font-weight:300}
.bar__list span{display:flex;align-items:center;gap:8px}
.bar__list i{width:6px;height:6px;border-radius:50%;background:var(--green);font-style:normal}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:22px;margin-top:44px}
.card{border:1px solid var(--line);border-radius:16px;padding:30px 28px;background:var(--surface);
  box-shadow:var(--shadow);transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-hi)}
.card__icon{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px}
.card__icon svg{width:25px;height:25px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-blue{background:rgba(37,99,235,.10)} .i-blue svg{stroke:var(--blue)}
.i-cyan{background:rgba(0,182,241,.12)} .i-cyan svg{stroke:var(--cyan)}
.i-green{background:rgba(0,196,140,.12)} .i-green svg{stroke:var(--green)}
.i-amber{background:rgba(242,183,5,.16)} .i-amber svg{stroke:var(--amber)}
:root[data-theme="light"] .i-cyan svg{stroke:#0A85B8}
:root[data-theme="light"] .i-green svg{stroke:#00976C}
:root[data-theme="light"] .i-amber svg{stroke:#B98A00}
.card h3{font-size:18.5px;margin-bottom:9px}
.card p{color:var(--ink-2);font-size:14.5px;font-weight:300}

/* ---------------- split + panel ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
.panelbox{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.panelbox__row{padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.panelbox__row:last-child{border-bottom:0}
.panelbox__row b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.panelbox__row span{display:block;color:var(--ink-2);font-size:14.5px;font-weight:300;margin-top:5px}
.panelbox__row a:hover{color:var(--brand)}

/* ---------------- practice ---------------- */
.practice{display:grid;gap:18px;margin-top:8px}
.practice__item{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;background:var(--surface);box-shadow:var(--shadow)}
.practice__item .card__icon{margin-bottom:0;flex:0 0 50px}
.practice__item h3{font-size:17px;margin-bottom:6px}
.practice__item p{color:var(--ink-2);font-size:14.5px;font-weight:300}

/* ---------------- diagram ---------------- */
.diagram{width:100%;height:auto}
/* under ~700px the labels scale below ~6px and stop being readable;
   the capability tiles below carry the same four inputs/outputs in text */
@media(max-width:700px){.diagram{display:none}}
.dg-node{fill:var(--dg-node);stroke:var(--dg-node-line)}
/* sized to fit the widened node boxes */
.dg-label{font:500 10px 'Poppins',sans-serif;fill:var(--dg-label);letter-spacing:.06em}
.dg-sub{font:300 8.8px 'Poppins',sans-serif;fill:var(--dg-sub);letter-spacing:.04em}
.dg-core-label{font:600 11px 'Poppins',sans-serif;fill:var(--ink);letter-spacing:.12em}
.dg-ico{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dg-ico--in{stroke:var(--dg-in)}
.dg-ico--out{stroke:var(--dg-out)}
.dg-flow{fill:none;stroke-width:1.4;stroke-dasharray:5 7;animation:dash 2.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
@media(prefers-reduced-motion:reduce){.dg-flow{animation:none}html{scroll-behavior:auto}}

/* ---------------- origin of the name ---------------- */
.origin{background:var(--surface-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px 0}
.origin__grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:0;margin-top:36px}
@media(max-width:900px){.origin__grid{grid-template-columns:1fr;gap:30px}}
.origin__word{padding:2px 36px;border-left:1px solid var(--line)}
.origin__word:first-child{padding-left:0;border-left:0}
@media(max-width:900px){.origin__word{padding:0;border-left:0}}
.origin__word b{display:block;font-size:clamp(22px,2.9vw,30px);font-weight:600;letter-spacing:.24em;line-height:1}
.origin__word .meaning{display:block;color:var(--ink);font-size:15px;font-weight:500;margin-top:14px}
.origin__word .gloss{display:block;color:var(--ink-3);font-size:13.5px;font-weight:300;margin-top:4px}
.origin__why{padding:2px 0 2px 36px;border-left:1px solid var(--line)}
@media(max-width:900px){.origin__why{padding:26px 0 0;border-left:0;border-top:1px solid var(--line)}}
.origin__why p{color:var(--ink-2);font-size:15.5px;font-weight:300;max-width:48ch}
.origin__why p + p{margin-top:12px}

/* ---------------- cta ---------------- */
.cta{background:var(--surface-2);border-top:1px solid var(--line);text-align:center;padding:80px 0}
.cta p{color:var(--ink-2);margin-top:14px;font-weight:300;max-width:56ch;margin-inline:auto}
.cta .btns{justify-content:center}

/* ---------------- footer ---------------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding:56px 24px 44px}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}
.foot__brand img{height:66px;width:auto;margin-bottom:16px}
.foot__brand p{color:var(--ink-3);font-size:13.5px;font-weight:300;max-width:32ch}
.foot__col{display:flex;flex-direction:column;gap:9px}
.foot__col span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:4px}
.foot__col a{color:var(--ink-2);font-size:13.5px;font-weight:300;transition:color .18s}
.foot__col a:hover{color:var(--brand)}
.identity__line{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding:22px 24px;
  border-top:1px solid var(--line-soft)}
.identity__line>div{display:flex;align-items:baseline;gap:11px}
.identity__line b{font-size:13.5px;font-weight:600;letter-spacing:.26em}
.w-saka{color:var(--ink)}
.w-prime{color:var(--accent-2)}
.identity__line span{color:var(--ink-3);font-size:13px;font-weight:300}
.identity__line p{margin-left:auto;color:var(--ink-3);font-size:12.5px;font-weight:300;font-style:italic}
@media(max-width:760px){.identity__line{gap:12px}.identity__line p{margin-left:0}}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px 26px;
  border-top:1px solid var(--line-soft);color:var(--ink-3);font-size:12.5px;font-weight:300}