/* ──────────────────────────────────────────────────────────
   GLOBAL RESET
   ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #020b1a;
  overscroll-behavior-y: none;
}

body {
  background: #020b1a;
  color: #f0f0f5;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* ──────────────────────────────────────────────────────────
   HERO SECTION  (sticky-pin strategy)
   ────────────────────────────────────────────────────────── */
#hero {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #020b1a;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   CANVAS
   CSS size is controlled ONLY by `inset: 0` — this lets the
   browser own the layout so there is zero sub-pixel mismatch
   between the CSS box and the JS-set buffer dimensions.
   The JS (resizeCanvas) sets canvas.width/height to device
   pixels via getBoundingClientRect × DPR with NO inline style
   override, so the browser maps buffer → screen at exactly
   1 device pixel per buffer pixel → no extra scaling, no blur.
   A tiny contrast nudge makes 1080p frames feel punchier on
   high-DPI displays.
   ────────────────────────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /*
   * object-fit: cover  tells the GPU compositor to scale the
   * 1920×1080 canvas buffer to cover-fill the viewport, exactly
   * like an <img> element.  This uses hardware texture sampling
   * (bilinear / trilinear with mipmaps) instead of the canvas 2D
   * software rasteriser, giving the sharpest possible rendering
   * at every DPR and screen size without any JS upscaling step.
   */
  object-fit: cover;
  object-position: center center;
}

/* ──────────────────────────────────────────────────────────
   LOADING OVERLAY
   ────────────────────────────────────────────────────────── */
#hero-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020b1a;
  z-index: 10;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#hero-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.loader-ring {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(196, 160, 80, 0.2);
  border-top-color: #c4a050;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-pct {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #c4a050;
  font-weight: 400;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   HERO TEXT OVERLAY
   Desktop / large: centred with bottom-padding bias so text
   sits in the upper two-thirds of the frame.
   Phone (≤ 480 px): true centre (align-items: center) with
   a bottom-padding nudge so the block appears in the upper
   half — balanced and impressive, NOT anchored to the top.
   ══════════════════════════════════════════════════════════ */
#hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(60px, 12vh, 140px);
  z-index: 5;
  /*
   * VIGNETTE STRATEGY — let the animation breathe:
   * The old center gradient was 82% opaque and was killing animation
   * visibility. Reduced to 44% max at center so frames are clearly
   * visible. Text readability is now handled by drop-shadow on the
   * text elements themselves instead of a dark background blanket.
   */
  background:
    radial-gradient(ellipse 80% 65% at 50% 44%,
      rgba(2, 11, 26, 0.44) 0%,
      rgba(2, 11, 26, 0.18) 56%,
      transparent 100%),
    linear-gradient(to top,
      rgba(2, 11, 26, 0.72) 0%,
      rgba(2, 11, 26, 0.12) 38%,
      transparent 58%),
    linear-gradient(to bottom,
      rgba(2, 11, 26, 0.32) 0%,
      transparent 22%),
    linear-gradient(to right,
      rgba(2, 11, 26, 0.20) 0%,
      transparent 18%,
      transparent 82%,
      rgba(2, 11, 26, 0.20) 100%);
  opacity: 0;
  transition: opacity 1s ease 0.1s;
  pointer-events: none;
}
#hero-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Content block ────────────────────────────────────── */
.hero-content {
  text-align: center;
  width: 80vw;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 2.0vh, 25px);
}

/* ── Eyebrow ─────────────────────────────────────────── */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.8vw, 24px);
  font-size: clamp(8px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #c4a050;
  opacity: 0;
  transform: translateY(14px);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  flex: 0 0 clamp(18px, 3.6vw, 58px);
  height: 1px;
}
.hero-eyebrow::before { background: linear-gradient(to right, transparent, #c4a050); }
.hero-eyebrow::after  { background: linear-gradient(to left,  transparent, #c4a050); }

/* ── HEADLINE — warm gold › white › cyan shimmer ─────── */
.hero-headline {
  font-size: clamp(30px, 5.85vw, 86px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  background: linear-gradient(
    125deg,
    #f8f0dc  0%,
    #f5d860  12%,
    #d4a840  26%,
    #f8e890  38%,
    #ffffff  50%,
    #58bcec  62%,
    #aad8f8  74%,
    #f0e8d2  86%,
    #c4a050  100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(200, 148, 0, 0.28));
  opacity: 0;
  transform: translateY(14px);
}

/* ── COMPANY NAME — blue › cyan › platinum › gold ────── */
.hero-company {
  font-size: clamp(18px, 3.3vw, 47px);
  font-weight: 700;
  letter-spacing: clamp(0.04em, 0.28vw, 0.11em);
  text-transform: uppercase;
  line-height: 1.35;
  background: linear-gradient(
    125deg,
    #1e58b4  0%,
    #3e8ed8  14%,
    #72c4ee  28%,
    #b0defa  40%,
    #f4f4fc  50%,
    #f6e668  62%,
    #ccaa40  76%,
    #ecdea0  88%,
    #b8943a  100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(60, 140, 220, 0.26));
  opacity: 0;
  transform: translateY(14px);
}

/* ── Stats bar ────────────────────────────────────────── */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;           /* keep all 3 stats + dots on one line */
  gap: clamp(10px, 1.8vw, 22px);
  font-size: clamp(11px, 1.3vw, 17px);   /* was clamp(9px,1.0vw,14px) — bigger */
  font-weight: 600;            /* was 500 — bolder = more legible */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(210, 225, 245, 0.92);       /* was 0.70 — much more visible */
  opacity: 0;
  transform: translateY(14px);
}
.hero-stats-dot {
  color: #c4a050;
  opacity: 1;                  /* was 0.80 — fully opaque separator */
  letter-spacing: 0;
  flex-shrink: 0;              /* dot never gets squeezed */
}

/* ── Tagline ──────────────────────────────────────────── */
.hero-tagline {
  font-size: clamp(13px, 1.7vw, 22px);   /* was clamp(12px,1.5vw,20px) — bigger */
  font-weight: 400;            /* was 300 — heavier stroke = far more readable */
  line-height: 1.78;
  letter-spacing: 0.02em;
  background: linear-gradient(
    125deg,
    #efe8d4  0%,
    #d8ecf8  35%,
    #b8d8f0  52%,
    #f0e4cc  74%,
    #e8d8b8  100%
  );
  background-size: 240% 240%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(14px);
}

.tagline-br { display: none; }
@media (min-width: 560px) { .tagline-br { display: inline; } }

/* ── CTA row ──────────────────────────────────────────── */
.hero-ctas {
  display: flex;
  gap: clamp(9px, 1.6vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(4px, 1vh, 11px);
  opacity: 0;
  transform: translateY(14px);
}

/* ══════════════════════════════════════════════════════════
   STAGGERED ENTRANCE + SHIMMER LOOPS
   Headline 6 s, company 9 s → permanently out of phase.
   ══════════════════════════════════════════════════════════ */
#hero-overlay.visible .hero-eyebrow {
  animation: heroRise 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.10s forwards;
}
#hero-overlay.visible .hero-headline {
  animation:
    heroRise    1.10s cubic-bezier(0.22, 1, 0.36, 1) 0.26s forwards,
    heroShimmer 6s   ease-in-out                      1.40s infinite;
}
#hero-overlay.visible .hero-company {
  animation:
    heroRise    0.90s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards,
    heroShimmer 9s   ease-in-out                      1.44s infinite;
}
#hero-overlay.visible .hero-stats {
  animation: heroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.60s forwards;
}
#hero-overlay.visible .hero-tagline {
  animation:
    heroRise    0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.74s forwards,
    heroShimmer 14s  ease-in-out                      1.60s infinite;
}
#hero-overlay.visible .hero-ctas {
  animation: heroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.90s forwards;
}

@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroShimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ══════════════════════════════════════════════════════════
   CTA BUTTONS
   ══════════════════════════════════════════════════════════ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(11px, 1.5vh, 15px) clamp(23px, 3.15vw, 40px);
  border-radius: 3px;
  font-size: clamp(9px, 1.0vw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  white-space: nowrap;
}
.cta--primary {
  background: linear-gradient(135deg, #c4a050 0%, #d8b760 100%);
  color: #080808;
  box-shadow: 0 4px 24px rgba(196, 160, 80, 0.42);
}
.cta--primary:hover {
  background: linear-gradient(135deg, #d4b060 0%, #e8c870 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(196, 160, 80, 0.58);
}
.cta--secondary {
  background: rgba(240, 240, 245, 0.07);
  color: rgba(240, 240, 245, 0.88);
  border: 1px solid rgba(240, 240, 245, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cta--secondary:hover {
  background: rgba(240, 240, 245, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* Large tablet 769 – 1024 px */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-content  { width: 84vw; }
  #hero-overlay  { padding-bottom: clamp(46px, 9vh, 110px); }
  .hero-headline { font-size: clamp(27px, 5.5vw, 78px); }
  .hero-company  { font-size: clamp(16px, 3.0vw, 42px); }
}

/* Small tablet 481 – 768 px */
@media (max-width: 768px) and (min-width: 481px) {
  .hero-content  { width: 88vw; gap: clamp(8px, 1.7vh, 20px); }
  #hero-overlay  { padding-bottom: clamp(32px, 7vh, 80px); }
  .hero-headline { font-size: clamp(25px, 5.0vw, 50px); }
  .hero-company  { font-size: clamp(14px, 2.9vw, 31px); }
  .hero-tagline  { font-size: clamp(12px, 1.6vw, 18px); }
  .hero-stats    { gap: clamp(9px, 1.6vw, 18px); }
}

/* ══════════════════════════════════════════════════════════
   PHONE  ≤ 480 px
   align-items: center keeps the block visually centred.
   padding-bottom shifts it above the 50 % midpoint so it
   sits in the natural focal area of the screen (upper half).
   On a 812 px tall phone: padding-bottom 22svh = ~179 px.
   Available flex space = 812 − 179 = 633 px.
   Content centre = 633/2 = 316 px from top = 39 % from top.
   That is balanced, impressive, and clearly NOT top-anchored.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #hero-overlay {
    align-items: center;      /* vertical centre in the flex column   */
    justify-content: center;  /* horizontal centre                     */
    padding-top: 0;
    padding-bottom: 0;        /* TRUE centre — no offset bias on phone */
    /*
     * Lighter vignette on phone so the animation is clearly visible.
     * Text readability comes from the drop-shadow on each element.
     */
    background:
      radial-gradient(ellipse 120% 80% at 50% 50%,
        rgba(2, 11, 26, 0.42) 0%,
        rgba(2, 11, 26, 0.16) 55%,
        transparent 100%),
      linear-gradient(to top,
        rgba(2, 11, 26, 0.68) 0%,
        rgba(2, 11, 26, 0.10) 42%,
        transparent 60%),
      linear-gradient(to bottom,
        rgba(2, 11, 26, 0.28) 0%,
        transparent 20%);
  }
  .hero-content {
    width: 90vw;
    gap: clamp(7px, 1.6vh, 14px);
  }
  .hero-eyebrow {
    font-size: 8px;
    letter-spacing: 0.26em;
    gap: 10px;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    flex: 0 0 20px;
  }
  .hero-headline {
    font-size: clamp(26px, 7.8vw, 44px);
    letter-spacing: -0.01em;
    line-height: 1.08;
  }
  .hero-company {
    font-size: clamp(13px, 4.4vw, 24px);
    letter-spacing: 0.05em;
    line-height: 1.42;
  }
  .hero-stats {
    font-size: clamp(10px, 3.0vw, 14px);  /* was clamp(8px,2.4vw,12px) */
    font-weight: 600;
    gap: clamp(6px, 2.0vw, 12px);
    flex-wrap: nowrap;          /* one line — no broken dot alignment  */
    letter-spacing: 0.12em;
    color: rgba(210, 225, 245, 0.95);
  }
  .hero-tagline {
    font-size: clamp(12px, 3.6vw, 16px);  /* was clamp(11px,3.2vw,15px) */
    font-weight: 400;           /* was 300 — heavier for phone legibility */
    line-height: 1.72;
    text-align: center;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin-top: 6px;
  }
  .cta {
    width: 100%;
    padding: 13px 20px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

/* Very small phones ≤ 360 px */
@media (max-width: 360px) {
  #hero-overlay  { padding-top: 0; padding-bottom: 0; }
  .hero-content  { width: 92vw; }
  .hero-headline { font-size: clamp(22px, 7.4vw, 34px); }
  .hero-company  { font-size: clamp(11px, 4.0vw, 20px); }
  .hero-stats    { font-size: 10px; gap: 5px; letter-spacing: 0.10em; }
  .hero-tagline  { font-size: 11px; line-height: 1.68; font-weight: 400; }
}

/* ──────────────────────────────────────────────────────────
   SCROLL SPACER + NEXT SECTION
   ────────────────────────────────────────────────────────── */
#hero-scroll-spacer {
  background: #020b1a;
}

#next-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020b1a;
  position: relative;
  z-index: 2;
}

.next-section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.next-divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, #c4a050, transparent);
  animation: dividerPulse 2.4s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}

.next-label {
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(240, 240, 245, 0.25);
  font-weight: 400;
}

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .loader-ring  { animation: none; border-color: #c4a050; }
  .next-divider { animation: none; opacity: 0.55; }
  .cta          { transition: none; }

  .hero-eyebrow,
  .hero-headline,
  .hero-company,
  .hero-stats,
  .hero-tagline,
  .hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    background-position: 50% 50%;
  }
}