/*  01 — DESIGN TOKENS  */
:root {
  /* color-scheme: dark light;  // uncomment for OS auto-switch */
  --bg: #05070a;
  --bg-glass: rgba(255 255 255 / .05);
  --bg-card: #0f1116;
  --accent: #00b4ff;
  --accent-glow: 0 0 20px #00b4ff80, 0 0 40px #00b4ff40;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --border: #1f2937;
  --radius: 12px;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --max-w: 1200px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/*  02 — RESET & FLUID TYPE  */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:clamp(14px, .8vw + 10px, 18px)}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6}

/*  03 — CONTAINER  */
.container{max-width:var(--max-w);margin-inline:auto;padding-inline:clamp(1rem, 3vw, 3rem)}

/*  04 — BUTTONS  */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1em;margin:0.2em;font-weight:600;border-radius:var(--radius);cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn.primary{background:linear-gradient(135deg, var(--accent), #0085ff);color:#000;box-shadow:var(--accent-glow)}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn:hover{transform:translateY(-2px)}

/*  05 — HERO  */
.hero{
  position:relative;display:grid;place-content:center;text-align:center;
  min-height:100vh;
  background:radial-gradient(circle at top left, #001122 0%, var(--bg) 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a"><stop offset="0%" stop-color="%2300b4ff" stop-opacity=".4"/><stop offset="100%" stop-color="%2300b4ff00"/></radialGradient></defs><circle cx="500" cy="200" r="500" fill="url(%23a)"/></svg>') center/cover no-repeat;
  pointer-events:none;
}
.hero h1{font-size:clamp(2.5rem, 7vw + 1rem, 5rem);font-weight:800;letter-spacing:-.03em}
.hero h1 span{color:var(--accent);text-shadow:var(--accent-glow)}
.tagline{max-width:60ch;margin:1rem auto 2.5rem;font-size:clamp(1rem, 2vw, 1.25rem);color:var(--text-muted)}
.badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--radius);background:#d1242f;color:#fff;margin-bottom:2rem}

/* ---------- MINI PERF BAR ---------- */
.mini-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.5rem, 2vw, 1.5rem);
  max-width:600px;
  margin-inline:auto;
  text-align:center;
}
/* ---------- ASYMMETRIC MASONRY ---------- */
.masonry-grid{
  --gap:clamp(1rem, 2vw, 2rem);
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-auto-rows:minmax(140px,auto);
  padding:clamp(3rem, 8vw, 7rem) 1rem;
}
.brick{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(1.5rem, 3vw, 2.5rem);transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
}
.brick:hover{transform:translateY(-6px);box-shadow:0 20px 40px #00000060}
.w2{grid-column:span 2}
.w3{grid-column:span 3}
.h2{grid-row:span 2}

/* ---------- RESPONSIVE ASYMMETRY ---------- */
@media(max-width:48em){
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .w2,.w3{grid-column:1/-1}
}

.mini-grid strong{font-size:clamp(1rem, 2.5vw, 1.5rem);color:var(--accent)}

/*  06 — PERF BAR  */
.perf-bar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2.5rem;text-align:center;padding:clamp(2rem, 5vw, 4rem) 1rem;
  background:var(--bg-card);
}
.perf-bar>div{font-size:clamp(.8rem, 1.2vw, 1rem)}
.perf-bar strong{display:block;font-size:clamp(1.5rem, 4vw, 3rem);color:var(--accent);margin-top:.25rem}

/*  07 — GRID CARDS  */
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem, 3vw, 3rem);padding:clamp(4rem, 8vw, 7rem) 1rem;
}
.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(2rem, 4vw, 3rem);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px #00000060}
.card h3{font-size:clamp(1.125rem, 2vw, 1.5rem);margin-bottom:.75rem;color:var(--accent)}
.card p{color:var(--text-muted)}

/*  08 — CODE BLOCK  */
.code-block{background:var(--bg-card);padding:clamp(3rem, 6vw, 5rem) 1rem}
.code-block h2{text-align:center;margin-bottom:2rem;font-size:clamp(1.5rem, 3vw, 2.5rem)}
pre{background:#000;padding:clamp(1.5rem, 3vw, 2.5rem);border-radius:var(--radius);overflow-x:auto}
code{font-family:var(--font-mono);font-size:clamp(.75rem, 1vw, .875rem);line-height:1.5;color:#e5e7eb}

/*  09 — STEPS  */
.steps{background:#000;padding:clamp(4rem, 8vw, 7rem) 1rem}
.steps h2{text-align:center;margin-bottom:3rem;font-size:clamp(1.75rem, 3vw, 2.75rem)}
.steps ol{max-width:700px;margin-inline:auto;display:grid;gap:1.5rem}
.steps li{font-size:clamp(.95rem, 1.5vw, 1.125rem);display:flex;align-items:flex-start;gap:1rem}
.steps li::before{content:counter(step);counter-increment:step;background:var(--accent);color:#000;font-weight:800;border-radius:50%;width:2rem;height:2rem;display:grid;place-content:center;flex-shrink:0}
.steps{counter-reset:step}

/*  10 — COST TABLE  */
.cost-table{padding:clamp(4rem, 8vw, 7rem) 1rem}
.cost-table h2{text-align:center;margin-bottom:2.5rem;font-size:clamp(1.75rem, 3vw, 2.75rem)}
table{width:100%;max-width:700px;margin-inline:auto;border-collapse:collapse;font-size:clamp(.9rem, 1.5vw, 1.125rem)}
th,td{padding:1em;font-size: 10pt;border-bottom:1px solid var(--border)}
th{color:var(--accent);text-align:left}
tr:last-child td{border-bottom:none;font-weight:800;color:var(--accent)}

/*  11 — FOOTER  */
footer{text-align:center;padding:clamp(4rem, 8vw, 7rem) 1rem;background:#000;border-top:1px solid var(--border)}
footer h2{font-size:clamp(1.75rem, 3vw, 2.75rem);margin-bottom:1.5rem}
footer .btn{margin-bottom:1rem}

/*  12 — GLASS NAV (STICKY)  */
nav{
  position:sticky;top:0;z-index:999;
  display:flex;justify-content:center;gap:clamp(1rem, 3vw, 3rem);
  padding:.75rem 1rem;
  backdrop-filter:blur(12px);
  background:var(--bg-glass);
  border-bottom:1px solid var(--border);
}
nav a{color:var(--text-muted);font-weight:600;font-size:clamp(.8rem, 1.2vw, 1rem);transition:color .25s}
nav a:hover{color:var(--accent)}

/*  13 — RESPONSIVE MICRO-ADJUSTMENTS  */
@media(max-width:48em){
  .hero{padding-block:4rem}
  .cta-row{flex-direction:column}
}