:root{
    --bg:#FAFBFC;
    --card:#FFFFFF;
    --ink:#0C374D;          /* deep navy */
    --ink-2:#05080B;
    --muted:#536B7E;
    --faint:#8BA0B3;
    --line:rgba(12,55,77,.08);
    --line-soft:rgba(12,55,77,.06);
    --teal:#4FA6C0;
    --teal-soft:#E0F0F5;
    --teal-ink:#2B7A92;
    --blue:#164FB1;
    --deep:#040F49;
    --cyan:#4FA6C0;
    --cream:#FFFFB9;
    --ok:#34D399;
    --danger:#EF4444;
    --amber:#F59E0B;
    --lemon:#FDE047;
    --purple:#A78BFA;
  }
  
  /* overflow-x:hidden removed from html/body, it was breaking
     position:sticky on the manifesto transition. Any element that
     overflows horizontally should be clipped at its own level. */
  

  /* Reveal-on-scroll: sections fade up into place when they enter view. */
  .reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
  }
  
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
  }
  
  
  

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease
  }
  header.nav::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));
    z-index:-1;pointer-events:none;transition:opacity .3s
  }
  header.nav.scrolled{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-soft)
  }
  header.nav.scrolled::before{opacity:0}
  /* Push content below the fixed nav so the hero eyebrow isn't hidden */
  body{padding-top:0}
  
  
  
  .logo .logo-light{display:none}
  header.nav.scrolled .logo .logo-dark{display:none}
  header.nav.scrolled .logo .logo-light{display:block}
  nav ul{display:flex;gap:32px;list-style:none;font-size:14px;font-weight:500;color:rgba(255,255,255,.88);transition:color .3s}
  
  nav a{transition:color .2s}
  nav a:hover{color:#fff}
  header.nav.scrolled nav ul{color:#334456}
  header.nav.scrolled nav a:hover{color:var(--ink)}
  /* ----- Products dropdown ----- */
  
  .has-dd > a::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;opacity:.8}
  
  .dd-menu{
    position:absolute;top:100%;left:-14px;
    min-width:180px;padding:8px;margin-top:14px;
    background:#fff;border:1px solid rgba(12,55,77,.08);
    border-radius:12px;
    box-shadow:0 12px 40px rgba(12,55,77,.10),0 4px 12px rgba(12,55,77,.06);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    z-index:60;list-style:none;display:block;gap:0;
  }
  .has-dd:hover .dd-menu,
  .has-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
  
  
  .dd-menu a{
    display:block;padding:9px 14px;border-radius:8px;
    color:#0C374D !important;font-size:14px;font-weight:500;
    transition:background .18s ease;
  }
  .dd-menu a:hover{background:rgba(79,166,192,.10);color:#0C374D !important}
  
  .btn{padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
  .btn-ghost{color:var(--ink);border:1px solid rgba(12,55,77,.15);transition:background .25s ease, border-color .25s ease, color .3s ease}
  .btn-ghost:hover{background:rgba(12,55,77,.04)}
  .nav-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
  .nav-cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
  header.nav.scrolled .nav-cta .btn-ghost{color:var(--ink);border-color:rgba(12,55,77,.15)}
  header.nav.scrolled .nav-cta .btn-ghost:hover{background:rgba(12,55,77,.04);border-color:rgba(12,55,77,.25)}
  .btn-primary{background:var(--teal);color:#fff;opacity:1;transition:box-shadow .35s ease}
  .btn-primary:hover{background:var(--teal);color:#fff;opacity:1;box-shadow:0 0 18px rgba(79,166,192,.32),0 0 36px rgba(79,166,192,.16)}
  .btn-teal{background:var(--teal);color:#fff}
  .btn-teal:hover{background:var(--teal-ink)}
  

  section{position:relative}
  .section{max-width:1320px;margin:0 auto;padding:96px 32px}
  .kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:14px}
  .kicker::before{display:none}
  .section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:56px;gap:48px;flex-wrap:wrap}
  .section-head h2{font-size:clamp(36px,4.5vw,60px);letter-spacing:-.03em;line-height:1.05;font-weight:700;max-width:800px;color:var(--ink)}
  .section-head h2 em{font-style:normal;color:var(--teal)}
  .section-head p{color:var(--muted);max-width:420px;font-size:16px;line-height:1.55}

  /* ---------- HERO (card-style video, original clean light layout) ----------
     Starts at opacity 0; JS scroll listener fades it in as the user
     scrolls down past the manifesto/gradient transition above. */
  /* Hero video section, normal linear scroll flow.
     Sits in regular document order right after the manifesto. As the
     user scrolls down past the manifesto, this section rises into view
     naturally, just like every other section below it.                */
  /* Hero "slide stage", gives the video a scroll runway so it RISES UP
     over the manifesto instead of cutting in suddenly. The negative
     margin-top overlaps the last ~54vh of the manifesto's white-state
     pause, so the user sees the video curtain up over the manifesto
     before linear scroll resumes. */
  .hero-stage{
    position:relative;
    margin-top:-100vh;    /* overlap exactly the last 100vh of manifesto sticky range,
                              so the slide-end aligns with manifesto unpin, no text push */
    height:200vh;          /* 100vh slide-in + 100vh pinned hold */
    z-index:4;             /* sits above transition-sticky (z:2) */
    pointer-events:none;   /* let scroll pass through during overlap */
  }
  .hero-stage > *{pointer-events:auto}

  /* Full-bleed 100vh hero video. Sticky inside .hero-stage so it pins
     at top:0 once it has slid fully into view. */
  .hero{
    position:sticky;
    top:0;
    width:100%;
    height:100vh;
    min-height:680px;
    max-width:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#000;
    z-index:4;
    border-top-left-radius:32px;
    border-top-right-radius:32px;
  }
  .hero-ctas{display:flex;gap:14px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
  .hero-visual{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    margin:0;
    border-radius:0;
    overflow:hidden;
    aspect-ratio:auto;
    background:#000;
    box-shadow:none;
    border:none;
  }
  .hero-visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.03)}
  .hero-visual::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.45) 88%,rgba(0,0,0,.78) 100%);
  }
  /* Floating chip over video */
  .hv-chip{position:absolute;left:24px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(12,55,77,.08);box-shadow:0 10px 30px rgba(12,55,77,.1);font-size:12px;font-weight:600;color:var(--ink)}
  .hv-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.25)}
  .hv-chip .sep{width:1px;height:14px;background:rgba(12,55,77,.12)}
  .hv-chip .muted{color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

  /* ---------- MANIFESTO CONTENT (now lives inside .transition-sticky) ----------
     The manifesto text sits on the fixed gradient canvas. Its colors lerp
     from light (on dark canvas at start) to dark (on white canvas at end)
     via CSS variables driven by JS. */
  .manifesto-content{max-width:980px;margin:0 auto;text-align:center;padding:0 32px;position:relative;z-index:1}
  .manifesto-content .kicker{justify-content:center;margin-bottom:32px;color:var(--m-kicker-color,rgba(255,255,255,.65));transition:color .5s ease}
  .manifesto-content h1,.manifesto-content h2{font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--m-h2-color,#fff);max-width:880px;margin:0 auto 28px;text-wrap:balance;transition:color .5s ease}
  .manifesto-content h1 em,.manifesto-content h2 em{font-style:normal;color:var(--teal)}
  .manifesto-content p{font-size:18px;line-height:1.55;color:var(--m-p-color,rgba(255,255,255,.7));max-width:620px;margin:0 auto 0;font-weight:400;transition:color .5s ease}
  /* Manifesto CTAs, hidden until the canvas lerps to white, then fade in. */
  .manifesto-content .hero-ctas{
    margin:40px auto 0;
    opacity:var(--m-cta-opacity,0);
    transform:translateY(calc((1 - var(--m-cta-opacity,0)) * 8px));
    pointer-events:var(--m-cta-events,none);
    transition:opacity .4s ease, transform .4s ease;
  }

  @media(max-width:760px){
    .manifesto-content p{font-size:16px}

    /* Hide the landscape hero video on mobile, no portrait version, the
       landscape clip crops poorly. With it hidden, the manifesto sticky
       runway no longer needs 400vh, so shrink it. */
    .hero-stage{display:none}
    .transition-section{height:15vh}

    /* Portrait phones: viewport-unit radial keeps the halo wide and squat
       instead of stretching tall like the desktop %-based ellipse. */
    .fixed-canvas{background:radial-gradient(
      ellipse 110vw 30vh at 50% 100%,
      #ffffff 0%,
      var(--canvas-c1,#0077b6) 50%,
      var(--canvas-c2,#001d3d) 80%,
      var(--canvas-c3,#000000) 100%)}

    /* Integrations: stack heading/desc/button directly on top of the orbit
       wheel by switching the section to a one-cell grid. Icons shrink so
       they don't bleed past the viewport edges. */
    .io-section{display:grid;grid-template-areas:"stack";place-items:center;
      gap:0;min-height:680px;padding:60px 16px;overflow:hidden}
    .io-left,.io-right,.io-wheel{grid-area:stack}
    .io-left{width:auto;max-width:340px;margin:0 auto;
      align-items:center;text-align:center;z-index:5}
    .io-left .kicker,.io-heading,.io-desc{text-align:center}
    .io-heading{font-size:clamp(28px,7vw,42px);text-wrap:balance;margin-bottom:14px}
    .io-desc{font-size:13px;line-height:1.5;margin-bottom:20px}
    .io-left .btn{align-self:center;width:auto}
    .io-right{width:100%;height:100%;margin-top:0}
    .io-icon{width:74px;height:74px;margin-left:-37px;margin-top:-37px}
    .io-icon img,.io-icon svg{max-width:55%;max-height:55%}
    .io-icon .io-glyph{font-size:13px}

    /* Center the tap-in section head on mobile so it reads as a centered
       column instead of a left-aligned two-column flex. */
    .tapin-head{flex-direction:column;align-items:center!important;
      text-align:center;gap:14px}
    .tapin-head h2{text-align:center}
    .tapin-head p{max-width:none;text-align:center}
  }

  /* ---------- FIXED CANVAS (gradient transition background) ---------- */
  .fixed-canvas{
    position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;
    background:radial-gradient(
      ellipse
        calc(42% * var(--canvas-scale, 0.55))
        calc(34% * var(--canvas-scale, 0.55))
      at 50% 100%,
      #ffffff 0%,
      var(--canvas-c1, #0077b6) 50%,
      var(--canvas-c2, #001d3d) 80%,
      var(--canvas-c3, #000000) 100%
    );
  }

  /* ---------- GRADIENT TRANSITION SECTION ---------- */
  /* Tall scroll track for the gradient transition. The extra height
     keeps the manifesto STICKY-PINNED in place for the full duration
     of the hero video's slide-up, so the manifesto text never gets
     pushed up by the rising video. Color/scale animations are tied
     to absolute scroll in JS, so they don't stretch when height changes. */
  .transition-section{position:relative;height:400vh;background:transparent}
  /* The sticky container is the 100vh viewport-locked frame that
     holds the manifesto text. It pins to the top of the viewport
     when the section's top reaches the viewport top, and stays
     pinned for the 300vh sticky range (sectionHeight − stickyHeight).
     Flex centers the text both vertically and horizontally.
     z-index:2 keeps the text above the fixed-canvas (z-index:-1). */
  /* Full-viewport sticky with content centered at viewport 50vh.
     Sticky ends at the exact same scroll position the buttons reach
     full opacity (progress = 1). At that moment the sticky unsticks
     AND the .hero video (in normal flow below) appears at the bottom
     of the viewport simultaneously. From then on, both manifesto and
     video move with the page in lockstep, no sliding-up animation. */
  .transition-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;background:transparent;z-index:2;overflow:hidden;pointer-events:none}
  .transition-sticky > *{pointer-events:auto}
  .transition-headline{
    position:relative;z-index:1;
    font-size:clamp(48px,8vw,120px);
    font-weight:600;letter-spacing:-.025em;
    text-align:center;line-height:1;
    color:var(--transition-text-color,#fff);
    transition:color .4s ease;
    text-wrap:balance;
    margin:0;
  }

  /* ---------- TRUST BAR ---------- */
  /* Trust bar, sits right under the hero. Boxed-card format with
     "Trusted on the floor" as a centered label above the card. */
  .trust{max-width:1320px;margin:0 auto;padding:24px 32px 48px;position:relative;z-index:1}
  .trust-label{text-align:center;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .trust-inner{padding:28px 36px;border-radius:20px;background:#fff;border:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;box-shadow:0 2px 12px rgba(12,55,77,.03)}
  .trust-logos{display:flex;gap:40px;flex-wrap:wrap;flex:1;justify-content:space-between;align-items:center}
  .trust-logos span{font-weight:700;font-size:17px;color:var(--faint);letter-spacing:-.01em;transition:color .2s}
  .trust-logos span:hover{color:var(--ink)}

  /* ---------- PLATFORM STRIP ---------- */
  .platform-strip{max-width:1320px;margin:0 auto;padding:60px 32px}
  .ps-inner{padding:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-radius:24px;background:#fff;border:1px solid var(--line-soft)}
  .ps-cell{display:flex;gap:16px;align-items:flex-start}
  .ps-icon{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
  .ps-cell h4{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;color:var(--ink)}
  .ps-cell p{font-size:14px;color:var(--muted);line-height:1.55}

  /* ---------- INTEGRATION ECOSYSTEM ---------- */
  /* Section immediately after the gradient transition, explicitly
     white bg with margin-top:0 so it hands off seamlessly from the
     canvas (which is also #ffffff at progress 1.0). No visible
     section boundary or color shift. */
  /* ---------- INTEGRATIONS, Orbital Carousel Wheel ----------
     A 3D-style orbital ring of integration bubbles on the right side,
     each scaled/faded by depth. Spotlight on the front (right edge);
     back side fades behind the heading column on the left. JS rotates
     the wheel and syncs the status chip label to the spotlight icon. */
  .io-section{
    position:relative;
    max-width:1480px;
    margin:0 auto;
    padding:140px 120px;
    display:flex;
    gap:64px;
    align-items:center;
    min-height:780px;
    overflow:visible;
    background:#fff;
  }
  .io-left{
    width:640px;flex-shrink:0;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    position:relative;z-index:5;
  }
  /* CTA button shouldn't stretch in the flex column */
  .io-left .btn{align-self:flex-start;width:auto}
  .io-heading{
    font-size:clamp(40px,4.6vw,60px);
    line-height:1.04;letter-spacing:-.025em;font-weight:700;
    margin-bottom:24px;color:var(--ink);
  }
  .io-heading .accent{color:var(--teal);font-weight:700}
  .io-desc{font-size:17px;color:var(--muted);line-height:1.55;margin-bottom:36px;max-width:640px}
  .io-status-chip{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:44px;
    padding:9px 18px 9px 9px;border-radius:999px;
    background:#fff;border:1px solid var(--line-soft);
    font-size:13px;font-weight:500;color:var(--ink);
    align-self:flex-start;
    box-shadow:0 2px 12px rgba(12,55,77,.05);
    min-height:46px;
  }
  .io-status-chip .io-dot{
    width:28px;height:28px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    background:#34D399;color:#fff;font-size:11px;font-weight:700;position:relative;
  }
  .io-status-chip .io-dot::after{
    content:"";position:absolute;inset:-3px;border-radius:50%;
    border:2px solid rgba(52,211,153,.35);animation:io-pulse 1.6s ease-out infinite;
  }
  @keyframes io-pulse{0%{transform:scale(0.9);opacity:1}100%{transform:scale(1.6);opacity:0}}
  .io-right{flex:1;position:relative;height:720px;min-width:0}
  .io-wheel{
    position:absolute;top:50%;left:58%;
    transform:translateY(-50%);
    width:0;height:0;pointer-events:none;z-index:1;
  }
  .io-icon{
    position:absolute;top:50%;left:50%;
    width:120px;height:120px;border-radius:50%;
    background:#fff;
    box-shadow:0 30px 60px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.04);
    display:flex;align-items:center;justify-content:center;
    margin-left:-60px;margin-top:-60px;
    will-change:transform,opacity;
    /* Starting state: invisible + collapsed at wheel center, ready to
       "bloom" outward to orbital position when the section scrolls in. */
    opacity:0;
    transform:scale(.3);
    transition:box-shadow .4s ease;
  }
  .io-icon.is-front{
    box-shadow:
      0 0 0 1px rgba(79,166,192,.12),
      0 30px 60px rgba(12,55,77,.10),
      0 10px 30px rgba(12,55,77,.08),
      0 0 80px rgba(79,166,192,.25),
      0 0 30px rgba(79,166,192,.18);
  }
  .io-icon .io-glyph{
    font-weight:800;letter-spacing:-.04em;color:var(--ink);
    font-size:22px;line-height:1;text-align:center;
  }
  .io-icon img, .io-icon svg{
    max-width:60%;max-height:60%;
    width:auto;height:auto;
    object-fit:contain;display:block;
  }
  @media(max-width:1100px){
    .io-section{flex-direction:column;gap:48px;padding:80px 24px}
    .io-left{width:100%;max-width:560px;margin:0 auto}
    .io-right{width:100%;height:560px}
    .io-wheel{left:50%}
  }

  /* ---------- HID MULTI-MODE TAP-IN ---------- */
  .tapin{max-width:1320px;margin:0 auto;padding:96px 32px;position:relative}
  .tapin-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:56px;flex-wrap:wrap}
  .tapin-head>div:first-child{flex:1;min-width:320px;max-width:860px}
  .tapin-head .kicker{margin-bottom:14px}
  .tapin-head h2{font-size:clamp(36px,4.5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
  .tapin-head h2 em{font-style:normal;color:var(--teal);font-weight:inherit}
  .tapin-head p{font-size:15px;color:var(--muted);line-height:1.55;max-width:420px}
  .modes{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1280px;margin:0 auto}
  .mode-tile{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:32px 18px 28px;text-align:center;transition:all .25s;box-shadow:0 2px 16px rgba(12,55,77,.03);display:flex;flex-direction:column;align-items:center}
  .mode-tile:hover{border-color:rgba(79,166,192,.35);transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,55,77,.06)}
  .mode-icon{width:100%;height:120px;margin:0 0 20px;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
  .mode-tile:hover .mode-icon{transform:scale(1.04)}

  /* ===== Mode icons, drop your own SVG/PNG files into this folder ===== */
  .mode-icon img{
    max-width:100%;
    max-height:110px;
    width:auto;
    height:auto;
    display:block;
    object-fit:contain;
  }
  /* Per-icon size overrides */
  .mode-icon img[src="/bluetooth.svg"]{max-height:64px}
  .mode-icon img[src="/touch.jpg"]{filter:invert(1) contrast(1.6) brightness(1.2);mix-blend-mode:multiply}

  /* ===== HID Badge ===== */
  .dev-badge{
    width:78px;height:102px;background:#ffffff;
    border-radius:7px;border:1px solid #d9e1e8;
    box-shadow:0 10px 22px rgba(12,55,77,.10);
    position:relative;display:flex;flex-direction:column;
    transform:scale(0.78);
  }
  .dev-badge::before{
    content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
    width:16px;height:7px;background:#d9e1e8;border-radius:3px 3px 0 0;
  }
  .dev-badge .photo{width:26px;height:30px;border-radius:3px;background:linear-gradient(135deg,#cdd9e3,#a8b9c8);margin:9px 0 6px 9px}
  .dev-badge .ln1{height:3px;width:54px;background:#cfd6dd;border-radius:2px;margin:5px 0 0 9px}
  .dev-badge .ln2{height:3px;width:40px;background:#dee3e8;border-radius:2px;margin:3px 0 0 9px}
  .dev-badge .stripe{position:absolute;bottom:0;left:0;right:0;height:16px;background:#0C374D;border-radius:0 0 6px 6px}

  /* ===== HID Mobile ===== */
  .dev-phone{
    width:64px;height:108px;background:#1a2332;border-radius:13px;
    box-shadow:0 14px 26px rgba(12,55,77,.18);
    padding:5px;position:relative;
    transform:scale(0.74);
  }
  .dev-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:16px;height:3px;background:#000;border-radius:2px;z-index:2}
  .dev-phone .screen{
    background:#ffffff;border-radius:9px;width:100%;height:100%;
    padding:14px 7px 0;display:flex;justify-content:center;
  }
  .dev-phone .pass{
    width:44px;height:60px;background:linear-gradient(135deg,#2B7A92,#0C374D);
    border-radius:5px;padding:5px 4px;
    display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  }
  .dev-phone .pass .lbl{font-size:5px;font-weight:700;letter-spacing:.06em;opacity:.92}
  .dev-phone .pass .bar{height:10px;background:repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 2px);border-radius:1px}

  /* ===== NFC ===== */
  .dev-nfc{display:flex;align-items:center;gap:10px}
  .dev-nfc .phone-out{
    width:42px;height:72px;background:transparent;border:2px solid #0C374D;border-radius:9px;
  }
  .dev-nfc .waves{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .dev-nfc .wave{
    width:18px;height:18px;border:2px solid var(--teal-ink);border-right:none;border-top:none;
    border-radius:0 0 0 18px;transform:rotate(45deg);
  }
  .dev-nfc .wave:nth-child(2){opacity:.55;transform:rotate(45deg) scale(.72)}
  .dev-nfc .wave:nth-child(3){opacity:.28;transform:rotate(45deg) scale(.45)}

  /* ===== QR (inline SVG) ===== */
  .dev-qr{
    width:90px;height:90px;background:#fff;border-radius:8px;padding:6px;
    border:1px solid var(--line-soft);
    display:flex;align-items:center;justify-content:center;
  }
  .dev-qr svg{width:100%;height:100%;display:block}
  .mode-name{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:4px}
  .mode-desc{font-size:12px;color:var(--muted);line-height:1.45}
  .tapin-trust{margin:40px auto 0;max-width:1100px;padding:20px 26px;background:var(--teal-soft);border:1px solid rgba(79,166,192,.22);border-radius:14px;display:flex;align-items:center;gap:16px;font-size:14px;color:var(--ink);letter-spacing:.01em;flex-wrap:wrap;line-height:1.55}
  .tapin-trust-badge{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);font-weight:700;border:1px solid rgba(79,166,192,.4);background:#fff;padding:6px 14px;border-radius:999px;flex-shrink:0;white-space:nowrap}
  .tapin-trust span:last-child{flex:1;min-width:240px;color:var(--muted)}

  /* ---------- PRODUCT EXPLORER ---------- */
  #products{padding-top:56px;padding-bottom:56px}
  .explorer-wrap{padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line-soft);box-shadow:0 2px 20px rgba(12,55,77,.03)}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;padding:6px;background:#F1F3F4;border-radius:999px;width:fit-content;border:1px solid var(--line-soft)}
  .tab{padding:10px 20px;border-radius:999px;color:var(--muted);font-size:13px;font-weight:500;transition:all .2s;border:0}
  .tab:hover{color:var(--ink)}
  .tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(12,55,77,.08);font-weight:600}
  .explorer-body{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:stretch;min-height:440px}
  .product-meta{display:flex;flex-direction:column}
  .product-meta h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;margin-bottom:10px;line-height:1.15;color:var(--ink)}
  .product-meta .desc{color:var(--muted);line-height:1.55;margin-bottom:20px;font-size:14px;max-width:460px}
  .spec-row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:center;font-size:13px}
  .spec-row:last-of-type{border-bottom:0}
  .spec-row .k{color:var(--faint);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
  .spec-row .v{color:var(--ink);font-weight:600;font-size:14px}
  .spec-row .why{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);background:var(--teal-soft);padding:6px 12px;border-radius:999px;font-weight:700;cursor:pointer;border:0;font-family:inherit;transition:all .15s}
  .spec-row .why:hover{background:var(--teal);color:#fff}
  .spec-row[data-open="true"]{background:rgba(79,166,192,.04)}
  .spec-row .why-body{grid-column:1/-1;font-size:13px;color:var(--muted);padding:8px 0 4px;display:none;line-height:1.6}
  .spec-row[data-open="true"] .why-body{display:block}

  .product-visual{position:relative;aspect-ratio:5/4;max-height:440px;border-radius:20px;background:radial-gradient(circle at 50% 45%,rgba(79,166,192,.10) 0%,#F1F3F4 70%);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;padding:32px;color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;font-weight:600;overflow:hidden}
  .product-visual img{position:relative;z-index:2;max-width:82%;max-height:90%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 24px 48px rgba(12,55,77,.14)) drop-shadow(0 0 56px rgba(79,166,192,.22))}
  .product-visual video{position:relative;z-index:2;max-width:90%;max-height:94%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
  .product-cta{margin-top:auto;align-self:flex-start}

  /* ---------- STATS ---------- */
  .stats-band{padding:56px 0;background:transparent;border:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;box-shadow:none}
  .stat-cell{padding:0 32px;border-left:1px solid var(--line-soft);position:relative}
  .stat-cell:first-child{border-left:0;padding-left:0}
  .stat-cell .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:14px}
  /* font-variant-numeric:tabular-nums locks every digit (and the comma) to
     the same advance width so the count-up animation doesn't jitter as the
     digit values change. */
  .stat-cell .big{font-size:clamp(40px,4.5vw,64px);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
  /* Mobile-only stats title + sub: hidden on desktop, revealed at ≤1024px */
  .stats-card-title,.stats-card-sub{display:none}

  /* ---------- COLLAGE ---------- */
  .collage{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(2,260px);gap:16px}
  .tile{border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line-soft);transition:transform .25s,box-shadow .25s}
  .tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -15px rgba(12,55,77,.15)}
  .tile.hardware{grid-row:1/3;padding:36px;background:linear-gradient(180deg,#fff,#F4F7FA)}
  .tile-sw{background:linear-gradient(160deg,#F0FBFD,#fff)}
  .tile-insight{background:linear-gradient(160deg,rgba(79,166,192,.18),#fff)}
  .tile-ibm{background:var(--ink);border-color:var(--ink);cursor:pointer}
  .tile-ibm:hover{background:var(--ink-2)}
  .tile-ig{background:linear-gradient(160deg,#EEF4FD,#fff)}
  .tile-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700}
  .tile h4{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-top:auto}
  .tile.tile-ibm .tile-label{color:var(--cyan)}
  .tile.tile-ibm h4{color:#fff}
  .tile.tile-ibm .expand-body{color:rgba(255,255,255,.82)}
  .tile.tile-ibm .expand-body b{color:var(--cyan)}
  .tile.hardware h4{font-size:28px}
  .tile .expand-body{display:none;font-size:13px;color:var(--muted);line-height:1.55;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}
  .tile-ibm[data-open="true"]{grid-row:1/3}
  .tile-ibm[data-open="true"] .expand-body{display:block}

  /* ---------- TESTIMONIALS ---------- */
  .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .test-grid{align-items:stretch}
  .test{background:#fff;padding:32px;border-radius:20px;border:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:space-between;min-height:280px;height:100%;box-shadow:0 2px 12px rgba(12,55,77,.03)}
  .test blockquote{font-size:17px;line-height:1.5;color:var(--ink);font-weight:500;margin-bottom:24px;letter-spacing:-.005em;flex:1}
  .test .author{display:flex;gap:14px;align-items:center;padding-top:20px;border-top:1px solid var(--line-soft)}
  .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0}
  .test .name{font-size:14px;font-weight:600;color:var(--ink);display:block}
  .test .role{font-size:12px;color:var(--faint);display:block;margin-top:2px}

  /* ---------- ROI CALCULATOR ---------- */
  .roi-card{padding:56px;border-radius:28px;background:#fff;border:1px solid var(--line-soft);display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;box-shadow:0 2px 20px rgba(12,55,77,.03)}
  .roi-head h2{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.02em;line-height:1.08;font-weight:700;margin-bottom:18px;color:var(--ink)}
  .roi-head h2 em{font-style:normal;color:var(--ink)}
  .roi-head p{color:var(--muted);font-size:15px;max-width:440px;line-height:1.6}
  .sliders{margin-top:32px;display:flex;flex-direction:column;gap:24px}
  .slider-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
  .slider-row label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
  .slider-row .val{font-size:15px;font-weight:700;color:var(--teal-ink);font-variant-numeric:tabular-nums}
  .slider-row input[type=range]{
    grid-column:1/3;-webkit-appearance:none;appearance:none;width:100%;height:4px;
    background:var(--line);border-radius:999px;outline:none;margin-top:6px
  }
  .slider-row input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:999px;
    background:var(--ink);cursor:pointer;
    box-shadow:0 0 0 4px rgba(12,55,77,.14),0 2px 8px rgba(12,55,77,.25)
  }
  .slider-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:999px;background:var(--ink);cursor:pointer;border:0;box-shadow:0 0 0 4px rgba(12,55,77,.14)}
  .ratio-note{font-size:11px;color:var(--faint);font-weight:500;margin-top:-12px;letter-spacing:.01em}

  .roi-result{padding:36px;border-radius:20px;background:linear-gradient(180deg,#05080D 0%,#0C374D 55%,#164FB1 100%);color:#fff;position:relative;overflow:hidden}
  .roi-result::before{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
  .roi-result > *{position:relative;z-index:2}
  .roi-result .label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:12px}
  .roi-result .savings{font-size:clamp(48px,5vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
  .roi-result .savings-meta{font-size:12px;color:rgba(255,255,255,.6);margin-top:8px;margin-bottom:24px}
  .roi-sub{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
  .roi-sub .sub-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:6px}
  .roi-sub .sub-val{font-size:24px;font-weight:700;letter-spacing:-.01em;color:#fff}
  .roi-email{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;position:relative}
  .roi-email .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .roi-email input[type=email]{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:10px;padding:11px 14px;font-size:13px;font-family:inherit;outline:none}
  .roi-email input[type=email]::placeholder{color:rgba(255,255,255,.45)}
  .roi-email input[type=email]:focus{border-color:var(--cyan)}
  .roi-email button{background:#fff;color:var(--ink);border:0;padding:11px 18px;border-radius:10px;font-weight:700;font-size:13px;transition:background .2s}
  .roi-email button:hover:not(:disabled){background:var(--cyan)}
  .roi-email button:disabled{opacity:.7;cursor:default}
  .roi-email .form-status,
  .roi-email .form-error{font-size:12px;margin-top:10px;display:none;width:100%;line-height:1.5;outline:none}
  .roi-email .form-status{color:var(--cyan)}
  .roi-email .form-error{color:#FFC2C2}
  .roi-email.is-success .form-status{display:block}
  .roi-email.is-error   .form-error{display:block}

  /* ---------- FAQ ---------- */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;align-items:start}
  .faq-col{display:flex;flex-direction:column;gap:14px}
  details{padding:22px 26px;border-radius:16px;background:#fff;border:1px solid var(--line-soft);transition:all .2s}
  details[open]{border-color:rgba(79,166,192,.3);background:linear-gradient(180deg,#F7FCFD,#fff)}
  summary{font-weight:600;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;color:var(--ink)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:22px;color:var(--ink);font-weight:300;flex-shrink:0;line-height:1}
  details[open] summary::after{content:"−"}
  details .a{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.65;max-width:460px}

  /* ---------- BLOG ---------- */
  .blog-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px;gap:24px;flex-wrap:wrap}
  .blog-head h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.02em;line-height:1.08;font-weight:700;color:var(--ink)}
  .blog-head h2 em{font-style:normal;color:var(--ink)}
  .blog-head a{font-size:14px;font-weight:600;color:var(--teal-ink)}
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .post{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);transition:transform .2s,box-shadow .2s}
  .post:hover{transform:translateY(-4px);box-shadow:0 30px 50px -15px rgba(12,55,77,.12)}
  .post-cover{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#F1F3F4}
  .post-cover img{width:100%;height:100%;object-fit:cover;display:block}
  .post-cover svg{opacity:.6}
  .post-body{padding:26px 28px}
  .post-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;font-weight:700}
  .post h5{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:14px;letter-spacing:-.01em;color:var(--ink)}
  .post .meta{font-size:12px;color:var(--faint)}

  /* ---------- EXPERIENCE CENTER + FOOTER (Embrava gradient bleed) ----------
     The .footer-canvas wraps the Experience Center CTA and the footer in a
     single linear gradient that starts white at the top of the CTA and
     deepens to near-black at the base of the footer, similar to the
     Antimetal-style bleed where the CTA visually pours into the footer. */
  .footer-canvas{
    position:relative;
    background:linear-gradient(180deg,
      #ffffff   0%,
      #E5F5FF   8%,
      #99D6F0  22%,
      #4FA6C0  40%,
      #0077b6  62%,
      #001d3d  86%,
      #040818 100%
    );
  }
  .xc{max-width:1320px;margin:0 auto;padding:80px 32px 100px;position:relative}
  .xc-cta{
    padding:120px 60px 80px;border-radius:32px;text-align:center;position:relative;overflow:hidden;
    background:transparent;
    min-height:520px;display:flex;flex-direction:column;justify-content:center;align-items:center
  }
  .xc-cta > *{position:relative;z-index:2}
  .xc-cta .kicker{color:rgba(255,255,255,.78);justify-content:center}
  .xc-cta .kicker::before{background:#fff}
  .xc-cta h2{font-size:clamp(40px,5.2vw,68px);letter-spacing:-.03em;line-height:1.05;font-weight:700;margin-bottom:22px;color:#fff}
  .xc-cta h2 em{font-style:normal;color:#fff}
  .xc-cta p{font-size:18px;color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 36px;line-height:1.55}
  .xc-cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .xc-cta .btn-primary{background:#fff;color:var(--ink)}
  .xc-cta .btn-primary:hover{background:rgba(255,255,255,.92)}

  /* ---------- FOOTER (inside .footer-canvas, transparent over gradient) ---------- */
  footer{background:transparent;border-top:none;padding:72px 32px 36px;position:relative}
  .foot-grid{max-width:1320px;margin:0 auto 48px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px}
  .foot-brand p{color:rgba(255,255,255,.70);font-size:14px;line-height:1.6;max-width:320px;margin-top:20px}
  .foot-offices{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;max-width:480px}
  .foot-office-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:8px}
  .foot-office-addr{font-size:13px;line-height:1.55;color:rgba(255,255,255,.70)}
  footer h6{font-size:12px;font-weight:700;margin-bottom:18px;color:#fff;letter-spacing:.12em;text-transform:uppercase}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  footer ul a{font-size:14px;color:rgba(255,255,255,.68);transition:color .2s}
  footer ul a:hover{color:#fff}
  .foot-base{max-width:1320px;margin:0 auto;display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.50);flex-wrap:wrap;gap:16px}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:1024px){
    .ps-inner,.collage,.explorer-body,.test-grid,.blog-grid,.faq-grid,.roi-card,.foot-grid,.hv-content,.eco-grid{grid-template-columns:1fr}
    .tile.hardware{grid-row:auto}

    /* Stats: wrap kicker + title + sub + 2x2 grid in one white card.
       Title/sub are mobile-only, they give the band a heading that
       desktop doesn't need (the kicker alone is enough at full width).
       Each cell reorders to big number → label. */
    .stats-card{background:#fff;border:1px solid var(--line-soft);
      border-radius:32px;padding:40px 32px;
      box-shadow:0 2px 12px rgba(12,55,77,.03)}
    .stats-card-head{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}
    .stats-card-title{display:block;font-size:clamp(32px,3.6vw,46px);
      font-weight:700;color:var(--ink);letter-spacing:-.025em;
      line-height:1.05;max-width:520px}
    .stats-card-sub{display:block;font-size:16px;color:var(--muted);
      max-width:480px;line-height:1.55}
    .stats-band{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px;
      padding:0;background:transparent;border:0;box-shadow:none}
    .stat-cell{border:0;padding:0;display:flex;flex-direction:column}
    .stat-cell .big{order:1;margin-bottom:18px;font-size:clamp(38px,8vw,56px)}
    .stat-cell .label{order:2}

    .roi-card{padding:40px 32px;gap:32px}
    .explorer-wrap{padding:32px}
    .hero{padding:64px 24px 56px}
    .hero-ctas{margin-bottom:36px}
    .hero-visual{aspect-ratio:auto}
    .modes{grid-template-columns:repeat(3,1fr);gap:12px}
    .tapin-head{align-items:flex-start;gap:32px}
    .eco{padding:80px 28px}
    .tapin{padding:80px 28px}
  }
  @media(max-width:640px){
    nav ul{display:none}
    .hero{padding:48px 20px 32px}
    .section,.xc,.platform-strip,.trust,.eco,.tapin{padding-left:20px;padding-right:20px}
    .xc-cta{padding:56px 28px}
    .hv-content{padding:32px;gap:24px}
    .hv-device svg{max-width:220px;height:auto}
    .modes{grid-template-columns:repeat(2,1fr)}
    .eco-head h2,.tapin-head h2{font-size:clamp(28px,7vw,42px)}
  }