/* =========================================================================
   Landbitt landing page — shared foundation
   Source: Figma "Landbitt — Landing Page · Desktop 1440" (2321:14),
           "Landing Page · Mobile 390" (2345:1227) and the
           "Motion & Interaction Spec" (2343:731).
   Every section stylesheet in css/sections/ builds on these tokens and
   primitives. Do not hardcode a colour/shadow/ease that exists here.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --ground: #f4f8fb;          /* page background */
  --surface: #ffffff;         /* white bands / cards */
  --ink: #11201f;             /* headings, body-strong */
  --ink-deep: #06211f;        /* darkest green-black (dark sections, glyph stroke) */
  --ink-btn: #07403f;         /* text on white buttons */
  --muted: #5b6e70;           /* body copy, captions */
  --line: #dce7ec;            /* hairlines, ghost borders */
  --accent: #31e29a;          /* bright mint — dots, highlights */
  --accent-deep: #16a97a;     /* deeper green — hover borders, gradient start */
  --cta-a: #20aba0;           /* primary button gradient start */
  --cta-b: #199aac;           /* primary button gradient end */

  --grad-cta: linear-gradient(127deg, var(--cta-a) 6.84%, var(--cta-b) 93.16%);
  --grad-stat: linear-gradient(119deg, var(--accent-deep) 6.84%, var(--cta-b) 93.16%);
  --grad-mark: linear-gradient(140deg, var(--accent) 14.51%, var(--accent-deep) 85.49%);

  /* Elevation */
  --el-sm: 0 1px 2px rgba(6, 33, 31, .05), 0 4px 14px rgba(6, 33, 31, .05);
  --el-md: 0 14px 34px rgba(6, 33, 31, .10);
  --el-lg: 0 26px 70px rgba(6, 33, 31, .22);
  --el-cta: 0 8px 22px rgba(25, 154, 172, .32);
  --el-cta-hover: 0 14px 30px rgba(25, 154, 172, .42);

  /* Type */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1160px;        /* 1440 frame − 2 × 140px gutters */
  --gutter: 20px;             /* mobile gutter (Figma 390 frame) */
  --sec-pad: 106px;           /* section top/bottom rhythm, desktop */
  --head-gap: 44px;           /* SectionHead → content */
  --nav-h: 70px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-state: .45s;
  --t-hover: .25s;
  --t-card: .3s;
}

@media (max-width: 720px) {
  :root {
    --sec-pad: 64px;
    --head-gap: 30px;
  }
}
/* Large screens: the page grows with the monitor instead of sitting in a
   narrow 1160px column (type steps up in css/sections/96-responsive.css). */
@media (min-width: 1600px) { :root { --container: 1320px; --sec-pad: 120px; --head-gap: 52px; } }
@media (min-width: 1900px) { :root { --container: 1440px; --sec-pad: 132px; --head-gap: 56px; } }
@media (min-width: 2400px) { :root { --container: 1600px; --sec-pad: 148px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; }
section[id] { scroll-margin-top: 84px; }

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

.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;
}

/* ---------- Layout primitives ---------- */
.wrap {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.sec { padding-block: var(--sec-pad); }

/* ---------- Typography primitives ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.eyebrow--on-dark { color: #fff; }

.h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.h2--pinned { font-size: 42px; }
.lede {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}
.h3-card { font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.h3-statement { font-size: 35px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.h4-item { font-size: 16.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.body-15 { font-size: 15px; line-height: 1.6; }
.body-14-5 { font-size: 14.5px; line-height: 1.6; }
.body-14 { font-size: 14px; line-height: 1.5; }
.caption { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tag-label { font-size: 10.5px; font-weight: 800; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; }

/* SectionHead: eyebrow → H2 → lede. Desktop width 660px. */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 660px;
  margin-bottom: var(--head-gap);
}
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }

@media (max-width: 720px) {
  .sec-head { gap: 12px; }
  .h2, .h2--pinned { font-size: 28px; line-height: 1.12; }
  .lede { font-size: 15.5px; }
}

/* ---------- Buttons (Figma component "Button" 2309:27) ----------
   Style: .btn-pri | .btn-ghost | .btn-on-dark | .btn-white
   Size:  default (md 15px, 14/26) | .btn-lg (16px, 16/32) | .btn-sm (14px, 10/20) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    transform var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; min-height: 40px; }
.btn-block { width: 100%; }

.btn-pri { background: var(--grad-cta); color: #fff; box-shadow: var(--el-cta); border: 0; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-on-dark { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.btn-white { background: #fff; color: var(--ink-btn); border: 0; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-pri:hover { box-shadow: var(--el-cta-hover); }
  .btn-ghost:hover { border-color: var(--accent-deep); }
  .btn-on-dark:hover { background: rgba(255, 255, 255, .1); }
  .btn-white:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
}

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; }
/* Brand logo image (assets/brand): icon + LANDBITT + tagline in one file.
   -light has a white "LAND" for dark grounds, -dark an ink one for light grounds. */
.logo__img { display: block; width: auto; height: 52px; max-width: none; }
.logo--sm .logo__img { height: 40px; }
.logo__mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-mark);
}
.logo__mark img { width: 24px; height: 24px; }
.logo__text { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.logo__word { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.logo__word span { color: var(--accent); }
.logo__sub { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .04em; color: rgba(255, 255, 255, .82); }

.logo--sm { gap: 10px; }
.logo--sm .logo__mark { width: 30px; height: 30px; border-radius: 9px; }
.logo--sm .logo__mark img { width: 16px; height: 16px; }
.logo--sm .logo__text { gap: 1px; }
.logo--sm .logo__word { font-size: 16px; color: var(--ink); }
.logo--sm .logo__word span { color: inherit; }
.logo--sm .logo__sub { font-size: 9px; letter-spacing: .06em; color: var(--muted); }

/* ---------- Scroll reveal (spec 2343:763) ----------
   Add data-rv to any element; data-d="1..5" staggers by 0.08s.
   Only active once JS adds .js to <html> (skipped under reduced motion). */
.js [data-rv] {
  opacity: 0;
  transform: translateY(44px) scale(.97);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease) var(--rv-delay, 0s),
    transform 1.1s var(--ease) var(--rv-delay, 0s),
    filter .9s var(--ease) var(--rv-delay, 0s);
}
.js [data-rv].in { opacity: 1; transform: none; filter: none; }
.js [data-rv][data-d="1"] { --rv-delay: .08s; }
.js [data-rv][data-d="2"] { --rv-delay: .16s; }
.js [data-rv][data-d="3"] { --rv-delay: .24s; }
.js [data-rv][data-d="4"] { --rv-delay: .32s; }
.js [data-rv][data-d="5"] { --rv-delay: .40s; }

/* Hover lifts are pointer-only (spec: "Disabled on touch") */
@media (hover: none) {
  .btn:hover, [class*="card"]:hover { transform: none !important; }
}

/* Horizontal rails (comparison table, commission ladder) — edge fade
   driven by .can-x / .at-end from js/main.js */
.rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail-wrap { position: relative; }
.rail-wrap.can-x::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rail-fade, var(--ground)));
  transition: opacity .3s var(--ease);
}
.rail-wrap.can-x.at-end::after { opacity: 0; }

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