/* ============================================================
   site.css — shared chrome for the NEW Klepify design (navy/lime,
   semantic tokens). Linked by every page migrated onto the redesign
   (homepage keeps its own inline copy for now). Nav + footer + tokens
   + buttons live here so a change is one edit, not N.
   ============================================================ */
:root{
  --l-ground:#F2F1ED; --l-surface:#FFFFFF; --l-ink:#0D1321; --l-muted:#666666; --l-line:#DFDEDE;
  --d-ground:#0D1321; --d-surface:#151C2E; --d-ink:#E4E7EC; --d-muted:#8A93A3; --d-line:#262E42;

  --klep:#FF6B47;            /* Klep's coral — mascot, i-dot, primary CTA. Never changes. */
  --klep-deep:#E85735;
  --risk:#C4472F;

  --ground:var(--l-ground); --surface:var(--l-surface);
  --ink:var(--l-ink); --muted:var(--l-muted); --line:var(--l-line);

  --display:'Satoshi',sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --data:'JetBrains Mono',ui-monospace,monospace;
  --base:17px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{--ground:var(--d-ground);--surface:var(--d-surface);--ink:var(--d-ink);--muted:var(--d-muted);--line:var(--d-line)}
}
:root[data-theme="dark"]{--ground:var(--d-ground);--surface:var(--d-surface);--ink:var(--d-ink);--muted:var(--d-muted);--line:var(--d-line)}
:root[data-theme="light"]{--ground:var(--l-ground);--surface:var(--l-surface);--ink:var(--l-ink);--muted:var(--l-muted);--line:var(--l-line)}

/* lime vs navy accent (locked to lime = var-b) */
.var-a{ --energy:#4570FF; --on-energy:#FFFFFF; --safe:#2F7A0C; }
.var-b{ --energy:#D4FF3D; --on-energy:#0D1321; --safe:#2A7D45; }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--base);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.sec{padding:88px 0}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.1}
h2{font-size:clamp(28px,3.6vw,42px)}
.sub{color:var(--muted);max-width:58ch;margin:8px 0 0;font-size:.96rem}
a{color:var(--ink)}

/* wordmark */
.mark{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.03em;display:inline-flex;align-items:baseline;color:var(--ink);text-decoration:none}
.mark .i{position:relative;display:inline-block;width:.32em;height:.78em}
.mark .i .dot{position:absolute;left:50%;transform:translateX(-50%);top:0;width:.22em;height:.22em;border-radius:50%;background:var(--klep)}
.mark .i .stem{position:absolute;left:50%;transform:translateX(-50%);top:.30em;width:.14em;height:.48em;border-radius:.04em;background:var(--ink)}

/* nav */
nav.site-nav{border-bottom:1px solid var(--line);background:var(--ground);position:relative;z-index:3}
nav.site-nav .wrap{display:flex;align-items:center;gap:34px;height:66px}
nav.site-nav a.link{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500}
nav.site-nav a.link:hover{color:var(--ink)}
nav.site-nav .spacer{flex:1}
.btn{font-family:var(--body);font-weight:600;font-size:14.5px;border-radius:99px;padding:11px 20px;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;transition:transform .14s var(--ease-out),filter .14s}
.btn:hover{transform:translateY(-1px)}
.btn-klep{background:var(--klep);color:#0D1321}
.btn-klep:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.nav-login{color:var(--ink)!important;font-weight:600;white-space:nowrap;text-decoration:none;font-size:14.5px}
a:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible,.nav-burger:focus-visible{outline:2px solid var(--klep);outline-offset:2px;border-radius:6px}

/* theme toggle */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:99px;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;flex:none;transition:border-color .14s,background .14s}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* mobile nav */
.nav-burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
.nav-menu{display:none}
@media(max-width:720px){
  nav.site-nav .wrap{gap:12px}
  nav.site-nav a.link{display:none}
  nav.site-nav .btn-ghost{display:none}
  nav.site-nav .nav-login{display:none}
  .nav-burger{display:inline-grid;place-items:center}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ground);border-bottom:1px solid var(--line);padding:6px 32px 16px;z-index:5;box-shadow:0 12px 28px rgba(13,19,33,.14)}
  nav.site-nav.open .nav-menu{display:flex}
  .nav-menu a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-menu a:last-child{border-bottom:0}
}

/* footer */
.foot{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:13.5px;background:var(--ground)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;align-items:flex-start}
.foot .mark{font-size:16px}
.foot-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot-ph{display:inline-block;line-height:0}
.foot-ph img{display:block;border-radius:8px}
.foot-links{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
.foot-links a{color:var(--muted);text-decoration:none;font-size:13.5px}
.foot-links a:hover{color:var(--ink)}
.foot-copy{color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}