:root{
  --bg:#0b1020;
  --bg-soft:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --brand-2:#34d399;
  --ring:#1f2937;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius-sm:14px;
  --maxw:1080px;
}
/* Light theme if user prefers */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7fafc; --bg-soft:#ffffff; --card:#ffffff; --text:#0f172a; --muted:#475569; --ring:#e5e7eb;
    --shadow:0 12px 30px rgba(2,6,23,.08);
  }
}
html.light{
  --bg:#f7fafc; --bg-soft:#ffffff; --card:#ffffff; --text:#0f172a; --muted:#475569; --ring:#e5e7eb;
  --shadow:0 12px 30px rgba(2,6,23,.08);
}
html,body{margin:0;height:100%}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,.15), transparent),
    radial-gradient(800px 400px at -10% 30%, rgba(52,211,153,.12), transparent),
    var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* NAV */
.nav{position:sticky; top:0; z-index:10; background:color-mix(in oklab, var(--bg-soft) 92%, transparent); border-bottom:1px solid var(--ring); backdrop-filter:saturate(180%) blur(10px)}
.nav-wrap{display:flex; justify-content:space-between; align-items:center; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 0 16px rgba(52,211,153,.6)}
.menu{display:flex; gap:1rem; align-items:center}
.btn{padding:8px 14px; border-radius:12px; font-weight:600; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1020; border:none; cursor:pointer; box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--ring); box-shadow:none}
.btn.small{padding:6px 10px; font-size:.9rem}

//* HERO */
.hero{padding:72px 0 36px}
.hero-card{
  background:color-mix(in oklab, var(--card) 92%, transparent); 
  border:1px solid var(--ring); 
  border-radius:var(--radius); 
  padding:32px; 
  box-shadow:var(--shadow)
}

/* adjust only hero title */
.hero-card h1{
  margin:0 auto 20px;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.3;       /* improves vertical spacing */
  max-width:900px;       /* keeps lines balanced */
  text-align:center;     /* optional: centers the text */
}

.kicker{color:var(--brand-2); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.3px}
.tagline{color:var(--muted)}
.stack{display:flex; flex-wrap:wrap; gap:.5rem; margin:8px 0}
.chip{border:1px solid var(--ring); padding:6px 10px; border-radius:999px; font-size:.85rem; color:var(--muted)}
.cta{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:12px}


/* Sections */
section{padding:42px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:18px}
.section-head h2{margin:0; font-size:clamp(22px, 3vw, 28px)}
.pill{padding:4px 10px; border-radius:999px; border:1px solid var(--ring); color:var(--muted)}

/* Grid */
.grid{display:grid; gap:18px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--card); border:1px solid var(--ring); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; transform:translateY(0); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.45); border-color:color-mix(in oklab, var(--brand) 35%, var(--ring))}
.thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg, rgba(96,165,250,.18), rgba(52,211,153,.18))}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1) contrast(1); transition:transform .35s ease, filter .35s ease}
.card:hover .thumb img{transform:scale(1.03); filter:saturate(1.05) contrast(1.05)}
.thumb figcaption{
  position:absolute; left:12px; bottom:12px; font-size:.78rem; padding:4px 8px; border-radius:999px;
  background:color-mix(in oklab, var(--bg-soft) 85%, transparent); border:1px solid var(--ring); color:var(--muted);
}
.card-body{padding:16px; display:flex; flex-direction:column; gap:8px}
.card h3{margin:0; font-size:1.05rem}
.card-links{margin-top:auto; display:flex; gap:8px}

.about{background:color-mix(in oklab, var(--card) 92%, transparent); border:1px solid var(--ring); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.muted{color:var(--muted)}
footer{padding:36px 0; color:var(--muted); text-align:center}