/* ============================================================
   KOPIK — Web & onboarding layer (marketing + auth + wizard)
   Builds on kopik-base.css tokens. Dark-technical, modern, fresh.
   ============================================================ */

:root{
  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);
  --fs-display:clamp(46px,6.6vw,86px);
  --fs-h1:clamp(34px,4.6vw,58px);
  --fs-h2:clamp(27px,3.2vw,40px);
  --fs-h3:clamp(19px,1.7vw,23px);
}

html{scroll-behavior:smooth}
body.web{background:var(--bg);color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wide{max-width:1320px}

/* ambient backdrop: deep OLED with a faint acid horizon + dot grid */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% -8%, rgba(195,247,58,.07), transparent 60%),
    radial-gradient(60% 40% at 92% 6%, rgba(195,247,58,.05), transparent 55%),
    #000}
.bg-dots{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 70%)}
.page{position:relative;z-index:1}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans-ui);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--acid)}
.eyebrow.center::before{display:none}
.display{font-family:var(--sans);font-weight:500;font-size:var(--fs-display);line-height:.98;letter-spacing:-.03em;text-wrap:balance;margin:0}
.h1{font-family:var(--sans);font-weight:500;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;margin:0}
.h2{font-family:var(--sans);font-weight:500;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
.h3{font-family:var(--sans);font-weight:500;font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.012em;margin:0}
.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
.lead{font-size:clamp(16px,1.45vw,20px);line-height:1.6;color:var(--ink2);text-wrap:pretty;margin:0}
.muted{color:var(--ink3)}
.acidtext{color:var(--acid)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:15px;font-weight:500;cursor:pointer;border:1px solid transparent;
  transition:transform var(--fast) var(--ease),background var(--fast),border-color var(--fast),box-shadow var(--dur)}
.btn svg{width:17px;height:17px;stroke-width:2}
.btn-acid{background:var(--acid);color:var(--acid-ink);font-weight:600;box-shadow:0 0 0 0 rgba(195,247,58,0)}
.btn-acid:hover{background:var(--acid-hi);box-shadow:0 8px 30px -8px rgba(195,247,58,.5);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--line3);background:var(--s2)}
.btn-white{background:var(--ink);color:#000;font-weight:600}
.btn-white:hover{transform:translateY(-1px)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:54px;padding:0 28px;font-size:16px}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--s2);font-size:13px;color:var(--ink2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid)}
.tag-acid{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--acid-soft);border:1px solid var(--acid-line);color:var(--acid);font-size:12.5px;font-weight:500}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(0,0,0,.55);border-bottom:1px solid transparent;transition:border-color var(--dur),background var(--dur)}
.nav.scrolled{border-color:var(--line);background:rgba(0,0,0,.8)}
.nav-in{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:baseline;gap:1px;font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.025em;color:var(--ink)}
.brand .sq{width:9px;height:9px;background:var(--acid);display:inline-block;margin-left:2px;border-radius:2px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{padding:8px 13px;border-radius:var(--r-pill);font-size:14.5px;color:var(--ink2);transition:color var(--fast),background var(--fast)}
.nav-links a:hover{color:var(--ink);background:var(--s2)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-burger{display:none}

/* ---------- sections ---------- */
.section{position:relative;padding-block:clamp(72px,9vw,128px)}
.section.tight{padding-block:clamp(48px,6vw,84px)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- generic card ---------- */
.card{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-xl);transition:border-color var(--dur),transform var(--dur) var(--ease),background var(--dur)}
.card.hov:hover{border-color:var(--line2);transform:translateY(-3px);background:var(--s3)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:56px 40px;position:relative;z-index:1;background:var(--s1)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-grid h5{font-family:var(--sans-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.foot-grid a{display:block;font-size:14px;color:var(--ink2);padding:5px 0;transition:color var(--fast)}
.foot-grid a:hover{color:var(--ink)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink3);font-size:13px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:12px;align-items:flex-start}
}