/* ==========================================================================
   LANCENOVA STUDIOS - Flagship Keynote Design System (lancenova.com)
   WCAG 2.1 AA - Mobile-First (375px -> 1440px+) - Zero External Bloat
   ========================================================================== */:root { --bg-void: #04060a; --bg-stage: #070b12; --bg-surface: #0c121e; --bg-elevated: #121b2d; --bg-glass: rgba(8, 12, 21, 0.82); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --keel-teal: #2ec4b6; --keel-teal-glow: rgba(46, 196, 182, 0.22); --keel-amber: #ff9f43; --numara-cyan: #38bdf8; --numara-gold: #fbbf24; --numara-gold-glow: rgba(251, 191, 36, 0.2); --danger: #f87171; --success: #34d399; --border-subtle: rgba(148, 163, 184, 0.15); --border-strong: rgba(148, 163, 184, 0.28); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --max-w: 1240px; --header-h: 72px; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; background-color: var(--bg-void); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }body { background-color: var(--bg-void); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; min-height: 100dvh; position: relative; }img, svg, video, canvas { max-width: 100%; height: auto; display: block; }a { color: inherit; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; }button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--numara-cyan); outline-offset: 3px; }
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--numara-cyan); color: #04060a; font-weight: 700; padding: 12px 20px; border-radius: var(--radius-sm); z-index: 9999; }
.skip-link:focus { top: 16px; }
/* ==========================================================================
   LAYOUT & CONTAINERS
   ========================================================================== */.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {.container { padding: 0 2.5rem; }
}
.section { padding: 5.5rem 0; position: relative; z-index: 1; border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 1024px) {.section { padding: 7.5rem 0; }
}
.section-numara { background: radial-gradient(ellipse 80% 60% at 78% 35%, rgba(251, 191, 36, 0.13), transparent 65%), radial-gradient(ellipse 70% 55% at 15% 75%, rgba(99, 102, 241, 0.12), transparent 65%), radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08), transparent 55%); }
.section-keel { background: radial-gradient(ellipse 80% 60% at 22% 40%, rgba(46, 196, 182, 0.15), transparent 65%), radial-gradient(ellipse 65% 55% at 85% 70%, rgba(56, 189, 248, 0.11), transparent 65%); }
.section-vault { background: radial-gradient(ellipse 75% 55% at 50% 25%, rgba(56, 189, 248, 0.11), transparent 65%), radial-gradient(ellipse 60% 50% at 85% 85%, rgba(255, 159, 67, 0.1), transparent 60%); }
.section-about { background: radial-gradient(ellipse 75% 60% at 25% 30%, rgba(46, 196, 182, 0.11), transparent 65%), radial-gradient(ellipse 70% 60% at 80% 75%, rgba(251, 191, 36, 0.1), transparent 65%); }
/* ==========================================================================
   STICKY KEYNOTE NAVIGATION
   ========================================================================== */.site-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background: var(--bg-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-subtle); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-link { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; min-height: 44px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgba(46, 196, 182, 0.2), rgba(255, 159, 67, 0.2)); border: 1px solid rgba(56, 189, 248, 0.4); display: grid; place-items: center; flex-shrink: 0; }
.brand-badge { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.45rem; border-radius: 999px; background: rgba(46, 196, 182, 0.14); color: var(--keel-teal); border: 1px solid rgba(46, 196, 182, 0.35); }
.nav-links { display: none; align-items: center; gap: 0.35rem; list-style: none; }
@media (min-width: 860px) {.nav-links { display: flex; }
}
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; font-size: 0.92rem; font-weight: 500; color: var(--text-secondary); border-radius: 999px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); }
@media (min-width: 860px) {.mobile-menu-btn { display: none; }
}
.mobile-drawer { display: none; background: var(--bg-surface); border-bottom: 1px solid var(--border-strong); padding: 1rem 1.25rem 1.5rem; }
.mobile-drawer.is-open { display: block; }
.mobile-drawer ul { list-style: none; display: grid; gap: 0.35rem; }
.mobile-drawer a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 0.85rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-secondary); border: 1px solid transparent; }
.mobile-drawer a:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-subtle); }
/* ==========================================================================
   BUTTONS & TELEMETRY PILLS
   ========================================================================== */.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.7rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; white-space: nowrap; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--text-primary); color: #04060a; box-shadow: 0 0 28px rgba(248, 250, 252, 0.22); }
.btn-primary:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 32px rgba(56, 189, 248, 0.32); }
.btn-keel { background: var(--keel-teal); color: #031412; box-shadow: 0 0 26px rgba(46, 196, 182, 0.28); }
.btn-keel:hover { background: #3fe0d0; transform: translateY(-1px); }
.btn-numara { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #170d02; box-shadow: 0 0 26px rgba(251, 191, 36, 0.28); }
.btn-numara:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--text-secondary); }
.btn-sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.86rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--keel-teal); background: rgba(46, 196, 182, 0.09); border: 1px solid rgba(46, 196, 182, 0.28); padding: 0.38rem 0.85rem; border-radius: 999px; margin-bottom: 1.25rem; }
.eyebrow-gold { color: var(--numara-gold); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }
.eyebrow-cyan { color: var(--numara-cyan); background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.3); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulseGlow 2.2s infinite ease-in-out; }
@keyframes pulseGlow {0%, 100% { opacity: 1; transform: scale(1); }50% { opacity: 0.45; transform: scale(0.85); }
}
/* ==========================================================================
   HERO KEYNOTE STAGE ("WE HAVE ARRIVED")
   ========================================================================== */.hero { position: relative; z-index: 1; min-height: calc(100dvh - var(--header-h)); display: flex; align-items: center; padding: 4rem 0 5rem; border-bottom: 1px solid var(--border-subtle); overflow: hidden; background: radial-gradient(circle at 18% 18%, rgba(46, 196, 182, 0.16), transparent 44%), radial-gradient(circle at 82% 26%, rgba(56, 189, 248, 0.15), transparent 46%), radial-gradient(circle at 50% 88%, rgba(255, 159, 67, 0.11), transparent 50%); }
#nova-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.92; }
main, .site-footer { position: relative; z-index: 1; }
.hero-content { position: relative; z-index: 1; width: 100%; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {.hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; }
}
.hero-title { font-size: clamp(2.85rem, 7.2vw, 6.1rem); font-weight: 900; line-height: 0.96; letter-spacing: -0.045em; margin-bottom: 1.4rem; }
.text-gradient { background: linear-gradient(95deg, #ffffff 0%, #38bdf8 48%, #2ec4b6 78%, #ff9f43 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--text-secondary); max-width: 620px; margin-bottom: 2rem; line-height: 1.65; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.75rem; }
.telemetry-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; padding-top: 1.75rem; border-top: 1px solid var(--border-subtle); }
@media (min-width: 640px) {.telemetry-strip { grid-template-columns: repeat(4, 1fr); }
}
.telemetry-item { background: rgba(12, 18, 30, 0.72); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.telemetry-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 0.25rem; }
.telemetry-value { font-weight: 800; font-size: 1.05rem; color: var(--text-primary); }
/* Hero Command Monolith Card */.hero-monolith { background: linear-gradient(160deg, rgba(18, 27, 45, 0.92), rgba(7, 11, 18, 0.96)); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; position: relative; overflow: hidden; }
.monolith-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.monolith-cards { display: grid; gap: 1rem; }
.mini-launch-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: var(--radius-md); background: rgba(4, 6, 10, 0.68); border: 1px solid var(--border-subtle); transition: border-color 0.2s ease, transform 0.2s ease; }
.mini-launch-card:hover { border-color: var(--numara-cyan); transform: translateY(-2px); }
.mini-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-elevated); border: 1px solid var(--border-strong); flex-shrink: 0; }
.mini-meta h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.15rem; }
.mini-meta p { font-size: 0.85rem; color: var(--text-secondary); }
.status-pill { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.status-live { background: rgba(46, 196, 182, 0.15); color: var(--keel-teal); border: 1px solid rgba(46, 196, 182, 0.4); }
.status-prod { background: rgba(251, 191, 36, 0.15); color: var(--numara-gold); border: 1px solid rgba(251, 191, 36, 0.4); }
/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */.section-header { max-width: 760px; margin-bottom: 3.5rem; }
.section-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 1rem; }
.section-desc { font-size: 1.12rem; color: var(--text-secondary); }
/* ==========================================================================
   PRODUCT THEATRE (APPLE / SAMSUNG HARDWARE STAGE)
   ========================================================================== */.theatre-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {.theatre-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
.theatre-grid.reverse { grid-template-columns: 0.95fr 1.05fr; }
}
/* Titanium Hardware Phone Bezel */.device-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 35%, rgba(46, 196, 182, 0.16), transparent 65%), linear-gradient(180deg, var(--bg-surface), var(--bg-void)); border: 1px solid var(--border-strong); position: relative; }
.device-stage.numara-stage { background: radial-gradient(circle at 50% 35%, rgba(251, 191, 36, 0.18), rgba(56, 189, 248, 0.08) 45%, transparent 70%), linear-gradient(180deg, var(--bg-surface), var(--bg-void)); }
.device-frame { width: 100%; max-width: 340px; background: #080d16; border-radius: 42px; padding: 12px; border: 3px solid #2b3648; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.09) inset; position: relative; }
.device-screen { background: #0b111c; border-radius: 32px; padding: 14px 14px 18px; min-height: 510px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); }
/* Dynamic Camera Island Drop (Keel signature feature) */.camera-island { margin: 0 auto 14px; background: #030508; border: 1px solid rgba(46, 196, 182, 0.55); border-radius: 22px; padding: 10px 14px; width: 100%; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7); transition: all 0.25s ease; }
.island-top-row { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-weight: 800; font-size: 0.92rem; color: var(--text-primary); }
.island-wave { height: 8px; margin: 6px auto; width: 75%; background: repeating-linear-gradient( 90deg, var(--keel-teal) 0px, var(--keel-teal) 8px, rgba(46, 196, 182, 0.25) 8px, rgba(46, 196, 182, 0.25) 16px ); border-radius: 99px; }
.island-sub { font-size: 0.78rem; color: var(--text-secondary); }
/* Keel Screen Cards inside Device */.keel-ui-stack { display: grid; gap: 9px; margin-bottom: auto; }
.keel-ui-card { background: #131d2e; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 14px; padding: 11px 12px; transition: border-color 0.2s ease, background-color 0.2s ease; }
.keel-ui-card.is-highlighted { border-color: var(--keel-teal); background: rgba(46, 196, 182, 0.1); }
.keel-ui-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 3px; }
.keel-ui-title { font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
.keel-ui-badge { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--keel-teal); }
.keel-ui-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.35; }
.keel-device-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-top: 10px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); text-align: center; font-size: 0.68rem; color: var(--text-muted); }
.keel-device-nav span.active { color: var(--keel-teal); font-weight: 700; }
/* Interactive Mode Switcher Buttons below Phone */.stage-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; width: 100%; }
.stage-tab { min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: all 0.2s ease; }
.stage-tab:hover { color: var(--text-primary); border-color: var(--border-strong); }
.stage-tab.active-keel { background: rgba(46, 196, 182, 0.16); color: var(--keel-teal); border-color: var(--keel-teal); }
.stage-tab.active-numara { background: rgba(251, 191, 36, 0.16); color: var(--numara-gold); border-color: var(--numara-gold); }
/* Numara Image Showcase inside Titanium Frame */.numara-screen-img { width: 100%; height: 480px; object-fit: cover; border-radius: 26px; display: block; }
.numara-caption-bar { margin-top: 0.85rem; text-align: center; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-secondary); }
/* Feature Specs List on Copy Side */.spec-grid { display: grid; gap: 1rem; margin: 2rem 0; }
@media (min-width: 640px) {.spec-grid { grid-template-columns: repeat(2, 1fr); }
}
.spec-card { background: rgba(12, 18, 30, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.25rem; transition: border-color 0.2s ease, transform 0.2s ease; }
.spec-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.spec-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.spec-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
/* ==========================================================================
   NUMARA LIVE INTERACTIVE SPEED-GATE CHALLENGE WIDGET
   ========================================================================== */.math-gate-widget { margin-top: 2rem; background: linear-gradient(145deg, rgba(18, 27, 45, 0.9), rgba(11, 15, 25, 0.95)); border: 1px solid rgba(251, 191, 36, 0.38); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); }
.gate-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.78rem; }
.gate-prompt-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: rgba(4, 6, 10, 0.75); border: 1px solid var(--border-subtle); margin-bottom: 1rem; }
.gate-equation { font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; color: var(--numara-gold); }
.gate-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.gate-choice-btn { min-height: 52px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-strong); font-size: 1.15rem; font-weight: 800; color: var(--text-primary); transition: all 0.15s ease; }
.gate-choice-btn:hover { border-color: var(--numara-cyan); background: rgba(56, 189, 248, 0.14); transform: translateY(-1px); }
.gate-choice-btn.correct { background: rgba(52, 211, 153, 0.22); border-color: var(--success); color: var(--success); }
.gate-choice-btn.wrong { background: rgba(248, 113, 113, 0.22); border-color: var(--danger); color: var(--danger); }
/* ==========================================================================
   KEEL PLAYTESTER CALLOUT (NESTED UNDER KEEL, NOT HOMEPAGE HERO)
   ========================================================================== */.tester-banner { margin-top: 2rem; background: linear-gradient(135deg, rgba(46, 196, 182, 0.12), rgba(12, 18, 30, 0.92)); border: 1px solid rgba(46, 196, 182, 0.4); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) {.tester-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ==========================================================================
   THE LAB / ALL PROJECTS & EXPERIMENTS VAULT
   ========================================================================== */.vault-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {.vault-grid { grid-template-columns: repeat(3, 1fr); }
}
.vault-card { background: rgba(12, 18, 30, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.vault-card:hover { border-color: var(--numara-cyan); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.vault-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-bottom: 0.85rem; }
.vault-card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.vault-card p { color: var(--text-secondary); font-size: 0.95rem; }
.vault-footer { padding-top: 1rem; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; font-size: 0.86rem; font-weight: 600; }
/* ==========================================================================
   STUDIO DNA / MANIFESTO BENTO
   ========================================================================== */.bento-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {.bento-grid { grid-template-columns: repeat(12, 1fr); }
.bento-span-7 { grid-column: span 7; }
.bento-span-5 { grid-column: span 5; }
.bento-span-4 { grid-column: span 4; }
.bento-span-8 { grid-column: span 8; }
}
.bento-card { background: linear-gradient(165deg, rgba(12, 18, 30, 0.78), rgba(7, 11, 18, 0.82)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; transition: border-color 0.2s ease, transform 0.2s ease; }
.bento-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bento-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--numara-cyan); margin-bottom: 0.75rem; display: block; }
.bento-card h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.65rem; letter-spacing: -0.02em; }
.bento-card p { color: var(--text-secondary); font-size: 0.98rem; }
/* ==========================================================================
   LEGAL & PRODUCT SUBPAGE SHELL
   ========================================================================== */.page-hero { position: relative; z-index: 1; padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--border-subtle); background: radial-gradient(circle at 20% 20%, rgba(46, 196, 182, 0.14), transparent 52%), radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.12), transparent 52%); }
.prose-container { max-width: 820px; margin: 0 auto; padding: 4rem 1.25rem 6rem; }
.prose-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; }
.prose-card h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.75rem; color: var(--text-primary); }
.prose-card p, .prose-card li { color: var(--text-secondary); margin-bottom: 0.75rem; }
.prose-card ul { padding-left: 1.25rem; margin-bottom: 0.75rem; }
/* ==========================================================================
   FOOTER
   ========================================================================== */.site-footer { background: rgba(7, 11, 18, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 4rem 0 3rem; border-top: 1px solid var(--border-subtle); }
.zenith-orb { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 950; width: 54px; height: 54px; border-radius: 50%; background: rgba(8, 13, 24, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(56, 189, 248, 0.5); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 22px rgba(46, 196, 182, 0.28); display: grid; place-items: center; color: var(--text-primary); opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.zenith-orb.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.zenith-orb:hover { border-color: var(--numara-gold); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.52); transform: translateY(-3px) scale(1.05); }
.zenith-ring { position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(46, 196, 182, 0.55); animation: orbitSpin 14s linear infinite; pointer-events: none; }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.footer-grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) {.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-col h4 { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: grid; gap: 0.4rem; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.92rem; color: var(--text-secondary); }
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom { padding-top: 2rem; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Extracted utility classes (CSP style-src self compliant) */.u-s1 { text-align: center; padding-top: 8rem; }
.u-s2 { margin: 1rem auto 2rem; max-width: 480px; }
.u-s3 { font-size: 1.55rem; font-weight: 900; color: var(--numara-gold); }
.u-s4 { font-size: 1.35rem; font-weight: 800; color: var(--numara-cyan); }
.u-s5 { background: rgba(56, 189, 248, 0.14); color: var(--numara-cyan); border: 1px solid rgba(56, 189, 248, 0.35); }
.u-s6 { color: var(--numara-gold); }
.u-s7 { color: var(--text-primary); }
.u-s8 { color: var(--numara-cyan); }
.u-s9 { color: var(--keel-teal); }
.u-s10 { color: var(--keel-amber); }
.u-s11 { color: var(--numara-gold); font-weight: 700; }
.u-s12 { color: var(--keel-teal); font-weight: 800; margin-right: 0.75rem; }
.u-s13 { color: var(--numara-gold); font-weight: 800; }
.u-s14 { font-size: 0.85rem; color: var(--text-secondary); }
.u-s15 { margin-top: 0.85rem; font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-mono); }
.u-s16 { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.u-s17 { color: var(--success); }
.u-s18 { font-family: var(--font-mono); font-size: 0.74rem; color: var(--keel-teal); font-weight: 700; margin-bottom: 0.25rem; }
.u-s19 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.25rem; }
.u-s20 { font-size: 0.9rem; color: var(--text-secondary); }
.u-s21 { display: flex; flex-wrap: wrap; gap: 0.65rem; flex-shrink: 0; }
.u-s22 { color: var(--text-muted); }
.u-s23 { border-style: dashed; }
.u-s24 { margin-bottom: 1.25rem; }
.u-s25 { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.u-s26 { margin-bottom: 0.75rem; }
.u-s27 { color: var(--text-secondary); font-size: 0.92rem; max-width: 320px; }
.u-s28 { font-family: var(--font-mono); font-size: 0.78rem; }
.u-s29 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.u-s30 { width: 100%; }
.u-s31 { font-weight: 900; color: var(--numara-gold); }
.u-s32 { color: var(--numara-gold); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); }
.u-s33 { margin-bottom: 3rem; }
.u-s34 { max-width: 760px; margin: 0 auto; }
.u-s35 { margin-bottom: 1.5rem; }
.u-s36 { margin-bottom: 2.5rem; }
.u-s37 { margin-bottom: 0; }
.u-s38 { color: var(--keel-teal); text-decoration: underline; }