:root{
  /* Palette (neutral, no cyan) */
  --bg-0: #0f1216;   /* page */
  --bg-1: #151a20;   /* cards / nav */
  --bg-2: #1b2129;   /* elevated */
  --text: #f3f5f7;
  --muted:#a3acb7;
  --line: #222832;
  --focus:#94a3b8;   /* slate focus ring */
  --ok:   #84d8a3;
  --danger:#e57373;

  /* Type & rhythm */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --max: 1120px;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 34px;
  --space-5: 56px;

  /* Effects */
  --ring: 0 0 0 3px color-mix(in lab, var(--focus) 35%, transparent);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background: var(--bg-0);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block; border-radius:calc(var(--radius-sm) - 2px)}
:focus-visible{outline:none; box-shadow: var(--ring)}

/* ===== Layout ===== */
.container{max-width:var(--max); margin:auto; padding:0 var(--space-3)}
.section{padding:var(--space-5) var(--space-3); border-top:1px solid var(--line); background:transparent}
.section h2{
  font-size: clamp(24px, 2.2vw, 32px);
  margin:0 0 var(--space-2);
  letter-spacing:.2px;
}
.section h2 + .section__rule{
  height:1px; background:var(--line); width:72px; margin:10px 0 var(--space-2);
}

/* ===== Navigation (keeps dropdown behavior) ===== */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(15,18,22, .8);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .inner{
  max-width:var(--max); margin:0 auto;
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-weight:700; letter-spacing:.3px; font-size:15px;
  color:var(--text);
}

/* Menu row */
.menu{display:flex; align-items:center; gap:18px}
.menu a{
  color:var(--muted);
  padding:8px 4px; border-radius:8px; position:relative; line-height:1;
}
.menu a:hover, .menu a:focus{color:var(--text)}
.menu a.active{color:var(--text)}
.menu a.active::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--text); opacity:.25;
}

/* Dropdown */
.has-dropdown{position:relative}
.has-dropdown .menu-link{padding-right:4px}   /* no arrow; cleaner look */

/* Panel */
.dropdown{
  position:absolute; left:0; top:100%;
  min-width:220px; margin-top:0; /* sit flush - no hover gap */
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
  z-index:100;
}
/* Invisible bridge to stop flicker when moving mouse down */
.dropdown::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px}

.dropdown a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--text); white-space:nowrap;
}
.dropdown a:hover{
  background: rgba(255,255,255,.035);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
}

/* ===== Hero ===== */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;
  padding:calc(var(--space-5) + 6px) var(--space-3);
  border-bottom:1px solid var(--line);
}
.center-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.center-hero .lede {
  text-align:left;          /* override to normal paragraph alignment */
  max-width:700px;          /* optional: keep paragraphs readable */
  margin-left:auto;
  margin-right:auto;        /* centers the block but keeps text ragged-left */
}

.center-hero .badges {
  justify-content:center;
}
.hero h1{
  font-size: clamp(30px, 4.4vw, 54px);
  line-height:1.06; margin:0 0 var(--space-2); letter-spacing:.2px; text-wrap:balance;
}
.lede{color:var(--muted); font-size:18px}
.hero-card{
  background: var(--bg-1);
  padding:14px; border-radius:var(--radius-lg); border:1px solid var(--line);
}

/* ===== Grids ===== */
.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* ===== Cards ===== */
.card{
  background: var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in lab, var(--text) 14%, var(--line));
  background: color-mix(in lab, var(--bg-1) 90%, #ffffff 10%);
}
.card .body{padding:16px}
.card h3{margin:4px 0 6px; font-size:18px}
.meta{color:var(--muted); font-size:13px}

/* ===== Quote & badges ===== */
.quote{border-left:3px solid var(--line); padding-left:14px; color:var(--muted)}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.badge{
  border:1px solid var(--line); color:var(--muted);
  padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.2px
}

/* ===== Buttons ===== */
.button{
  display:inline-block; padding:10px 16px; border-radius:12px;
  background: transparent;
  border:1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.button:hover{
  transform: translateY(-1px);
  border-color: color-mix(in lab, var(--text) 18%, var(--line));
  background: rgba(255,255,255,.04);
}
.button:active{transform: translateY(0) scale(.99)}
.button--ghost{background:transparent; border-color:var(--line)}

/* ===== Footer ===== */
.footer{
  padding:24px var(--space-3);
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--line);
  background: var(--bg-1);
}

/* ===== Media blocks ===== */
.video, video{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.gallery img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .2s ease, filter .2s ease;
  filter: saturate(96%) contrast(102%);
}
.gallery img:hover{transform:translateY(-2px); filter:saturate(108%)}

/* ===== Tables ===== */
table{width:100%; border-collapse:collapse; font-size:14px}
th, td{padding:10px 12px; border-bottom:1px solid var(--line)}
th{text-align:left; color:var(--muted); font-weight:600}

/* ===== Code ===== */
code, pre{
  font-family:var(--mono); font-size:.95em;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--line); border-radius:12px;
}
code{padding:2px 6px}
pre{padding:14px; overflow:auto}

/* ===== Motion prefs ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ===== Utilities ===== */
.max{max-width:var(--max); margin-inline:auto}
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)}
.center{text-align:center}
.text-muted{color:var(--muted)}
.callout{
  background: transparent;
  border:1px dashed var(--line);
  padding:14px; border-radius:var(--radius-sm); color:var(--text)
}