@font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2");font-weight:700;font-display:swap}

  :root{
    --page: #FEFEFE;
    --h1-ink: #3B3B3B;
    --body-ink: #5C5E7A;
    --indigo: #5E6DFF;
    --indigo-deep: #3141D7;
    --slide-ms: 4500ms;
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{
    font-family:"Apfel Grotezk",sans-serif;
    background:var(--page);
    color:var(--h1-ink);
  }
  ::selection{background:var(--indigo);color:#fff}

  /* fixed to the viewport on desktop — no svh rounding, no bottom gap */
  .hero{
    position:fixed;inset:0;
    display:grid;
    grid-template-columns:55.556fr 44.444fr; /* 800 / 640 @1440 */
    overflow:hidden;
  }

  /* ---------------- left ---------------- */
  .left{
    display:flex;flex-direction:column;
    background:var(--page);
    min-width:0;
  }
  header{
    flex:none;
    height:88px;
    padding:30px 120px 18px;
  }
  header img{height:40px;width:auto;display:block}

  /* bouncy tilt for the outline logos (hover on desktop, tap on touch) */
  .tilt{
    display:inline-block;
    transition:transform .55s cubic-bezier(.34,2.1,.44,.86);
    transform-origin:60% 65%;
    cursor:pointer;
  }
  @media (hover:hover) and (pointer:fine){
    .tilt:hover{transform:rotate(2.5deg)}
  }
  .tilt.wiggle{animation:wiggle .7s cubic-bezier(.36,.07,.19,.97)}
  @keyframes wiggle{
    0%{transform:rotate(0)}
    30%{transform:rotate(4deg)}
    55%{transform:rotate(-2.6deg)}
    78%{transform:rotate(2deg)}
    100%{transform:rotate(0)}
  }

  .copy{
    padding:102px 120px 60px;
    display:flex;flex-direction:column;align-items:flex-start;
  }
  h1{
    font-family:"Phudu",sans-serif;
    font-weight:800;
    font-size:72px;
    line-height:112.97%;
    letter-spacing:-0.01em;
    color:var(--h1-ink);
  }
  .hero-line{
    display:block;
    white-space:nowrap;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
  }
  h1 .hand{
    height:66px;width:auto;
    vertical-align:-10px;
    margin:0 6px;
  }
  /* intro units start hidden only when the intro will run (class set by JS before paint) */
  .intro-pending .intro-unit{opacity:0}
  h2{
    font-family:"Apfel Grotezk",sans-serif;
    font-weight:500;
    /* 19.5px at the 1440 design width, scaling down so the 3 fixed lines never re-wrap */
    font-size:clamp(12px,1.354vw,19.5px);
    line-height:160%;
    color:var(--body-ink);
    margin-top:24px;
  }

  /* ------- get started ⇄ UPI scanner morph ------- */
  .dl{
    position:relative;
    margin-top:24px;
    width:auto; /* shrink-wraps the button, so the QR card can always match its width */
    min-height:72px;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:auto;min-width:226px;height:72px;
    padding:20px 32px;
    background:var(--indigo);
    border:1.7px solid var(--indigo-deep);
    border-radius:20.34px;
    box-shadow:0 5.09px 0 var(--indigo-deep);
    text-decoration:none;cursor:pointer;
    transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
  }
  .btn span{
    font-family:"Phudu",sans-serif;font-weight:500;
    font-size:24px;color:#fff;line-height:1;
    white-space:nowrap;
  }
  .btn svg{width:32px;height:32px;flex:none}
  .btn .qr-ico{display:none} /* QR icon only on the button that opens the scanner */
  .btn:active{transform:translateY(4px)}
  .btn:focus-visible{outline:3px solid var(--indigo-deep);outline-offset:3px}

  .qr-card{
    position:absolute;left:0;bottom:0;
    width:100%; /* always the button's width; image keeps its own aspect ratio */
    opacity:0;pointer-events:none;
    transform:scale(.45);
    transform-origin:50% 100%;
    transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.3,1.4,.45,1);
  }
  .qr-card img{width:100%;height:auto;display:block}
  /* QR morph is desktop-only: hover-capable AND two-column layout */
  @media (hover:hover) and (pointer:fine) and (min-width:901px){
    .dl:hover .btn,.dl:focus-within .btn{opacity:0;transform:scale(.92);pointer-events:none}
    .dl:hover .qr-card,.dl:focus-within .qr-card{opacity:1;transform:scale(1);pointer-events:auto}
    /* this button opens the scanner: QR icon on the left, no arrow */
    .btn .qr-ico{display:block}
    .btn .chev{display:none}
  }

  .note{
    font-family:"Apfel Grotezk",sans-serif;font-weight:500;
    font-size:12.5px;color:var(--body-ink);
    margin-top:24px;
  }

  /* ---------------- right stage ---------------- */
  .stage{
    position:relative;
    overflow:hidden;
    background:var(--indigo);
    transition:background .65s cubic-bezier(.4,0,.2,1);
  }
  /* top-anchored 640px coordinate space (segments, subheading, glows) */
  .stage-inner{
    position:absolute;top:0;left:50%;
    width:640px;height:1242px;
    transform:translateX(-50%) scale(var(--s,1));
    transform-origin:top center;
  }
  /* bottom-anchored 640px coordinate space — the phone stays stuck to the bottom.
     Full-height box (not 0-height) so Safari resolves the bottom-center origin reliably. */
  .phones-dock{
    position:absolute;bottom:0;left:50%;
    width:640px;height:100%;
    transform:translateX(-50%) scale(var(--s,1));
    transform-origin:bottom center;
    pointer-events:none;
  }

  /* glow bands — fade in and out, so no bottom lip to get cut off (Figma 15:101558) */
  .glow-a{
    position:absolute;left:39px;top:120px;
    width:562px;height:1122px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 14%, rgba(255,255,255,1) 52%, rgba(255,255,255,0) 90%);
    opacity:.2;
  }
  .glow-b{
    position:absolute;left:93px;top:120px;
    width:454px;height:925px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 90%);
    opacity:.2;
  }

  .segs{
    position:absolute;left:8px;top:8px;
    display:flex;gap:10px;
    width:624px;
  }
  .seg{
    flex:1;height:6px;border-radius:49px;
    background:rgba(255,255,255,.1);
    border:none;cursor:pointer;padding:0;
    overflow:hidden;position:relative;
  }
  .seg .fill{
    display:block;height:100%;width:100%;
    border-radius:49px;
    background:rgba(255,255,255,.5);
    transform:scaleX(0);transform-origin:left;
  }
  .seg.active .fill{animation:segfill var(--slide-ms) linear forwards}
  .stage-paused .seg.active .fill{animation-play-state:paused}
  @keyframes segfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .seg:focus-visible{outline:2px solid #fff;outline-offset:2px}

  .subheading{
    position:absolute;top:69px;left:50%;
    transform:translateX(-50%);
    width:520px;
    font-family:"Apfel Grotezk",sans-serif;font-weight:500;
    font-size:26px;line-height:normal;
    color:#fff;text-align:center;
  }
  /* mask-reveal-up: per-line units (pixel-point/animate-text) */
  .subheading .line{
    display:block;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
  }

  .phones{
    position:absolute;left:141px;bottom:-116px; /* same bleed as the 836px design */
    width:358px;height:740px;
  }
  .phones img{
    position:absolute;top:0;left:0;
    width:100%;height:auto;display:block;
    opacity:0;
    will-change:transform,opacity;
  }

  /* ---------------- responsive ---------------- */
  /* very large screens: scale the whole left column proportionally (button included) */
  @media (min-width:1600px){ .left{zoom:1.15} }
  @media (min-width:2000px){ .left{zoom:1.4} }
  @media (min-width:2800px){ .left{zoom:1.8} }

  @media (max-width:1300px){
    header{padding-inline:64px}
    .copy{padding-inline:64px;padding-top:72px}
    h1{font-size:clamp(38px,5.2vw,72px)}
    h1 .hand{height:.92em;vertical-align:-.14em}
  }
  @media (max-width:1060px) and (min-width:901px){
    header{padding-inline:40px}
    .copy{padding-inline:40px}
  }
  /* stacked layout: phones + portrait tablets (spec: Figma node 12-90, 390×1133) */
  @media (max-width:900px), (max-width:1024px) and (orientation:portrait){
    html,body{overflow:auto}
    .hero{position:static;grid-template-columns:1fr;height:auto}
    header{height:auto;padding:26px 24px 0;display:flex;justify-content:center}
    .copy{padding:36px 20px 40px;align-items:center;text-align:center;gap:0}
    h1{font-size:clamp(30px,10.3vw,52px)}
    h2{max-width:none;font-size:clamp(14.5px,4.2vw,19.5px);margin-top:16px}
    .dl{align-self:center;zoom:1;width:auto;min-height:52px;margin-top:24px}
    .btn{width:auto;min-width:165px;height:52px;padding:14.5px 23px;gap:6px;border-radius:14.8px;border-width:1.24px;box-shadow:0 3.7px 0 var(--indigo-deep)}
    .btn span{font-size:17.5px}
    .btn svg{width:23px;height:23px}
    .note{margin-inline:auto;margin-top:14px;font-size:10px}

    /* mobile stage: its own 390×649 design space, all relative — no scaled desktop space */
    .stage{height:min(166.4vw,92svh);min-height:520px}
    .stage-inner{left:0;width:100%;height:100%;transform:none!important}
    .phones-dock{left:0;width:100%;height:100%;transform:none!important}
    .glow-a{left:3.6%;top:11.2%;width:92.8%;height:105%;border-radius:0}
    .glow-b{left:8.2%;top:11.2%;width:83.3%;height:87%}
    .segs{left:5px;top:5px;width:calc(100% - 10px);gap:6px}
    .seg{height:4px}
    /* natural wrapping on mobile — desktop line breaks don't apply at this width */
    .subheading{top:6.2%;width:77.4%;font-size:clamp(15px,4.7vw,19px);line-height:1.3}
    .subheading br{display:none}
    .phones{left:13.35%;top:22.5%;bottom:auto;width:73.3%;height:auto}
  }
  /* very narrow phones: the fixed h2 breaks would double-wrap — fall back to natural flow */
  @media (max-width:359px){
    h2 .mbr{display:none}
    h2{max-width:44ch}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.01ms!important;animation:none!important}
    .seg.active .fill{transform:scaleX(1)}
  }