/* ===================== Base ===================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


/* ---------- Global variables ---------- */
:root {
  --bg: #0a0e1a;                                  /* Background color (dark) */
  --txt: #e7eefc;                                 /* Main text color */
  --fs-3: 1rem;                                   /* Base font size */
  --ff: 'Space Grotesk', system-ui, sans-serif;   /* Font family */

  --card: #0c1224;                                /* Card background */
  --brand-1: #6366f1;                             /* Primary brand color */
  --brand-2: #059669;                             /* Secondary brand color */
  --border: #1a2032;                              /* Border color */

  --g-3: 1rem;                                    /* Small gap */
  --g-6: 2rem;                                    /* Large gap */
  --r-2: 8px;                                     /* Border radius */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.1);       /* Card shadow */
  --ink: #e7eefc;
  --muted: #a1aab7;
  --bg-deep: #0a0e1a;
  --surface-0: #0a0e1a;
  --surface-1: #10162a;
  --surface-2: #1e253e;
  --edge: rgba(255,255,255,.15);
  --edge-strong: rgba(255,255,255,.25);
  --glow: rgba(16,185,129,.25);
  --acc: #10b981;
  --acc-2: #059669;
  --grad-start: #6cffb3;
  --grad-medium: #10b981;
  --grad-end: #059669;
  --fg: var(--ink);
  --brand-1: var(--acc);
  --brand-2: var(--acc-2);

  --nav-fg: var(--ink);
  --nav-fg-active: var(--acc);
  --nav-bg-hover: color-mix(in srgb, var(--acc) 12%, transparent);
  --nav-shadow-hover: 0 0 12px color-mix(in srgb, var(--acc) 45%, transparent);
}


/* ---------- Body ---------- */
body {
  margin: 0;
  background: 
    var(--bg);
  color: var(--txt);
  font: 400 var(--fs-3) / 1.6 var(--ff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* ---------- Links ---------- */
a {
  color: inherit;
}


/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Layout containers ---------- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(env(safe-area-inset-left), clamp(16px, 6vw, 32px));
  padding-right: max(env(safe-area-inset-right), clamp(16px, 6vw, 32px));
}

.section {
  padding: var(--g-6) 0;
}


/* ---------- Focus styles ---------- */
:where(a, button, [tabindex]):focus {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ---------- Skip link (accessibility) ---------- */
.skip {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg);
  color: var(--txt);
  padding: 8px 12px;
  z-index: 10000;
  transition: top 0.2s;
}

.skip:focus {
  top: 8px;
}