:root{
  --bg-0:#070a12;
  --bg-1:#0b1220;
  --bg-2:#071a2a;

  --text:#eaf0ff;
  --muted:#aab7d6;

  --brand:#4aa3ff;
  --brand-2:#2fe3c2;

  --nav-dropdown-bg: rgba(7,10,18,.82);

  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.16);

  --shadow: 0 18px 60px rgba(0,0,0,.55);

  --container: 1120px;
  --radius: 16px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Header handle tokens (moved from elements.css) */
  --handle-top: 8px;
  --handle-w: 72px;
  --handle-h-collapsed: 24px;
  --handle-h-open: 34px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* Scroll Bar Site theme */

html{
  scrollbar-gutter: stable;
}

/* Firefox scrollbar */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(74,163,255,.45) rgba(7,10,18,.65);
}

/* WebKit (Chrome/Edge/Safari) scrollbar */
::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track{
  background: rgba(7,10,18,.65);
  border-left: 1px solid rgba(255,255,255,.06);
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,
    rgba(74,163,255,.55),
    rgba(47,227,194,.35)
  );
  border-radius: 999px;
  border: 3px solid rgba(7,10,18,.65); /* creates “padding” around thumb */
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,
    rgba(74,163,255,.75),
    rgba(47,227,194,.55)
  );
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  overflow-x:hidden;

  /* Base dark bed (let the animated layers do the “interesting”) */
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(74,163,255,.10), transparent 60%),
    radial-gradient(820px 520px at 82% 28%, rgba(47,227,194,.08), transparent 62%),
    linear-gradient(
      180deg,
      var(--bg-0) 0%,
      var(--bg-1) 25%,
      var(--bg-2) 55%,
      var(--bg-1) 80%,
      var(--bg-0) 100%
    );
  background-attachment: fixed;
}

/* Tiny noise so gradients don’t band */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-6;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.container{
  width:min(var(--container), calc(100% - 2*var(--space-4)));
  margin-inline:auto;
}

.section{ padding: var(--space-7) 0; }
.section-slim{ padding: var(--space-6) 0; }

.muted{ color:var(--muted); }
.eyebrow{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  font-family:var(--mono);
}