/* ==========================================================================
   Realto — Dubai AI Real Estate
   Ultra-Luxury Black & Gold Design System v3
   ========================================================================== */

:root {
  /* Light / cream surfaces */
  --ink: #18140F;
  --ink-soft: #6E6657;
  --ink-faint: #978D78;
  --cream: #F8F3E9;
  --cream-deep: #EFE6D1;
  --card: #FFFFFF;
  --line: #E3D8BE;

  /* Ultra-dark surfaces */
  --charcoal:   #060508;
  --charcoal-2: #0D0B12;
  --charcoal-3: #16131E;
  --line-dark: rgba(255,255,255,0.08);
  --cream-on-dark: #F3ECDD;
  --muted-on-dark: #A79E8C;

  /* Gold — rich, deep, luxurious */
  --gold:        #C8A24C;
  --gold-deep:   #A07F35;
  --gold-bright: #E4C171;
  --gold-pale:   #F1E2B8;
  --gold-shine:  #F8EAC0;
  --gold-glow:   rgba(228,193,113,0.35);
  --gold-pale-dark: rgba(200,162,76,0.12);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 50px rgba(4,3,8,0.55);
  --shadow-deep: 0 40px 100px rgba(4,3,8,0.80);
  --shadow-gold: 0 8px 40px rgba(200,162,76,0.28);
  --shadow-gold-lg: 0 20px 80px rgba(200,162,76,0.2);

  --container: 1180px;
  --font-serif: "Playfair Display","Georgia",serif;
  --font: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}


img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
h1.on-dark, h2.on-dark { color: var(--cream-on-dark); }

h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
h3 { font-size: 1.32rem; }

p { color: var(--ink-soft); }
.on-dark p { color: var(--muted-on-dark); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }

.section { padding: 104px 0; }
.section-tight { padding: 70px 0; }
@media (max-width: 720px) {
  .section { padding: 70px 0; }
  .section-tight { padding: 48px 0; }
}

.bg-dark { background: var(--charcoal); }
.bg-cream-deep { background: var(--cream-deep); }

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes shimmer-sweep {
  0%   { background-position: -400% center; }
  100% { background-position: 400% center; }
}

@keyframes float-phone {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(0.4deg); }
  66%       { transform: translateY(-7px) rotate(-0.4deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(200,162,76,0.25), 0 0 50px rgba(200,162,76,0.06); }
  50%       { box-shadow: 0 0 35px rgba(200,162,76,0.55), 0 0 90px rgba(200,162,76,0.18); }
}

@keyframes border-sweep {
  0%   { left: -60%; }
  100% { left: 160%; }
}

@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes draw-line {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 201;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-shine));
  transition: width 0.08s linear;
  box-shadow: 0 0 12px rgba(228,193,113,0.7), 0 0 24px rgba(200,162,76,0.4);
}

/* ==========================================================================
   CUSTOM GOLD CURSOR
   ========================================================================== */

.cursor-dot, .cursor-ring { display: none; }

/* ==========================================================================
   PARTICLE CANVAS
   ========================================================================== */

.hero-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ==========================================================================
   SHIMMER HEADING
   ========================================================================== */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--cream-on-dark) 0%,
    var(--cream-on-dark) 25%,
    var(--gold-bright)   44%,
    var(--gold-shine)    50%,
    var(--gold-bright)   56%,
    var(--cream-on-dark) 70%,
    var(--cream-on-dark) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    background: none;
    -webkit-text-fill-color: var(--cream-on-dark);
    color: var(--cream-on-dark);
    animation: none;
  }
}

/* ==========================================================================
   EYEBROW
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.on-dark .eyebrow { color: var(--gold-bright); }
.eyebrow::before {
  content: ""; width: 18px; height: 1px;
  background: var(--gold); display: inline-block;
  animation: draw-line 0.8s var(--ease) both;
}

.section-head { max-width: 700px; margin: 0 0 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 16px; font-size: 1.06rem; }

.divider { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.on-dark .divider::before, .on-dark .divider::after { background: var(--line-dark); }
.divider .diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }
.divider.center { max-width: 140px; margin-inline: auto; margin-bottom: 28px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: none; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s, color 0.25s, border-color 0.25s;
  position: relative; overflow: hidden;
}
@media (pointer: coarse) { .btn { cursor: pointer; } }

/* Shimmer sweep on hover */
.btn::after {
  content: "";
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 160%; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--charcoal);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 45px rgba(168,130,47,0.55), 0 0 70px rgba(200,162,76,0.25);
}

.btn-outline-light {
  background: transparent; color: var(--cream-on-dark);
  border-color: rgba(243,236,221,0.28);
}
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold-bright); }

.btn-outline-dark {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-outline-dark:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn-lg { padding: 16px 32px; font-size: 0.98rem; }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-pale-dark); color: var(--gold-bright);
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 22px;
  border: 1px solid rgba(200,162,76,0.35);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(228,193,113,0.8);
  animation: glow-pulse 2s ease-in-out infinite;
}

.chip {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); font-size: 0.86rem;
  font-weight: 600; color: var(--ink-soft);
  background: var(--card);
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }
.on-dark .chip {
  border-color: var(--line-dark); color: var(--muted-on-dark);
  background: var(--charcoal-2);
}
.on-dark .chip:hover { border-color: rgba(200,162,76,0.5); color: var(--gold-bright); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,5,8,0.6);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.site-header.scrolled {
  background: rgba(6,5,8,0.94);
  border-bottom-color: var(--line-dark);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 20px; }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.28rem;
  color: var(--cream-on-dark);
  cursor: none;
}
@media (pointer: coarse) { .logo { cursor: pointer; } }

.logo-mark-img {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 6px;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 8px rgba(200,162,76,0.5));
  transition: filter 0.3s;
}
.logo:hover .logo-mark-img {
  filter: drop-shadow(0 0 18px rgba(200,162,76,1));
}

.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 500; font-size: 0.88rem; }
.nav-links a {
  color: var(--muted-on-dark); padding: 6px 2px;
  position: relative; cursor: none;
  transition: color 0.2s;
}
@media (pointer: coarse) { .nav-links a { cursor: pointer; } }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--cream-on-dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--cream-on-dark); }
.nav-links a.active::after { transform: scaleX(1); height: 2px; }

.nav-cta { display: flex; align-items: center; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: transparent;
  border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  width: 18px; height: 2px; background: var(--cream-on-dark);
  margin: 0 auto; transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-links {
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--charcoal-2); border-bottom: 1px solid var(--line-dark);
    flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 14px 28px 20px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    max-height: 70vh; overflow-y: auto;
  }
  .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { width: 100%; padding: 11px 0; cursor: pointer; }
  .nav-cta { display: none; }
  .nav-links .mobile-cta { display: inline-flex; margin-top: 10px; }
  .nav-toggle { display: flex; }
}
@media (min-width: 981px) { .nav-links .mobile-cta { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 75% 10%, rgba(200,162,76,0.18) 0%, transparent 48%),
    radial-gradient(ellipse at 20% 90%, rgba(200,162,76,0.09) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(200,162,76,0.04) 0%, transparent 60%),
    var(--charcoal);
  padding: 72px 0 0;
  overflow: hidden;
}

/* Ambient glow layer */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 0%, rgba(200,162,76,0.1) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}

.hero > .container { position: relative; z-index: 1; }

/* hero-inner-old (replaced by flex two-col below) */
@media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.hero-copy .lead {
  font-size: 1.14rem; margin: 18px 0 32px;
  max-width: 540px; line-height: 1.75;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; }

.hero-stats { display: flex; gap: 38px; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong {
  font-family: var(--font-serif); font-size: 1.7rem;
  color: var(--gold-bright);
  text-shadow: 0 0 25px rgba(228,193,113,0.5);
}
.hero-stats span { font-size: 0.8rem; color: var(--muted-on-dark); }

/* Phone mockup */
.hero-visual { perspective: 1400px; }

.phone-wrap {
  display: flex; justify-content: center;
  position: relative; perspective: 1400px;
}
.phone-wrap.phone-float {
  animation: float-phone 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .phone-wrap.phone-float { animation: none; } }

.phone-wrap::before {
  content: ""; position: absolute;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(200,162,76,0.18) 0%, rgba(200,162,76,0) 70%);
  z-index: 0;
  animation: glow-pulse 4s ease-in-out infinite;
}

.phone {
  position: relative; z-index: 1; width: 290px;
  background: #04030a;
  border: 1px solid rgba(200,162,76,0.3); border-radius: 38px; padding: 14px;
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(200,162,76,0.08);
  transform-style: preserve-3d; transition: transform 0.18s ease-out;
  will-change: transform;
}

.hero-visual.intro-3d {
  opacity: 0; transform: rotateY(26deg) rotateX(8deg) scale(0.88);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.hero-visual.intro-3d.in { opacity: 1; transform: rotateY(0deg) rotateX(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-visual.intro-3d { opacity: 1; transform: none; transition: none; }
  .phone { transition: none; }
}

.phone-screen {
  background: #EFE6D2; border-radius: 26px;
  overflow: hidden; min-height: 460px;
  display: flex; flex-direction: column;
}
.phone-bar {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--charcoal);
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px; font-size: 0.85rem; font-weight: 700;
}
.phone-bar .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(13,12,16,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.phone-bar small { display: block; font-weight: 500; opacity: 0.8; font-size: 0.7rem; }
.phone-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 14px;
  font-size: 0.82rem; line-height: 1.45;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.bubble.in {
  background: #fff; color: var(--ink);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.bubble.out {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: var(--charcoal);
  align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500;
}
.typing {
  display: flex; gap: 4px; align-self: flex-start;
  padding: 12px 14px; background: #fff;
  border-radius: 14px; border-bottom-left-radius: 4px;
}
.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

/* ==========================================================================
   LOGOS / CHIP STRIP
   ========================================================================== */

.logos-strip {
  padding: 44px 0;
  background: var(--charcoal);
  border-top: 1px solid var(--line-dark);
}
.logos-strip p {
  text-align: center; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-on-dark); margin-bottom: 24px;
}
.logos-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   GRIDS & CARDS
   ========================================================================== */

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
  transform-style: preserve-3d;
}
.card:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-8px);
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(200,162,76,0.22), 0 20px 50px rgba(200,162,76,0.08);
  border-color: rgba(200,162,76,0.45);
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: translateY(-4px); } }
.on-dark .card { background: var(--charcoal-2); border-color: var(--line-dark); }
.on-dark .card:hover { border-color: rgba(200,162,76,0.4); }

.icon-tile {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--gold-pale);
  background: var(--gold-pale-dark);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.card:hover .icon-tile { box-shadow: 0 0 20px rgba(200,162,76,0.3); border-color: var(--gold); }
.on-dark .icon-tile { border-color: rgba(200,162,76,0.35); color: var(--gold-bright); }

.card h3 { margin-bottom: 8px; font-size: 1.12rem; }
.card p { font-size: 0.93rem; margin: 0; }

/* Problem cards */
.problem-card {
  background: var(--charcoal-2); border: 1px solid var(--line-dark);
  border-radius: var(--radius-md); padding: 24px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.problem-card:hover { border-color: rgba(200,162,76,0.25); transform: translateY(-3px); }
.problem-card .x {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(167,158,140,0.4);
  color: var(--muted-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
}
.problem-card span { color: var(--cream-on-dark); font-size: 0.93rem; font-weight: 500; }

/* ==========================================================================
   STEPS
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: step; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps, .steps.steps-4 { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 56px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-deep);
  font-family: var(--font-serif); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.on-dark .step::before { color: var(--gold-bright); }
.step h3 { margin-bottom: 6px; font-size: 1.08rem; }
.step p { font-size: 0.92rem; }

/* ==========================================================================
   PROCESS GRID
   ========================================================================== */

.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

.process-step {
  background: var(--charcoal-2); border: 1px solid var(--line-dark);
  border-radius: var(--radius-md); padding: 20px 18px;
  position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.process-step:hover {
  transform: translateY(-5px);
  border-color: rgba(200,162,76,0.4);
  box-shadow: 0 16px 40px rgba(4,3,8,0.6), 0 0 24px rgba(200,162,76,0.1);
}
.process-step .num {
  font-family: var(--font-serif); color: var(--gold-bright);
  font-size: 1.3rem; margin-bottom: 8px; display: block;
}
.process-step p { color: var(--cream-on-dark); font-size: 0.88rem; margin: 0; opacity: 0.85; }

/* ==========================================================================
   COMPARISON
   ========================================================================== */

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col { border-radius: var(--radius-lg); padding: 36px; }
.compare-col.without {
  background: var(--charcoal-2); border: 1px solid var(--line-dark);
}
.compare-col.with {
  background: linear-gradient(165deg, rgba(200,162,76,0.12), rgba(200,162,76,0.03));
  border: 1px solid rgba(200,162,76,0.4);
}
.compare-col h3 { color: var(--cream-on-dark); margin-bottom: 18px; font-size: 1.2rem; }
.compare-col ul { display: flex; flex-direction: column; gap: 14px; }
.compare-col li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.94rem; color: var(--muted-on-dark);
}
.compare-col.with li { color: var(--cream-on-dark); }
.compare-col .mark {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; margin-top: 1px;
}
.compare-col.without .mark { border: 1px solid rgba(167,158,140,0.4); color: var(--muted-on-dark); }
.compare-col.with .mark { background: var(--gold); color: var(--charcoal); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.quote-block { text-align: center; max-width: 780px; margin: 0 auto; }
.quote-block blockquote {
  font-family: var(--font-serif); font-size: 1.55rem;
  font-weight: 500; font-style: italic; color: var(--ink); line-height: 1.45;
}
.on-dark .quote-block blockquote { color: var(--cream-on-dark); }
.quote-block blockquote::before { content: "\201C"; color: var(--gold); }
.quote-block blockquote::after  { content: "\201D"; color: var(--gold); }
.quote-author { margin: 20px 0 28px; color: var(--ink-faint); font-size: 0.88rem; letter-spacing: 0.02em; }
.on-dark .quote-author { color: var(--muted-on-dark); }

.t-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.t-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft), 0 0 30px rgba(200,162,76,0.06);
  border-color: rgba(200,162,76,0.3);
}
.t-card .t-mark { font-family: var(--font-serif); font-size: 2.2rem; color: var(--gold); line-height: 1; height: 20px; }
.t-card p.t-quote { color: var(--ink); font-size: 0.96rem; margin: 0; }
.t-person {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
}
.t-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-pale-dark); color: var(--gold-deep);
  border: 1px solid var(--gold-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.t-person strong { display: block; font-size: 0.89rem; }
.t-person span { display: block; font-size: 0.77rem; color: var(--ink-faint); }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; text-align: center;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .stats-row { grid-template-columns: 1fr; } }

.stat-item strong {
  display: block; font-family: var(--font-serif);
  font-size: 2.4rem; color: var(--gold-deep);
}
.on-dark .stat-item strong { color: var(--gold-bright); }
.stat-item span { font-size: 0.86rem; color: var(--ink-faint); }
.on-dark .stat-item span { color: var(--muted-on-dark); }

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */

.case-study {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 42px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 38px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.case-study:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
@media (max-width: 800px) { .case-study { grid-template-columns: 1fr; } }
.case-study h3 { margin-bottom: 8px; font-size: 1.4rem; }
.case-study .case-tag {
  color: var(--gold-deep); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; display: block;
}
.case-metrics { display: flex; gap: 30px; margin-top: 20px; flex-wrap: wrap; }
.case-metrics div strong { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); }
.case-metrics div span { font-size: 0.78rem; color: var(--ink-faint); }

/* ==========================================================================
   NOTE BANNER
   ========================================================================== */

.note-banner {
  background: var(--gold-pale-dark); color: var(--gold-deep);
  border: 1px solid rgba(200,162,76,0.3);
  border-radius: var(--radius-sm); padding: 13px 18px;
  font-size: 0.85rem; margin-bottom: 40px;
}
.on-dark .note-banner { color: var(--gold-bright); }

/* ==========================================================================
   FEATURE ROWS
   ========================================================================== */

.feature-row {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 56px; align-items: center;
  padding: 58px 0; border-bottom: 1px solid var(--line);
}
.feature-row:last-of-type { border-bottom: none; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
@media (max-width: 860px) { .feature-row, .feature-row.reverse { grid-template-columns: 1fr; direction: ltr; } }

.feature-visual {
  background: var(--charcoal); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); padding: 36px;
  min-height: 230px; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.feature-visual:hover { border-color: rgba(200,162,76,0.35); box-shadow: 0 0 40px rgba(200,162,76,0.08); }
.feature-visual .icon-tile { width: 76px; height: 76px; margin: 0; border-color: rgba(200,162,76,0.4); color: var(--gold-bright); }

.feature-text ul { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.feature-text li { display: flex; gap: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.feature-text li::before { content: "—"; color: var(--gold-deep); font-weight: 700; flex-shrink: 0; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.compare-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--card); }
table.compare-table th, table.compare-table td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
table.compare-table th:first-child, table.compare-table td:first-child { text-align: left; }
table.compare-table thead th { background: var(--charcoal); color: var(--cream-on-dark); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; }
table.compare-table thead th.highlight { color: var(--gold-bright); }
table.compare-table tbody td:first-child { color: var(--ink); font-weight: 500; }
table.compare-table tbody tr:last-child td { border-bottom: none; }
table.compare-table .yes { color: var(--gold-deep); font-weight: 700; }
table.compare-table .no { color: var(--ink-faint); }
table.compare-table td.highlight-col { background: var(--gold-pale-dark); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 4px 24px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item:hover { border-color: rgba(200,162,76,0.3); }
.faq-item[open] { border-color: rgba(200,162,76,0.35); box-shadow: 0 8px 30px rgba(200,162,76,0.06); }
.faq-item summary {
  cursor: none; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 19px 0; font-weight: 600; font-size: 0.98rem;
}
@media (pointer: coarse) { .faq-item summary { cursor: pointer; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 400;
  color: var(--gold-deep); transition: transform 0.25s var(--ease); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--gold-bright); }
.faq-item p { padding: 0 0 20px; font-size: 0.94rem; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.demo-section { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
@media (max-width: 900px) { .demo-section { grid-template-columns: 1fr; } }

.form-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 38px;
  box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.92rem;
  background: var(--cream); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-deep); background: #fff;
  box-shadow: 0 0 0 3px rgba(200,162,76,0.1);
}
.field textarea { resize: vertical; min-height: 100px; }

.form-success {
  display: none; background: var(--gold-pale-dark); color: var(--gold-deep);
  border: 1px solid rgba(200,162,76,0.35); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 0.9rem; margin-top: 16px;
}
.form-success.show { display: block; }

.contact-card {
  background: linear-gradient(165deg, var(--charcoal-2), var(--charcoal));
  border: 1px solid var(--line-dark); color: var(--cream-on-dark);
  border-radius: var(--radius-lg); padding: 38px;
}
.contact-card h3 { color: var(--cream-on-dark); margin-bottom: 12px; }
.contact-card p { color: var(--muted-on-dark); }
.contact-list { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.contact-list div { display: flex; gap: 12px; align-items: flex-start; }
.contact-list strong { display: block; font-size: 0.8rem; color: var(--muted-on-dark); font-weight: 500; }
.contact-list span { font-weight: 600; }

/* ==========================================================================
   PRICING
   ========================================================================== */

.price-toggle-wrap { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 56px; }
.price-toggle-label { font-size: 0.9rem; font-weight: 600; color: var(--ink-faint); }
.price-toggle-label.on { color: var(--ink); }
.price-toggle {
  position: relative; width: 52px; height: 28px;
  background: var(--line); border-radius: var(--radius-pill); cursor: pointer;
  flex-shrink: 0; border: none;
}
.price-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s var(--ease);
}
.price-toggle.annual { background: var(--gold-deep); }
.price-toggle.annual::after { transform: translateX(24px); }
.save-tag {
  font-size: 0.74rem; background: var(--gold-pale-dark); color: var(--gold-deep);
  padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 700;
}

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.price-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 38px 32px;
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(200,162,76,0.3); }
.price-card.featured {
  background: var(--charcoal); border: 1px solid rgba(200,162,76,0.6);
  transform: scale(1.03); box-shadow: var(--shadow-deep), 0 0 60px rgba(200,162,76,0.1);
  position: relative; z-index: 2;
}
.price-card.featured:hover { transform: scale(1.03) translateY(-4px); box-shadow: var(--shadow-deep), 0 0 80px rgba(200,162,76,0.15); }
.price-card.featured h3, .price-card.featured .price-desc { color: var(--cream-on-dark); }
@media (max-width: 980px) { .price-card.featured { transform: none; } }

.price-badge {
  position: absolute; top: -13px; right: 28px;
  background: var(--gold); color: var(--charcoal);
  font-size: 0.72rem; font-weight: 700; padding: 5px 14px;
  border-radius: var(--radius-pill); letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(200,162,76,0.4);
}

.price-card h3 { margin-bottom: 8px; }
.price-desc { font-size: 0.88rem; color: var(--ink-faint); margin-bottom: 24px; }
.price-card.featured .price-desc { color: var(--muted-on-dark); }

.price-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.price-line .label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.price-card.featured .price-line .label { color: var(--muted-on-dark); }
.price-amount { font-family: var(--font-serif); font-size: 2.1rem; color: var(--ink); }
.price-card.featured .price-amount { color: var(--gold-bright); }
.price-amount span { font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); }
.price-card.featured .price-amount span { color: var(--muted-on-dark); }

.price-card hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.price-card.featured hr { border-top-color: var(--line-dark); }

.price-card ul { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; flex: 1; }
.price-card li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.price-card.featured li { color: var(--muted-on-dark); }
.price-card li::before { content: "✓"; color: var(--gold-deep); font-weight: 700; flex-shrink: 0; }
.price-card.featured li::before { color: var(--gold-bright); }

.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .addon-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .addon-grid { grid-template-columns: 1fr; } }
.addon-card {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 24px; background: var(--card);
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.addon-card:hover { border-color: rgba(200,162,76,0.4); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.addon-card h4 { font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 8px; }
.addon-card p { font-size: 0.88rem; margin: 0; }

/* ==========================================================================
   TIMELINE (ABOUT)
   ========================================================================== */

.timeline {
  position: relative; max-width: 760px; margin: 0 auto;
  padding-left: 32px; border-left: 1px solid var(--line);
}
.on-dark .timeline { border-left-color: var(--line-dark); }
.timeline-item { position: relative; padding-bottom: 42px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -37px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--cream);
  box-shadow: 0 0 12px rgba(200,162,76,0.5);
}
.on-dark .timeline-item::before { border-color: var(--charcoal); }
.timeline-item .t-year {
  font-family: var(--font-serif); color: var(--gold-deep);
  font-size: 1.1rem; margin-bottom: 6px; display: block;
}
.on-dark .timeline-item .t-year { color: var(--gold-bright); }
.timeline-item h3 { font-size: 1.08rem; margin-bottom: 6px; }
.timeline-item p { font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   TEAM
   ========================================================================== */

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; }
.team-avatar {
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--gold-pale-dark); border: 1px solid var(--gold-pale);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700;
  margin: 0 auto 16px;
}
.team-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.team-card .role {
  color: var(--gold-deep); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; margin-bottom: 10px; display: block;
}
.team-card p { font-size: 0.86rem; }

/* ==========================================================================
   VALUES / PILLARS
   ========================================================================== */

.value-card, .pillar-card {
  background: var(--charcoal-2); border: 1px solid var(--line-dark);
  border-radius: var(--radius-md); padding: 30px;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.value-card:hover, .pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,162,76,0.35);
  box-shadow: 0 20px 50px rgba(4,3,8,0.65), 0 0 30px rgba(200,162,76,0.08);
}

/* ==========================================================================
   CLIENTS ROW
   ========================================================================== */

.clients-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   CTA BANNER — ANIMATED GOLD BORDER SWEEP
   ========================================================================== */

.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--charcoal-3), var(--charcoal));
  border: 1px solid rgba(200,162,76,0.28);
  border-radius: var(--radius-lg);
  margin: 0 28px; padding: 70px 44px;
  color: var(--cream-on-dark); text-align: center;
  box-shadow: 0 0 80px rgba(200,162,76,0.04);
}
.cta-banner::before {
  content: "";
  position: absolute; top: -1px; left: -60%; width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation: border-sweep 3.5s linear infinite;
}
.cta-banner h2 { color: var(--cream-on-dark); }
.cta-banner p { color: var(--muted-on-dark); max-width: 540px; margin: 16px auto 32px; }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.page-header {
  background: var(--charcoal); padding: 70px 0 84px; text-align: center;
  position: relative; overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page-header .section-head { margin-inline: auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--charcoal); color: var(--muted-on-dark);
  border-top: 1px solid var(--line-dark);
}
.footer-top {
  padding: 68px 0 44px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 32px;
}
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } }

.footer-brand .logo { color: var(--cream-on-dark); margin-bottom: 16px; }
.footer-brand p { color: var(--muted-on-dark); font-size: 0.9rem; max-width: 280px; }

.footer-contact {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 0.92rem; font-weight: 600;
  color: var(--gold-bright);
  transition: color 0.2s, text-shadow 0.2s;
}
.footer-contact:hover {
  color: var(--gold-shine);
  text-shadow: 0 0 16px rgba(228,193,113,0.5);
}

.footer-col h4 {
  font-family: var(--font); color: var(--cream-on-dark);
  font-size: 0.78rem; margin-bottom: 18px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  color: var(--muted-on-dark); font-size: 0.92rem;
  transition: color 0.2s, padding-left 0.2s var(--ease);
}
.footer-col a:hover { color: var(--gold-bright); padding-left: 4px; }

.footer-bottom {
  border-top: 1px solid var(--line-dark); padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--muted-on-dark);
}
.social-row { display: flex; gap: 14px; }
.social-row a {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.social-row a:hover {
  border-color: var(--gold); color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(200,162,76,0.3);
  transform: translateY(-2px);
}

/* ==========================================================================
   SCROLL REVEAL — WITH STAGGER
   ========================================================================== */

/* (moved to 3D section below) */
/* old is-visible — removed */

/* Stagger grid children */
.grid > .reveal:nth-child(1) { transition-delay: 0s; }
.grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.32s; }
.grid > .reveal:nth-child(6) { transition-delay: 0.40s; }
.grid > .reveal:nth-child(7) { transition-delay: 0.48s; }
.grid > .reveal:nth-child(8) { transition-delay: 0.56s; }

/* Process steps stagger */
.process-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.process-grid > .reveal:nth-child(2) { transition-delay: 0.07s; }
.process-grid > .reveal:nth-child(3) { transition-delay: 0.14s; }
.process-grid > .reveal:nth-child(4) { transition-delay: 0.21s; }
.process-grid > .reveal:nth-child(5) { transition-delay: 0.28s; }
.process-grid > .reveal:nth-child(6) { transition-delay: 0.35s; }
.process-grid > .reveal:nth-child(7) { transition-delay: 0.42s; }
.process-grid > .reveal:nth-child(8) { transition-delay: 0.49s; }
.process-grid > .reveal:nth-child(9) { transition-delay: 0.56s; }
.process-grid > .reveal:nth-child(10){ transition-delay: 0.63s; }

/* Numbers grid stagger */
.numbers-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.numbers-grid > .reveal:nth-child(2) { transition-delay: 0.1s; }
.numbers-grid > .reveal:nth-child(3) { transition-delay: 0.2s; }
.numbers-grid > .reveal:nth-child(4) { transition-delay: 0.3s; }

/* Sources grid stagger */
.sources-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.sources-grid > .reveal:nth-child(2) { transition-delay: 0.07s; }
.sources-grid > .reveal:nth-child(3) { transition-delay: 0.14s; }
.sources-grid > .reveal:nth-child(4) { transition-delay: 0.21s; }
.sources-grid > .reveal:nth-child(5) { transition-delay: 0.28s; }
.sources-grid > .reveal:nth-child(6) { transition-delay: 0.35s; }

/* Biztype grid stagger */
.biztype-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.biztype-grid > .reveal:nth-child(2) { transition-delay: 0.12s; }
.biztype-grid > .reveal:nth-child(3) { transition-delay: 0.24s; }
.biztype-grid > .reveal:nth-child(4) { transition-delay: 0.36s; }

/* ==========================================================================
   DARK MODE BASE — v4 Full Dark Site
   ========================================================================== */

body {
  background: var(--charcoal);
  color: var(--cream-on-dark);
}
h1, h2, h3, h4 { color: var(--cream-on-dark); }
p { color: var(--muted-on-dark); }

/* ── Cards ── */
.card { background: var(--charcoal-2); border-color: var(--line-dark); }
.card h3 { color: var(--cream-on-dark); }
.card p { color: var(--muted-on-dark); }

/* ── Light section backgrounds → dark ── */
.bg-cream-deep { background: var(--charcoal-2); }

/* ── FAQ ── */
.faq-item { background: var(--charcoal-2); border-color: var(--line-dark); }
.faq-item summary { color: var(--cream-on-dark); }
.faq-item p { color: var(--muted-on-dark); }
.faq-list { max-width: 100%; }
.faq-container { max-width: 840px; margin: 0 auto; }

/* ── Testimonial cards ── */
.t-card { background: var(--charcoal-2); border-color: var(--line-dark); }
.t-card p.t-quote { color: var(--cream-on-dark); }
.t-person { border-color: var(--line-dark); }

/* ── Case studies ── */
.case-study { background: var(--charcoal-2); border-color: var(--line-dark); }
.case-study h3 { color: var(--cream-on-dark); }
.case-study p { color: var(--muted-on-dark); }
.case-metrics div strong { color: var(--gold-bright); }
.case-metrics div span { color: var(--muted-on-dark); }

/* ── Stats ── */
.stat-item strong { color: var(--gold-bright); }
.stat-item span { color: var(--muted-on-dark); }

/* ── Add-on cards ── */
.addon-card { background: var(--charcoal-2); border-color: var(--line-dark); }
.addon-card h4 { color: var(--cream-on-dark); }
.addon-card p { color: var(--muted-on-dark); }

/* ── Pricing ── */
.price-card { background: var(--charcoal-2); border-color: var(--line-dark); }
.price-card h3 { color: var(--cream-on-dark); }
.price-desc { color: var(--muted-on-dark); }
.price-amount { color: var(--gold-bright); }
.price-amount span { color: var(--muted-on-dark); }
.price-card li { color: var(--muted-on-dark); }
.price-card hr { border-top-color: var(--line-dark); }
.price-toggle-label { color: var(--muted-on-dark); }
.price-toggle-label.on { color: var(--cream-on-dark); }
.price-toggle { background: var(--line-dark); }
.price-toggle::after { background: var(--charcoal-3); }

/* ── Quote block ── */
.quote-block blockquote { color: var(--cream-on-dark); }
.quote-author { color: var(--muted-on-dark); }

/* ── Feature rows ── */
.feature-row { border-bottom-color: var(--line-dark); }
.feature-text li { color: var(--muted-on-dark); }

/* ── Compare table ── */
table.compare-table { background: var(--charcoal-2); }
table.compare-table td { border-color: var(--line-dark); color: var(--muted-on-dark); }
table.compare-table tbody td:first-child { color: var(--cream-on-dark); }

/* ── Timeline ── */
.timeline { border-left-color: var(--line-dark); }
.timeline-item::before { border-color: var(--charcoal); }
.timeline-item h3 { color: var(--cream-on-dark); }
.timeline-item p { color: var(--muted-on-dark); }
.timeline-item .t-year { color: var(--gold-bright); }

/* ── Team ── */
.team-card h3 { color: var(--cream-on-dark); }
.team-card p { color: var(--muted-on-dark); }

/* ── Chips ── */
.chip { background: var(--charcoal-2); border-color: var(--line-dark); color: var(--muted-on-dark); }

/* ── Dividers ── */
.divider::before, .divider::after { background: var(--line-dark); }

/* ── Eyebrow ── */
.eyebrow { color: var(--gold-bright); }

/* ── Outline buttons ── */
.btn-outline-dark { color: var(--cream-on-dark); border-color: rgba(255,255,255,0.16); }
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ── Note banner ── */
.note-banner {
  background: rgba(200,162,76,0.08);
  color: var(--gold-bright);
  border-color: rgba(200,162,76,0.2);
}

/* ── Forms ── */
.form-card { background: var(--charcoal-2); border-color: var(--line-dark); }
.form-card h2 { color: var(--cream-on-dark); }
.form-card > p { color: var(--muted-on-dark); }
.field label { color: var(--cream-on-dark); }
.field input, .field select, .field textarea {
  background: var(--charcoal-3);
  border-color: var(--line-dark);
  color: var(--cream-on-dark);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-on-dark); opacity: 0.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--charcoal-2);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,162,76,0.12);
}
option { background: var(--charcoal-2); color: var(--cream-on-dark); }

/* ── Section head ── */
.section-head p { color: var(--muted-on-dark); }

/* ── Problem cards ── */
.problem-card { color: var(--muted-on-dark); }

/* ── Compare columns ── */
.compare-col.without h3, .compare-col.with h3 { color: var(--cream-on-dark); }
.compare-col.without li, .compare-col.with li { color: var(--muted-on-dark); }

/* ==========================================================================
   NEW COMPONENTS — v4
   ========================================================================== */

/* ── Big Numbers Section ── */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .numbers-grid { grid-template-columns: 1fr; } }

.number-card {
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.number-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(200,162,76,0.08), transparent 65%);
  pointer-events: none;
}
.number-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,162,76,0.38);
  box-shadow: 0 20px 50px rgba(4,3,8,0.65), 0 0 30px rgba(200,162,76,0.1);
}
.number-value {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 16px;
  text-shadow: 0 0 30px rgba(228,193,113,0.3);
  position: relative;
}
.number-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted-on-dark);
  position: relative;
  margin: 0;
}

/* ── Lead Sources Grid ── */
.sources-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 960px) { .sources-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sources-grid { grid-template-columns: repeat(2, 1fr); } }

.source-tile {
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 24px 14px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.source-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(200,162,76,0.42);
  box-shadow: 0 12px 30px rgba(4,3,8,0.55), 0 0 20px rgba(200,162,76,0.08);
}
.source-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--charcoal-3);
  border: 1px solid rgba(200,162,76,0.28);
  color: var(--gold-bright);
  font-family: var(--font-serif); font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
.source-tile strong { display: block; font-size: 0.84rem; color: var(--cream-on-dark); }
.source-tile span { font-size: 0.75rem; color: var(--muted-on-dark); line-height: 1.4; }
.source-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(200,162,76,0.12);
  border: 1px solid rgba(200,162,76,0.38);
  color: var(--gold-bright);
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Business Type Cards ── */
.biztype-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .biztype-grid { grid-template-columns: 1fr; } }

.biztype-card {
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.biztype-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(200,162,76,0.06), transparent 55%);
  pointer-events: none;
}
.biztype-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,162,76,0.35);
  box-shadow: 0 20px 50px rgba(4,3,8,0.6), 0 0 30px rgba(200,162,76,0.07);
}
.biztype-num {
  font-family: var(--font-serif);
  font-size: 4.5rem; font-weight: 700;
  color: rgba(200,162,76,0.1);
  line-height: 1;
  position: absolute; top: 16px; right: 24px;
  pointer-events: none; user-select: none;
}
.biztype-card h3 {
  font-size: 1.2rem; margin-bottom: 12px;
  color: var(--gold-bright);
  position: relative;
}
.biztype-card > p {
  color: var(--muted-on-dark); font-size: 0.94rem;
  margin-bottom: 22px; line-height: 1.72;
  position: relative;
}
.biztype-list {
  display: flex; flex-direction: column; gap: 10px;
  list-style: none; position: relative;
}
.biztype-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.89rem; color: var(--muted-on-dark); line-height: 1.5;
}
.biztype-list li::before {
  content: "→"; color: var(--gold);
  font-weight: 700; flex-shrink: 0; margin-top: 1px;
}

/* ── FAQ Category Headers ── */
.faq-category-header {
  display: flex; align-items: center; gap: 16px;
  margin: 52px 0 20px;
}
.faq-category-header h3 {
  font-family: var(--font-serif); font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright); white-space: nowrap;
}
.faq-cat-line {
  flex: 1; height: 1px; background: var(--line-dark);
}
.faq-cat-diamond {
  width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); flex-shrink: 0;
  box-shadow: 0 0 10px rgba(200,162,76,0.5);
}

/* ==========================================================================
   3D VISUAL UPGRADES — v5
   ========================================================================== */

/* ── New keyframes ── */
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.06); }
  66%       { transform: translate(-20px, 20px) scale(0.96); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-35px, 25px) scale(1.04); }
  70%       { transform: translate(25px, -20px) scale(0.97); }
}
@keyframes grid-line-pulse {
  0%, 100% { opacity: 0.025; }
  50%       { opacity: 0.06; }
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes shine-sweep {
  0%   { left: -100%; }
  100% { left: 200%; }
}
@keyframes ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes gradient-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Perspective Hero Grid ── */
.hero-grid-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.9;
}

/* ── Hero ambient orbs ── */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.hero-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(200,162,76,0.18) 0%, transparent 70%);
  top: -100px; right: -80px;
  animation: orb-drift-1 18s ease-in-out infinite;
}
.hero-orb-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(168,130,47,0.12) 0%, transparent 70%);
  bottom: -60px; left: 10%;
  animation: orb-drift-2 22s ease-in-out infinite;
}

/* ── Floating badge in hero visual ── */
.hero-badge {
  position: absolute;
  background: linear-gradient(135deg, var(--charcoal-2), var(--charcoal-3));
  border: 1px solid rgba(200,162,76,0.4);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 40px rgba(4,3,8,0.7), 0 0 20px rgba(200,162,76,0.08);
  animation: badge-float 5s ease-in-out infinite;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  z-index: 5;
}
.hero-badge-1 { top: 14%; right: -10px; animation-delay: 0s; }
.hero-badge-2 { bottom: 18%; left: -18px; animation-delay: 2.5s; }
.hero-badge .b-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(200,162,76,0.14); border: 1px solid rgba(200,162,76,0.3);
  color: var(--gold-bright); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.hero-badge .b-text { display: flex; flex-direction: column; }
.hero-badge .b-text strong { font-size: 0.82rem; color: var(--cream-on-dark); line-height: 1.1; }
.hero-badge .b-text span { font-size: 0.7rem; color: var(--muted-on-dark); }

/* ── Glassmorphism card variant ── */
.card-glass {
  background: rgba(13, 11, 18, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(200,162,76,0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 50px rgba(4,3,8,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Animated gradient border for featured elements ── */
.border-glow {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.border-glow::before {
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, var(--gold-deep), transparent 50%, var(--gold-bright), transparent 80%, var(--gold-deep));
  background-size: 400% 400%;
  animation: gradient-rotate 4s ease infinite;
  border-radius: inherit;
  z-index: -1;
}

/* ── Magnetic / glowing CTA buttons ── */
.btn-gold {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-gold:hover::after { left: 200%; }
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(200,162,76,0.55), 0 4px 16px rgba(200,162,76,0.3);
}

/* ── Pulse ring for "live" indicator ── */
.live-pulse {
  position: relative; display: inline-flex; align-items: center;
}
.live-pulse::before, .live-pulse::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  animation: ring-expand 2s ease-out infinite;
}
.live-pulse::after { animation-delay: 1s; }

/* ── Feature cards — deeper 3D on hover ── */
.card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  transform-style: preserve-3d;
}
.card:hover {
  box-shadow: 0 30px 70px rgba(4,3,8,0.75), 0 0 40px rgba(200,162,76,0.1);
}

/* ── Section separator: diagonal gold line ── */
.section-sep {
  width: 100%; overflow: hidden; line-height: 0; pointer-events: none;
}
.section-sep svg { display: block; width: 100%; height: 56px; }

/* ── Stats bar — glass version ── */
.stats-glass {
  background: rgba(13,11,18,0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(200,162,76,0.18);
  border-radius: var(--radius-lg);
  padding: 32px 0;
  box-shadow: 0 16px 50px rgba(4,3,8,0.5);
}
.stats-glass .stat-item strong { font-size: clamp(2rem, 3vw, 2.8rem); }

/* ── Number cards — glow ring on hover ── */
.number-card::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(200,162,76,0.18), transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s var(--ease);
  border-radius: 50%;
  pointer-events: none;
}
.number-card:hover::after { transform: translate(-50%, -50%) scale(3); }

/* ── Testimonial cards — elevated glass ── */
.t-card {
  background: var(--charcoal-2);
  border: 1px solid var(--line-dark);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
  position: relative;
  overflow: hidden;
}
.t-card::before {
  content: "";
  position: absolute; top: 0; left: -100%; width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transition: left 0.6s ease;
}
.t-card:hover::before { left: 200%; }
.t-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200,162,76,0.3);
  box-shadow: 0 24px 60px rgba(4,3,8,0.7), 0 0 30px rgba(200,162,76,0.08);
}

/* ── Page header — animated mesh overlay ── */
.page-header {
  overflow: hidden;
}
.page-header::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,162,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,162,76,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-line-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* ── Pillar card glow ── */
.pillar-card {
  position: relative; overflow: hidden;
}
.pillar-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(200,162,76,0.1), transparent 65%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.4s;
}
.pillar-card:hover::before { opacity: 1; }

/* ── Eyebrow — animated underline ── */
.eyebrow::after {
  content: "";
  display: block; height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
  width: 100%; margin-top: 3px;
  animation: draw-line 1.4s ease forwards;
  transform-origin: left;
}

/* ── Section divider ── */
.gold-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  margin: 0 auto 28px;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(200,162,76,0.4);
}

/* ── CTA banner — stronger depth ── */
.cta-banner {
  box-shadow: 0 40px 100px rgba(4,3,8,0.8), 0 0 80px rgba(200,162,76,0.06),
              inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Logo-mark removed (replaced by logo-mark-img) ── */

/* ── Timeline dot — glow ── */
.timeline-item::before {
  box-shadow: 0 0 0 4px rgba(200,162,76,0.12), 0 0 20px rgba(200,162,76,0.6);
}

/* ── Mobile tweaks ── */
@media (max-width: 600px) {
  .hero-badge { display: none; }
  .hero-orb-1, .hero-orb-2 { opacity: 0.5; }
}

/* ==========================================================================
   FANTASY + 3D HERO & SCROLL ADDITIONS — v8
   ========================================================================== */

/* ── Full-viewport hero shell ── */
.hero-full {
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: stretch;
  padding-top: 80px;
  position: relative; overflow: hidden;
}

/* ── Two-column hero layout ── */
.hero-inner {
  display: flex; align-items: center; gap: 52px;
  min-height: calc(100vh - 80px);
  padding: 60px 0 80px;
  position: relative; z-index: 2;
}
.hero-copy { flex: 1; max-width: 560px; }
.hero-visual {
  flex: 1; display: flex; justify-content: center; align-items: center;
  position: relative; min-height: 520px;
}

/* ── Sphere concentric rings behind phone ── */
.hero-sphere-ring {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(200,162,76,0.18);
  box-shadow: 0 0 60px rgba(200,162,76,0.10), inset 0 0 60px rgba(200,162,76,0.06);
  animation: ring-breathe 6s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.hero-sphere-ring::before {
  content: ""; position: absolute; inset: 22px; border-radius: 50%;
  border: 1px solid rgba(200,162,76,0.10);
}
.hero-sphere-ring::after {
  content: ""; position: absolute; inset: 55px; border-radius: 50%;
  border: 1px solid rgba(200,162,76,0.07);
}
@keyframes ring-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%       { transform: scale(1.045); opacity: 1; }
}

/* ── Three.js canvas fills hero background ── */
.hero-3d-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.85;
}

/* ── Large editorial heading ── */
.hero-xl {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 5.2rem);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
  color: var(--cream-on-dark); margin: 20px 0 28px;
}
.hero-xl em {
  font-style: italic; color: var(--gold-bright);
  -webkit-text-fill-color: var(--gold-bright); font-weight: 600;
}
.hero-copy .lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 520px;
  margin: 0 0 34px; color: var(--muted-on-dark); line-height: 1.72;
}

/* ── Film grain overlay ── */
.grain-overlay {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 220px 220px; opacity: 0.038;
}

/* ── Marquee strip ── */
.logos-marquee-outer {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logos-track {
  display: flex; gap: 14px; width: max-content;
  animation: marquee-scroll 32s linear infinite; padding: 16px 0;
}
.logos-track .chip { flex-shrink: 0; white-space: nowrap; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Section numbers ── */
.sec-num {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(200,162,76,0.55); text-transform: uppercase; margin-bottom: 14px;
  font-family: var(--font);
}
.gold-em {
  font-style: italic; color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright);
}

/* ── Stat pills ── */
.stat-pill {
  display: flex; align-items: center; gap: 16px;
  background: rgba(6,5,8,0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200,162,76,0.2); border-radius: var(--radius-md);
  padding: 14px 22px; min-width: 260px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.stat-pill:hover { border-color: rgba(200,162,76,0.46); transform: translateX(5px); }
.stat-pill strong {
  font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700;
  color: var(--gold-bright); flex-shrink: 0; min-width: 56px;
}
.stat-pill span { font-size: 0.83rem; color: var(--muted-on-dark); line-height: 1.45; }

/* ── Gold scan line on section enter ── */
.section-head::before {
  content: ""; display: block; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  margin: 0 auto 32px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.section-head.is-visible::before { width: 120px; }

/* ── Floating 3D gold gems ── */
.float-gem { position: absolute; pointer-events: none; z-index: 1; }
.gem-diamond {
  width: 46px; height: 46px; border: 1px solid rgba(200,162,76,0.35);
  position: relative; transform: rotate(45deg);
}
.gem-diamond::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(200,162,76,0.18); transform: rotateZ(22deg);
}
.gem-diamond::after {
  content: ""; position: absolute; inset: 20px; background: rgba(200,162,76,0.06);
}
.gem-a { animation: gem-drift-a 9s ease-in-out infinite; }
.gem-b { animation: gem-drift-b 13s ease-in-out infinite; }
.gem-c { animation: gem-drift-c 7s ease-in-out infinite; }
.gem-d { animation: gem-drift-a 11s ease-in-out infinite reverse; }
@keyframes gem-drift-a {
  0%,100% { transform: translateY(0) rotate(45deg); }
  40%     { transform: translateY(-26px) rotate(65deg) scale(1.1); }
}
@keyframes gem-drift-b {
  0%,100% { transform: translateY(-8px) rotate(45deg) scale(0.95); }
  50%     { transform: translateY(16px) rotate(30deg) scale(1.08); }
}
@keyframes gem-drift-c {
  0%,100% { transform: translateY(0) rotate(45deg); }
  30%     { transform: translateY(-20px) rotate(70deg) scale(1.05); }
}

/* ── Responsive for new hero ── */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; gap: 40px; padding: 48px 0 60px; min-height: unset; }
  .hero-copy { max-width: 100%; text-align: center; }
  .hero-copy .lead { margin: 0 auto 34px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { min-height: 400px; }
  .hero-sphere-ring { width: 320px; height: 320px; }
}
@media (max-width: 560px) {
  .hero-xl { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-sphere-ring { width: 280px; height: 280px; }
}
@media (max-width: 600px) {
  .js-ready .reveal, .js-ready .reveal-left, .js-ready .reveal-right { transform: translateY(40px); }
  .js-ready .reveal-deep { transform: translateY(40px) scale(0.96); }
  .js-ready .numbers-grid > .number-card,
  .js-ready .biztype-grid > .biztype-card,
  .js-ready .compare-col.without,
  .js-ready .compare-col.with { transform: translateY(40px); }
}

/* ==========================================================================
   "COMES THROUGH THE SCREEN" SCROLL SYSTEM — v8
   All elements start FAR AWAY (deep Z) and zoom TOWARD the viewer
   ========================================================================== */

/* ── Core Z-depth reveal — straight through the screen ── */
.js-ready .reveal {
  opacity: 0;
  transform: perspective(900px) translateZ(-320px) scale(0.6) rotateY(6deg);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Deep zoom — comes from very far ── */
.js-ready .reveal-deep {
  opacity: 0;
  transform: perspective(1000px) translateZ(-700px) scale(0.2);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-deep.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Left — comes from left depth ── */
.js-ready .reveal-left {
  opacity: 0;
  transform: perspective(900px) translateZ(-260px) translateX(-120px) scale(0.65) rotateY(18deg);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Right — comes from right depth ── */
.js-ready .reveal-right {
  opacity: 0;
  transform: perspective(900px) translateZ(-260px) translateX(120px) scale(0.65) rotateY(-18deg);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Grid stagger ── */
.grid > .reveal:nth-child(2)  { transition-delay: 80ms; }
.grid > .reveal:nth-child(3)  { transition-delay: 160ms; }
.grid > .reveal:nth-child(4)  { transition-delay: 240ms; }
.grid > .reveal:nth-child(5)  { transition-delay: 320ms; }
.grid > .reveal:nth-child(6)  { transition-delay: 400ms; }
.grid > .reveal:nth-child(7)  { transition-delay: 480ms; }
.grid > .reveal:nth-child(8)  { transition-delay: 560ms; }
.grid > .reveal:nth-child(9)  { transition-delay: 640ms; }
.grid > .reveal:nth-child(10) { transition-delay: 720ms; }
.grid > .reveal:nth-child(11) { transition-delay: 800ms; }
.grid > .reveal:nth-child(12) { transition-delay: 880ms; }

/* ── Source tile stagger ── */
.sources-grid > .source-tile:nth-child(2) { transition-delay: 90ms; }
.sources-grid > .source-tile:nth-child(3) { transition-delay: 180ms; }
.sources-grid > .source-tile:nth-child(4) { transition-delay: 270ms; }
.sources-grid > .source-tile:nth-child(5) { transition-delay: 360ms; }
.sources-grid > .source-tile:nth-child(6) { transition-delay: 450ms; }

/* ── Numbers grid — each zooms from depth with stagger ── */
.js-ready .numbers-grid > .number-card:nth-child(1) { opacity:0; transform: perspective(900px) translateZ(-350px) scale(0.55); transition-delay: 0ms; }
.js-ready .numbers-grid > .number-card:nth-child(2) { opacity:0; transform: perspective(900px) translateZ(-350px) scale(0.55); transition-delay: 110ms; }
.js-ready .numbers-grid > .number-card:nth-child(3) { opacity:0; transform: perspective(900px) translateZ(-350px) scale(0.55); transition-delay: 220ms; }
.js-ready .numbers-grid > .number-card:nth-child(4) { opacity:0; transform: perspective(900px) translateZ(-350px) scale(0.55); transition-delay: 330ms; }
.numbers-grid > .number-card.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Biztype cards — emerge from depth alternating tilt ── */
.js-ready .biztype-grid > .biztype-card:nth-child(1) { opacity:0; transform: perspective(1100px) translateZ(-500px) rotateY(-12deg) scale(0.45); transition-duration: 1.1s; }
.js-ready .biztype-grid > .biztype-card:nth-child(2) { opacity:0; transform: perspective(1100px) translateZ(-500px) rotateY(12deg)  scale(0.45); transition-delay: 130ms; transition-duration: 1.1s; }
.js-ready .biztype-grid > .biztype-card:nth-child(3) { opacity:0; transform: perspective(1100px) translateZ(-500px) rotateY(-12deg) scale(0.45); transition-delay: 260ms; transition-duration: 1.1s; }
.js-ready .biztype-grid > .biztype-card:nth-child(4) { opacity:0; transform: perspective(1100px) translateZ(-500px) rotateY(12deg)  scale(0.45); transition-delay: 390ms; transition-duration: 1.1s; }
.biztype-grid > .biztype-card.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Process steps — rapid cascade from depth ── */
.js-ready .process-step {
  opacity: 0;
  transform: perspective(700px) translateZ(-220px) scale(0.7) rotateX(8deg);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step.is-visible { opacity: 1 !important; transform: none !important; }
.process-grid > .process-step:nth-child(2)  { transition-delay: 55ms; }
.process-grid > .process-step:nth-child(3)  { transition-delay: 110ms; }
.process-grid > .process-step:nth-child(4)  { transition-delay: 165ms; }
.process-grid > .process-step:nth-child(5)  { transition-delay: 220ms; }
.process-grid > .process-step:nth-child(6)  { transition-delay: 275ms; }
.process-grid > .process-step:nth-child(7)  { transition-delay: 330ms; }
.process-grid > .process-step:nth-child(8)  { transition-delay: 385ms; }
.process-grid > .process-step:nth-child(9)  { transition-delay: 440ms; }
.process-grid > .process-step:nth-child(10) { transition-delay: 495ms; }

/* ── Section headings zoom through screen ── */
.js-ready /* old section-head opacity — removed */
.section-head.is-visible { opacity: 1 !important; transform: none !important; }
.js-ready .section-head .sec-num {
  display: inline-block; opacity: 0;
  transform: perspective(400px) translateZ(-200px) scale(0.5);
  transition: opacity 0.6s ease 0.1s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.section-head.is-visible .sec-num { opacity: 1 !important; transform: none !important; }
.js-ready .section-head h2 {
  opacity: 0;
  transform: perspective(800px) translateZ(-300px) scale(0.6);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s,
              transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s;
}
.section-head.is-visible h2 { opacity: 1 !important; transform: none !important; }
.js-ready .section-head p {
  opacity: 0;
  transform: perspective(600px) translateZ(-150px) scale(0.75);
  transition: opacity 0.7s ease 0.28s, transform 0.7s ease 0.28s;
}
.section-head.is-visible p { opacity: 1 !important; transform: none !important; }

/* ── Compare columns — both come from depth ── */
.js-ready .compare-col.without { opacity:0; transform: perspective(900px) translateZ(-280px) translateX(-60px) scale(0.62) rotateY(10deg); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.js-ready .compare-col.with   { opacity:0; transform: perspective(900px) translateZ(-280px) translateX(60px)  scale(0.62) rotateY(-10deg); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1) 0.12s, transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.12s; }
.compare-col.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Quote block — emerge from very deep ── */
.js-ready .quote-block { opacity:0; transform: perspective(1200px) translateZ(-600px) scale(0.28); transition: opacity 1.2s cubic-bezier(0.22,1,0.36,1), transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.quote-block.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Responsive — simplify on mobile ── */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; gap: 40px; padding: 48px 0 60px; min-height: unset; }
  .hero-copy { max-width: 100%; text-align: center; }
  .hero-copy .lead { margin: 0 auto 34px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { min-height: 400px; }
  .hero-sphere-ring { width: 320px; height: 320px; }
}
@media (max-width: 560px) {
  .hero-xl { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-sphere-ring { width: 280px; height: 280px; }
}
@media (max-width: 700px) {
  .js-ready .reveal,
  .js-ready .reveal-left,
  .js-ready .reveal-right,
  .js-ready .reveal-deep { transform: translateY(30px) scale(0.96); }
  .js-ready .numbers-grid > .number-card,
  .js-ready .biztype-grid > .biztype-card,
  .js-ready .compare-col.without,
  .js-ready .compare-col.with,
  .js-ready .section-head { transform: translateY(30px); }
}


/* ==========================================================================
   HERO ENTRANCE — everything bursts FROM DEPTH on page load
   No JS needed — pure CSS keyframes
   ========================================================================== */

@keyframes burstFromDepth {
  0%   { opacity: 0; transform: perspective(1400px) translateZ(-1200px) scale(0.04); }
  55%  { opacity: 1; }
  80%  { transform: perspective(1400px) translateZ(28px) scale(1.025); }
  100% { opacity: 1; transform: perspective(1400px) translateZ(0) scale(1); }
}

@keyframes burstFromDepthLeft {
  0%   { opacity: 0; transform: perspective(1400px) translateZ(-900px) translateX(-100px) scale(0.08) rotateY(25deg); }
  60%  { opacity: 1; }
  85%  { transform: perspective(1400px) translateZ(20px) translateX(6px) scale(1.015) rotateY(-2deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes burstFromDepthRight {
  0%   { opacity: 0; transform: perspective(1400px) translateZ(-900px) translateX(100px) scale(0.08) rotateY(-25deg); }
  60%  { opacity: 1; }
  85%  { transform: perspective(1400px) translateZ(20px) translateX(-6px) scale(1.015) rotateY(2deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes dropFromTop {
  0%   { opacity: 0; transform: translateY(-60px) scale(0.85); }
  70%  { opacity: 1; }
  85%  { transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

@keyframes zDepthFadeUp {
  0%   { opacity: 0; transform: perspective(800px) translateZ(-400px) translateY(30px) scale(0.55); }
  100% { opacity: 1; transform: none; }
}

/* ── Nav bar drops from top ── */
#site-header {
  animation: dropFromTop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/* ── Hero pill badge ── */
.hero .pill {
  animation: burstFromDepth 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

/* ── Main heading ── */
.hero-xl {
  animation: burstFromDepth 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

/* ── Lead paragraph ── */
.hero .lead {
  animation: zDepthFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

/* ── CTA buttons ── */
.hero-actions {
  animation: zDepthFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

/* ── Stats row ── */
.hero-stats {
  animation: zDepthFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}

/* ── Phone / visual — bursts from right depth ── */
.hero-visual {
  animation: burstFromDepthRight 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* ── Sphere ring pulses in after phone lands ── */
.hero-sphere-ring {
  animation: burstFromDepth 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

/* ── Marquee strip slides up ── */
.logos-marquee-outer {
  animation: zDepthFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #site-header,
  .hero .pill, .hero-xl, .hero .lead, .hero-actions, .hero-stats,
  .hero-visual, .hero-sphere-ring, .logos-marquee-outer {
    animation: none !important;
  }
}


/* ==========================================================================
   PROFESSIONAL POLISH — v10
   Typography · Spacing · Cards · Stats · CTA · Quote · Scrollbar
   ========================================================================== */

/* ── Smooth scroll + custom scrollbar ── */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #C8A24C, #7a5f28); border-radius: 3px; }

/* ── Hero headline — tighter tracking ── */
.hero-xl {
  letter-spacing: -0.03em;
  line-height: 1.04;
}

/* ── Hero stats row — premium divider layout ── */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(200,162,76,0.18);
}
.hero-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stat strong {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-stat span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(200,162,76,0.4), transparent);
  margin: 0 28px;
  flex-shrink: 0;
}

/* ── Pill — more refined ── */
.pill {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 8px 16px;
  background: rgba(200,162,76,0.08);
  border: 1px solid rgba(200,162,76,0.25);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Section number — editorial style ── */
.sec-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 20px;
}
.sec-num::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

/* ── Section headings — tighter tracking ── */
.section-head h2 {
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* ── Number cards — bolder values ── */
.number-value {
  font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #F0D070, #C8A24C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}

/* ── Cards — gradient border glow on hover ── */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(200,162,76,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card:hover {
  border-color: rgba(200,162,76,0.45) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(200,162,76,0.12);
}

/* ── Number cards — same glow ── */
.number-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}
.number-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(200,162,76,0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.number-card:hover::after { opacity: 1; }

/* ── Compare column — "with" gets gold top border accent ── */
.compare-col.with {
  border-top: 2px solid var(--gold) !important;
  position: relative;
}
.compare-col.with h3 {
  color: var(--gold);
}
.compare-col.without h3 {
  color: var(--text-muted);
}

/* ── Biztype number — bigger editorial style ── */
.biztype-num {
  font-family: var(--display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,162,76,0.3);
  margin-bottom: 16px;
  display: block;
}
.biztype-card h3 {
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* ── Process step numbers — bolder ── */
.process-step .num {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0.6;
}

/* ── Quote block — larger and more impactful ── */
.quote-block {
  position: relative;
}
.quote-block::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 0;
  font-family: var(--display);
  font-size: 8rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.15;
  pointer-events: none;
}
.quote-block blockquote {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.55;
  letter-spacing: -0.015em;
  font-style: italic;
}
.quote-author {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qa-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.qa-title {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* ── CTA banner — premium treatment ── */
.cta-banner {
  text-align: center;
  padding: 80px 60px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200,162,76,0.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(200,162,76,0.06) 0%, rgba(0,0,0,0) 100%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(200,162,76,0.2);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,162,76,0.6), transparent);
}
.cta-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 20px;
}
.cta-banner h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.cta-banner p:not(.cta-note) {
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.65;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
  margin-bottom: 20px;
}
.cta-note {
  font-size: 0.72rem;
  color: var(--text-muted) !important;
  opacity: 0.6;
  letter-spacing: 0.06em;
  margin: 0 auto !important;
  max-width: none !important;
}

/* ── Gold button — refined gradient + shine ── */
.btn-gold {
  background: linear-gradient(135deg, #D4A843 0%, #B8882A 50%, #C8A24C 100%);
  box-shadow: 0 4px 20px rgba(200,162,76,0.25), 0 1px 0 rgba(255,255,255,0.15) inset;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.btn-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn-gold:hover::before { left: 140%; }
.btn-gold:hover {
  background: linear-gradient(135deg, #E0B84E 0%, #C8922E 50%, #D4A843 100%);
  box-shadow: 0 6px 30px rgba(200,162,76,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
  transform: translateY(-2px);
}

/* ── Nav — refined ── */
.site-header {
  backdrop-filter: blur(20px) saturate(180%);
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.logo {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
}

/* ── Source tiles — better hover ── */
.source-tile {
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.source-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(200,162,76,0.5) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(200,162,76,0.1);
}
.source-icon {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

/* ── FAQ items — cleaner ── */
.faq-item summary {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.97rem;
}

/* ── Marquee chips — refined ── */
.chip {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Footer — refined ── */
.site-footer {
  border-top: 1px solid rgba(200,162,76,0.12);
}
.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 280px;
  margin: 12px 0;
}
.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 16px;
}
.footer-col a {
  font-size: 0.84rem;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold); }

/* ── Problem cards — better ── */
.problem-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: border-color 0.3s, background 0.3s;
}
.problem-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(200,62,62,0.3);
}
.problem-card .x {
  font-size: 0.8rem;
  color: rgba(220,80,80,0.7);
  flex-shrink: 0;
}

/* ── Responsive refinements ── */
@media (max-width: 600px) {
  .stat-divider { margin: 0 16px; height: 28px; }
  .hero-stat strong { font-size: 1.5rem; }
  .cta-banner { padding: 48px 24px; }
  .quote-block::before { font-size: 5rem; }
}


/* ==========================================================================
   3 SCROLL-TRIGGERED 3D FLOATING SHAPES
   ========================================================================== */

/* Base shape container */
.scroll-3d-shape {
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* Shape A — large rotating diamond cluster (appears above numbers grid) */
.shape-a {
  margin-bottom: -20px;
}
.shape-a .s3d-inner {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 320px;
  height: 320px;
  transform: translateX(-50%) perspective(800px) translateZ(-800px) rotateZ(45deg) scale(0.1);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity    1.0s cubic-bezier(0.22, 1, 0.36, 1);
}
.shape-a.s3d-visible .s3d-inner {
  transform: translateX(-50%) perspective(800px) translateZ(0) rotateZ(45deg) scale(1);
  opacity: 1;
}
/* Diamond rings */
.shape-a .s3d-inner::before,
.shape-a .s3d-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200,162,76,0.25);
  border-radius: 4px;
  transform: rotate(0deg);
  animation: diamond-spin-a 12s linear infinite;
}
.shape-a .s3d-inner::after {
  inset: 30px;
  border-color: rgba(200,162,76,0.4);
  animation: diamond-spin-a 8s linear infinite reverse;
  border-width: 1.5px;
}
@keyframes diamond-spin-a {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Third inner ring via box-shadow */
.shape-a .s3d-inner {
  box-shadow:
    inset 0 0 0 60px transparent,
    0 0 0 1px rgba(200,162,76,0.15),
    0 0 0 80px rgba(200,162,76,0.03),
    0 0 60px rgba(200,162,76,0.08);
  border: 1px solid rgba(200,162,76,0.1);
  border-radius: 4px;
}

/* Shape B — rotating hexagon/star (appears above process grid) */
.shape-b {
  margin-bottom: -40px;
}
.shape-b .s3d-inner {
  position: absolute;
  right: 6%;
  top: -60px;
  width: 200px;
  height: 200px;
  transform: perspective(700px) translateZ(-600px) rotateX(60deg) rotateZ(30deg) scale(0.1);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              opacity    0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.shape-b.s3d-visible .s3d-inner {
  transform: perspective(700px) translateZ(0) rotateX(12deg) rotateZ(30deg) scale(1);
  opacity: 1;
}
.shape-b .s3d-inner::before,
.shape-b .s3d-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(200,162,76,0.35);
  border-radius: 4px;
  animation: diamond-spin-a 10s linear infinite;
}
.shape-b .s3d-inner::after {
  inset: 20px;
  border-color: rgba(232,200,112,0.5);
  animation: diamond-spin-a 6s linear infinite reverse;
  box-shadow: 0 0 20px rgba(200,162,76,0.12);
}
.shape-b .s3d-inner {
  border: 1px solid rgba(200,162,76,0.2);
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(200,162,76,0.06);
}

/* Shape C — large glowing orb cluster (appears above CTA) */
.shape-c {
  margin-bottom: -50px;
}
.shape-c .s3d-inner {
  position: absolute;
  left: 8%;
  top: -80px;
  width: 260px;
  height: 260px;
  transform: perspective(1000px) translateZ(-900px) translateX(-60px) scale(0.05);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              opacity    1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.shape-c.s3d-visible .s3d-inner {
  transform: perspective(1000px) translateZ(0) translateX(0) scale(1);
  opacity: 1;
}
.shape-c .s3d-inner::before,
.shape-c .s3d-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200,162,76,0.3);
  border-radius: 50%;
  animation: orb-breathe 5s ease-in-out infinite;
}
.shape-c .s3d-inner::after {
  inset: 32px;
  border-color: rgba(200,162,76,0.5);
  border-width: 1.5px;
  animation: orb-breathe 3.5s ease-in-out infinite reverse;
  box-shadow: 0 0 30px rgba(200,162,76,0.15);
}
.shape-c .s3d-inner {
  border: 1px solid rgba(200,162,76,0.15);
  border-radius: 50%;
  box-shadow:
    0 0 0 60px rgba(200,162,76,0.025),
    0 0 80px rgba(200,162,76,0.08);
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.7; }
}

/* ── Reliable scroll animation — clean keyframe approach ── */
@keyframes flyIn3D {
  0%   {
    opacity: 0;
    transform: perspective(1000px) translateZ(-600px) scale(0.25) rotateY(10deg);
    filter: blur(4px);
  }
  60%  { filter: blur(0px); opacity: 1; }
  85%  { transform: perspective(1000px) translateZ(16px) scale(1.015) rotateY(-1deg); }
  100% { opacity: 1; transform: perspective(1000px) translateZ(0) scale(1) rotateY(0deg); }
}

@keyframes flyIn3DLeft {
  0%   {
    opacity: 0;
    transform: perspective(1000px) translateZ(-500px) translateX(-80px) scale(0.3) rotateY(20deg);
    filter: blur(3px);
  }
  60%  { filter: blur(0); opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes flyIn3DRight {
  0%   {
    opacity: 0;
    transform: perspective(1000px) translateZ(-500px) translateX(80px) scale(0.3) rotateY(-20deg);
    filter: blur(3px);
  }
  60%  { filter: blur(0); opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes flyIn3DDeep {
  0%   {
    opacity: 0;
    transform: perspective(1400px) translateZ(-1200px) scale(0.08);
    filter: blur(8px);
  }
  50%  { filter: blur(0); opacity: 1; }
  85%  { transform: perspective(1400px) translateZ(30px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* All reveals use animation-based approach */
.js-ready .reveal[data-flyable]           { opacity: 0; }
.js-ready .reveal-left[data-flyable]      { opacity: 0; }
.js-ready .reveal-right[data-flyable]     { opacity: 0; }
.js-ready .reveal-deep[data-flyable]      { opacity: 0; }
.js-ready .section-head[data-flyable]     { opacity: 0; }
.js-ready .number-card[data-flyable]      { opacity: 0; }
.js-ready .biztype-card[data-flyable]     { opacity: 0; }
.js-ready .process-step[data-flyable]     { opacity: 0; }
.js-ready .compare-col[data-flyable]      { opacity: 0; }
.js-ready .quote-block[data-flyable]      { opacity: 0; }

[data-flyable][data-fly-in]               { animation: flyIn3D      0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-flyable][data-fly-in].reveal-left   { animation: flyIn3DLeft  0.9s  cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-flyable][data-fly-in].reveal-right  { animation: flyIn3DRight 0.9s  cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-flyable][data-fly-in].reveal-deep   { animation: flyIn3DDeep  1.3s  cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-flyable][data-fly-in].quote-block   { animation: flyIn3DDeep  1.3s  cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-flyable][data-fly-in].section-head  { animation: flyIn3DDeep  1.1s  cubic-bezier(0.22, 1, 0.36, 1) both; }


/* ==========================================================================
   SCENE BREAKS — standalone Three.js 3D showcases
   ========================================================================== */
.scene-break {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #000;
}
.scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   BULLETPROOF SCROLL FLY-IN SYSTEM v2
   Simple, no conflicts, works guaranteed
   ========================================================================== */

/* Base: slide up + fade */
.fly {
  opacity: 0 !important;
  transform: translateY(70px) scale(0.92) !important;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}
.fly.flew {
  opacity: 1 !important;
  transform: none !important;
}

/* 3D depth variant — zoom from background */
.fly-3d {
  opacity: 0 !important;
  transform: perspective(900px) translateZ(-380px) scale(0.55) !important;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}
.fly-3d.flew {
  opacity: 1 !important;
  transform: none !important;
}

/* Left sweep */
.fly-l {
  opacity: 0 !important;
  transform: translateX(-90px) scale(0.9) !important;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fly-l.flew { opacity: 1 !important; transform: none !important; }

/* Right sweep */
.fly-r {
  opacity: 0 !important;
  transform: translateX(90px) scale(0.9) !important;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fly-r.flew { opacity: 1 !important; transform: none !important; }

/* Transition delays for siblings */
.fly[data-d="1"], .fly-3d[data-d="1"], .fly-l[data-d="1"], .fly-r[data-d="1"] { transition-delay: 80ms !important; }
.fly[data-d="2"], .fly-3d[data-d="2"], .fly-l[data-d="2"], .fly-r[data-d="2"] { transition-delay: 160ms !important; }
.fly[data-d="3"], .fly-3d[data-d="3"], .fly-l[data-d="3"], .fly-r[data-d="3"] { transition-delay: 240ms !important; }
.fly[data-d="4"], .fly-3d[data-d="4"], .fly-l[data-d="4"], .fly-r[data-d="4"] { transition-delay: 320ms !important; }
.fly[data-d="5"], .fly-3d[data-d="5"], .fly-l[data-d="5"], .fly-r[data-d="5"] { transition-delay: 400ms !important; }
.fly[data-d="6"], .fly-3d[data-d="6"], .fly-l[data-d="6"], .fly-r[data-d="6"] { transition-delay: 480ms !important; }
.fly[data-d="7"], .fly-3d[data-d="7"], .fly-l[data-d="7"], .fly-r[data-d="7"] { transition-delay: 560ms !important; }
.fly[data-d="8"], .fly-3d[data-d="8"], .fly-l[data-d="8"], .fly-r[data-d="8"] { transition-delay: 640ms !important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fly, .fly-3d, .fly-l, .fly-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── Stat pull banner ── */
.stat-pull {
  background: linear-gradient(135deg, rgba(200,162,76,0.07) 0%, rgba(0,0,0,0) 60%),
              rgba(255,255,255,0.018);
  border-top: 1px solid rgba(200,162,76,0.12);
  border-bottom: 1px solid rgba(200,162,76,0.12);
  padding: 50px 0;
  overflow: hidden;
}
.stat-pull-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.sp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 48px;
  text-align: center;
}
.sp-num {
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #F0D070, #C8A24C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sp-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sp-divider {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(200,162,76,0.3), transparent);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .sp-item { padding: 20px 24px; }
  .sp-divider { display: none; }
}


/* ==========================================================================
   ROI SECTION
   ========================================================================== */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.roi-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,162,76,0.15);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.3s, transform 0.3s;
}
.roi-card:hover {
  border-color: rgba(200,162,76,0.4);
  transform: translateY(-4px);
}
.roi-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}
.roi-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.roi-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.roi-math {
  border: 1px solid rgba(200,162,76,0.18);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.roi-math-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
}
.rm-side {
  padding: 36px 36px;
}
.rm-side h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rm-side.without h4 { color: var(--text-muted); }
.rm-side.with h4 { color: var(--gold); }
.rm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.rm-x    { color: rgba(220,60,60,0.7);  font-size: 0.8rem; flex-shrink: 0; padding-top: 2px; }
.rm-check{ color: var(--gold);           font-size: 0.8rem; flex-shrink: 0; padding-top: 2px; }
.rm-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent 5%, rgba(200,162,76,0.25) 30%, rgba(200,162,76,0.25) 70%, transparent 95%);
  margin: 20px 0;
}

/* ==========================================================================
   SETUP TIMELINE
   ========================================================================== */
.timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 24px;
}
.timeline-grid::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(200,162,76,0.1));
  border-radius: 1px;
}
.timeline-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 28px 0 28px 32px;
  position: relative;
}
.timeline-step::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 34px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(200,162,76,0.5);
  border: 2px solid #000;
}
.tl-day {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
  white-space: nowrap;
}
.tl-content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tl-content p {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-math-inner { grid-template-columns: 1fr; }
  .rm-divider { width: 100%; height: 1px; margin: 0; }
  .timeline-step { grid-template-columns: 80px 1fr; gap: 16px; }
}