/* ═══════════════════════════════════════════════════════════════
   QTSI — enterprise.css
   PREMIUM ENTERPRISE VISUAL PASS
   Apple / Tesla / Palo Alto-grade polish. Loaded LAST so these
   refinements layer cleanly over the base stylesheets.
   Design by NEXORA (nexorayyc.io)

   Index
   ─────
   1. Brand presence (logo, header hierarchy, reveal)
   2. Hero (scale, cinematic motion, content reveal)
   3. Founder (executive leadership profile)
   4. Forms (enterprise fields, consent)
   5. Copilot (premium AI advisor)
   6. ERP / Digital ecosystem
   7. Campaign gallery (full-size, no crop)
   8. Motion design (scroll storytelling, hover)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1. BRAND PRESENCE
═══════════════════════════════════════════ */

/* Prouder logo — larger at rest, settles on scroll */
.nav-logo {
  position: relative;
  isolation: isolate;
}

/* The logo is the dominant element on the left. It lands firmly in the
   110–140px band across desktop widths, fluid, never boxed, width:auto. */
.nav-logo img {
  height: clamp(110px, 10.5vw, 140px);
  width: auto;
  transition: height 380ms var(--ease-expo), filter 300ms var(--ease-expo);
}

/* Settles (not shrinks away) on scroll — still clearly the brand */
.nav--scrolled .nav-logo img { height: clamp(74px, 6.4vw, 96px); }

@media (max-width: 1024px) {
  .nav-logo img { height: clamp(64px, 14vw, 84px); }
  .nav--scrolled .nav-logo img { height: clamp(56px, 12vw, 72px); }
}

/* Soft brand halo behind the mark so it reads instantly on first paint */
.nav-logo::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% -18%;
  background: radial-gradient(ellipse at center, rgba(0,112,243,.22) 0%, rgba(93,185,55,.10) 45%, transparent 72%);
  opacity: 0;
  filter: blur(14px);
  animation: brandHalo 2.4s var(--ease-expo) .35s forwards;
  pointer-events: none;
}

@keyframes brandHalo {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
  100% { opacity: .45; }
}

/* Premium logo reveal — wipe + de-blur on first load */
@keyframes qtsiLogoReveal {
  0%   { opacity: 0; transform: translateY(-6px) scale(.94); clip-path: inset(0 100% 0 0); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

.nav-logo img { animation: qtsiLogoReveal 1.05s var(--ease-expo) .12s both; }

/* ── Logo treatment — CLEAN & CORPORATE ───────────────────────
   The web logo already has a white "Q", so no glow/outline is needed
   to compensate. Just a subtle premium shadow + minimal contrast —
   Microsoft / Apple / Palo Alto, not neon. Applies to the desktop
   header, the mobile menu, and the footer mark. */
.nav-logo img,
.nav-mobile-logo img,
.footer-brand img {
  filter: contrast(1.04) drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* Remove the old brand-glow halo behind the header logo */
.nav-logo::before { display: none; }

/* Header hierarchy — generous, brand-forward rhythm */
#site-nav { padding-block: 18px; }
.nav--scrolled { padding-block: 12px; }

/* Generous clear space — the logo owns the left edge. Nav shares the
   hero's wider max-width so the mark and the headline align on the left. */
#site-nav .nav-inner { max-width: 1480px; gap: clamp(24px, 5vw, 72px); }
.nav-logo { margin-right: clamp(16px, 3vw, 44px); }

/* ── Navigation defers to the brand ──────────────────────────
   Quieter, lighter menu items (Apple / Stripe / Palo Alto style):
   no pill backgrounds, muted colour, more letter-spacing. The eye
   lands on the logo first; the menu recedes until hovered. */
.nav-links { gap: 2px; }

.nav-links a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.85;
  background: transparent;
  transition: color 200ms var(--ease-expo), opacity 200ms var(--ease-expo);
}
.nav-links a:hover { color: var(--text-secondary); opacity: 1; background: transparent; }
.nav-links a.is-active {
  color: var(--text-secondary);
  opacity: 1;
  background: transparent;
  font-weight: 500;
}

/* Subtle brand-coloured underline for the active item — wayfinding
   without competing with the logo for weight. */
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* Primary nav CTA keeps its authority; secondary recedes a touch */
.nav-cta .btn-primary.btn-sm {
  padding: 10px 22px;
  box-shadow: 0 0 18px rgba(0,112,243,.30), 0 2px 8px rgba(0,0,0,.5);
}
.nav-cta .btn-secondary.btn-sm {
  background: transparent;
  border-color: rgba(255,255,255,.10);
  color: var(--text-secondary);
}

/* Footer brand mark also enlarged for consistency */
.footer-brand img { height: 68px; }

/* Reduced-motion: no reveal/halo */
@media (prefers-reduced-motion: reduce) {
  .nav-logo img { animation: none; clip-path: none; }
  .nav-logo::before { animation: none; opacity: .35; }
}

/* ═══════════════════════════════════════════
   2. HERO
═══════════════════════════════════════════ */

/* Clear the taller, brand-forward header */
.hero { padding-top: clamp(164px, 15.5vw, 212px); }
@media (max-width: 1024px) { .hero { padding-top: 132px; } }
@media (max-width: 768px)  { .hero { padding-top: 120px; } }

/* Larger, tighter executive headline */
.hero .display-xl,
.hero-headline {
  font-size: clamp(3rem, 7.4vw, 6.75rem);
  letter-spacing: -0.04em;
  line-height: 1.01;
}

.hero-sub {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.7;
  margin-top: var(--sp-9);
}

.hero-eyebrow-inner { letter-spacing: 0.12em; }

.hero-ctas { margin-top: var(--sp-12); gap: var(--sp-5); }

/* Cinematic ambient sheen — slow drifting aurora above the canvas,
   below the content (content is z-index:3, canvas z-index:0). */
.hero::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 1;
  background:
    radial-gradient(46% 56% at 26% 24%, rgba(56,124,232,.12) 0%, transparent 60%),
    radial-gradient(40% 48% at 82% 74%, rgba(93,185,55,.07) 0%, transparent 60%),
    radial-gradient(62% 60% at 58% 14%, rgba(210,225,255,.05) 0%, transparent 62%);
  background-size: 150% 150%;
  filter: blur(10px);
  pointer-events: none;
  animation: heroAurora 28s ease-in-out infinite alternate;
}

@keyframes heroAurora {
  0%   { background-position: 0% 0%,   100% 100%, 0% 50%; }
  100% { background-position: 30% 20%, 70% 80%,  100% 50%; }
}

/* Apple-style cinematic content reveal — translate + de-blur, staggered */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(34px); filter: blur(12px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

.hero-eyebrow,
.hero-eyebrow-anim { animation: heroReveal .95s var(--ease-expo) .15s both; }
.hero-headline     { animation: heroReveal 1.15s var(--ease-expo) .34s both; }
.hero-sub          { animation: heroReveal 1.05s var(--ease-expo) .56s both; }
.hero-ctas         { animation: heroReveal .95s  var(--ease-expo) .76s both; }
.hero-badges       { animation: heroReveal .9s   var(--ease-expo) .98s both; }
.hero-visual       { animation: heroReveal 1.4s  var(--ease-expo) .5s both; }

/* Trust chips — more premium, executive */
.hero-badges { gap: 10px; margin-top: var(--sp-7); }
.hero-badges .tag--white {
  padding: 5px 11px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  border-color: rgba(255,255,255,.09);
  transition: border-color 220ms var(--ease-expo), color 220ms var(--ease-expo), background 220ms var(--ease-expo), transform 220ms var(--ease-spring);
}
.hero-badges .tag--white:hover {
  color: var(--text-primary);
  border-color: var(--border-blue);
  background: rgba(0,112,243,.10);
  transform: translateY(-2px);
}

/* ── Premium hero logo treatment (uses the real QTSI PNG) ─────
   Replaces the old SVG ring graphic. Floating logo + ambient
   blue/green lighting + light halo + glass reflection + parallax
   (parallax driven by motion.js). The logo is the actual asset:
   images/qtsi-logo.png — never cropped, transparency preserved. */
/* Wider hero canvas (nav matches it below) + more weight to the visual,
   so the logo occupies materially more of the right side — keynote-style. */
.hero-container {
  max-width: 1480px;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
}

.hero-logo-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  will-change: translate;
  transform: translateY(5%);
}

/* Floating wrapper: CSS float uses `transform`, motion.js mouse
   parallax uses the independent `translate` property — they compose. */
.hero-logo-float {
  position: relative;
  z-index: 2;
  width: min(520px, 90%);
  scale: 1.0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroLogoFloat 9s ease-in-out infinite;
  will-change: transform, translate;
}

/* Slow vertical float + a gentle breathing scale. Amplitude tuned to the
   spec: ~10px rise over a 9s cycle, breathing between scale(1) and
   scale(1.02) — clearly perceptible within seconds, yet executive-restrained
   (no bounce, no overshoot). */
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0)     scale(1);    }
  50%      { transform: translateY(-11px) scale(1.02); }
}

/* The real logo. width:100% + height:auto → full artwork, NEVER cropped.
   Layered white drop-shadows = edge highlight + soft halo so the dark
   "Q" separates from the dark background, without altering the artwork. */
/* Brand-coloured bloom — a blurred, brightened copy of the real logo so the
   blue→green gradient radiates outward (the glowing-logo look in the
   reference). Because it's the actual artwork, the glow matches the mark
   exactly: blue from the blue loop, green from the green loop. */
.hero-logo-bloom {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.05);
  width: 100%;
  max-width: 820px;
  height: auto;
  z-index: -2;
  /* Bloom cut hard + de-saturated: only a faint soft ambient behind the mark
     so it never looks like it EMITS light. The logo is lit by the environment,
     not glowing (Apple/Tesla/Porsche product-hero restraint). */
  filter: blur(34px) saturate(0.95) brightness(0.96);
  opacity: 0.04;
  pointer-events: none;
  animation: heroBloomPulse 11s ease-in-out infinite;
}
@keyframes heroBloomPulse {
  0%, 100% { opacity: .07; filter: blur(34px) saturate(0.95) brightness(0.96); }
  50%      { opacity: .11; filter: blur(37px) saturate(0.98) brightness(0.99); }
}

/* White-silhouette backing — same PNG recoloured to a soft white halo,
   sat behind the artwork to lift the dark navy "Q". brightness(0) blacks
   the pixels (alpha kept), invert(1) turns them white, blur softens it
   into a logo-shaped backlight. Subtle opacity → premium, not a glow. */
.hero-logo-backing {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 820px;
  height: auto;
  z-index: -1;
  filter: brightness(0) invert(1) blur(7px);
  /* White backlight cut further — just a faint seat for the dark glyphs so the
     mark never looks self-lit. */
  opacity: 0.03;
  pointer-events: none;
}

.hero-logo-img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  position: relative;
  z-index: 1;
  /* Readability stack (no PNG edit):
     brightness/contrast lifts the artwork, then TIGHT white drop-shadows
     wrap every glyph edge with a crisp white outline so the dark letters
     read against the dark background from across the room. The blur stays
     small (≤12px) so it reads as a premium edge-light, not a neon glow. */
  /* Physical object lit by the scene — contrast for definition, NO self-
     brightening (brightness:1), and a soft grounded drop-shadow. */
  filter:
    contrast(1.05) brightness(1)
    drop-shadow(0 16px 30px rgba(0,0,0,.45));
}

/* Glass reflection — the floor's hero feature. The mark inside the PNG only
   occupies ~33%–64% of the canvas vertically, so a naive in-flow mirror lands
   far below the logo with a dead gap. Instead the reflection is anchored
   absolutely at the mark's BASE (top:62%) and the mirrored image is pulled up
   (translateY) to cancel the PNG's padding, so the reflected mark sits
   directly under the real one — present at first glance, then blurred and
   masked to nothing so the glass floor has no edge. */
.hero-logo-reflection {
  position: absolute;
  top: 63%;
  left: 50%;
  width: 100%;
  z-index: 0;
  /* Soft + subtle (≈0.22) — a blurred hint of the mark on dark glass, present
     enough to ground the object but never a readable second logo. Heavy blur +
     long fade dissolve it into the floor. A slow opacity/blur shimmer makes the
     glass feel alive (light moving on a wet surface), never flashy. */
  opacity: 0.22;
  filter: blur(5px);
  animation: heroReflShimmer 7s ease-in-out infinite;
  /* translateY(-35.7%) cancels the mirrored PNG's top padding so the reflected
     mark sits right under the real one; the steep rotateX + near perspective
     foreshorten it hard so it reads FLAT on the floor (a short, receding
     reflection) rather than a tall mirror image. */
  transform: translateX(-50%) translateY(-35.7%) perspective(540px) rotateX(22deg);
  transform-origin: top center;
  /* Radial mask, biased to the TOP (near the seam) → only the reflection just
     below the logo reads; it fades fast horizontally AND vertically into the
     floor with no edge, over a longer distance. */
  -webkit-mask-image: radial-gradient(60% 46% at 50% 34%, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.28) 50%, transparent 84%);
          mask-image: radial-gradient(60% 46% at 50% 34%, #000 0%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.28) 50%, transparent 84%);
  pointer-events: none;
}
.hero-logo-reflection img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
}
/* Gentle glass shimmer — opacity + blur breathe so the reflection feels like
   light moving on a wet floor. Transform is untouched (it carries the
   foreshorten), so the two never conflict. */
@keyframes heroReflShimmer {
  0%, 100% { opacity: .22; filter: blur(6px);   }
  50%      { opacity: .32; filter: blur(4.5px); }
}

/* Soft light halo behind the logo — now a faint environmental ambient only.
   White core cut ~80% so the mark no longer sits on a glowing white pad. */
.hero-logo-halo {
  position: absolute;
  z-index: 0;
  inset: 6% 2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
    rgba(150,185,240,.015) 0%,
    rgba(120,160,230,.01) 22%,
    rgba(40,100,210,.035) 46%,
    transparent 74%);
  filter: blur(42px);
  pointer-events: none;
}

/* Ambient blue / green lighting (depth layers) */
.hero-logo-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform, translate;
}
.hero-logo-glow--blue {
  width: 80%; height: 80%;
  left: -12%; top: 4%;
  background: radial-gradient(circle, rgba(28,148,200,.16) 0%, rgba(14,96,148,.07) 52%, transparent 72%);
  animation: floatA 16s ease-in-out infinite;
}
.hero-logo-glow--green {
  width: 55%; height: 55%;
  right: -6%; bottom: 4%;
  background: radial-gradient(circle, rgba(60,180,80,.06) 0%, transparent 70%);
  animation: floatB 20s ease-in-out infinite;
}

/* ── Studio key light — the main soft source behind the logo ─── */
.hero-keylight {
  position: absolute;
  z-index: 0;
  left: 50%; top: 46%;
  width: 86%; height: 82%;
  transform: translate(-50%, -50%);
  /* Concentrated cool-cyan environmental light hugging the mark — the studio
     light the logo is lit BY, and which the glass floor catches. Tight so it
     stays a contained pool of light around the object (dark just beyond it),
     never a broad wash. */
  background: radial-gradient(ellipse 52% 50% at 50% 52%,
    rgba(48,196,240,.22) 0%,
    rgba(24,148,210,.10) 40%,
    transparent 74%);
  filter: blur(48px);
  pointer-events: none;
  animation: heroKeyBreathe 14s ease-in-out infinite;
}
@keyframes heroKeyBreathe {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1);     }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.045); }
}

/* ── Floor seam — the glass-floor sheen + contact where the mark meets its
   reflection. Built ENTIRELY from stacked radial ellipses (no plane, no
   linear horizon line) so it grounds the logo and reads as polished glass
   while dissolving into the background on every side — no rectangle. ── */
.hero-logo-contact {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 18%;
  z-index: 1;
  /* A whisper of a contact shadow — just enough to seat the mark without
     darkening the bright cyan reflection beneath it (the reference grounds the
     logo with LIGHT on the floor, not a dark pool). Tight + faint so the glass
     stays luminous. */
  background:
    radial-gradient(30% 40% at 50% 26%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 44%, transparent 74%);
  filter: blur(18px);
  pointer-events: none;
}

/* ── Specular catch-lights, masked to the EXACT logo silhouette ──
   Light only ever touches the mark itself. Two layers: a slow ambient
   gloss sweep, and a cursor-tracked highlight (driven by motion.js).
   mix-blend screen = additive light, so it reads as a lit surface. */
.hero-logo-gloss,
.hero-logo-spec {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Mask the exact displayed asset so light only ever touches the mark */
  -webkit-mask: url(../images/qtsi-logo-web.png) center / contain no-repeat;
          mask: url(../images/qtsi-logo-web.png) center / contain no-repeat;
}
.hero-logo-gloss {
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.12) 50%,
    transparent 60%);
  background-size: 250% 100%;
  opacity: 0;
  /* Faint, slow ambient shimmer — secondary to the prominent light sweep so
     the two don't compete; reads as soft light shifting on a glossy surface. */
  animation: heroGloss 13s ease-in-out infinite;
}
@keyframes heroGloss {
  0%   { background-position: 150% 0; opacity: 0;   }
  20%  {                              opacity: .32; }
  50%  { background-position: -50% 0; opacity: .32; }
  64%  {                              opacity: 0;   }
  100% { background-position: -50% 0; opacity: 0;   }
}
.hero-logo-spec {
  background: radial-gradient(180px circle at var(--lx, 62%) var(--ly, 32%),
    rgba(255,255,255,.30) 0%, transparent 58%);
  opacity: .75;
  transition: opacity 400ms var(--ease-expo);
}

/* Collapse to single column where the visual is hidden (≤900px) */
@media (max-width: 900px) {
  .hero-container { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero-eyebrow, .hero-eyebrow-anim, .hero-headline,
  .hero-sub, .hero-ctas, .hero-badges, .hero-visual { animation: none; filter: none; }
  /* Stop the float/glow motion but KEEP the logo's contrast glow */
  .hero-logo-float,
  .hero-logo-reflection,
  .hero-logo-glow--blue,
  .hero-logo-glow--green { animation: none; translate: none; }
}

/* ═══════════════════════════════════════════
   3. FOUNDER — executive leadership profile
═══════════════════════════════════════════ */

.founder-layout {
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(48px, 7vw, 104px);
}

/* Premium executive frame — holds the COMPLETE leadership poster (square
   asset), shown in full via object-fit: contain. ~20% larger than the prior
   500px so the poster reads as the brand showpiece it is. */
.founder-photo-frame {
  position: relative;
  overflow: hidden;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2xl, 24px);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,112,243,.12) 0%, transparent 55%),
    #07070C;
  box-shadow:
    0 40px 90px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.05),
    var(--shadow-blue);
  transition:
    transform  450ms var(--ease-expo),
    box-shadow 450ms var(--ease-expo);
}

/* Apple-style hover depth — subtle lift + deeper shadow/glow */
.founder-visual:hover .founder-photo-frame {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 54px 120px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 90px rgba(0,112,243,.22);
}

@media (prefers-reduced-motion: reduce) {
  .founder-visual:hover .founder-photo-frame { transform: none; }
}

/* The complete poster — GUARANTEE the whole asset is visible, never cropped.
   Nothing is layered on top of it; all copy lives in the editorial column. */
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Gradient ring sweep around the frame */
.founder-photo-frame::before {
  box-shadow: inset 0 0 60px rgba(0,112,243,.10);
}

/* Own stacking context so the halo sits behind the frame, not the section */
.founder-visual { isolation: isolate; }

/* Animated conic halo behind the portrait for executive presence */
.founder-visual::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -8% -8% -8% -8%;
  background: conic-gradient(from 0deg, rgba(0,112,243,.16), rgba(93,185,55,.12), rgba(0,112,243,.16));
  border-radius: 50%;
  filter: blur(60px);
  opacity: .7;
  animation: rotateSlow 32s linear infinite;
  pointer-events: none;
}

/* Larger, premium credential chips */
.founder-chip {
  padding: 10px 16px;
  font-size: 0.8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.founder-chip svg { color: var(--green-light); }

/* Stronger content side */
.founder-name { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }

.founder-quote {
  background: linear-gradient(135deg, rgba(0,112,243,.06) 0%, rgba(93,185,55,.04) 100%);
  border-color: rgba(255,255,255,.10);
}
.founder-quote-text { font-size: 1.18rem; }

/* Executive “trusted leadership” marker above the name */
.founder-content .section-eyebrow { backdrop-filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
  .founder-visual::before { animation: none; }
}

@media (max-width: 1024px) {
  .founder-layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   4. FORMS — enterprise fields + consent
═══════════════════════════════════════════ */

/* Roomier, more premium panel */
.modal-panel { max-width: 720px; }
.modal-form { gap: var(--sp-6); }

.form-input,
.form-select,
.form-textarea { border-radius: var(--r-lg); padding: 12px 15px; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,112,243,.16);
}

/* Optional / helper hint under a label */
.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: -2px;
}

/* Consent / checkbox row — required for CRM-ready capture */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--border-hi);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 160ms, border-color 160ms;
}

.form-consent input[type="checkbox"]::before {
  content: '';
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform 160ms var(--ease-spring);
  background: #fff;
  clip-path: polygon(14% 48%, 0 62%, 40% 100%, 100% 24%, 86% 10%, 38% 70%);
}

.form-consent input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.form-consent input[type="checkbox"]:checked::before { transform: scale(1); }

.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
}

.form-consent.has-error { border-color: rgba(239,68,68,.5); }

.form-consent-label {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.form-consent-label a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; }

/* Field that spans the full 2-col row */
.form-field--full { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════
   5. COPILOT — premium AI advisor
═══════════════════════════════════════════ */

.copilot-panel {
  width: 408px;
  max-height: 660px;
  border-radius: var(--r-2xl);
  border-color: rgba(0,112,243,.26);
}

/* Richer header with advisor positioning */
.copilot-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(0,112,243,.14) 0%, rgba(93,185,55,.08) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.copilot-avatar {
  width: 42px; height: 42px;
  position: relative;
  box-shadow: 0 0 20px rgba(0,112,243,.35);
}

/* Live pulse ring on the advisor avatar */
.copilot-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,112,243,.4);
  animation: advisorPulse 2.6s var(--ease-expo) infinite;
}

@keyframes advisorPulse {
  0%   { transform: scale(.9);  opacity: .8; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.copilot-header-name {
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* "AI" capability pill beside the name */
.copilot-header-name::after {
  content: 'AI';
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 5px;
  color: #fff;
  background: var(--grad-brand);
}

.copilot-header-status { font-size: 0.75rem; color: var(--text-secondary); }

/* Bubbles — a touch larger and more legible */
.copilot-bubble { font-size: 0.875rem; padding: 12px 16px; }

.copilot-msg--bot .copilot-bubble {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.09);
}

/* Suggested prompts feel like product chips */
.copilot-chip-btn {
  padding: 7px 13px;
  font-size: 0.76rem;
}
.copilot-chip-btn:hover { transform: translateY(-1px); }

/* Advisor disclaimer strip under the input */
.copilot-disclaimer {
  padding: 8px 16px 12px;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}
.copilot-disclaimer strong { color: var(--text-secondary); font-weight: 600; }

/* FAB — slightly larger, premium gradient + ring */
.copilot-fab { width: 64px; height: 64px; }

@media (max-width: 480px) {
  .copilot-panel { width: 100%; max-height: 92dvh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
}

/* ═══════════════════════════════════════════
   6. ERP / DIGITAL ECOSYSTEM  (was unstyled)
═══════════════════════════════════════════ */

.erp-ecosystem {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  margin-bottom: var(--sp-16);
}

/* ── Central hub medallion ── */
.erp-hub {
  position: relative;
  width: clamp(180px, 26vw, 240px);
  height: clamp(180px, 26vw, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.erp-hub-inner {
  position: relative;
  z-index: 2;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,112,243,.30) 0%, rgba(10,10,20,.96) 70%);
  border: 1px solid rgba(0,112,243,.4);
  box-shadow:
    0 0 50px rgba(0,112,243,.35),
    inset 0 0 30px rgba(0,112,243,.20);
}

.erp-hub-inner img {
  width: 58%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.erp-hub-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-light);
}

/* Orbiting rings */
.erp-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,112,243,.22);
  pointer-events: none;
}
.erp-hub-ring--1 {
  inset: 0;
  border-style: dashed;
  border-color: rgba(0,112,243,.28);
  animation: rotateSlow 26s linear infinite;
}
.erp-hub-ring--2 {
  inset: 14%;
  border-color: rgba(93,185,55,.22);
  animation: rotateSlow 18s linear infinite reverse;
}

/* ── Surrounding nodes — strategic grid ── */
.erp-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  width: 100%;
  max-width: 960px;
}

.erp-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition:
    transform 280ms var(--ease-expo),
    border-color 280ms var(--ease-expo),
    background 280ms var(--ease-expo),
    box-shadow 280ms var(--ease-expo);
}

.erp-node:hover {
  transform: translateY(-4px);
  background: var(--bg-surface-md);
  border-color: var(--border-blue);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,112,243,.18);
}

.erp-node-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 280ms var(--ease-spring);
}
.erp-node:hover .erp-node-icon { transform: scale(1.1) rotate(-4deg); }

.erp-node-icon--blue {
  background: rgba(0,112,243,.14);
  border: 1px solid rgba(0,112,243,.26);
  color: var(--blue-light);
}
.erp-node-icon--green {
  background: rgba(93,185,55,.12);
  border: 1px solid rgba(93,185,55,.24);
  color: var(--green-light);
}

.erp-node-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}

.erp-node-phase {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  color: var(--text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  margin-top: auto;
}

@media (max-width: 860px) {
  .erp-nodes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .erp-nodes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .erp-hub-ring { animation: none; }
}

/* ═══════════════════════════════════════════
   7. CAMPAIGN GALLERY — full-size, no crop
═══════════════════════════════════════════ */

/* Uniform premium frames; every poster shown in FULL (contain). */
.gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* Drop the mosaic spans so nothing is forced to crop */
.gallery-tile--lg   { grid-row: span 1; }
.gallery-tile--wide { grid-column: span 1; }

.gallery-tile-inner,
.gallery-tile--lg .gallery-tile-inner,
.gallery-tile--wide .gallery-tile-inner {
  min-height: 0;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,112,243,.10) 0%, transparent 60%),
    var(--bg-void);
  padding: 0;
}

/* Show the whole poster — never crop */
.gallery-tile-inner > img.gallery-img {
  object-fit: contain;
  padding: clamp(10px, 2vw, 20px);
  /* keep gallery.js fade behaviour intact (it sets inline opacity) */
}

/* Caption always visible at the base of each frame (premium) */
.gallery-tile-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  opacity: 1 !important;
  transform: none !important;
  padding: var(--sp-4) var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgba(7,7,12,.92) 0%, rgba(7,7,12,.55) 55%, transparent 100%);
}

.gallery-tile-inner:has(> img.gallery-img) .gallery-tile-overlay {
  opacity: 1 !important;
  transform: none !important;
}

/* Subtle zoom of the poster on hover instead of a crop reveal */
.gallery-tile-inner > img.gallery-img {
  transition: transform 500ms var(--ease-expo), opacity .5s var(--ease-expo);
}
.gallery-tile-inner:hover > img.gallery-img { transform: scale(1.03); }

.gallery-tile-inner:hover {
  border-color: var(--border-blue);
  box-shadow: var(--shadow-lg), var(--shadow-blue);
}

/* "View" affordance hint */
.gallery-tile-inner::after {
  content: 'View campaign →';
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms var(--ease-expo), transform 240ms var(--ease-expo);
  pointer-events: none;
}
.gallery-tile-inner:hover::after,
.gallery-tile-inner:focus-visible::after { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-tile-inner { aspect-ratio: 16 / 10; }
}

/* ═══════════════════════════════════════════
   8. MOTION DESIGN — scroll storytelling + hover
═══════════════════════════════════════════ */

/* Scroll progress indicator (element injected by motion.js) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: calc(var(--z-nav) + 1);
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  box-shadow: 0 0 12px rgba(0,112,243,.6);
  pointer-events: none;
  transition: width 80ms linear;
}

/* Premium card sheen — a light sweep follows the cursor.
   motion.js sets --mx/--my; harmless if JS is absent. */
.card,
.erp-node,
.proc-cat {
  --mx: 50%;
  --my: 50%;
}

/* The card already has `isolation: isolate`, so z-index:-1 keeps the sheen
   inside the card — above its background, below its content — WITHOUT
   touching child positioning. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,.06), transparent 60%);
  opacity: 0;
  transition: opacity 300ms var(--ease-expo);
  pointer-events: none;
  z-index: -1;
}
.card:hover::after { opacity: 1; }

/* Magnetic-button base (motion.js nudges via transform var) */
.btn--magnetic { will-change: transform; }

/* Section headers tell a story: gentle blur-in handled by .reveal,
   but give eyebrows a refined entrance accent */
.section-eyebrow { transition: box-shadow 300ms var(--ease-expo); }

/* Smooth, expensive-feeling hover lift on platform/vendor chips */
.cloud-platform-badge:hover,
.proc-vendor-name:hover { transform: translateY(-2px); }
.cloud-platform-badge,
.proc-vendor-name { transition: background 200ms, color 200ms, border-color 200ms, transform 220ms var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  .card::after { display: none; }
  .gallery-tile-inner:hover > img.gallery-img { transform: none; }
}

/* ═══════════════════════════════════════════
   9. PREMIUM MOTION PASS
   Restrained depth — Apple / Tesla / Stripe / Linear.
═══════════════════════════════════════════ */

/* ── Subtle particle drift (hero) — elements injected by motion.js ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.4px);
  animation: heroParticleDrift var(--dur, 24s) linear infinite;
  will-change: transform, opacity;
}
@keyframes heroParticleDrift {
  0%   { transform: translate3d(0, 14px, 0);              opacity: 0; }
  14%  {                                                  opacity: var(--o, .1); }
  86%  {                                                  opacity: var(--o, .1); }
  100% { transform: translate3d(var(--dx, 0), -140px, 0); opacity: 0; }
}

/* ── Apple-style button micro-interaction: lift + faint scale ── */
.btn-primary:hover,
.btn-secondary:hover,
.btn-green:hover,
.btn-outline:hover { transform: translateY(-2px) scale(1.018); }

/* Card tilt (transform applied inline by motion.js) settles smoothly
   via the existing .card transform transition — no extra rules needed. */

/* ── Cinematic section reveal — add a soft de-blur to the lift ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    filter: blur(7px);
    transition:
      opacity   var(--dur-slower) var(--ease-expo),
      transform var(--dur-slower) var(--ease-expo),
      filter    var(--dur-slower) var(--ease-expo);
  }
  .reveal.is-visible { filter: blur(0); }
}

/* ── Reduced motion: strip the lot, keep everything legible ──── */
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
  .reveal { filter: none !important; }
  .btn-primary:hover, .btn-secondary:hover,
  .btn-green:hover, .btn-outline:hover { transform: translateY(-2px); }
}

/* ═══════════════════════════════════════════
   10. HERO ATMOSPHERE — volumetric light + vignette
═══════════════════════════════════════════ */

/* Soft volumetric beams raking down from the top — barely-there haze
   that gives the scene air and depth (not scanlines, not rays-of-god). */
.hero-volumetric {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* the single key-light source flaring in from the upper-right corner */
    radial-gradient(30% 34% at 92% -4%,
      rgba(196,222,255,.34) 0%,
      rgba(150,194,244,.12) 38%,
      transparent 66%),
    /* a soft, wide volumetric beam fanning DOWN-LEFT from that source toward
       the logo — a smooth cone of light (god-ray), not hard scanlines */
    conic-gradient(from 0deg at 92% -4%,
      transparent 196deg,
      rgba(190,218,255,.05) 206deg,
      rgba(206,228,255,.16) 222deg,
      rgba(212,232,255,.20) 230deg,
      rgba(206,228,255,.14) 238deg,
      rgba(190,218,255,.04) 250deg,
      transparent 260deg),
    /* two faint inner shafts so the beam reads as volumetric air, not a flat
       wedge — still soft, blurred below into a haze */
    conic-gradient(from 0deg at 92% -4%,
      transparent 214deg,
      rgba(220,236,255,.10) 219deg, transparent 223deg,
      transparent 232deg,
      rgba(220,236,255,.08) 236deg, transparent 240deg,
      transparent 360deg);
  /* mask fades the beam out before it crosses the frame, so it dissolves into
     the atmosphere with no edge */
  -webkit-mask-image: radial-gradient(132% 132% at 92% -4%, #000 0%, rgba(0,0,0,.62) 44%, transparent 78%);
          mask-image: radial-gradient(132% 132% at 92% -4%, #000 0%, rgba(0,0,0,.62) 44%, transparent 78%);
  /* a touch of blur keeps the cone and shafts soft (volumetric, never crisp) */
  filter: blur(5px);
  opacity: .6;
  animation: heroBeamDrift 26s ease-in-out infinite alternate;
}
@keyframes heroBeamDrift {
  0%   { opacity: .52; transform: rotate(-0.5deg); }
  100% { opacity: .66; transform: rotate(0.5deg);  }
}

/* Cinematic vignette — quietly settles the corners. Kept large, soft and
   late-starting so it NEVER frames a bright ellipse/box around the logo; it
   only darkens the extreme corners and blends into the background. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 116% 108% at 54% 42%, transparent 68%, rgba(3,4,8,.42) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-keylight,
  .hero-logo-gloss,
  .hero-logo-bloom,
  .hero-volumetric { animation: none; }
  .hero-logo-gloss { opacity: 0; }
}

/* ═══════════════════════════════════════════
   11. HERO MOTION — premium, visible, restrained
═══════════════════════════════════════════ */

/* Soft cinematic light sweep that periodically crosses the logo.
   Masked to the exact (white-Q) logo shape; screen-blended so it
   reads as a catch-light, not a glow band. */
.hero-logo-sweep {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: url(../images/qtsi-logo-web.png) center / contain no-repeat;
          mask: url(../images/qtsi-logo-web.png) center / contain no-repeat;
  /* The primary light sweep — a clean specular rake travelling across the
     mark every ~7s. Visible enough to catch the eye, narrow enough to read
     as polished light on glass rather than a glow band. */
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.40) 50%, transparent 60%);
  background-size: 250% 100%;
  opacity: 0;
  animation: heroSweep 7s ease-in-out infinite;
}
@keyframes heroSweep {
  0%   { background-position: 150% 0; opacity: 0;   }
  14%  {                              opacity: .85; }
  44%  { background-position: -50% 0; opacity: .85; }
  56%  {                              opacity: 0;   }
  100% { background-position: -50% 0; opacity: 0;   }
}

/* Trust chips fade + slide in, staggered, after the headline sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero-badges { animation: none; opacity: 1; }
  .hero-badges .tag { opacity: 0; animation: chipIn .6s var(--ease-expo) both; }
  .hero-badges .tag:nth-child(1) { animation-delay: 1.05s; }
  .hero-badges .tag:nth-child(2) { animation-delay: 1.15s; }
  .hero-badges .tag:nth-child(3) { animation-delay: 1.25s; }
  .hero-badges .tag:nth-child(4) { animation-delay: 1.35s; }
  .hero-badges .tag:nth-child(5) { animation-delay: 1.45s; }
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-sweep { animation: none; opacity: 0; }
  .hero-badges .tag { opacity: 1; animation: none; }
}

/* ═══════════════════════════════════════════
   12. HERO STAGE — PHYSICAL DEPTH (cinematic environment)
   Static depth layers (no animation) that make the logo read as a
   premium object resting in a real, lit space — a reflective studio
   floor, atmospheric separation, a grounded contact shadow, and a
   focusing vignette. Reference: Apple / Tesla / Stripe / NVIDIA hero.
   All layers are decorative, pointer-events:none, and degrade cleanly
   under reduced motion (they don't animate, so they simply stay).
═══════════════════════════════════════════ */

/* ── Atmospheric depth — a soft cool cushion BEHIND the logo so it never
   sits on dead black; this is the "air" between subject and background. ── */
.hero-stage-atmosphere {
  position: absolute;
  left: 50%;
  top: 52%;
  /* Oversized + soft so the cushion's own edge falls far outside the frame —
     the viewer can never locate where the lit area begins or ends. */
  width: 210%;
  height: 200%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  /* A genuine blue ENVIRONMENT (not a black void): a broad cool-blue pool that
     is brightest behind-and-below the logo (toward the floor), decaying
     gradually on every side to a deep navy — never to pure black, never a ring.
     Tuned to the reference where the air behind the mark reads ~rgb(60,76,96). */
  background: radial-gradient(ellipse 46% 46% at 50% 50%,
    rgba(22,54,108,.42) 0%,
    rgba(16,40,86,.25) 30%,
    rgba(10,24,52,.11) 56%,
    rgba(5,12,28,.03) 76%,
    transparent 88%);
  filter: blur(70px);
}

/* Cinematic haze — a faint soft-elliptical fog at the logo's mid-line for
   lens depth. Radial (not a band) so it has no top/bottom edges. */
.hero-stage-atmosphere::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 36%;
  height: 44%;
  background: radial-gradient(58% 52% at 50% 50%,
    rgba(150,178,224,.10) 0%,
    rgba(132,160,210,.05) 46%,
    transparent 74%);
  filter: blur(34px);
  pointer-events: none;
}

/* ── Wide cinematic reflective floor ────────────────────────────────────
   A broad horizontal band of light beneath the logo that spreads ACROSS the
   hero (not confined to the logo's width), giving the scene a real glass
   floor. Anchored at the logo's base (~66% of the stage) and built only from
   stacked radial gradients + a radial mask, so it has NO rectangular edge and
   melts into the blue environment on every side. The bright horizon sheen sits
   at the seam where the mark meets its reflection; blue pools left, green
   pools right — matching references/hero-target.png. */
.hero-floor {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 168%;
  height: 78%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  /* No bright horizon LINE, no green, no hard plane — those read as a platform.
     Instead a luminous cyan reflective surface: the logo's light catches on wet
     glass and spreads HORIZONTALLY across the scene, brightest at the seam and
     decaying smoothly to nothing on every side. Bright like the reference, yet
     edgeless — no boundary, no rectangle. */
  background:
    /* bright cyan reflective catch at the seam (the wet-glass core) */
    radial-gradient(52% 26% at 50% 14%,
      rgba(154,224,250,.85) 0%,
      rgba(82,182,230,.46) 36%,
      transparent 70%),
    /* WIDE cyan/blue reflection spreading horizontally across the floor and
       fading down — this is what makes it read as a real glass floor, not a
       pool under the logo. The mid-stop is held far out so the bright band
       reaches the sides like the reference (still feathered → no edge). */
    radial-gradient(104% 48% at 50% 22%,
      rgba(50,154,218,.56) 0%,
      rgba(38,124,194,.40) 46%,
      rgba(24,86,152,.18) 68%,
      transparent 84%),
    /* the reflective ground plane sinking down into the void */
    radial-gradient(88% 94% at 50% 6%,
      rgba(22,62,118,.40) 0%,
      rgba(10,28,60,.14) 50%,
      transparent 84%);
  /* heavily feathered radial mask dissolves every side → no floor boundary */
  -webkit-mask-image: radial-gradient(88% 84% at 50% 18%, #000 0%, #000 24%, transparent 86%);
          mask-image: radial-gradient(88% 84% at 50% 18%, #000 0%, #000 24%, transparent 86%);
  filter: blur(22px);
}

/* ── Particles read as motes of light caught in the volumetric beams
   (requirement 6) — a faint luminous halo so they feel lit, not painted. ── */
.hero-particle {
  box-shadow: 0 0 5px rgba(222,234,255,.45);
}

/* On very narrow screens the hero visual is hidden anyway; nothing to do.
   These layers carry no animation, so reduced-motion needs no overrides. */



/* ═══════════════════════════════════════════
   13. HERO PREMIUM — Apple / Linear / Stripe
   Word-by-word reveal + social proof metrics
   + eyebrow shimmer. All hero animation lives
   here; nothing in other sections is touched.
═══════════════════════════════════════════ */

/* Headline no longer animates as a unit — individual .hero-word spans
   own their entrance so the stagger reads as true word-by-word motion.
   `perspective` enables the translateY depth on child transforms. */
.hero-headline {
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
  perspective: 600px;
}

/* Every word slides and de-blurs into place (Linear / MotionSites style) */
.hero-word { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .hero-word {
    opacity: 0;
    animation: heroWordIn 0.9s var(--ease-expo) both;
  }
  /* Stagger: aligned to the broader hero sequence so the headline cascade
     overlaps cleanly with the eyebrow (starts 0.15s) and sub (starts 0.56s). */
  .hero-headline .hero-word:nth-child(1) { animation-delay: 0.34s; }
  .hero-headline .hero-word:nth-child(2) { animation-delay: 0.50s; }
  .hero-headline .hero-word:nth-child(3) { animation-delay: 0.66s; }
}

@keyframes heroWordIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
}

/* ── Eyebrow pill — soft shimmer sweeps the badge periodically (Stripe) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow-inner {
    position: relative;
    overflow: hidden;
  }
  .hero-eyebrow-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 25%,
      rgba(255,255,255,.13) 50%,
      transparent 75%);
    background-size: 300% 100%;
    animation: eyebrowShimmer 5.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes eyebrowShimmer {
    0%   { background-position: 300% 0; }
    100% { background-position: -300% 0; }
  }
}

/* ═══════════════════════════════════════════
   14. GSAP ANIMATION HANDOFF
   When .gsap-ready is on <html>, GSAP takes over
   all hero entrance animations. Cancel the CSS
   keyframes so they don't fight the JS timeline.
   Initial hidden states set here; GSAP animates
   them to their final values.
═══════════════════════════════════════════ */

.gsap-ready .hero-eyebrow,
.gsap-ready .hero-eyebrow-anim {
  animation: none !important;
  opacity: 0;
}

.gsap-ready .hero-word {
  animation: none !important;
  opacity: 0;
  transform: translateY(18px);
}

.gsap-ready .hero-sub {
  animation: none !important;
  opacity: 0;
  transform: translateY(22px);
}

.gsap-ready .hero-ctas {
  animation: none !important;
  opacity: 0;
  transform: translateY(18px);
}

.gsap-ready .hero-visual {
  animation: none !important;
  opacity: 0;
  transform: translateX(16px);
}

/* Badges container stays visible (its children animate individually) */
.gsap-ready .hero-badges {
  animation: none !important;
  opacity: 1;
}

.gsap-ready .hero-badges .tag {
  animation: none !important;
  opacity: 0;
  transform: translateY(10px);
}

/* ═══════════════════════════════════════════
   15. HERO ATMOSPHERE — luxury dark environment
   Pure-CSS aurora atmosphere matching
   references/hero-final-reference.png.
   Deep navy base, teal pool behind the logo,
   aurora mid-band, green shimmer (northern
   lights), cinematic water surface below.
   Canvas (screen blend) adds glowing orbs +
   city skyline aurora glow on top.
═══════════════════════════════════════════ */

/* ── Hero: deep luxury atmospheric background ─────────────────
   Layered radial gradients recreate the reference's rich
   teal/navy aurora atmosphere without a photo dependency.      */
.hero {
  background:
    /* 1. Top mask — solid above nav, dissolves by ~24% height */
    linear-gradient(to bottom,
      rgba(4,6,12,1.00)  0%,
      rgba(4,6,12,0.96)  9%,
      rgba(4,6,12,0.00) 26%
    ),
    /* 2. Left content protection — keeps headline/CTA column dark */
    linear-gradient(to right,
      rgba(4,6,12,1.00)  0%,
      rgba(4,6,12,0.98) 34%,
      rgba(4,6,12,0.82) 50%,
      rgba(4,6,12,0.30) 68%,
      rgba(4,6,12,0.00) 88%
    ),
    /* 3. Primary teal atmospheric pool — concentrated behind the logo */
    radial-gradient(ellipse 80% 78% at 78% 48%,
      rgba(6,92,122,0.92)  0%,
      rgba(4,64,92,0.62)  38%,
      rgba(3,40,66,0.28)  65%,
      transparent          82%
    ),
    /* 4. Aurora mid-band — teal sweep across the lower hero */
    radial-gradient(ellipse 130% 50% at 62% 66%,
      rgba(4,76,100,0.54)  0%,
      rgba(3,54,76,0.30)  50%,
      transparent          76%
    ),
    /* 5. Northern lights shimmer — subtle teal-green at bottom right */
    radial-gradient(ellipse 72% 46% at 76% 78%,
      rgba(4,96,72,0.30)  0%,
      rgba(3,68,52,0.16)  48%,
      transparent          72%
    ),
    /* 6. Deep premium base — teal-navy, not pure black */
    #040912;
}

/* ── Canvas: screen blend so orbs + aurora glow over gradients ──
   Dark (black) canvas areas are transparent → CSS shows through.
   Coloured orbs add luminance additively — deep glow, not paint. */
#hero-canvas {
  mix-blend-mode: screen;
  opacity: 0.90;
}

/* ── Restore hero-stage-atmosphere — provides teal depth behind logo */
.hero-stage-atmosphere {
  opacity: 0.58 !important;
}
.hero-stage-atmosphere::after {
  opacity: 0.42 !important;
}

/* ── Hero floor: canvas handles the atmosphere; suppress the rectangular artifact */
.hero-floor {
  display: none !important;
}

/* ── Stop expensive filter animations (GPU performance) ─────── */
.hero::before          { animation: none !important; }
.hero-logo-bloom       { animation: none !important; opacity: 0.06 !important; }
.hero-logo-reflection  { animation: none !important; opacity: 0.22 !important; filter: blur(5px) !important; }
.hero-keylight         { animation: none !important; opacity: 0.85 !important; }
.hero-logo-gloss       { animation: none !important; opacity: 0    !important; }

/* ── Remove backdrop-filter from hero chips (expensive, not needed) */
.hero-eyebrow-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-badges .tag--white {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Remove hero trust badge chips (squares) — keep gradient atmosphere */
.hero-badges { display: none !important; }

/* ── content-visibility: auto on below-fold sections ─────────── */
#services,
#founder,
#cybersecurity,
#procurement,
#cloud,
#erp {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ── Hero blobs hidden — canvas provides all ambient light ────── */
.hero-blob-1,
.hero-blob-2,
.hero-blob-3 {
  animation: none !important;
  display: none !important;
}

/* ── CTA pulse: GPU-safe transform (no box-shadow repaint) ──── */
@keyframes subtlePulse {
  0%, 100% { transform: scale(1.000); }
  50%       { transform: scale(1.012); }
}
.btn--pulse {
  animation: subtlePulse 3.2s ease-in-out infinite !important;
  box-shadow: 0 0 22px rgba(0,112,243,.30), 0 4px 24px rgba(0,0,0,.5) !important;
}
.btn--pulse:hover,
.btn--pulse:focus-visible {
  animation: none !important;
}

/* ── Logo glows: static (canvas orbs provide movement) ──────── */
.hero-logo-glow--blue  { animation: none !important; }
.hero-logo-glow--green { animation: none !important; }