/* -----------------------------------------------------------------------------
   Self-hosted VARIABLE fonts. Google Fonts would cost a DNS lookup, a TLS
   handshake and a render-blocking stylesheet on a third-party origin, and would
   force fonts.googleapis.com and fonts.gstatic.com into the CSP. One variable
   file per family covers every weight we use, stays same-origin, and keeps
   font-src at 'self'. `display:swap` so text is readable before the font lands.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Sora';src:url('/assets/fg/fonts/sora.var.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'InterVar';src:url('/assets/fg/fonts/inter.var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrainsMonoVar';src:url('/assets/fg/fonts/jetbrains-mono.var.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap}

/* =============================================================================
   FogoFi design system, 2026-08-06
   One token set shared by fogofi.com and app.fogofi.com so they read as one
   product. Before this, the landing was a warm ember palette (#0a0806) and the
   app was neutral grey (#0a0a0d), and the app's palette had been flattened so
   that --cyan and --purple both literally held #f97316. Names that lie about
   their value are worse than no names, so every token here is semantic and
   honest: if it is called flame it is the brand orange, if it is called good it
   is only ever used for success and positive P&L.
   ========================================================================== */

:root {
  /* ---- surface ramp, warm because Fogo is fire ---- */
  --fg-bg:        #0a0806;
  --fg-bg-2:      #0d0a07;
  --fg-surface:   #15100a;
  --fg-surface-2: #1c150d;
  --fg-raised:    #241a10;
  --fg-glass:     rgba(28, 21, 13, .62);

  /* ---- lines ---- */
  --fg-hair:      #2a1f13;
  --fg-hair-2:    #3a2a17;
  --fg-focus:     rgba(249, 115, 22, .55);

  /* ---- ink ---- */
  --fg-ink:       #f6f1e9;
  --fg-dim:       #a99a88;
  --fg-faint:     #6f6355;

  /* ---- brand ---- */
  --fg-flame:     #f97316;
  --fg-flame-lo:  #c2410c;
  --fg-ember:     #ff6b00;
  --fg-amber:     #fbbf24;
  --fg-glow:      rgba(249, 115, 22, .30);

  /* ---- semantic. green is ONLY success and positive value, never decoration ---- */
  --fg-good:      #34d399;
  --fg-bad:       #f87171;
  --fg-warn:      #fbbf24;

  /* ---- type ---- */
  --fg-display:   'Sora', system-ui, -apple-system, sans-serif;
  --fg-body:      'InterVar', system-ui, -apple-system, sans-serif;
  --fg-mono:      'JetBrainsMonoVar', ui-monospace, 'SF Mono', monospace;

  /* a fifth-based scale, so sizes relate instead of being picked ad hoc */
  --fg-t-xs:      11px;
  --fg-t-sm:      12.5px;
  --fg-t-base:    14px;
  --fg-t-md:      16px;
  --fg-t-lg:      19px;
  --fg-t-xl:      24px;
  --fg-t-2xl:     32px;
  --fg-t-3xl:     44px;

  /* ---- 4pt spacing rhythm ---- */
  --fg-s1: 4px;  --fg-s2: 8px;  --fg-s3: 12px; --fg-s4: 16px;
  --fg-s5: 20px; --fg-s6: 24px; --fg-s8: 32px; --fg-s10: 40px;
  --fg-s12: 48px; --fg-s16: 64px;

  /* ---- radius ---- */
  --fg-r-sm: 8px; --fg-r: 12px; --fg-r-lg: 16px; --fg-r-xl: 22px; --fg-r-full: 999px;

  /* ---- elevation. warm shadows, because a neutral shadow on a warm surface reads grey ---- */
  --fg-e1: 0 2px 8px rgba(0,0,0,.4);
  --fg-e2: 0 10px 24px -12px rgba(0,0,0,.65);
  --fg-e3: 0 24px 48px -24px rgba(0,0,0,.8);
  --fg-e-glow: 0 18px 40px -20px var(--fg-glow);

  /* ---- motion ---- */
  --fg-fast: .16s;
  --fg-mid:  .28s;
  --fg-slow: .42s;
  --fg-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---- reset-ish, only what both surfaces genuinely need ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fg-bg);
  color: var(--fg-ink);
  font-family: var(--fg-body);
  font-size: var(--fg-t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--fg-display); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.fg-mono { font-family: var(--fg-mono); font-variant-numeric: tabular-nums; }

/* focus must be visible for keyboard users, and only for them */
:focus-visible { outline: 2px solid var(--fg-focus); outline-offset: 2px; border-radius: var(--fg-r-sm); }

/* =============================================================================
   COMPONENTS
   ========================================================================== */

/* ---- card ---- */
.fg-card {
  background: linear-gradient(160deg, var(--fg-surface-2), var(--fg-surface));
  border: 1px solid var(--fg-hair);
  border-radius: var(--fg-r-lg);
  box-shadow: var(--fg-e2);
  transition: transform var(--fg-mid) var(--fg-ease), border-color var(--fg-mid), box-shadow var(--fg-mid);
}
.fg-card-p { padding: var(--fg-s5); }
.fg-card-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fg-s3);
  padding: var(--fg-s4) var(--fg-s5); border-bottom: 1px solid var(--fg-hair);
}
.fg-card-t { font-family: var(--fg-display); font-size: var(--fg-t-md); font-weight: 700; }
.fg-card-lift:hover { transform: translateY(-4px); border-color: var(--fg-hair-2); box-shadow: var(--fg-e3); }

/* ---- stat, the unit the whole product is built from ---- */
.fg-stat { display: flex; flex-direction: column; gap: var(--fg-s1); }
.fg-stat-k {
  font-size: var(--fg-t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 700;
}
.fg-stat-v { font-family: var(--fg-mono); font-size: var(--fg-t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-stat-v.flame { color: var(--fg-flame); }
.fg-stat-v.good  { color: var(--fg-good); }
.fg-stat-v.bad   { color: var(--fg-bad); }
.fg-stat-sub { font-size: var(--fg-t-sm); color: var(--fg-dim); }

/* ---- buttons ---- */
.fg-btn {
  display: inline-flex; align-items: center; gap: var(--fg-s2);
  font-family: var(--fg-display); font-weight: 700; font-size: var(--fg-t-base);
  padding: 11px 20px; border-radius: var(--fg-r); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: filter var(--fg-fast), transform var(--fg-fast);
}
.fg-btn:active { transform: translateY(1px); }
.fg-btn-primary { color: #170c02; background: linear-gradient(180deg, #fb923c, var(--fg-flame)); box-shadow: var(--fg-e-glow); }
.fg-btn-primary:hover { filter: brightness(1.08); }
.fg-btn-ghost { color: var(--fg-ink); background: var(--fg-glass); border-color: var(--fg-hair-2); }
.fg-btn-ghost:hover { border-color: var(--fg-flame); color: var(--fg-flame); }

/* ---- pill / badge ---- */
.fg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fg-t-xs); font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--fg-r-full);
  border: 1px solid var(--fg-hair-2); color: var(--fg-dim);
}
.fg-pill.live { color: var(--fg-good); border-color: rgba(52,211,153,.34); }
.fg-pill.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-good); animation: fg-pulse 2s ease-in-out infinite;
}
@keyframes fg-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---- skeleton, so a loading state is honest rather than a frozen zero ---- */
.fg-skel {
  display: inline-block; min-width: 3ch; height: 1em; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--fg-surface-2) 25%, var(--fg-raised) 50%, var(--fg-surface-2) 75%);
  background-size: 200% 100%; animation: fg-shimmer 1.4s linear infinite;
}
@keyframes fg-shimmer { to { background-position: -200% 0 } }

/* ---- grid ---- */
.fg-grid { display: grid; gap: var(--fg-s4); }
.fg-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fg-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--fg-s6); }

/* =============================================================================
   3D. Perspective belongs on the STAGE, never on the element that moves, or the
   vanishing point travels with it and a tilt reads as a skew. Interactive
   children sit at the highest translateZ so they keep the pointer.
   ========================================================================== */
.fg-stage { perspective: 1100px; transform-style: preserve-3d; }
.fg-tilt {
  transform: rotateY(var(--fg-ry, 0deg)) rotateX(var(--fg-rx, 0deg));
  transition: transform var(--fg-slow) var(--fg-ease);
  transform-style: preserve-3d; will-change: transform;
}
.fg-lift-1 { transform: translateZ(18px); }
.fg-lift-2 { transform: translateZ(34px); }
.fg-lift-3 { transform: translateZ(52px); }
.fg-glow-track { position: relative; overflow: hidden; }
.fg-glow-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--fg-gx,50%) var(--fg-gy,50%), var(--fg-glow), transparent 62%);
  transition: opacity var(--fg-mid);
}
.fg-glow-track:hover::after { opacity: 1; }

/* ---- reveal on scroll ---- */
.fg-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--fg-slow) var(--fg-ease), transform var(--fg-slow) var(--fg-ease); }
.fg-reveal.in { opacity: 1; transform: none; }

/* =============================================================================
   Motion is an enhancement, never a requirement. Everything above degrades to a
   static, fully usable layout.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fg-tilt { transform: none !important; }
  .fg-reveal { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .fg-stage { perspective: none; }
  .fg-tilt { transform: none !important; }
  .fg-lift-1, .fg-lift-2, .fg-lift-3 { transform: none; }
  .fg-wrap { padding: 0 var(--fg-s4); }
}