/* ==========================================================
   base.css — design tokens, reset, typography, buttons
   ========================================================== */
:root {
  /* palette */
  --ink: #0B1022;          /* page background, blue-tinted */
  --ink-2: #0F1630;
  --panel: #121A36;
  --panel-2: #18224A;
  --line: #243056;
  --text: #E6EBF7;
  --muted: #8C97B8;

  --charge: #37E2D5;       /* primary: BEV / current */
  --amber: #FFB547;        /* secondary: PHEV / warm energy */
  --rose: #FF6B8A;
  --violet: #8B7CFF;

  /* type */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.25rem;
  --step-4: clamp(2.6rem, 6vw, 4rem);
  --step-5: clamp(3.2rem, 9vw, 7.5rem);

  /* shape */
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.is-loading { overflow: hidden; }

/* faint global noise for texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}
h2 { font-size: var(--step-4); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0; }

a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--charge);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- buttons ---------- */
.btn {
  --bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 var(--step-0)/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--charge);
  color: #06201E;
  box-shadow: 0 0 0 0 rgba(55, 226, 213, .5), 0 10px 30px -10px rgba(55, 226, 213, .6);
}
/* sweeping shine */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 0 0 6px rgba(55, 226, 213, .15), 0 14px 40px -10px rgba(55, 226, 213, .8); }

.btn-ghost {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--charge); }

.btn-small { padding: .7em 1.1em; font-size: var(--step--1); }