/* Variant 4 — Graphite: dark graphite, ember orange, soft glass cards, rounded */

:root {
  --bg: #111215;
  --panel: #18191d;
  --panel-2: #202227;
  --line: #2b2d33;
  --line-soft: #1c1e22;
  --text: #f4f4f5;
  --text-2: #c8c9cd;
  --muted: #8c8e96;
  --accent: #ff6a2b;
  --accent-hover: #ff8b5a;
  --on-accent: #1a0800;
  --live: #3ddc84;

  --font-display: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-lg: 22px;

  --page-bg:
    radial-gradient(900px 560px at 92% -12%, rgba(255, 106, 43, 0.16), transparent 60%),
    radial-gradient(700px 500px at -10% 45%, rgba(255, 255, 255, 0.035), transparent 60%);
  --page-bg-attach: fixed;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.035em; }

.hero-title { font-size: clamp(2.8rem, 6vw, 5rem); }
.hero-title .blur-seg:nth-last-child(-n+3) { color: var(--accent); }

.quote, .bento-item, .feature, .role, .tech, .case-what, .contact-inner {
  background-color: var(--panel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.bento-item:hover, .feature:hover {
  border-color: rgba(255, 106, 43, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -30px rgba(255, 106, 43, 0.35);
}

.btn-primary { box-shadow: 0 10px 30px -10px rgba(255, 106, 43, 0.6); }

.kicker .num { border-radius: 999px; padding-inline: 0.55rem; }

.stat dd, .problem-stats dd, .role-stats dd { font-weight: 800; }
.stat:first-child dd { color: var(--accent); }

.hero-photo, .portrait { border-radius: var(--radius-lg); box-shadow: 0 30px 70px -35px rgba(255, 106, 43, 0.45); }
.users li { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }