/* ============================================================
   SENTRYX LABS — "Signal Grid" marketing site  ·  v2 (charged)
   Palette discipline: every colour on this site is a shade of
   red, brown, or gold. Espresso is the darkest brown; champagne
   is the palest gold. Crimson is reserved for "live" energy.
   ============================================================ */

:root {
  /* browns */
  --canvas:      #120C07;
  --canvas-deep: #0C0804;
  --surface:     #1B130B;
  --raised:      #241910;
  --bezel:       #2A1D10;
  --umber:       #3A2A18;

  /* golds */
  --ink:         #F3E7CE;
  --ink-dim:     #B39B72;
  --ink-faint:   #8A7355;
  --gold:        #D9A441;
  --gold-bright: #F0C468;
  --gold-hot:    #FFE3A1;
  --gold-deep:   #9C7326;
  --hairline:    rgba(217, 164, 65, 0.15);
  --hairline-soft: rgba(217, 164, 65, 0.08);

  /* reds */
  --crimson:      #D8372E;
  --crimson-soft: #E85B4E;
  --crimson-deep: #8C1F1A;
  --crimson-dark: #4A140F;

  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-w: 1180px;
  --radius: 20px;
  --ease: cubic-bezier(0.2, 0.65, 0.2, 1);

  /* reusable luxe card face: gradient fill inside a gradient border */
  --card-face: linear-gradient(165deg, #201710 0%, #170F09 100%);
  --card-edge: linear-gradient(160deg,
      rgba(217, 164, 65, 0.45) 0%,
      rgba(217, 164, 65, 0.08) 34%,
      rgba(140, 31, 26, 0.30) 100%);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain over everything — kills the "flat digital" feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: var(--canvas-deep); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--canvas-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--umber), var(--gold-deep));
  border-radius: 8px;
  border: 2px solid var(--canvas-deep);
}

img, svg { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- typography ---------- */

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }

.display {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 750;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

/* word-by-word entrance for the hero headline */
.display .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  animation: wordUp 0.8s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.09s);
}
@keyframes wordUp { to { opacity: 1; transform: none; } }

/* liquid-gold shimmer on the key word */
.display em {
  font-style: normal;
  background: linear-gradient(100deg,
    var(--gold) 0%, var(--gold-bright) 28%, var(--gold-hot) 42%,
    var(--crimson-soft) 68%, var(--gold) 92%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 90% 0; }
}
/* an em that is also a staggered word needs both animations */
.display em.w {
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  animation: wordUp 0.8s var(--ease) forwards, shimmer 6.5s ease-in-out infinite;
  animation-delay: calc(0.15s + var(--i, 0) * 0.09s), 0s;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
}

.h3 { font-size: 1.22rem; font-weight: 650; line-height: 1.3; }

.lead { font-size: 1.14rem; color: var(--ink-dim); max-width: 58ch; }

.gold-text { color: var(--gold); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--crimson-soft));
}
/* the eyebrow rule draws itself when its section reveals */
.reveal .eyebrow::before { width: 0; transition: width 0.9s 0.25s var(--ease); }
.reveal.in .eyebrow::before { width: 26px; }

.mono { font-family: var(--font-mono); }

/* ---------- glass nav (glass-on-chrome only) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(18, 12, 7, 0.86);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.35s, box-shadow 0.35s;
}
@supports (backdrop-filter: blur(14px)) {
  .nav {
    background: rgba(18, 12, 7, 0.55);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
}
.nav.scrolled {
  background: rgba(12, 8, 4, 0.72);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height 0.3s var(--ease);
}
.nav.scrolled .nav-inner { height: 58px; }
.logo {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 750; font-size: 1.06rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-mark .pin-dot { animation: pulse 2.2s ease-out infinite; transform-origin: center; }
.logo small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  display: block;
  margin-top: 1px;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--ink-dim);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.18s;
}
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  height: 1.5px; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(217, 164, 65, 0));
  transition: width 0.3s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { width: 100%; }
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a.active { color: var(--gold); }
/* the CTA inside the nav must not inherit the muted link colour —
   .nav-links a outranks .btn-gold on specificity */
.nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: #1A1006; }

/* ---------- buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.97rem;
  padding: 14px 30px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1A1006;
  box-shadow: 0 4px 24px rgba(217, 164, 65, 0.25), inset 0 1px 0 rgba(255, 227, 161, 0.7);
}
.btn-gold::after {                     /* light sweep across the gold */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%; left: -70%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 245, 220, 0.55), transparent);
  transition: left 0.55s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 38px rgba(217, 164, 65, 0.4); }
.btn-gold:hover::after { left: 135%; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: inset 0 0 24px rgba(217, 164, 65, 0.08), 0 0 24px rgba(217, 164, 65, 0.1);
  transform: translateY(-2px);
}
.btn-sm { padding: 9px 20px; font-size: 0.88rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 168px 0 120px;
  overflow: hidden;
}

/* faint gold hairline grid over the whole hero */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 20%, transparent 75%);
  pointer-events: none;
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { background-position: 72px 72px, 72px 72px; } }

/* warm glow behind the radar */
.hero::after {
  content: "";
  position: absolute;
  top: 6%; right: -12%;
  width: 780px; height: 780px;
  background: radial-gradient(circle,
    rgba(216, 55, 46, 0.12) 0%,
    rgba(217, 164, 65, 0.08) 34%,
    transparent 68%);
  pointer-events: none;
  animation: glowBreathe 9s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

/* a scanline sweeping slowly down the hero */
.scanline {
  position: absolute;
  left: 0; right: 0;
  top: -160px;
  height: 140px;
  background: linear-gradient(180deg,
    transparent,
    rgba(217, 164, 65, 0.04) 40%,
    rgba(240, 196, 104, 0.11) 82%,
    rgba(240, 196, 104, 0.16) 84%,
    transparent 86%);
  pointer-events: none;
  animation: scan 10s linear infinite;
}
@keyframes scan { to { transform: translateY(130vh); } }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.hero-copy .display { margin: 8px 0 22px; }
.hero-copy .lead,
.hero-copy .hero-ctas,
.hero-copy .hero-note,
.hero-copy .live-chip {
  opacity: 0;
  animation: riseIn 0.9s var(--ease) forwards;
}
.hero-copy .live-chip  { animation-delay: 0.05s; }
.hero-copy .lead       { animation-delay: 0.55s; }
.hero-copy .hero-ctas  { animation-delay: 0.7s; }
.hero-copy .hero-note  { animation-delay: 0.85s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.hero-note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.hero-note b { color: var(--ink-dim); font-weight: 500; }

/* live badge */
.live-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--crimson-soft);
  border: 1px solid rgba(216, 55, 46, 0.35);
  background: rgba(216, 55, 46, 0.07);
  padding: 6px 14px;
  border-radius: 100px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crimson);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 55, 46, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(216, 55, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 55, 46, 0); }
}

/* ---------- radar + phone (signature element) ---------- */

.radar-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
  perspective: 1400px;
}

.radar {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  pointer-events: none;
}
.radar .ring {
  position: absolute;
  border: 1px solid var(--hairline);
  border-radius: 50%;
}
.radar .ring:nth-child(1) { inset: 0; }
.radar .ring:nth-child(2) { inset: 17%; border-color: rgba(217, 164, 65, 0.20); }
.radar .ring:nth-child(3) {
  inset: 34%;
  border-color: rgba(217, 164, 65, 0.28);
  border-style: dashed;
  animation: spinSlow 70s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.radar .cross-h, .radar .cross-v { position: absolute; background: var(--hairline-soft); }
.radar .cross-h { left: 0; right: 0; top: 50%; height: 1px; }
.radar .cross-v { top: 0; bottom: 0; left: 50%; width: 1px; }

.radar .sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(217, 164, 65, 0.18) 0deg,
    rgba(217, 164, 65, 0.05) 42deg,
    transparent 70deg,
    transparent 360deg);
  animation: sweep 7s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* expanding signal waves out of the zone centre */
.radar .wave {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.4);
  opacity: 0;
  animation: waveOut 5.2s ease-out infinite;
}
.radar .wave.w2 { animation-delay: 2.6s; border-color: rgba(216, 55, 46, 0.3); }
@keyframes waveOut {
  0%   { transform: scale(0.32); opacity: 0.75; }
  100% { transform: scale(1.04); opacity: 0; }
}

.radar .blip {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--crimson);
  animation: pulse 2.2s ease-out infinite;
}
.radar .blip.b1 { top: 24%; left: 63%; }
.radar .blip.b2 { top: 66%; left: 30%; animation-delay: 0.8s; }
.radar .blip.gold { background: var(--gold); animation: none; opacity: 0.85; width: 7px; height: 7px; top: 40%; left: 20%; }

.radar-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  background: rgba(18, 12, 7, 0.8);
  border: 1px solid var(--hairline-soft);
  padding: 3px 9px;
  border-radius: 6px;
}
.radar-tag.t1 { top: 12%; right: 1%; }
.radar-tag.t2 { top: 76%; left: 1%; }

/* the phone floats, slightly turned, and straightens on hover */
.phone-float {
  position: relative;
  z-index: 2;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
.phone {
  width: 288px;
  border-radius: 44px;
  background: var(--bezel);
  padding: 11px;
  transform: rotateY(-10deg) rotateX(2.5deg);
  transition: transform 0.6s var(--ease);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(217, 164, 65, 0.18),
    0 0 90px rgba(217, 164, 65, 0.08);
}
.radar-stage:hover .phone { transform: rotateY(-3deg) rotateX(0.5deg); }
.phone-screen {
  border-radius: 34px;
  background: linear-gradient(178deg, #1A1209 0%, #140D07 100%);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-dim);
}
.phone-app-title {
  padding: 14px 22px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.phone-app-sub {
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.punch-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}
.punch-btn {
  width: 158px; height: 158px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 32% 28%, #2B1E10, #1D1409 70%);
  border: 2px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--gold-bright);
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 0 10px rgba(217, 164, 65, 0.07), 0 0 40px rgba(217, 164, 65, 0.18),
      inset 0 2px 12px rgba(240, 196, 104, 0.12);
  }
  50% {
    box-shadow: 0 0 0 17px rgba(217, 164, 65, 0.1), 0 0 64px rgba(217, 164, 65, 0.3),
      inset 0 2px 12px rgba(240, 196, 104, 0.18);
  }
}
.punch-btn small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.phone-clock {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.zone-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  border: 1px solid rgba(217, 164, 65, 0.4);
  background: rgba(217, 164, 65, 0.09);
  padding: 6px 13px;
  border-radius: 100px;
}
.zone-chip .tick { color: var(--gold); font-weight: 700; }

.phone-card {
  margin: 0 16px 16px;
  background: var(--raised);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 13px 15px;
}
.phone-card .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.78rem;
}
.phone-card .row + .row { margin-top: 7px; }
.phone-card .k { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; }
.phone-card .v { color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; }
.phone-card .v.gold { color: var(--gold); }
.phone-card .v.red { color: var(--crimson-soft); }

/* readout strip under the radar */
.readout {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  background: rgba(20, 13, 7, 0.92);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(217, 164, 65, 0.06);
  animation: riseIn 0.9s 1s var(--ease) backwards;
}
.readout .sep { color: var(--umber); }
.readout .ok { color: var(--gold); font-weight: 600; }
.readout .live { color: var(--crimson-soft); }

/* ---------- ticker (marquee) ---------- */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(90deg, rgba(74, 20, 15, 0.25), rgba(27, 19, 11, 0.6) 30%, rgba(27, 19, 11, 0.6) 70%, rgba(74, 20, 15, 0.25));
  position: relative;
}
.ticker::before, .ticker::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 90px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--canvas), transparent); }
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tickerMove 36s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerMove { to { transform: translateX(-50%); } }
.ticker-track span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  padding: 15px 0;
  white-space: nowrap;
}
.ticker-track .tick-sep { color: var(--gold); padding: 15px 28px; }

/* ---------- stat strip ---------- */

.stats {
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(27, 19, 11, 0.6), rgba(18, 12, 7, 0));
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 42px 26px;
  text-align: center;
  position: relative;
  transition: background 0.35s;
}
.stat:hover { background: rgba(217, 164, 65, 0.045); }
.stat + .stat { border-left: 1px solid var(--hairline-soft); }
.stat .num {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.35s;
}
.stat:hover .num { text-shadow: 0 0 28px rgba(217, 164, 65, 0.55); }
.stat .num .unit { font-size: 1.1rem; color: var(--gold-deep); }
.stat .lbl {
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* ---------- sections ---------- */

.section { padding: 116px 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: 58px; }
.section-head .lead { margin-top: 16px; }

/* dark sections are rounded "bands" floating on the canvas, with a
   dotted survey-map texture */
.section-dark {
  background:
    radial-gradient(rgba(217, 164, 65, 0.05) 1px, transparent 1.4px),
    var(--canvas-deep);
  background-size: 26px 26px, auto;
  border: 1px solid var(--hairline-soft);
  border-radius: 56px;
  margin: 24px 14px;
  overflow: hidden;
}

/* faint giant numeral pinned to a group corner (features page) */
.fgroup { position: relative; }
.big-num {
  position: absolute;
  top: 20px; right: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 13vw, 10.5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 164, 65, 0.15);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pillar {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--card-face) padding-box, var(--card-edge) border-box;
  border-radius: var(--radius);
  padding: 36px 30px 38px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.pillar::after {                       /* sheen sweep */
  content: "";
  position: absolute;
  top: -130%; bottom: -130%;
  width: 46%; left: -90%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(240, 196, 104, 0.08), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
}
.pillar:hover::after { left: 140%; }
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 44px rgba(217, 164, 65, 0.08);
}
.pillar-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(217, 164, 65, 0.1);
  border: 1px solid rgba(217, 164, 65, 0.25);
  margin-bottom: 22px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.pillar:hover .pillar-icon {
  transform: rotate(-7deg) scale(1.1);
  box-shadow: 0 0 26px rgba(217, 164, 65, 0.28);
}
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-dim); font-size: 0.97rem; }
.pillar .mono-tag {
  display: block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* two-sided story */
.sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 32px;
  overflow: hidden;
}
.side { padding: 48px 44px 52px; position: relative; }
.side.owners {
  background: linear-gradient(165deg, #1E150C, #170F08);
  border-right: 1px solid var(--hairline-soft);
}
.side.workers {
  background: linear-gradient(165deg, rgba(74, 20, 15, 0.45), #170F08 65%);
}
.side .who {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.side.owners .who { color: var(--gold); }
.side.workers .who { color: var(--crimson-soft); }
.side h3 { font-size: 1.5rem; margin-bottom: 22px; }
.side ul { list-style: none; display: grid; gap: 14px; }
.side li {
  display: flex; gap: 12px;
  color: var(--ink-dim);
  font-size: 0.97rem;
  transition: transform 0.25s var(--ease);
}
.side li:hover { transform: translateX(5px); }
.side li b { color: var(--ink); font-weight: 600; }
.side li .bullet {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem;
  border-radius: 6px;
}
.side.owners .bullet { color: var(--gold); border: 1px solid rgba(217, 164, 65, 0.35); }
.side.workers .bullet { color: var(--crimson-soft); border: 1px solid rgba(216, 55, 46, 0.35); }

/* feature grid (landing highlights) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, var(--surface), #150E08) padding-box,
    linear-gradient(160deg, rgba(217, 164, 65, 0.28), rgba(217, 164, 65, 0.05) 40%, rgba(140, 31, 26, 0.2)) border-box;
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.25s var(--ease), box-shadow 0.3s;
  color: var(--ink);
  display: block;
  will-change: transform;
}
/* targeting-reticle corners appear on hover */
.feat::before, .feat .bracket {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 16px; height: 16px;
  border-top: 1.5px solid transparent;
  border-left: 1.5px solid transparent;
  border-radius: 6px 0 0 0;
  transition: border-color 0.3s;
  pointer-events: none;
}
.feat .bracket {
  top: auto; left: auto;
  bottom: 12px; right: 12px;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
  border-radius: 0 0 6px 0;
}
.feat:hover::before, .feat:hover .bracket { border-color: rgba(217, 164, 65, 0.65); }
.feat:hover {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45), 0 0 40px rgba(217, 164, 65, 0.07);
}
.feat .f-code {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 14px;
}
.feat h3 { font-size: 1.05rem; margin-bottom: 9px; }
.feat p { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.55; }
.feat .go {
  position: absolute;
  top: 26px; right: 24px;
  color: var(--gold-deep);
  font-family: var(--font-mono);
  transition: color 0.2s, transform 0.25s var(--ease);
}
.feat:hover .go { color: var(--gold-bright); transform: translateX(4px); }

/* serve band */
.serve {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.topo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.topo path {
  fill: none;
  stroke: rgba(217, 164, 65, 0.09);
  stroke-width: 1.2;
}
.topo path.hot { stroke: rgba(216, 55, 46, 0.10); }
.serve-card {
  border-radius: 28px;
  padding: 46px 40px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.serve-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); }
.serve-card.smb {
  background:
    linear-gradient(150deg, #211710, #150E08) padding-box,
    linear-gradient(150deg, rgba(217, 164, 65, 0.35), rgba(217, 164, 65, 0.06)) border-box;
}
.serve-card.ent {
  background:
    linear-gradient(150deg, #241206, #170D06) padding-box,
    linear-gradient(150deg, rgba(240, 196, 104, 0.5), rgba(140, 31, 26, 0.3)) border-box;
}
.serve-card::after {                    /* big quarter-ring motif */
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 210px; height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.14);
  pointer-events: none;
  transition: transform 0.5s var(--ease);
}
.serve-card:hover::after { transform: scale(1.15); }
.serve-card .tier {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.serve-card h3 { font-size: 1.45rem; margin-bottom: 14px; }
.serve-card p { color: var(--ink-dim); font-size: 0.97rem; margin-bottom: 20px; }
.serve-card .points { list-style: none; display: grid; gap: 9px; }
.serve-card .points li {
  font-size: 0.9rem;
  color: var(--ink-dim);
  padding-left: 20px;
  position: relative;
}
.serve-card .points li::before {
  content: "◆";
  position: absolute; left: 0;
  font-size: 0.55rem;
  top: 6px;
  color: var(--gold-deep);
}

/* about */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.about-copy p + p { margin-top: 18px; }
.about-copy p { color: var(--ink-dim); }
.about-copy p b { color: var(--ink); }
.creed {
  position: relative;
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 26px;
  margin-top: 30px;
}
.creed::before {
  content: "“";
  position: absolute;
  left: 14px; top: -34px;
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 800;
  color: rgba(217, 164, 65, 0.18);
  pointer-events: none;
}
.creed .line {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ink);
}
.creed .src {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.about-facts { display: grid; gap: 14px; }
.fact {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px;
  padding: 17px 22px;
  background: linear-gradient(150deg, var(--surface), #170F09);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.fact:hover { transform: translateX(6px); border-color: rgba(217, 164, 65, 0.3); }
.fact .fk { font-size: 0.92rem; color: var(--ink-dim); }
.fact .fv {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold);
  text-align: right;
}

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 120% at 20% 50%, rgba(140, 31, 26, 0.55), transparent 60%),
    radial-gradient(ellipse 60% 120% at 85% 50%, rgba(217, 164, 65, 0.15), transparent 60%),
    var(--canvas-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 110px 0;
  text-align: center;
}
.cta-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.3);
  opacity: 0;
  animation: waveOut 7s ease-out infinite;
  pointer-events: none;
}
.cta-ring.r2 { animation-delay: 3.5s; border-color: rgba(216, 55, 46, 0.25); }
.cta-band .h2 {
  max-width: 21ch;
  margin: 0 auto 18px;
  background: linear-gradient(100deg, var(--ink) 20%, var(--gold-bright) 60%, var(--crimson-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-band .lead { margin: 0 auto 38px; }
.cta-band .hero-ctas { justify-content: center; margin-top: 0; }
.cta-band .wrap { position: relative; z-index: 1; }

/* footer */
.footer {
  padding: 60px 0 42px;
  color: var(--ink-faint);
  font-size: 0.88rem;
  background: linear-gradient(180deg, transparent, rgba(12, 8, 4, 0.8));
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer .logo { margin-bottom: 12px; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: var(--ink-faint); font-size: 0.88rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-meta {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

/* ---------- features page ---------- */

.page-hero {
  padding: 158px 0 74px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 10%, transparent 70%);
  pointer-events: none;
  animation: gridDrift 26s linear infinite;
}
.page-hero::after {                     /* huge decorative arc */
  content: "";
  position: absolute;
  right: -240px; top: -240px;
  width: 640px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.14);
  box-shadow: inset 0 0 0 60px rgba(217, 164, 65, 0.025), 0 0 90px rgba(216, 55, 46, 0.06);
  pointer-events: none;
  animation: spinSlow 90s linear infinite;
  background:
    conic-gradient(from 40deg, transparent 0deg, rgba(217, 164, 65, 0.06) 40deg, transparent 90deg);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .display { animation: riseIn 0.9s var(--ease) backwards; }
.page-hero .eyebrow { animation: riseIn 0.7s var(--ease) backwards; }
.page-hero .lead { animation: riseIn 0.9s 0.25s var(--ease) backwards; }

.fgroup { padding: 78px 0; }
.fgroup + .fgroup { border-top: 1px solid var(--hairline-soft); }
.fgroup .wrap { position: relative; }
.fgroup-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 42px;
  position: relative;
  z-index: 1;
}
.fgroup-head .gnum {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold-deep);
  letter-spacing: 0.14em;
}
.fgroup-head h2 { font-size: 1.7rem; font-weight: 700; }
.fgroup-head .gsub { color: var(--ink-faint); font-size: 0.94rem; margin-left: auto; text-align: right; max-width: 34ch; }

.frow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.frow {
  display: flex;
  gap: 18px;
  padding: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, var(--surface), #160F09) padding-box,
    linear-gradient(160deg, rgba(217, 164, 65, 0.22), rgba(217, 164, 65, 0.04) 45%, rgba(140, 31, 26, 0.14)) border-box;
  border-radius: 16px;
  transition: transform 0.25s var(--ease), box-shadow 0.3s;
}
.frow:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 30px rgba(217, 164, 65, 0.05);
}
.frow .fi {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217, 164, 65, 0.09);
  border: 1px solid rgba(217, 164, 65, 0.22);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.frow:hover .fi { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 20px rgba(217, 164, 65, 0.22); }
.frow .fi.red { background: rgba(216, 55, 46, 0.09); border-color: rgba(216, 55, 46, 0.26); }
.frow:hover .fi.red { box-shadow: 0 0 20px rgba(216, 55, 46, 0.22); }
.frow h3 { font-size: 1rem; margin-bottom: 6px; font-weight: 650; }
.frow p { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.55; }
.frow p b { color: var(--ink); font-weight: 600; }

.fair-callout {
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, rgba(74, 20, 15, 0.55), rgba(24, 13, 8, 0.7)) padding-box,
    linear-gradient(150deg, rgba(216, 55, 46, 0.5), rgba(217, 164, 65, 0.15)) border-box;
  border-radius: 24px;
  padding: 38px 42px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  z-index: 1;
}
.fair-callout::after {
  content: "";
  position: absolute;
  left: -60px; bottom: -110px;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(216, 55, 46, 0.2);
  pointer-events: none;
}
.fair-callout .fi {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216, 55, 46, 0.12);
  border: 1px solid rgba(216, 55, 46, 0.35);
}
.fair-callout h3 { margin-bottom: 8px; font-size: 1.15rem; }
.fair-callout p { color: var(--ink-dim); font-size: 0.95rem; max-width: 70ch; }
.fair-callout p b { color: var(--ink); }

/* ---------- reveal animations ---------- */

.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-scale { transform: scale(0.92); }
.reveal.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in {
  opacity: 1;
  transform: none;
}
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }

@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;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .display .w, .display em.w,
  .hero-copy .lead, .hero-copy .hero-ctas, .hero-copy .hero-note, .hero-copy .live-chip {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero { padding-top: 140px; }
  .hero-grid { grid-template-columns: 1fr; gap: 70px; }
  .radar-stage { min-height: 540px; }
  .pillars, .feat-grid { grid-template-columns: 1fr 1fr; }
  .sides, .serve, .about-grid, .frow-grid { grid-template-columns: 1fr; }
  .side.owners { border-right: none; border-bottom: 1px solid var(--hairline-soft); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hairline-soft); }
  .about-grid { gap: 40px; }
  .fgroup-head { flex-wrap: wrap; }
  .fgroup-head .gsub { margin-left: 0; text-align: left; }
  .section-dark { border-radius: 40px; margin: 18px 10px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .nav-links a:not(.btn) { display: none; }
  .pillars, .feat-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .radar { width: 400px; height: 400px; }
  .radar-stage { min-height: 480px; }
  .phone { width: 250px; }
  .phone-screen { min-height: 490px; }
  .punch-btn { width: 134px; height: 134px; }
  .readout { font-size: 0.62rem; padding: 9px 14px; gap: 9px; }
  .section { padding: 80px 0; }
  .side, .serve-card { padding: 34px 26px; }
  .fair-callout { flex-direction: column; padding: 28px 24px; }
  .section-dark { border-radius: 28px; margin: 14px 7px; }
  .big-num { font-size: 5rem; top: 30px; }
}