/* Beecycle landing — same machine identity as the app (web/src/app/theme.css):
   cut corners not rounded, Archivo broadcast type, near-black cold ground,
   lime strictly as signal, the route renders as the only imagery. */

:root {
  --bg: #05070a;
  --panel: #0a0e13;
  --panel-2: #0f151c;
  --line: #1a232e;
  --line-2: #27333f;
  --text: #e8eef6;
  --text-dim: #8494a6;
  --text-faint: #56636f;
  --lime: #d2f227;
  --lime-2: #eaff6a;
  --lime-wash: rgba(210, 242, 39, 0.12);
  --lime-line: rgba(210, 242, 39, 0.45);
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cut: 14px;
  --pad: clamp(20px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Chamfered corner — the identity's signature geometry. */
.cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---- Nav ------------------------------------------------------------------ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-stretch: 115%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
}

.wordmark .mark { color: var(--lime); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-links a:hover { color: var(--text); }

.nav-cta {
  color: var(--lime);
  border: 1px solid var(--lime-line);
  padding: 8px 14px;
}
.nav-cta:hover { background: var(--lime-wash); color: var(--lime-2); }

/* ---- Hero ----------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(320px, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(40px, 7vh, 96px) var(--pad);
  max-width: 1280px;
  margin: 0 auto;
}

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 850;
  font-stretch: 118%;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 22px;
}

.lede {
  color: var(--text-dim);
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 46ch;
  margin-bottom: 30px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 13px 24px 11px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px),
                     calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.btn-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.btn.primary { background: var(--lime); color: #10130a; }
.btn.primary:hover { background: var(--lime-2); }

.btn.ghost {
  border: 1px solid var(--line-2);
  color: var(--text);
  background: var(--panel);
}
.btn.ghost:hover { border-color: var(--text-faint); }

.cta-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-faint);
  max-width: 52ch;
}

.hero-shot {
  position: relative;
  background: var(--panel);
}
.hero-shot img { width: 100%; height: auto; }
.hero-shot figcaption {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(5, 7, 10, 0.9));
}
.tick { width: 8px; height: 8px; background: var(--lime); }

/* ---- Pillars -------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 24px var(--pad) 8px;
  max-width: 1280px;
  margin: 0 auto;
}

.pillar {
  background: var(--panel);
  border-top: 1px solid var(--line-2);
  padding: 26px 26px 30px;
}

.pillar-n {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--lime);
  margin-bottom: 14px;
}

.pillar h2 {
  font-size: 20px;
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.pillar p { color: var(--text-dim); font-size: 14.5px; }

/* ---- Routes --------------------------------------------------------------- */

.routes {
  padding: clamp(48px, 8vh, 88px) var(--pad);
  max-width: 1280px;
  margin: 0 auto;
}

.section-head { margin-bottom: 26px; }
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 850;
  font-stretch: 116%;
  text-transform: uppercase;
}
.section-head p { color: var(--text-faint); font-size: 14px; margin-top: 6px; }

.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.route { background: var(--panel); }
.route img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.route figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--line);
}
.route strong {
  font-weight: 800;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
}
.route span { color: var(--text-faint); font-size: 12.5px; }

/* ---- Closing band ---------------------------------------------------------- */

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: var(--panel-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: clamp(32px, 5vh, 56px) var(--pad);
}

.band h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 850;
  font-stretch: 114%;
  text-transform: uppercase;
  max-width: 22ch;
}
.band p { color: var(--text-dim); margin-top: 8px; font-size: 15px; }

/* ---- Footer ---------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px var(--pad) 34px;
  color: var(--text-faint);
  font-size: 13px;
}
.footer .wordmark { font-size: 14px; color: var(--text-dim); }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--text); }

/* ---- Small screens --------------------------------------------------------- */

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-cta) { display: none; }
}