/* ABUZ8 Cinematic layer — loaded AFTER each page's own CSS. It only overrides design tokens + adds depth; no page markup is replaced.
   Palette (founder-specified): base #0F1318 · cards #161B22 · gold #C8A55C · green #3D6B52 · blue #2A4A6B · purple #2E2550 · text #E2DDD3
   Type: Playfair Display (display) + Inter (body). Motion is slow (<0.2 Hz), never flashes, and is disabled by prefers-reduced-motion. */

:root {
  /* surfaces */
  --lapis: #0F1318; --lapis-2: #161B22; --lapis-3: #1B222B; --lapis-4: #212A35;
  --lapis-mid: #141A21; --lapis-light: #1E2630; --card: #161B22; --bg: #0F1318; --panel: #161B22; --surface: #161B22; --deep: #0F1318;
  --border: #262E39; --border-gold: rgba(200, 165, 92, .28);
  /* gold */
  --gold: #C8A55C; --gold-2: #DCC385; --gold-light: #DCC385; --gold-dim: #8C7440; --gold-glow: rgba(200, 165, 92, .30);
  /* green — #3D6B52 for fills/borders, lighter tint for text so contrast stays >= 4.5:1 on the base */
  --green: #5E9A7A; --green-bright: #78B394; --green-deep: #3D6B52; --green-glow: rgba(61, 107, 82, .30);
  --turq: #5E9A7A; --turq-2: #78B394; --turq-light: #78B394; --turq-bright: #78B394;
  /* blue */
  --blue: #2A4A6B; --blue-bright: #7FA3C9; --blue-deep: #1F3850;
  /* purple accent */
  --purple: #2E2550; --purple-bright: #A796E0;
  /* text */
  --text: #E2DDD3; --cream: #E2DDD3; --ivory: #EFEBE3; --white: #F4F1EA; --dim: #9AA3AD; --muted: #6B7480; --ink: #E2DDD3;
  /* type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* depth */
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(200, 165, 92, .08);
  --glass: linear-gradient(135deg, rgba(22, 27, 34, .78), rgba(46, 37, 80, .22));
  --glass-soft: linear-gradient(135deg, rgba(22, 27, 34, .62), rgba(22, 27, 34, .74));
  --cin-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base: let a fixed blend layer show through (page-level opaque body backgrounds would cover it) */
html { background: var(--lapis); color-scheme: dark; }
body { background: transparent !important; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body::before {                     /* subtle dark blends — soft radial pools of palette colour, no lines, no stripes */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(42, 74, 107, .26), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(46, 37, 80, .34), transparent 62%),
    radial-gradient(1000px 640px at 50% 112%, rgba(61, 107, 82, .18), transparent 64%),
    radial-gradient(700px 420px at 78% 60%, rgba(200, 165, 92, .05), transparent 66%),
    linear-gradient(180deg, #0F1318 0%, #0F1318 100%);
}
/* retire the line-pattern overlay and the hard glow blobs (they read as stripes / harsh spots) */
.geo-bg, .glow-orb { display: none !important; }

h1, h2, .hero h1, .display { font-family: var(--font-display); letter-spacing: -.005em; }
h1 { font-weight: 700; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(200, 165, 92, .30); color: #fff; }

/* cards get a faint top-lit gradient instead of flat fills */
.card, .tool, .product, .pricing-card, .feature, .stat, .cell, .panel, .tile {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 42%);
}

/* hero mount: the WebGL canvas sits behind the hero copy */
#hero-3d-canvas { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#hero-3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.6s ease; }
#hero-3d-canvas.cin-live canvas { opacity: 1; }
.hero { position: relative; }
.hero > *:not(#hero-3d-canvas) { position: relative; z-index: 1; }

/* scroll reveals — armed only by JS (class cin-js), fail-open via safety timer in abuz8-cinema.js */
.cin-js .cin-r { opacity: 0; transform: translateY(18px); }
.cin-js .cin-r.cin-in { opacity: 1; transform: none; transition: opacity .9s var(--cin-ease), transform .9s var(--cin-ease); }

.cin-founder { text-align: center; padding: 18px 16px 30px; color: var(--dim); font: 500 12px/1.5 var(--font-body); letter-spacing: .08em; }
.cin-founder b { color: var(--gold); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cin-js .cin-r, .cin-js .cin-r.cin-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  #hero-3d-canvas canvas { transition: none; }
  * { scroll-behavior: auto !important; }
}
@media (max-width: 720px) { body::before { background:
    radial-gradient(700px 420px at 10% -6%, rgba(42, 74, 107, .24), transparent 62%),
    radial-gradient(640px 400px at 96% 6%, rgba(46, 37, 80, .30), transparent 62%),
    radial-gradient(700px 420px at 50% 112%, rgba(61, 107, 82, .16), transparent 64%), #0F1318; } }