/* ============================================================
   FRIDAY OS — Warm Cinematic theme
   Drop-in stylesheet: tokens + component recipes.
   Pair with hero-landscape.png (B&W mountain photo).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Fonts ---- */
  --font-heading: 'Space Grotesk', sans-serif;   /* weight 700, letter-spacing -0.02em */
  --font-body: 'Manrope', sans-serif;            /* 400–800, body 16–18px, lh 1.65 */
  --font-mono: 'JetBrains Mono', monospace;      /* labels/chips/terminal, uppercase, ls 0.1–0.28em */

  /* ---- Ground ---- */
  --bg: #000000;                                 /* page background: pure black */
  --surface: rgba(7,8,18,0.92);                  /* cards/panels */
  --surface-terminal: rgba(3,4,10,0.95);         /* terminal window */
  --surface-inset: rgba(255,255,255,0.03);       /* inner cells/rows */
  --border: rgba(255,255,255,0.10);              /* 1px card borders */
  --border-faint: rgba(255,255,255,0.07);        /* hairlines/dividers */

  /* ---- Warm accent ramp (THE theme) ---- */
  --gold: #ffd166;
  --amber: #ffb340;
  --orange: #ff8a2b;
  --coral: #ff7a3d;
  --ember: #ff5e3a;
  --red-deep: #e8452f;
  --warm-white: #e8dfd6;                         /* contrast points, verified/live chips */
  --on-accent: #1a0a04;                          /* near-black text ON orange buttons */

  /* ---- Text ---- */
  --text: #eef0f8;
  --text-2: #b9bed4;
  --text-muted: #9aa1c0;
  --text-faint: #6b7194;
  --text-ghost: #565d7e;

  /* ---- Gradients ---- */
  --grad-headline: linear-gradient(90deg, #ffd166, #ff8a2b, #ff5e3a);
  --grad-headline-anim: linear-gradient(90deg, #ffb340, #ff7a3d, #ff4e3d, #ffd166, #ffb340); /* 200% size + shimmer */
  --grad-cta: linear-gradient(90deg, #ff8a2b, #ff5e3a, #e8452f);
  --grad-cta-big: linear-gradient(90deg, #ffd166, #ff8a2b, #ff5e3a, #e8452f);
  --grad-gate-btn: linear-gradient(90deg, #ff8a2b, #e8452f);
  --grad-logo-ring: conic-gradient(from 200deg, #ffd166, #ff8a2b, #ff5e3a, #e8452f, #ffb340, #ffd166);
  --grad-moat-border: linear-gradient(90deg, #ffd166, #ff8a2b, #ff5e3a, #e8452f, #ffb340, #ffd166); /* 300% size, animated */

  /* ---- Glows (box-shadows) ---- */
  --glow-cta: 0 0 44px rgba(255,110,45,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  --glow-cta-hover: 0 0 70px rgba(255,94,58,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
  --glow-logo: 0 0 18px rgba(255,138,43,0.55);
  --glow-card-hover: 0 12px 44px rgba(255,138,43,0.25);

  /* ---- Hero grade (over the B&W mountain photo) ---- */
  --hero-grade: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(10,4,2,0.25) 40%, rgba(12,4,2,0.72) 78%, #000 100%);
  --hero-ember: radial-gradient(ellipse 70% 55% at 50% 62%, rgba(255,106,0,0.16), transparent 70%);

  /* ---- Shape ---- */
  --radius-card: 18px;
  --radius-tile: 20px;
  --radius-cell: 10px;
  --radius-pill: 999px;
}

/* ---- Base ---- */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: rgba(255,138,43,0.4); }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; }
/* h1: clamp(44px, 6.2vw, 88px), lh 1.04 · h2: clamp(32px, 3.6vw, 52px) */

/* ---- Hero ---- */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-photo { position: absolute; inset: 0; background-image: url('hero-landscape.png'); background-size: cover; background-position: center 30%; }
.hero-grade { position: absolute; inset: 0; background: var(--hero-grade); }
.hero-ember { position: absolute; inset: 0; pointer-events: none; background: var(--hero-ember); }
.hero h1 { text-shadow: 0 4px 40px rgba(0,0,0,0.8); }
.hero p  { color: var(--warm-white); text-shadow: 0 2px 24px rgba(0,0,0,0.9); }

/* Gradient-clipped headline text */
.headline-accent { background: var(--grad-headline-anim); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* ---- Buttons ---- */
.btn-primary { display: inline-block; padding: 17px 38px; border-radius: var(--radius-pill); background: var(--grad-cta); background-size: 200% auto; color: var(--on-accent); font-weight: 800; font-size: 16px; box-shadow: var(--glow-cta); transition: transform 0.15s ease, box-shadow 0.2s ease, background-position 0.4s ease; }
.btn-primary:hover { background-position: 100% 0; box-shadow: var(--glow-cta-hover); transform: translateY(-3px); color: var(--on-accent); }
.btn-primary:active { transform: translateY(2px) scale(0.95); }
.btn-ghost { padding: 16px 32px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.22); color: var(--text); font-weight: 700; }
.btn-ghost:hover { border-color: rgba(255,179,64,0.8); color: #fff; box-shadow: 0 0 26px rgba(255,138,43,0.4); transform: translateY(-3px); }

/* ---- Section markers ---- */
.section-marker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; }
/* e.g. "[01] · THE PROBLEM" — each section uses one ramp color + matching text-shadow glow:
   color: var(--amber); text-shadow: 0 0 18px rgba(255,179,64,0.7); */

/* ---- Cards & tiles ---- */
.card { padding: 30px 28px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-8px); border-color: rgba(255,138,43,0.5); box-shadow: var(--glow-card-hover); }

/* ---- Chips ---- */
.chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); }
/* tint per accent: color: var(--gold); border: 1px solid rgba(255,209,102,0.45); background: rgba(255,209,102,0.07); */

/* ---- Terminal ---- */
.terminal { border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,0.12); background: var(--surface-terminal); box-shadow: 0 20px 70px rgba(0,0,0,0.5), 0 0 44px rgba(255,138,43,0.12); font-family: var(--font-mono); font-size: 13.5px; }
.scanlines { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px); }

/* ---- Marquee ribbon (under hero) ---- */
.marquee { overflow: hidden; border-top: 1px solid rgba(255,177,64,0.15); border-bottom: 1px solid rgba(255,177,64,0.15); padding: 13px 0; background: rgba(0,0,0,0.6); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--text-faint); }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Motion ---- */
@keyframes pulseGlow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ============================================================
   Voice: tagline "We make your company more valuable."
   Positioning: "The operating system for companies that refuse to guess."
   Showcase tiles: staggered grid, rotate(±0.5–0.8deg), mono "FIG. 0X —" annotations.
   ============================================================ */