/* ================================================================
   dfurrer.com v2 - the shell every page stands on: type, tokens, the
   field behind everything, the header, buttons and the footer.
   Page-specific layout stays inline in each page.
   ================================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%;}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial');ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:101%;}

/* The field takes the colour of whatever is in view. Registered, so the
   change between chapters is a slow wash rather than a cut. */
@property --tint { syntax:'<color>'; inherits:true; initial-value:rgb(70 110 200); }

:root{
  /* ----- midnight-blue palette, unchanged from v1 ----- */
  --bg:#02040c;
  --surface:#0b1228;
  --surface-2:#101a3c;
  --line:rgba(150,180,255,0.10);
  --line-2:rgba(150,180,255,0.17);
  --line-3:rgba(150,180,255,0.28);
  --border:var(--line);
  --border-strong:rgba(150,180,255,0.22);
  --text:#e9edff;
  --text-dim:#9aa7cf;
  --text-faint:#5a6588;
  --accent:#5d8bff;
  --accent-2:#5fe0ff;
  --accent-3:#4f7bf0;
  --live:#54e8af;
  --grad-accent:linear-gradient(105deg,#86d2ff,#5b8cff 52%,#3f6fe2);
  --font-display:"Inter Tight","Inter Tight Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono","Menlo",monospace;
  /* ----- 4px spacing scale ----- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* ----- type scale: one step per level of the hierarchy ----- */
  --fs-display:clamp(44px,5.6vw,92px);   /* the hero, once */
  --fs-h2:clamp(36px,4.6vw,72px);        /* a chapter */
  --fs-h3:clamp(30px,3.3vw,52px);        /* a product */
  --fs-h4:clamp(19px,1.45vw,22px);       /* a facet */
  --fs-lead:clamp(17px,1.4vw,20px);
  --fs-body:15px;
  --r:14px; --r-lg:20px; --r-btn:2px;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1320px;
  --hdr:64px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --spring:cubic-bezier(0.34,1.42,0.5,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:--tint 1.6s var(--ease)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#05070f}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grad{background:var(--grad-accent);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradflow 9s ease-in-out infinite}
@keyframes gradflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes nbpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ================================================================
   the field - a lattice of rods that breathe in and out of the plane,
   and part where the pointer passes. Carried over from v1 unchanged in
   concept; v2 adds the tint, so each chapter washes it in its colour.
   ================================================================ */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(66% 54% at 50% 15%,rgba(60,100,192,0.17) 0%,rgba(30,56,126,0.06) 33%,transparent 60%),
    radial-gradient(48% 44% at 50% 96%,rgba(26,48,108,0.12),transparent 64%),
    radial-gradient(150% 125% at 50% 17%,#0c1836 0%,#081029 26%,#04091b 50%,#020610 74%,#000104 100%)}
.bgfx > div{position:absolute;inset:0}
.bg-tint{background:
    radial-gradient(70% 52% at 50% 4%,color-mix(in srgb,var(--tint) 24%,transparent),transparent 64%),
    radial-gradient(44% 40% at 92% 70%,color-mix(in srgb,var(--tint) 10%,transparent),transparent 70%),
    radial-gradient(40% 38% at 6% 88%,color-mix(in srgb,var(--tint) 8%,transparent),transparent 70%)}
.bg-aurora{background:
    radial-gradient(52% 46% at 80% -6%,rgba(50,86,170,0.10),transparent 62%),
    radial-gradient(46% 40% at 8% 2%,rgba(40,70,148,0.055),transparent 64%);
}
/* each major cell reads as a tile: light catches its top-left inside edge
   and falls away at the bottom-right */
.bg-grid{background-image:
    linear-gradient(rgba(158,196,255,0.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(158,196,255,0.024) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,0.34) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.28) 1px,transparent 1px),
    linear-gradient(rgba(124,164,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,164,255,0.04) 1px,transparent 1px),
    linear-gradient(rgba(124,164,255,0.078) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,164,255,0.062) 1px,transparent 1px);
  background-position:0 1px,1px 0,0 189px,189px 0,0 0,0 0,0 0,0 0;
  background-size:190px 190px,190px 190px,190px 190px,190px 190px,38px 38px,38px 38px,190px 190px,190px 190px;
  -webkit-mask-image:radial-gradient(125% 108% at 50% 26%,#000 0%,rgba(0,0,0,0.42) 48%,transparent 86%);
  mask-image:radial-gradient(125% 108% at 50% 26%,#000 0%,rgba(0,0,0,0.42) 48%,transparent 86%)}
/* the breathing cells and the pointer's wake: one canvas, drawn by the shell (its edges fade in the drawing, not by a mask) */
.bg-cells{overflow:hidden}
.bg-cells canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-cursor{display:none}
.bg-vignette{box-shadow:inset 0 0 210px 80px rgba(1,2,6,0.95),inset 0 0 600px 175px rgba(1,2,6,0.56)}
/* the grain: under the content, plainly blended - a blend mode over the whole page made the browser recomposite everything beneath it, every frame */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:900px){
  .bg-grid{background-position:0 1px,1px 0,0 149px,149px 0,0 0,0 0,0 0,0 0;
    background-size:150px 150px,150px 150px,150px 150px,150px 150px,30px 30px,30px 30px,150px 150px,150px 150px}
}

/* ================================================================
   header - one bar for every page, so the tools are a room in the same
   house rather than a separate site
   ================================================================ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--hdr);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent}
.hdr.solid{background:linear-gradient(180deg,rgba(3,6,16,0.82),rgba(3,6,16,0.66));
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);box-shadow:0 18px 40px -30px rgba(0,0,0,0.9)}
.hdr-in{height:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:var(--s5)}
.hdr-brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.hdr-mark{width:30px;height:30px;display:block;filter:drop-shadow(0 0 14px rgba(95,150,255,0.36));transition:transform .4s var(--spring)}
.hdr-mark svg{width:100%;height:100%;display:block;overflow:visible}
.hdr-brand:hover .hdr-mark{transform:scale(1.08)}
.hdr-name{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0.2em;color:var(--text);white-space:nowrap;padding-left:0.2em}
.hdr-in{position:relative}
/* Products on the page's centre line, the other two either side of it, whatever their lengths: what hangs from it lines up with the page */
.hdr-nav{position:absolute;top:0;bottom:0;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px;pointer-events:none}
.hdr-nav > a{pointer-events:auto}
.hdr-nav > a:first-child{justify-self:end}
.hdr-nav > a:last-child{justify-self:start}
.hdr-end{margin-left:auto}
.hdr-nav a{position:relative;font-size:13.5px;font-weight:500;color:var(--text-dim);padding:8px 13px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;transition:color .25s var(--ease),background .25s var(--ease)}
.hdr-nav a:hover{color:var(--text);background:rgba(150,180,255,0.06)}
.hdr-nav a.on{color:var(--text);background:rgba(150,180,255,0.08);box-shadow:inset 0 0 0 1px rgba(150,180,255,0.14)}
.hdr-nav a i{font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--accent-2);
  padding:1px 6px;border-radius:999px;background:rgba(95,224,255,0.08);border:1px solid rgba(95,224,255,0.22)}
.hdr-end{display:flex;align-items:center;gap:var(--s2);flex:none}
.hdr-cta{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.02em;color:#0a1430;padding:9px 15px;border-radius:var(--r-btn);
  border:1px solid rgba(255,255,255,0.7);background:linear-gradient(180deg,#ffffff,#d3dfff);
  box-shadow:inset 0 1px 0 #fff,0 12px 28px -14px rgba(93,139,255,0.8);transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.hdr-cta:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 18px 36px -14px rgba(95,224,255,0.85)}
.hdr-menu{display:none;width:40px;height:40px;border-radius:8px;border:1px solid var(--line-2);background:rgba(14,22,46,0.7);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hdr-menu i{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .35s var(--ease)}
.hdr-menu[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.hdr-menu[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1020px){
  .hdr-nav{display:none}
  .hdr-brand{margin-right:auto}
  .hdr-in{position:relative}
  .hdr-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px}
  .hdr-menu{display:flex}
}
@media (max-width:420px){ .hdr-cta{display:none} }

/* ================================================================
   the overlays under Flagship products and Services - three columns and
   two, opened on hover or a click, full screen on a phone
   ================================================================ */
.hdr-nav a .caret{width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:0.55;transition:transform .35s var(--ease),opacity .2s}
.hdr-nav a[aria-expanded="true"]{color:var(--text);background:rgba(150,180,255,0.09);box-shadow:inset 0 0 0 1px rgba(150,180,255,0.16)}
.hdr-nav a[aria-expanded="true"] .caret{transform:translateY(1px) rotate(-135deg);opacity:0.9}
.mg-scrim{position:fixed;left:0;right:0;bottom:0;top:var(--hdr);z-index:68;pointer-events:none;opacity:0;
  background:radial-gradient(120% 70% at 50% 0%,rgba(2,4,12,0.62),rgba(2,4,12,0.9));transition:opacity .4s var(--ease)}
.mg-scrim.on{opacity:1}
.mega{position:fixed;left:50%;top:calc(var(--hdr) + 6px);z-index:69;width:min(1200px,calc(100vw - 2 * var(--gutter)));max-height:calc(100vh - var(--hdr) - 24px);
  transform:translate(-50%,-10px) scale(0.985);transform-origin:50% 0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:opacity .3s var(--ease),transform .55s var(--ease),visibility 0s}
.mega-in{border-radius:22px;padding:var(--s4);border:1px solid rgba(160,200,255,0.2);
  background:linear-gradient(180deg,rgba(11,18,42,0.94),rgba(5,9,22,0.97));-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 60px 130px -30px rgba(0,0,0,0.95),0 0 0 1px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.07)}
.mg-tabs,.mg-nav{display:none}
@media (min-width:1021px){ .mega-in{max-height:calc(100vh - var(--hdr) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} }
.mega-cols{display:grid;gap:var(--s3)}
.mega[data-k="products"] .mega-cols{grid-template-columns:minmax(0,0.9fr) minmax(0,1.75fr) minmax(0,0.9fr)}
.mg-col{position:relative;border-radius:16px;padding:var(--s4) var(--s2) var(--s2);border:1px solid var(--line);background:rgba(150,180,255,0.02);
  display:flex;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.mega.open .mg-col{opacity:1;transform:none}
.mega.open .mega-cols > :nth-child(2) .mg-col,.mega.open .mega-cols > .mg-col:nth-child(2){transition-delay:50ms}
.mega.open .mega-cols > :nth-child(3) .mg-col,.mega.open .mega-cols > .mg-col:nth-child(3){transition-delay:100ms}
.mg-cards{display:grid;grid-template-rows:1fr 1fr;gap:var(--s3);min-height:0}
.mg-cards .mg-col:last-child{transition-delay:150ms}
/* the staged entrance, from the hero's tag: a pulse has run up the string to Products, and at
   that speed the wires run from the link to the column's top corners and on round its edge,
   slowing to meet at its foot. The column fills in behind its outline, then the panel grows
   out from behind it and the other columns unfold from its edges. */
.mega.stage,.mega.stage.open{transform:translate(-50%,0);transition:opacity .3s var(--ease),visibility 0s linear .3s}
.mega.stage.open{transition:opacity .3s var(--ease),visibility 0s}
.mega.stage .mega-in{position:relative;isolation:isolate;background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.mega.stage .mega-in::before{content:"";position:absolute;top:-1px;bottom:-1px;left:var(--cl,27%);right:var(--cr,27%);z-index:-1;border-radius:22px;opacity:0;
  border:1px solid rgba(160,200,255,0.2);background:linear-gradient(180deg,rgba(11,18,42,0.94),rgba(5,9,22,0.97));
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 60px 130px -30px rgba(0,0,0,0.95),0 0 0 1px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.07)}
.mega.stage.open .mega-in::before{animation:mgShell .85s cubic-bezier(.22,.75,.18,1) 1.2s both}
@keyframes mgShell{0%{opacity:0}22%{opacity:1}100%{opacity:1;left:-1px;right:-1px}}
.mega.stage .mg-col{transition:none}
.mega.stage.open .mg-col.hl{animation:mgMat .95s cubic-bezier(.25,.7,.25,1) .55s both}
@keyframes mgMat{0%{opacity:0;transform:translateY(-3px) scale(.99);filter:blur(10px) brightness(1.5)}
  60%{opacity:1;filter:blur(0) brightness(1.15)}100%{opacity:1;transform:translateY(-3px);filter:none}}
.mg-scan{position:absolute;left:6%;right:6%;top:0;height:2px;z-index:3;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(225,255,247,0.95) 30%,rgba(225,255,247,0.95) 70%,transparent);
  box-shadow:0 0 14px 3px rgba(151,252,228,0.6),0 0 46px 12px rgba(151,252,228,0.18)}
.mega.stage.open .mg-scan{animation:mgScan .9s cubic-bezier(.4,0,.3,1) .62s both}
@keyframes mgScan{0%{top:0;opacity:0}12%{opacity:1}82%{opacity:.9}100%{top:calc(100% - 2px);opacity:0}}
/* what the column holds resolves in, line by line */
.mega.stage.open .mg-hl-h,.mega.stage.open .mg-hl-rank,.mega.stage.open .mg-hl-t,.mega.stage.open .mg-sh,.mega.stage.open .mg-hl .mg-item{animation:mgUp .6s cubic-bezier(.2,.75,.2,1) .8s both}
.mega.stage.open .mg-hl-rank{animation-delay:.85s}
.mega.stage.open .mg-hl-t{animation-delay:.9s}
.mega.stage.open .mg-sh{animation-delay:.95s}
.mega.stage.open .mg-hl .mg-item:nth-child(2){animation-delay:1s}
.mega.stage.open .mg-hl .mg-item:nth-child(3){animation-delay:1.05s}
.mega.stage.open .mg-hl .mg-item:nth-child(4){animation-delay:1.1s}
.mega.stage.open .mg-hl .mg-item:nth-child(5){animation-delay:1.15s}
.mega.stage.open .mg-hl .mg-item:nth-child(6){animation-delay:1.2s}
@keyframes mgUp{0%{opacity:0;transform:translateY(6px);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
/* the wings unfold from the column's edges, as if hinged on it */
.mega.stage.open .mg-inv{transform-origin:100% 50%;animation:mgWingL .95s cubic-bezier(.2,.75,.18,1) 1.3s both}
.mega.stage.open .mg-cards .mg-col{transform-origin:0 50%;animation:mgWingR .95s cubic-bezier(.2,.75,.18,1) 1.3s both}
.mega.stage.open .mg-cards .mg-col:last-child{animation-delay:1.39s}
@keyframes mgWingL{0%{opacity:0;transform:perspective(1300px) translateX(22%) rotateY(-64deg);filter:blur(8px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:perspective(1300px);filter:none}}
@keyframes mgWingR{0%{opacity:0;transform:perspective(1300px) translateX(-22%) rotateY(64deg);filter:blur(8px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:perspective(1300px);filter:none}}
/* the wires and the outline, in the pulse's colour: the wires drawn at the speed the pulse
   arrived with, the outline carrying on from them and slowing to a stop, then handing over
   to the column's own border. A node marks the link. */
.mg-wire{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:71;pointer-events:none;overflow:visible;opacity:0;transition:opacity .25s var(--ease)}
.mg-wire.on{opacity:1}
.mg-wire path{fill:none;stroke:rgba(205,255,242,0.92);stroke-width:1;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(151,252,228,0.9));stroke-dashoffset:var(--len,400)}
.mg-wire path.o{stroke-width:1.25}
.mg-wire.on path.w{animation:mgWire .3s linear forwards,mgWireRest 1.2s ease 2s forwards}
.mg-wire.on path.o{animation:mgWire 1.15s cubic-bezier(.33,.33,.22,1) .3s forwards,mgOutRest .7s ease 1.55s forwards}
@keyframes mgOutRest{from{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}
@keyframes mgWire{to{stroke-dashoffset:0}}
@keyframes mgWireRest{from{stroke-dashoffset:0;stroke:rgba(190,255,238,0.85)}to{stroke-dashoffset:0;stroke:rgba(151,252,228,0.38)}}
.mg-wire .wn{fill:#effffa;opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px rgba(151,252,228,0.95)) drop-shadow(0 0 10px rgba(151,252,228,0.5))}
.mg-wire.on .wn{animation:mgNode .5s cubic-bezier(.2,.9,.25,1.3) both}
.mg-wire.nodot .wn{display:none}
@keyframes mgNode{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
/* Products itself lights in the venue's green while the column hangs from it */
.hdr-nav a.lit{color:#eafffa;box-shadow:inset 0 0 0 1px rgba(151,252,228,0.34),0 0 22px -6px rgba(151,252,228,0.6);background:rgba(151,252,228,0.07);transition:color .3s,box-shadow .3s,background .3s}
/* Hyperliquid's own column, in its own colour */
.mg-col.hl{z-index:2;margin:-8px 0;border-color:rgba(151,252,228,0.5);
  background:radial-gradient(120% 50% at 50% 0%,rgba(151,252,228,0.12),transparent 64%),linear-gradient(180deg,rgba(16,36,42,0.98),rgba(6,13,19,0.99));
  box-shadow:inset 0 1px 0 rgba(210,255,244,0.32),inset 0 0 0 1px rgba(151,252,228,0.08),
    0 2px 0 -1px rgba(151,252,228,0.25),0 26px 40px -18px rgba(0,0,0,0.95),0 60px 90px -30px rgba(0,0,0,0.9),0 0 90px -24px rgba(151,252,228,0.5)}
.mg-col.hl::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(220,255,246,0.9),transparent);box-shadow:0 0 14px rgba(151,252,228,0.7)}
.mega.open .mg-col.hl{transform:translateY(-3px)}
.mg-h{display:flex;align-items:center;gap:8px;padding:0 var(--s2) var(--s3);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim)}
.mg-h img{width:16px;height:16px;display:block}
.mg-col.hl .mg-h{color:#97fce4}
.mg-item{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:10px;min-width:0;transition:background .2s var(--ease)}
.mg-item:hover{background:rgba(150,180,255,0.07)}
.mg-col.hl .mg-item:hover{background:rgba(151,252,228,0.07)}
.mg-thumb{flex:none;width:58px;height:36px;border-radius:6px;overflow:hidden;border:1px solid var(--line-2);background:#060a16}
.mg-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .4s var(--ease)}
.mg-thumb img.ok{opacity:1}
.mg-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.mg-t b{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--text);white-space:nowrap}
.mg-t i{font-style:normal;font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Hyperliquid: its mark centred over the column, a line that branches into its two groups */
.mg-hl-h{display:flex;align-items:center;justify-content:center;gap:11px;padding:2px 0 0;font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:#97fce4}
.mg-hl-h img{width:24px;height:24px;display:block;filter:drop-shadow(0 0 12px rgba(151,252,228,0.55))}
.mg-hl-rank{margin-top:7px;text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;color:rgba(151,252,228,0.72)}
.mg-hl-t{display:block;position:relative;height:1px;margin:var(--s3) 9% var(--s3);background:linear-gradient(90deg,transparent,rgba(151,252,228,0.55) 30%,rgba(151,252,228,0.55) 70%,transparent)}
.mg-hl-t::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#06110f;border:1px solid rgba(151,252,228,0.75);box-shadow:0 0 12px rgba(151,252,228,0.6)}
.mg-hl-in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:0 var(--s2)}
.mg-vr{display:block;width:1px;margin-top:-17px;background:linear-gradient(180deg,rgba(151,252,228,0.6),rgba(151,252,228,0.18) 70%,rgba(151,252,228,0))}
.mg-sh{padding:0 8px 6px;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(151,252,228,0.62)}
.mg-sub{display:flex;flex-direction:column}
.mg-sub .mg-item{flex:1;max-height:92px}
.mg-hl .mg-item{padding:8px}
.mg-hl .mg-thumb{width:64px;height:40px}
.mg-hl .mg-t i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* a narrower desktop: Hyperliquid's column takes more of the width, its icons and subs come down a size, so every sub keeps to one line */
@media (min-width:1021px) and (max-width:1240px){
  .mega[data-k="products"] .mega-cols{grid-template-columns:minmax(0,0.8fr) minmax(0,2fr) minmax(0,0.8fr)}
  .mg-hl .mg-item{gap:9px;padding:7px 6px}
  .mg-hl .mg-thumb{width:46px;height:29px}
  .mg-hl .mg-t b{font-size:13px}
  .mg-hl .mg-t i{font-size:11px}
}
/* innovation & invention: the newest thing first, then each theme as a row of pictures */
.mg-feat{display:flex;align-items:center;gap:12px;margin:0 0 var(--s2);padding:8px;border-radius:12px;border:1px solid rgba(95,224,255,0.3);
  background:radial-gradient(120% 140% at 0% 0%,rgba(95,224,255,0.12),transparent 62%),rgba(95,224,255,0.02);transition:border-color .2s var(--ease)}
.mg-feat:hover{border-color:rgba(95,224,255,0.62)}
.mg-feat-img{flex:none;width:96px;height:60px;border-radius:7px;overflow:hidden;border:1px solid var(--line-2);background:#060a16}
.mg-feat-img img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .4s var(--ease),transform 1.2s var(--ease)}
.mg-feat-img img.ok{opacity:1}
.mg-feat:hover .mg-feat-img img{transform:scale(1.05)}
.mg-feat-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.mg-feat-t em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-2)}
.mg-feat-t b{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-0.015em;color:var(--text)}
.mg-feat-t i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.mg-sec + .mg-sec{margin-top:var(--s3)}
.mg-sk{padding:0 8px 6px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(150,180,255,0.6)}
.mg-tls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 6px}
.mg-tl{display:flex;flex-direction:column;gap:5px;min-width:0}
.mg-tl-i{position:relative;display:block;aspect-ratio:16/10;border-radius:7px;overflow:hidden;border:1px solid var(--line-2);background:#060a16;
  box-shadow:0 10px 18px -12px #000;transition:transform .35s var(--ease),border-color .25s var(--ease),box-shadow .35s var(--ease)}
.mg-tl-i img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .4s var(--ease)}
.mg-tl-i img.ok{opacity:1}
.mg-tl-i.gl{background:radial-gradient(90% 90% at 30% 20%,rgba(95,224,255,0.16),transparent 60%),linear-gradient(160deg,#0b1430,#050915)}
.mg-tl-i svg{position:absolute;inset:0;margin:auto;width:58%;height:62%;fill:none;stroke:rgba(150,190,255,0.75);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mg-tl-i svg .g2{stroke:var(--accent-2)}
.mg-tl-new{position:absolute;top:4px;left:4px;font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#04070f;
  background:linear-gradient(180deg,#cfffef,#54e8af);border-radius:2px;padding:2px 4px}
.mg-tl b{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.mg-tl:hover .mg-tl-i{transform:translateY(-3px);border-color:rgba(150,190,255,0.5);box-shadow:0 16px 24px -12px #000,0 0 22px -10px var(--accent)}
.mg-tl:hover b{color:#fff}
/* the two small groups: a short list over a picture of their own */
.mg-card{overflow:hidden;padding-top:var(--s3)}
.mg-card .mg-h,.mg-card .mg-list{position:relative;z-index:1}
.mg-list{max-width:48%;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.mg-card .mg-item{padding:5px 8px}
.mg-card .mg-t b{font-size:13.5px}
.mg-card .mg-t i{display:none}
.mg-viz{position:absolute;top:0;right:0;bottom:0;width:58%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.mg-viz span{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line-2);background:#060a16;box-shadow:0 14px 26px -12px #000}
.mg-viz img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .5s var(--ease)}
.mg-viz img.ok{opacity:0.92}
/* innovation & invention: cards as the right column's - names on the left, screens fanned on the right */
.mg-inv{display:grid;grid-template-rows:auto;grid-auto-rows:auto;gap:8px;min-height:0}
.mg-inv-h{padding:4px var(--s2) 0;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim)}
.mg-card.th{padding:10px var(--s2) 6px}
.mg-card.th .mg-h{padding-bottom:6px}
.mg-card.th.new .mg-h{color:var(--accent-2)}
.mg-card.th .mg-list{max-width:56%;justify-content:center;gap:1px}
.mg-card.th .mg-item{padding:3px 8px}
.mg-card.th .mg-t b{white-space:nowrap}
/* "new", as an exponent on its name: small, and green */
.mg-card.th .mg-t sup{position:relative;top:-0.72em;margin-left:3px;padding:1px 3px;border-radius:2px;vertical-align:baseline;
  font-family:var(--font-mono);font-size:5.25px;font-weight:700;letter-spacing:0.1em;line-height:1;text-transform:uppercase;color:#04110b;background:var(--live)}
.mg-card.th .mg-t sup.wip{color:#1a0b02;background:#ff9a3d}
.mg-card.th .mg-viz{width:54%}
/* brand new: a larger heading of its own, over a slow, faint loop of Atlas's mountains */
.mg-card.bn{border-color:rgba(95,224,255,0.3);isolation:isolate}
.mg-bn-v{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0.24;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom right,transparent 38%,rgba(0,0,0,0.55) 56%,#000 78%);mask-image:linear-gradient(to bottom right,transparent 38%,rgba(0,0,0,0.55) 56%,#000 78%)}
.mg-bn-h{position:relative;z-index:1;padding:0 var(--s2) 6px;font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;
  width:max-content;background:linear-gradient(105deg,#e9fbff,#5fe0ff 55%,#97fce4);-webkit-background-clip:text;background-clip:text;color:transparent}
.mg-card.bn .mg-list{max-width:none}
/* latest: the two newest as tiles in a card of the right column's kind, each named on its left over a picture fading in from the right */
.mg-lt{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:0 2px 2px}
.mg-bn-s{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;padding:0 12px;overflow:hidden;isolation:isolate;border-radius:10px;
  border:1px solid var(--line);background:rgba(150,180,255,0.025);transition:border-color .25s var(--ease),background .25s var(--ease)}
.mg-bn-s:hover{border-color:rgba(160,200,255,0.3);background:rgba(150,180,255,0.05)}
.mg-bn-c,.mg-bn-s .mg-bn-v{position:absolute;top:0;right:0;bottom:0;left:auto;width:64%;height:100%;z-index:-1;pointer-events:none;transition:opacity .4s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,0.6) 34%,#000 70%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,0.6) 34%,#000 70%)}
.mg-bn-c{opacity:0.42}
.mg-bn-s .mg-bn-v{object-fit:cover;object-position:60% 50%;opacity:0.36}
.mg-bn-c path{stroke-width:1}
.mg-bn-c .u path{stroke:var(--live)}.mg-bn-c .u rect{fill:var(--live)}
.mg-bn-c .d path{stroke:#ff6b7d}.mg-bn-c .d rect{fill:#ff6b7d}
.mg-bn-c .cd{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:cdIn 6.6s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--k) * 0.22s)}
@keyframes cdIn{0%{opacity:0;transform:scaleY(0.25)}6%{opacity:1;transform:none}70%{opacity:1;transform:none}84%,100%{opacity:0;transform:none}}
.mg-bn-l{position:relative;z-index:1;display:flex;flex-direction:column;gap:1px}
.mg-bn-l b{font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text);white-space:nowrap;transition:color .2s}
.mg-bn-l i{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.04em;color:var(--text-faint)}
.mg-bn-l sup{position:relative;top:-0.72em;margin-left:3px;padding:1px 3px;border-radius:2px;vertical-align:baseline;
  font-family:var(--font-mono);font-size:5.25px;font-weight:700;letter-spacing:0.1em;line-height:1;text-transform:uppercase;color:#04110b;background:var(--live)}
.mg-bn-l sup.wip{color:#1a0b02;background:#ff9a3d}
.mg-bn-s:hover .mg-bn-l b{color:#fff}
.mg-bn-s.op:hover .mg-bn-c{opacity:0.72}
.mg-bn-s.at:hover .mg-bn-v{opacity:0.58}
.mega:not(.open) .mg-bn-c .cd{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .mg-bn-c .cd{animation:none;opacity:1} }
/* the left column built as the right: two cards of the same heights, at the same gap */
.mega[data-k="products"] .mg-inv{grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
/* pro trading: as the dev tools card - the names roomy down the left, the drawing quiet on the right */
.mg-card.pt span.mg-item{cursor:default}
.mg-card.pt .mg-t sup{position:relative;top:-0.72em;margin-left:3px;padding:1px 3px;border-radius:2px;vertical-align:baseline;
  font-family:var(--font-mono);font-size:5.25px;font-weight:700;letter-spacing:0.1em;line-height:1;text-transform:uppercase;color:#04110b;background:var(--live)}
.mg-hl .mg-t sup{position:relative;top:-0.62em;margin-left:5px;padding:2px 4px 1px;border-radius:3px;vertical-align:baseline;
  font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;line-height:1;text-transform:uppercase;color:#04110b;background:var(--live);box-shadow:0 0 10px -2px var(--live)}
.mg-inv .mg-viz{opacity:0.74}
.mg-t sup.doc{position:relative;top:-0.72em;margin-left:4px;padding:1px 3px;border-radius:2px;vertical-align:baseline;font-family:var(--font-mono);font-size:5.25px;font-weight:700;
  letter-spacing:0.1em;line-height:1;color:var(--text-dim);background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.mg-card.pt .mg-t sup.doc{color:var(--text-dim);background:none}
/* the right column's pictures, a step quieter */
.mg-cards .mg-viz{opacity:0.74}
/* real world events: version one to version two, the same size side by side */
.mg-v12{position:relative;z-index:1;display:grid;grid-template-columns:auto auto auto;justify-content:center;justify-items:center;align-items:center;column-gap:12px;row-gap:5px;padding:2px 0 0}
.mg-vk{font-style:normal;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.14em;color:var(--text-faint)}
.mg-v12 .mg-g1,.mg-v12 .mg-g2{display:block;width:50px;height:50px}
.mg-v12 .mg-g2{border-radius:50%;opacity:0;transition:opacity .5s var(--ease);filter:drop-shadow(0 6px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(95,224,255,0.25))}
.mg-v12 .mg-g2.ok{opacity:1}
.mg-v12 .mg-g1{filter:drop-shadow(0 0 10px rgba(93,139,255,0.25))}
.mg-up{width:34px;height:12px;fill:none;stroke:var(--accent-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mg-vn{padding:2px 6px;border-radius:6px;transition:background .2s}
.mg-vn:hover{background:rgba(150,180,255,0.07)}
.mg-vn .mg-t b{font-size:13px}
/* the quant systems and the parlays: a line drawing each, quiet, where the fan was */
.mg-art-w{-webkit-mask-image:none;mask-image:none;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--s3)}
.mg-art{width:min(120px,80%);height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.85}
.mg-art .g{stroke:var(--accent-2);stroke-width:1.5}
.mg-art .c{stroke:rgba(150,180,255,0.42);stroke-width:1.3}
.mg-art .b{fill:var(--live);stroke:none}
.mg-art .s{fill:#ff6b7d;stroke:none}
.mg-art .d{fill:rgba(150,190,255,0.85)}
.mg-art .t{stroke:rgba(134,210,255,0.7);stroke-width:1.3;fill:rgba(93,139,255,0.1)}
/* dev tools: their screens fanned out from one pivot, spreading under the pointer */
.mg-fan span{position:absolute;right:10%;top:38%;width:72%;aspect-ratio:16/10;transform-origin:50% 190%;
  transform:rotate(calc((var(--k) - 2) * 8deg));transition:transform .7s var(--ease)}
.mg-card:hover .mg-fan span{transform:rotate(calc((var(--k) - 2) * 12deg)) translateY(-4%)}
/* other: a little wall of them, tipped back and drifting */
.mg-mw{perspective:520px;perspective-origin:30% 0}
.mg-mw-p{position:absolute;left:0;top:-6%;display:flex;flex-direction:column;gap:6px;transform-origin:0 0;transform:rotateX(30deg) rotateZ(-16deg)}
.mg-mw-r{display:flex;gap:6px;width:max-content;animation:mwL 26s linear infinite}
.mg-mw-r:nth-child(even){animation-name:mwR;animation-duration:32s}
.mg-mw-r span{flex:none;width:88px;aspect-ratio:16/10}
.mega:not(.open) .mg-mw-r{animation-play-state:paused}
@keyframes mwL{to{transform:translate3d(-50%,0,0)}}
@keyframes mwR{from{transform:translate3d(-50%,0,0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .mg-mw-r{animation:none} }
@media (max-width:1020px){
  /* a phone: the panel drops from under the bar, its three groups as tabs with Hyperliquid's in the
     middle and open first; the site's own links close it */
  .mega{top:var(--hdr);left:0;width:100%;max-height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));z-index:69;transform:translateY(-8px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .mega.open,.mega.stage,.mega.stage.open{transform:none}
  .mega-in{border-radius:0 0 20px 20px;border-top:0;padding:var(--s3) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom))}
  .mega.stage .mega-in::before{border-radius:0 0 20px 20px;border-top:0}
  .mg-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:4px;padding:4px;margin-bottom:var(--s3);border-radius:10px;
    background:rgba(8,13,30,0.92);box-shadow:inset 0 0 0 1px var(--line);position:sticky;top:0;z-index:4}
  .mg-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 6px;border-radius:7px;font-family:var(--font-mono);font-size:10.5px;
    font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
  .mg-tabs button img{width:14px;height:14px;flex:none}
  .mg-tabs button[aria-selected="true"]{color:var(--text);background:rgba(150,180,255,0.1);box-shadow:inset 0 0 0 1px var(--line-2)}
  .mg-tabs button[data-tab="hl"][aria-selected="true"]{color:#97fce4;background:rgba(151,252,228,0.08);box-shadow:inset 0 0 0 1px rgba(151,252,228,0.38)}
  .mega[data-k="products"] .mega-cols{display:block}
  .mega[data-k="products"] .mg-inv,.mega[data-k="products"] .mg-cards,.mega[data-k="products"] .mg-col.hl{display:none}
  .mega[data-tab="l"] .mg-inv{display:grid;grid-template-rows:none}
  .mega[data-tab="hl"] .mg-col.hl{display:flex;margin:0}
  .mega[data-tab="r"] .mg-cards{display:grid}
  .mega .sw{animation:mgSw .45s cubic-bezier(.2,.75,.2,1) both}
  @keyframes mgSw{0%{opacity:0;transform:translateX(var(--sx,0))}100%{opacity:1;transform:none}}
  .mg-cards{grid-template-rows:auto auto}
  .mg-hl-in{grid-template-columns:minmax(0,1fr)}
  .mg-vr{display:none}
  .mg-sub + .mg-vr + .mg-sub{margin-top:var(--s3)}
  .mg-card{min-height:200px}
  .mg-inv .mg-card{min-height:0}
  .mg-lt .mg-bn-s{flex:none;height:68px}
  .mg-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:var(--s4);padding:var(--s4) 2px 0;border-top:1px solid var(--line)}
  .mg-nav a{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.015em;color:var(--text)}
  .mg-nav .mg-cta{margin-left:auto;padding:9px 14px;border-radius:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.02em;color:#05070f;background:#e8eeff}
  /* the entrance, on a phone: only the open group plays it; the tabs and the links follow the column in */
  .mega.stage.open .mg-inv,.mega.stage.open .mg-cards .mg-col{animation:none}
  .mega.stage.open .mg-tabs,.mega.stage.open .mg-nav{animation:mgUp .6s cubic-bezier(.2,.75,.2,1) 1.25s both}
}

/* the foot of a screen: a quiet cue that there is more below, a point of light running down a short line */
.hero-cue{position:absolute;left:50%;bottom:clamp(12px,2.2svh,24px);z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 10px;
  opacity:0;animation:cueIn .9s var(--ease) 1.9s forwards}
.hero-cue span{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:var(--text-faint);transition:color .25s var(--ease)}
.hero-cue i{position:relative;display:block;width:1px;height:24px;background:linear-gradient(180deg,rgba(170,186,220,0.4),rgba(170,186,220,0))}
.hero-cue i::after{content:"";position:absolute;left:-1.5px;top:0;width:4px;height:4px;border-radius:50%;background:#e8f2ff;box-shadow:0 0 8px 1px rgba(134,210,255,0.85);animation:cueRun 2s cubic-bezier(.5,0,.5,1) 2.4s infinite;opacity:0}
.hero-cue:hover span{color:var(--text)}
@keyframes cueIn{to{opacity:1}}
@keyframes cueRun{0%{top:0;opacity:0}20%{opacity:1}70%{opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){ .hero-cue{animation:none;opacity:1} .hero-cue i::after{animation:none} }

/* ================================================================
   buttons and chips - carried over from v1
   ================================================================ */
.btn{font-family:var(--font-mono);font-size:13px;letter-spacing:0.02em;font-weight:500;border-radius:var(--r-btn);padding:15px 26px;color:#dfe7ff;
  border:1px solid rgba(150,180,255,0.16);background:linear-gradient(180deg,rgba(31,43,76,0.92),rgba(19,27,50,0.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 16px 32px -18px rgba(0,0,0,0.82);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{color:#fff;border-color:rgba(130,190,255,0.5);background:linear-gradient(180deg,rgba(42,57,98,0.96),rgba(27,37,66,0.96));transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.13),0 24px 44px -18px rgba(0,0,0,0.88),0 0 34px -12px var(--accent-2)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 7px rgba(0,0,0,0.5)}
.btn-primary{color:#0a1430;font-weight:600;border:1px solid rgba(255,255,255,0.72);background:linear-gradient(180deg,#ffffff,#d3dfff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -2px 3px rgba(90,120,190,0.18),0 16px 36px -14px rgba(93,139,255,0.78)}
.btn-primary:hover{color:#0a1430;background:linear-gradient(180deg,#ffffff,#e3ecff);border-color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 24px 48px -14px rgba(95,224,255,0.85)}
.btn-primary:active{transform:translateY(1px);box-shadow:inset 0 3px 6px rgba(52,82,152,0.42)}
.btn-sm{font-size:12px;padding:11px 18px}
.chip{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:0.01em;color:var(--text-dim);display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:var(--r-btn);
  background:rgba(17,25,46,0.92);border:1px solid rgba(150,180,255,0.13);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 10px 22px -14px rgba(0,0,0,0.75);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease);white-space:nowrap}
a.chip:hover{color:#fff;background:rgba(26,37,66,0.96);border-color:rgba(140,180,255,0.42);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 16px 30px -14px rgba(0,0,0,0.8),0 0 22px -8px var(--accent)}
a.chip:active{transform:translateY(1px)}
.chip.det{color:#dff4ff;border-color:rgba(95,224,255,0.42);background:linear-gradient(180deg,rgba(26,60,92,0.92),rgba(12,26,46,0.94));box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 10px 24px -14px rgba(95,224,255,0.55)}
.chip.det i{font-style:normal;color:var(--accent-2);transition:transform .35s var(--spring)}
a.chip.det:hover{border-color:rgba(95,224,255,0.75)}
a.chip.det:hover i{transform:translateX(3px)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);border:1px solid var(--border-strong);border-radius:999px;padding:6px 12px;background:rgba(93,139,255,0.05)}
.links{display:flex;flex-wrap:wrap;gap:8px}
.new-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;vertical-align:middle;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:0.16em;
  color:#d9fff0;background:rgba(84,232,175,0.08);border:1px solid rgba(84,232,175,0.4)}
.new-chip i{width:4.5px;height:4.5px;border-radius:50%;background:var(--live);box-shadow:0 0 7px var(--live);animation:nbpulse 1.8s ease-in-out infinite}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:#d9fff0;padding:4px 10px 4px 9px;border-radius:999px;background:rgba(84,232,175,0.07);border:1px solid rgba(84,232,175,0.32)}
.live-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:nbpulse 1.8s ease-in-out infinite}

/* ================================================================
   reveal - things arrive as they enter, once
   ================================================================ */
html.js .rv{opacity:0;transform:translate3d(0,26px,0)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--rd,0ms)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none}
  .grad,.bg-aurora{animation:none}
}

/* ================================================================
   footer
   ================================================================ */
.foot{position:relative;padding:var(--s6) 0 calc(var(--s6) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:0.04em}
.foot a{transition:color .2s}
.foot a:hover{color:#fff}
.foot-links{display:flex;gap:var(--s5)}
.foot-mark{width:18px;height:18px;display:block;opacity:.8;transition:opacity .2s}
.foot-mark:hover{opacity:1}
.foot-mark svg{width:100%;height:100%;display:block}

/* ================================================================
   three views of the same products - wall, grid, canvas - switched
   from the filters' own row, at the filters' own size
   ================================================================ */
.vsw{display:inline-flex;align-items:center;flex:none;padding:3px;gap:2px;border-radius:999px;border:1px solid var(--line);background:rgba(17,25,46,0.7)}
.vsw-i{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap;cursor:pointer;transition:color .2s,background .2s}
.vsw-i svg{width:13px;height:13px;display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.vsw-i:hover{color:var(--text);background:rgba(150,180,255,0.07)}
.vsw-i.on{color:var(--text);background:rgba(150,180,255,0.14);box-shadow:inset 0 0 0 1px rgba(150,180,255,0.2);cursor:default}
@media (max-width:520px){ .vsw-i{padding:6px 9px} .vsw-i span{display:none} }

/* ================================================================
   the tool wall (wall.js) - home and the products index
   ================================================================ */
.wall{position:relative;height:clamp(240px,62vh,640px);perspective:1800px;perspective-origin:50% 0%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall.drag{cursor:grabbing}
.wall::after{content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;z-index:5;background:linear-gradient(180deg,transparent,rgba(2,4,12,0.9))}
.wall-plane{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:16px;transform-style:preserve-3d;transform-origin:50% 0;
  transform:rotateX(26deg) rotateZ(-5deg) translate3d(0,-2%,0) scale(1.06)}
.wrow{display:flex;gap:16px;width:max-content;transform-style:preserve-3d;will-change:transform}
.wt{position:relative;flex:none;width:clamp(210px,19vw,300px);aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface);
  box-shadow:0 22px 40px -22px rgba(0,0,0,0.95);transform:translateZ(0);transition:transform .55s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease)}
.wt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .6s var(--ease)}
.wt.ok img{opacity:0.78}
.wt-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;background:linear-gradient(180deg,transparent,rgba(3,7,20,0.94) 62%)}
.wt-cap b{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#e9f0ff}
.wt-cap i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--text-faint);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-badge{position:absolute;top:9px;right:9px;font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:#bfe0ff;
  background:rgba(6,14,34,0.86);border:1px solid rgba(95,224,255,0.3);border-radius:3px;padding:3px 6px}
.wt-new{position:absolute;top:9px;left:9px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:#04070f;
  background:linear-gradient(180deg,#cfe7ff,#6aa9ff);border-radius:3px;padding:3px 6px}
@media (hover:hover){
  .wt:hover{transform:translateZ(70px) translateY(-6px);border-color:rgba(160,200,255,0.6);z-index:2;box-shadow:0 50px 80px -30px #000,0 0 50px -14px var(--accent)}
  .wt:hover img{opacity:1}
}

/* ---------- the document viewer: A4, nearly the window's height, its pages scrolling inside ---------- */
.pdfv{--ph:min(calc(100svh - 40px),calc((100vw - 24px) * 1.4142));position:fixed;inset:0;z-index:95;display:grid;place-items:center;visibility:hidden;pointer-events:none;transition:visibility 0s linear .35s}
.pdfv.open{visibility:visible;pointer-events:auto;transition:none}
.pdfv-scrim{position:absolute;inset:0;background:rgba(2,4,10,0.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.pdfv.open .pdfv-scrim{opacity:1}
.pdfv-doc{position:relative;width:calc(var(--ph) / 1.4142);height:var(--ph);opacity:0;transform:translateY(12px) scale(0.98);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.pdfv.open .pdfv-doc{opacity:1;transform:none}
.pdfv-pages{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity;border-radius:8px;
  background:#05080f;box-shadow:0 0 0 1px rgba(160,200,255,0.16),0 40px 90px -30px rgba(0,0,0,0.95);scrollbar-width:thin;scrollbar-color:rgba(160,200,255,0.25) transparent}
.pdfv-pages:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.pdfv-pages img{display:block;width:100%;height:auto;aspect-ratio:1240/1754;scroll-snap-align:start;background:#070b16}
.pdfv-pages img + img{margin-top:8px}
.pdfv-ctl{position:absolute;top:0;left:calc(100% + 12px);display:flex;flex-direction:column;gap:8px}
.pdfv-b{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;cursor:pointer;color:var(--text);background:rgba(10,16,32,0.8);
  box-shadow:inset 0 0 0 1px rgba(160,200,255,0.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,box-shadow .2s,transform .2s}
.pdfv-b:hover{background:rgba(20,30,56,0.9);box-shadow:inset 0 0 0 1px rgba(160,200,255,0.5);transform:translateY(-1px)}
.pdfv-b:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.pdfv-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* no room beside the page: the two sit over its top right corner instead */
@media (max-width:760px),(max-aspect-ratio:3/4){
  .pdfv-ctl{left:auto;right:10px;top:10px;flex-direction:row}
  .pdfv-b{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){ .pdfv-doc{transform:none} }