/* Estilos base del sitio: reset, escala tipografica, variables de #vizion-app,
   sistema de botones, .vzn-h2 / .vzn-eyebrow / .vzn-line / .vzn-reveal y las
   secciones compartidas. Extraido del <style> global del home el 2026-09-07
   para que los canvas (/design, /upgrade, /upscale) rendericen identico.
   Se carga EXACTAMENTE donde estaba el <style>: el orden de cascada importa. */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #0B0A08; }

    /* ═══════════════════════════════════════════════════
       VIZION AI — scoped styles
    ═══════════════════════════════════════════════════ */
    #vizion-app *, #vizion-app *::before, #vizion-app *::after {
      box-sizing: border-box; margin: 0; padding: 0;
    }
    #vizion-app {
      --bg:       #0B0A08;
      --surface:  #111009;
      --lift:     #181510;
      --card:     #1C1915;
      --fg:       #F2EDE4;
      --muted:    #8A837A;
      --dim:      #847D75;
      --dim-line: #4A4540;
      --gold:     #CA8262;
      --gold-lt:  #E6AD8E;
      --border:   #262218;
      --serif:    'Instrument Serif', Georgia, serif;
      --sans:     'Geist', system-ui, sans-serif;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--sans);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      /* overflow-x: clip (NOT hidden) so position: sticky works on descendants.
         clip is supported by all modern browsers; same visual result. */
      overflow-x: clip;
      position: relative;
    }
    /* Disable smooth scroll during scrubbing — interferes with ScrollTrigger */
    html { scroll-behavior: auto; font-size: 110%; }
    #vizion-app img { display: block; max-width: 100%; height: auto; }
    #vizion-app button { font-family: var(--sans); cursor: pointer; border: none; }

    /* ─── Animations ─── */
    @keyframes vznFadeUp   { from {opacity:0; transform:translateY(28px)} to {opacity:1; transform:none} }
    @keyframes vznFadeIn   { from {opacity:0} to {opacity:1} }
    @keyframes vznSpin     { to { transform: rotate(360deg); } }
    @keyframes vznPulse    { 0%,100%{opacity:.4} 50%{opacity:1} }
    @keyframes vznShimmer  { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
    @keyframes vznBarGrow  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes vznPlanGlow { 0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,0)} 50%{box-shadow:0 0 40px 4px rgba(201,169,110,0.09)} }
    @keyframes vznGoldFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
    @keyframes vznGrainMove{ 0%{transform:translate(0,0)} 25%{transform:translate(-1%,-1%)} 50%{transform:translate(1%,0)} 75%{transform:translate(-1%,1%)} 100%{transform:translate(0,0)} }

    /* GSAP handles reveal — .vzn-reveal is just a marker */
    .vzn-reveal { will-change: transform, opacity; }

    /* Line-curtain reveal wrappers */
    #vizion-app .vzn-line { display: block; overflow: hidden; }
    #vizion-app .vzn-line-inner { display: block; will-change: transform; }
    #vizion-app .vzn-h1 .vzn-line { line-height: 1.04; }

    /* Hover lift — cards */
    #vizion-app .vzn-how-card {
      transition: transform 0.4s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.4s;
    }
    #vizion-app .vzn-how-card:hover {
      transform: translateY(-6px);
      border-color: var(--dim-line);
      box-shadow: 0 24px 48px rgba(0,0,0,0.35);
    }
    #vizion-app .vzn-proposal {
      transition: transform 0.4s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.4s;
    }
    #vizion-app .vzn-proposal:hover {
      transform: translateY(-8px);
      border-color: var(--dim-line);
      box-shadow: 0 28px 56px rgba(0,0,0,0.4);
    }
    #vizion-app .vzn-plan {
      transition: transform 0.4s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.4s;
    }
    #vizion-app .vzn-plan:not(.featured):hover {
      transform: translateY(-5px);
      border-color: var(--dim-line);
    }
    #vizion-app .vzn-plan.featured {
      animation: vznPlanGlow 5s ease-in-out infinite;
    }
    #vizion-app .vzn-plan.featured:hover { transform: translateY(-6px); }

    /* Opt hover */
    #vizion-app .vzn-opt {
      transition: transform 0.3s cubic-bezier(.16,1,.3,1), border-color 0.2s, background 0.2s;
    }
    #vizion-app .vzn-opt:hover { transform: translateY(-3px); }

    /* Hero grain overlay */
    #vizion-app .vzn-hero::after {
      content: '';
      position: absolute; inset: 0; pointer-events: none; z-index: 0;
      opacity: 0.028;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      animation: vznGrainMove 8s steps(1) infinite;
    }

    /* Gold accent line before eyebrows */
    #vizion-app .vzn-eyebrow { position: relative; display: inline-block; }

    /* Slider shine button */
    #vizion-app .vzn-cta-primary, #vizion-app .vzn-cta, #vizion-app .vzn-btn-next {
      position: relative; overflow: hidden;
    }
    #vizion-app .vzn-cta-primary::after,
    #vizion-app .vzn-cta::after,
    #vizion-app .vzn-btn-next::after {
      content: '';
      position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      transition: left 0.5s ease;
    }
    #vizion-app .vzn-cta-primary:hover::after,
    #vizion-app .vzn-cta:hover::after,
    #vizion-app .vzn-btn-next:hover::after { left: 140%; }

    /* ─── Nav — Axentra style: logo left, links pill-center, CTA right ─── */
    #vizion-app .vzn-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      padding: 1.5rem 2.2rem;
      background: transparent;
      transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
      border-bottom: 1px solid transparent;
    }
    /* Nav siempre transparente — la pill y el CTA tienen su propio glass.
       NO se aplica background oscuro al scrollear (estilo Axentra). */
    #vizion-app .vzn-logo {
      font-family: var(--serif); font-size: 1.05rem; font-weight: 500;
      letter-spacing: 0.32em; color: var(--fg); cursor: pointer;
      justify-self: start;
      text-transform: lowercase;
      display: inline-flex; align-items: center;
    }
    #vizion-app .vzn-logo img { height: 32px; width: auto; display: block; }
    /* Center pill with links — liquid glass */
    #vizion-app .vzn-nav-links {
      display: flex; gap: 0.4rem; align-items: center;
      padding: 0.4rem 0.55rem;
      position: relative; overflow: hidden;
      background: rgba(255,255,255,0.045);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: none; border-radius: 999px;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.12);
      justify-self: center;
    }
    #vizion-app .vzn-nav-links::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.45));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-nav-link {
      font-size: 0.62rem; font-weight: 400; letter-spacing: 0.1em;
      text-transform: capitalize;
      color: rgba(242,237,228,0.78);
      cursor: pointer; position: relative;
      transition: color 0.2s, background 0.2s;
      background: none;
      padding: 0.5rem 0.95rem;
      border-radius: 999px;
    }
    #vizion-app .vzn-nav-link:hover {
      color: var(--fg); background: rgba(242,237,228,0.06);
    }
    /* Right CTA — liquid glass, terracotta tint, never solid on hover */
    #vizion-app .vzn-cta {
      font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: capitalize;
      position: relative; overflow: hidden;
      background: rgba(202,130,98,0.18);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      color: var(--fg);
      padding: 0.72rem 1.35rem;
      border: none; border-radius: 999px;
      box-shadow: inset 0 1px 1px rgba(230,173,142,0.22);
      transition: background 0.3s;
      justify-self: end;
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
    #vizion-app .vzn-cta::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
      background: linear-gradient(180deg, rgba(230,173,142,0.6), rgba(230,173,142,0) 42%, rgba(230,173,142,0) 58%, rgba(230,173,142,0.6));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-cta::after {
      content: '↗'; font-size: 0.72rem; opacity: 0.85;
    }
    #vizion-app .vzn-cta:hover {
      background: rgba(202,130,98,0.32);
    }
    /* Right-side group: auth pill + Start free CTA */
    #vizion-app .vzn-nav-right {
      justify-self: end; display: inline-flex; align-items: center; gap: 0.6rem;
    }
    #vizion-app .vzn-nav-auth {
      font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: capitalize;
      color: rgba(242,237,228,0.85); cursor: pointer; text-decoration: none;
      padding: 0.72rem 1.2rem; border-radius: 999px;
      position: relative; overflow: hidden;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.12);
      transition: background 0.25s, color 0.25s;
      display: inline-flex; align-items: center;
    }
    #vizion-app .vzn-nav-auth::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
      background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.4));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-nav-auth:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
    #vizion-app .vzn-google-signin { gap: 0.5rem; cursor: pointer; }
    #vizion-app .vzn-google-signin svg { width: 15px; height: 15px; flex-shrink: 0; }

    /* ── Profile: avatar + plan badge + dropdown ── */
    #vizion-app .vzn-profile { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
    #vizion-app .vzn-profile[hidden], #vizion-app .vzn-profile-menu[hidden] { display: none !important; }
    #vizion-app .vzn-plan-badge {
      font-size: 0.54rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.3rem 0.6rem; border-radius: 999px;
      background: rgba(202,130,98,0.2); color: var(--gold-lt); border: 1px solid rgba(202,130,98,0.35);
    }
    #vizion-app .vzn-plan-badge.free { background: rgba(255,255,255,0.06); color: var(--muted); border-color: rgba(255,255,255,0.12); }
    #vizion-app .vzn-avatar-btn {
      width: 38px; height: 38px; border-radius: 50%; overflow: hidden; padding: 0; cursor: pointer;
      border: 1px solid rgba(255,255,255,0.18); background: rgba(202,130,98,0.18);
      display: inline-flex; align-items: center; justify-content: center; position: relative;
      transition: border-color 0.25s;
    }
    #vizion-app .vzn-avatar-btn:hover { border-color: var(--gold); }
    #vizion-app .vzn-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: none; }
    #vizion-app .vzn-avatar-btn img.loaded { display: block; }
    #vizion-app .vzn-avatar-btn span { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-lt); }

    #vizion-app .vzn-profile-menu {
      position: absolute; top: calc(100% + 14px); right: 0; width: 312px;
      /* Techo de altura + columna flex: la lista de agentes es lo unico que
         scrollea, y las acciones de cuenta quedan siempre visibles.
         El nav es fixed y mide ~92px; +14 del gap +16 de respiro = 122. */
      display: flex; flex-direction: column;
      max-height: calc(100vh - 122px);max-height: calc(100dvh - 122px);
      max-height: calc(100dvh - 122px); /* dvh: barra del navegador en movil */
      background: rgba(20,18,14,0.55);
      -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3);
      border-radius: 20px; padding: 1.3rem; overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.08);
      z-index: 200; animation: vznPmIn .28s cubic-bezier(.16,1,.3,1);
    }
    #vizion-app .vzn-profile-menu::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
      background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,0.34));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    @keyframes vznPmIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
    #vizion-app .vzn-pm-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; position: relative; }
    #vizion-app .vzn-pm-avatar {
      width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
      background: rgba(202,130,98,0.18); display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.16);
    }
    #vizion-app .vzn-pm-avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
    #vizion-app .vzn-pm-avatar img.loaded { display: block; }
    #vizion-app .vzn-pm-avatar span { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-lt); }
    #vizion-app .vzn-pm-name { font-size: 0.94rem; color: var(--fg); font-weight: 500; line-height: 1.3; }
    #vizion-app .vzn-pm-email { font-size: 0.74rem; color: var(--muted); word-break: break-all; }

    /* Plan card — liquid glass quadrant */
    #vizion-app .vzn-pm-plan {
      display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: 14px;
      background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
      position: relative; overflow: hidden; margin-bottom: 1rem;
    }
    #vizion-app .vzn-pm-plan::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 50%, rgba(255,255,255,0.22));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-pm-plan-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
    #vizion-app .vzn-pm-plan-val { font-size: 0.88rem; color: var(--gold-lt); font-weight: 500; }
    #vizion-app .vzn-pm-upgrade {
      margin-left: auto; position: relative; overflow: hidden;
      font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
      background: rgba(202,130,98,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 1px rgba(230,173,142,0.25);
      padding: 0.4rem 0.8rem; border-radius: 999px; transition: background .25s, transform .25s;
    }
    #vizion-app .vzn-pm-upgrade:hover { background: rgba(202,130,98,0.36); transform: translateY(-1px); }

    /* Credits per agent */
    #vizion-app .vzn-pm-credits { margin-bottom: 1rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(255,255,255,0.03); box-shadow: inset 0 1px 1px rgba(255,255,255,0.06); }
    #vizion-app .vzn-pm-credits-title { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem; }
    #vizion-app .vzn-pm-credit { display: flex; align-items: center; justify-content: space-between; padding: 0.28rem 0; font-size: 0.82rem; }
    #vizion-app .vzn-pm-credit span { color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; }
    #vizion-app .vzn-pm-credit b { font-weight: 600; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
    #vizion-app .vzn-pm-credit b.out { color: #e76f6f; }

    #vizion-app .vzn-pm-agents {
      display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem;
      overflow-y: auto; min-height: 0; overscroll-behavior: contain;
      scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
    }
    #vizion-app .vzn-pm-agents::-webkit-scrollbar { width: 6px; }
    #vizion-app .vzn-pm-agents::-webkit-scrollbar-track { background: transparent; }
    #vizion-app .vzn-pm-agents::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.18); border-radius: 3px;
    }
    /* Cabecera, plan, creditos y pie no encogen: solo cede la lista. */
    #vizion-app .vzn-pm-head,
    #vizion-app .vzn-pm-plan,
    #vizion-app .vzn-pm-credits,
    #vizion-app .vzn-pm-foot { flex-shrink: 0; }
    #vizion-app .vzn-pm-foot { display: flex; flex-direction: column; gap: 0.5rem; }
    #vizion-app .vzn-pm-link {
      display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px;
      font-size: 0.84rem; color: var(--fg);
      background: rgba(255,255,255,0.03); box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
      transition: background .25s, transform .25s;
    }
    #vizion-app .vzn-pm-link span { font-size: 0.98rem; width: 1.3em; text-align: center; }
    #vizion-app .vzn-pm-link::after { content: '→'; margin-left: auto; color: var(--muted); font-size: 0.8rem; transition: color .25s, transform .25s; }
    #vizion-app .vzn-pm-link:hover { background: rgba(202,130,98,0.14); transform: translateY(-1px); }
    #vizion-app .vzn-pm-link:hover::after { color: var(--gold-lt); transform: translateX(3px); }

    #vizion-app .vzn-pm-signout {
      width: 100%; position: relative; overflow: hidden; padding: 0.8rem; border-radius: 12px;
      background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
      color: var(--muted); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
      cursor: pointer; transition: background .25s, color .25s, transform .25s;
    }
    #vizion-app .vzn-pm-signout:hover { background: rgba(202,130,98,0.16); color: var(--gold-lt); transform: translateY(-1px); }

    /* ═══════════════════════════════════════════════════
       UNIFIED BUTTON SYSTEM — liquid glass (coherent everywhere)
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-cta-primary,
    #vizion-app .vzn-stage-cta,
    #vizion-app .vzn-ru-cta-primary,
    #vizion-app .vzn-plan-cta.primary,
    #vizion-app .vzn-proposal-cta,
    #vizion-app .vzn-ds-cta,
    #vizion-app .vzn-btn-next {
      position: relative !important; overflow: hidden !important;
      background: rgba(202,130,98,0.18) !important;
      -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important;
      color: var(--fg) !important;
      border: none !important; border-radius: 999px !important;
      box-shadow: inset 0 1px 1px rgba(230,173,142,0.22) !important;
      transition: background .3s, transform .25s !important;
      text-shadow: none !important;
    }
    #vizion-app .vzn-cta-primary::before,
    #vizion-app .vzn-stage-cta::before,
    #vizion-app .vzn-ru-cta-primary::before,
    #vizion-app .vzn-plan-cta.primary::before,
    #vizion-app .vzn-proposal-cta::before,
    #vizion-app .vzn-ds-cta::before,
    #vizion-app .vzn-btn-next::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
      background: linear-gradient(180deg, rgba(230,173,142,0.6), rgba(230,173,142,0) 42%, rgba(230,173,142,0) 58%, rgba(230,173,142,0.6));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-cta-primary:hover,
    #vizion-app .vzn-stage-cta:hover,
    #vizion-app .vzn-ru-cta-primary:hover,
    #vizion-app .vzn-plan-cta.primary:hover,
    #vizion-app .vzn-proposal-cta:hover,
    #vizion-app .vzn-ds-cta:hover,
    #vizion-app .vzn-btn-next:hover {
      background: rgba(202,130,98,0.32) !important; transform: translateY(-2px) !important;
    }
    /* Secondary / ghost — subtle glass */
    #vizion-app .vzn-cta-secondary,
    #vizion-app .vzn-plan-cta.outline,
    #vizion-app .vzn-btn-back {
      position: relative !important; overflow: hidden !important;
      background: rgba(255,255,255,0.045) !important;
      -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
      color: var(--fg) !important;
      border: none !important; border-radius: 999px !important;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.1) !important;
      transition: background .3s !important;
    }
    #vizion-app .vzn-cta-secondary::before,
    #vizion-app .vzn-plan-cta.outline::before,
    #vizion-app .vzn-btn-back::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
      background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.4));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }
    #vizion-app .vzn-cta-secondary::after { display: none !important; }
    #vizion-app .vzn-cta-secondary:hover,
    #vizion-app .vzn-plan-cta.outline:hover,
    #vizion-app .vzn-btn-back:hover {
      background: rgba(255,255,255,0.1) !important; color: var(--fg) !important;
    }

    /* ═══════════════════════════════════════════════════
       UNIFIED CARD SYSTEM — liquid glass cuadrantes
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-how-card,
    #vizion-app .vzn-wyg-card,
    #vizion-app .vzn-stage-step,
    #vizion-app .vzn-plan,
    #vizion-app .vzn-proposal {
      position: relative; overflow: hidden;
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      border-radius: 16px !important;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.08) !important;
    }
    #vizion-app .vzn-how-card::before,
    #vizion-app .vzn-wyg-card::before,
    #vizion-app .vzn-stage-step::before,
    #vizion-app .vzn-plan::before,
    #vizion-app .vzn-proposal::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
      background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.34));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3;
    }
    /* featured plan — warm terracotta edge */
    #vizion-app .vzn-plan.featured::before {
      background: linear-gradient(180deg, rgba(230,173,142,0.55), rgba(230,173,142,0.06) 40%, rgba(230,173,142,0.06) 60%, rgba(230,173,142,0.55)) !important;
    }
    #vizion-app .vzn-plan.featured { background: rgba(202,130,98,0.07) !important; }
    /* glass chips / pills */
    #vizion-app .vzn-how-pill {
      background: rgba(255,255,255,0.05) !important;
      border: 1px solid rgba(255,255,255,0.14) !important;
      color: rgba(242,237,228,0.8) !important;
      border-radius: 999px !important;
    }
    /* enforce rounded corners on image cards */
    #vizion-app .vzn-how-card,
    #vizion-app .vzn-wyg-card,
    #vizion-app .vzn-proposal,
    #vizion-app .vzn-stage-step { overflow: hidden !important; }
    #vizion-app .vzn-how-card-visual,
    #vizion-app .vzn-wyg-card-img,
    #vizion-app .vzn-render-ph,
    #vizion-app .vzn-proposal .vzn-render-ph { border-radius: 0 !important; overflow: hidden; }
    #vizion-app .vzn-how-card-visual img,
    #vizion-app .vzn-wyg-card-img img { border-radius: 0 !important; }
    /* standalone image (Your photo) — rounded corners */
    #vizion-app .vzn-wyg-input img { border-radius: 16px !important; }
    #vizion-app .vzn-wyg-tag { border-radius: 6px; }

    /* ─── Hero (scroll-pinned video) ─── */
    /* Outer scroll container.
       - First 65% of scroll: video scrubs (transformation in progress)
       - Last 35% of scroll: hero stays pinned showing the final designed room */
    #vizion-app .vzn-hero {
      position: relative;
      height: 480vh;
      width: 100%;
    }
    /* Inner sticky pin — stays fixed in viewport while outer scrolls */
    #vizion-app .vzn-hero-pin {
      position: sticky; top: 0;
      height: 100vh;height: 100dvh; width: 100%;
      overflow: hidden;
      background: var(--bg);
    }
    /* The video itself */
    #vizion-app .vzn-hero-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      will-change: transform;
    }
    /* Loader sutil mientras descarga el video */
    #vizion-app .vzn-hero-loader {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 2px;
      background: rgba(242,237,228,0.06);
      z-index: 4;
      transition: opacity 0.6s 0.3s;
      pointer-events: none;
    }
    #vizion-app .vzn-hero-loader-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, transparent, var(--gold), var(--gold-lt));
      transition: width 0.15s ease-out;
      box-shadow: 0 0 12px rgba(201,169,110,0.6);
    }
    #vizion-app .vzn-hero-loader.done { opacity: 0; }
    #vizion-app .vzn-hero.is-loading .vzn-hero-cue { opacity: 0.25; }
    #vizion-app .vzn-hero-loader-text {
      position: absolute; bottom: 10px; left: 50%;
      transform: translateX(-50%);
      font-size: 0.5rem; letter-spacing: 0.32em;
      text-transform: uppercase; color: rgba(242,237,228,0.5);
      font-weight: 500;
    }
    /* Cinematic darken + warm tint overlay */
    #vizion-app .vzn-hero-overlay {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,0.65) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(0,0,0,0.45) 0%, transparent 60%),
        linear-gradient(180deg, rgba(11,10,8,0.35) 0%, rgba(11,10,8,0.1) 40%, rgba(11,10,8,0.55) 100%);
      pointer-events: none;
    }
    /* Subtle film grain on top of video */
    #vizion-app .vzn-hero-grain {
      position: absolute; inset: -20%;
      background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity: 0.35; mix-blend-mode: overlay;
      pointer-events: none;
      animation: vznGrainMove 8s steps(8) infinite;
    }
    /* Content overlay — centrado (2026-09-09): el CTA "Design my room — free"
       tiene que estar al centro y ser lo primero que se ve. */
    #vizion-app .vzn-hero-content {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 4rem;
      z-index: 2;
      pointer-events: none;
    }
    #vizion-app .vzn-hero-content-inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      pointer-events: auto;
      position: relative;
    }
    /* Scrim suave detrás del contenido centrado: sin esto el h1 en crema
       tenue sobre el render del cuarto casi no se lee. */
    #vizion-app .vzn-hero-content-inner::before {
      content: ''; position: absolute; z-index: -1;
      left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 140%; height: 260%;
      background: radial-gradient(ellipse at center, rgba(11,10,8,0.62) 0%, rgba(11,10,8,0.35) 45%, transparent 75%);
      pointer-events: none;
    }
    /* El CTA primario del hero: sólido, dorado, siempre visible (no depende del
       intro GSAP), y gana al "unified button system" con !important. */
    #vizion-app .vzn-hero-content .vzn-cta-primary {
      background: var(--gold) !important;
      color: var(--bg) !important;
      border: none !important;
      box-shadow: 0 12px 38px rgba(201,169,110,0.4) !important;
      opacity: 1 !important;
      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
      padding: 1.15rem 2.6rem;
    }
    #vizion-app .vzn-hero-content .vzn-cta-primary::before { display: none !important; }
    /* Red de seguridad: si el intro GSAP no completa, nada del hero queda
       invisible (el h1 ya usa yPercent, no opacity). El slide-in sigue si corre. */
    #vizion-app .vzn-hero-content .vzn-eyebrow,
    #vizion-app .vzn-hero-content .vzn-hero-sub,
    #vizion-app .vzn-hero-content .vzn-cta-row > * { opacity: 1 !important; }
    #vizion-app .vzn-hero-content .vzn-cta-primary:hover {
      background: var(--gold-lt) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 16px 46px rgba(201,169,110,0.5) !important;
    }
    /* Phase label — top-center small indicator (kept subtle) */
    #vizion-app .vzn-hero-phase {
      position: absolute; top: 5vh; left: 50%;
      transform: translateX(-50%);
      display: flex; gap: 0.55rem; align-items: center;
      font-size: 0.55rem; letter-spacing: 0.32em;
      text-transform: uppercase; color: rgba(242,237,228,0.5);
      font-weight: 500;
      z-index: 5;
    }
    #vizion-app .vzn-hero-phase .vzn-phase-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 10px rgba(201,169,110,0.8);
    }
    /* Eyebrow — small uppercase line above headline */
    #vizion-app .vzn-eyebrow {
      font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(242,237,228,0.5); font-weight: 500; margin-bottom: 1.3rem;
    }
    /* H1 — sans-serif, medium size, two lines max (Axentra-like) */
    #vizion-app .vzn-h1 {
      font-family: var(--serif); font-weight: 300;
      font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.12;
      letter-spacing: -0.015em; margin-bottom: 1.2rem;
      text-shadow: 0 4px 32px rgba(0,0,0,0.45);
      color: var(--fg);
    }
    #vizion-app .vzn-h1 em {
      font-style: italic; color: var(--gold-lt);
      font-weight: 300;
    }
    /* Subhead — small, low-opacity */
    #vizion-app .vzn-hero-sub {
      font-size: 0.8rem; line-height: 1.55;
      color: rgba(242,237,228,0.55);
      max-width: 480px; margin: 0 auto 2.2rem; font-weight: 300;
      text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }
    /* CTA row — centrado */
    #vizion-app .vzn-cta-row {
      display: flex; gap: 0.8rem; align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    /* Primario = "Design my room — free": sólido, dorado, imposible de no ver. */
    #vizion-app .vzn-cta-primary {
      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--bg);
      padding: 1.15rem 2.5rem;
      border: 1px solid var(--gold);
      border-radius: 999px;
      box-shadow: 0 10px 34px rgba(201,169,110,0.32);
      transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
      display: inline-flex; align-items: center; gap: 0.55rem;
    }
    #vizion-app .vzn-cta-primary::after {
      content: '→'; font-size: 0.85rem; opacity: 0.9;
      transition: transform 0.3s;
    }
    #vizion-app .vzn-cta-primary:hover {
      background: var(--gold-lt); color: var(--bg);
      border-color: var(--gold-lt);
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(201,169,110,0.42);
    }
    #vizion-app .vzn-cta-primary:hover::after {
      transform: translateX(3px);
    }
    #vizion-app .vzn-cta-ghost {
      font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em;
      text-transform: uppercase;
      background: transparent; color: rgba(242,237,228,0.7);
      padding: 0.85rem 1.4rem;
      border: 1px solid transparent;
      transition: color 0.25s;
    }
    #vizion-app .vzn-cta-ghost:hover {
      color: var(--gold-lt);
    }
    /* Secondary hero CTA — ghost text-link with subtle underline */
    #vizion-app .vzn-cta-secondary {
      font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em;
      text-transform: uppercase;
      background: transparent; color: rgba(242,237,228,0.75);
      padding: 0.85rem 1.2rem;
      border: none;
      position: relative;
      transition: color 0.25s;
    }
    #vizion-app .vzn-cta-secondary::after {
      content: ''; position: absolute;
      left: 1.2rem; right: 1.2rem; bottom: 0.7rem;
      height: 1px; background: rgba(242,237,228,0.3);
      transition: background 0.25s;
    }
    #vizion-app .vzn-cta-secondary:hover {
      color: var(--gold-lt);
    }
    #vizion-app .vzn-cta-secondary:hover::after {
      background: var(--gold-lt);
    }
    /* Scroll cue — bottom-right corner, vertical line */
    #vizion-app .vzn-hero-cue {
      position: absolute; bottom: 5vh; right: 3rem;
      display: flex; flex-direction: column; align-items: center;
      gap: 0.55rem;
      font-size: 0.5rem; letter-spacing: 0.32em;
      text-transform: uppercase; color: rgba(242,237,228,0.45);
      font-weight: 500;
      animation: vznGoldFloat 2.4s ease-in-out infinite;
      z-index: 3;
    }
    #vizion-app .vzn-hero-cue-line {
      width: 1px; height: 28px;
      background: linear-gradient(180deg, var(--gold), transparent);
    }
    /* Proof points — minimal, hidden on this layout (we removed them for cleaner look) */
    #vizion-app .vzn-hero-proof {
      display: none;
    }
    /* Mobile */
    @media (max-width: 768px) {
      #vizion-app .vzn-hero { height: 380vh; }
      #vizion-app .vzn-hero-proof { display: none; }
      #vizion-app .vzn-hero-cue { bottom: 3vh; }
      #vizion-app .vzn-hero-content { padding: 0 1.2rem; }
    }

    /* ─── Before/After Slider ─── */
    #vizion-app .vzn-slider {
      position: relative; width: 100%; height: 520px;
      overflow: hidden; cursor: col-resize; user-select: none;
      border-radius: 2px; background: var(--lift);
    }
    #vizion-app .vzn-slider-before,
    #vizion-app .vzn-slider-after {
      position: absolute; inset: 0; width: 100%; height: 100%;
      background-size: cover; background-position: center;
    }
    #vizion-app .vzn-slider-after {
      clip-path: inset(0 58% 0 0);
      transition: clip-path 0.05s;
    }
    #vizion-app .vzn-slider-divider {
      position: absolute; top: 0; bottom: 0; left: 42%;
      width: 2px; background: rgba(255,255,255,0.9);
      transform: translateX(-50%); pointer-events: none;
      transition: left 0.05s;
    }
    #vizion-app .vzn-slider-handle {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: #F2EDE4;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
      font-size: 11px; color: #0B0A08;
    }
    #vizion-app .vzn-slider-label {
      position: absolute; bottom: 16px;
      font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
      pointer-events: none;
    }
    #vizion-app .vzn-slider-label-before { left: 20px; color: rgba(255,255,255,0.45); }
    #vizion-app .vzn-slider-label-after  { right: 20px; color: rgba(201,169,110,0.8); }
    #vizion-app .vzn-slider-caption {
      text-align: center; font-size: 0.62rem; color: var(--dim);
      letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.75rem;
    }

    /* ─── How It Works ─── */
    #vizion-app .vzn-h2 {
      font-family: var(--serif); font-weight: 300;
      font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 1.08;
    }
    #vizion-app .vzn-h2 em { font-style: italic; }

    /* ── GLOBAL cursor glow orb ── */
    #vzn-glow {
      position: fixed; top: 0; left: 0;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(201,169,110,0.13) 0%,
        rgba(201,169,110,0.06) 30%,
        transparent 68%
      );
      pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%) translate3d(0,0,0);
      will-change: transform;
      /* smooth follow */
      transition: opacity .4s ease;
      opacity: 0; /* hidden until first mousemove */
    }

    /* ── THE PROCESS ── */
    #vizion-app .vzn-how {
      padding: 9rem 3rem; border-top: 1px solid var(--border);
      overflow: hidden; position: relative;
      /* stronger warm gradient base */
      background:
        radial-gradient(ellipse 90% 55% at 50% 105%, rgba(201,169,110,0.09) 0%, transparent 68%),
        radial-gradient(ellipse 55% 40% at 10% 0%,   rgba(201,169,110,0.05) 0%, transparent 55%),
        var(--bg);
    }
    #vizion-app .vzn-how-inner { position: relative; z-index: 1; }
    #vizion-app .vzn-how-inner { max-width: 1300px; margin: 0 auto; }
    #vizion-app .vzn-how-header { margin-bottom: 6rem; }

    /* Steps row */
    #vizion-app .vzn-how-grid {
      display: grid;
      grid-template-columns: 1fr 80px 1fr 80px 1fr;
      gap: 0; align-items: start;
    }
    /* Connector arrow between steps */
    #vizion-app .vzn-how-connector {
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-start;
      padding-top: 5rem; gap: .3rem;
    }
    #vizion-app .vzn-how-connector-line {
      width: 24px; height: 1px; background: var(--border);
    }
    #vizion-app .vzn-how-connector-arrow {
      width: 0; height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 6px solid var(--border);
    }

    /* Each step card */
    #vizion-app .vzn-how-card { position: relative; padding: 0; }
    #vizion-app .vzn-how-card-visual {
      width: 100%; aspect-ratio: 4/3; overflow: hidden;
      margin-bottom: 2rem; background: var(--lift);
      position: relative;
    }
    #vizion-app .vzn-how-card-visual img {
      width: 100%; height: 100%; object-fit: cover;
      filter: brightness(0.7) saturate(0.55);
      transition: filter 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1);
    }
    #vizion-app .vzn-how-card:hover .vzn-how-card-visual img {
      filter: brightness(0.88) saturate(0.8);
      transform: scale(1.05);
    }
    /* Big ghost number inside image */
    #vizion-app .vzn-how-card-visual-num {
      position: absolute; bottom: 0.8rem; left: 1.2rem;
      font-family: var(--serif); font-size: 6rem; font-weight: 300;
      color: rgba(201,169,110,0.15); line-height: 1;
      pointer-events: none; user-select: none;
    }
    /* Step badge */
    #vizion-app .vzn-how-card-tag {
      position: absolute; top: .85rem; right: .85rem;
      font-family: var(--sans); font-size: .6rem; font-weight: 500;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); background: rgba(11,10,8,.72);
      border: 1px solid rgba(201,169,110,.22);
      padding: .25rem .65rem; backdrop-filter: blur(8px);
    }
    #vizion-app .vzn-how-num {
      font-family: var(--sans); font-size: .7rem; font-weight: 500;
      color: var(--gold); letter-spacing: .16em; text-transform: uppercase;
      margin-bottom: .55rem; display: block;
    }
    #vizion-app .vzn-how-title {
      font-family: var(--serif); font-size: 1.6rem; font-weight: 400;
      margin-bottom: .8rem; line-height: 1.2; color: var(--fg);
    }
    #vizion-app .vzn-how-body {
      font-size: .875rem; color: var(--muted); line-height: 1.8;
    }
    #vizion-app .vzn-how-pills {
      display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem;
    }
    #vizion-app .vzn-how-pill {
      font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--dim); border: 1px solid var(--border);
      padding: .2rem .6rem; font-family: var(--sans);
    }
    /* inner text padding (glass cards) */
    #vizion-app .vzn-how-num,
    #vizion-app .vzn-how-title,
    #vizion-app .vzn-how-body,
    #vizion-app .vzn-how-pills { padding-left: 1.7rem; padding-right: 1.7rem; }
    #vizion-app .vzn-how-card { padding-bottom: 1.7rem !important; }
    /* hero CTAs — identical box, aligned in rest state */
    #vizion-app .vzn-cta-row { align-items: center !important; }
    #vizion-app .vzn-cta-primary,
    #vizion-app .vzn-cta-secondary {
      height: 48px !important; line-height: 1 !important;
      padding-top: 0 !important; padding-bottom: 0 !important;
      margin: 0 !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      box-sizing: border-box !important;
      transform: none;
      transition: background .3s, transform .25s !important;
    }
    #vizion-app .vzn-cta-primary:hover,
    #vizion-app .vzn-cta-secondary:hover { transform: translateY(-2px) !important; }
    @media (max-width: 900px) {
      #vizion-app .vzn-how-grid {
        grid-template-columns: 1fr; gap: 3rem;
      }
      #vizion-app .vzn-how-connector { display: none; }
    }

    /* ═══════════════════════════════════════════════════
       DESIGN FLOW WIZARD
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-flow {
      padding: 8rem 3rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-flow-inner { max-width: 1280px; margin: 0 auto; }
    #vizion-app .vzn-flow-header { text-align: left; margin-bottom: 4rem; max-width: 760px; }
    #vizion-app .vzn-flow-header .vzn-h2 { margin-top: 1rem; }

    /* Step indicator */
    #vizion-app .vzn-steps {
      display: flex; align-items: center; justify-content: center;
      gap: 0; margin-bottom: 3.5rem;
    }
    #vizion-app .vzn-step-dot {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem; color: var(--dim); letter-spacing: 0.05em;
      transition: all 0.3s; flex-shrink: 0;
    }
    #vizion-app .vzn-step-dot.active {
      border-color: var(--gold); background: var(--gold); color: var(--bg);
    }
    #vizion-app .vzn-step-dot.done {
      border-color: var(--gold); background: transparent; color: var(--gold);
    }
    #vizion-app .vzn-step-line {
      height: 1px; width: 60px; background: var(--border); flex-shrink: 0;
      transition: background 0.4s;
    }
    #vizion-app .vzn-step-line.done { background: var(--gold); }

    /* Wizard panels */
    #vizion-app .vzn-wiz-panel {
      display: none; animation: vznFadeUp 0.45s cubic-bezier(.16,1,.3,1) both;
    }
    #vizion-app .vzn-wiz-panel.active { display: block; }

    #vizion-app .vzn-wiz-title {
      font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 300; margin-bottom: 0.6rem;
    }
    #vizion-app .vzn-wiz-title em { font-style: italic; color: var(--gold-lt); }
    #vizion-app .vzn-wiz-sub {
      font-size: 0.88rem; color: var(--muted); margin-bottom: 2.5rem;
      line-height: 1.6;
    }

    /* Option grid */
    #vizion-app .vzn-opt-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
      margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    #vizion-app .vzn-opt {
      padding: 1.8rem 1.5rem; background: var(--bg);
      border: 1px solid var(--border); cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      text-align: left; position: relative;
    }
    #vizion-app .vzn-opt:hover { border-color: var(--dim-line); background: var(--lift); }
    #vizion-app .vzn-opt.selected {
      border-color: var(--gold); background: rgba(201,169,110,0.06);
    }
    #vizion-app .vzn-opt.selected::after {
      content: '✓'; position: absolute; top: 10px; right: 12px;
      font-size: 0.7rem; color: var(--gold);
    }
    #vizion-app .vzn-opt-icon {
      font-size: 1.4rem; margin-bottom: 0.75rem; display: block;
    }
    #vizion-app .vzn-opt-label {
      font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--fg); display: block;
    }
    #vizion-app .vzn-opt-desc {
      font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem;
      display: block; line-height: 1.5;
    }

    /* Budget cards */
    #vizion-app .vzn-budget-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
      margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-budget-card {
      padding: 2rem 1.2rem; background: var(--bg);
      border: 1px solid var(--border); cursor: pointer; text-align: center;
      transition: border-color 0.2s, background 0.2s;
    }
    #vizion-app .vzn-budget-card:hover { border-color: var(--dim-line); background: var(--lift); }
    #vizion-app .vzn-budget-card.selected {
      border-color: var(--gold); background: rgba(201,169,110,0.06);
    }
    #vizion-app .vzn-budget-amount {
      font-family: var(--serif); font-size: 1.6rem; font-weight: 400;
      color: var(--fg); display: block; margin-bottom: 0.3rem;
    }
    #vizion-app .vzn-budget-label {
      font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }

    /* Textarea */
    #vizion-app .vzn-textarea {
      width: 100%; background: var(--bg); border: 1px solid var(--border);
      color: var(--fg); font-family: var(--sans); font-size: 0.92rem;
      font-weight: 300; padding: 1.4rem; resize: none;
      outline: none; transition: border-color 0.2s;
      line-height: 1.7; min-height: 130px;
      margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-textarea:focus { border-color: var(--dim-line); }
    #vizion-app .vzn-textarea::placeholder { color: var(--dim); }

    /* Upload zone */
    #vizion-app .vzn-upload-zone {
      border: 1px dashed var(--border); background: var(--bg);
      padding: 4rem 2rem; text-align: center; cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      margin-bottom: 2.5rem; position: relative;
    }
    #vizion-app .vzn-upload-zone:hover,
    #vizion-app .vzn-upload-zone.drag-over {
      border-color: var(--gold); background: rgba(201,169,110,0.04);
    }
    #vizion-app .vzn-upload-zone input[type="file"] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer;
    }
    #vizion-app .vzn-upload-icon {
      font-size: 2.2rem; display: block; margin-bottom: 1rem; color: var(--dim);
    }
    #vizion-app .vzn-upload-label {
      font-size: 0.85rem; color: var(--muted); line-height: 1.6;
    }
    #vizion-app .vzn-upload-label strong { color: var(--gold); }
    #vizion-app .vzn-upload-preview {
      width: 100%; height: 220px; object-fit: cover;
      display: none; margin-bottom: 1rem;
    }
    #vizion-app .vzn-upload-preview.show { display: block; }

    /* Navigation buttons */
    #vizion-app .vzn-wiz-nav {
      display: flex; gap: 1rem; align-items: center;
    }
    #vizion-app .vzn-btn-next {
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
      text-transform: uppercase; background: var(--gold); color: var(--bg);
      padding: 1rem 2.8rem; transition: background 0.2s; flex-shrink: 0;
    }
    #vizion-app .vzn-btn-next:hover { background: var(--gold-lt); }
    #vizion-app .vzn-btn-back {
      font-size: 0.7rem; font-weight: 400; letter-spacing: 0.12em;
      text-transform: uppercase; background: none; color: var(--dim);
      padding: 1rem 1.5rem; transition: color 0.2s; border: 1px solid var(--border);
    }
    #vizion-app .vzn-btn-back:hover { color: var(--fg); border-color: var(--dim-line); }

    /* ─── Loading screen ─── */
    #vizion-app .vzn-loading {
      display: none; text-align: center; padding: 5rem 2rem;
    }
    #vizion-app .vzn-loading.active { display: block; }
    #vizion-app .vzn-loading-ring {
      width: 56px; height: 56px;
      border: 1px solid var(--border);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: vznSpin 1.2s linear infinite;
      margin: 0 auto 2rem;
    }
    #vizion-app .vzn-loading-title {
      font-family: var(--serif); font-size: 2rem; font-weight: 300;
      margin-bottom: 0.75rem;
    }
    #vizion-app .vzn-loading-sub {
      font-size: 0.82rem; color: var(--muted); margin-bottom: 3rem;
      letter-spacing: 0.06em;
    }
    #vizion-app .vzn-loading-steps {
      max-width: 340px; margin: 0 auto; text-align: left;
    }
    #vizion-app .vzn-lstep {
      display: flex; align-items: center; gap: 1rem;
      padding: 0.75rem 0; border-bottom: 1px solid var(--border);
      font-size: 0.78rem; color: var(--dim);
      transition: color 0.4s;
    }
    #vizion-app .vzn-lstep.done { color: var(--fg); }
    #vizion-app .vzn-lstep.active { color: var(--gold); }
    #vizion-app .vzn-lstep-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--border); flex-shrink: 0; transition: background 0.4s;
    }
    #vizion-app .vzn-lstep.done .vzn-lstep-dot  { background: var(--fg); }
    #vizion-app .vzn-lstep.active .vzn-lstep-dot { background: var(--gold); animation: vznPulse 1s infinite; }

    /* ═══════════════════════════════════════════════════
       RESULTS PREVIEW
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-results {
      padding: 8rem 3rem; border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-results-inner { max-width: 1300px; margin: 0 auto; }
    #vizion-app .vzn-results-header { margin-bottom: 5rem; }

    #vizion-app .vzn-proposals-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
    }
    #vizion-app .vzn-proposal {
      background: var(--surface); border: 1px solid var(--border);
      overflow: hidden;
    }
    #vizion-app .vzn-proposal-tag {
      padding: 0.4rem 1.2rem; display: inline-block;
      font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    }
    #vizion-app .vzn-proposal-tag.tag-a { background: var(--gold); color: var(--bg); }
    #vizion-app .vzn-proposal-tag.tag-b { background: var(--lift); color: var(--muted); }
    #vizion-app .vzn-proposal-tag.tag-c { background: var(--lift); color: var(--muted); }
    #vizion-app .vzn-proposal-header {
      padding: 0.75rem 1.5rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }
    #vizion-app .vzn-proposal-name {
      font-family: var(--serif); font-size: 1.35rem; font-weight: 400;
      margin-top: 0.5rem;
    }
    #vizion-app .vzn-proposal-style {
      font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    /* Render placeholder */
    #vizion-app .vzn-render-ph {
      width: 100%; height: 210px; background: var(--lift);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative;
    }
    #vizion-app .vzn-render-ph-text {
      font-family: var(--serif); font-size: 0.75rem; color: var(--dim);
      letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
      line-height: 2;
    }
    #vizion-app .vzn-render-ph::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, transparent 60%, rgba(201,169,110,0.07) 100%);
    }
    /* Product list */
    #vizion-app .vzn-product-list { padding: 1.25rem 1.5rem; }
    #vizion-app .vzn-product {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 0.6rem 0; border-bottom: 1px solid var(--border);
      font-size: 0.8rem; gap: 1rem;
      text-decoration: none; color: inherit;
      transition: background 0.2s ease;
    }
    #vizion-app a.vzn-product:hover { background: rgba(201,169,110,0.05); }
    #vizion-app a.vzn-product:hover .vzn-product-name { color: var(--gold); }
    #vizion-app .vzn-product:last-child { border-bottom: none; }
    #vizion-app .vzn-product-name { color: var(--fg); flex: 1; transition: color 0.2s ease; }
    #vizion-app .vzn-product-brand { color: var(--dim); font-size: 0.68rem; display: block; margin-top: 1px; }
    #vizion-app .vzn-product-price { color: var(--gold); font-size: 0.78rem; white-space: nowrap; }
    #vizion-app .vzn-proposal-total {
      padding: 1rem 1.5rem;
      background: rgba(201,169,110,0.04);
      border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    #vizion-app .vzn-total-label {
      font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted);
    }
    #vizion-app .vzn-total-amount {
      font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--fg);
    }
    #vizion-app .vzn-proposal-cta {
      width: 100%; padding: 0.95rem; background: var(--bg);
      border-top: 1px solid var(--border);
      font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--gold); text-align: center;
      transition: background 0.2s, color 0.2s;
    }
    #vizion-app .vzn-proposal-cta:hover { background: var(--gold); color: var(--bg); }

    /* ═══════════════════════════════════════════════════
       RENDER UPGRADE
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-render-upgrade {
      padding: 8rem 3rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-render-upgrade-inner {
      max-width: 1300px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
      align-items: center;
    }
    #vizion-app .vzn-upgrade-text { max-width: 520px; }
    #vizion-app .vzn-upgrade-text .vzn-h2 { margin-top: 1rem; margin-bottom: 1.5rem; }
    #vizion-app .vzn-upgrade-body {
      font-size: 0.95rem; color: var(--muted); line-height: 1.75;
      margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-upgrade-list {
      list-style: none; margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-upgrade-list li {
      padding: 0.55rem 0; border-bottom: 1px solid var(--border);
      font-size: 0.82rem; color: var(--muted);
      display: flex; align-items: center; gap: 0.85rem;
    }
    #vizion-app .vzn-upgrade-list li::before {
      content: ''; width: 20px; height: 1px; background: var(--gold); flex-shrink: 0;
    }
    #vizion-app .vzn-upgrade-visual {
      position: relative; height: 500px; background: var(--lift);
      overflow: hidden;
    }
    #vizion-app .vzn-upgrade-visual-inner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 1rem;
    }
    #vizion-app .vzn-upgrade-visual-text {
      font-family: var(--serif); font-size: 1rem; color: var(--dim);
      letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
    }
    #vizion-app .vzn-upgrade-badge {
      position: absolute; top: 2rem; right: 2rem;
      border: 1px solid var(--gold); padding: 0.5rem 1rem;
      font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold);
    }
    /* comparison bars in visual */
    #vizion-app .vzn-compare-bars {
      width: 80%; position: absolute; bottom: 2.5rem; left: 10%;
    }
    #vizion-app .vzn-bar-row {
      display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem;
    }
    #vizion-app .vzn-bar-label {
      font-size: 0.6rem; color: var(--dim); letter-spacing: 0.12em;
      text-transform: uppercase; width: 60px; flex-shrink: 0;
    }
    #vizion-app .vzn-bar-track {
      flex: 1; height: 2px; background: var(--border); overflow: hidden;
    }
    #vizion-app .vzn-bar-fill {
      height: 100%; background: var(--gold);
      transform-origin: left center;
      /* GSAP animates scaleX — no CSS animation needed */
    }

    /* ═══════════════════════════════════════════════════
       PRICING
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-pricing {
      padding: 8rem 3rem; border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-pricing-inner { max-width: 1100px; margin: 0 auto; }
    #vizion-app .vzn-pricing-header { text-align: center; margin-bottom: 5rem; }
    #vizion-app .vzn-pricing-header .vzn-h2 { margin-top: 1rem; }
    #vizion-app .vzn-pricing-sub {
      font-size: 0.9rem; color: var(--muted); margin-top: 1rem; line-height: 1.7;
    }

    #vizion-app .vzn-pricing-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
    }
    #vizion-app .vzn-plan {
      padding: 3rem 2.5rem; background: var(--surface);
      border: 1px solid var(--border); position: relative;
    }
    #vizion-app .vzn-plan.featured {
      background: var(--card); border-color: var(--gold);
    }
    #vizion-app .vzn-plan-popular {
      position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
      background: var(--gold); color: var(--bg);
      font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0.35rem 1.2rem;
    }
    #vizion-app .vzn-plan-name {
      font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
      margin-bottom: 0.5rem;
    }
    #vizion-app .vzn-plan-desc {
      font-size: 0.78rem; color: var(--muted); margin-bottom: 2rem;
      line-height: 1.6;
    }
    #vizion-app .vzn-plan-price {
      margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border);
      display: flex; align-items: baseline; gap: 0.3rem;
    }
    #vizion-app .vzn-price-amount {
      font-family: var(--serif); font-size: 3.2rem; font-weight: 300;
    }
    #vizion-app .vzn-price-period {
      font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em;
    }
    #vizion-app .vzn-plan-features {
      list-style: none; margin-bottom: 2.5rem;
    }
    #vizion-app .vzn-plan-features li {
      padding: 0.55rem 0; border-bottom: 1px solid var(--border);
      font-size: 0.82rem; color: var(--muted);
      display: flex; align-items: flex-start; gap: 0.75rem;
    }
    #vizion-app .vzn-plan-features li::before {
      content: '—'; color: var(--gold); flex-shrink: 0; margin-top: 0.05em;
    }
    #vizion-app .vzn-plan-features li.included { color: var(--fg); }
    #vizion-app .vzn-plan-cta {
      width: 100%; padding: 1rem; text-align: center;
      font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 500; transition: all 0.2s;
      display: block; text-decoration: none; cursor: pointer; box-sizing: border-box;
    }
    #vizion-app .vzn-plan-cta.primary { background: var(--gold); color: var(--bg); }
    #vizion-app .vzn-plan-cta.primary:hover { background: var(--gold-lt); }
    #vizion-app .vzn-plan-cta.outline {
      background: none; color: var(--muted);
      border: 1px solid var(--border);
    }
    #vizion-app .vzn-plan-cta.outline:hover { border-color: var(--dim-line); color: var(--fg); }
    /* plan actual / no comprable */
    #vizion-app .vzn-plan-cta.is-disabled {
      cursor: default; opacity: .55; pointer-events: auto;
      background: rgba(255,255,255,.04); color: var(--muted);
      border: 1px solid var(--border);
    }
    #vizion-app .vzn-plan-cta.is-disabled:hover { background: rgba(255,255,255,.04); color: var(--muted); border-color: var(--border); }
    #vizion-app .vzn-plan-cta.is-current {
      opacity: 1; color: var(--gold-lt);
      border: 1px solid rgba(202,130,98,.4); background: rgba(202,130,98,.08);
    }
    #vizion-app .vzn-plan-cta.is-current:hover { color: var(--gold-lt); background: rgba(202,130,98,.08); border-color: rgba(202,130,98,.4); }

    /* ── pricing v2: 4 plans + billing toggle + per-agent rows ── */
    #vizion-app .vzn-pricing-inner { max-width: 1340px; }
    #vizion-app .vzn-pricing-grid { grid-template-columns: repeat(4, 1fr); }
    #vizion-app .vzn-plan { padding: 2.4rem 1.5rem; }
    #vizion-app .vzn-plan-name { font-size: 1.35rem; }
    #vizion-app .vzn-plan-desc { font-size: 0.74rem; min-height: 3.4em; margin-bottom: 1.5rem; }
    #vizion-app .vzn-plan-price { margin-bottom: 1.3rem; padding-bottom: 1.3rem; }
    #vizion-app .vzn-price-amount { font-size: 2.5rem; }
    #vizion-app .vzn-price-note { font-size: 0.6rem; color: var(--gold-lt); letter-spacing: 0.05em; margin: -0.5rem 0 1.4rem; min-height: 0.9em; }
    #vizion-app .vzn-plan-features { margin-bottom: 1.8rem; }
    #vizion-app .vzn-plan-features li { font-size: 0.76rem; padding: 0.5rem 0; line-height: 1.4; }
    #vizion-app .vzn-plan-features li.agent { color: var(--fg); font-weight: 500; }
    #vizion-app .vzn-plan-features li.agent::before { content: none; }
    /* credits highlight — big number */
    #vizion-app .vzn-plan-features li.credit-hl { color: var(--gold-lt); font-weight: 500; font-size: 1rem; align-items: baseline; padding: 0.2rem 0 0.7rem; }
    #vizion-app .vzn-plan-features li.credit-hl::before { content: none; }
    #vizion-app .vzn-plan-features li.credit-hl .vzn-feat-ico { font-size: 1.15rem; }
    #vizion-app .vzn-plan-features li.credit-hl b { font-size: 1.75rem; color: var(--fg); font-weight: 500; margin-right: 0.15rem; line-height: 1; }
    #vizion-app .vzn-feat-ico { flex-shrink: 0; font-size: 0.9rem; line-height: 1.35; width: 1.15em; text-align: center; }
    #vizion-app .vzn-pricing-foot { text-align: center; font-size: 0.72rem; color: var(--dim); margin-top: 2.2rem; line-height: 1.6; }
    /* billing toggle */
    #vizion-app .vzn-billing-wrap { display: flex; justify-content: center; margin-bottom: 3.5rem; }
    #vizion-app .vzn-billing { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem; background: var(--surface); }
    #vizion-app .vzn-bill-opt { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.55rem 1.15rem; border-radius: 999px; transition: all 0.25s; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
    #vizion-app .vzn-bill-opt.active { background: var(--gold); color: var(--bg); }
    #vizion-app .vzn-billing-save { font-size: 0.54rem; padding: 0.12rem 0.42rem; border-radius: 999px; background: rgba(202,130,98,0.18); color: var(--gold-lt); }
    #vizion-app .vzn-bill-opt.active .vzn-billing-save { background: rgba(0,0,0,0.2); color: var(--bg); }
    @media (max-width: 1180px) { #vizion-app .vzn-pricing-grid { grid-template-columns: repeat(2, 1fr); } }

    /* ═══════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-footer {
      padding: 5rem 3rem 3rem;
      border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-footer-inner {
      max-width: 1300px; margin: 0 auto;
    }
    #vizion-app .vzn-footer-top {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid var(--border);
    }
    #vizion-app .vzn-footer-brand .vzn-logo {
      font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.18em;
      font-weight: 500; color: var(--fg); display: block; margin-bottom: 1rem;
    }
    #vizion-app .vzn-footer-tagline {
      font-size: 0.82rem; color: var(--muted); line-height: 1.7;
      max-width: 240px;
    }
    #vizion-app .vzn-footer-col-title {
      font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dim); margin-bottom: 1.5rem;
    }
    #vizion-app .vzn-footer-links { list-style: none; }
    #vizion-app .vzn-footer-links li { margin-bottom: 0.75rem; }
    #vizion-app .vzn-footer-links a, #vizion-app .vzn-footer-links button {
      font-size: 0.82rem; color: var(--muted); cursor: pointer;
      background: none; text-decoration: none; letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    #vizion-app .vzn-footer-links a:hover,
    #vizion-app .vzn-footer-links button:hover { color: var(--fg); }
    #vizion-app .vzn-footer-bottom {
      padding-top: 2rem; display: flex;
      justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    }
    #vizion-app .vzn-footer-copy {
      font-size: 0.7rem; color: var(--dim); letter-spacing: 0.06em;
    }
    #vizion-app .vzn-footer-legal {
      display: flex; gap: 2rem;
    }
    #vizion-app .vzn-footer-legal a {
      font-size: 0.7rem; color: var(--dim); text-decoration: none;
      letter-spacing: 0.06em; transition: color 0.2s;
    }
    #vizion-app .vzn-footer-legal a:hover { color: var(--muted); }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      #vizion-app .vzn-render-upgrade-inner { grid-template-columns: 1fr; gap: 3rem; }
      #vizion-app .vzn-upgrade-visual { height: 320px; }
      #vizion-app .vzn-footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    }
    @media (max-width: 900px) {
      #vizion-app .vzn-nav { padding: 1rem 1.5rem; }
      #vizion-app .vzn-nav-links { gap: 1.2rem; }
      #vizion-app .vzn-nav-link { display: none; }
      #vizion-app .vzn-hero { padding: 6rem 1.5rem 3rem; }
      #vizion-app .vzn-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
      #vizion-app .vzn-slider { height: 360px; }
      #vizion-app .vzn-how { padding: 5rem 1.5rem; }
      #vizion-app .vzn-how-grid { grid-template-columns: 1fr; }
      #vizion-app .vzn-hero-stats { gap: 1.5rem; }
      #vizion-app .vzn-flow { padding: 5rem 1.5rem; }
      #vizion-app .vzn-opt-grid { grid-template-columns: repeat(2, 1fr); }
      #vizion-app .vzn-budget-grid { grid-template-columns: repeat(2, 1fr); }
      #vizion-app .vzn-results { padding: 5rem 1.5rem; }
      #vizion-app .vzn-proposals-grid { grid-template-columns: 1fr; }
      #vizion-app .vzn-render-upgrade { padding: 5rem 1.5rem; }
      #vizion-app .vzn-pricing { padding: 5rem 1.5rem; }
      #vizion-app .vzn-pricing-grid { grid-template-columns: 1fr; }
      #vizion-app .vzn-footer { padding: 3rem 1.5rem 2rem; }
      #vizion-app .vzn-footer-top { grid-template-columns: 1fr; gap: 2rem; }
      #vizion-app .vzn-step-line { width: 32px; }
    }

    /* ═══════════════════════════════════════════════════
       PROOF BAND — retailer logos + numeric anchors
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-proof {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 3.5rem 4rem;
    }
    #vizion-app .vzn-proof-inner {
      max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr auto;
      gap: 3rem; align-items: center;
    }
    #vizion-app .vzn-proof-label {
      font-size: 0.55rem; letter-spacing: 0.32em;
      text-transform: uppercase; color: var(--muted);
      font-weight: 500; margin-bottom: 1.2rem;
    }
    #vizion-app .vzn-proof-logos {
      display: flex; flex-wrap: wrap;
      gap: 2.2rem; align-items: center;
    }
    #vizion-app .vzn-proof-logo {
      font-family: var(--serif); font-style: italic;
      font-size: 1.15rem; font-weight: 400;
      color: rgba(242,237,228,0.5);
      letter-spacing: 0.01em;
      transition: color 0.25s;
    }
    #vizion-app .vzn-proof-logo:hover { color: var(--gold-lt); }
    #vizion-app .vzn-proof-stats {
      display: flex; gap: 2.4rem;
      padding-left: 2.4rem;
      border-left: 1px solid var(--border);
    }
    #vizion-app .vzn-proof-stat {
      display: flex; flex-direction: column; gap: 0.35rem;
    }
    #vizion-app .vzn-proof-num {
      font-family: var(--serif); font-weight: 300;
      font-size: 1.7rem; color: var(--gold);
      line-height: 1;
    }
    #vizion-app .vzn-proof-cap {
      font-size: 0.55rem; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--muted);
      font-weight: 500;
    }
    @media (max-width: 968px) {
      #vizion-app .vzn-proof { padding: 2.5rem 1.5rem; }
      #vizion-app .vzn-proof-inner { grid-template-columns: 1fr; gap: 2rem; }
      #vizion-app .vzn-proof-stats {
        padding-left: 0; border-left: none;
        padding-top: 1.5rem; border-top: 1px solid var(--border);
        justify-content: space-between; width: 100%;
      }
      #vizion-app .vzn-proof-logo { font-size: 1rem; }
    }

    /* ═══════════════════════════════════════════════════
       WHAT YOU GET — deliverable visualization
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-wyg {
      padding: 9rem 4rem;
      background: var(--bg);
      position: relative;
    }
    #vizion-app .vzn-wyg-inner {
      max-width: 1280px; margin: 0 auto;
    }
    #vizion-app .vzn-wyg-header {
      max-width: 720px; margin-bottom: 5rem;
    }
    #vizion-app .vzn-wyg-sub {
      font-size: 0.95rem; line-height: 1.65;
      color: var(--muted); font-weight: 300;
      margin-top: 1.4rem; max-width: 560px;
    }
    #vizion-app .vzn-wyg-flow {
      display: grid;
      grid-template-columns: 1fr auto 1.4fr;
      gap: 3rem; align-items: stretch;
    }
    /* Input column */
    #vizion-app .vzn-wyg-input {
      display: flex; flex-direction: column;
      position: relative;
    }
    #vizion-app .vzn-wyg-tag {
      position: absolute; top: 1rem; left: 1rem;
      font-size: 0.55rem; letter-spacing: 0.28em;
      text-transform: uppercase; color: var(--bg);
      background: var(--gold); padding: 0.4rem 0.8rem;
      font-weight: 600; z-index: 2;
    }
    #vizion-app .vzn-wyg-input img {
      width: 100%; aspect-ratio: 4/5;
      object-fit: cover;
      border: 1px solid var(--border);
      filter: brightness(0.96) contrast(1.02);
    }
    #vizion-app .vzn-wyg-caption {
      margin-top: 1rem;
      font-family: var(--serif); font-style: italic;
      font-size: 0.95rem; color: var(--muted);
      text-align: center;
    }
    /* Arrow column */
    #vizion-app .vzn-wyg-arrow {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 1.2rem; min-width: 120px;
    }
    #vizion-app .vzn-wyg-arrow-label {
      font-size: 0.55rem; letter-spacing: 0.28em;
      text-transform: uppercase; color: var(--gold);
      font-weight: 500; text-align: center;
      max-width: 110px; line-height: 1.6;
    }
    #vizion-app .vzn-wyg-arrow-svg {
      width: 80px; height: 24px; color: var(--gold);
      opacity: 0.6;
    }
    /* Output column */
    #vizion-app .vzn-wyg-outputs {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1.1rem;
    }
    #vizion-app .vzn-wyg-card {
      background: var(--surface);
      border: 1px solid var(--border);
      display: flex; flex-direction: column;
      transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.3s;
    }
    #vizion-app .vzn-wyg-card:hover {
      transform: translateY(-4px);
      border-color: var(--dim-line);
    }
    #vizion-app .vzn-wyg-card-img {
      position: relative; aspect-ratio: 4/5;
      overflow: hidden; background: var(--lift);
    }
    #vizion-app .vzn-wyg-card-img img {
      width: 100%; height: 100%; object-fit: cover;
    }
    #vizion-app .vzn-wyg-card-tag {
      position: absolute; top: 0.8rem; left: 0.8rem;
      font-size: 0.5rem; letter-spacing: 0.26em;
      text-transform: uppercase; padding: 0.32rem 0.65rem;
      font-weight: 600; backdrop-filter: blur(8px);
      background: rgba(11,10,8,0.7); color: var(--fg);
      border: 1px solid rgba(242,237,228,0.15);
    }
    #vizion-app .vzn-wyg-card-tag.tag-a { color: var(--gold-lt); }
    #vizion-app .vzn-wyg-card-tag.tag-b { color: #d8c8a0; }
    #vizion-app .vzn-wyg-card-tag.tag-c { color: var(--gold); }
    #vizion-app .vzn-wyg-card-body {
      padding: 1.2rem 1.1rem 1.1rem;
      display: flex; flex-direction: column; gap: 0.7rem;
      flex: 1;
    }
    #vizion-app .vzn-wyg-card-style {
      font-family: var(--serif); font-style: italic;
      font-size: 0.95rem; color: var(--fg); line-height: 1.25;
    }
    #vizion-app .vzn-wyg-card-prods {
      display: flex; flex-direction: column; gap: 0.35rem;
      font-size: 0.7rem; color: var(--muted);
      line-height: 1.5; font-weight: 300;
      padding: 0.6rem 0; border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    #vizion-app .vzn-wyg-card-prods .vzn-wyg-prod-name { color: rgba(242,237,228,0.78); }
    #vizion-app .vzn-wyg-more {
      color: var(--gold) !important;
      font-size: 0.6rem; letter-spacing: 0.12em;
      text-transform: uppercase; font-weight: 500;
      margin-top: 0.2rem;
    }
    #vizion-app .vzn-wyg-card-total {
      display: flex; justify-content: space-between;
      align-items: baseline; margin-top: auto;
    }
    #vizion-app .vzn-wyg-card-total > span:first-child {
      font-size: 0.55rem; letter-spacing: 0.24em;
      text-transform: uppercase; color: var(--muted);
    }
    #vizion-app .vzn-wyg-card-total > span:last-child {
      font-family: var(--serif); font-size: 1.15rem;
      color: var(--gold);
    }
    #vizion-app .vzn-wyg-foot {
      margin-top: 4rem; text-align: center;
      font-family: var(--serif); font-style: italic;
      font-size: 1rem; color: var(--muted);
      max-width: 640px; margin-left: auto; margin-right: auto;
    }
    #vizion-app .vzn-wyg-foot em {
      color: var(--gold-lt); font-style: italic;
    }
    @media (max-width: 1100px) {
      #vizion-app .vzn-wyg-flow { grid-template-columns: 1fr; gap: 2rem; }
      #vizion-app .vzn-wyg-arrow { flex-direction: row; min-height: 60px; }
      #vizion-app .vzn-wyg-arrow-svg { transform: rotate(90deg); }
    }
    @media (max-width: 768px) {
      #vizion-app .vzn-wyg { padding: 5rem 1.5rem; }
      #vizion-app .vzn-wyg-outputs { grid-template-columns: 1fr; gap: 1.2rem; }
      #vizion-app .vzn-wyg-header { margin-bottom: 3rem; }
    }

    /* ═══════════════════════════════════════════════════
       FAQ — accordion
    ═══════════════════════════════════════════════════ */
    #vizion-app .vzn-faq {
      padding: 9rem 4rem;
      background: var(--bg);
    }
    #vizion-app .vzn-faq-inner {
      max-width: 880px; margin: 0 auto;
    }
    #vizion-app .vzn-faq-header {
      text-align: center; margin-bottom: 4rem;
    }
    #vizion-app .vzn-faq-list {
      display: flex; flex-direction: column;
      border-top: 1px solid var(--border);
    }
    #vizion-app .vzn-faq-item {
      border-bottom: 1px solid var(--border);
      padding: 0;
    }
    #vizion-app .vzn-faq-item > summary {
      list-style: none; cursor: pointer;
      padding: 1.8rem 0;
      display: flex; justify-content: space-between;
      align-items: center; gap: 2rem;
      font-family: var(--serif); font-size: 1.25rem;
      font-weight: 400; color: var(--fg);
      transition: color 0.25s;
    }
    #vizion-app .vzn-faq-item > summary::-webkit-details-marker { display: none; }
    #vizion-app .vzn-faq-item > summary::after {
      content: '+'; font-family: var(--sans);
      font-size: 1.4rem; color: var(--gold);
      font-weight: 300; line-height: 1;
      transition: transform 0.3s;
      min-width: 24px; text-align: center;
    }
    #vizion-app .vzn-faq-item[open] > summary::after {
      content: '−';
    }
    #vizion-app .vzn-faq-item:hover > summary { color: var(--gold-lt); }
    #vizion-app .vzn-faq-answer {
      padding: 0 0 1.8rem 0;
      font-size: 0.92rem; line-height: 1.7;
      color: var(--muted); font-weight: 300;
      max-width: 720px;
    }
    #vizion-app .vzn-faq-answer em {
      color: var(--gold-lt); font-style: italic;
    }
    @media (max-width: 768px) {
      #vizion-app .vzn-faq { padding: 5rem 1.5rem; }
      #vizion-app .vzn-faq-item > summary { font-size: 1.05rem; padding: 1.4rem 0; }
    }