.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg,#0a0a0a 0%,#141414 40%,#1a1208 100%); }

.hero-bg-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 55% at 50% 48%, rgba(201,169,110,0.07) 0%,transparent 70%); }

.hero-bg-lines { position: absolute; inset: 0; opacity: .04; background-image: linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px); background-size: 80px 80px; transform: perspective(800px) rotateX(15deg) scale(1.2); transform-origin: bottom; will-change: transform; }

.hero-gradient { position: absolute; inset: 0; background: linear-gradient(to top,var(--black) 0%,transparent 50%), linear-gradient(to right,rgba(8,8,8,.55) 0%,transparent 28%,transparent 72%,rgba(8,8,8,.55) 100%); }

.hero-number { position: absolute; right: clamp(20px,4vw,48px); top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-size: clamp(100px,14vw,200px); font-weight: 300; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,0.06); user-select: none; pointer-events: none; }

.hero-content { position: relative; z-index: 2; padding: 80px clamp(24px,5vw,48px) 220px; max-width: 920px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; }

.hero-eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; }

.hero-eyebrow::before, .hero-eyebrow::after { content: ''; flex: 0 0 40px; height: 1px; background: var(--gold); }

.hero h1 { font-family: var(--font-serif); font-size: clamp(46px,8.5vw,116px); font-weight: 300; line-height: 1.04; letter-spacing: -.01em; margin-bottom: clamp(22px,3vw,36px); text-align: center; }

.hero h1 em { font-style: italic; color: var(--gold); }

.hero-rule { width: 56px; height: 1px; background: var(--gold); margin: 0 auto clamp(22px,3vw,32px); opacity: .6; }

.hero-sub { font-size: clamp(.9rem,1.8vw,1.05rem); color: var(--muted); max-width: 520px; line-height: 1.8; margin-bottom: clamp(36px,5vw,52px); font-weight: 300; text-align: center; }

.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }

.trust-item {
      display: flex; align-items: center; gap: 10px;
      padding: 16px clamp(20px,3vw,40px);
      border-right: 1px solid var(--border);
      font-size: .78rem; color: var(--muted);
      transition: color .3s;
      white-space: nowrap;
    }

.trust-item:last-child { border-right: none; }

.trust-item:hover { color: var(--white); }

.trust-item svg { color: var(--gold); flex-shrink: 0; }

.trust-item strong { color: var(--white); font-weight: 600; }

.trust-stars { display: flex; gap: 2px; }

.trust-stars span { color: var(--gold); font-size: .75rem; }

.hero-stat { text-align: center; }

.hero-stat-num { font-family: var(--font-serif); font-size: clamp(1.8rem,3vw,2.2rem); font-weight: 300; color: var(--white); line-height: 1; margin-bottom: 4px; display: flex; align-items: baseline; gap: 2px; justify-content: center; }

.hero-stat-num .suffix { color: var(--gold); }

.hero-stat-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.hero-scroll { position: absolute; bottom: 124px; right: 48px; z-index: 2; display: flex; align-items: center; gap: 12px; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; }

.hero-scroll::after { content: ''; width: 1px; height: 48px; background: linear-gradient(to bottom,var(--muted),transparent); animation: scrollLine 2s ease-in-out infinite; }

@keyframes scrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(.3);opacity:.3} }


.hero-stat {
  opacity: 0;
  transform: translateY(24px);
}

.hero-stat.is-animated {
  animation: heroStatIn 720ms var(--ease-out) forwards;
}

.hero-stat-num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
}

.hero-stat.is-animated .hero-stat-num {
  animation: heroNumberGlow 1s ease 120ms both;
}

@keyframes heroStatIn {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroNumberGlow {
  0% {
    text-shadow: 0 0 0 rgba(201, 169, 110, 0);
  }
  60% {
    text-shadow: 0 0 18px rgba(201, 169, 110, 0.28);
  }
  100% {
    text-shadow: 0 0 0 rgba(201, 169, 110, 0);
  }
}


.hero-stats {
  backdrop-filter: blur(18px);
}

.hero-stat {
  position: relative;
  overflow: hidden;
}

.hero-stat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,0.65), transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms var(--ease-out);
}

.hero-stat.is-animated::after {
  opacity: 1;
  transform: translateY(0);
}

.hero-stat-num .value {
  display: inline-block;
  min-width: 1ch;
}

.hero-stat-num .prefix,
.hero-stat-num .suffix {
  color: var(--gold-light);
}


/* ═══════════════════════════════════════════════════════════════════
   ROUND 6 — HERO "DRAFTING REVEAL"
   ═══════════════════════════════════════════════════════════════════
   Architectural setting-out: the way an architect plots a reference
   line on paper before any drawing begins.

   The eyebrow already has ::before/::after as flanking gold lines.
   We animate them from width:0 → width:40px on load, and fade the
   eyebrow TEXT in underneath as the lines draw. When lines reach
   full length, tiny tick marks appear at the outer ends — settling
   into a proper dimension marker ├────┤.
   ═══════════════════════════════════════════════════════════════════ */


/* 1. Start state — lines at 0 width, text invisible */
.hero-eyebrow {
  opacity: 0;                    /* wait — actually the text needs to be visible once drawn */
  /* We use a different approach: text stays visible, but lines draw first */
  /* Override — no opacity:0, we animate differently below */
  opacity: 1;
}

/* 2. Actual drafting reveal — animate lines and text independently */
.hero-eyebrow::before,
.hero-eyebrow::after {
  /* Override the existing flex:0 0 40px to animate width */
  flex: 0 0 auto !important;
  width: 0;
  position: relative;
  animation: draftingLineDraw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

.hero-eyebrow::before {
  /* Left line grows rightward */
  transform-origin: left center;
}
.hero-eyebrow::after {
  /* Right line grows leftward — mirrors the left one */
  transform-origin: right center;
}

@keyframes draftingLineDraw {
  0%   { width: 0; opacity: 0.4; }
  60%  { opacity: 1; }
  100% { width: 40px; opacity: 1; }
}

/* 3. Eyebrow text — slight fade + settle underneath the drawing lines */
.hero-eyebrow > span,
.hero-eyebrow[data-i18n] {
  /* The text sits between the two ::before/::after lines.
     We fade it in with a brief delay so it appears AS the lines
     finish drawing — giving the feeling that the line is
     "setting out" the space where the text will sit. */
  animation: draftingTextFade 900ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both;
}

/* If data-i18n is ON the eyebrow itself, target it directly */
.hero-eyebrow {
  animation: draftingTextFade 900ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both;
}

@keyframes draftingTextFade {
  0%   { opacity: 0;   letter-spacing: .32em; }
  100% { opacity: 1;   letter-spacing: .22em; }
}

/* 4. Dimension-tick marks appear at the outer ends of each line
   after the line has drawn — these are the ├ and ┤ characters of
   a proper dimension marker. Implemented with box-shadow pulses
   on the line's outer edges after the animation completes. */
.hero-eyebrow::before {
  box-shadow: -3px 0 0 rgba(201,169,110,0), -3px 0 0 rgba(201,169,110,0);
  animation:
    draftingLineDraw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards,
    draftingTickLeft 500ms ease-out 1400ms forwards;
}
.hero-eyebrow::after {
  box-shadow: 3px 0 0 rgba(201,169,110,0), 3px 0 0 rgba(201,169,110,0);
  animation:
    draftingLineDraw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards,
    draftingTickRight 500ms ease-out 1400ms forwards;
}

@keyframes draftingTickLeft {
  0%   {
    box-shadow:
      -3px -4px 0 rgba(201,169,110,0),
      -3px  4px 0 rgba(201,169,110,0);
  }
  100% {
    /* Two small vertical pips = the ┤ end-cap of a dimension line */
    box-shadow:
      -3px -4px 0 rgba(201,169,110,0.85),
      -3px  4px 0 rgba(201,169,110,0.85);
  }
}

@keyframes draftingTickRight {
  0%   {
    box-shadow:
      3px -4px 0 rgba(201,169,110,0),
      3px  4px 0 rgba(201,169,110,0);
  }
  100% {
    box-shadow:
      3px -4px 0 rgba(201,169,110,0.85),
      3px  4px 0 rgba(201,169,110,0.85);
  }
}

/* 5. Reduced motion — show immediately, skip draft animation */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-eyebrow::before,
  .hero-eyebrow::after,
  .hero-eyebrow > span {
    animation: none !important;
    opacity: 1 !important;
    width: 40px;
    letter-spacing: 0.22em !important;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    box-shadow:
      -3px -4px 0 rgba(201,169,110,0.85),
      -3px  4px 0 rgba(201,169,110,0.85);
  }
  .hero-eyebrow::after {
    box-shadow:
      3px -4px 0 rgba(201,169,110,0.85),
      3px  4px 0 rgba(201,169,110,0.85);
  }
}