/* CSS reset-ish */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeLegibility;line-height:1.6}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
:root{
  --bg: #0b0f19;
  --bg-elev: #0f172a;
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --brand: #7c3aed; /* violet-600 */
  --brand-2: #22d3ee; /* cyan-400 */
  --card: #0f172a;
  --stroke: #263041;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --container: 1120px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff;
    --bg-elev: #f8fafc;
    --text: #0b1220;
    --muted: #4b5563;
    --card: #ffffff;
    --stroke: #e5e7eb;
  }
}

:root[data-theme="light"]{
  --bg: #ffffff; --bg-elev:#f8fafc; --text:#0b1220; --muted:#4b5563; --card:#ffffff; --stroke:#e5e7eb;
}
:root[data-theme="dark"]{
  --bg:#0b0f19; --bg-elev:#0f172a; --text:#e5e7eb; --muted:#9aa4b2; --card:#0f172a; --stroke:#263041;
}

/* Base */
@font-face{
  font-family:InterVar;src:url('/fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
body{font-family:InterVar,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:var(--container);margin-inline:auto;padding:clamp(16px,2.5vw,32px)}
a{color:inherit;text-decoration:none}
a:focus{outline:2px dashed var(--brand);outline-offset:3px}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2);font-weight:600;margin-bottom:8px}
.accent{color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--stroke);padding:.7rem 1rem;border-radius:12px;box-shadow:none;background:transparent;transition:.2s ease;font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:none;color:white}
.btn.ghost{background:transparent}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(10px);background:color-mix(in oklab, var(--bg) 85%, transparent)}
[data-elevate]{box-shadow:none;border-bottom:1px solid transparent;transition:box-shadow .2s, border-color .2s}
[data-elevate].scrolled{box-shadow:var(--shadow);border-color:var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.02em}
.brand-dot{color:var(--brand)}
.logo{filter:drop-shadow(0 2px 8px rgba(124,58,237,.35))}
.nav-toggle{display:none;border:1px solid var(--stroke);background:var(--bg-elev);padding:.5rem;border-radius:10px}
.nav-menu{display:flex;gap:1rem;align-items:center}
.nav-menu a,.theme-toggle{padding:.5rem .7rem;border-radius:10px}
.nav-menu a:hover{background:var(--bg-elev)}
.theme-toggle{border:1px solid var(--stroke);background:var(--bg-elev);display:inline-grid;place-items:center}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}

@media (max-width: 860px){
  .nav-toggle{display:inline-grid}
  .nav-menu{position:absolute;inset:auto 16px 16px;top:72px;background:var(--bg-elev);border:1px solid var(--stroke);border-radius:16px;padding:12px;display:none;flex-direction:column;box-shadow:var(--shadow)}
  .nav-menu.open{display:flex}
}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,4vw,48px);padding-top:32px}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.1;font-weight:900;letter-spacing:-.02em}
.lede{font-size:clamp(16px,2.4vw,20px);max-width:60ch;margin-top:12px;color:var(--muted)}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.socials{display:flex;gap:12px;margin-top:10px}
.socials a{color:var(--muted)}
.hero-art{position:relative;min-height:320px;isolation:isolate}
.blob{position:absolute;inset:auto;filter:blur(40px);opacity:.7;border-radius:50%}
.b1{width:260px;height:260px;right:10%;top:10%;background:radial-gradient(circle at 30% 30%, #7c3aed, transparent 60%)}
.b2{width:220px;height:220px;left:5%;bottom:10%;background:radial-gradient(circle at 70% 40%, #22d3ee, transparent 60%)}
.b3{width:180px;height:180px;right:25%;bottom:5%;background:radial-gradient(circle at 40% 60%, #10b981, transparent 60%)}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1}
}

/* Sections */
.section{padding-block:clamp(32px,6vw,72px)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.section h2{font-size:clamp(24px,3.5vw,34px);letter-spacing:-.01em}

/* Cards */
.grid.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 980px){.grid.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-4px)}
.card-media{aspect-ratio:16/9;background:linear-gradient(120deg,#111 0%,#222 100%);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px;display:grid;gap:10px}
.card-title{font-weight:800}
.card-meta{display:flex;gap:8px;flex-wrap:wrap}
.card-meta span{font-size:12px;padding:.2rem .5rem;border:1px solid var(--stroke);border-radius:999px;color:var(--muted)}
.card-actions{margin-top:4px;display:flex;gap:8px}

/* Timeline */
.timeline{list-style:none;display:grid;gap:18px;position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--stroke)}
.t-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));position:absolute;left:2px;transform:translateX(-50%)}
.t-content{background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.t-meta{color:var(--muted);font-size:.95rem}
.t-list{margin-left:18px}

/* Posts */
.posts{list-style:none;display:grid;gap:12px}
.post{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--stroke);padding:12px 14px;border-radius:12px;background:var(--card)}
.post:hover{transform:translateY(-2px)}
.post-title{font-weight:700}
.post-date{color:var(--muted);font-variant-numeric:tabular-nums}

/* Contact */
.contact{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.contact-form{display:grid;gap:10px;background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:14px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-form .full{grid-column:1/-1}
label span{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
input,textarea{width:100%;border:1px solid var(--stroke);background:var(--bg-elev);color:var(--text);padding:.7rem .8rem;border-radius:10px}
input:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.form-status,.copy-status{min-height:1.2em;color:var(--muted)}

/* Footer */
.site-footer{margin-top:24px;border-top:1px solid var(--stroke);background:var(--bg-elev)}
.footer-inner{display:flex;justify-content:center}

/* A11y helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--bg-elev);color:var(--text);padding:.5rem .8rem;border-radius:10px;border:1px dashed var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}