@font-face{font-family:Anton;src:url('./fonts/anton.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:Inter;src:url('./fonts/inter-400.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:Inter;src:url('./fonts/inter-500.woff2') format('woff2');font-display:swap;font-weight:500}@font-face{font-family:Inter;src:url('./fonts/inter-600.woff2') format('woff2');font-display:swap;font-weight:600}
:root {
  font-family: Inter, sans-serif;
  font-synthesis: none;
  color: #f1f3f6;
  background: #05070a;
  color-scheme: dark;
  --ice: #77d9ff;
  --blue: #28cfff;
  --muted: #9ca7b5;
  --line: rgba(151, 193, 216, .24);
  --edge: clamp(24px, 3vw, 62px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{min-height:100svh}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--ice);outline-offset:5px}
button:focus:not(:focus-visible){outline:none}
h1,h2,h3,p,ul{margin:0}
[hidden]{display:none!important}
.ice{color:var(--ice)}
.eyebrow{font:10px/1.55 'Courier New',monospace;letter-spacing:.105em;color:var(--muted)}
.skip-link{position:fixed;top:8px;left:15px;padding:12px 18px;background:var(--ice);color:#05070a;z-index:2000;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
#app{position:relative;width:100%;height:100vh;height:100svh;height:100dvh;min-height:0;isolation:isolate;overflow:hidden;background:#05070a}
/* PROGRAMMED AMBIENT ENVIRONMENT */
.environment{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 53% 38% at 50% 68%,rgba(13,48,78,.92) 0%,rgba(7,21,34,.78) 37%,transparent 92%),radial-gradient(circle at 50% 55%,rgba(18,94,146,.18),transparent 32%),radial-gradient(circle at 18% 18%,rgba(36,104,168,.12),transparent 28%),radial-gradient(circle at 82% 16%,rgba(17,117,181,.10),transparent 24%),linear-gradient(120deg,#04070a,#060b12 42%,#030506)}
.environment canvas{position:absolute;inset:0;width:100%;height:100%;z-index:6;opacity:.98;filter:saturate(1.08)}
.room-glow{position:absolute;z-index:0;filter:blur(32px);pointer-events:none;animation:glow-breathe 11s ease-in-out infinite alternate}
.room-glow-left{width:60%;height:115%;top:-7%;left:-35%;background:radial-gradient(ellipse at 28% 60%,rgba(11,131,196,.27),rgba(18,74,119,.12) 30%,transparent 70%)}
.room-glow-right{width:62%;height:110%;top:-6%;right:-36%;background:radial-gradient(ellipse at 80% 50%,rgba(19,152,206,.20),rgba(11,70,110,.13) 35%,transparent 70%);animation-delay:-4s}
.room-ceiling{position:absolute;inset:0 0 42%;z-index:1;opacity:.48;background:linear-gradient(155deg,transparent 0 35%,rgba(76,160,199,.095) 35.08%,transparent 35.17%),linear-gradient(25deg,transparent 0 50%,rgba(76,160,199,.075) 50.1%,transparent 50.2%),radial-gradient(ellipse 40% 12% at 50% 2%,rgba(39,134,184,.10),transparent 100%)}
.room-ceiling::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 82px,rgba(63,151,196,.027) 83px,transparent 85px)}
.room-floor{position:absolute;z-index:1;left:-50%;width:200%;bottom:-78%;height:155%;opacity:.27;transform:perspective(470px) rotateX(73deg);transform-origin:50% 0;background-image:linear-gradient(rgba(61,183,236,.21) 1px,transparent 1px),linear-gradient(90deg,rgba(61,183,236,.20) 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(transparent 5%,#000 26%,transparent 75%)}
.terminal{position:absolute;z-index:1;width:clamp(270px,24vw,480px);height:clamp(195px,34vh,360px);border:1px solid rgba(77,189,236,.24);background:linear-gradient(140deg,rgba(9,29,43,.43),rgba(2,7,13,.09));box-shadow:0 0 80px rgba(10,108,176,.09),inset 0 0 34px rgba(6,44,75,.07);overflow:hidden;opacity:.29;backdrop-filter:blur(1px);color:#5cbbea;font:clamp(8px,.71vw,12px)/1.83 Consolas,'Courier New',monospace;transform-style:preserve-3d}
.terminal-left{left:-9%;top:26%;transform:perspective(700px) rotateY(25deg) rotateZ(-5deg);animation:terminal-float-left 13s ease-in-out infinite alternate}
.terminal-right{right:-10%;top:31%;transform:perspective(700px) rotateY(-24deg) rotateZ(4deg);animation:terminal-float-right 14s ease-in-out infinite alternate;animation-delay:-5s}
.terminal-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;height:28px;padding:0 13px;border-bottom:1px solid rgba(90,192,240,.25);font-size:9px;white-space:nowrap;letter-spacing:.08em;background:rgba(10,60,90,.18)}
.terminal-dots{display:flex;gap:5px}.terminal-dots i{display:block;width:4px;height:4px;border:1px solid rgba(107,219,255,.65);border-radius:50%}
.terminal-lines{display:flex;flex-direction:column;gap:1px;padding:14px 12px 0;white-space:pre;animation:terminal-scroll 15s linear infinite alternate}
.line-num{color:rgba(130,160,183,.5);font-weight:normal}.code-purple{color:#c2b3ff;font-weight:normal}.code-blue{color:#7ddfff;font-weight:normal}.code-green{color:#8de2ca;font-weight:normal}
.terminal-footer{position:absolute;bottom:0;left:0;right:0;padding:7px 12px;display:flex;justify-content:space-between;background:#071622;border-top:1px solid rgba(92,193,242,.16);font-size:9px}
.beam-layer{position:absolute;inset:-10%;z-index:2;mix-blend-mode:screen;opacity:.50;overflow:hidden}
.light-beam{position:absolute;top:-14%;height:128%;pointer-events:none;filter:blur(17px);transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(110,215,255,.08) 0%,rgba(32,141,210,.18) 37%,rgba(49,186,244,.025) 95%)}
.light-beam-a{left:9%;width:47%;transform:rotate(-24deg);animation:beam-a 17s ease-in-out infinite alternate}
.light-beam-b{right:9%;width:43%;transform:rotate(19deg);background:linear-gradient(180deg,rgba(144,220,255,.06),rgba(29,141,210,.21) 42%,transparent 90%);animation:beam-b 20s ease-in-out infinite alternate}
.light-beam-c{left:39%;width:25%;height:105%;opacity:.42;transform:rotate(3deg);animation:beam-c 24s ease-in-out infinite alternate}
.energy-halo{position:absolute;z-index:3;left:50%;top:62%;width:min(70vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(30,155,233,.16),rgba(26,129,196,.10) 22%,rgba(5,25,45,.055) 50%,transparent 70%);animation:halo-breathe 9s ease-in-out infinite alternate}
.ambient-scan{position:absolute;z-index:4;inset:-20% 0 0;opacity:.13;background:linear-gradient(180deg,transparent 40%,rgba(110,213,252,.16) 50%,transparent 52%);background-size:100% 45%;animation:scan-drift 19s linear infinite}
.environment-grain{position:absolute;z-index:9;inset:0;opacity:.029;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.8'/%3E%3C/svg%3E")}
.environment-vignette{position:absolute;z-index:10;inset:0;background:radial-gradient(ellipse 77% 72% at 50% 54%,transparent 48%,rgba(0,0,0,.47)),linear-gradient(to bottom,rgba(0,0,0,.55),transparent 23%,transparent 71%,rgba(1,3,6,.48));box-shadow:inset 0 0 125px 30px #0008}
@keyframes glow-breathe{to{transform:translate(4%,2%) scale(1.13);opacity:.72}}
@keyframes halo-breathe{to{opacity:.55;transform:translate(-50%,-50%) scale(1.09)}}
@keyframes beam-a{to{transform:rotate(-17deg) translateX(3%);opacity:.43}}
@keyframes beam-b{to{transform:rotate(12deg) translateX(-4%);opacity:.5}}
@keyframes beam-c{to{transform:rotate(-3deg);opacity:.7}}
@keyframes scan-drift{to{background-position:0 500%}}
@keyframes terminal-scroll{to{transform:translateY(-11px)}}
@keyframes terminal-float-left{to{transform:perspective(700px) rotateY(22deg) rotateZ(-3deg) translateY(-13px)}}
@keyframes terminal-float-right{to{transform:perspective(700px) rotateY(-22deg) rotateZ(2deg) translateY(12px)}}
/* Architectural hairline HUD framing */
.frame{position:absolute;inset:19px;z-index:25;border:1px solid rgba(138,182,211,.24);pointer-events:none;clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px),0 17px)}
.frame i{position:absolute;width:42px;height:42px;border-style:solid;border-color:#77d9ff;opacity:.82}
.frame i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.frame i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.frame i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.frame i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
/* Footer lives in same viewport */
.footer{position:absolute;z-index:30;left:var(--edge);right:var(--edge);bottom:max(30px,env(safe-area-inset-bottom));height:28px;display:flex;justify-content:space-between;align-items:center;gap:18px;pointer-events:none}
.footer::after{content:'';position:absolute;left:0;right:0;bottom:-11px;height:1px;background:rgba(141,181,200,.28)}
.footer-sign span{margin:0 13px;color:#4f677a}.footer-center{display:flex;align-items:center;gap:11px}.footer-center i{height:5px;width:5px;border:1px solid var(--ice);transform:rotate(45deg);box-shadow:0 0 7px var(--ice)}
/* Functional modal overlays, not other page sections */
.info-dialog{background:radial-gradient(ellipse at 70% 0,rgba(10,48,72,.35),transparent 52%),#060b12;border:1px solid rgba(119,217,255,.33);color:#f1f3f6;box-shadow:0 0 90px #0009}
.info-dialog::backdrop{background:rgba(1,4,8,.78);backdrop-filter:blur(8px)}
.dialog-close{width:44px;height:44px;display:grid;place-items:center;font:33px/1 Inter;font-weight:300;color:#e8f8ff;border:1px solid rgba(119,217,255,.32)}
.info-dialog{position:fixed;margin:auto;inset:0;width:min(790px,calc(100vw - 36px));max-width:none;max-height:min(87dvh,850px);overflow-y:auto;overscroll-behavior:contain;padding:0;clip-path:polygon(17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%,0 17px)}
.dialog-top,.dialog-bottom{padding:22px clamp(25px,5vw,56px);display:flex;justify-content:space-between;align-items:center;gap:10px}
.dialog-top{border-bottom:1px solid var(--line)}
.dialog-bottom{border-top:1px solid var(--line);color:#6f8597}
.panel-body{padding:clamp(25px,4vw,55px) clamp(25px,5vw,56px) clamp(35px,4vw,55px)}
.panel-kicker{color:var(--ice);margin-bottom:17px}.panel-body h2{font:400 clamp(45px,7.4vw,90px)/1.07 Anton,sans-serif;letter-spacing:-.012em;margin-bottom:28px}
.panel-lead{font-size:clamp(15px,1.75vw,20px);line-height:1.65;max-width:560px;color:#c5d1da}
.panel-rule{height:1px;background:linear-gradient(90deg,var(--ice),var(--line) 60%,transparent);margin:35px 0 24px}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 25px}.panel-grid span{font:10px/1.5 monospace;letter-spacing:.07em;color:#86c7e7}
.panel-services{border-top:1px solid var(--line)}.panel-service{display:grid;grid-template-columns:36px 1fr;gap:20px;border-bottom:1px solid var(--line);padding:22px 0}
.panel-index{font:10px/2 monospace;color:var(--ice)}.panel-service h3{font:400 clamp(27px,5vw,48px)/1.14 Anton;margin-bottom:8px}.panel-service p{color:#b5c6d4;font-size:13px;line-height:1.7;max-width:540px;margin-top:10px}
.contact-pending{display:flex;align-items:center;gap:11px;color:#acc3d1;font:11px/1.6 monospace;letter-spacing:.06em}.status-indicator{width:7px;height:7px;border:1px solid var(--ice);border-radius:50%}
.panel-contact-links{display:flex;flex-wrap:wrap;gap:16px}.panel-contact-link{display:inline-flex;align-items:center;border:1px solid var(--ice);padding:12px 18px;font:13px Inter,sans-serif;min-height:48px}.panel-contact-link:hover{background:#77d9ff1b}
@media (min-width:1700px){.eyebrow{font-size:12px}}
@media (max-width:767px){:root{--edge:23px}.frame{inset:10px}.footer{bottom:max(24px,env(safe-area-inset-bottom));height:24px}.footer-sign,.footer-right{font-size:8px}.footer-center{display:none}.terminal{opacity:.20;width:300px;height:215px}.terminal-left{left:-215px;top:30%}.terminal-right{right:-215px;top:26%}.light-beam{filter:blur(16px)}.light-beam-a{left:-19%;width:75%}.light-beam-b{right:-25%;width:75%}.light-beam-c{left:32%;width:44%}.energy-halo{width:130vw;top:58%}.room-floor{opacity:.17}}
@media (max-height:510px){.footer{bottom:16px}.frame{inset:8px}.footer-sign,.footer-right{font-size:8px}.footer-center{display:none}.room-floor{opacity:.12}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.environment canvas{opacity:.6}}

/* ONE AND ONLY MAIN HERO. No scroll, scene controller or offscreen sections. */
.hero{position:absolute;inset:0;z-index:5;overflow:hidden;isolation:isolate}
.hero-title-wrap{position:absolute;top:10.8%;left:10%;right:8.2%;z-index:2;pointer-events:none;opacity:1}
.hero-title{font:400 19vw/1.18 Anton,sans-serif;letter-spacing:-.026em;white-space:nowrap;color:#f2f4f7;transform:scaleY(1.51);transform-origin:top center;text-shadow:0 0 4px rgba(255,255,255,.05);font-synthesis:none}
/* The caret is inline immediately after the actual letters, never positioned by percent.
   Type rows reserve line position without imposing a false glyph width. */
.hero-title .type-row{display:inline-block;vertical-align:baseline;white-space:nowrap}
.hero-title[data-phase="web"] .type-row--first{margin-right:.08em}
.hero-title:not([data-phase="web"]) .type-row--second{display:none!important}
.hero-title .type-letters{display:inline;font:inherit;letter-spacing:inherit}
.hero-title .type-caret{display:inline-block;vertical-align:baseline;width:.026em;height:.73em;margin-left:.015em;transform:translateY(.075em);background:#b9edff;box-shadow:0 0 9px rgba(54,204,255,.72),0 0 20px rgba(54,204,255,.28);pointer-events:none;opacity:0}
.hero-title.is-typing .type-row.is-active .type-caret{opacity:1;animation:typing-cursor .58s steps(1) infinite}
@keyframes typing-cursor{0%,65%{opacity:1}66%,100%{opacity:0}}

/* Brief irregular RGB signal loss, only on the fixed WEB DEVELOPER title.
   The layered copies are absolutely positioned and cannot shift layout. */
.hero-title .type-row{position:relative}
.hero-title .type-row::before,.hero-title .type-row::after{
 content:attr(data-glitch);position:absolute;top:0;left:0;white-space:nowrap;
 pointer-events:none;opacity:0;font:inherit;letter-spacing:inherit;line-height:inherit;
}
.hero-title.has-signal-glitch .type-row::before{
 color:#91f0ff;opacity:.77;text-shadow:2px 0 9px rgba(49,215,255,.75);
 animation:lb-title-glitch-cyan .11s steps(2,end) 4;
}
.hero-title.has-signal-glitch .type-row::after{
 color:#f06bbd;opacity:.69;text-shadow:-2px 0 9px rgba(249,61,185,.68);
 animation:lb-title-glitch-magenta .14s steps(2,end) 3;
}
.hero-title.has-signal-glitch .type-letters{animation:lb-title-base-jitter .11s steps(2,end) 4}
@keyframes lb-title-glitch-cyan{
 0%{clip-path:inset(6% 0 67% 0);transform:translateX(-8px)}
 23%{clip-path:inset(37% 0 39% 0);transform:translateX(9px)}
 52%{clip-path:inset(64% 0 16% 0);transform:translateX(-7px)}
 79%{clip-path:inset(18% 0 58% 0);transform:translateX(11px)}
 100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
}
@keyframes lb-title-glitch-magenta{
 0%{clip-path:inset(54% 0 19% 0);transform:translateX(7px)}
 33%{clip-path:inset(15% 0 63% 0);transform:translateX(-9px)}
 66%{clip-path:inset(72% 0 8% 0);transform:translateX(10px)}
 100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
}
@keyframes lb-title-base-jitter{0%{text-shadow:-5px 0 rgba(66,213,255,.65),4px 0 rgba(255,60,181,.5)}35%{text-shadow:6px 0 rgba(66,213,255,.75),-6px 0 rgba(255,60,181,.55)}70%{text-shadow:-3px 0 rgba(66,213,255,.58),5px 0 rgba(255,60,181,.47)}100%{text-shadow:none}}

@media (prefers-reduced-motion:reduce){.hero-title .type-caret{display:none}.hero-title .type-row::before,.hero-title .type-row::after{display:none}.hero-title.has-signal-glitch .type-letters{animation:none!important}}
.hero-cast{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.hero-figure{position:absolute;z-index:4;width:min(93vw,137vh);aspect-ratio:1672/941;bottom:-4%;left:50%;transform:translateX(-50%);pointer-events:none}
.hero-picture{width:100%;height:100%;display:block;will-change:transform}
.hero-picture img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.hero-backlight{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);width:min(70vw,800px);height:58%;background:radial-gradient(ellipse,rgba(59,188,255,.27) 0,rgba(34,133,208,.13) 23%,transparent 66%);filter:blur(11px)}
.hero-orbit{position:absolute;left:50%;top:64%;width:min(45vw,67vh);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(119,217,255,.22);border-radius:50%;box-shadow:0 0 45px rgba(30,172,244,.09),inset 0 0 42px rgba(16,92,155,.05)}
.hero-orbit::before{content:'';position:absolute;inset:12%;border:1px solid rgba(119,217,255,.065);border-radius:50%}
.hero-orbit::after{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:rgba(119,217,255,.55);box-shadow:0 0 14px var(--ice);animation:orbit-light 11s linear infinite}
@keyframes orbit-light{50%{transform:translateY(0);opacity:.15}}
.hero-meta{position:absolute;z-index:6;top:13.2%;left:var(--edge);line-height:1.85;white-space:nowrap}
.scene-coordinates{position:absolute;right:var(--edge);top:16.5%;z-index:6;text-align:right;color:#6c9db6;opacity:.56;font-size:9px;line-height:1.8}
.hero-copy{position:absolute;z-index:10;left:calc(var(--edge) + 21px);top:63%;width:27%;max-width:420px;min-width:242px}
.short-line{display:block;background:#f1f3f6;width:39px;height:2px;margin-bottom:14px}
.hero-label{display:none}
.hero-copy h2{font-size:clamp(18px,1.95vw,34px);font-weight:600;line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
.hero-description{color:#c4d4e0;font-size:clamp(12px,.95vw,17px);line-height:1.55;max-width:310px;margin:18px 0 25px}
.button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:16px 20px;min-height:49px;border:1px solid var(--ice);font-size:10px;font-weight:600;letter-spacing:.04em;background:linear-gradient(120deg,rgba(50,170,240,.095),transparent);box-shadow:0 0 23px rgba(46,181,253,.14),inset 0 0 15px rgba(50,175,250,.07);transition:background .2s,box-shadow .25s;white-space:nowrap}
.button::before,.button::after{content:'';position:absolute;width:22%;height:2px;background:var(--ice);box-shadow:0 0 8px #28cfff}.button::before{left:0;top:-1px}.button::after{right:0;bottom:-1px}
.button:hover{background:rgba(80,200,255,.16);box-shadow:0 0 32px rgba(42,185,255,.32)}
.button span{color:var(--ice);font-size:21px;line-height:.5;font-weight:400}
.hero-services{position:absolute;z-index:10;right:calc(var(--edge) + 31px);top:62.5%;width:18%;max-width:280px;list-style:none;padding:0}
.hero-services li{display:flex;gap:16px;align-items:center;min-height:70px;padding:10px 0;border-bottom:1px solid rgba(119,217,255,.14);font-size:clamp(10px,.83vw,14px);font-weight:600;line-height:1.3}
.hero-services li:last-child{border-bottom:0}
.service-icon{width:51px;height:44px;flex:0 0 51px;display:grid;place-items:center;border:1px solid rgba(119,217,255,.52);color:#c1e7f7;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.service-icon svg{width:25px;height:25px}
.hero-telemetry{position:absolute;right:var(--edge);bottom:78px;z-index:11;display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:.7}
.telemetry-bars{display:flex;gap:4px;height:15px;align-items:flex-end;transform:skewX(-20deg)}
.telemetry-bars i{width:4px;background:#2bcaff;box-shadow:0 0 8px rgba(40,207,255,.4);animation:telemetry 1.8s ease-in-out infinite alternate}
.telemetry-bars i:nth-child(4n){height:40%;animation-delay:-.2s}.telemetry-bars i:nth-child(4n + 1){height:83%;animation-delay:-.5s}.telemetry-bars i:nth-child(4n + 2){height:100%;animation-delay:-1.1s}.telemetry-bars i:nth-child(4n + 3){height:62%;animation-delay:-1.4s}
@keyframes telemetry{50%{height:27%;opacity:.5}}
@media (min-width:1650px) and (min-height:770px){.hero-title-wrap{top:9.9%;left:10.5%;right:8.7%}.hero-figure{width:min(91vw,140vh);bottom:-3%}.hero-meta{top:12.5%}.hero-copy{top:61.5%}.hero-services{top:61%}.hero-services li{min-height:82px}.service-icon{width:57px;height:49px;flex-basis:57px}}
/* Desktop widths under 1200 switch to tablet art-directed crop. */
@media (min-width:768px) and (max-width:1199px){
 .hero-title-wrap{top:12%;left:6.4%;right:6.4%}.hero-title{transform:scaleY(1.48)}
 .hero-figure{width:min(106vw,122vh);aspect-ratio:1448/1086;bottom:-2%}
 .hero-meta{display:none}.scene-coordinates{top:17%;right:32px}
 .hero-copy{top:auto;bottom:11%;left:39px;width:33%;min-width:225px;max-width:320px;padding:12px 0;background:linear-gradient(90deg,rgba(5,9,15,.7),transparent)}
 .hero-copy h2{font-size:clamp(18px,2.4vw,26px)}.hero-description{font-size:12px;max-width:245px;margin:14px 0 20px}
 .hero-services{top:auto;bottom:12%;right:35px;width:20%;max-width:190px}.hero-services li{gap:9px;font-size:10px;min-height:61px}.service-icon{width:39px;height:35px;flex-basis:39px}.service-icon svg{width:21px;height:21px}
 .hero-orbit{width:66vw;top:57%}.hero-telemetry{bottom:73px}
}
/* Portrait tablet: figure enters the frame from the lower third. */
@media (min-width:768px) and (max-width:1199px) and (min-aspect-ratio:0.01) and (max-aspect-ratio: .85){
 .hero-title-wrap{top:14.3%;left:6%;right:6%}.hero-title{transform:scaleY(1.6)}
 .hero-figure{width:min(86vw,720px);bottom:2%}
 .hero-orbit{top:57%;width:83vw}
 .hero-copy{left:35px;bottom:11%;width:39%;max-width:345px;padding:14px 12px 14px 0}
 .hero-services{right:35px;bottom:11%;width:22%}.scene-coordinates{display:none}
}
/* Phones have their own vertical composition. Main document remains locked, not scrollable. */
@media (max-width:767px){
 .hero-title-wrap{top:max(26px,env(safe-area-inset-top));left:23px;right:23px}
 .hero-title{font-size:20vw;line-height:1.025;white-space:normal;letter-spacing:-.018em;transform:none}
 .hero-title .type-row{display:block}.hero-title .type-row:first-child{line-height:1.02}.hero-title[data-phase="web"] .type-row--first{margin-right:0}
 .hero-figure{width:min(88vw,430px);height:auto;aspect-ratio:941/1672;bottom:0.5%;left:50%}
 .hero-orbit{top:53%;width:104vw;left:50%;opacity:.58}
 .hero-backlight{left:50%;top:61%;width:115vw;height:50%}
 .hero-meta,.scene-coordinates,.hero-services{display:none}
 .hero-copy{left:25px;right:23px;top:auto;bottom:78px;width:auto;min-width:0;max-width:345px;padding:14px 9px 1px 0;background:linear-gradient(90deg,rgba(2,6,11,.97),rgba(2,6,11,.8) 54%,rgba(2,6,11,.32) 88%,transparent)}
 .short-line{width:28px;margin-bottom:9px}
 .hero-copy h2{font-size:clamp(19px,5.15vw,27px);max-width:310px}
 .hero-description{font-size:11px;max-width:225px;margin:9px 0 15px;line-height:1.45}
 .hero-copy .button{min-height:46px;font-size:9px;padding:13px 16px;gap:14px;max-width:100%}
 .hero-telemetry{right:23px;bottom:61px}.hero-telemetry>.eyebrow{display:none}
}
@media (max-width:767px) and (max-height:710px) and (min-height:511px){
 .hero-title-wrap{top:28px}.hero-title .type-row:first-child{line-height:1.02}
 .hero-figure{width:min(86vw,390px);bottom:0.5%;left:50%}
 .hero-copy{bottom:60px;max-width:270px;padding-top:7px}
 .hero-copy h2{font-size:clamp(17px,4.8vw,22px)}
 .hero-description{font-size:10px;margin:7px 0 10px}
 .hero-copy .button{min-height:42px;padding:11px 13px}
 .hero-telemetry{display:none}
}
@media (max-width:767px) and (max-height:580px) and (min-height:511px){.hero-description{display:none}.hero-figure{width:min(84vw,360px);left:50%}.hero-copy{bottom:55px}}
/* Wide short landscape: editorial split without shrinking an entire mobile column. */
@media (max-height:510px){
 .hero-title-wrap{top:18%;left:8.7%;right:7%}.hero-title{white-space:nowrap;line-height:1.12;transform:scaleY(1.07)}.hero-title .type-row{display:inline-block!important;font-size:inherit!important}
 .hero-figure{height:auto;width:min(75vw,112vh);aspect-ratio:1672/941;bottom:-17%;left:60%}
 .hero-orbit{top:70%;left:62%;width:min(40vw,65vh)}
 .hero-backlight{left:64%;top:73%;width:70vw;height:65%}
 .hero-copy{top:auto;left:32px;bottom:58px;right:auto;width:35%;max-width:290px;background:linear-gradient(90deg,#03080ee8,transparent);padding:8px 0}
 .hero-copy h2{font-size:clamp(14px,2.2vw,20px)}.hero-description{font-size:10px;margin:8px 0 10px}.hero-copy .button{min-height:40px;padding:10px 12px;gap:15px;font-size:9px}
 .hero-services,.hero-meta,.scene-coordinates,.hero-telemetry{display:none}
}
@media (max-height:360px){.hero-title-wrap{top:20%}.hero-copy{bottom:37px}.hero-description{display:none}.hero-copy .button{padding:8px 10px;min-height:36px}.footer{display:none}.hero-figure{bottom:-24%}}
@media (prefers-reduced-motion:reduce){.hero-picture{will-change:auto}.hero-orbit::after,.telemetry-bars i{animation:none}}

/* V14: the first typed word becomes a permanent compact eyebrow. */
.hero-kicker{position:absolute;left:0;top:0;z-index:3;display:block;white-space:nowrap;visibility:hidden;pointer-events:none;transform-origin:0 0;font:400 clamp(17px,2.2vw,24px)/1.1 Anton,sans-serif;letter-spacing:.055em;color:#edf6fc;text-shadow:0 0 12px rgba(78,205,255,.22)}
.hero-kicker.is-visible{visibility:visible}
.kicker-baseline{display:inline-block;width:0;height:0;vertical-align:baseline;overflow:hidden}
.hero-title.is-line-break .type-caret{opacity:0!important;animation:none!important}
@media(max-width:767px) and (min-height:511px){.hero-title-wrap{top:max(45px,calc(env(safe-area-inset-top) + 24px))}}

/* V16: larger eyebrow at notebook and desktop sizes; mobile X stays unchanged. */
@media(min-width:768px) and (max-width:1199px){.hero-kicker{font-size:clamp(21px,2.4vw,29px)}}
@media(min-width:1200px){.hero-kicker{font-size:clamp(32px,2.65vw,52px)}}
@media(max-width:767px){.hero-kicker{font-size:clamp(17px,4.5vw,22px)}.hero-figure{bottom:-10px}}

/* The mobile WebP has transparent padding below its visible bust: hide the rim as well. */
@media(max-width:767px) and (min-height:511px){.hero-figure{transform:translate(-50%,10px)}}

/* LBCODE V4 / CINEMATIC LIGHT RIG -------------------------------------------------
   Directional volumetric rays, moving haze, physical-feeling bloom and matched
   silhouette lighting. Layers remain behind text and UI; no videos or bitmaps.
   All motion stops for reduced-motion users. */
.lightscape{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none;isolation:isolate}
.lightscape-haze{position:absolute;width:72%;height:115%;top:-5%;opacity:.45;filter:blur(50px);mix-blend-mode:screen;will-change:transform,opacity}
.lightscape-haze-left{left:-37%;background:radial-gradient(ellipse at 48% 50%,rgba(55,160,220,.35) 0,rgba(21,96,153,.23) 23%,transparent 67%);animation:lb-haze-left 15s ease-in-out infinite alternate}
.lightscape-haze-right{right:-36%;background:radial-gradient(ellipse at 46% 42%,rgba(69,186,236,.32),rgba(16,105,173,.18) 25%,transparent 68%);animation:lb-haze-right 18s ease-in-out infinite alternate}
/* Sources at upper sidewalls create believable shafts traveling towards the figure. */
.lightscape-source{position:absolute;top:3%;width:29vw;max-width:490px;aspect-ratio:1;transform:translateY(-47%);border-radius:50%;opacity:.75;filter:blur(22px);background:radial-gradient(circle,rgba(212,248,255,.45) 0,rgba(113,216,255,.25) 7%,rgba(29,139,219,.11) 23%,transparent 65%);animation:lb-emitter 10s ease-in-out infinite alternate}
.lightscape-source-left{left:-12%;animation-delay:-2s}
.lightscape-source-right{right:-11%;top:7%;opacity:.57;animation-delay:-7s}
.lightscape-ray{position:absolute;top:-17%;height:125%;mix-blend-mode:screen;filter:blur(20px);transform-origin:50% 0;will-change:transform,opacity;opacity:.65}
.lightscape-ray-left{left:-3%;width:54%;clip-path:polygon(12% 0,21% 0,100% 100%,7% 100%);background:linear-gradient(108deg,transparent 2%,rgba(126,220,255,.11) 27%,rgba(140,226,255,.28) 39%,rgba(50,158,220,.07) 52%,transparent 79%);transform:rotate(-5deg);animation:lb-ray-left 15s ease-in-out infinite alternate}
.lightscape-ray-right{right:-3%;width:53%;clip-path:polygon(78% 0,88% 0,95% 100%,0 100%);background:linear-gradient(72deg,transparent 9%,rgba(84,202,255,.07) 27%,rgba(167,231,255,.22) 46%,rgba(84,189,244,.14) 55%,transparent 80%);transform:rotate(4deg);animation:lb-ray-right 19s ease-in-out infinite alternate}
.lightscape-ray-back{left:35%;top:-9%;width:30%;height:105%;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);opacity:.28;filter:blur(40px);background:linear-gradient(180deg,rgba(125,229,255,.13),rgba(20,151,219,.20) 40%,transparent 91%);animation:lb-ray-back 13s ease-in-out infinite alternate}
.lightscape-floor{position:absolute;bottom:-18%;left:50%;width:min(92vw,1300px);height:52%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 68%,rgba(46,155,213,.22),rgba(26,94,151,.11) 36%,transparent 76%);filter:blur(27px);opacity:.65;animation:lb-floor-reflect 13s ease-in-out infinite alternate}
/* Very subtle refracted streaks suggest reflections from offscreen monitors. */
.lightscape-prism{position:absolute;inset:0;opacity:.33;background:linear-gradient(124deg,transparent 0 20%,rgba(133,215,249,.085) 20.08%,transparent 20.24% 38%,rgba(133,215,249,.055) 38.09%,transparent 38.26%),linear-gradient(60deg,transparent 0 75%,rgba(107,203,255,.06) 75.1%,transparent 75.28%);background-size:110% 120%;animation:lb-prism 20s ease-in-out infinite alternate}
/* The emitted glow actually hits the PNG subject, using its alpha channel as mask.
   CSS highlight stays aligned to the current responsive asset, never touching
   transparent pixels, so there is no rectangle around the figure. */
.hero-picture{position:relative;isolation:isolate;--figure-alpha:url('./assets/hero/lbcode_developer_desktop.webp?v=21')}

.hero-picture::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
 background:
  linear-gradient(90deg,rgba(255,70,140,.58),transparent 32%),
  linear-gradient(90deg,transparent 46%,rgba(84,226,255,.85) 62%,transparent 78%),
  repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,transparent 2px 10px);
 -webkit-mask-image:var(--figure-alpha);mask-image:var(--figure-alpha);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:contain;mask-size:contain;
 mix-blend-mode:screen;transform:translateX(0)}
.hero-picture.is-glitching::before{opacity:.98;animation:figure-glitch-slices .16s steps(2) 12 alternate}
.hero-picture.is-glitching::after{animation:figure-glitch-flash .18s steps(2) 10 alternate}
/* No translation on registered portraits: their color swap is pixel aligned. */
@keyframes figure-glitch-slices{0%{transform:translateX(-12px) translateY(-1px);clip-path:inset(0 0 62% 0)}25%{transform:translateX(7px) translateY(1px);clip-path:inset(22% 0 33% 0)}50%{transform:translateX(-8px) translateY(-2px);clip-path:inset(47% 0 10% 0)}75%{transform:translateX(4px) translateY(1px);clip-path:inset(12% 0 51% 0)}100%{transform:translateX(0) translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes figure-glitch-rgb{0%{filter:drop-shadow(-11px 0 0 rgba(255,64,150,.52)) drop-shadow(11px 0 0 rgba(67,228,255,.65)) brightness(.48) contrast(1.5);transform:translateX(-6px)}30%{filter:drop-shadow(9px 0 0 rgba(255,64,150,.64)) drop-shadow(-10px 0 0 rgba(67,228,255,.7)) brightness(1.48) contrast(1.4);transform:translateX(7px)}68%{filter:drop-shadow(-12px 0 0 rgba(255,64,150,.56)) drop-shadow(12px 0 0 rgba(67,228,255,.77)) brightness(.82) contrast(1.25);transform:translateX(-3px)}100%{filter:none;transform:translateX(0)}}
@keyframes figure-glitch-flash{0%{opacity:.82}100%{opacity:.58}}

.hero-picture::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
 -webkit-mask-image:var(--figure-alpha);mask-image:var(--figure-alpha);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:contain;mask-size:contain;
 background:
   radial-gradient(ellipse 23% 57% at 19% 45%,rgba(152,224,255,.23),rgba(48,145,214,.085) 47%,transparent 80%),
   radial-gradient(ellipse 22% 47% at 83% 39%,rgba(195,239,255,.27),rgba(56,169,246,.09) 46%,transparent 78%),
   linear-gradient(114deg,transparent 22%,rgba(202,242,255,.11) 28%,transparent 36%,transparent 74%,rgba(105,214,255,.085) 80%,transparent 87%);
 mix-blend-mode:screen;opacity:.70;animation:lb-figure-light 12s ease-in-out infinite alternate;transform:translateZ(0)}
/* Two short-lived color-channel copies with nonmatching horizontal slices.
   Same responsive asset as the portrait: no additional image or downloading. */
/* Both portraits inherit precisely the same box, layout and pointer parallax.
   The red image has a pixel-identical alpha channel and is never translated. */
.hero-picture>.hero-portrait{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-portrait--blue{z-index:1}
.hero-portrait--red{z-index:7;opacity:0;pointer-events:none}
.hero-picture.is-glitching .hero-portrait--red{animation:lb-red-lb-flash 1.78s linear both}
/* Longer color-shift window: glitch on entry and exit, with a stable hold in the middle.
   The silhouette stays perfectly registered; only the palette and visor logo change. */
@keyframes lb-red-lb-flash{
  0%,4%{opacity:0}
  8%,12%{opacity:1}
  13%,16%{opacity:0}
  18%,64%{opacity:1}
  65%,69%{opacity:.84}
  70%,73%{opacity:0}
  74%,82%{opacity:1}
  83%,86%{opacity:0}
  88%,93%{opacity:1}
  94%,100%{opacity:0}
}
.hero-figure{--ghost-image:url('./assets/hero/lbcode_developer_desktop.webp?v=21')}
.hero-glitch-ghost{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background-image:var(--ghost-image);background-repeat:no-repeat;background-size:contain;background-position:center;mix-blend-mode:screen;will-change:transform,clip-path}
.hero-glitch-ghost--cyan{filter:brightness(1.9) saturate(1.9) drop-shadow(8px 0 0 rgba(54,226,255,.92))}
.hero-glitch-ghost--magenta{filter:hue-rotate(135deg) brightness(1.45) saturate(2.2) drop-shadow(-11px 0 0 rgba(255,62,185,.82))}
.hero-figure.is-glitching .hero-glitch-ghost--cyan{animation:glitch-ghost-cyan .155s steps(2) 8 alternate}
.hero-figure.is-glitching .hero-glitch-ghost--magenta{animation:glitch-ghost-magenta .192s steps(2) 7 alternate}
@keyframes glitch-ghost-cyan{0%{opacity:.65;clip-path:inset(9% 0 78% 0);transform:translateX(-21px)}27%{opacity:.84;clip-path:inset(37% 0 43% 0);transform:translateX(14px)}55%{opacity:.58;clip-path:inset(61% 0 18% 0);transform:translateX(-15px)}82%{opacity:.9;clip-path:inset(21% 0 55% 0);transform:translateX(11px)}100%{opacity:.08;clip-path:inset(75% 0 7% 0);transform:translateX(0)}}
@keyframes glitch-ghost-magenta{0%{opacity:.36;clip-path:inset(58% 0 21% 0);transform:translateX(18px)}24%{opacity:.70;clip-path:inset(15% 0 66% 0);transform:translateX(-17px)}54%{opacity:.66;clip-path:inset(33% 0 45% 0);transform:translateX(24px)}78%{opacity:.77;clip-path:inset(70% 0 9% 0);transform:translateX(-10px)}100%{opacity:0;transform:translateX(0)}}
.hero-figure{filter:drop-shadow(-14px -8px 18px rgba(63,157,222,.09)) drop-shadow(12px -5px 25px rgba(53,167,234,.095))}
@media (min-width:768px) and (max-width:1199px){.hero-picture{--figure-alpha:url('./assets/hero/lbcode_developer_tablet.webp?v=21')}.hero-figure{--ghost-image:url('./assets/hero/lbcode_developer_tablet.webp?v=21')}}
@media (max-width:767px){
 .hero-picture{--figure-alpha:url('./assets/hero/lbcode_developer_mobile.webp?v=21')}
 .hero-figure{--ghost-image:url('./assets/hero/lbcode_developer_mobile.webp?v=21')}
 /* Side margins guarantee the entire approved mobile image stays in frame. */
 .hero-figure{width:min(84vw,410px);left:50%}
 .lightscape-ray{filter:blur(22px);opacity:.45}.lightscape-source{width:62vw;filter:blur(34px)}
 .lightscape-haze{opacity:.37}.lightscape-prism{opacity:.19}
 .hero-picture::after{opacity:.6}
}
@media (max-width:767px) and (max-height:710px) and (min-height:511px){.hero-figure{width:min(82vw,385px);left:50%}}
@media (max-width:767px) and (max-height:580px) and (min-height:511px){.hero-figure{width:min(79vw,355px);left:50%}}
@media (max-height:510px) and (min-width:1200px){.hero-picture{--figure-alpha:url('./assets/hero/lbcode_developer_desktop.webp?v=21')}}
@media (max-height:510px) and (min-width:768px) and (max-width:1199px){.hero-picture{--figure-alpha:url('./assets/hero/lbcode_developer_tablet.webp?v=21')}.hero-figure{--ghost-image:url('./assets/hero/lbcode_developer_tablet.webp?v=21')}}
@media (max-height:510px) and (max-width:767px){.hero-picture{--figure-alpha:url('./assets/hero/lbcode_developer_mobile.webp?v=21')}}
@media (prefers-reduced-motion:reduce){.lightscape *,.hero-glitch-ghost,.hero-picture::before,.hero-picture::after,.hero-picture img{animation:none!important;will-change:auto!important}.lightscape-ray{opacity:.42}.lightscape-haze{opacity:.34}}
@keyframes lb-haze-left{0%{transform:translate(-4%,0) scale(1);opacity:.35}100%{transform:translate(7%,3%) scale(1.08);opacity:.56}}
@keyframes lb-haze-right{0%{transform:translate(5%,-2%) scale(.98);opacity:.37}100%{transform:translate(-6%,5%) scale(1.10);opacity:.56}}
@keyframes lb-emitter{0%{opacity:.48;transform:translateY(-47%) scale(.92)}100%{opacity:.81;transform:translateY(-44%) scale(1.09)}}
@keyframes lb-ray-left{0%{opacity:.43;transform:rotate(-7deg) translateX(-2%)}50%{opacity:.75}100%{opacity:.59;transform:rotate(2deg) translateX(3%)}}
@keyframes lb-ray-right{0%{opacity:.64;transform:rotate(5deg) translateX(3%)}100%{opacity:.4;transform:rotate(-4deg) translateX(-2%)}}
@keyframes lb-ray-back{0%{opacity:.20;transform:translateX(-4%)}100%{opacity:.42;transform:translateX(4%)}}
@keyframes lb-floor-reflect{0%{opacity:.46;transform:translateX(-50%) scale(.91)}100%{opacity:.78;transform:translateX(-50%) scale(1.12)}}
@keyframes lb-prism{0%{opacity:.2;background-position:-5% -4%}100%{opacity:.41;background-position:5% 5%}}
@keyframes lb-figure-light{0%{opacity:.46;filter:brightness(.89)}48%{opacity:.84;filter:brightness(1.07)}100%{opacity:.58;filter:brightness(.95)}}

/* LBcode: pixel-registered perimeter light, independent of layout. */
.lb-outline-canvas{position:absolute;z-index:8;inset:calc(-1 * var(--outline-pad,100px));width:calc(100% + 2 * var(--outline-pad,100px));height:calc(100% + 2 * var(--outline-pad,100px));pointer-events:none;display:block;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.lb-outline-canvas{display:none}}

/* V15: keep the art direction; remove expensive per-frame mobile compositing. */
@media(max-width:1199px),(pointer:coarse){
 .environment canvas{filter:none!important;opacity:.88}
 .room-glow,.lightscape-haze,.lightscape-source,.lightscape-ray,.lightscape-floor,.light-beam,.energy-halo,.lightscape-prism{animation:none!important;will-change:auto!important}
 .room-glow,.lightscape-haze,.lightscape-source,.lightscape-floor,.lightscape-ray,.light-beam{filter:none!important}
 .lightscape-haze{opacity:.22}.lightscape-ray{opacity:.30}.lightscape-source{opacity:.42}.lightscape-floor{opacity:.35}
 .environment-grain,.ambient-scan,.lightscape-prism{display:none!important}
 .terminal{backdrop-filter:none;animation:none;opacity:.19}.terminal-lines{animation:none}
 .hero-figure{filter:none!important}.hero-picture::after{animation:none!important;opacity:.48}
 .hero-picture.is-glitching::before,.hero-picture.is-glitching::after{animation:none!important}
 .hero-glitch-ghost{display:none!important}.lb-outline-canvas{mix-blend-mode:normal!important}
 .hero-backlight{filter:none}.info-dialog::backdrop{backdrop-filter:none}
}

/* V18 Code Core: compact independent vector overlay, no filter rasterization. */
.lb-code-core{position:absolute;z-index:9;pointer-events:none;display:none;overflow:visible;transform:translate(-50%,-50%);--cc-color:#22cbff;--cc-hot:#d8fbff;contain:layout style;}
@media(prefers-reduced-motion:reduce){.lb-code-core{display:none!important}}

/* V22: mobile-only navigation. A single lightweight SVG stroke impulse. */
.mobile-menu-trigger,.mobile-menu-dialog{display:none}
@media(max-width:767px){
 .mobile-menu-trigger{position:absolute;z-index:32;top:max(30px,calc(env(safe-area-inset-top) + 10px));right:max(17px,calc(env(safe-area-inset-right) + 12px));width:88px;height:88px;display:grid;place-items:center;padding:0;color:#b4efff;background:none;border:0;box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px) scale(.87);touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
 .hero-title-wrap:has(.hero-title.is-complete) + .mobile-menu-trigger{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .42s ease,transform .42s cubic-bezier(.18,.8,.3,1)}
 .mobile-menu-node{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
 .mobile-menu-orbit,.mobile-menu-orbit-inner{transform-origin:44px 39px;transform-box:view-box;animation:lb-nav-orbit 19s linear infinite;animation-play-state:paused}
 .mobile-menu-orbit-inner{animation-duration:27s;animation-direction:reverse}
 .mobile-menu-signal{animation:lb-mobile-menu-signal 5.8s linear infinite;animation-play-state:paused}
 .mobile-menu-core{transform-origin:44px 39px;transform-box:view-box;animation:lb-nav-core 3.4s ease-in-out infinite;animation-play-state:paused}
 .hero-title-wrap:has(.hero-title.is-complete) + .mobile-menu-trigger svg *{animation-play-state:running}
 .mobile-menu-trigger:active .mobile-menu-node{transform:scale(.91)}
 .mobile-menu-trigger:focus-visible{outline:1px dashed #a6edff;outline-offset:2px;border-radius:50%}
 .mobile-menu-dialog[open]{display:block;position:fixed;inset:max(15px,calc(env(safe-area-inset-top) + 10px)) max(15px,calc(env(safe-area-inset-right) + 10px)) auto auto;margin:0;width:min(310px,calc(100vw - 30px));max-width:none;max-height:calc(100dvh - max(30px,calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px)));overflow:auto;overscroll-behavior:contain;padding:0;background:linear-gradient(145deg,#0b2130,#060c14 55%);border:1px solid #4285a5;color:#f1f5f8;box-shadow:0 12px 38px #000a;animation:lb-mobile-menu-open .2s ease-out;}
 .mobile-menu-dialog::backdrop{background:#02060bc2}
 .mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:18px 19px 15px;border-bottom:1px solid #75d9ff33;gap:8px}
 .mobile-menu-header .eyebrow{color:#81c9e8;font-size:9px}.mobile-menu-header h2{font:400 31px/1.1 Anton,sans-serif;letter-spacing:.01em;margin-top:5px}
 .mobile-menu-close{width:44px;height:44px;border:1px solid #75d9ff50;display:grid;place-items:center;color:#abebff}.mobile-menu-close svg{width:23px;height:23px}
 .mobile-menu-nav{display:flex;flex-direction:column;padding:4px 18px 9px}
 .mobile-menu-nav button{display:grid;grid-template-columns:25px 1fr 17px;align-items:center;text-align:left;width:100%;gap:8px;min-height:72px;padding:13px 0;border-bottom:1px solid #75d9ff26;font:400 19px/1.15 Anton,sans-serif;letter-spacing:.015em;color:#edf7ff}
 .mobile-menu-nav button:active,.mobile-menu-nav button:focus-visible{background:#77d9ff12}.mobile-menu-nav small{display:block;font:9px/1.4 'Courier New',monospace;letter-spacing:.035em;color:#8caabc;margin-top:5px}
 .mobile-menu-index{font:10px/1 monospace;color:#77d9ff}.mobile-menu-arrow{font:18px/1 Inter,sans-serif;color:#77d9ff}
 .mobile-menu-footer{display:flex;align-items:center;gap:7px;padding:12px 19px 17px;font-size:9px;color:#8ba9b9}.mobile-menu-footer i{width:5px;height:5px;transform:rotate(45deg);background:#77d9ff;box-shadow:0 0 6px #77d9ff}.mobile-menu-footer span{margin-left:auto}
 @media(max-height:510px){.mobile-menu-trigger{top:max(7px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right));width:54px;height:54px}.mobile-menu-header{padding:10px 17px}.mobile-menu-nav button{min-height:56px;padding:9px 0}}
}
@keyframes lb-mobile-menu-signal{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes lb-nav-orbit{to{transform:rotate(360deg)}}
@keyframes lb-nav-core{0%,100%{opacity:.82;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes lb-mobile-menu-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}