/* ==========================================================================
   FaasTrader — base.css
   Reset + typography + layout primitives (container, grid, flex helpers).
   Kept intentionally small — this is not a utility framework, it's the
   handful of primitives every component in components.css builds on.
   ========================================================================== */

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

html{
  /* No scroll-behavior:smooth here — Lenis (js/scroll.js) owns smooth
     scrolling. Native CSS smoothing fights it and causes stutter; the
     Lenis-less fallback path uses behavior:'smooth' inline instead. */
  text-size-adjust:100%;
}
body{
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height:1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

img, svg, video, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; padding:0; }
input, textarea, select{ font:inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:800;
  color: var(--text);
}
p{ color: var(--text-muted); }

/* ---- Layout primitives ---- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(1.1rem, 4vw, 1.5rem);
}
.container--narrow{ max-width: var(--container-narrow); }

.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; }

.grid{ display:grid; gap: var(--sp-sm); }
.grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
.grid--auto{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
@media (min-width:720px){
  .grid--2{ grid-template-columns: repeat(2,1fr); }
  .grid--3{ grid-template-columns: repeat(3,1fr); }
  .grid--4{ grid-template-columns: repeat(4,1fr); }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand-600);
}

.section-head{ max-width: 640px; margin-inline:auto; text-align:center; margin-bottom: var(--sp-lg); }
.section-head--left{ margin-inline:0; text-align:left; }
.section-title{ font-size: var(--fs-2xl); margin-block:.5em .3em; }
.section-lede{ font-size: var(--fs-md); color: var(--text-muted); }

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

.skip-link{
  position:absolute; left:-999px; top:auto; z-index:999;
  background: var(--brand-600); color:#fff; padding:.75em 1.25em; border-radius: var(--r-sm);
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline: 2.5px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection{ background: var(--brand-500); color:#fff; }

i[data-lucide]{ display:inline-flex; align-items:center; justify-content:center; }
.icon-fallback svg{ width:100%; height:100%; opacity:.55; }

/* Scrollbar (progressive enhancement, WebKit + Firefox) */
html{ scrollbar-color: var(--brand-500) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background: var(--brand-500); }