#hero { padding-top: calc(var(--nav) + 40px); padding-bottom: 60px; }
         /* the decorative .aur blobs sit at right:-200px; clip them like #hero already does
            so they can't push a horizontal scrollbar onto the page */
         .sp.position-relative { overflow: hidden; }
         .hero-copy { text-align: left; }
         /* the theme h1 is sized for a full-width centred hero - rescale for two columns */
         .hero-copy .h1 { font-size: clamp(2.2rem, 3.5vw, 3.45rem); margin-bottom: 20px; }
         .hbadge-up { text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; }
         .hbadge-up i { font-size: .72rem; }
         /* feature pill row */
         .hfeats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
         .hfeat { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 500; color: var(--tx2); }
         .hfeat-i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                    background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.32); color: #a78bfa; font-size: .66rem; flex-shrink: 0; }
         /* device stage - a wireframe globe behind the dashboard, a neon ellipse
            underneath it, the tilted screenshot floating in front of both */
         .hstage { position: relative; display: flex; align-items: center; justify-content: center;
                   padding: 96px 0 76px; perspective: 2300px; }
         /* wireframe globe: sits mostly above/behind the shot, its lower half hidden
            behind the opaque screenshot (z-index) - the "only top and sides show" look */
         /* centred on the ring below it, matching the reference art - indigo stroke,
            large enough to fully enclose the shot */
         .hglobe { position: absolute; left: 50%; top: -8%; width: 92%; aspect-ratio: 1;
                   transform: translate(-50%, 0); z-index: 0; pointer-events: none;
                   opacity: .95; filter: drop-shadow(0 0 20px rgba(99,102,241,.4)); }
         .hglobe svg { display: block; width: 100%; height: 100%; overflow: visible; }
         .hglobe .gline { fill: none; stroke: #818cf8; stroke-width: 1; opacity: .7; }
         .hglobe .gline-soft { stroke-width: .7; opacity: .45; }
         /* one flat colour all the way round - no gradient, so top and bottom match exactly */
         .hglobe .grim { fill: none; stroke: #818cf8; stroke-width: 1.6; opacity: .95;
                         filter: drop-shadow(0 0 4px rgba(129,140,248,.9)) drop-shadow(0 0 14px rgba(99,102,241,.85)); }
         /* small connection-point dots sitting on the grid lines */
         .hglobe .gdot { fill: #c7d2fe; }
         .hglobe .gdot-glow { fill: #818cf8; opacity: .35; }
         /* neon ellipse the shot appears to float above - perspective flattens the
            circle, brightest along its front/side edge, fading as it recedes */
         .hbase { position: absolute; left: 50%; bottom: 6%; width: 130%; height: 24%;
                  transform: translate(-50%, 0); border-radius: 50%; z-index: 1; pointer-events: none;
                  border: 2px solid rgba(168,120,255,.9);
                  background: radial-gradient(ellipse at center, rgba(139,92,246,.18), rgba(139,92,246,0) 72%);
                  box-shadow: 0 0 40px rgba(139,92,246,.85), 0 0 120px rgba(139,92,246,.4), inset 0 0 50px rgba(139,92,246,.15); }
         /* the shot: one plain image, gently tilted in 3D - no fold, no split.
            overflow/border-radius stay off the rotated element itself (a rounded
            clip combined with a 3D transform forces Chrome to rasterize the whole
            thing as a soft bitmap); the corner rounding instead comes from the
            image asset/border only, no clipping element in the transform chain. */
         /* single rule for the shot - it used to be split across .hshot and .dshot,
            and .dshot's width silently won, so any width set here did nothing */
         /* scale(1, 1.15) stretches height only - width stays as-is so the ring and
            globe keep their positions; the bottom-edge origin makes it grow upward */
         .hshot { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin: 0 auto;
                  border-radius: 16px; border: 1px solid var(--bd2);
                  box-shadow: 0 14px 30px rgba(0,0,0,.35);
                  transform-origin: 50% 100%; transform: translateX(-3%) rotateX(6deg) rotateY(-18deg) scale(1.16, 1.25); }
         /* floating labels */
         /* anchored to the device's left edge, then pushed fully outside it, so the
            label can never cover the mock regardless of column width */
         .hchip { position: absolute; z-index: 3; left: 0; transform: translateX(-100%);
                  display: inline-flex; align-items: center; gap: 7px;
                  padding: 7px 13px; border-radius: 100px; font-size: .74rem; font-weight: 600;
                  background: var(--sf); border: 1px solid var(--bd2); color: var(--tx);
                  box-shadow: 0 12px 30px rgba(0,0,0,.4); white-space: nowrap; }
         .hchip i { font-size: .72rem; }
         .hchip-a { top: 3%; margin-left: -6px; color: #34d399; animation: hfloat 5s ease-in-out infinite; }
         .hchip-a i { color: #34d399; }
         .hchip-b { top: 15%; margin-left: -14px; color: #f87171; animation: hfloat 5s ease-in-out infinite; animation-delay: .9s; }
         .hchip-b i { color: #f87171; }
         /* compliance trust rail */
         .hstrip { width: min(100%, 1500px); margin: 62px auto 0; padding: 0; position: relative; overflow: hidden;
                   display: grid; grid-template-columns: minmax(580px, .9fr) minmax(0, 1.5fr); gap: 0;
                   align-items: center; text-align: left; border: 1px solid var(--bd2); border-radius: 16px;
                   background: var(--sf); }
         .hstrip::before { content: none; }
         /* was hardcoded to #f5f3ff (light lavender) - in dark mode that stayed a
            bright light panel while .hstrip-title's color:var(--tx) turned near-white
            there too, making the subtitle nearly invisible against its own background.
            var(--bg2) gives an equivalent light tint in light mode and a dark, blended
            tint in dark mode. */
         .hstrip-copy { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
                        padding: 28px 26px; background: var(--bg2); border-right: 1px solid var(--bd2); }
         .hstrip-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: #a78bfa;
                            font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
         .hstrip-kicker i { font-size: .8rem; }
         .hstrip-title { margin: 0; color: var(--tx); font-size: .82rem; font-weight: 600; line-height: 1.45; }
         /* right panel was hardcoded to light colors (#fff bg, dark-indigo text) -
            broke in dark mode: pure-white box, and text set in var(--tx) (near-white
            there) turned invisible against it. Switched to theme variables + a
            purple-tinted palette so it adapts and stays legible in both themes. */
         .hstrip-standards { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; background: var(--sf); }
         .hstrip-owasp-label { margin: 0; color: var(--pur); font-size: .84rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
         .hstrip-owasp-word { margin: 0; color: rgba(139,92,246,.28); font-size: clamp(3rem, 4.6vw, 5rem); font-weight: 800; letter-spacing: -.075em; line-height: .95; white-space: nowrap; }
         .hstrip-support { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 3px; }
         .hstrip .tlog { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 9px;
                          opacity: 1; filter: none; border: 1px solid rgba(139,92,246,.3); border-radius: 8px;
                          background: rgba(139,92,246,.1); color: var(--pur); font-size: .68rem; white-space: nowrap; }
         .hstrip .tlog:hover { color: var(--tx); border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.18); }
         @keyframes hfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
         @media (max-width: 991px) {
            .hero-copy { text-align: center; }
            .hero-copy p, .hfeats { margin-left: auto; margin-right: auto; }
            .hero-copy .d-flex, .hfeats { justify-content: center; }
            .hstage { padding: 56px 0 30px; }
            .hglobe { width: 92%; top: -6%; left: 50%; }
            .hbase { width: 90%; height: 20%; }
            .hshot { transform: rotateX(3deg) rotateY(-14deg); }
            .hchip-a { margin-left: 22px; }
            .hchip-b { margin-left: 38px; }
            .hstrip { width: 100%; grid-template-columns: 1fr; text-align: center; }
            .hstrip-copy { align-items: center; gap: 0; padding: 24px 22px; border-right: 0; border-bottom: 1px solid var(--bd2); }
            .hstrip-kicker, .hstrip-support { justify-content: center; }
            .hstrip-standards { align-items: center; padding-top: 20px; }
         }
         @media (max-width: 575px) {
            .hglobe, .hbase, .hchip { display: none; }
            .hstage { padding: 16px 0 0; perspective: none; }
            .hshot { transform: none; }
            .hstrip { margin-top: 42px; }
            .hstrip-owasp-word { font-size: 2.8rem; white-space: normal; }
         }
         @media (prefers-reduced-motion: reduce) {
            .hchip { animation: none; }
         }
         /* video dialog (replaces the jQuery lightbox) */
         /* position:relative gives the close button a containing block; the top padding
            reserves room for it inside the dialog box so the dialog can't swallow the click */
         .viddlg { position: relative; border: 0; padding: 44px 0 0; background: transparent;
                   max-width: 960px; width: 92vw; }
         .viddlg::backdrop { background: rgba(0,0,0,.82); }
         .vidbox { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden;
                   box-shadow: 0 30px 90px rgba(0,0,0,.6); background: #000; }
         .vidbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
         .vidclose { position: absolute; top: 2px; right: 0; z-index: 1; width: 34px; height: 34px;
                     border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
                     background: rgba(255,255,255,.1); color: #fff;
                     cursor: pointer; display: flex; align-items: center; justify-content: center; }
         .vidclose:hover { background: rgba(255,255,255,.22); }
         .vidclose:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

         /* Features CTA band, enterprise panel and inline text links */
         .vcta { margin-top: 40px; padding: 32px 24px; text-align: center; border: 1px solid var(--bd); border-radius: 16px; background: var(--bg2); }
         .vcta-t { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
         .vcta-p { font-size: .9rem; color: var(--tx2); max-width: 620px; margin: 0 auto 20px; }
         .vent { border-color: var(--bd); }
         .vlink { font-size: .85rem; color: var(--tx2); }
         .vlink a { color: var(--pur); font-weight: 600; text-decoration: none; }
         .vlink a:hover { text-decoration: underline; }
         .pnum.vcap { font-size: 1.15rem; line-height: 1.3; }

         /* honeypot for the trial form: off-screen, not display:none, so bots still see it */
         .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
         #signupBtn:disabled { opacity: .7; cursor: not-allowed; }