/* Tynk — digital product studio. Dark, minimal, Linear-inspired (per DESIGN.md). */
*,*::before,*::after{box-sizing:border-box;margin:0}
:root{
  --canvas:#010102; --surface-1:#0c0e13; --surface-2:#15171d; --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.16); --ink:#f7f8f8; --ink-muted:#d0d6e0; --ink-subtle:#8a8f98;
  --primary:#5b63ff; --primary-hover:#828fff; --success:#4cc38a;
  --max:1080px; --r:12px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--canvas);color:var(--ink);line-height:1.6;min-height:100dvh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary-hover);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:#000;padding:8px 12px;border-radius:8px;z-index:20}

/* atmosphere: faint top glow, restrained */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:60vh;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% -20%,rgba(91,99,255,.16),transparent 70%)}
.nav,main,.footer{position:relative;z-index:1}

/* nav */
.nav{display:flex;align-items:center;gap:24px;max-width:var(--max);margin:0 auto;
  padding:18px clamp(16px,5vw,40px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;font-size:17px}
.brand__dot{width:11px;height:11px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 14px var(--primary)}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--ink-subtle)}
.nav__links a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:10px;transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 24px rgba(91,99,255,.28)}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn--sm{padding:8px 15px;font-size:14px;margin-left:0}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--ghost{background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.btn--ghost:hover{background:var(--surface-1);color:var(--ink)}

/* layout primitives */
main{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,5vw,40px)}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:14px}
.lede{color:var(--ink-muted);font-size:clamp(1rem,2.2vw,1.2rem);max-width:62ch}
.section{padding:clamp(56px,10vw,120px) 0;border-top:1px solid var(--hairline)}
.section__head{margin-bottom:clamp(28px,5vw,48px)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(1.7rem,4.4vw,2.6rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}

/* hero */
.hero{padding:clamp(48px,11vw,120px) 0 clamp(40px,8vw,80px)}
.hero h1{font-size:clamp(2.6rem,8.5vw,5rem);margin-bottom:22px}
.accent{background:linear-gradient(120deg,var(--primary-hover),var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0}
.hero__stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(40px,7vw,72px)}
.hero__stats div{flex:1 1 180px;border:1px solid var(--hairline);border-radius:var(--r);
  padding:18px 20px;background:var(--surface-1)}
.hero__stats dt{font-weight:600;font-size:1.05rem}
.hero__stats dd{color:var(--ink-subtle);font-size:.9rem;margin-top:2px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{border:1px solid var(--hairline);border-radius:var(--r);padding:26px;background:var(--surface-1);
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.card:hover{border-color:var(--hairline-strong);background:var(--surface-2);transform:translateY(-3px)}
.card__no{font-size:13px;color:var(--primary-hover);font-variant-numeric:tabular-nums}
.card h3{margin:14px 0 8px}
.card p{color:var(--ink-subtle);font-size:.96rem}

/* split section */
.section--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,64px);align-items:start}
.section--split h2{margin:14px 0 16px}
.checklist{list-style:none;display:flex;flex-direction:column;gap:12px}
.checklist li{position:relative;padding-left:30px;color:var(--ink-muted)}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(-45deg)}

/* cta band */
.cta-band{text-align:center}
.cta-band .lede{margin:14px auto 26px}
.cta-band .btn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* footer */
.footer{max-width:var(--max);margin:0 auto;padding:30px clamp(16px,5vw,40px) 48px;
  border-top:1px solid var(--hairline);display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--ink-subtle);font-size:14px}
.footer__brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.footer__meta{margin-right:auto}
.footer__top:hover{color:var(--ink)}

@media (max-width:720px){
  .nav__links{display:none}
  .section--split{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}