/* UrbanMind design system — the shared look of the pitch surfaces.
   Tokens and primitives only; each page keeps its own layout CSS inline.
   Nothing here is specific to one surface, so a brand change happens once.

   The consumer must load the three families itself (Space Grotesk, Inter,
   JetBrains Mono) — an @import here would block render on a third-party
   round trip before a single rule applied. */

:root{
  /* brand */
  --blue:#0057FF; --emerald:#00C853; --amber:#FFB300;
  --bg:#0F172A; --card:#1E293B; --text:#F8FAFC;

  /* derived */
  --bg-deep:#080D1A;
  --line:rgba(248,250,252,.10);
  --line-soft:rgba(248,250,252,.06);
  --muted:rgba(248,250,252,.62);
  --faint:rgba(248,250,252,.40);

  --font-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;

  --pad:clamp(1.25rem,4vw,4.5rem);
  --section:clamp(4.5rem,9vw,9rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-deep); color:var(--text);
  font-family:var(--font-body); font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; line-height:1.05;
  margin:0; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img,video{max-width:100%; display:block}

.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.wrap{max-width:1280px; margin:0 auto; padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:1.6rem; height:1px; background:var(--blue);
  box-shadow:0 0 10px var(--blue)}
.h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.9rem); margin-block:1.1rem .9rem;
  letter-spacing:-.035em}
.lede{color:var(--muted); max-width:62ch; font-size:clamp(1rem,.95rem + .3vw,1.2rem)}

.btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.78rem 1.35rem;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 24px -6px rgba(0,87,255,.75)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(0,87,255,.95)}
.btn-ghost{border-color:var(--line); color:var(--text); background:rgba(248,250,252,.03)}
.btn-ghost:hover{border-color:rgba(248,250,252,.3); transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem; font-size:.85rem}

.chip{font-family:var(--font-mono); font-size:.75rem; padding:.32rem .7rem;
  border-radius:6px; background:rgba(248,250,252,.05);
  border:1px solid var(--line-soft); color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:.45rem}

/* faint blueprint grid, decorative only */
.grid-bg{position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 78%);
}

/* scroll reveal — JS adds .in */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
}