:root {
      --accent: #D4AF37;
      --accent-light: #F7E17B;
      --accent-dark: #B8860B;
      --accent-glow: rgba(212, 175, 55, 0.15);
      --blue-accent: #38BDF8;
      --blue-glow: rgba(56, 189, 248, 0.12);
      --bg-deep: #08080A;
      --bg-base: #0C0C0F;
      /* One veil over the global cosmos — same everywhere for visual continuity */
      --cosmos-veil: rgba(5, 8, 24, 0.68);
      --cosmos-fade: rgba(4, 8, 26, 0.93);
      --cosmos-section-blur: blur(6px) saturate(1.08);
      --bg-card: #0d1330;
      --bg-card-glossy: linear-gradient(165deg, rgba(18,25,54,0.96) 0%, rgba(9,13,32,0.99) 100%);
      --bg-border: #212a4e;
      --white: #F0EDE8;
      --white-muted: #B0AEA6;
      --white-dim: #8F8D87;
      --success: #34D399;
      --gold-shine: linear-gradient(135deg, #BF953F 0%, #FCF6BA 22%, #B38728 45%, #FBF5B7 67%, #AA771C 100%);
      --gold-btn: linear-gradient(135deg, #D4AF37 0%, #F7E17B 35%, #D4AF37 65%, #B8860B 100%);
      /* Aliases — several rules referenced these without a definition, which
         left e.g. the payment disclaimer link unstyled (2026-07-02 audit). */
      --gold: var(--accent);
      --gold-muted: rgba(212, 175, 55, 0.62);
    }

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

    body {
      font-family: 'DM Sans', -apple-system, sans-serif;
      background: #080c20;
      color: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ===== GLOBAL COSMOS BACKDROP (night sky / galactic) ===== */
    .cosmos-backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background:
        radial-gradient(ellipse 100% 80% at 50% 115%, rgba(120, 80, 30, 0.10) 0%, rgba(60, 40, 20, 0.05) 35%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 15% 20%, rgba(28, 52, 115, 0.60) 0%, transparent 54%),
        radial-gradient(ellipse 70% 55% at 88% 35%, rgba(56, 120, 240, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 45% 35% at 72% 12%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 55% 40% at 30% 75%, rgba(80, 70, 220, 0.12) 0%, transparent 48%),
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(20, 38, 95, 0.72) 0%, transparent 58%),
        linear-gradient(180deg, #04081e 0%, #060c28 22%, #0a1236 55%, #05091e 100%);
    }
    /*
     * Single fixed veil over the entire viewport — one surface, no seams.
     * Per-section backdrop-filter caused visible banding between sections.
     */
    .cosmos-veil-layer {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: var(--cosmos-veil);
      backdrop-filter: var(--cosmos-section-blur);
      -webkit-backdrop-filter: var(--cosmos-section-blur);
    }

    /*
     * Milky Way sits ABOVE the frosted veil so it reads clearly while scrolling
     * (fixed to viewport = “throughout the site”). Screen blend keeps it luminous.
     */
    .cosmos-milkyway-flow {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }
    /* Stars drawn above Milky Way bands = one consistent galactic layer */
    .cosmos-milkyway-flow .cosmos-stars-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      pointer-events: none;
      display: block;
    }
    .cosmw-band {
      position: absolute;
      width: 220%;
      height: 180%;
      left: -60%;
      top: -40%;
      mix-blend-mode: screen;
      opacity: 0.85;
    }
    .cosmw-band--primary {
      background: linear-gradient(
        108deg,
        transparent 0%,
        rgba(212, 175, 55, 0.08) 32%,
        rgba(252, 246, 186, 0.22) 44%,
        rgba(56, 189, 248, 0.16) 50%,
        rgba(252, 246, 186, 0.18) 56%,
        rgba(212, 175, 55, 0.1) 68%,
        transparent 100%
      );
      filter: blur(32px);
      animation: milkyRiver 55s ease-in-out infinite alternate;
    }
    .cosmw-band--secondary {
      background: linear-gradient(
        72deg,
        transparent 0%,
        rgba(56, 189, 248, 0.06) 40%,
        rgba(147, 220, 255, 0.14) 48%,
        rgba(212, 175, 55, 0.1) 52%,
        transparent 100%
      );
      filter: blur(40px);
      opacity: 0.65;
      animation: milkyRiverB 72s ease-in-out infinite alternate;
    }
    .cosmw-band--accent {
      width: 260%;
      height: 40%;
      left: -80%;
      top: 38%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(247, 225, 123, 0.15) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(125, 211, 252, 0.12) 55%,
        transparent 100%
      );
      filter: blur(14px);
      opacity: 0.55;
      mix-blend-mode: screen;
      animation: milkyShimmer 18s ease-in-out infinite;
    }
    @keyframes milkyRiver {
      0% { transform: rotate(-14deg) translateX(-6%) translateY(0); }
      100% { transform: rotate(-11deg) translateX(8%) translateY(3%); }
    }
    @keyframes milkyRiverB {
      0% { transform: rotate(8deg) translateX(4%) translateY(-2%); }
      100% { transform: rotate(11deg) translateX(-10%) translateY(4%); }
    }
    @keyframes milkyShimmer {
      0%, 100% { opacity: 0.35; transform: translateX(-3%); }
      50% { opacity: 0.75; transform: translateX(3%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .cosmw-band--primary,
      .cosmw-band--secondary,
      .cosmw-band--accent { animation: none; }
      /* ADA: Disable ALL animations and transitions for users who prefer reduced motion */
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .speed-line { display: none; }
    }

    /* ===== ADA ACCESSIBILITY ===== */

    /* Skip navigation link — hidden until focused */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      background: #D4AF37;
      color: #08080A;
      padding: 12px 24px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-decoration: none;
      border-radius: 0 0 8px 8px;
      z-index: 100001;
      transition: top 0.2s;
    }
    .skip-link:focus {
      top: 0;
    }

    /* Focus indicators — visible on all interactive elements */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid #D4AF37;
      outline-offset: 3px;
      box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
    }

    h1, h2, h3, h4, h5 { font-family: 'Space Grotesk', sans-serif; }

    /* Metallic gold text effect */
    .gold, .section-title, .cta-card h2, .about-content p strong {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Glossy shine sweep on interactive elements */
    .glossy-sweep {
      position: relative;
      overflow: hidden;
    }
    .glossy-sweep::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
      transition: left 0.6s ease;
      pointer-events: none;
    }
    .glossy-sweep:hover::after {
      left: 120%;
    }

    .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

    /* ===== NAVIGATION ===== */
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 16px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      background: rgba(4, 6, 14, 0.82);
      backdrop-filter: blur(14px) saturate(1.06);
      -webkit-backdrop-filter: blur(14px) saturate(1.06);
      border-bottom: 1px solid rgba(212, 175, 55, 0.12);
      box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 1px 0 rgba(212, 175, 55, 0.06) inset;
    }

    .nav-brand {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-brand-mark {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.15));
      transition: filter 0.3s;
    }

    .nav-brand:hover .nav-brand-mark img {
      filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.1));
    }

    .nav-brand-text {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      background: linear-gradient(135deg, #E8E6E3, #FFFFFF, #E8E6E3);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 1px;
    }

    .nav-brand-text span {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ===== BRAND SLOGAN STYLES ===== */
    .nav-slogan {
      font-size: 10px;
      color: #C9A84C;
      letter-spacing: 0.15em;
      font-weight: 300;
      font-family: 'DM Sans', sans-serif;
      white-space: nowrap;
      margin-top: 2px;
    }
    .hero-slogan {
      color: #C9A84C;
      font-size: 13px;
      letter-spacing: 0.2em;
      font-weight: 300;
      text-transform: uppercase;
      margin-bottom: 12px;
      opacity: 0;
      animation: sloganFadeIn 0.8s ease 0.5s forwards;
    }
    @keyframes sloganFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .founder-signature {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin: 40px auto 30px;
      padding-top: 30px;
      border-top: 1px solid rgba(212, 175, 55, 0.18);
      max-width: 360px;
    }
    .founder-mark {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 26%;
      border: 3px solid rgba(212, 175, 55, 0.85);
      box-shadow: 0 0 0 7px rgba(212, 175, 55, 0.10), 0 14px 36px rgba(0, 0, 0, 0.5);
    }
    .founder-name-block { text-align: center; }
    .founder-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: var(--white);
      line-height: 1.1;
    }
    .founder-title {
      font-size: 0.78rem;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--white-dim);
      margin-top: 5px;
    }
    @media (max-width: 560px) {
      .founder-mark { width: 128px; height: 128px; border-width: 3px; box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.10), 0 10px 26px rgba(0, 0, 0, 0.5); }
      .founder-name { font-size: 1.25rem; }
    }

    .about-slogan-wrap {
      margin: 40px auto;
      text-align: center;
      max-width: 500px;
    }
    .about-slogan-line {
      height: 1px;
      background: rgba(212, 175, 55, 0.3);
      margin: 0 auto;
      max-width: 200px;
    }
    .about-slogan {
      color: #C9A84C;
      font-size: 18px;
      font-weight: 300;
      font-style: italic;
      font-family: 'Space Grotesk', sans-serif;
      padding: 20px 0;
    }
    .pricing-slogan {
      color: #C9A84C;
      font-size: 12px;
      letter-spacing: 0.15em;
      font-weight: 300;
      text-align: center;
      margin-top: 6px;
    }
    .footer-slogan {
      color: rgba(255, 255, 255, 0.6);
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 300;
      text-align: center;
      margin-bottom: 6px;
    }
    .footer-subtagline {
      color: rgba(255, 255, 255, 0.45);
      font-size: 11px;
      letter-spacing: 0.08em;
      font-weight: 400;
      text-align: center;
      margin-bottom: 8px;
      font-style: italic;
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      color: var(--white-muted);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      transition: color 0.3s;
    }

    .nav-links a:hover { color: var(--accent); }

    .nav-cta {
      background: var(--gold-btn) !important;
      color: var(--bg-deep) !important;
      padding: 10px 22px !important;
      border-radius: 4px;
      font-weight: 700 !important;
      transition: all 0.3s !important;
      box-shadow: 0 2px 12px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }

    .nav-cta:hover {
      background: linear-gradient(135deg, #F7E17B 0%, #D4AF37 35%, #F7E17B 65%, #D4AF37 100%) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 0 30px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    }

    .nav-login {
      border: 1px solid rgba(212, 175, 55, 0.3) !important;
      padding: 9px 20px !important;
      border-radius: 4px;
      font-weight: 500 !important;
      font-size: 0.75rem !important;
      color: var(--gold) !important;
      transition: all 0.3s !important;
      letter-spacing: 1.5px;
    }

    .nav-login:hover {
      border-color: rgba(212, 175, 55, 0.6) !important;
      background: rgba(212, 175, 55, 0.08) !important;
      color: var(--accent) !important;
    }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }

    .mobile-menu-btn span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--accent);
      transition: all 0.3s;
    }

    /* ===== HERO ===== */
    .hero {
      /* Fold math (2026-07-02 audit): hero + fixed nav = exactly one viewport,
         with a floor for short laptops. The compact static composition keeps
         the FULL headline + CTAs inside the first paint; the explainer video
         peeking at the fold is the scroll affordance. */
      min-height: max(calc(100svh - 64px), 640px);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 96px 24px 64px;
      position: relative;
      z-index: 3;
      overflow: hidden;
    }

    /* ===== HERO VIDEO ===== */
    .hero-bg-picture {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      pointer-events: none;
    }
    .hero-bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(8, 12, 32, 0.72) 0%, rgba(8, 12, 32, 0.50) 40%, rgba(8, 12, 32, 0.70) 80%, rgba(6, 10, 28, 0.96) 100%),
        radial-gradient(ellipse 120% 90% at 50% 42%, transparent 30%, rgba(8, 12, 32, 0.72) 68%, rgba(6, 10, 28, 0.92) 100%);
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: transparent;
      opacity: 1;
      transform: scale(1.1);
      transition: transform 0.1s linear;
      z-index: 2;
    }

    .hero-gradient-anim {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 40%, rgba(212, 175, 55, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 60%, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(184, 134, 11, 0.05) 0%, transparent 45%);
      animation: gradientShift 12s ease-in-out infinite alternate;
      pointer-events: none;
    }

    @keyframes gradientShift {
      0% {
        background:
          radial-gradient(ellipse at 30% 40%, rgba(212, 175, 55, 0.09) 0%, transparent 55%),
          radial-gradient(ellipse at 70% 60%, rgba(56, 189, 248, 0.05) 0%, transparent 55%),
          radial-gradient(ellipse at 80% 80%, rgba(184, 134, 11, 0.05) 0%, transparent 45%);
      }
      50% {
        background:
          radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.13) 0%, transparent 55%),
          radial-gradient(ellipse at 30% 70%, rgba(56, 189, 248, 0.07) 0%, transparent 50%),
          radial-gradient(ellipse at 60% 60%, rgba(184, 134, 11, 0.06) 0%, transparent 45%);
      }
      100% {
        background:
          radial-gradient(ellipse at 70% 50%, rgba(212, 175, 55, 0.09) 0%, transparent 55%),
          radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
          radial-gradient(ellipse at 30% 60%, rgba(184, 134, 11, 0.05) 0%, transparent 45%);
      }
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to top, var(--cosmos-fade), transparent);
      pointer-events: none;
      z-index: 1;
    }

    /* Floating grid lines */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(212, 175, 55, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.025) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridFloat 28s linear infinite;
      pointer-events: none;
      mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, transparent 70%);
    }

    @keyframes gridFloat {
      0% { transform: translate(0, 0); }
      100% { transform: translate(60px, 60px); }
    }

    .hero-content {
      position: relative;
      max-width: 860px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      z-index: 3;
    }
    /* Pure-CSS hero entrance — no JS, content is at full opacity when the
       animation ends (or instantly under reduced-motion / no support). */
    @media (prefers-reduced-motion: no-preference) {
      .hero-content { animation: vxHeroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
      @keyframes vxHeroIn {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: none; }
      }
    }
    /* Compact crest — the shield opens the stack instead of splitting the
       headline in half at 500px wide. */
    .hero-crest {
      display: block;
      width: 118px;
      height: auto;
      margin: 0 auto 20px;
      filter: drop-shadow(0 10px 34px rgba(212, 175, 55, 0.35));
    }
    @media (max-width: 640px) {
      .hero-crest { width: 88px; margin-bottom: 16px; }
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(212, 175, 55, 0.4);
      background: rgba(212, 175, 55, 0.06);
      padding: 10px 22px;
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 2.6px;
      text-transform: uppercase;
      margin-bottom: 24px;
      background-image: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08), inset 0 0 20px rgba(212, 175, 55, 0.03);
    }

    .hero-eyebrow .dot {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.5); }
    }

    .hero-h1-top, .hero-h2-bottom {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(2.7rem, 5.6vw, 4.4rem);
      font-weight: 900;
      line-height: 1.06;
      margin: 0;
      letter-spacing: -0.02em;
    }
    .hero-h2-bottom {
      font-size: clamp(2.6rem, 5.6vw, 4.2rem);
      margin-top: 0;
      margin-bottom: 0;
    }

    .hero-h1-top .gold, .hero-h2-bottom .gold {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-h1-top .char, .hero-h2-bottom .gold .char {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-h1-top .line, .hero-h2-bottom .line {
      display: block;
      perspective: 600px;
    }

    .hero-subheadline {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.25rem, 2.2vw, 1.7rem);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-align: center;
      margin: 14px auto 0;
      max-width: 720px;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      /* Visible by default — animation still runs if .reveal fires, but the
         copy is never invisible if JS is blocked or delayed. */
      opacity: 1;
      transform: none;
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .hero-sub {
      font-size: 1.18rem;
      color: var(--white);
      max-width: 600px;
      margin: 10px auto 16px;
      font-weight: 400;
      line-height: 1.6;
      opacity: 1;
      transform: none;
    }
    .hero-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      opacity: 1;
      transform: none;
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    .hero-price-cta {
      display: inline-block; margin-top: 18px;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600;
      color: #F0EDE8; text-decoration: none; letter-spacing: 0.3px;
      border: 1px solid rgba(212,175,55,0.5); border-radius: 999px;
      padding: 10px 22px; background: rgba(212,175,55,0.08);
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
    }
    .hero-price-cta:hover { background: rgba(212,175,55,0.16); border-color: #D4AF37; transform: translateY(-1px); }
    .hero-price-cta strong { color: #D4AF37; font-weight: 800; }

    .hero-trust {
      margin-top: 22px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.6;
      max-width: 740px;
      margin-left: auto;
      margin-right: auto;
      opacity: 1;
      transform: none;
      transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;
    }
    @media (max-width: 640px) {
      .hero-trust { font-size: 0.66rem; letter-spacing: 0.8px; padding: 0 8px; }
    }

    .btn-primary {
      background: var(--gold-btn);
      color: var(--bg-deep);
      padding: 16px 36px;
      border: none;
      border-radius: 4px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      display: inline-block;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s;
    }

    .btn-primary:hover::after { transform: translateX(100%); }

    .btn-primary:hover {
      background: linear-gradient(135deg, #F7E17B 0%, #D4AF37 35%, #F7E17B 65%, #D4AF37 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 35px rgba(212, 175, 55, 0.45), 0 0 40px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-secondary {
      background: transparent;
      color: var(--white);
      padding: 16px 36px;
      border: 1px solid rgba(212, 175, 55, 0.3);
      border-radius: 4px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      display: inline-block;
      box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.03);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.12), inset 0 0 20px rgba(212, 175, 55, 0.05);
    }

    /* ===== SECTION COMMON ===== */
    .section-label::before {
      content: attr(data-num) "\2009/\2009";
      letter-spacing: 2px;
    }
    .section-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 14px;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-divider {
      width: 50px;
      height: 2px;
      background: var(--gold-btn);
      margin: 0 auto 20px;
      box-shadow: 0 0 12px rgba(212, 175, 55, 0.3), 0 0 4px rgba(56, 189, 248, 0.1);
      border-radius: 2px;
    }

    .section-title {
      font-size: clamp(1.8rem, 3.8vw, 2.6rem);
      font-weight: 800;
      text-align: center;
      margin-bottom: 16px;
      line-height: 1.15;
      letter-spacing: -0.3px;
    }

    .section-subtitle {
      text-align: center;
      color: var(--white-muted);
      font-size: 1.02rem;
      max-width: 560px;
      margin: 0 auto 56px;
      font-weight: 300;
    }

    /* ===== IMAGE DIVIDER SECTIONS ===== */
    .image-divider {
      width: 100%;
      height: 360px;
      position: relative;
      z-index: 3;
      overflow: hidden;
    }

    .image-divider img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .image-divider .parallax-img {
      position: absolute;
      inset: -60px 0;
      width: 100%;
      height: calc(100% + 120px);
      object-fit: cover;
    }

    .image-divider::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          var(--cosmos-fade) 0%,
          rgba(5, 7, 14, 0.45) 20%,
          rgba(5, 7, 14, 0.45) 80%,
          var(--cosmos-fade) 100%
        ),
        linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(56, 189, 248, 0.04), transparent 65%);
      pointer-events: none;
    }

    .image-divider-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
      text-align: center;
    }

    .image-divider-text h3 {
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--white);
      text-shadow: 0 2px 20px rgba(0,0,0,0.6);
    }

    .image-divider-text h3 span {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ===== PROBLEM / HOOK ===== */
    .problem {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .problem-text {
      max-width: 62ch;
      margin: 0 auto;
      text-align: left;
    }

    .problem-text .big-quote {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.3rem, 3vw, 1.8rem);
      font-weight: 700;
      line-height: 1.5;
      color: var(--white);
      margin-bottom: 24px;
    }

    .problem-text .big-quote .gold {
      font-style: normal;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .problem-text p {
      color: var(--white-dim);
      font-size: 1.05rem;
      line-height: 1.8;
    }
    .problem-text p strong { color: var(--white); font-weight: 700; }
    .problem-text .problem-pivot {
      margin-top: 28px;
      color: var(--white);
      font-size: 1.12rem;
      font-weight: 600;
      line-height: 1.6;
      text-align: center;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ── AI Lead System section ──
       position+z-index required so the section claims its own stacking context
       above .cosmos-veil-layer (fixed inset:0 with backdrop-filter). Without
       these, the section's content sat BEHIND the frosted veil on mobile and
       was visibly blurred. Matches the pattern used by .problem, .portfolio,
       .services. */
    .ai-system { padding: 72px 0; border-bottom: 1px solid var(--bg-border); position: relative; z-index: 3; }
    .ai-system-head { max-width: 760px; margin: 0 auto 48px; text-align: center; padding: 0 24px; }
    .ai-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
    @media (max-width: 1024px) { .ai-steps { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .ai-steps { grid-template-columns: 1fr; } }
    .ai-step { padding: 30px 26px; background: var(--bg-card-glossy); border: 1px solid var(--bg-border); border-radius: 18px; transition: transform 0.25s, border-color 0.25s; }
    .ai-step:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.35); }
    .ai-step-num { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--accent); margin-bottom: 14px; letter-spacing: 1px; }
    .ai-step h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; }
    .ai-step p { color: var(--white-muted); font-size: 0.92rem; line-height: 1.6; }
    .ai-system-cta { text-align: center; margin-top: 44px; padding: 0 24px; }
    .ai-system-note { font-size: 0.85rem; color: var(--white-dim); margin-top: 14px; }
    /* ── Media placeholders (clearly marked for future drop-in) ── */
    .media-placeholder {
      max-width: 880px; margin: 48px auto 0; padding: 0 24px;
      aspect-ratio: 16/9;
      position: relative;
    }
    .media-placeholder-inner {
      position: absolute; inset: 0 24px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      border: 2px dashed rgba(212,175,55,0.32);
      border-radius: 18px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      gap: 10px; text-align: center; padding: 24px;
    }
    .media-placeholder-icon {
      font-size: 2rem; color: var(--accent);
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.3);
      display: flex; align-items: center; justify-content: center;
    }
    .media-placeholder-label {
      font-family: 'Space Grotesk', sans-serif; font-weight: 700;
      color: var(--white); font-size: 0.92rem; letter-spacing: 0.5px;
    }
    .media-placeholder-sub {
      color: var(--white-muted); font-size: 0.82rem;
    }
    .media-placeholder-video {
      position: absolute; inset: 0 24px; width: calc(100% - 48px); height: 100%;
      object-fit: cover; border-radius: 18px;
    }
    @media (max-width: 560px) {
      .media-placeholder { padding: 0 16px; }
      .media-placeholder-inner { inset: 0 16px; }
    }
    /* ── Image Placeholders (premium gold-on-dark, ready for drop-in)
       Mirrors .media-placeholder aesthetic. Each variant reserves its
       aspect-ratio so the page doesn't shift when a real image lands.
       Shared inner: .placeholder-icon / .placeholder-label / .placeholder-sub. */
    .image-bar-row {
      max-width: 1140px; margin: 0 auto;
      padding: 56px 24px 0;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
      position: relative; z-index: 3;
    }
    .image-bar-slot {
      aspect-ratio: 4 / 5;
      position: relative;
      border: 2px dashed rgba(212,175,55,0.32);
      border-radius: 18px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 20px; text-align: center;
      overflow: hidden;
    }
    .image-bar-slot > img,
    .image-bar-slot > video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }
    .image-placeholder-wide {
      max-width: 1080px; margin: 44px auto;
      aspect-ratio: 21 / 9;
      position: relative;
      border: 2px dashed rgba(212,175,55,0.32);
      border-radius: 18px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 20px; text-align: center;
      overflow: hidden;
    }
    .image-placeholder-wide > img,
    .image-placeholder-wide > video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }
    .image-placeholder-wide-16-9 {
      max-width: 1080px; margin: 44px auto;
      aspect-ratio: 16 / 9;
      position: relative;
      border: 2px dashed rgba(212,175,55,0.32);
      border-radius: 18px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 20px; text-align: center;
      overflow: hidden;
    }
    /* Thin cinematic bar — 32:9. Same look + filled-state polish as the
       16:9/21:9 banners, just shorter so it reads as a thin strip not a panel. */
    .image-placeholder-thin-bar {
      max-width: 1080px; margin: 32px auto;
      aspect-ratio: 32 / 9;
      position: relative;
      border: 2px dashed rgba(212,175,55,0.32);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      overflow: hidden;
    }
    .image-placeholder-thin-bar > img,
    .image-placeholder-thin-bar > video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }
    /* "These Are The Demos" banner — real HTML text (was a baked image whose
       title got clipped at the top edge). Never crops, responsive, lighter. */
    .demos-text-banner {
      max-width: 1080px; margin: 32px auto; padding: 40px 24px 36px;
      border-radius: 14px; text-align: center; position: relative; overflow: hidden;
      background:
        radial-gradient(ellipse 70% 130% at 50% -10%, rgba(46,107,255,0.20) 0%, transparent 62%),
        linear-gradient(180deg, #0b1130 0%, #070a1e 100%);
      border: 1px solid rgba(212,175,55,0.42);
      box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 2px 10px rgba(212,175,55,0.08);
    }
    .demos-text-banner::before, .demos-text-banner::after {
      content: ""; position: absolute; bottom: -40%; width: 60%; height: 160%;
      background: radial-gradient(ellipse at center, rgba(212,175,55,0.16) 0%, transparent 60%);
      pointer-events: none;
    }
    .demos-text-banner::before { left: -10%; transform: rotate(-12deg); }
    .demos-text-banner::after { right: -10%; transform: rotate(12deg); }
    .demos-text-banner-title {
      position: relative; z-index: 1;
      font-family: 'Space Grotesk', sans-serif; font-weight: 900;
      font-size: clamp(1.5rem, 5.2vw, 3rem); letter-spacing: 2px; line-height: 1.05;
      color: #F2EFE9; text-shadow: 0 2px 34px rgba(46,107,255,0.42);
    }
    .demos-text-banner-rule {
      position: relative; z-index: 1;
      width: min(440px, 72%); height: 2px; margin: 16px auto;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,0.95), transparent);
    }
    .demos-text-banner-sub {
      position: relative; z-index: 1;
      font-family: 'Space Grotesk', sans-serif; font-weight: 800;
      font-size: clamp(0.95rem, 3.3vw, 1.7rem); letter-spacing: 1px;
      color: #d8ddff; text-shadow: 0 0 26px rgba(122,59,255,0.50);
    }
    .image-placeholder-wide-16-9 > img,
    .image-placeholder-wide-16-9 > video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: inherit;
    }
    .placeholder-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.3);
      color: var(--accent); font-size: 1.6rem;
      display: flex; align-items: center; justify-content: center;
    }
    .placeholder-label {
      font-family: 'Space Grotesk', sans-serif; font-weight: 700;
      color: var(--white); font-size: 0.88rem; letter-spacing: 0.4px;
    }
    .placeholder-sub {
      font-family: 'Space Grotesk', sans-serif; font-weight: 500;
      color: var(--white-dim); font-size: 0.74rem;
      letter-spacing: 0.5px; font-variant-numeric: tabular-nums;
    }
    /* Process section: centered single column with the CTA. */
    .process-center { max-width: 720px; margin: 0 auto; text-align: center; }
    /* ── Live captions over the story clips (2026-07-02 audit) ──
       The Remotion clips carry baked-in thumbnail-style text; a navy scrim +
       live Space Grotesk caption replaces it visually: brand type, numbered
       gold step markers, and it reads as one system with the section cards. */
    .story-cap {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      display: flex; align-items: baseline; gap: 10px;
      padding: 64px 18px 16px;
      background: linear-gradient(180deg, transparent 0%, rgba(6, 9, 26, 0.72) 42%, rgba(6, 9, 26, 0.95) 100%);
      border-radius: 0 0 inherit inherit;
      text-align: left;
    }
    .story-cap-num {
      font-family: 'Space Grotesk', monospace, sans-serif;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px;
      color: var(--accent);
    }
    .story-cap-num::after {
      content: ""; display: inline-block; width: 18px; height: 2px;
      background: linear-gradient(90deg, var(--accent), transparent);
      margin-left: 8px; vertical-align: 3px;
    }
    .story-cap-label {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(0.95rem, 1.4vw, 1.12rem); font-weight: 700;
      letter-spacing: 0.2px; color: var(--white); line-height: 1.25;
    }
    /* Mobile: horizontal scroll-snap strip instead of a tall stack — cuts the
       page length and adds the one lateral gesture on the page. */
    @media (max-width: 700px) {
      .image-bar-row {
        display: flex; grid-template-columns: none;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding: 40px 20px 8px; gap: 14px;
      }
      .image-bar-row::-webkit-scrollbar { display: none; }
      .image-bar-slot {
        aspect-ratio: 4 / 5; flex: 0 0 76%; scroll-snap-align: center;
      }
    }
    @media (max-width: 560px) {
      .image-placeholder-wide,
      .image-placeholder-wide-16-9 { margin-left: 16px; margin-right: 16px; padding: 14px; }
      .placeholder-label { font-size: 0.82rem; }
      .placeholder-sub { font-size: 0.7rem; }
    }
    /* ── Filled-state polish ── When a real <img> sits inside any placeholder,
       trade the dashed-gold draft border for a thin gold hairline + soft drop
       shadow (Apple-style). The bar slots and wide banners share this rule. */
    .image-bar-slot:has(img),
    .image-bar-slot:has(video),
    .image-placeholder-wide:has(img),
    .image-placeholder-wide:has(video),
    .image-placeholder-wide-16-9:has(img),
    .image-placeholder-wide-16-9:has(video),
    .image-placeholder-thin-bar:has(img),
    .image-placeholder-thin-bar:has(video) {
      border: 1px solid rgba(212,175,55,0.42);
      background: #06070a;
      box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 2px 10px rgba(212,175,55,0.08);
      padding: 0;
      isolation: isolate;
    }
    /* ── Navy/purple tint over filled media ──
       The clips Carlos made ("customers reach out", "AI answers", "book while you
       work", "your front desk never sleeps") are gold-on-pure-black. A screen-blend
       navy→purple overlay lifts only the blacks toward deep navy/purple so they read
       cohesive with the site; the gold + white content stays vivid. */
    .image-bar-slot:has(img)::before, .image-bar-slot:has(video)::before,
    .image-placeholder-wide:has(img)::before, .image-placeholder-wide:has(video)::before,
    .image-placeholder-wide-16-9:has(img)::before, .image-placeholder-wide-16-9:has(video)::before,
    .image-placeholder-thin-bar:has(img)::before, .image-placeholder-thin-bar:has(video)::before {
      content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(150deg, #112256 0%, #1a1448 52%, #2c1660 100%);
      mix-blend-mode: screen;
      opacity: 0.62;
    }
    .image-bar-slot:has(img) > img, .image-bar-slot:has(video) > video,
    .image-placeholder-wide:has(img) > img, .image-placeholder-wide:has(video) > video,
    .image-placeholder-wide-16-9:has(img) > img, .image-placeholder-wide-16-9:has(video) > video,
    .image-placeholder-thin-bar:has(img) > img, .image-placeholder-thin-bar:has(video) > video {
      z-index: 1;
    }
    /* ── 3-tier pricing ── */
    .tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; align-items: stretch; }
    @media (max-width: 900px) { .tiers-grid { grid-template-columns: 1fr; max-width: 460px; } }
    .tier-card { position: relative; display: flex; flex-direction: column; padding: 36px 28px 30px; background: var(--bg-card-glossy); border: 1px solid var(--bg-border); border-radius: 18px; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
    .tier-card:hover { transform: translateY(-5px); border-color: rgba(212,175,55,0.35); }
    .tier-featured { border-color: rgba(212,175,55,0.55); background: linear-gradient(165deg, rgba(212,175,55,0.09) 0%, rgba(17,17,20,0.98) 100%); box-shadow: 0 0 40px rgba(212,175,55,0.1); }
    .tier-elite { border-color: rgba(212,175,55,0.4); background: linear-gradient(165deg, rgba(40,30,10,0.5) 0%, rgba(12,12,15,0.99) 100%); }
    .tier-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: 'Space Grotesk', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #0C0C0F; background: var(--gold-btn); padding: 5px 16px; border-radius: 99px; white-space: nowrap; }
    .tier-flag-elite { background: linear-gradient(135deg, #F7E17B, #D4AF37); }
    .tier-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--white); margin-bottom: 4px; }
    .tier-tagline { font-size: 0.86rem; color: var(--accent); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 20px; }
    .tier-price { font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 900; background: var(--gold-shine); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
    .tier-price-sub { font-size: 0.8rem; font-weight: 600; color: var(--white-dim); -webkit-text-fill-color: var(--white-dim); margin-left: 6px; letter-spacing: 0.5px; }
    .tier-monthly { font-size: 0.98rem; color: var(--white-muted); margin: 6px 0 22px; font-weight: 500; }
    /* Hairline between the price block and the features — pricing reads as a
       machined spec sheet, not a flyer (2026-07-02 audit). */
    .tier-features { list-style: none; padding: 18px 0 0; margin: 14px 0 26px; flex: 1; border-top: 1px solid rgba(212, 175, 55, 0.14); }
    .tier-features li { font-size: 0.9rem; color: var(--white-muted); line-height: 1.5; padding: 8px 0 8px 26px; position: relative; }
    .tier-features li::before {
      content: ""; position: absolute; left: 0; top: 11px; width: 15px; height: 15px;
      background-color: var(--accent);
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M2.5 8.5l3.5 3.5 7-8" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
              mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M2.5 8.5l3.5 3.5 7-8" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    }
    .tier-features li strong { color: var(--white); font-weight: 600; }
    .tier-cta { display: block; text-align: center; padding: 13px 20px; background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.38); border-radius: 11px; color: var(--accent-light); font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; transition: background 0.2s, color 0.2s; min-height: 46px; line-height: 20px; }
    .tier-cta:hover, .tier-cta-primary { background: var(--gold-btn); color: #0C0C0F; border-color: transparent; }
    /* Elite out-ranks Growth visually: gold-dominant gradient border crown with
       a whisper of purple (2026-07-02 audit). */
    .tier-elite {
      border: 1px solid transparent;
      background:
        var(--bg-card-glossy) padding-box,
        linear-gradient(165deg, rgba(212,175,55,0.85) 0%, rgba(212,175,55,0.25) 40%, rgba(122,59,255,0.28) 78%, rgba(212,175,55,0.5) 100%) border-box;
      box-shadow: 0 0 34px rgba(212, 175, 55, 0.10), 0 18px 50px rgba(0,0,0,0.5);
    }
    /* Add-on: solid hairline + offset outline (the dashed "coupon" border read
       flea-market on a $200/mo product). */
    .tier-addon { max-width: 1100px; margin: 26px auto 0; background: var(--bg-card-glossy); border: 1px solid rgba(212,175,55,0.34); outline: 1px solid rgba(212,175,55,0.10); outline-offset: 4px; border-radius: 18px; padding: 26px 30px; }
    /* Quiet payment-methods line below the plans — the trust marks whisper. */
    .pay-methods-line { max-width: 760px; margin: 34px auto 0; text-align: center; line-height: 1.9; }
    .pay-methods-brands { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.58); }
    .pay-methods-note { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.42); letter-spacing: 0.4px; }
    .pay-methods-note a { color: var(--gold-muted); text-decoration: none; }
    .pay-methods-note a:hover { color: var(--accent); }
    .tier-addon-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .tier-addon-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
    .tier-addon-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.25); padding: 3px 9px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }
    .tier-addon-desc { font-size: 0.9rem; color: var(--white-muted); line-height: 1.55; max-width: 560px; }
    .tier-addon-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
    .tier-addon-price { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 900; background: var(--gold-shine); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    @media (max-width: 600px) { .tier-addon-inner { flex-direction: column; align-items: flex-start; } .tier-addon-right { width: 100%; justify-content: space-between; } }

    /* ===== SERVICES ===== */
    .services {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      max-width: 1080px; margin: 0 auto;
    }

    .service-card {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.1);
      border-radius: 14px;
      padding: 40px 32px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 30px rgba(212, 175, 55, 0.02);
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gold-btn);
      opacity: 0;
      transition: opacity 0.4s;
      box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    }

    .service-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
      transition: left 0.7s ease;
      pointer-events: none;
    }

    .service-card:hover {
      border-color: rgba(212, 175, 55, 0.3);
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(212, 175, 55, 0.08), 0 0 15px rgba(56, 189, 248, 0.03), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .service-card:hover::before { opacity: 1; }
    .service-card:hover::after { left: 120%; }

    .service-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), rgba(184, 134, 11, 0.06));
      border: 1px solid rgba(212, 175, 55, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      font-size: 1.4rem;
      color: var(--accent);
      transition: all 0.4s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .service-icon svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.18));
      transition: transform 0.4s, filter 0.4s;
    }
    .service-card:hover .service-icon svg {
      transform: scale(1.05);
      filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.32));
    }

    .service-card:hover .service-icon {
      background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(184, 134, 11, 0.12));
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .service-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .service-card p {
      color: var(--white-dim);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    .service-tag {
      display: inline-block;
      margin-top: 16px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ===== PROCESS ===== */
    .process {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }
    .process-cta { text-align: center; margin-top: 48px; }
    /* 3-step timeline */
    .process-steps {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
      max-width: 1080px; margin: 52px auto 0;
    }
    .process-step {
      position: relative; padding: 32px 28px 28px;
      background: var(--bg-card-glossy); border: 1px solid var(--bg-border);
      border-radius: 18px; transition: transform 0.25s, border-color 0.25s;
    }
    .process-step:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.35); }
    .process-step-rail { display: flex; align-items: center; margin-bottom: 18px; }
    .process-step-num {
      width: 44px; height: 44px; flex: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.25rem;
      color: #0a0a0a; background: linear-gradient(135deg, #BF953F 0%, #F0D060 50%, #BF953F 100%);
      box-shadow: 0 4px 14px rgba(212,175,55,0.25);
    }
    /* connector line between the numbered nodes (desktop only) */
    .process-step:not(:last-child) .process-step-rail::after {
      content: ''; flex: 1; height: 1px; margin-left: 14px;
      background: linear-gradient(90deg, rgba(212,175,55,0.5), rgba(212,175,55,0.05));
    }
    .process-step h3 {
      font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700;
      color: var(--white); margin-bottom: 10px; line-height: 1.3;
    }
    .process-step p { color: var(--white-muted); font-size: 0.95rem; line-height: 1.65; }
    .process-step-meta {
      display: inline-block; margin-top: 16px;
      font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.72rem;
      letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
    }
    @media (max-width: 860px) {
      .process-steps { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
      .process-step:not(:last-child) .process-step-rail::after { display: none; }
    }
    /* ===== PORTFOLIO ===== */
    .portfolio {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      max-width: 1160px;
      margin: 0 auto;
    }
    @media (max-width: 920px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

    .portfolio-followup {
      max-width: 1080px;
      margin: 28px auto 0;
      text-align: center;
      color: var(--white-dim);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .portfolio-followup a {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px dashed rgba(212,175,55,0.45);
      padding-bottom: 1px;
      font-weight: 600;
    }

    .portfolio-followup a:hover {
      color: var(--accent-light);
      border-bottom-color: rgba(212,175,55,0.85);
    }

    .portfolio-card {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.08);
      border-radius: 18px;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }

    .portfolio-card:hover {
      border-color: rgba(212, 175, 55, 0.35);
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(212, 175, 55, 0.1), 0 0 15px rgba(56, 189, 248, 0.04), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .portfolio-card-img {
      aspect-ratio: 16 / 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 700px) {
      .portfolio-card-img { aspect-ratio: 4 / 3; }
    }

    .portfolio-card-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .portfolio-card:hover .portfolio-card-img img {
      transform: scale(1.08);
    }

    .portfolio-card-img .mock-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .portfolio-card-img .mock-logo {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: 4px;
      margin-bottom: 6px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }

    .portfolio-card-img .mock-tagline {
      color: var(--white-muted);
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }

    .portfolio-card-body {
      padding: 24px;
    }

    .client-badge {
      display: inline-block;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(184, 134, 11, 0.06));
      border: 1px solid rgba(212, 175, 55, 0.2);
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 12px;
      background-image: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .portfolio-card-body h3 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .portfolio-card-body p {
      color: var(--white-dim);
      font-size: 0.85rem;
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .portfolio-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .portfolio-tags span {
      background: rgba(8, 8, 10, 0.8);
      border: 1px solid rgba(212, 175, 55, 0.1);
      color: var(--white-muted);
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 0.68rem;
      font-weight: 500;
    }

    /* ===== SHOWCASE IMAGE STRIP ===== */
    .showcase-strip {
      padding: 80px 24px;
      background: transparent;
      overflow: hidden;
      position: relative;
      z-index: 3;
    }

    .showcase-row {
      display: flex;
      gap: 20px;
      animation: scrollLeft 30s linear infinite;
    }

    .showcase-row img {
      width: 320px;
      height: 200px;
      object-fit: cover;
      border-radius: 12px;
      flex-shrink: 0;
      filter: brightness(0.6) saturate(0.7);
      transition: all 0.4s;
      border: 1px solid rgba(212, 175, 55, 0.06);
    }

    .showcase-row img:hover {
      filter: brightness(0.9) saturate(1);
      transform: scale(1.03);
      border-color: rgba(212, 175, 55, 0.2);
      box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 15px rgba(212, 175, 55, 0.08);
    }

    @keyframes scrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ===== ABOUT ===== */
    .about {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      overflow: hidden;
      z-index: 3;
    }

    .about-content {
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
    }

    .about-content p {
      color: var(--white-muted);
      font-size: 1.05rem;
      line-height: 1.8;
      margin-bottom: 20px;
      font-weight: 300;
    }

    .about-content p strong {
      color: var(--white);
      font-weight: 600;
    }

    .about-values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 48px;
    }

    .about-value {
      text-align: center;
    }

    .about-value .val-number {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      margin-bottom: 4px;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.2));
    }

    .about-value .val-label {
      font-size: 0.78rem;
      color: var(--white-dim);
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .about-value .val-sublabel {
      font-size: 0.72rem;
      color: var(--white-dim);
      opacity: 0.7;
      letter-spacing: 0.3px;
      margin-top: 6px;
      line-height: 1.4;
    }

    .about-value .val-number .val-unit {
      font-size: 0.6em;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-left: 2px;
    }

    .about-value .val-text {
      font-size: 1.6rem;
      letter-spacing: -0.5px;
    }

    /* ===== FAQ ===== */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.08);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.3s;
    }

    .faq-item:hover {
      border-color: rgba(212, 175, 55, 0.2);
    }

    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--white);
    }

    .faq-icon {
      font-size: 1.3rem;
      color: var(--accent);
      transition: transform 0.3s;
      flex-shrink: 0;
      margin-left: 16px;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s;
      padding: 0 24px;
    }

    .faq-item.open .faq-answer {
      max-height: 300px;
      padding: 0 24px 20px;
    }

    .faq-answer p {
      font-size: 0.9rem;
      color: var(--white-muted);
      line-height: 1.7;
    }

    /* ===== CTA / CONTACT ===== */
    .cta-section {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.07) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 60%, rgba(56, 189, 248, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .cta-card {
      position: relative;
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 20px;
      padding: 64px 48px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, #D4AF37 0%, transparent 35%, transparent 65%, #38BDF8 90%, #B8860B 100%);
      border-radius: 21px;
      z-index: -1;
      opacity: 0.25;
    }

    .cta-card h2 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 800;
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .cta-card p {
      color: var(--white-muted);
      font-size: 1rem;
      margin-bottom: 36px;
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-card .btn-primary {
      font-size: 0.95rem;
      padding: 18px 44px;
    }

    .cta-contact-methods {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-top: 36px;
      flex-wrap: wrap;
    }

    .cta-contact-method {
      color: var(--white-dim);
      font-size: 0.85rem;
      text-decoration: none;
      transition: color 0.3s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cta-contact-method:hover { color: var(--accent); }

    /* ===== FOOTER ===== */
    .footer-brand {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 900;
      font-size: 0.9rem;
      letter-spacing: 3px;
      margin-bottom: 14px;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Closing CTA band + three-zone footer (2026-07-02 audit) ── */
    .close-band {
      position: relative; z-index: 3; text-align: center;
      padding: clamp(64px, 9vw, 110px) 24px;
      background: radial-gradient(70% 120% at 50% 0%, rgba(212, 175, 55, 0.07), transparent 60%);
    }
    .close-band::before {
      content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
    }
    .close-band-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 900;
      letter-spacing: -0.02em; line-height: 1.1; color: var(--white);
      margin-bottom: 14px;
    }
    .close-band-sub {
      font-size: 1.02rem; color: var(--white-muted); max-width: 520px;
      margin: 0 auto 30px; line-height: 1.6;
    }
    /* Metallic gold text — static 3-stop foil, no animation (GPU rule). */
    .gold-metal {
      background: linear-gradient(180deg, #8a6d1f 0%, #D4AF37 38%, #f6e7a9 62%, #B8860B 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    footer {
      padding: 48px 24px 30px;
      background: transparent;
      border-top: 0;
      position: relative;
      text-align: center;
      z-index: 3;
    }
    footer::before {
      content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
    }
    .footer-contact {
      display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
      margin: 18px 0 10px;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.98rem; font-weight: 600;
    }
    .footer-contact a { color: var(--accent); text-decoration: none; letter-spacing: 0.4px; padding: 6px 0; }
    .footer-contact a:hover { color: var(--accent-light); }
    .footer-sep { color: rgba(212, 175, 55, 0.4); }
    .footer-social { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; }
    .footer-social a { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; letter-spacing: 0.6px; text-decoration: none; padding: 4px 0; }
    .footer-social a:hover { color: var(--accent); }
    .footer-legal { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 14px; }
    .footer-legal a { color: rgba(255, 255, 255, 0.44); font-size: 0.74rem; letter-spacing: 0.5px; text-decoration: none; padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; }
    .footer-legal a:hover { color: rgba(255, 255, 255, 0.75); }

    .footer-copy {
      color: var(--white-dim);
      font-size: 0.78rem;
    }

    .footer-copy .gold {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

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

    /* ===== Scroll reveals — CONTENT IS VISIBLE BY DEFAULT (no JS dependency; can never blank). =====
       Supporting browsers animate them in natively via CSS scroll-driven animations (zero JS).
       Browsers without support — or users with reduced-motion — simply see the content. */
    .fade-in,.slide-left,.slide-right,.scale-in,.flip-in,.velocity-in,.spring-up{opacity:1;transform:none;}
    @supports (animation-timeline: view()){
      @media (prefers-reduced-motion: no-preference){
        .fade-in,.slide-left,.slide-right,.scale-in,.flip-in,.velocity-in,.spring-up{
          animation-duration:auto;
          animation-timing-function:cubic-bezier(0.16,1,0.3,1);
          animation-fill-mode:both;
          animation-timeline:view();
          /* Tightened 55% -> 30% (2026-07-02 audit): content reaches full
             opacity almost as soon as it enters, so nothing lingers half-faded
             mid-viewport on tall sections or fast scrolls. */
          animation-range:entry 0% entry 30%;
        }
        .fade-in{animation-name:vxRevFade;}
        .slide-left{animation-name:vxRevSlideL;}
        .slide-right{animation-name:vxRevSlideR;}
        .scale-in{animation-name:vxRevScale;}
        .flip-in{animation-name:vxRevFlip;}
        .velocity-in{animation-name:vxRevVelocity;}
        .spring-up{animation-name:vxRevSpring;}
      }
    }
    @keyframes vxRevFade{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
    @keyframes vxRevSlideL{from{opacity:0;transform:translateX(-60px);}to{opacity:1;transform:none;}}
    @keyframes vxRevSlideR{from{opacity:0;transform:translateX(60px);}to{opacity:1;transform:none;}}
    @keyframes vxRevScale{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:none;}}
    @keyframes vxRevFlip{from{opacity:0;transform:perspective(1000px) rotateY(-30deg) translateX(-40px);}to{opacity:1;transform:none;}}
    @keyframes vxRevVelocity{from{opacity:0;transform:translateX(-120px) scaleX(1.15);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
    @keyframes vxRevSpring{from{opacity:0;transform:translateY(60px) scale(0.9);}to{opacity:1;transform:none;}}

    /* Perf: skip rendering off-screen sections until scrolled near. This frees the main
       thread to paint the hero (LCP) instead of laying out the whole page first, and
       improves INP. Content stays in the DOM (SEO-safe); intrinsic sizes reserve space. */
    @supports (content-visibility: auto){
      .problem,.ai-system,.portfolio,.process,.pricing,.about{
        content-visibility:auto;
      }
      /* Per-section intrinsic sizes (2026-07-02 audit): the old flat 1000px
         under/over-reserved by up to 1300px, causing scrollbar jumps and the
         phantom blank stretches. Values ≈ real rendered heights at 1280w. */
      .problem  { contain-intrinsic-size: auto 700px; }
      .ai-system{ contain-intrinsic-size: auto 1900px; }
      .portfolio{ contain-intrinsic-size: auto 2300px; }
      .process  { contain-intrinsic-size: auto 1100px; }
      .pricing  { contain-intrinsic-size: auto 2300px; }
      .about    { contain-intrinsic-size: auto 1500px; }
    }

    /* ===== ULTRA ANIMATION SYSTEM ===== */

    /* Character-by-character reveal */
    .char-wrap {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap; /* prevents browser from breaking between inline-block .char elements (which would cause mid-word splits like "Busines\ns") */
    }
    .char-wrap .char {
      display: inline-block;
      opacity: 0;
      transform: translateY(100%) rotateX(-80deg);
      filter: blur(6px);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .char-wrap .char.revealed {
      opacity: 1;
      transform: translateY(0) rotateX(0);
      filter: blur(0);
    }

    /* Typewriter cursor */
    .typewriter-cursor {
      display: inline-block;
      width: 2px;
      height: 1.1em;
      background: var(--accent);
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: cursorBlink 0.7s step-end infinite;
    }
    @keyframes cursorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* Gold shimmer sweep on section titles */
    .shimmer-sweep {
      position: relative;
      overflow: hidden;
    }
    .shimmer-sweep::after {
      content: '';
      position: absolute;
      top: 0;
      left: -150%;
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(247, 225, 123, 0.25), rgba(212, 175, 55, 0.4), rgba(247, 225, 123, 0.25), transparent);
      transform: skewX(-20deg);
      pointer-events: none;
    }
    .shimmer-sweep.active::after {
      animation: shimmerPass 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    @keyframes shimmerPass {
      0% { left: -150%; }
      100% { left: 150%; }
    }

    /* flip-in / velocity-in / spring-up reveals are defined with the other scroll reveals
       above (visible by default + native scroll-driven animation, keyframes vxRev*). */

    /* Cyber scan line on sections */
    .cyber-reveal {
      position: relative;
      overflow: hidden;
    }
    .cyber-reveal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), var(--accent), transparent);
      box-shadow: 0 0 20px var(--accent), 0 0 60px rgba(212, 175, 55, 0.3);
      z-index: 10;
      transform: translateX(-100%);
      opacity: 0;
    }
    .cyber-reveal.scanned::before {
      animation: cyberScan 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    @keyframes cyberScan {
      0% { transform: translateX(-100%); opacity: 1; }
      100% { transform: translateX(100%); opacity: 0; }
    }

    /* Speed lines background */
    .speed-lines {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
      opacity: 0.28;
    }
    .speed-line {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent);
      animation: speedDash linear infinite;
    }
    @keyframes speedDash {
      0% { transform: translateX(-100vw); }
      100% { transform: translateX(100vw); }
    }

    /* Hero eyebrow spring entrance */
    /* (Eyebrow opacity-0 + .pop-in JS gate removed 2026-07-02 — the entrance JS
       is gone, and content must never wait on JS to become visible.) */

    /* ===== LOGO THROUGHOUT SITE ===== */

    /* Decorative lines flanking the hero logo */
    .hero-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin: -4.5rem auto -1.5rem;
    }
    .hero-logo-line {
      flex: 0 1 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    }

    /* Hero logo (centered between headline and subtitle) */
    .hero-logo {
      width: min(420px, 62vw);
      height: auto;
      object-fit: contain;
      margin: 0;
      display: block;
      opacity: 0;
      transform: scale(0.5);
      filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
      animation: none;
    }
    .hero-logo.revealed {
      animation: logoReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, logoGlow 4s ease-in-out 2s infinite;
    }
    @keyframes logoReveal {
      0% { opacity: 0; transform: scale(0.5) rotateY(90deg); }
      50% { opacity: 1; transform: scale(1.1) rotateY(-10deg); }
      100% { opacity: 1; transform: scale(1) rotateY(0); filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4)); }
    }
    @keyframes logoGlow {
      0%, 100% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.35)); }
      50% { filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.55)) drop-shadow(0 0 60px rgba(212, 175, 55, 0.15)); }
    }

    /* Section logo watermark */
    .section-logo-mark {
      display: block;
      width: 60px;
      height: auto;
      margin: 0 auto 20px;
      opacity: 0.6;
      filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.3));
      transition: all 0.5s;
    }
    .section-logo-mark:hover {
      opacity: 1;
      filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5)) drop-shadow(0 0 40px rgba(212, 175, 55, 0.2));
      transform: scale(1.08);
    }

    /* About section background watermark */
    .about-watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(520px, 92vw);
      height: auto;
      opacity: 0.04;
      pointer-events: none;
      z-index: 0;
    }
    .about .container { position: relative; z-index: 1; }

    /* Footer logo */
    .footer-logo {
      width: 50px;
      height: auto;
      margin: 0 auto 12px;
      display: block;
      filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
      transition: all 0.4s;
    }
    .footer-logo:hover {
      filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
      transform: scale(1.1);
    }

    /* CTA section logo */
    .cta-logo {
      width: 70px;
      height: auto;
      margin: 0 auto 20px;
      display: block;
      filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
      animation: logoGlow 3s ease-in-out infinite;
    }

    /* Image divider logo overlay */
    .divider-logo {
      width: 60px;
      max-width: 60px;
      height: auto;
      max-height: 50px;
      object-fit: contain;
      margin-bottom: 12px;
      flex-shrink: 0;
      filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
      animation: logoGlow 4s ease-in-out infinite;
    }

    /* Glow pulse on hero buttons after entrance */
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
      50% { box-shadow: 0 4px 40px rgba(212, 175, 55, 0.6), 0 0 60px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255,255,255,0.25); }
    }
    .hero-buttons.reveal .btn-primary {
      animation: glowPulse 2.5s ease-in-out 1.5s infinite;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .nav-slogan { display: none; }
      nav { padding: 14px 20px; }

      /* Tighten vertical rhythm on phones — the 72px section padding stacks to
         144px between sections, which reads as a big empty band on a small
         screen. Halve it. */
      .problem, .services, .process, .portfolio, .about, .cta-section,
      .testimonials, .pricing { padding-top: 48px; padding-bottom: 48px; }
      .ai-system { padding-top: 48px; padding-bottom: 48px; }
      .faq-section { padding-top: 48px; padding-bottom: 48px; }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(9, 9, 11, 0.97);
        flex-direction: column;
        padding: 24px;
        gap: 20px;
        border-bottom: 1px solid var(--bg-border);
      }

      .nav-links.open { display: flex; }
      .mobile-menu-btn { display: flex; }

      .hero { padding: 100px 20px 60px; min-height: auto; }
      /* Mobile: fit the WHOLE hero image (contain) instead of cropping it (cover) */
      .hero-bg-image { object-fit: contain; object-position: center; opacity: 0.8; }
      .hero-h1-top { font-size: clamp(1.6rem, 7vw, 2.2rem); }
      .hero-h2-bottom { font-size: clamp(1.5rem, 6.4vw, 2rem); }
      .hero-subheadline { font-size: clamp(0.92rem, 3.2vw, 1.05rem); padding: 0 8px; }
      .hero-logo { width: min(280px, 65vw); height: auto; }
      .hero-logo-line { flex: 0 1 60px; }
      .about-watermark { width: min(300px, 85vw); }
      .hero-sub { font-size: 1rem; }

      .hero-buttons {
        flex-direction: column;
        align-items: center;
      }

      .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
      }

      .services, .process, .portfolio, .about, .cta-section {
        padding: 70px 20px;
      }

      .process-steps {
        grid-template-columns: 1fr;
        max-width: 400px;
      }

      .portfolio-grid {
        grid-template-columns: 1fr;
      }

      .about-values {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .cta-card { padding: 44px 24px; }

      .cta-contact-methods { flex-direction: column; align-items: center; gap: 16px; }

      .image-divider { height: 220px; }

      .showcase-row img {
        width: 240px;
        height: 150px;
      }

      .testimonials { padding: 70px 20px; }
      .testimonial-card { padding: 32px 24px; }
    }

    /* ===== LOADING SCREEN ===== */
    /* ===== TESTIMONIALS ===== */
    .testimonials {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
    }

    .testimonial-card {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.08);
      border-radius: 14px;
      padding: 36px 32px;
      position: relative;
      transition: all 0.4s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
      overflow: hidden;
    }

    .testimonial-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
      pointer-events: none;
      transition: left 0.7s ease;
    }

    .testimonial-card:hover {
      border-color: rgba(212, 175, 55, 0.25);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 25px rgba(212, 175, 55, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .testimonial-card:hover::after { left: 120%; }

    .testimonial-stars {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 0.9rem;
      letter-spacing: 2px;
      margin-bottom: 16px;
    }

    .testimonial-card blockquote {
      color: var(--white-muted);
      font-size: 0.95rem;
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 20px;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gold-btn);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--bg-deep);
      box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
      text-shadow: 0 1px 0 rgba(255,255,255,0.1);
    }

    .testimonial-name {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
    }

    .testimonial-role {
      font-size: 0.75rem;
      color: var(--white-dim);
    }

    /* Portfolio card as link */
    a.portfolio-card {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    /* ===== SCROLL PROGRESS BAR ===== */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: var(--gold-btn);
      z-index: 10000;
      box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
      border-radius: 0 2px 2px 0;
    }

    /* ===== FLOATING BOOK BUTTON ===== */
    .floating-book {
      position: fixed;
      bottom: 32px;
      left: 32px;
      z-index: 900;
      opacity: 0;
      transform: translateY(20px) scale(0.9);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      pointer-events: none;
    }

    .floating-book.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    .floating-book-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--gold-btn);
      color: var(--bg-deep);
      padding: 16px 28px;
      border: none;
      border-radius: 60px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(212, 175, 55, 0.35), 0 0 60px rgba(212, 175, 55, 0.1);
      transition: all 0.3s;
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
      position: relative;
      overflow: hidden;
    }

    .floating-book-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s;
    }

    .floating-book-btn:hover::after { transform: translateX(100%); }

    .floating-book-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.15);
    }

    .floating-book-pulse {
      width: 8px;
      height: 8px;
      background: var(--bg-deep);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }

    /* ===== BOOKING MODAL ===== */
    .booking-overlay {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
    }

    .booking-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .booking-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(12px);
    }

    .booking-modal {
      position: relative;
      width: 90%;
      max-width: 540px;
      max-height: 90vh;
      overflow-y: auto;
      background: linear-gradient(165deg, rgba(18, 18, 22, 0.98) 0%, rgba(10, 10, 13, 0.99) 100%);
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 20px;
      padding: 48px 40px;
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 80px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
      transform: translateY(30px) scale(0.95);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .booking-modal::-webkit-scrollbar { width: 6px; }
    .booking-modal::-webkit-scrollbar-track { background: transparent; }
    .booking-modal::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.2); border-radius: 3px; }

    .booking-overlay.active .booking-modal {
      transform: translateY(0) scale(1);
    }

    .booking-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: var(--white-muted);
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }

    .booking-close:hover {
      background: rgba(212, 175, 55, 0.15);
      border-color: rgba(212, 175, 55, 0.3);
      color: var(--accent);
    }

    .booking-header {
      text-align: center;
      margin-bottom: 36px;
    }

    .booking-header h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }

    .booking-header p {
      color: var(--white-muted);
      font-size: 0.92rem;
    }

    /* ── Booking modal: text-BUILD callout + 2-step form ── */
    .booking-textbuild {
      margin: -10px 0 22px;
      padding: 14px 16px;
      background: rgba(212, 175, 55, 0.06);
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 10px;
      font-size: 0.84rem;
      color: var(--white-muted);
      line-height: 1.55;
      text-align: center;
    }
    .booking-textbuild strong {
      color: var(--white);
      font-weight: 700;
    }
    .booking-textbuild a {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px dashed rgba(212, 175, 55, 0.4);
    }
    .booking-step-meta {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(212, 175, 55, 0.6);
      margin-bottom: 14px;
    }
    .booking-contact-toggle {
      display: inline-flex;
      gap: 0;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 3px;
      margin-bottom: 12px;
    }
    .booking-toggle-btn {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 7px 18px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s;
    }
    .booking-toggle-btn.active {
      background: rgba(212, 175, 55, 0.12);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.25);
    }
    .booking-toggle-btn:hover:not(.active) { color: var(--white); }
    .form-subgroup { margin-top: 4px; }
    .booking-form .optional-tag {
      font-weight: 400;
      color: var(--white-dim);
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.78rem;
      margin-left: 6px;
    }
    .booking-continue {
      width: 100%;
      margin-top: 8px;
    }
    .booking-back {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      border: none;
      color: var(--white-dim);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.8px;
      padding: 6px 0;
      margin-bottom: 8px;
      cursor: pointer;
      transition: color 0.2s;
    }
    .booking-back:hover { color: var(--accent); }

    .booking-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .booking-form .form-group {
      margin-bottom: 20px;
    }

    .booking-form label {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--white-muted);
      margin-bottom: 8px;
    }

    .booking-form input,
    .booking-form textarea {
      width: 100%;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      transition: all 0.3s;
      outline: none;
    }

    .booking-form input:focus,
    .booking-form textarea:focus {
      border-color: rgba(212, 175, 55, 0.5);
      background: rgba(212, 175, 55, 0.04);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
    }

    .booking-form input::placeholder,
    .booking-form textarea::placeholder {
      color: var(--white-dim);
    }

    .booking-form select {
      width: 100%;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      transition: all 0.3s;
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B0AEA6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
    }

    .booking-form select:focus {
      border-color: rgba(212, 175, 55, 0.5);
      background-color: rgba(212, 175, 55, 0.04);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
    }

    .booking-form select option {
      background: #111114;
      color: var(--white);
    }

    .booking-form textarea {
      resize: vertical;
      min-height: 100px;
    }

    .booking-submit {
      width: 100%;
      margin-top: 8px;
    }

    .booking-submit.sending {
      pointer-events: none;
      opacity: 0.7;
    }

    .booking-success {
      display: none;
      text-align: center;
      padding: 20px 0;
    }

    .booking-success.show {
      display: block;
      animation: fadeInUp 0.5s ease-out;
    }

    .booking-success .success-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background: var(--gold-btn);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: var(--bg-deep);
      box-shadow: 0 8px 30px rgba(212, 175, 55, 0.35);
      animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes successPop {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    .booking-success h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      margin-bottom: 8px;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .booking-success p {
      color: var(--white-muted);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== HERO PARTICLES ===== */
    #heroParticles {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    /* ===== PRICING SECTION ===== */
    .pricing {
      padding: 72px 24px;
      background: transparent;
      position: relative;
      z-index: 3;
    }

    .pricing::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.07) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 60%, rgba(56, 189, 248, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1320px;
      margin: 0 auto;
      position: relative;
    }
    @media (max-width: 1100px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 780px; }
    }

    .pricing-card {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(212, 175, 55, 0.08);
      border-radius: 16px;
      padding: 32px 24px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    @media (max-width: 1100px) { .pricing-card { padding: 40px 32px; } }

    .pricing-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
      pointer-events: none;
      transition: left 0.7s ease;
    }

    .pricing-card:hover {
      transform: translateY(-6px);
      border-color: rgba(212, 175, 55, 0.2);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .pricing-card:hover::after { left: 120%; }

    .pricing-card.featured {
      border-color: rgba(212, 175, 55, 0.35);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 50px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .pricing-card.featured::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gold-btn);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    }

    .pricing-card.featured:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .pricing-popular {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--gold-btn);
      color: var(--bg-deep);
      padding: 4px 14px;
      border-radius: 50px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }

    .pricing-tier-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--white-muted);
      margin-bottom: 8px;
    }

    .pricing-card.featured .pricing-tier-name {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pricing-amount {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 3rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 4px;
    }

    .pricing-card.featured .pricing-amount {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pricing-amount .currency {
      font-size: 1.4rem;
      vertical-align: top;
      margin-right: 2px;
    }

    .pricing-desc {
      color: var(--white-dim);
      font-size: 0.88rem;
      margin-bottom: 28px;
      line-height: 1.6;
    }

    .pricing-features {
      list-style: none;
      margin-bottom: 32px;
      flex-grow: 1;
    }

    .pricing-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      color: var(--white-muted);
      font-size: 0.9rem;
      line-height: 1.5;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .pricing-features li:last-child { border-bottom: none; }

    .pricing-check {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(212, 175, 55, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
      margin-top: 2px;
    }

    .pricing-card.featured .pricing-check {
      background: rgba(212, 175, 55, 0.2);
    }

    .pricing-check span {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }

    .pricing-cta {
      width: 100%;
      text-align: center;
    }

    .pricing-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 8px;
    }

    .pricing-consult-link {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.4);
      text-decoration: none;
      letter-spacing: 0.3px;
      transition: color 0.2s;
    }
    .pricing-consult-link:hover { color: var(--accent); }

    .pricing-note {
      text-align: center;
      color: var(--white-dim);
      font-size: 0.85rem;
      margin-top: 40px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }

    /* ── Core Offer Pricing (legacy class name retained: .founding-card / .founding-* — repurposed for the $700/$70 core offer) ── */
    .founding-counter {
      max-width: 480px;
      margin: 8px auto 36px;
      text-align: center;
    }
    .founding-counter-dots {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-bottom: 12px;
    }
    .founding-dot {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      transition: all 0.3s;
    }
    .founding-dot.filled {
      background: var(--gold-btn);
      box-shadow: 0 0 12px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .founding-dot.empty {
      background: transparent;
      border: 1.5px solid rgba(212, 175, 55, 0.35);
      box-shadow: none;
    }
    .founding-counter-label {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .founding-grid {
      display: flex;
      justify-content: center;
      max-width: 720px;
      margin: 0 auto;
    }
    .founding-card {
      width: 100%;
      max-width: 640px;
      padding: 56px 48px 48px;
      background: var(--bg-card-glossy);
      border: 1.5px solid rgba(212, 175, 55, 0.4);
      border-radius: 18px;
      box-shadow: 0 12px 56px rgba(0, 0, 0, 0.55), 0 0 70px rgba(212, 175, 55, 0.13), inset 0 1px 0 rgba(255,255,255,0.06);
      position: relative;
      overflow: hidden;
    }
    .founding-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--gold-btn);
      box-shadow: 0 0 22px rgba(212, 175, 55, 0.55);
    }
    @media (max-width: 720px) {
      .founding-card { padding: 44px 26px 36px; }
    }

    .founding-tier-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 18px;
    }
    .founding-tier-tag::before {
      content: '🏆';
      -webkit-text-fill-color: initial;
      filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.4));
    }

    .founding-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 2.1rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -0.5px;
      line-height: 1.05;
      margin-bottom: 28px;
    }

    .founding-amount-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 18px 32px;
      margin-bottom: 8px;
    }
    .founding-amount {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 4rem;
      font-weight: 900;
      line-height: 1;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .founding-amount-sub {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.92rem;
      color: var(--white-dim);
      letter-spacing: 0.2px;
    }
    @media (max-width: 720px) {
      .founding-amount { font-size: 3rem; }
    }
    .founding-plus {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--white-muted);
    }
    .founding-recurring {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1;
      color: var(--white);
    }
    .founding-recurring-mo {
      font-size: 1rem;
      font-weight: 500;
      color: var(--white-dim);
    }

    .founding-trial-pill-wrap {
      text-align: center;
      margin-top: 18px;
    }
    .founding-trial-pill {
      display: inline-block;
      padding: 6px 16px;
      background: var(--gold-btn);
      color: var(--bg-deep);
      border-radius: 50px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255,255,255,0.25);
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
      white-space: nowrap;
    }

    .founding-launch-note {
      margin-top: 14px;
      padding: 16px 18px;
      background: rgba(212, 175, 55, 0.07);
      border: 1px solid rgba(212, 175, 55, 0.18);
      border-radius: 10px;
      color: var(--white-muted);
      font-size: 0.88rem;
      line-height: 1.65;
    }
    .founding-launch-note strong {
      color: var(--accent-light);
    }

    .founding-features-heading {
      margin-top: 32px;
      margin-bottom: 14px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--white-muted);
    }
    .founding-features {
      list-style: none;
      margin: 0 0 32px;
      padding: 0;
    }
    .founding-features li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      color: var(--white);
      font-size: 0.96rem;
      line-height: 1.55;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .founding-features li:last-child { border-bottom: none; }
    .founding-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(212, 175, 55, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      margin-top: 2px;
    }
    .founding-check span {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }

    .founding-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 8px;
    }
    .founding-cta {
      width: 100%;
      text-align: center;
    }
    .founding-consult-link {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      letter-spacing: 0.3px;
      transition: color 0.2s;
    }
    .founding-consult-link:hover { color: var(--accent); }

    .founding-finance-note {
      margin-top: 24px;
      text-align: center;
      font-size: 0.78rem;
      color: var(--white-dim);
      line-height: 1.6;
    }

    /* ===== OFFER REVEAL POP-UP MODAL (auto-opens once per session — surfaces the $700/$70 core offer) ===== */
    .founding-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 6000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .founding-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .founding-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .founding-modal-card {
      position: relative;
      width: 100%;
      max-width: 540px;
      max-height: 92vh;
      overflow-y: auto;
      background: linear-gradient(165deg, rgba(18, 18, 22, 0.98) 0%, rgba(10, 10, 13, 0.99) 100%);
      border: 1px solid rgba(212, 175, 55, 0.35);
      border-radius: 22px;
      padding: 40px 28px 32px;
      text-align: center;
      box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.7),
        0 0 90px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
      /* "Coming at you" entrance — scales up from 0.3 to 1 with a slight bounce overshoot */
      transform: scale(0.3) translateZ(0);
      opacity: 0;
      transition:
        transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.45s ease;
    }
    .founding-modal-overlay.active .founding-modal-card {
      transform: scale(1) translateZ(0);
      opacity: 1;
    }
    .founding-modal-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), transparent);
    }
    @media (max-width: 480px) {
      .founding-modal-card { padding: 36px 18px 26px; border-radius: 18px; }
    }
    .founding-modal-close {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: var(--white-muted);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 2;
      font-family: inherit;
    }
    .founding-modal-close:hover {
      background: rgba(212, 175, 55, 0.12);
      border-color: rgba(212, 175, 55, 0.35);
      color: var(--white);
    }
    .founding-modal-tier-tag {
      display: inline-block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(212, 175, 55, 0.08);
      border: 1px solid rgba(212, 175, 55, 0.25);
      padding: 7px 16px;
      border-radius: 50px;
      margin-bottom: 18px;
    }
    .founding-modal-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.6rem, 5vw, 2.1rem);
      font-weight: 900;
      letter-spacing: -0.5px;
      color: var(--white);
      margin: 0 0 8px;
    }
    .founding-modal-subhead {
      font-size: 0.92rem;
      color: var(--white-muted);
      line-height: 1.5;
      margin: 0 auto 22px;
      max-width: 420px;
    }
    .founding-modal-pricing {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .founding-modal-pricing .col { text-align: center; }
    .founding-modal-pricing .price {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(2.2rem, 6vw, 2.9rem);
      font-weight: 900;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -1px;
      line-height: 1;
    }
    .founding-modal-pricing .plus {
      font-size: 1.6rem;
      color: var(--white-dim);
      font-weight: 300;
    }
    .founding-modal-pricing .recurring {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.4rem, 4vw, 1.7rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1;
    }
    .founding-modal-pricing .mo {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--white-muted);
    }
    .founding-modal-pricing .sub {
      font-size: 0.7rem;
      color: var(--white-dim);
      letter-spacing: 0.5px;
      display: block;
      margin-top: 6px;
      text-transform: uppercase;
    }
    .founding-modal-trial-pill {
      display: inline-block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--bg-deep);
      background: var(--gold-btn);
      padding: 7px 16px;
      border-radius: 50px;
      margin-bottom: 22px;
      box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
    }
    .founding-modal-features {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
      text-align: left;
    }
    .founding-modal-features li {
      font-size: 0.86rem;
      color: var(--white-muted);
      padding: 7px 0 7px 24px;
      position: relative;
      line-height: 1.5;
    }
    .founding-modal-features li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      top: 7px;
      color: var(--accent);
      font-weight: 700;
    }
    .founding-modal-cta {
      display: block;
      background: var(--gold-btn);
      color: var(--bg-deep);
      padding: 16px 28px;
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      box-shadow:
        0 4px 22px rgba(212, 175, 55, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.25);
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .founding-modal-cta:hover {
      transform: translateY(-1px);
      box-shadow:
        0 6px 28px rgba(212, 175, 55, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .founding-modal-secondary {
      display: block;
      text-align: center;
      margin-top: 14px;
      padding: 6px 12px;
      font-size: 0.86rem;
      color: var(--accent);
      text-decoration: none;
      letter-spacing: 0.3px;
      border-bottom: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .founding-modal-secondary:hover {
      color: var(--accent-light);
      border-bottom-color: rgba(212, 175, 55, 0.4);
    }
    .founding-modal-dismiss {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 12px;
      padding: 8px;
      font-size: 0.78rem;
      color: var(--white-dim);
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.2s;
    }
    .founding-modal-dismiss:hover { color: var(--accent); }

    /* ── Why So Affordable? — objection-killer block ── */
    .why-affordable-block {
      max-width: 1100px;
      margin: 96px auto 0;
      padding: 56px 36px;
      background: linear-gradient(165deg, rgba(212,175,55,0.04) 0%, rgba(8,8,10,0.6) 100%);
      border: 1px solid rgba(212,175,55,0.15);
      border-radius: 22px;
      text-align: center;
    }
    .why-affordable-eyebrow {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }
    .why-affordable-heading {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.8rem, 3.6vw, 2.6rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 18px;
      letter-spacing: -0.5px;
    }
    .why-affordable-intro {
      max-width: 680px;
      margin: 0 auto 36px;
      color: var(--white-muted);
      font-size: 1rem;
      line-height: 1.7;
    }
    .why-affordable-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      text-align: left;
      margin: 28px 0;
    }
    @media (max-width: 768px) {
      .why-affordable-block { padding: 40px 22px; }
      .why-affordable-grid { grid-template-columns: 1fr; gap: 18px; }
    }
    .why-affordable-item {
      padding: 22px 24px;
      background: rgba(8,8,10,0.45);
      border: 1px solid rgba(212,175,55,0.1);
      border-radius: 14px;
    }
    .why-affordable-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 2px;
      color: var(--accent);
      margin-bottom: 10px;
    }
    .why-affordable-item h4 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }
    .why-affordable-item p {
      font-size: 0.92rem;
      color: var(--white-muted);
      line-height: 1.6;
      margin: 0;
    }
    .why-affordable-close {
      margin: 28px 0 0;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--accent);
      letter-spacing: 0.5px;
    }

    /* ── Grow Your Business — 4-tier growth plans ── */
    .growth-plans-block {
      max-width: 1180px;
      margin: 88px auto 0;
    }
    .growth-plans-heading {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 800;
      color: var(--white);
      text-align: center;
      margin: 14px 0 12px;
      letter-spacing: -0.5px;
    }
    .growth-plans-intro {
      max-width: 720px;
      margin: 0 auto 36px;
      text-align: center;
      color: var(--white-muted);
      font-size: 1rem;
      line-height: 1.65;
    }
    .growth-plans-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    @media (max-width: 1180px) { .growth-plans-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .growth-plans-grid { grid-template-columns: 1fr; } }
    .growth-plan-card {
      padding: 30px 26px 28px;
      background: var(--bg-card-glossy);
      border: 1px solid var(--bg-border);
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .growth-plan-card:hover {
      transform: translateY(-4px);
      border-color: rgba(212,175,55,0.35);
      box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    }
    .growth-plan-card.growth-plan-featured {
      border-color: rgba(212,175,55,0.4);
      background: linear-gradient(165deg, rgba(212,175,55,0.06) 0%, rgba(17,17,20,0.97) 100%);
    }
    .growth-plan-card.growth-plan-partner {
      border-color: rgba(212,175,55,0.45);
      background: linear-gradient(165deg, rgba(212,175,55,0.09) 0%, rgba(17,17,20,0.98) 100%);
      box-shadow: 0 0 30px rgba(212,175,55,0.06);
    }
    .growth-plan-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.18rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .growth-plan-badge {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(212,175,55,0.1);
      border: 1px solid rgba(212,175,55,0.25);
      padding: 3px 8px;
      border-radius: 99px;
    }
    .growth-plan-price {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 4px;
    }
    .growth-plan-mo {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--white-dim);
      -webkit-text-fill-color: var(--white-dim);
      letter-spacing: 0.5px;
      margin-left: 4px;
    }
    .growth-plan-sub {
      font-size: 0.86rem;
      color: var(--white-muted);
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .growth-plan-features {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      flex: 1;
    }
    .growth-plan-features li {
      font-size: 0.86rem;
      color: var(--white-muted);
      line-height: 1.5;
      padding: 6px 0 6px 22px;
      position: relative;
    }
    .growth-plan-features li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 6px;
      color: var(--accent);
      font-weight: 700;
      font-size: 0.85rem;
    }
    .growth-plan-features li em {
      color: var(--white-dim);
      font-style: normal;
      font-size: 0.78rem;
      display: block;
      margin-top: 4px;
    }
    .growth-plan-cta {
      display: block;
      text-align: center;
      padding: 12px 20px;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 10px;
      color: var(--accent);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      min-height: 44px;
      line-height: 22px;
    }
    .growth-plan-cta:hover {
      background: var(--gold-btn);
      color: #0C0C0F;
      border-color: transparent;
    }
    .growth-plans-disclaimer {
      max-width: 880px;
      margin: 28px auto 0;
      text-align: center;
      font-size: 0.82rem;
      color: var(--white-dim);
      line-height: 1.6;
    }

    /* ── Just Need One Thing — standalone subs ── */
    .standalone-subs-block {
      max-width: 980px;
      margin: 80px auto 0;
    }
    .standalone-heading {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.8rem, 3.6vw, 2.4rem);
      font-weight: 800;
      color: var(--white);
      text-align: center;
      margin: 14px 0 12px;
      letter-spacing: -0.5px;
    }
    .standalone-intro {
      max-width: 640px;
      margin: 0 auto 32px;
      text-align: center;
      color: var(--white-muted);
      font-size: 0.98rem;
      line-height: 1.65;
    }
    .standalone-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }
    @media (max-width: 720px) { .standalone-grid { grid-template-columns: 1fr; } }
    .standalone-card {
      padding: 32px 28px 28px;
      background: var(--bg-card-glossy);
      border: 1px solid var(--bg-border);
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s, border-color 0.25s;
    }
    .standalone-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.35); }
    .standalone-card.standalone-featured {
      border-color: rgba(212,175,55,0.4);
      background: linear-gradient(165deg, rgba(212,175,55,0.07) 0%, rgba(17,17,20,0.97) 100%);
    }
    .standalone-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .standalone-price {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 2.3rem;
      font-weight: 900;
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 4px;
    }
    .standalone-mo {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--white-dim);
      -webkit-text-fill-color: var(--white-dim);
      letter-spacing: 0.5px;
      margin-left: 4px;
    }
    .standalone-sub {
      font-size: 0.9rem;
      color: var(--white-muted);
      line-height: 1.55;
      margin-bottom: 18px;
    }
    .standalone-features {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
      flex: 1;
    }
    .standalone-features li {
      font-size: 0.88rem;
      color: var(--white-muted);
      line-height: 1.55;
      padding: 6px 0 6px 22px;
      position: relative;
    }
    .standalone-features li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 6px;
      color: var(--accent);
      font-weight: 700;
    }
    .standalone-features li em {
      color: var(--white-dim);
      font-style: normal;
      font-size: 0.8rem;
      display: block;
      margin-top: 4px;
    }
    .standalone-fineprint {
      font-size: 0.78rem;
      color: var(--white-dim);
      line-height: 1.5;
      margin: 0 0 16px;
      font-style: italic;
    }
    .standalone-cta {
      display: block;
      text-align: center;
      padding: 12px 20px;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 10px;
      color: var(--accent);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      min-height: 44px;
      line-height: 22px;
    }
    .standalone-cta:hover {
      background: var(--gold-btn);
      color: #0C0C0F;
      border-color: transparent;
    }

    /* ── Plain-English Comparison Block (under founding card) ── */
    .pricing-comparison {
      max-width: 1100px;
      margin: 72px auto 0;
    }
    .comparison-eyebrow {
      text-align: center;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--white-dim);
      margin-bottom: 14px;
    }
    .comparison-heading {
      text-align: center;
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.5rem, 3.4vw, 2.1rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 14px;
      line-height: 1.15;
    }
    .comparison-intro {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 40px;
      color: var(--white-dim);
      font-size: 1rem;
      line-height: 1.75;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    @media (max-width: 1080px) {
      .comparison-grid { grid-template-columns: 1fr; gap: 18px; }
    }
    .comparison-col.agency {
      background: linear-gradient(165deg, rgba(60,40,40,0.18) 0%, rgba(8,8,10,0.85) 100%);
      border-color: rgba(220,140,140,0.18);
    }
    .comparison-col.agency .comparison-col-tag { color: #E89B9B; }
    .comparison-col.agency .comparison-total-value,
    .comparison-col.agency .comparison-3yr-value { color: #E89B9B; }

    .comparison-col {
      background: var(--bg-card-glossy);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      padding: 32px 28px 28px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .comparison-col.velonyx {
      border-color: rgba(212, 175, 55, 0.32);
      box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 50px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .comparison-col-tag {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--white-dim);
      margin-bottom: 10px;
    }
    .comparison-col.velonyx .comparison-col-tag {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .comparison-col-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.18rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 22px;
      line-height: 1.3;
    }

    .comparison-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .comparison-row:last-of-type { border-bottom: none; }
    .comparison-row .row-label {
      font-size: 0.92rem;
      color: var(--white);
      line-height: 1.4;
    }
    .comparison-row .row-price {
      flex-shrink: 0;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.94rem;
      font-weight: 700;
      color: var(--white-muted);
      letter-spacing: 0.2px;
      text-align: right;
    }

    .comparison-divider {
      height: 1px;
      background: rgba(212, 175, 55, 0.2);
      margin: 14px 0;
    }
    .comparison-total {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 0 6px;
    }
    .comparison-total-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--white-dim);
    }
    .comparison-total-value {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.65rem;
      font-weight: 800;
      color: var(--white);
      line-height: 1.1;
    }
    .comparison-col.velonyx .comparison-total-value {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .comparison-3yr-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--white-dim);
      margin-top: 18px;
    }
    .comparison-3yr-value {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.95rem;
      font-weight: 800;
      line-height: 1.1;
      color: var(--white);
      margin-top: 4px;
    }
    .comparison-col.velonyx .comparison-3yr-value {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .comparison-ownership {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-size: 0.92rem;
      color: var(--white-muted);
      line-height: 1.55;
    }
    .comparison-ownership strong {
      color: var(--white);
    }
    .comparison-col.rented .comparison-ownership .own-flag {
      color: #FF8B8B;
      font-weight: 700;
    }
    .comparison-col.velonyx .comparison-ownership .own-flag {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }

    .comparison-takeaway {
      margin: 40px auto 0;
      max-width: 760px;
      text-align: center;
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.1rem, 2.4vw, 1.4rem);
      font-weight: 600;
      letter-spacing: 0.2px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
      padding: 20px 28px;
    }
    .comparison-takeaway strong {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }

    .comparison-stack-line {
      margin-top: 18px;
      font-size: 0.92rem;
      color: var(--white-muted);
      line-height: 1.65;
    }

    .comparison-bottom-line {
      max-width: 760px;
      margin: 36px auto 0;
      text-align: center;
      color: var(--white);
      font-size: 1rem;
      line-height: 1.75;
      padding: 20px 28px;
      background: rgba(212, 175, 55, 0.05);
      border: 1px solid rgba(212, 175, 55, 0.18);
      border-radius: 12px;
    }
    .comparison-bottom-line strong {
      background: var(--gold-shine);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }

    /* ── Payment & Financing Partners ── */
    .payment-partners {
      margin-top: 52px;
      text-align: center;
    }
    .partners-label {
      font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
      color: var(--gold-muted); margin-bottom: 28px;
    }
    .partners-row {
      display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
      max-width: 860px; margin: 0 auto 20px;
    }
    .partner-tile {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      cursor: default; text-decoration: none;
      transition: transform 0.25s;
    }
    .partner-tile:hover { transform: translateY(-3px); }
    a.partner-tile { cursor: pointer; }
    .partner-logo { display: block; height: 36px; width: auto; border-radius: 7px; }
    .partner-sub {
      font-size: 0.7rem; color: var(--white-muted); font-weight: 500;
      white-space: nowrap;
    }
    .partner-featured .partner-logo {
      box-shadow: 0 4px 18px rgba(0,0,0,0.3);
      height: 40px;
    }
    .partner-featured .partner-sub { color: var(--white); font-weight: 600; }
    .partner-finance .partner-logo {
      filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
    }
    .partners-disclaimer {
      font-size: 0.72rem; color: rgba(255,255,255,0.3);
      max-width: 560px; margin: 0 auto; line-height: 1.6;
    }
    .partners-disclaimer a { color: var(--gold-muted); text-decoration: none; }
    .partners-disclaimer a:hover { color: var(--gold); }

    @media (max-width: 768px) {
      .booking-modal { padding: 36px 24px; }
      .booking-form .form-row { grid-template-columns: 1fr; }
      .floating-book { bottom: 20px; left: 20px; }
      .floating-book-btn { padding: 14px 22px; font-size: 0.75rem; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
      .pricing-card.featured { order: -1; }
    }
    /* ===== CUSTOM CURSOR ===== */
    /* ===== CURSOR GLOW (subtle, no delay) ===== */
    .cursor-glow {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      will-change: left, top;
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Hide on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .cursor-glow { display: none !important; }
    }

    /* ===== GLASSMORPHISM UPGRADE ===== */
    .service-card,
    .pricing-card {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* ===== GSAP REVEAL OVERRIDES ===== */
    .gsap-reveal {
      opacity: 0;
      transform: translateY(40px);
      will-change: transform, opacity;
    }

    /* ===== SECTION DIVIDER GLOW ===== */
    .section-glow-line {
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #D4AF37, transparent);
      margin: 0 auto 40px;
      opacity: 0;
      transform: scaleX(0);
    }

/* ===== ADDED 2026-06-24: explainer + about videos + subtle purple/blue accents (additive) ===== */
/* Purple/blue accent palette — gold remains the primary brand color; these are accents only. */
:root{--vx-accent-purple:#7c5cff;--vx-accent-blue:#2e6bff;}

/* Task 1 — explainer video: 16:9, directly below hero, full-width within the content container. */
.vx-explainer-section{padding:8px 24px 26px;position:relative;z-index:3;}
.vx-video-16x9{max-width:1000px;margin:0 auto;}
.vx-video-16x9 video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#080c20;}

/* Task 2 — about video: 9:16 vertical, beside the existing about text; stacks above it on mobile. */
.about-layout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:44px;max-width:1060px;margin:0 auto;}
.about-layout .about-content{margin:0;}
.about-media{flex:0 0 auto;}
.vx-video-9x16{display:block;width:300px;max-width:78vw;height:auto;border-radius:16px;background:#080c20;}
@media (max-width:820px){
  .about-layout{gap:28px;}
  .vx-video-9x16{width:auto;max-height:60vh;max-width:76vw;}
}

/* Gold accent on the two video containers — matches the brand (logo, headings, CTAs). */
.vx-video-accent{position:relative;}
.vx-video-accent::before{content:"";position:absolute;inset:-26px;z-index:0;border-radius:28px;pointer-events:none;
  background:radial-gradient(closest-side, rgba(212,175,55,.18), rgba(212,175,55,.08) 58%, transparent 78%);
  filter:blur(10px);}
.vx-video-accent>*{position:relative;z-index:1;}
.vx-video-accent video{box-shadow:0 0 0 1px rgba(212,175,55,.40), 0 16px 50px rgba(212,175,55,.16);}

    /* ── Batch D (2026-07-02 audit): affordances, flagship, rail, instrument bar ── */
    .portfolio-view {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid rgba(212, 175, 55, 0.12);
      font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
      display: flex; align-items: center; gap: 8px;
    }
    .portfolio-view span { transition: transform 0.25s; }
    .portfolio-card:hover .portfolio-view span { transform: translateX(5px); }
    /* Flagship demo card — hierarchy without breaking the 3x2 grid */
    .portfolio-flagship { position: relative; }
    .portfolio-flagship::after {
      content: "Flagship Demo"; position: absolute; top: 14px; right: 14px; z-index: 2;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 700;
      letter-spacing: 1.4px; text-transform: uppercase; color: #14100a;
      background: var(--gold-btn); padding: 5px 11px; border-radius: 999px;
      box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
    }
    .portfolio-flagship { border-color: rgba(212, 175, 55, 0.32); }
    /* Process: connected gold timeline rail (desktop) */
    @media (min-width: 761px) {
      .process-step .process-step-rail { position: relative; }
      .process-step:not(:last-child) .process-step-rail::after {
        content: ""; position: absolute; left: calc(100% - 8px); top: 50%; width: 60%;
        height: 1px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.45), rgba(212, 175, 55, 0.05));
      }
    }
    /* About stats -> one bordered instrument bar */
    .about-values {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      max-width: 720px; margin: 40px auto 0;
      background: var(--bg-card-glossy);
      border: 1px solid var(--bg-border); border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 38px rgba(0, 0, 0, 0.4);
      overflow: hidden;
    }
    .about-value { padding: 26px 18px; }
    .about-value + .about-value { border-left: 1px solid rgba(212, 175, 55, 0.12); }
    @media (max-width: 640px) {
      .about-values { grid-template-columns: 1fr; }
      .about-value + .about-value { border-left: 0; border-top: 1px solid rgba(212, 175, 55, 0.12); }
    }