/* ── Service Match Network — design tokens ─────────────────────────────
   Single source of truth for color, type, space and motion.
   Palette: electric green on near-black.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Brand green */
  --g-300: #7BF5A8;
  --g-400: #4AE87F;
  --g-500: #1ED760;   /* primary */
  --g-600: #16B94F;
  --g-700: #0E8D3A;
  --g-glow: rgb(30 215 96 / 0.28);
  --g-soft: rgb(30 215 96 / 0.10);
  --g-line: rgb(30 215 96 / 0.22);

  /* Near-black surfaces */
  --bg:        #08090A;
  --bg-1:      #0D0F11;
  --bg-2:      #121518;
  --bg-3:      #191D21;
  --line:      rgb(255 255 255 / 0.08);
  --line-soft: rgb(255 255 255 / 0.05);

  /* Text */
  --tx-hi:  #FFFFFF;
  --tx:     #B6BDC6;
  --tx-mid: #8A929C;
  --tx-lo:  #626A74;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter Tight", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.81rem);
  --fs-sm:   clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --fs-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --fs-lg:   clamp(1.13rem, 1.05rem + 0.38vw, 1.31rem);
  --fs-xl:   clamp(1.35rem, 1.20rem + 0.72vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.44rem + 1.55vw, 2.65rem);
  --fs-3xl:  clamp(2.15rem, 1.55rem + 3.40vw, 4.35rem);

  /* Space — 4px base */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Radius + elevation */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 28px 60px rgb(0 0 0 / 0.55);
  --shadow-green: 0 10px 34px rgb(30 215 96 / 0.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 280ms;
  --dur-slow: 640ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  color: var(--tx-hi);
  text-wrap: balance;
  letter-spacing: -0.03em;
  font-weight: 700;
}

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--g-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--g-500); color: #05140B; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}