/* ============================================================
   RepoCrew — monochrome design system
   Dark-first, near-black. Geist Sans + Geist Mono.
   No purple / indigo / violet (brand constraint).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;450;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ---- surfaces (near-black, cool neutral) ---- */
  --bg:            #08090a;
  --bg-1:          #0c0d0f;
  --bg-2:          #111214;
  --panel:         #0f1012;
  --panel-2:       #16171a;
  --panel-3:       #1c1e22;

  /* ---- hairlines ---- */
  --line:          rgba(255,255,255,.07);
  --line-2:        rgba(255,255,255,.11);
  --line-3:        rgba(255,255,255,.16);

  /* ---- text ---- */
  --text:          #ecedee;
  --text-1:        #b9bbc0;
  --text-2:        #8a8d94;
  --text-3:        #5f6269;
  --white:         #ffffff;
  --black:         #08090a;

  /* ---- brand accent (from logo) ---- */
  --brand:         #54d79c;
  --brand-dim:     rgba(84,215,156,.13);
  --brand-line:    rgba(84,215,156,.32);
  --brand-text:    #6fe0ac;

  /* ---- functional (muted, product-only) ---- */
  --ok:            #5cb585;
  --ok-dim:        rgba(92,181,133,.14);
  --warn:          #cf9a3f;
  --warn-dim:      rgba(207,154,63,.14);
  --fail:          #d2706c;
  --fail-dim:      rgba(210,112,108,.14);
  --info:          #6f93cf;
  --info-dim:      rgba(111,147,207,.14);

  /* ---- type ---- */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---- layout ---- */
  --maxw: 1180px;
  --maxw-narrow: 920px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --nav-h: 60px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 14px 40px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 120px -30px rgba(0,0,0,.85), 0 0 0 1px var(--line);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(255,255,255,.16); color:#fff; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
button{ font-family:inherit; }

/* ---- keyboard focus (a11y) ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--brand, #2dd4bf);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- skip to content (visually hidden until focused) ---- */
.skip-link{
  position:fixed; top:10px; left:50%; transform:translateX(-50%) translateY(-150%);
  z-index:200; padding:9px 16px; border-radius:8px;
  background:var(--panel-2); color:var(--text); border:1px solid var(--brand, #2dd4bf);
  font-size:14px; font-weight:500; box-shadow:var(--shadow);
  transition:transform .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible{ transform:translateX(-50%) translateY(0); outline:none; }

/* ---- scrollbar ---- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-3); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:padding-box; }

/* ============================================================
   Type scale
   ============================================================ */
.kicker{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
}
.display{
  font-weight:600;
  letter-spacing:-0.035em;
  line-height:.98;
  font-size:clamp(44px, 7.4vw, 88px);
}
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.028em; line-height:1.05; }
.h-sec{ font-size:clamp(30px, 4.4vw, 50px); letter-spacing:-0.032em; line-height:1.04; }
.h-feat{ font-size:clamp(24px, 3vw, 34px); letter-spacing:-0.028em; line-height:1.08; }
.lede{ font-size:clamp(17px, 1.7vw, 20px); line-height:1.55; color:var(--text-1); font-weight:400; letter-spacing:-0.012em; }
.muted{ color:var(--text-2); }
.mono{ font-family:var(--mono); }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:var(--maxw-narrow); margin:0 auto; padding:0 28px; }
section{ position:relative; }
.sec-pad{ padding:clamp(72px,11vw,140px) 0; }
.center{ text-align:center; }
.eyebrow-row{ display:flex; align-items:center; gap:10px; }
.eyebrow-row::before{ content:""; width:18px; height:1px; background:var(--line-3); display:inline-block; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px;
  border-radius:9px;
  font-size:14px; font-weight:500; letter-spacing:-0.01em;
  cursor:pointer; border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(.5px); }
.btn-primary{ background:var(--white); color:#0a0b0c; }
.btn-primary:hover{ background:#e4e5e7; }
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--line-3); }
.btn-quiet{ background:transparent; color:var(--text-1); }
.btn-quiet:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.btn-sm{ height:34px; padding:0 13px; font-size:13px; border-radius:8px; }
.btn-lg{ height:46px; padding:0 22px; font-size:15px; border-radius:10px; }
.arrow{ transition:transform .16s ease; }
.btn:hover .arrow{ transform:translateX(2px); }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled{
  background:rgba(8,9,10,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{ max-width:var(--maxw); width:100%; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:30px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15.5px; letter-spacing:-0.02em; }
.brand .mark{ width:22px; height:22px; }
.brand .mark .gl-bg{ fill:rgba(255,255,255,.05); stroke:var(--line-2); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-size:14px; color:var(--text-1); padding:7px 11px; border-radius:7px;
  transition:color .14s ease, background .14s ease; letter-spacing:-0.01em;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-links a.active{ color:var(--text); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-icon{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:var(--text-2); transition:color .14s, background .14s; }
.nav-icon:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-burger{ display:none; }

/* ============================================================
   Glow / backdrop accents (grayscale, no hue)
   ============================================================ */
.glow{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.5; }
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity:.5;
}

/* ============================================================
   Generic UI atoms used in mocks
   ============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 8px; border-radius:6px;
  font-size:11.5px; font-weight:500; letter-spacing:-0.005em;
  border:1px solid var(--line-2); color:var(--text-1);
  font-family:var(--mono);
}
.dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  padding:3px 8px; border-radius:6px; border:1px solid var(--line-2);
  color:var(--text-2); text-transform:uppercase;
}

/* status colors */
.s-ok{ color:var(--ok); } .b-ok{ background:var(--ok); } .bg-ok{ background:var(--ok-dim); border-color:rgba(92,181,133,.3); color:var(--ok); }
.s-warn{ color:var(--warn); } .b-warn{ background:var(--warn); } .bg-warn{ background:var(--warn-dim); border-color:rgba(207,154,63,.3); color:var(--warn); }
.s-fail{ color:var(--fail); } .b-fail{ background:var(--fail); } .bg-fail{ background:var(--fail-dim); border-color:rgba(210,112,108,.3); color:var(--fail); }
.s-info{ color:var(--info); } .b-info{ background:var(--info); } .bg-info{ background:var(--info-dim); border-color:rgba(111,147,207,.3); color:var(--info); }

/* ============================================================
   Card / surface
   ============================================================ */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.surface{ background:linear-gradient(180deg, var(--bg-1), var(--bg)); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:72px 0 40px; background:var(--bg); position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:40px; }
.footer-col h5{ font-size:12px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 16px; font-weight:500; }
.footer-col a{ display:block; color:var(--text-2); font-size:14px; padding:6px 0; transition:color .14s; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:60px; padding-top:28px; border-top:1px solid var(--line); color:var(--text-3); font-size:13px; }
.footer-bottom .mono{ font-size:12px; }

/* ============================================================
   Mobile menu (shared across all pages)
   ============================================================ */
.mobile-menu{ position:fixed; inset:var(--nav-h) 0 0; z-index:70; background:rgba(8,9,10,.98); backdrop-filter:blur(8px); padding:24px; display:none; flex-direction:column; gap:4px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-size:18px; padding:14px 8px; border-bottom:1px solid var(--line); color:var(--text-1); }
.mobile-menu .mm-cta{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.nav-burger{ width:34px; height:34px; align-items:center; justify-content:center; border-radius:8px; color:var(--text-1); background:transparent; border:1px solid var(--line-2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width: 560px){
  .wrap, .wrap-narrow{ padding:0 18px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}