:root{
      --bg:#070708;
      --fg:#f6f6f7;
      --muted:rgba(246,246,247,.72);
      --line:rgba(246,246,247,.14);
      --panel:rgba(255,255,255,.04);
      --panel2:rgba(255,255,255,.07);
      --accent:#e01e26;   /* VPRWAVE red */
      --accent2:#005aa0;  /* optional blue for geometry only, used sparingly */
      --accent3:#f5c828;  /* optional yellow for geometry only, used sparingly */

      --max:1180px;
      --gutter:clamp(18px, 4vw, 46px);
      --radius:18px;

      --h1:clamp(44px, 5.8vw, 76px);
      --h2:clamp(26px, 3.2vw, 40px);
      --h3:18px;
      --body:16px;
      --small:13px;

      --lh:1.45;
      --lh-tight:1.06;

      /* Density controls (reduces empty space) */
      --sectionY: clamp(38px, 5vw, 76px);
      --stack: 14px;

      --fx-ease: cubic-bezier(.2,.8,.2,1);
      --fx-z: 2000;
      --fx-stamp-size: 72px;
      --fx-bg: rgba(7,7,8,.72);
      --fx-border: 1px solid var(--line);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    :root{
      --headerH: 84px;
    }
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
    }
    section, [id]{
      scroll-margin-top: calc(var(--headerH) + 14px);
    }
    body{
      margin:0;
      background:var(--bg);
      color:var(--fg);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      line-height:var(--lh);
      letter-spacing:.1px;
    }
    a{color:inherit;text-decoration:none}
    a:hover{text-decoration:underline;text-underline-offset:4px}
    img{max-width:100%;display:block}

    .img-shell{
      position:relative;
      overflow:hidden;
    }
    .img-shell img{
      opacity:0;
      transform: translateY(2px);
      transition: opacity 180ms ease-out, transform 180ms ease-out;
      will-change: opacity, transform;
    }
    .img-shell.is-loaded img{
      opacity:1;
      transform: translateY(0);
    }
    .img-shell.is-error img{
      opacity:0;
      transform:none;
    }
    .img-placeholder{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:inherit;
      opacity:1;
      transition: opacity 180ms ease-out;
      pointer-events:none;
    }
    .img-placeholder::after{
      content:"";
      position:absolute;
      top:10px;
      left:10px;
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--accent);
      opacity:.6;
    }
    .img-placeholder__label{
      font-size:12px;
      color:rgba(246,246,247,.72);
      letter-spacing:.6px;
      text-transform:uppercase;
      opacity:0;
    }
    .img-shell.is-loaded .img-placeholder{
      opacity:0;
      visibility:hidden;
    }
    .img-shell.is-error .img-placeholder{
      background:var(--panel2);
    }
    .img-shell.is-error .img-placeholder__label{
      opacity:1;
    }

    .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

    /* Header */
    header{
      position:sticky;top:0;z-index:50;
      background:rgba(7,7,8,.86);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      padding:14px 0;
      flex-wrap:nowrap;
    }
    .nav-left,.nav-center,.nav-right{
      display:flex;align-items:center;gap:16px;
      min-width:0;
    }
    .nav-left{flex:0 0 auto}
    .nav-center{flex:1 1 auto;justify-content:center}
    .nav-right{flex:0 0 auto;justify-content:flex-end}
    .brand{display:flex;align-items:center;gap:12px}
    .mark{
      width:34px;height:34px;border-radius:10px;
      border:1px solid var(--line);
      background:var(--panel);
      display:grid;place-items:center;overflow:hidden;
    }
    .mark img{width:100%;height:100%;object-fit:cover}
    .word{display:flex;flex-direction:column;line-height:1.05}
    .word b{font-weight:950;letter-spacing:.9px;font-size:14px}
    .word span{font-size:12px;color:var(--muted);letter-spacing:.4px}
    nav{display:flex;gap:14px;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
    .navlink{
      font-size:13px;color:rgba(246,246,247,.86);
      padding:8px 10px;border-radius:999px;
      border:1px solid transparent;
      position:relative;
      transition: background-color 180ms ease-out, border-color 180ms ease-out;
    }
    .navlink:hover{border-color:var(--line);text-decoration:none;background:var(--panel)}

    .cta{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 14px;border-radius:999px;
      border:1px solid var(--line);
      font-size:13px;font-weight:900;letter-spacing:.2px;
      background:transparent;color:rgba(246,246,247,.92);
      cursor:pointer;white-space:nowrap;
      transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
    }
    .btn.primary{border-color:transparent;background:var(--accent);color:#080809}
    .btn.primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }
    .btn.primary:active{transform: translateY(0)}
    .btn.primary:hover{opacity:.92;text-decoration:none}
    .btn.ghost:hover{text-decoration:none;border-color:rgba(246,246,247,.32)}

    @media (max-width: 1024px){
      .nav{gap:12px}
      nav{gap:10px}
      .navlink{padding:6px 8px}
      .btn{padding:9px 12px}
    }
    @media (max-width: 920px){
      nav{display:none}
    }
    @media (max-width: 768px){
      .nav{flex-wrap:wrap;align-items:flex-start}
      .nav-left{flex:1 1 100%}
      .nav-right{flex:1 1 100%;justify-content:flex-start}
      .cta{width:100%;flex-wrap:wrap}
    }

    /* Sections */
    section{padding:var(--sectionY) 0;border-bottom:1px solid var(--line)}
    section:last-of-type{border-bottom:none}

    .kicker{
      margin:0 0 10px 0;
      font-size:var(--small);
      letter-spacing:.7px;
      text-transform:uppercase;
      color:var(--muted);
    }
    h1,h2{margin:0 0 12px 0;line-height:var(--lh-tight);letter-spacing:-.8px}
    h1{font-size:var(--h1);font-weight:1000}
    h2{font-size:var(--h2);font-weight:950}
    p{margin:0 0 14px 0;color:rgba(246,246,247,.84);font-size:var(--body);max-width:78ch}
    .lead{font-size:18px;color:rgba(246,246,247,.88);max-width:70ch}

    /* Bauhaus geometry (flat blocks, no gradients) */
    .divider{
      display:flex;align-items:center;gap:12px;margin:18px 0;
    }
    .bar{height:6px;width:84px;background:var(--accent);border-radius:999px}
    .rule{height:1px;flex:1;background:var(--line)}
    .geo{
      width:14px;height:14px;border-radius:4px;background:var(--accent2);
      border:1px solid rgba(246,246,247,.18);
    }
    .geo.yellow{background:var(--accent3)}
    .geo.red{background:var(--accent)}

    .grid-2{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(18px, 4vw, 56px);align-items:center}
    @media (max-width: 980px){.grid-2{grid-template-columns:1fr}}

    .frame{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.02);
      overflow:hidden;
    }
    .frame .img{
      aspect-ratio: 4/5;
      background:rgba(255,255,255,.02);
      display:grid;place-items:center;
      padding:18px;
    }
    .frame .img img{width:100%;height:100%;object-fit:contain}
    .frame .cap{padding:12px 14px;border-top:1px solid var(--line);font-size:12px;color:rgba(246,246,247,.66)}

    .pillrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .pill{
      display:inline-flex;align-items:center;gap:10px;
      padding:10px 12px;border-radius:999px;
      border:1px solid var(--line);background:rgba(255,255,255,.02);
      font-size:13px;color:rgba(246,246,247,.82);
      transition: border-color 120ms ease-out, background-color 120ms ease-out;
    }
    .pill:hover{
      border-color:rgba(246,246,247,.3);
      background:rgba(255,255,255,.04);
    }
    .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}

    .list{margin:18px 0 0 0;padding:0;list-style:none;max-width:80ch}
    .list li{padding:12px 0;border-top:1px solid var(--line);color:rgba(246,246,247,.9);font-size:16px}
    .list li:last-child{border-bottom:1px solid var(--line)}

    .reality-block{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--panel);
      padding:16px;
    }
    .reality-list{
      margin:12px 0 0 0;
      padding-left:18px;
      color:rgba(246,246,247,.82);
    }
    .reality-list li{margin:8px 0}
    .bar--mini{width:46px;height:4px}

    /* Cards */
    .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
    @media (max-width: 980px){.cols{grid-template-columns:1fr}}
    .card{
      border:1px solid var(--line);border-radius:var(--radius);
      padding:18px;background:rgba(255,255,255,.02);
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease-out, background-color 180ms ease-out;
    }
    .card:hover{
      border-color:rgba(246,246,247,.32);
      background:rgba(255,255,255,.04);
    }
    .card:active,
    .card:focus-within{
      transform:none;
    }
    .card h3{margin:0 0 10px 0;font-size:16px;font-weight:950;letter-spacing:.2px}
    .card ul{margin:0;padding:0 0 0 16px;color:rgba(246,246,247,.82)}
    .card li{margin:8px 0}

    /* Machine formats (now includes arcade) */
    .formats{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px;margin-top:18px}
    @media (max-width: 1220px){.formats{grid-template-columns:repeat(3,1fr)}}
    @media (max-width: 820px){.formats{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 520px){.formats{grid-template-columns:1fr}}

    .format{
      border:1px solid var(--line);border-radius:var(--radius);
      background:rgba(255,255,255,.02);overflow:hidden;
      position:relative;
      isolation:isolate;
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease-out, background-color 180ms ease-out;
    }
    .format:hover{
      border-color:rgba(246,246,247,.32);
      background:rgba(255,255,255,.04);
    }
    .format:active,
    .format:focus-within{
      transform:none;
    }
    .thumb{
      aspect-ratio: 1 / 1;
      background:rgba(255,255,255,.02);
      padding:12px;display:grid;place-items:center;
      border-bottom:1px solid var(--line);
    }
    .thumb img{width:100%;height:100%;object-fit:contain}
    .format .body{padding:14px}
    .format .body b{display:block;font-weight:1000;letter-spacing:.2px;margin-bottom:6px}
    .format .body span{display:block;color:rgba(246,246,247,.72);font-size:13px;line-height:1.4}

    /* Combined section: Offer (what it sells + how it runs) */
    .offer{
      display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px
    }
    @media (max-width: 980px){.offer{grid-template-columns:1fr}}
    .offer .card{padding:16px}
    .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
    .chip{
      border:1px solid var(--line);border-radius:999px;
      padding:8px 10px;font-size:13px;font-weight:850;
      background:rgba(255,255,255,.02);
      transition: border-color 120ms ease-out, background-color 120ms ease-out;
    }
    .chip:hover{
      border-color:rgba(246,246,247,.3);
      background:rgba(255,255,255,.04);
    }
    .chip.red{border-color:rgba(224,30,38,.55);background:rgba(224,30,38,.12)}
    .chip.blue{border-color:rgba(0,90,160,.55);background:rgba(0,90,160,.14)}
    .chip.yellow{border-color:rgba(245,200,40,.55);background:rgba(245,200,40,.12);color:rgba(246,246,247,.92)}

    /* Scroll reveal */
    .js .reveal{
      opacity:0;
      transform: translateY(12px);
      transition:
        opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(var(--d, 0) * 60ms);
      will-change: transform, opacity;
    }
    .js .reveal.is-visible{
      opacity:1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .js .reveal{
        opacity:1;
        transform:none;
        transition:none;
        will-change:auto;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .navlink::after,
      .footlinks a::after{
        transition:none;
        transform:none;
      }
      .navlink:hover::after,
      .footlinks a:hover::after{
        opacity:1;
      }
      .btn.primary,
      .card,
      .format,
      .scenario,
      .step{
        transition:none;
      }
      .btn.primary:hover,
      .card:hover,
      .format:hover,
      .scenario:hover,
      .step:hover{
        transform:none;
      }
      .img-shell img,
      .img-placeholder{
        transition:none;
        transform:none;
      }
    }

    /* Business case */
    .bc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px, 4vw, 56px);margin-top:18px;align-items:start}
    @media (max-width: 980px){.bc{grid-template-columns:1fr}}
    .value{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-weight:950;background:rgba(255,255,255,.02)}
    .value + .value{margin-top:10px}
    .equation{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:rgba(255,255,255,.02)}
    .eqrow{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-weight:1000;letter-spacing:-.2px}
    .eqchip{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:13px;background:transparent}
    .eqchip.accent{border-color:rgba(224,30,38,.55);background:rgba(224,30,38,.12)}
    .eqnote{margin-top:10px;font-size:12px;color:rgba(246,246,247,.68)}
    .scenarios{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-top:14px}
    @media (max-width: 980px){.scenarios{grid-template-columns:1fr}}
    .scenario{
      border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:rgba(255,255,255,.02);
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease-out, background-color 180ms ease-out;
    }
    .scenario:hover{
      border-color:rgba(246,246,247,.32);
      background:rgba(255,255,255,.04);
    }
    .scenario:active,
    .scenario:focus-within{
      transform:none;
    }
    .scenario .name{font-weight:1000;margin-bottom:8px}
    .scenario .meta{font-size:13px;color:rgba(246,246,247,.76);line-height:1.5}
    .payout{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
    .payout .label{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:rgba(246,246,247,.62)}
    .payout .amt{font-size:30px;font-weight:1000;color:var(--accent);letter-spacing:-.8px}

    /* FAQs */
    details{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:rgba(255,255,255,.02)}
    details + details{margin-top:10px}
    summary{
      cursor:pointer;
      font-weight:1000;
      list-style:none;
      border-radius:12px;
      transition: color 180ms ease-out, background-color 180ms ease-out;
    }
    summary:hover{
      background:rgba(255,255,255,.03);
    }
    summary:focus-visible{
      outline:2px solid rgba(224,30,38,.35);
      outline-offset:2px;
    }
    summary::-webkit-details-marker{display:none}
    .faq-a{
      margin-top:10px;
      color:rgba(246,246,247,.78);
      opacity:0;
      transform: translateY(6px);
      transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    details[open] .faq-a{
      opacity:1;
      transform: translateY(0);
    }
    .faq-a p{margin:0}
    @media (prefers-reduced-motion: reduce){
      summary,
      .faq-a{
        transition:none;
      }
      .faq-a{
        opacity:1;
        transform:none;
      }
    }

    /* Process */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
    @media (max-width: 980px){.steps{grid-template-columns:1fr 1fr}}
    @media (max-width: 560px){.steps{grid-template-columns:1fr}}
    .step{
      border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:rgba(255,255,255,.02);
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease-out, background-color 180ms ease-out;
    }
    .step:hover{
      border-color:rgba(246,246,247,.32);
      background:rgba(255,255,255,.04);
    }
    .step:active,
    .step:focus-within{
      transform:none;
    }
    .step .n{font-weight:1000;color:var(--accent);font-size:22px;letter-spacing:-.8px;margin-bottom:10px}
    .step .t{font-weight:1000;margin-bottom:6px}
    .step .d{font-size:13px;color:rgba(246,246,247,.74);line-height:1.5}

    @media (hover: hover) and (pointer: fine){
      .card.is-wiggle:not(:active):not(:focus-within),
      .scenario.is-wiggle:not(:active):not(:focus-within),
      .step.is-wiggle:not(:active):not(:focus-within){
        transform: translateY(-1px);
        transition-duration: 160ms, 180ms, 180ms;
      }
      .format.is-wiggle:not(:active):not(:focus-within){
        transform: translateY(-2px);
        transition-duration: 160ms, 180ms, 180ms;
      }
    }

    footer{padding:22px 0 28px 0;color:rgba(246,246,247,.66);font-size:13px;border-top:1px solid var(--line)}
    .footgrid{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:24px;
    }
    .footer-brand-row{display:flex;align-items:center;gap:10px}
    .footer-brand-name{font-weight:1000;letter-spacing:.8px}
    .footer-tagline{margin-top:8px}
    .footer-location{margin-top:6px;font-size:12px;color:rgba(246,246,247,.56)}
    .footlinks{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:14px;
    }
    .footlinks a,
    .footer-top{
      display:inline-block;
      color:rgba(246,246,247,.66);
      position:relative;
      transition: color 140ms ease-out;
    }
    .footlinks a::after,
    .footer-top::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-2px;
      height:1px;
      background:rgba(246,246,247,.6);
      transform:scaleX(0);
      transform-origin:left;
      opacity:0;
      transition: transform 140ms ease-out, opacity 140ms ease-out;
    }
    .footlinks a:hover,
    .footer-top:hover{
      color:rgba(246,246,247,.88);
      text-decoration:none;
    }
    .footlinks a:hover::after,
    .footer-top:hover::after{
      transform:scaleX(1);
      opacity:1;
    }
    .footlinks a:focus-visible,
    .footer-top:focus-visible{
      outline:2px solid rgba(224,30,38,.5);
      outline-offset:3px;
      border-radius:6px;
    }
    .footer-legal{
      margin-top:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-size:12px;
      color:rgba(246,246,247,.56);
    }
    .footnote{color:rgba(246,246,247,.56)}
    @media (max-width: 980px){
      .footgrid{
        flex-direction:column;
        align-items:flex-start;
      }
      .footlinks{justify-content:flex-start}
      .footer-legal{
        flex-direction:column;
        align-items:flex-start;
      }
    }
  
    /* Floating WhatsApp CTA */
    .wa-float{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:120;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(7,7,8,.88);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      font-size:13px;
      font-weight:950;
      letter-spacing:.2px;
      color:rgba(246,246,247,.92);
      text-decoration:none;
    }
    .wa-float:hover{
      text-decoration:none;
      border-color:rgba(246,246,247,.32);
    }
    .wa-icn{
      width:34px;
      height:34px;
      border-radius:12px;
      border:1px solid rgba(246,246,247,.18);
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.03);
      overflow:hidden;
      flex:0 0 auto;
      position:relative;
    }
    .wa-icn:before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:12px;
      border:2px solid rgba(224,30,38,.55);
      pointer-events:none;
    }
    .wa-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
      margin-left:2px;
    }
    .wa-text{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .wa-text span{
      font-size:11px;
      font-weight:850;
      letter-spacing:.7px;
      text-transform:uppercase;
      color:rgba(246,246,247,.66);
      margin-bottom:3px;
    }
    .wa-text b{
      font-size:13px;
      font-weight:1000;
      letter-spacing:.2px;
    }
    @media (max-width: 520px){
      .wa-float{padding:12px;border-radius:18px}
      .wa-text span{display:none}
    }

    /* Micro animations */
    .microfx{
      position:fixed;
      inset:0;
      z-index:var(--fx-z);
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
    }
    .microfx-stamp{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%) scale(.96);
      width:var(--fx-stamp-size);
      height:var(--fx-stamp-size);
      display:grid;
      place-items:center;
      border-radius:18px;
      background:var(--fx-bg);
      border:var(--fx-border);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 50px rgba(0,0,0,.38);
      opacity:0;
      filter: blur(6px);
      will-change: opacity, transform, filter;
    }
    .microfx-stamp img{
      width:70%;
      height:70%;
      object-fit:contain;
    }
    .microfx-ring{
      position:absolute;
      inset:8px;
      border-radius:999px;
      border:2px solid rgba(224,30,38,.55);
      opacity:0;
      pointer-events:none;
      will-change: opacity, transform;
    }
    .microfx.is-pdf .microfx-stamp{
      animation: microfx-pdf 900ms var(--fx-ease) both;
    }
    .microfx.is-pdf .microfx-ring{
      animation: microfx-ring-pdf 900ms var(--fx-ease) both;
    }
    .microfx.is-wa .microfx-stamp{
      animation: microfx-wa 680ms var(--fx-ease) both;
    }
    .microfx.is-wa .microfx-ring{
      animation: microfx-ring-wa 680ms var(--fx-ease) both;
    }
    @keyframes microfx-pdf{
      0%{opacity:0;transform:translate(-50%,-50%) scale(.96);filter:blur(6px)}
      20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
      69%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);filter:blur(6px)}
    }
    @keyframes microfx-wa{
      0%{opacity:0;transform:translate(-50%,-50%) scale(.97);filter:blur(6px)}
      25%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
      62%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);filter:blur(6px)}
    }
    @keyframes microfx-ring-pdf{
      0%{opacity:0;transform:scale(.98)}
      22%{opacity:.45;transform:scale(1)}
      70%{opacity:.45;transform:scale(1)}
      100%{opacity:0;transform:scale(1.03)}
    }
    @keyframes microfx-ring-wa{
      0%{opacity:0;transform:scale(.98)}
      32%{opacity:.5;transform:scale(1)}
      64%{opacity:.5;transform:scale(1)}
      100%{opacity:0;transform:scale(1.04)}
    }
    @media (max-width: 640px){
      :root{--fx-stamp-size:64px}
    }
    @media (prefers-reduced-motion: reduce){
      .microfx-stamp{
        transform:translate(-50%,-50%);
        filter:none;
        will-change: opacity;
      }
      .microfx-ring{
        transform:none;
        will-change: opacity;
      }
      .microfx.is-pdf .microfx-stamp,
      .microfx.is-pdf .microfx-ring{
        animation: microfx-fade-pdf 220ms ease-out both;
      }
      .microfx.is-wa .microfx-stamp,
      .microfx.is-wa .microfx-ring{
        animation: microfx-fade-wa 200ms ease-out both;
      }
    }
    @keyframes microfx-fade-pdf{
      0%{opacity:0}
      40%{opacity:1}
      100%{opacity:0}
    }
    @keyframes microfx-fade-wa{
      0%{opacity:0}
      40%{opacity:1}
      100%{opacity:0}
    }

    /* Floating language pill */
    .lang-pill{
      position:fixed;
      top:16px;
      right:16px;
      z-index:1000;
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px;
      border-radius:999px;
      border:1px solid rgba(246,246,247,.18);
      background:rgba(7,7,8,.88);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 28px rgba(0,0,0,.3);
      font-size:12px;
      font-weight:850;
      letter-spacing:.3px;
      color:rgba(246,246,247,.78);
    }
    .lang-btn{
      border:1px solid transparent;
      border-radius:999px;
      padding:6px 10px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.2px;
      background:transparent;
      color:rgba(246,246,247,.86);
      cursor:pointer;
    }
    .lang-btn:hover{
      border-color:rgba(246,246,247,.2);
      background:rgba(255,255,255,.04);
    }
    .lang-btn:focus-visible{
      outline:2px solid rgba(224,30,38,.65);
      outline-offset:2px;
    }
    .lang-btn[aria-current="page"]{
      border-color:rgba(224,30,38,.65);
      background:rgba(224,30,38,.18);
      color:var(--fg);
    }
    @media (max-width: 768px){
main
    }

  
    /* Machine inspect bubble (hover) */
    .format{
      position: relative;
      isolation: isolate;
      transition: transform 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out;
    }
    .format:hover{
      border-color: rgba(246,246,247,.32);
      background: rgba(255,255,255,.04);
      transform: translateY(-2px);
    }
    .format .thumb{
      position: relative;
      overflow: hidden;
    }

    /* Bubble wrapper */
    .inspect-bubble{
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 999px;
      left: calc(var(--mx, 50) * 1%);
      top: calc(var(--my, 50) * 1%);
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0;
      scale: .94;
      transition: opacity 160ms ease, scale 160ms ease;
      z-index: 5;
      /* disciplined glass */
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(246,246,247,.22);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      overflow: hidden;
    }

    /* Inner magnified layer uses background image */
    .inspect-bubble::before{
      content:"";
      position:absolute;
      inset:-22%;
      background-image: var(--img);
      background-repeat: no-repeat;
      background-size: 160%;
      background-position: calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%);
      filter: saturate(1.05) contrast(1.02);
      transform: translateZ(0);
    }

    /* Subtle vignette to make it feel intentional */
    .inspect-bubble::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.00) 55%, rgba(0,0,0,.34) 100%);
      opacity: .9;
      pointer-events:none;
    }

    /* Bauhaus ring + red dot */
    .inspect-ring{
      position:absolute;
      inset:10px;
      border-radius:999px;
      border:2px solid rgba(224,30,38,.55);
      pointer-events:none;
      z-index:6;
    }
    .inspect-dot{
      position:absolute;
      width:10px;
      height:10px;
      border-radius:999px;
      background: var(--accent);
      top: 18px;
      left: 18px;
      z-index:7;
    }

    /* Toggle visibility on hover state */
    .format.is-hover .inspect-bubble{
      opacity: 1;
      scale: 1;
    }

    /* Coarse pointers (touch): disable bubble */
    @media (hover: none), (pointer: coarse){
      .inspect-bubble{ display:none !important; }
      .format:hover{ transform:none; }
    }

    /* Reduced motion: no tracking feel, static centred bubble */
    @media (prefers-reduced-motion: reduce){
      .inspect-bubble{
        transition: none;
        left: 50%;
        top: 50%;
      }
      .format:hover{ transform:none; }
    }

    /* Bubble size responsive */
    @media (max-width: 980px){
      .inspect-bubble{ width: 240px; height: 240px; }
    }
    @media (max-width: 640px){
      .inspect-bubble{ width: 220px; height: 220px; }
    }