/* ==========================================================================
   base.css — reset, design tokens, typography
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Brand */
  --lime: #c4ef27;
  --lime-soft: #d6f275;
  --lime-grad: linear-gradient(227deg, #c4ef27 0%, #d6f275 100%);
  --lime-label: #769015;
  --lime-border: #add716;

  /* Neutrals */
  --black: #000000;
  --ink: #0c0c0c;
  --ink-800: #101010;
  --ink-700: #181818;
  --white: #ffffff;

  --grey-050: #f5f5f7;
  --grey-100: #f1f1f1;
  --grey-200: #ebebed;
  --grey-300: #d8d8d8;
  --grey-400: #cecece;

  --text: #0c0c0c;
  --text-muted: #575757;
  --text-muted-2: #5e5e5e;
  --text-muted-3: #6e6e6e;
  --text-on-dark: #bdbdbd;

  /* Type */
  --font-sans: 'Aeonik Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Ubuntu Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights — named after the design's styles */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;

  /* Layout */
  --page-max: 1440px;
  --container: 1312px;
  /* Fluid side margin: 64px on a 1440px design, scaling down on smaller screens */
  --gutter: clamp(20px, 4.44vw, 64px);
  --header-h: 104px;   /* sticky header height, used to fit the hero on first screen */
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 10px;
  --radius-pill: 40px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Dark scrim over imagery — Figma node 698:628.
     One definition shared by the feature cards and the community tiles. */
  --scrim: linear-gradient(180deg, rgba(12, 12, 12, 0) 0%, #0c0c0c 100%);
  --scrim-flipped: linear-gradient(0deg, rgba(12, 12, 12, 0) 0%, #0c0c0c 100%);
  --scrim-blur: blur(18px);
  /* Figma masks the backdrop blur by the layer's own alpha ramp. CSS
     backdrop-filter is uniform, so we mask it to get the same soft fade-in
     instead of a hard edge where the band starts. */
  --scrim-mask: linear-gradient(180deg, transparent 0%, #000 100%);
  --scrim-mask-flipped: linear-gradient(0deg, transparent 0%, #000 100%);
}

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

* { margin: 0; padding: 0; }

/* No smooth scroll-behavior at desktop widths: main.js drives window.scrollTo
   inside a rAF loop, and a native smooth scroll re-targets itself on every one
   of those calls, so the two fight and the glide stutters. Mobile scrolls
   natively, so it keeps smooth for anchor jumps. */
html { scroll-behavior: auto; }
@media (max-width: 640px) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

/* Icons are square boxes holding non-square glyphs — contain keeps their
   aspect ratio instead of stretching them to the box. */
.icon-btn img,
.btn--glass img,
.acc-icon,
.footer-links img,
.footer-copy img,
.hero-caption-arrow { object-fit: contain; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul { list-style: none; }

/* ---- Typographic helpers ----
   Section heading — design: Aeonik Medium 40 / 56, capitalize. */
.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--w-medium);
  line-height: 56px;
  letter-spacing: -0.4px;
  text-transform: capitalize;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}