@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ink:#0b0b12; --ink-2:#191922; --paper:#faf9f7; --paper-2:#ffffff;
  --muted:#5b5b6b; --line:rgba(12,12,20,.10);
  --violet:#6d5efc; --cyan:#20d3c2; --coral:#ff6b6b;
  --accent:#5b4bff;
  --maxw:1080px; --pad:24px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:72px; --sp-6:112px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif; line-height:1.05; letter-spacing:-0.02em; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font:600 .74rem/1 "Space Grotesk",sans-serif; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}

/* Nav */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:color-mix(in oklab, var(--paper) 82%, transparent); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:var(--sp-3); height:64px}
.brand{font:700 1.1rem/1 "Space Grotesk",sans-serif; letter-spacing:-0.02em; text-decoration:none}
.brand .dot{color:var(--violet)}
.nav nav{margin-left:auto; display:flex; gap:var(--sp-3); align-items:center; font-size:.95rem}
.nav nav a{color:var(--muted); text-decoration:none; transition:color .2s}
.nav nav a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 .95rem/1 "Space Grotesk",sans-serif;
  padding:11px 18px; border-radius:999px; text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(11,11,18,.22)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2)}

/* Hero */
.hero{position:relative; background:var(--ink); color:var(--paper); overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:90vh; pointer-events:none;
  background:radial-gradient(50% 55% at 30% 0%, color-mix(in oklab,var(--violet) 60%,transparent), transparent 70%),
             radial-gradient(45% 50% at 85% 10%, color-mix(in oklab,var(--cyan) 45%,transparent), transparent 70%);
  filter:blur(30px); opacity:.55; animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.hero .wrap{position:relative; padding:var(--sp-6) var(--pad) calc(var(--sp-6) + 10px)}
.hero .eyebrow{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.hero h1{font-size:clamp(2.6rem,7vw,5rem); margin:1.2rem 0 0; max-width:16ch;
  background:linear-gradient(110deg,#fff 20%,var(--violet) 60%,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{margin:1.4rem 0 0; max-width:46ch; font-size:clamp(1.05rem,2.4vw,1.28rem); color:color-mix(in oklab,var(--paper) 78%,transparent)}
.hero .cta{margin-top:var(--sp-4); display:flex; gap:var(--sp-2); flex-wrap:wrap}
.hero .btn-primary{background:var(--paper); color:var(--ink)}
.hero .btn-ghost{border-color:rgba(255,255,255,.22); color:var(--paper)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Section shell */
.section{padding:var(--sp-6) 0}
.section h2{font-size:clamp(1.9rem,4.5vw,2.7rem); max-width:20ch}
.section .sub{color:var(--muted); margin-top:1rem; max-width:52ch}
.section-head{margin-bottom:var(--sp-5)}

/* Services */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:var(--sp-4);
  transition:transform .2s, box-shadow .25s, border-color .2s}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(11,11,18,.08); border-color:color-mix(in oklab,var(--violet) 30%,var(--line))}
.card .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--sp-3);
  background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#fff}
.card .ic svg{width:22px; height:22px}
.card h3{font-size:1.28rem; margin-bottom:.5rem}
.card p{color:var(--muted); font-size:1rem}

/* Approach band */
.band{background:var(--ink); color:var(--paper); border-radius:28px; padding:var(--sp-5); margin:0 auto}
.band .eyebrow{color:color-mix(in oklab,var(--paper) 60%,transparent)}
.band h2{color:var(--paper); margin-top:1rem}
.band .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-4)}
@media(max-width:820px){.band .grid{grid-template-columns:1fr}}
.band .grid p{color:color-mix(in oklab,var(--paper) 80%,transparent); margin:0}
.band .grid strong{display:block; font:700 1.05rem/1 "Space Grotesk",sans-serif; margin-bottom:6px; color:var(--paper)}

/* Contact */
.contact{text-align:center}
.contact h2{margin:0 auto}
.contact .sub{margin:1rem auto 0}
.contact .cta{margin-top:var(--sp-4); display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid var(--line); padding:var(--sp-4) 0; color:var(--muted); font-size:.92rem}
.footer .wrap{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--ink)}
.footer .spacer{flex:1}

/* Legal doc pages */
.doc{padding:var(--sp-5) 0 var(--sp-6)}
.doc h1{font-size:clamp(1.9rem,5vw,2.6rem)}
.doc .updated{color:var(--muted); margin:.4rem 0 var(--sp-4)}
.doc h2{font-size:1.2rem; margin:var(--sp-4) 0 .4rem}
.doc p{max-width:70ch}
.doc a{color:var(--accent)}