.lmx-hero-inner{position:relative;width:100%;min-height:100vh;box-sizing:border-box;display:grid;grid-template-rows:1fr auto;background:#000 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;overflow:visible;--hero-scale:1;--lmx-btn-height:max(42px,calc(53px * var(--hero-scale,1)));--lmx-btn-padding-x:max(20px,calc(30px * var(--hero-scale,1)));--lmx-btn-font-size:max(11px,calc(13px * var(--hero-scale,1)));--lmx-h1-font-family:'Outfit','Poppins',sans-serif;--lmx-h1-size:max(32px,calc(75px * var(--hero-scale,1)))}
.lmx-hero-inner *{box-sizing:border-box}
.lmx-hero-content{display:flex;min-width:0;align-items:center;justify-content:space-between;min-height:100%;gap:max(20px,calc(40px * var(--hero-scale,1)));padding:0 var(--lmx-section-padding-x);box-sizing:border-box}
.lmx-hero-text{width:calc(48% - max(10px,calc(20px * var(--hero-scale,1))));flex:0 0 auto;min-width:0}
.lmx-hero-title{width:max-content;max-width:none;margin:0 !important;font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;font-size:var(--lmx-h1-size) !important;line-height:1.17 !important;letter-spacing:-.005em;color:#fff !important;white-space:nowrap}
.lmx-hero-desc{margin:max(14px,calc(30px * var(--hero-scale,1))) 0 0 !important;max-width:640px;font-size:max(12px,calc(16px * var(--hero-scale,1))) !important;line-height:1.6 !important;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88) !important}
.lmx-hero-kicker{margin:max(16px,calc(38px * var(--hero-scale,1))) 0 max(8px,calc(14px * var(--hero-scale,1)));font-size:max(10px,calc(12.5px * var(--hero-scale,1)));font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lmx-hero-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:max(12px,calc(22px * var(--hero-scale,1)));margin-top:0}
.lmx-btn{display:inline-flex;align-items:center;height:var(--lmx-btn-height);padding:0 var(--lmx-btn-padding-x);font-size:var(--lmx-btn-font-size) !important;font-weight:700;text-transform:uppercase;text-decoration:none !important;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;position:relative;overflow:hidden}
.lmx-btn-primary{gap:26px;background:#52C7C6 !important;color:#04211F !important;letter-spacing:.12em;border:none}
/* The lift, the glow and the sheen come from the shared .lmx-btn-fx component (assets/css/shared/buttons.css); only the variant colour lives here. */
.lmx-btn-primary:hover{background:#83DAD9 !important}
.lmx-btn-arrow{display:flex;align-items:center}
.lmx-arrow-line{display:block;width:22px;height:1.6px;background:currentColor}
.lmx-arrow-chevron{display:block;width:8px;height:8px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-left:-7px}
/* The stage is wider than the column in narrow windows. It is pushed to the
   right edge of the column so that the overlap goes LEFT onto the heading
   (which is acceptable) and the gauges on the right are not cut off by the
   edge of the screen. */
.lmx-hero-visual{flex:0 0 auto;align-self:stretch;width:calc(52% - max(10px,calc(20px * var(--hero-scale,1))));display:flex;align-items:center;justify-content:flex-end}
.lmx-hero-wheel{max-width:100%;max-height:max(340px,calc(640px * var(--hero-scale,1)));width:auto;height:auto;display:block;user-select:none;pointer-events:none}
.lmx-wheel-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0}
/* The tilt moved onto the wheel image itself (see block1-hero.js): rotating
   this container rebuilt the whole subtree of the stage on every frame of
   mouse movement. The container is now simply a wrapper. */
.lmx-wheel-tilt{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lmx-wheel-float{display:flex;align-items:center;justify-content:center;width:100%;height:100%;animation:lmxWheelFloat 5.2s ease-in-out infinite alternate}
@keyframes lmxWheelFloat{0%{transform:translateY(-9px)}100%{transform:translateY(9px)}}
@media (max-width:1024px){
.lmx-hero-inner{min-height:0 !important;display:flex !important;flex-direction:column}
.lmx-hero-content{flex-direction:column;align-items:flex-start;padding-top:110px;padding-bottom:30px;gap:0}
.lmx-hero-text{width:100%;max-width:640px}
/* The wheel and everything around it (kb/s gauges, equalisers, orbits, stars)
   is not printed at all on narrow screens: the stage collapsed to zero height
   there anyway, and the absolutely placed gauges piled up on each other as
   orphans. */
.lmx-hero-visual{display:none}
.lmx-hero-title{width:auto;font-size:48px !important;white-space:normal}
}
@media (max-width:768px){
.lmx-hero-content{padding-top:96px;padding-left:24px;padding-right:24px;gap:0}
.lmx-hero-title{font-size:38px !important}
.lmx-hero-desc{font-size:17px !important;line-height:1.65;margin-top:22px !important}
.lmx-hero-ctas{margin-top:30px}
.lmx-btn{width:100%;justify-content:center}
.lmx-hero-ctas{flex-direction:column;align-items:stretch}
}
@media (max-width:420px){
.lmx-hero-title{font-size:32px !important}
}

/* The stats in the hero footer. Every size is tied to --hero-scale, like the
   rest of the block, so they shrink together with it in short windows. */
.lmx-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:max(14px,calc(30px * var(--hero-scale,1))) var(--lmx-section-padding-x) max(18px,calc(38px * var(--hero-scale,1)));border-top:1px solid rgba(255,255,255,.09);box-sizing:border-box}
.lmx-hero-stat{position:relative;padding:0 max(12px,calc(28px * var(--hero-scale,1)));text-align:center}
.lmx-hero-stat+.lmx-hero-stat::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:max(26px,calc(46px * var(--hero-scale,1)));background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0))}
.lmx-hero-stat-num{display:block;color:#52C7C6;font-family:var(--lmx-h1-font-family);font-weight:300;font-size:max(26px,calc(52px * var(--hero-scale,1)));line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* The numeric part while counting: wide enough for every digit (the script
   sets min-width in ch) so that running digits do not push the suffix and the
   neighbours around. */
.lmx-hero-stat-count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.lmx-hero-stat-label{display:block;margin-top:max(2px,calc(7px * var(--hero-scale,1)));color:rgba(255,255,255,.72);font-size:max(10px,calc(13px * var(--hero-scale,1)));font-weight:400;letter-spacing:.13em;text-transform:uppercase}
@media (max-width:1024px){.lmx-hero-stats{padding-left:24px;padding-right:24px;gap:10px}}
@media (max-width:600px){.lmx-hero-stats{grid-template-columns:1fr;gap:14px}.lmx-hero-stat+.lmx-hero-stat::before{display:none}}

/* the kb/s number over the baked-in one */

/* the graph line */

/* equaliser */

/* a beam from the centre outwards with a dot running along it */

/* the central readout over the baked-in “999 THREATS” */

/* --- the wheel surroundings ----------------------------------------------
   Everything that used to be baked into the picture is now live markup. The
   .lmx-hud stage keeps the proportions of the reference (1341x1173) and the svg
   uses the same viewBox — so coordinates from the reference land one to one
   and percentages scale with the circle on any screen. */
/* the size is set by WIDTH ONLY: max-height together with aspect-ratio
   flattened the stage and all the percentage tops of the gauges collapsed into
   one band */
/* The stage is sized by the HEIGHT of the content row, not by the width of the
   column. The stage used to be width:100% of the column — and in a narrow but
   tall window (1440x900) the circle fell to 51% of the hero height while
   elsewhere it gave 59%. The circle takes 66.5% of the stage height, so
   height:90% yields the target ~60% of the hero height at any resolution. The
   width follows from aspect-ratio; the stage is allowed to extend past the
   column — a light overlap of the heading is acceptable. */
/* The stage is noticeably larger than the content row and deliberately extends
   beyond it: there were about 200px of free space below and 140px to the
   right, and the composition did not use them. The 136% height plus the shift
   down and left (in percentages of its own size, so the proportion holds on
   any screen) bring the surroundings right up to the edges of the block;
   overlapping the heading on the left is acceptable. */
.lmx-hud{position:relative;flex:0 0 auto;height:122%;width:auto;max-width:none;aspect-ratio:1341 / 1173;transform:translate(-10.5%,6.7%)}
/* transition+will-change — for the tilt following the cursor: JS writes it inline. */
.lmx-hero-wheel{position:absolute;z-index:2;left:50%;top:45%;width:62%;height:auto;max-width:none;max-height:none;transform:translate(-50%,-50%);user-select:none;pointer-events:none;transition:transform .15s ease-out;will-change:transform}

/* --- the background under the wheel: glow, map, stars --------------------
   The map is dark in itself, so ordinary transparency does not lift it: on the
   black background of the block it simply drowns. Here it goes through screen —
   black in the texture becomes transparent while the teal dots of the
   continents glow instead. A soft radial glow lies under the map so that the
   outlines show, and sparse stars lie on top. All of this is background: the
   layers do not intercept the cursor and sit below the orbits, the wheel and
   the gauges. */
.lmx-hud-glow{position:absolute;left:50%;top:44%;width:120%;height:120%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(82,199,198,.12) 0%,rgba(46,120,140,.07) 38%,rgba(20,60,80,.04) 60%,rgba(0,0,0,0) 75%)}
.lmx-hud-stars{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lmx-hud-stars circle{fill:#bff3f0;opacity:.5;animation:lmxStar var(--dur,5s) ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes lmxStar{0%,100%{opacity:.18}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.lmx-hud-stars circle{animation:none;opacity:.5}}
/* The map is the bottom layer of the stage: below the orbits and below the
   wheel. Its own transparency is enough for it to show on the black background
   of the block, so no blend mode is needed. */
.lmx-hud-map{position:absolute;left:50%;top:44%;width:132%;height:auto;transform:translate(-50%,-50%);opacity:.11;mix-blend-mode:screen;filter:brightness(.8) saturate(.8);pointer-events:none;user-select:none;z-index:0}
/* A bright copy over the dim one: the mask keeps the glow only around the
   wheel and in two patches at the edges — the rest of the map stays muted. */
.lmx-hud-map--hot{opacity:.66;filter:brightness(1.25) saturate(1.2);-webkit-mask-image:radial-gradient(ellipse 30% 34% at 50% 45%,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,0) 64%),radial-gradient(ellipse 15% 20% at 20% 34%,#000 0%,rgba(0,0,0,0) 72%),radial-gradient(ellipse 14% 18% at 80% 66%,#000 0%,rgba(0,0,0,0) 72%);mask-image:radial-gradient(ellipse 30% 34% at 50% 45%,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,0) 64%),radial-gradient(ellipse 15% 20% at 20% 34%,#000 0%,rgba(0,0,0,0) 72%),radial-gradient(ellipse 14% 18% at 80% 66%,#000 0%,rgba(0,0,0,0) 72%)}
.lmx-hud-net{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.lmx-hud-line{fill:none;stroke:#52C7C6;stroke-width:1.1;opacity:.38;vector-effect:non-scaling-stroke}
.lmx-hud-dot{fill:#8ef0ea;filter:drop-shadow(0 0 6px rgba(82,199,198,.9));transform-box:fill-box;transform-origin:center;animation:lmxHudDot 3.6s ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes lmxHudDot{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
.lmx-hud-pulse{fill:#c9fbf7;filter:drop-shadow(0 0 5px rgba(150,240,235,.95))}

.lmx-hud-el{position:absolute;z-index:3;pointer-events:none;overflow:visible}
.lmx-hud-num{display:block;margin-bottom:.35em;color:#fff;font-family:var(--lmx-h1-font-family);font-weight:400;font-size:max(9px,calc(13px * var(--hero-scale,1)));letter-spacing:.03em;line-height:1.2;white-space:nowrap}
.lmx-hud-num{transition:opacity .45s ease}
.lmx-hud-num b{font-weight:400}
.lmx-hud-el.is-swapping .lmx-hud-num{opacity:.15}
.lmx-hud-gfx{display:block;width:100%;height:max(16px,calc(26px * var(--hero-scale,1)));overflow:visible}
.lmx-hud-wave .lmx-hud-gfx polyline{fill:none;stroke:#52C7C6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(82,199,198,.7))}
.lmx-hud-eq .lmx-hud-gfx rect{fill:#52C7C6;transition:y .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
.lmx-hud-dot{animation:none}
.lmx-hud-pulse{display:none}
.lmx-hud-eq .lmx-hud-gfx rect{transition:none}
}

/* An estimate of the scale for the FIRST paint (2026-09-24). The exact scale
   is computed by page.js on DOMContentLoaded (height plus the width of the
   heading without wrapping), but on the hosting the first frame makes it out
   earlier and the hero jumped from 1 to ~0.76 (CLS 0.04–0.09). Measured across
   windows: the scale is bounded by the width and is almost linear in it (0.66
   at 1280px … 1 from 1920px); the steps below are flat numbers (dividing
   lengths in calc() is not supported, and an invalid variable value would take
   down every size in the hero). The inline style from page.js overrides the
   estimate; it only makes the first frame close to the final one. The mobile
   branch (≤1024) does not use the scale. */
@media (min-width:1025px){.lmx-hero-inner{--hero-scale:.66}}
@media (min-width:1366px){.lmx-hero-inner{--hero-scale:.71}}
@media (min-width:1440px){.lmx-hero-inner{--hero-scale:.76}}
@media (min-width:1536px){.lmx-hero-inner{--hero-scale:.82}}
@media (min-width:1600px){.lmx-hero-inner{--hero-scale:.86}}
@media (min-width:1760px){.lmx-hero-inner{--hero-scale:.93}}
@media (min-width:1920px){.lmx-hero-inner{--hero-scale:1}}

/* The first screen exactly one window tall (2026-09-30).
   The circle stage is 122% of the column height, and its .lmx-hud-glow is
   another 120% of the stage: upwards it goes behind the opaque header,
   downwards below the fold, and it is invisible in both places. But while the
   overhang was ordinary visible overflow it counted towards the section's
   scrollHeight: the first screen measured 20-50px taller than the window
   (responsive-audit measurement; 49px at 1920x1080). We clip exactly where the
   window clips anyway: .lmx-hero-inner has no side padding (its box equals the
   section box) and the header covers the top. Desktop only: below 1025px the
   stage is not printed at all and the section grows with its content.
   overflow:hidden is the fallback for browsers without clip. */
@media (min-width:1025px){
.lmx-hero-inner{overflow:hidden;overflow:clip}
}