.hero-mark{
    position:fixed; z-index:0; pointer-events:none;
    
    right:clamp(-14vw,-6vw,-2vw); top:0; height:100svh; width:min(46vw,660px);
    display:grid; align-items:center;
    opacity:.11; mix-blend-mode:screen;
  }
  .hero-mark svg{ width:100%; height:auto; transform-origin:50% 50%; will-change:transform }
  .hero-mark path{ fill:var(--brand-3) }
  @media (max-width:900px){ .hero-mark{ right:-18vw; width:86vw; opacity:.12 } }
  
  @media (prefers-reduced-motion: reduce){
    .hero-mark{ position:absolute }
    .hero-mark svg{ transform:none !important }
  }


  

  .phone-stage{ perspective:1100px; flex-shrink:0; position:relative }
  
  .phone-stage::before{
    content:''; position:absolute; z-index:0; left:50%; top:50%;
    width:148%; height:118%; transform:translate(-50%,-50%);
    
    background:radial-gradient(46% 44% at 50% 47%,
      rgba(178,134,232,.82) 0%, rgba(132,72,203,.44) 40%, rgba(49,0,111,0) 73%);
    filter:blur(34px); pointer-events:none;
  }
  .phone-stage > *{ position:relative; z-index:1 }
  
  .phone-tilt{
    position:relative; transform-style:preserve-3d;
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
    filter:drop-shadow(0 40px 46px rgba(8,2,20,.58)) drop-shadow(0 14px 18px rgba(0,0,0,.46));
    will-change:transform;
  }

  
  .phone-edge{
    position:absolute; top:0; bottom:0; width:9px; border-radius:2.35rem;
    background:linear-gradient(90deg,#050506 0%,#3a3a42 50%,#050506 100%);
  }
  .phone-edge.l{ left:0; transform-origin:left; transform:rotateY(90deg) translateZ(4.5px) }
  .phone-edge.r{ right:0; transform-origin:right; transform:rotateY(90deg) translateZ(4.5px) }

  
  
  .phone{
    position:relative; --phone-w:clamp(232px,min(23vw,36svh),306px); width:var(--phone-w);
    
    border-radius:2.35rem; padding:5px;
    background:linear-gradient(147deg,
      #a3a3ad 0%, #4c4c55 8%, #1e1e23 26%, #131317 50%,
      #3d3d45 70%, #92929c 84%, #2b2b31 95%, #17171b 100%);
    box-shadow:
      0 0 0 .5px rgba(255,255,255,.40),
      inset 0 0 0 1px rgba(255,255,255,.30),
      inset 0 -2px 3px rgba(0,0,0,.62);
    transform:translateZ(1px);
  }
  .phone-btn{ position:absolute; width:3px; border-radius:2px }
  .phone-btn.l{ left:-2px; background:linear-gradient(90deg,#0a0a0c,#3a3a40) }
  .phone-btn.r{ right:-2px; background:linear-gradient(270deg,#0a0a0c,#3a3a40) }
  .phone-btn.b1{ top:19%; height:7% }
  .phone-btn.b2{ top:29%; height:11% }
  .phone-btn.b3{ top:43%; height:11% }
  .phone-btn.b4{ top:30%; height:13% }

  
  .glass{
    position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:2.04rem;
    background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,0) 32%);
    box-shadow:inset 0 0 10px 2px rgba(0,0,0,.35);
  }
  
  .shot{ position:absolute; inset:0; width:100%; height:102%; object-fit:cover; object-position:center top }
  
  .screen{
    position:relative; aspect-ratio:9 / 19.5; border-radius:2.04rem; overflow:hidden;
    background:#000; color:var(--ink); box-shadow:inset 0 0 0 2px #000;
  }
  .island{
    position:absolute; top:2.2%; left:50%; transform:translateX(-50%); z-index:5;
    width:30%; height:3.2%; border-radius:100px; background:#000;
  }

  

  .chip{
    position:absolute; z-index:2; background:#fff; color:var(--brand-7);
    border-radius:100px; padding:9px 15px; font-weight:700; font-size:.8125rem;
    box-shadow:0 12px 30px rgba(0,0,0,.28); display:flex; align-items:center; gap:7px; white-space:nowrap;
  }
  .chip .num{ font-size:.875rem }
  .chip svg{ width:14px; height:14px; color:var(--positive) }
  
  .chip-a{ top:15%; right:100%; margin-right:-16px }
  .chip-b{ bottom:12%; left:100%; margin-left:-16px }
  
  .chip[data-scr="1"], .chip[data-scr="2"]{ opacity:0 }
  @media (max-width:1180px){
    .chip-a{ margin-right:-30px }
    .chip-b{ margin-left:-30px }
  }
  
  @media (max-width:1100px){ .chip{ display:none } }

  
  .lvltag{
    display:inline-flex; align-items:center; gap:12px; margin-bottom:18px;
    padding:.65em 1.15em; border-radius:100px; background:var(--action-tertiary);
  }
  
  .lvltag .lvl-name{ font-family:'Courier New',monospace; font-size:.875rem; font-weight:700; letter-spacing:.04em; color:var(--brand-7) }
  .lvltag .lvl-bar{ display:flex; height:6px; width:64px; border-radius:3px; overflow:hidden; background:rgba(49,0,111,.16); flex-shrink:0 }
  .lvltag .lvl-fill{ display:block; height:100%; width:72%; background:var(--action-primary) }
  .lvltag .lvl-cap{ font-size:.875rem; font-weight:700; color:rgba(49,0,111,.72) }
  @media (max-width:480px){ .lvltag .lvl-cap{ display:none } }

  

  
  .lvltag-hero{ margin-bottom:18px; animation:lvlbob 2.6s ease-in-out infinite }
  .lvltag-hero .lvl-fill{ width:0; animation:lvlfill 1.3s cubic-bezier(.22,1,.36,1) .35s forwards }
  @keyframes lvlfill{ to{ width:72% } }
  @keyframes lvlbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
  @media (prefers-reduced-motion: reduce){
    .lvltag-hero{ animation:none }
    .lvltag-hero .lvl-fill{ animation:none; width:72% }
  }

  
  .hero-trust{ display:flex; flex-direction:column; gap:7px; padding-top:18px; border-top:1px solid var(--rule-deep); width:100% }
  .hero-trust > span{ display:flex; align-items:center; gap:7px; font-size:.875rem; color:rgba(255,255,255,.82); text-shadow:0 2px 16px rgba(20,3,44,.4) }
  .hero-trust svg{ width:13px; height:13px; color:var(--action-primary); flex-shrink:0 }
  .hero-trust{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; padding-top:14px }
  .hero-trust > span{ font-size:.8125rem; gap:6px }
  .inv-hero{ position:relative; overflow:hidden; overflow:clip }
  .inv-hero .hero-mark{ position:absolute }
  .inv-hero-grid{
    --flow-cols:minmax(0,1fr) clamp(212px,23vw,330px) minmax(0,1fr);
    position:relative; z-index:1; min-height:100svh;
    display:grid; grid-template-columns:var(--flow-cols); align-items:center;
    gap:0 clamp(18px,2.5vw,44px); padding-block:120px 72px;
  }
  .inv-hero-grid .phone-hold{ display:flex; justify-content:center }
  .inv-hero .hero-say{ max-width:9ch }
  .hero-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:18px }
  .inv-cta{ margin-top:34px }
  .inv-split{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,6vw,96px); align-items:center }
  .inv-split--rev > .phone-hold{ order:-1 }
  .inv-split .phone-hold{ display:flex; justify-content:center; padding-block:20px }
  .on-light .phone-stage::before{
    background:radial-gradient(46% 44% at 50% 47%, rgba(197,167,225,.8) 0%, rgba(197,167,225,.35) 45%, rgba(247,245,250,0) 75%);
  }
  .on-light .phone-tilt{ filter:drop-shadow(0 34px 40px rgba(49,0,111,.28)) drop-shadow(0 12px 16px rgba(49,0,111,.18)) }
  
  .timeline--ico{ padding-left:84px }
  .timeline--ico::before{ left:35px; top:40px; bottom:40px }
  .timeline--ico .timeline-item{ min-height:72px; padding-bottom:30px }
  .timeline--ico .timeline-item::before{ display:none }
  .timeline--ico .step-ico{ position:absolute; left:-84px; top:-10px; width:72px; height:72px; object-fit:contain }
  @media (max-width:560px){ .timeline--ico{ padding-left:68px } .timeline--ico::before{ left:27px } .timeline--ico .step-ico{ left:-68px; width:56px; height:56px; top:-6px } }
  .inv-feats{ display:grid; gap:14px }
  .inv-feats .feat-card{ gap:8px }
  .lvltag{ white-space:nowrap; max-width:100% }
  @media (min-width:901px) and (max-width:1180px){ .lvltag .lvl-cap{ display:none } }
  @media (max-width:1100px){ .chip{ display:none } }
  @media (max-width:900px){
    .inv-hero-grid{ --flow-cols:minmax(0,1fr); min-height:0; padding-block:116px 56px; gap:22px }
    .inv-hero-grid .p-l{ order:1 } .inv-hero-grid .p-r{ order:3 }
    .inv-hero-grid .phone-hold{ order:2; margin-top:4px }   
    .inv-hero .hero-say{ max-width:none }
    .inv-split{ grid-template-columns:1fr }
    .inv-split--rev > .phone-hold{ order:0 }
  }