:root{
  --bg:#0A0B0C;
  --surface:#0F1112;
  --surface2:#151718;
  --border:#1E2022;

  /* Dart family color */
  --blue:#00B4F1;
  --blue-bright:#40C4FF;
  --blue-dim:#0175C2;
  --blue-glow:rgba(0,180,241,.16);

  /* Sister palette */
  --amber:#F48C25;
  --magenta:#C757BC;
  --leaf:#7FBE3A;

  --t1:#E8E8E8;
  --t2:#888;
  --t3:#555;
  --green:#98C379;

  --mono:'SF Mono','JetBrains Mono','Menlo',monospace;
  --sans:-apple-system,'SF Pro Display','Inter','Segoe UI',sans-serif;
  --max:1100px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--t1);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 1.5rem}

code{
  font-family:var(--mono);font-size:.92em;
  padding:1px 6px;background:var(--surface2);
  border:1px solid var(--border);border-radius:4px;
  color:var(--t1);
}

/* ── Nav ─────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(10,11,12,.85);
  border-bottom:1px solid var(--border);
}
nav .inner{
  display:flex;align-items:center;gap:24px;
  height:56px;max-width:var(--max);
  margin:0 auto;padding:0 1.5rem;
}
nav .brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:15px;letter-spacing:-.02em;
}
nav .brand-logo{width:24px;height:24px;border-radius:5px}
nav .brand .name-accent{color:var(--blue)}
nav .links{display:flex;gap:24px;font-size:13px;color:var(--t2)}
nav .links a:hover{color:var(--t1)}
nav .phase-pill{
  margin-left:auto;
  font-family:var(--mono);font-size:11px;
  color:var(--t2);
  background:var(--surface);border:1px solid var(--border);
  padding:4px 12px;border-radius:20px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:8px;
  font-size:13px;font-weight:600;
  border:1px solid var(--blue);color:var(--blue);
  transition:all .2s;
}
.btn:hover{background:var(--blue);color:#000}
.btn-solid{background:var(--blue);color:#000;border-color:var(--blue)}
.btn-solid:hover{background:var(--blue-bright)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  padding:140px 0 80px;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;
  top:-180px;left:50%;transform:translateX(-50%);
  width:1200px;height:900px;
  background:
    radial-gradient(ellipse 40% 30% at 50% 35%,rgba(0,180,241,.22),transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,180,241,.05),transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,180,241,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,241,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 45%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 55% 55% at 50% 45%,#000,transparent 70%);
  pointer-events:none;opacity:.6;
}
.hero .container{position:relative;z-index:1}
.hero .badges{
  display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin-bottom:36px;
}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:500;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--t2);
}
.badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.badge.badge-accent{
  color:var(--blue);
  background:rgba(0,180,241,.08);
  border-color:rgba(0,180,241,.22);
}
.hero h1{
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.1;
  margin-bottom:20px;
}
.hero h1 span{color:var(--blue)}
.hero .sub{
  font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--t2);
  max-width:680px;margin:0 auto 36px;
}
.hero .sub strong{color:var(--t1);font-weight:600}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Showcase / vision ───────────────────────────────────── */
.showcase{padding:80px 0;border-top:1px solid var(--border)}
.showcase-head{text-align:center;margin-bottom:44px}
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--t2);font-weight:500;
  margin-bottom:14px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 8px var(--blue);
}
.showcase h2{
  font-size:clamp(1.6rem,3vw,2rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:14px;
}
.showcase h2 span{color:var(--blue)}
.showcase-head p{
  color:var(--t2);max-width:680px;margin:0 auto;
}

.code-window{
  max-width:780px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
  overflow:hidden;
}
.code-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:12px;color:var(--t2);
}
.code-dot{width:11px;height:11px;border-radius:50%}
.code-dot.r{background:#FF5F56}
.code-dot.y{background:#FFBD2E}
.code-dot.g{background:#27C93F}
.code-header .filename{
  margin-left:8px;font-family:var(--mono);
  color:var(--t1);font-weight:500;
}
.code-header .tag{
  margin-left:auto;font-size:10.5px;
  color:var(--blue);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;
}
.code-body{
  padding:18px 20px;font-family:var(--mono);
  font-size:13px;line-height:1.65;color:var(--t1);
  overflow-x:auto;
}
.code-body .kw {color:#C586C0}
.code-body .ty {color:#4EC9B0}
.code-body .lit{color:var(--blue-bright)}
.code-body .com{color:var(--t3);font-style:italic}
.code-output{
  padding:12px 20px;
  background:#0a0a0d;
  border-top:1px solid var(--border);
  font-family:var(--mono);font-size:12px;color:var(--t2);
  overflow-x:auto;
}

/* ── Architecture pipe ───────────────────────────────────── */
.arch{padding:80px 0;border-top:1px solid var(--border);text-align:center}
.arch h2{
  font-size:clamp(1.6rem,3vw,2rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:14px;
}
.arch h2 span{color:var(--leaf)}
.arch-sub{
  color:var(--t2);max-width:640px;
  margin:0 auto 36px;
}
.arch-sub a{color:var(--leaf);border-bottom:1px dashed rgba(127,190,58,.4)}
.arch-sub a:hover{color:#A8E063}
.pipeline{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
.pipe-box{
  font-family:var(--mono);font-size:12px;
  padding:8px 14px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--t2);
}
.pipe-box.accent{
  background:rgba(127,190,58,.08);
  border-color:rgba(127,190,58,.30);
  color:var(--leaf);
  font-weight:600;
}
.pipe-arrow{color:var(--t3);font-size:14px}

/* ── Status ──────────────────────────────────────────────── */
.status-section{
  padding:80px 0;border-top:1px solid var(--border);
}
.status-card{
  max-width:680px;margin:0 auto;
  padding:28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}
.status-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#FFBD2E;box-shadow:0 0 8px #FFBD2E;
}
.status-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--t2);font-weight:600;
}
.status-card h3{
  font-size:1.25rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:10px;
}
.status-card p{color:var(--t2);font-size:14px;margin-bottom:14px}
.status-card p strong{color:var(--t1)}
.status-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:12px;color:var(--t3);
}
.status-meta a{color:var(--blue)}

.family{
  max-width:680px;margin:32px auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  padding-top:20px;border-top:1px solid var(--border);
}
.family-label{
  width:100%;
  color:var(--t3);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;
}
.family-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12.5px;
  color:var(--t2);transition:color .15s;
}
.family-link:hover{color:var(--t1)}
.family-meta{
  margin-left:4px;
  font-family:var(--sans);font-size:11px;
  color:var(--t3);
  font-weight:400;letter-spacing:0;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;flex-shrink:0;
}
.dot-amber  {background:var(--amber);  box-shadow:0 0 8px var(--amber)}
.dot-magenta{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
.dot-leaf   {background:var(--leaf);   box-shadow:0 0 8px var(--leaf)}

.sep{color:var(--border);margin:0 4px}

/* ── Footer ──────────────────────────────────────────────── */
footer{
  padding:32px 0;border-top:1px solid var(--border);
  font-size:12px;color:var(--t3);
}
footer .container{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}