/* ============================================================
   COMMIT — marketing site shared foundations
   Palette + type lifted verbatim from the Commit design system.
   Plus reset, layout container, and cinematic primitives shared
   across all three homepage directions.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* core palette (strict) */
  --bg:        #0B0E14;
  --surface:   #13161C;
  --surface-2: #181C24;
  --surface-3: #1E232C;
  --border:    #232B33;
  --primary:   #6E3BFF;
  --accent:    #C948FF;
  --text:      #E6E5E6;
  --muted:     #8B8F98;

  /* derived tints — states only, never new hues */
  --primary-12: rgba(110, 59, 255, 0.12);
  --primary-20: rgba(110, 59, 255, 0.20);
  --primary-40: rgba(110, 59, 255, 0.40);
  --accent-12:  rgba(201, 72, 255, 0.12);
  --accent-20:  rgba(201, 72, 255, 0.20);

  /* type */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-ui:      'Raleway', system-ui, sans-serif;
  --tracking-display: 0.22em;
  --tracking-label:   0.16em;
  --tracking-tight:   0.01em;

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* spacing (4pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* elevation */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-pop:  0 16px 48px rgba(0,0,0,0.6);
  --glow-primary: 0 0 40px rgba(110,59,255,0.45);
  --glow-accent:  0 0 40px rgba(201,72,255,0.40);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--primary-40); color: #fff; }

/* shared container */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* uppercase Orbitron eyebrow */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* ---- starfield (shared) -------------------------------------
   Three tiled radial-gradient layers drift at different speeds.
   Cheap, GPU-friendly, no DOM nodes. */
.starfield {
  position: absolute;
  inset: -20% 0 0 0;
  pointer-events: none;
  z-index: 0;
}
.starfield .layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
.starfield .s1 {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(230,229,230,0.7), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(230,229,230,0.55), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(201,72,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(230,229,230,0.6), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(230,229,230,0.45), transparent);
  background-size: 420px 420px;
  animation: drift1 220s linear infinite;
}
.starfield .s2 {
  background-image:
    radial-gradient(1px 1px at 50% 15%, rgba(230,229,230,0.5), transparent),
    radial-gradient(1.5px 1.5px at 15% 50%, rgba(110,59,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 75%, rgba(230,229,230,0.5), transparent),
    radial-gradient(1px 1px at 35% 35%, rgba(230,229,230,0.4), transparent);
  background-size: 620px 620px;
  animation: drift2 340s linear infinite;
  opacity: 0.8;
}
.starfield .s3 {
  background-image:
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(201,72,255,0.45), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(230,229,230,0.35), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(230,229,230,0.3), transparent);
  background-size: 880px 880px;
  animation: drift3 480s linear infinite;
  opacity: 0.6;
}
@keyframes drift1 { to { transform: translateY(-420px); } }
@keyframes drift2 { to { transform: translateY(-620px); } }
@keyframes drift3 { to { transform: translateY(-880px); } }

/* twinkle for hand-placed bright stars */
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* scroll-reveal default */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .starfield .layer { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}