:root{
  --bg:#050606;--bg-soft:#090a09;--panel:#0b0d0b;--panel-2:#101310;--panel-3:#151914;
  --text:#f3f5ef;--muted:#90978e;--muted-2:#646b63;
  --accent:#d7ff68;--accent-rgb:215,255,104;--cyan:#85e8ff;--danger:#ff746d;
  --line:rgba(244,255,235,.105);--line-strong:rgba(244,255,235,.19);
  --radius:24px;--radius-lg:34px;--radius-sm:14px;
  --container:min(1240px,calc(100vw - 44px));
  --shadow:0 34px 100px rgba(0,0,0,.42);
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 16% -6%,rgba(215,255,104,.08),transparent 33rem),
  radial-gradient(circle at 93% 16%,rgba(133,232,255,.055),transparent 30rem),
  var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),transparent 82%)}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{color:inherit}img{max-width:100%;display:block}::selection{background:var(--accent);color:#0a0b09}
/* Permanent CSS cursor fallback: visible everywhere even if JS effects fail */
html,body{cursor:url("cursor-default.png") 4 3, auto}
a,button,[role="button"],select,label,.card-hover,[data-tilt],[data-cursor],.memory-cell,.bug-target,canvas{cursor:url("cursor-pointer.png") 15 15, pointer}
input,textarea{cursor:text}

.container{width:var(--container);margin-inline:auto}.mono{font-family:var(--mono)}.muted{color:var(--muted)}.accent{color:var(--accent)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);box-shadow:0 0 18px rgba(var(--accent-rgb),.48)}
.display{margin:0;font-size:clamp(4.4rem,11.5vw,10.3rem);line-height:.76;letter-spacing:-.09em;font-weight:800}
.display .ghost{color:transparent;-webkit-text-stroke:1px rgba(243,245,239,.36);font-weight:600}
.section-title{font-size:clamp(2.55rem,5.9vw,5.6rem);letter-spacing:-.067em;line-height:.91;margin:0}
.copy{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.75;color:#bcc2ba}
.kicker{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.08em}
.rule{height:1px;background:var(--line)}
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--cyan));z-index:9998;box-shadow:0 0 18px rgba(var(--accent-rgb),.5)}

.nav{position:sticky;top:0;z-index:80;background:rgba(5,6,6,.72);border-bottom:1px solid rgba(255,255,255,.065);backdrop-filter:blur(22px) saturate(1.2)}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:820;letter-spacing:-.04em}.brand-mark{width:11px;height:11px;border-radius:2px;background:var(--accent);transform:rotate(14deg);box-shadow:0 0 25px rgba(var(--accent-rgb),.4)}
.brand-sub{font-family:var(--mono);font-size:.61rem;color:var(--muted);font-weight:400;letter-spacing:.08em;margin-left:3px}
.nav-links{display:flex;gap:4px;align-items:center}.nav-links a{font-size:.86rem;color:var(--muted);padding:9px 11px;border:1px solid transparent;border-radius:10px;transition:.22s ease}
.nav-links a:hover,.nav-links a.active{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.035)}
.nav-actions{display:flex;align-items:center;gap:7px}.lang-switch,.icon-btn{height:40px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer}
.lang-switch{padding:0 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}.icon-btn{width:42px;display:grid;place-items:center}.mobile-menu-btn{display:none}
.mobile-panel{display:none}

.hero{min-height:calc(100vh - 72px);display:grid;align-items:center;position:relative;padding:74px 0 56px;overflow:hidden}
.hero::before{content:"HANXW";position:absolute;right:-.07em;bottom:-.16em;font-size:min(24vw,330px);font-weight:900;letter-spacing:-.11em;color:rgba(255,255,255,.018);pointer-events:none}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr);gap:56px;align-items:center}
.hero-copy{position:relative;z-index:2}.hero-copy .copy{max-width:720px;margin:28px 0}
.hero-title-wrap{position:relative;margin-top:30px}.hero-title-wrap::after{content:"build / ship / repeat";position:absolute;right:2%;bottom:-23px;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px}
.btn{min-height:50px;padding:0 17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .24s ease,border-color .24s ease,background .24s ease}
.btn:hover{transform:translateY(-2px);border-color:var(--line-strong);background:rgba(255,255,255,.055)}.btn-primary{background:var(--accent);color:#0a0c09;border-color:var(--accent);font-weight:820}.btn-primary:hover{background:#e0ff89}
.btn .key{font-family:var(--mono);font-size:.66rem;padding:3px 6px;border-radius:6px;border:1px solid currentColor;opacity:.58}
.hero-card{position:relative;min-height:510px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.048),rgba(255,255,255,.012));overflow:hidden;box-shadow:var(--shadow)}
.hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,55%) var(--my,35%),rgba(var(--accent-rgb),.12),transparent 36%);pointer-events:none}
.hero-card canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.82}
.hero-card-ui{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.system-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.system-pill{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;padding:8px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(5,6,6,.54);backdrop-filter:blur(12px)}
.system-live{color:var(--accent)}.system-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;box-shadow:0 0 0 5px rgba(var(--accent-rgb),.09),0 0 18px currentColor}
.system-center{display:grid;place-items:center}.monogram{width:190px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.22);position:relative;background:rgba(4,5,4,.3);backdrop-filter:blur(4px)}
.monogram::before,.monogram::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.13)}.monogram::before{inset:-32px;border-style:dashed;animation:spin 26s linear infinite}.monogram::after{inset:23px}
.monogram strong{font-size:3.8rem;letter-spacing:-.12em}.monogram strong span{color:var(--accent)}
.system-bottom{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sys-cell{border:1px solid var(--line);border-radius:14px;padding:13px;background:rgba(5,6,6,.55);backdrop-filter:blur(11px)}.sys-cell span{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.sys-cell strong{display:block;margin-top:5px;font-size:.92rem}
.hero-ticker{margin-top:64px;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}.hero-stat{padding:21px 20px}.hero-stat+.hero-stat{border-left:1px solid var(--line)}.hero-stat strong{display:block;font-size:1.38rem;letter-spacing:-.04em}.hero-stat span{display:block;margin-top:5px;color:var(--muted);font-size:.79rem}

.marquee{overflow:hidden;border-block:1px solid var(--line);background:#080908;padding:13px 0}.marquee-track{display:flex;gap:34px;width:max-content;animation:marquee 30s linear infinite;font-family:var(--mono);font-size:.67rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.marquee-track span::after{content:"✦";color:var(--accent);margin-left:34px}

.section{padding:110px 0}.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);gap:48px;align-items:end;margin-bottom:42px}.section-head .copy{margin:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(150deg,rgba(255,255,255,.036),rgba(255,255,255,.012));padding:28px;position:relative;overflow:hidden}
.card-hover{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,background .35s ease}.card-hover:hover{transform:translateY(-7px);border-color:rgba(var(--accent-rgb),.26);background:linear-gradient(150deg,rgba(var(--accent-rgb),.055),rgba(255,255,255,.012))}
.card h3{font-size:1.6rem;letter-spacing:-.045em;margin:0 0 11px}.card p{margin:0;color:var(--muted);line-height:1.65}.card-arrow{position:absolute;right:23px;top:22px;color:var(--muted);font-size:1.2rem}
.project-card{min-height:390px;display:flex;flex-direction:column}.project-card .tags{margin-top:auto}
.project-visual{height:180px;margin:-28px -28px 27px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:#070807}
.mock-window{position:absolute;inset:20px 24px -1px;border:1px solid var(--line-strong);border-radius:18px 18px 0 0;background:#0b0d0b;padding:14px;box-shadow:0 20px 60px #000}
.mock-top{display:flex;gap:5px;margin-bottom:21px}.mock-top i{width:6px;height:6px;border-radius:50%;background:#555}
.disk-bars{height:78px;display:grid;grid-template-columns:repeat(9,1fr);align-items:end;gap:4px}.disk-bars i{background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.13));border-radius:4px 4px 0 0}
.arena-row{display:grid;grid-template-columns:72px 1fr 30px;gap:8px;align-items:center;margin:8px 0;font-family:var(--mono);font-size:.58rem;color:var(--muted)}.arena-row b{height:8px;background:#1b2019;border-radius:99px;overflow:hidden}.arena-row b i{display:block;height:100%;background:var(--cyan);border-radius:inherit}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}.tag{border:1px solid var(--line);border-radius:99px;padding:7px 9px;color:#bdc3ba;font-family:var(--mono);font-size:.67rem}
.cap-card{min-height:300px;display:flex;flex-direction:column;justify-content:space-between}.cap-num{font-family:var(--mono);font-size:.65rem;color:var(--muted)}.cap-icon{font-size:2rem;margin:34px 0}.cap-card h3{font-size:1.9rem}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}.process-item{padding:32px;min-height:290px;background:rgba(255,255,255,.012)}.process-item+.process-item{border-left:1px solid var(--line)}.process-item .n{font-family:var(--mono);font-size:.65rem;color:var(--accent)}.process-item h3{font-size:1.45rem;margin:90px 0 12px;letter-spacing:-.04em}.process-item p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}
.lab-band{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;background:linear-gradient(140deg,rgba(var(--accent-rgb),.045),rgba(255,255,255,.012))}
.lab-main{padding:48px}.lab-main h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.9;letter-spacing:-.065em;margin:18px 0}.lab-side{border-left:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:350px;background:rgba(0,0,0,.12)}
.lab-counter{font-size:4.6rem;letter-spacing:-.08em;font-weight:800}.lab-side p{color:var(--muted);line-height:1.6}
.cta-panel{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;border:1px solid rgba(var(--accent-rgb),.24);border-radius:var(--radius-lg);padding:44px;background:radial-gradient(circle at 0 50%,rgba(var(--accent-rgb),.08),transparent 35%),#090b09}.cta-panel h2{font-size:clamp(2.3rem,5vw,4.6rem);letter-spacing:-.065em;line-height:.92;margin:0}.cta-panel p{color:var(--muted);margin:14px 0 0}

.page-hero{padding:96px 0 58px;position:relative}.page-hero h1{font-size:clamp(3.6rem,9.5vw,8.2rem);line-height:.84;letter-spacing:-.083em;margin:19px 0 28px;max-width:1100px}.page-hero .copy{max-width:800px}
.project-detail-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px}.project-feature{min-height:520px}.project-aside{display:grid;gap:16px}.metric-card{min-height:160px}.metric-card strong{font-size:2.2rem;letter-spacing:-.055em}.metric-card span{display:block;color:var(--muted);font-size:.8rem;margin-top:7px}
.service-layout{display:grid;grid-template-columns:330px 1fr;gap:18px}.service-nav{position:sticky;top:98px;height:max-content}.service-nav a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted)}.service-nav a:hover{color:var(--text)}
.service-block{padding:42px;border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:18px;background:linear-gradient(150deg,rgba(255,255,255,.032),rgba(255,255,255,.008))}.service-block h2{font-size:clamp(2rem,4vw,3.8rem);line-height:.96;letter-spacing:-.06em;margin:12px 0 18px}.service-block .price{font-family:var(--mono);color:var(--accent);font-size:.68rem;letter-spacing:.08em}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:28px 0}.feature{border:1px solid var(--line);border-radius:13px;padding:13px;color:#bfc5bc;font-size:.88rem;background:rgba(255,255,255,.012)}
.brief-form{margin-top:48px;padding:34px;border:1px solid rgba(var(--accent-rgb),.19);border-radius:var(--radius-lg);background:linear-gradient(145deg,#0e110d,#080908)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font-family:var(--mono);font-size:.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:#060706;color:var(--text);border-radius:13px;padding:14px;outline:none}.field textarea{min-height:140px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(var(--accent-rgb),.5)}

.achievement-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:35px}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.achievement{min-height:245px;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;background:linear-gradient(150deg,rgba(255,255,255,.025),rgba(255,255,255,.009));position:relative;overflow:hidden}.achievement::after{content:"";position:absolute;width:130px;height:130px;border:1px solid rgba(var(--accent-rgb),.1);border-radius:50%;right:-55px;top:-55px}.achievement.locked{filter:saturate(.12);opacity:.42}.achievement.unlocked{border-color:rgba(var(--accent-rgb),.25);box-shadow:inset 0 0 50px rgba(var(--accent-rgb),.025)}.achievement-icon{font-size:2.1rem;margin-bottom:35px}.achievement .rarity{font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.1em}.achievement h3{margin:8px 0 9px;font-size:1.36rem}.achievement p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}.progress{height:7px;border:1px solid var(--line);border-radius:99px;background:#111410;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width .55s ease}

.arcade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.game-card{min-height:360px;border:1px solid var(--line);border-radius:var(--radius);padding:27px;display:flex;flex-direction:column;overflow:hidden;position:relative;background:linear-gradient(150deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.game-card::before{content:"";position:absolute;width:250px;height:250px;border:1px solid rgba(var(--accent-rgb),.12);border-radius:50%;right:-105px;bottom:-110px}.game-card::after{content:"";position:absolute;width:120px;height:120px;border:1px dashed rgba(133,232,255,.09);border-radius:50%;right:-25px;bottom:-30px}
.game-card h2{font-size:2.5rem;line-height:.91;letter-spacing:-.06em;margin:15px 0 12px}.game-card p{color:var(--muted);line-height:1.6;margin:0}.game-meta{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:auto;position:relative;z-index:1}.game-chip{font-family:var(--mono);font-size:.61rem;letter-spacing:.06em;border:1px solid var(--line);padding:7px 9px;border-radius:99px;color:var(--muted)}
.game-shell{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#040504;box-shadow:var(--shadow)}.game-topbar{min-height:46px;padding:0 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.67rem;color:var(--muted)}
.game-stage{position:relative;min-height:590px}.game-stage canvas{display:block;width:100%;height:590px;touch-action:none}.hud{position:absolute;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;font-family:var(--mono);font-size:.7rem}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,5,4,.7);backdrop-filter:blur(8px);z-index:5}.game-overlay.hidden{display:none}.overlay-card{text-align:center;max-width:450px;padding:30px}.overlay-card h2{font-size:3.2rem;line-height:.9;letter-spacing:-.065em;margin:16px 0}.overlay-card p{color:var(--muted);line-height:1.6}
.type-game{padding:34px;min-height:580px;display:grid;align-content:start;gap:24px}.terminal-box{border:1px solid var(--line);border-radius:18px;background:#070907;padding:21px;font-family:var(--mono);min-height:270px}.prompt-row{display:flex;gap:10px;color:#c5cbc2;line-height:1.8;flex-wrap:wrap}.token{color:var(--accent);font-weight:750}.type-input{border:none;border-bottom:1px solid var(--line-strong);background:transparent;color:var(--text);font-family:var(--mono);font-size:1.1rem;padding:13px 0;outline:none;width:100%}.type-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.type-stat{border:1px solid var(--line);border-radius:14px;padding:16px}.type-stat span{display:block;color:var(--muted);font-family:var(--mono);font-size:.62rem;text-transform:uppercase}.type-stat strong{display:block;font-size:1.35rem;margin-top:4px}
.memory-wrap{padding:28px;min-height:590px;display:grid;place-items:center}.memory-board{display:grid;grid-template-columns:repeat(4,minmax(55px,100px));gap:10px}.memory-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:15px;background:#101410;transition:.14s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)}.memory-cell.active{background:var(--accent);box-shadow:0 0 35px rgba(var(--accent-rgb),.32);transform:scale(.95)}.memory-cell.fail{background:var(--danger)}
.stack-wrap{min-height:590px;position:relative}.stack-wrap canvas{display:block;width:100%;height:590px;touch-action:none}.bug-field{position:relative;min-height:590px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.035),transparent 48%)}.bug-target{position:absolute;width:54px;height:54px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:50%;background:rgba(var(--accent-rgb),.08);display:grid;place-items:center;font-family:var(--mono);font-size:1.4rem;cursor:pointer;box-shadow:0 0 25px rgba(var(--accent-rgb),.08);animation:pulse 1s ease-in-out infinite alternate}.bug-target::after{content:"";position:absolute;inset:7px;border:1px dashed rgba(var(--accent-rgb),.35);border-radius:50%}
.snake-wrap{min-height:590px;display:grid;position:relative;place-items:center;padding:20px}.snake-wrap canvas{width:min(100%,590px);aspect-ratio:1;display:block;border:1px solid var(--line);border-radius:18px;background:#060806;touch-action:none}

.footer{padding:60px 0 36px;border-top:1px solid var(--line)}.footer-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.footer .brand{font-size:1.22rem}.footer-links{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:.85rem}

.command-palette{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.61);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}.command-palette.open{display:flex}.palette-box{width:min(650px,calc(100vw - 28px));border:1px solid var(--line-strong);background:#0a0c0a;border-radius:19px;padding:10px;box-shadow:0 35px 120px #000}.palette-box input{width:100%;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--text);padding:16px}.palette-list{padding:7px}.palette-list button{width:100%;border:0;border-radius:11px;background:transparent;color:var(--muted);padding:12px;text-align:left;cursor:pointer}.palette-list button:hover{background:#151814;color:var(--text)}
.toast{position:fixed;right:18px;bottom:18px;z-index:4500;width:min(340px,calc(100vw - 36px));padding:16px 18px;border:1px solid rgba(var(--accent-rgb),.27);border-radius:15px;background:#0c0f0b;box-shadow:var(--shadow);transform:translateY(130%);opacity:0;transition:.34s ease}.toast.show{transform:none;opacity:1}.toast strong{display:block;margin-bottom:4px}.toast span{display:block;color:var(--muted);font-size:.83rem}
.secret-console{position:fixed;left:18px;right:18px;bottom:18px;z-index:4600;border:1px solid rgba(var(--accent-rgb),.35);background:#020302;border-radius:17px;padding:19px;display:none;font-family:var(--mono);box-shadow:0 35px 120px #000}.secret-console.open{display:block;animation:pop .25s ease}.secret-console .x{position:absolute;right:12px;top:9px;background:none;border:0;color:var(--muted);cursor:pointer}
.cursor-dot,.cursor-ring,.cursor-label{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;display:none}
.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(var(--accent-rgb),.9);transform:translate3d(-100px,-100px,0)}
.cursor-ring{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.75);background:rgba(var(--accent-rgb),.03);transform:translate3d(-100px,-100px,0);transition:width .16s ease,height .16s ease,border-color .16s ease,background .16s ease}
.cursor-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:#090b08;background:var(--accent);border-radius:99px;padding:5px 8px;transform:translate3d(-100px,-100px,0)}
body.custom-cursor-ready .cursor-dot,body.custom-cursor-ready .cursor-ring{display:block}
body.custom-cursor-ready .cursor-label.show{display:block}
.cursor-ring.hovering{width:52px;height:52px;background:rgba(var(--accent-rgb),.1);border-color:var(--accent)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1)}.reveal.visible{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;will-change:transform}

@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}@keyframes pulse{to{transform:scale(1.08);box-shadow:0 0 40px rgba(var(--accent-rgb),.2)}}

@media(max-width:1040px){.hero-layout{grid-template-columns:1fr 360px}.process-grid{grid-template-columns:repeat(2,1fr)}.process-item:nth-child(3){border-left:0;border-top:1px solid var(--line)}.process-item:nth-child(4){border-top:1px solid var(--line)}.achievement-grid,.arcade-grid{grid-template-columns:repeat(2,1fr)}.service-layout{grid-template-columns:1fr}.service-nav{display:none}}
@media(max-width:780px){
  :root{--container:min(100% - 28px,1240px);--radius:19px;--radius-lg:24px}
  .nav-inner{height:64px}.nav-links{display:none}.mobile-menu-btn{display:grid}.mobile-panel{position:fixed;top:76px;left:14px;right:14px;z-index:100;border:1px solid var(--line-strong);border-radius:17px;background:#0a0c0a;padding:8px;box-shadow:var(--shadow)}.mobile-panel.open{display:grid}.mobile-panel a{padding:13px;border-radius:10px;color:var(--muted)}.mobile-panel a.active,.mobile-panel a:hover{background:#151814;color:var(--text)}
  .hero{min-height:auto;padding:62px 0 45px}.hero-layout{grid-template-columns:1fr}.hero-card{min-height:390px;order:-1}.monogram{width:145px}.monogram strong{font-size:3rem}.display{font-size:clamp(4.3rem,23vw,7rem)}.hero-title-wrap::after{right:0}.hero-ticker{grid-template-columns:1fr 1fr}.hero-stat:nth-child(3){border-left:0;border-top:1px solid var(--line)}.hero-stat:nth-child(4){border-top:1px solid var(--line)}.hero-stat{padding:17px 14px}
  .section{padding:78px 0}.section-head{grid-template-columns:1fr;gap:18px}.grid-2,.grid-3,.achievement-grid,.arcade-grid,.project-detail-grid,.lab-band{grid-template-columns:1fr}.lab-side{border-left:0;border-top:1px solid var(--line)}.process-grid{grid-template-columns:1fr}.process-item+.process-item{border-left:0;border-top:1px solid var(--line)}.process-item h3{margin-top:58px}.cta-panel{grid-template-columns:1fr}.page-hero{padding:70px 0 40px}.service-block{padding:27px}.feature-list,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.achievement-head{align-items:flex-start;flex-direction:column}.footer-grid{align-items:flex-start;flex-direction:column}.game-card{min-height:330px}.game-stage,.game-stage canvas,.stack-wrap,.stack-wrap canvas,.bug-field{min-height:500px;height:500px}.snake-wrap{min-height:500px}.type-game{padding:20px;min-height:500px}.memory-wrap{min-height:500px;padding:15px}.memory-board{gap:7px;grid-template-columns:repeat(4,minmax(46px,78px))}.memory-cell{border-radius:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* FINAL CURSOR OVERRIDE
   Apply the image cursor to every desktop element, not just body inheritance.
   Interactive controls get a separate pointer cursor. */
@media (hover:hover) and (pointer:fine){
  html,body,body *{
    cursor:url("cursor-default.png") 4 3, default !important;
  }
  a,button,[role="button"],select,label,.card-hover,[data-tilt],[data-cursor],
  .memory-cell,.bug-target,canvas,.merge-cell,.reaction-core{
    cursor:url("cursor-pointer.png") 15 15, pointer !important;
  }
  input,textarea{
    cursor:text !important;
  }
}

/* Additional final Arcade games */
.pong-wrap,.breakout-wrap{position:relative;min-height:590px}
.pong-wrap canvas,.breakout-wrap canvas{display:block;width:100%;height:590px;touch-action:none}
.merge-wrap{min-height:590px;display:grid;place-items:center;padding:26px}
.merge-shell{width:min(100%,520px)}
.merge-top{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:15px}
.merge-board{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:9px;border:1px solid var(--line);border-radius:20px;background:#070907;touch-action:none}
.merge-cell{aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.055);display:grid;place-items:center;font-family:var(--mono);font-size:clamp(1rem,4vw,1.65rem);font-weight:800;background:#101310;transition:transform .12s ease,background .12s ease}
.merge-cell[data-v="0"]{color:transparent}
.merge-cell[data-v="2"]{background:#141912;color:#dce7d7}.merge-cell[data-v="4"]{background:#182016;color:#e7f2df}
.merge-cell[data-v="8"]{background:#202c18;color:#d7ff68}.merge-cell[data-v="16"]{background:#28361c;color:#d7ff68}
.merge-cell[data-v="32"]{background:#314322;color:#e7ff9b}.merge-cell[data-v="64"]{background:#3d5527;color:#f0ffc2}
.merge-cell[data-v="128"]{background:#284348;color:#85e8ff}.merge-cell[data-v="256"]{background:#25515a;color:#bdefff;box-shadow:0 0 24px rgba(133,232,255,.11)}
.merge-cell[data-v="512"],.merge-cell[data-v="1024"],.merge-cell[data-v="2048"]{background:#d7ff68;color:#090b08;box-shadow:0 0 28px rgba(215,255,104,.18)}
.reaction-wrap{min-height:590px;padding:26px;display:grid;place-items:center}
.reaction-core{width:min(100%,720px);min-height:390px;border:1px solid var(--line);border-radius:28px;display:grid;place-items:center;text-align:center;padding:32px;background:radial-gradient(circle at 50% 50%,rgba(215,255,104,.035),transparent 45%),#070907;user-select:none;touch-action:manipulation}
.reaction-core.waiting{background:radial-gradient(circle at 50% 50%,rgba(255,116,109,.05),transparent 45%),#090707}
.reaction-core.ready{background:radial-gradient(circle at 50% 50%,rgba(215,255,104,.16),transparent 48%),#0b1109;border-color:rgba(215,255,104,.35)}
.reaction-core h2{font-size:clamp(2.4rem,7vw,5rem);letter-spacing:-.065em;line-height:.92;margin:14px 0}
.reaction-core p{color:var(--muted);line-height:1.65;max-width:540px;margin:0 auto}
.reaction-result{font-family:var(--mono);font-size:clamp(3rem,10vw,7rem);letter-spacing:-.08em;color:var(--accent);margin:12px 0}
@media(max-width:780px){
  .pong-wrap,.breakout-wrap,.pong-wrap canvas,.breakout-wrap canvas{min-height:500px;height:500px}
  .merge-wrap,.reaction-wrap{min-height:500px;padding:14px}
  .merge-board{gap:6px;padding:6px}.merge-cell{border-radius:10px}
  .reaction-core{min-height:380px;padding:22px}
}

/* Sponsor / partner placement */
.sponsor-card{display:block;border:1px solid rgba(133,232,255,.2);border-radius:var(--radius-lg);padding:28px 30px;background:radial-gradient(circle at 82% 18%,rgba(133,232,255,.09),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.009));position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.sponsor-card::before{content:"";position:absolute;right:-70px;top:-95px;width:250px;height:250px;border:1px solid rgba(133,232,255,.12);border-radius:50%}
.sponsor-card::after{content:"TONIX";position:absolute;right:18px;bottom:-.22em;font-size:clamp(5rem,13vw,11rem);font-weight:900;letter-spacing:-.09em;color:rgba(255,255,255,.018);pointer-events:none}
.sponsor-card:hover{transform:translateY(-5px);border-color:rgba(133,232,255,.4);background:radial-gradient(circle at 82% 18%,rgba(133,232,255,.13),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.sponsor-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;position:relative;z-index:1}
.sponsor-badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;padding:7px 9px;border-radius:99px;background:var(--cyan);color:#061015;font-weight:800}
.sponsor-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;position:relative;z-index:1}
.sponsor-content h2{font-size:clamp(2rem,4.7vw,4.6rem);line-height:.94;letter-spacing:-.062em;margin:0;max-width:900px}
.sponsor-content p{color:var(--muted);line-height:1.65;margin:15px 0 0;max-width:650px}
.sponsor-action{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.sponsor-logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),#b5f4ff);color:#071013;font-size:1.55rem;font-weight:900;box-shadow:0 16px 40px rgba(133,232,255,.12)}
@media(max-width:780px){.sponsor-card{padding:24px}.sponsor-content{grid-template-columns:1fr}.sponsor-action{align-items:flex-start}.sponsor-action .btn{width:100%}.sponsor-logo{display:none}}

/* FINAL PROFESSIONAL LAYER */
.availability-bar{border-block:1px solid rgba(var(--accent-rgb),.18);background:linear-gradient(90deg,rgba(var(--accent-rgb),.045),rgba(133,232,255,.025));padding:13px 0}
.availability-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.075em;text-transform:uppercase}
.availability-status{display:flex;align-items:center;gap:10px}.availability-status i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.08),0 0 20px rgba(var(--accent-rgb),.55);animation:availabilityPulse 1.7s ease-in-out infinite alternate}
.availability-note{color:var(--muted)}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.why-item{min-height:245px;padding:27px;background:rgba(255,255,255,.011);display:flex;flex-direction:column;justify-content:space-between}.why-item+.why-item{border-left:1px solid var(--line)}
.why-item .why-n{font-family:var(--mono);font-size:.62rem;color:var(--accent)}.why-item h3{font-size:1.25rem;line-height:1.05;letter-spacing:-.04em;margin:0 0 10px}.why-item p{font-size:.84rem;color:var(--muted);line-height:1.55;margin:0}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.testimonial{min-height:330px;padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(150deg,rgba(255,255,255,.025),rgba(255,255,255,.008));display:flex;flex-direction:column;justify-content:space-between}
.testimonial-demo{display:inline-flex;width:max-content;font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:#090b08;background:var(--accent);padding:6px 8px;border-radius:99px}.testimonial blockquote{margin:30px 0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.55;letter-spacing:-.02em}.testimonial-person strong{display:block}.testimonial-person span{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
.case-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}.case-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;align-items:stretch}.case-hero-card{min-height:420px}.case-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.case-fact{border:1px solid var(--line);border-radius:18px;padding:21px;background:#090b09}.case-fact span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.case-fact strong{display:block;margin-top:9px;font-size:1.1rem;line-height:1.25}
.case-section{display:grid;grid-template-columns:310px 1fr;gap:55px;padding:74px 0;border-top:1px solid var(--line)}.case-section-label{position:sticky;top:100px;height:max-content}.case-section-label .n{font-family:var(--mono);font-size:.65rem;color:var(--accent)}.case-section-label h2{font-size:1.7rem;letter-spacing:-.045em;margin:12px 0}.case-body{max-width:780px}.case-body p{color:#bdc4ba;line-height:1.78;font-size:1.02rem}.case-body h3{font-size:1.6rem;letter-spacing:-.04em;margin:32px 0 12px}.case-list{display:grid;gap:9px;margin:24px 0}.case-list div{padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.012);color:#c2c8bf}
.arch-diagram{margin:30px 0;border:1px solid var(--line);border-radius:22px;padding:22px;background:#070907;font-family:var(--mono);overflow:auto}.arch-row{display:flex;align-items:center;gap:12px;min-width:590px}.arch-box{flex:1;border:1px solid var(--line-strong);border-radius:13px;padding:16px;text-align:center;background:#0c0f0b}.arch-arrow{color:var(--accent)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.about-panel{min-height:410px}.now-list{display:grid;gap:9px;margin-top:23px}.now-row{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.now-row span:first-child{font-family:var(--mono);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.now-row span:last-child{color:#c5cbc2;line-height:1.5}
.local-analytics{border:1px solid var(--line);border-radius:var(--radius);padding:25px;background:#080a08}.analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.analytics-cell{padding:16px;border:1px solid var(--line);border-radius:13px}.analytics-cell span{display:block;font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase}.analytics-cell strong{display:block;font-size:1.5rem;margin-top:5px}.privacy-note{font-size:.78rem;color:var(--muted);line-height:1.55;margin-top:15px}
.terminal-shell{border:1px solid var(--line-strong);border-radius:24px;background:#030503;box-shadow:var(--shadow);overflow:hidden}.terminal-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;color:var(--muted)}.terminal-lights{display:flex;gap:6px}.terminal-lights i{width:7px;height:7px;border-radius:50%;background:#4b504a}.terminal-screen{min-height:590px;max-height:68vh;overflow:auto;padding:24px;font-family:var(--mono);font-size:.88rem;line-height:1.65}.terminal-line{white-space:pre-wrap;overflow-wrap:anywhere}.terminal-line.muted-line{color:var(--muted)}.terminal-line.accent-line{color:var(--accent)}.terminal-prompt{display:flex;align-items:flex-start;gap:10px;margin-top:8px}.terminal-prompt span{color:var(--accent);padding-top:11px}.terminal-input{flex:1;border:0!important;border-bottom:0!important;padding:10px 0!important;background:transparent!important;font-family:var(--mono)!important;color:var(--text)!important;outline:none!important}.terminal-help{color:var(--cyan)}
.seo-note{padding:14px 16px;border:1px solid var(--line);border-radius:13px;color:var(--muted);font-size:.82rem;line-height:1.55}
@keyframes availabilityPulse{to{opacity:.55;transform:scale(.78)}}
@media(max-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr)}.why-item:nth-child(4){border-left:0;border-top:1px solid var(--line)}.why-item:nth-child(5){border-top:1px solid var(--line)}.analytics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.availability-inner{align-items:flex-start;flex-direction:column}.why-grid,.testimonial-grid,.case-hero-grid,.about-grid{grid-template-columns:1fr}.why-item+.why-item{border-left:0;border-top:1px solid var(--line)}.case-sidebar{grid-template-columns:1fr 1fr}.case-section{grid-template-columns:1fr;gap:22px;padding:54px 0}.case-section-label{position:static}.now-row{grid-template-columns:1fr;gap:5px}.terminal-screen{min-height:520px;max-height:none;padding:17px}.analytics-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.case-sidebar,.analytics-grid{grid-template-columns:1fr}}

/* Wider nav collapse: six primary links stay clean on smaller laptops/tablets. */
@media(max-width:920px){
  .nav-links{display:none}
  .mobile-menu-btn{display:grid}
  .mobile-panel{position:fixed;top:76px;left:14px;right:14px;z-index:100;border:1px solid var(--line-strong);border-radius:17px;background:#0a0c0a;padding:8px;box-shadow:var(--shadow)}
  .mobile-panel.open{display:grid}
  .mobile-panel a{padding:13px;border-radius:10px;color:var(--muted)}
  .mobile-panel a.active,.mobile-panel a:hover{background:#151814;color:var(--text)}
}


/* ===== HANXW CUSTOM SERVICE SELECT ===== */

.hx-select-wrap {
  position: relative;
  width: 100%;
  z-index: 30;
}

.hx-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hx-select {
  position: relative;
  width: 100%;
}

.hx-select-trigger {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 0 20px;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(10,11,11,.88);

  color: #f5f5f1;

  font: inherit;
  text-align: left;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 40px rgba(0,0,0,.18);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    border-color .22s ease,
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.hx-select-trigger:hover {
  border-color: rgba(215,255,104,.35);
  background:
    linear-gradient(180deg, rgba(215,255,104,.06), rgba(255,255,255,.025)),
    rgba(10,11,11,.92);
}

.hx-select.is-open .hx-select-trigger {
  border-color: rgba(215,255,104,.55);

  box-shadow:
    0 0 0 4px rgba(215,255,104,.055),
    0 20px 60px rgba(0,0,0,.28);
}

.hx-select-current {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.hx-select-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: rgba(215,255,104,.09);
  border: 1px solid rgba(215,255,104,.13);

  color: #d7ff68;
}

.hx-select-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hx-select-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.01em;
}

.hx-select-subtitle {
  font-size: 12px;
  color: rgba(245,245,241,.48);
}

.hx-select-arrow {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 10px;
  color: rgba(245,245,241,.58);

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    color .22s ease;
}

.hx-select.is-open .hx-select-arrow {
  transform: rotate(180deg);
  color: #d7ff68;
}

.hx-select-menu {
  position: absolute;

  left: 0;
  right: 0;
  top: calc(100% + 10px);

  padding: 8px;

  border: 1px solid rgba(255,255,255,.105);
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(20,22,21,.98), rgba(8,9,9,.98));

  box-shadow:
    0 30px 90px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px) scale(.985);
  transform-origin: top;

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .28s cubic-bezier(.22,1,.36,1);

  overflow: hidden;
}

.hx-select.is-open .hx-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.hx-select-option {
  position: relative;

  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 13px;

  border: 0;
  border-radius: 13px;

  background: transparent;
  color: #f5f5f1;

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background .18s ease,
    transform .18s ease;
}

.hx-select-option:hover {
  background: rgba(255,255,255,.055);
}

.hx-select-option:active {
  transform: scale(.992);
}

.hx-select-option.is-selected {
  background:
    linear-gradient(90deg, rgba(215,255,104,.11), rgba(215,255,104,.025));
}

.hx-select-option-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: rgba(245,245,241,.75);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.065);

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.hx-select-option:hover .hx-select-option-icon,
.hx-select-option.is-selected .hx-select-option-icon {
  color: #d7ff68;
  background: rgba(215,255,104,.08);
  border-color: rgba(215,255,104,.15);
}

.hx-select-option-copy {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hx-select-option-copy strong {
  font-size: 14px;
  font-weight: 650;
}

.hx-select-option-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(245,245,241,.45);
}

.hx-select-check {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  color: #d7ff68;

  opacity: 0;
  transform: scale(.7);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.hx-select-option.is-selected .hx-select-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 700px) {
  .hx-select-trigger {
    min-height: 60px;
    padding: 0 15px;
    border-radius: 14px;
  }

  .hx-select-menu {
    border-radius: 15px;
  }

  .hx-select-option {
    padding: 12px;
  }
}


/* ===== HANXW SELECT MOBILE FINAL FIX ===== */

/* Полностью убираем системный select */
select.hx-native-select {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Базовые цвета под сайт */
.hx-select-trigger {
  background:
    linear-gradient(180deg, rgba(215,255,104,.035), rgba(255,255,255,.015)),
    #090a0a !important;

  border: 1px solid rgba(215,255,104,.14) !important;
  color: #f4f5ef !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 40px rgba(0,0,0,.26) !important;
}

.hx-select-trigger:hover {
  background:
    linear-gradient(180deg, rgba(215,255,104,.065), rgba(255,255,255,.02)),
    #0b0c0c !important;

  border-color: rgba(215,255,104,.32) !important;
}

.hx-select.is-open .hx-select-trigger {
  border-color: rgba(215,255,104,.55) !important;

  box-shadow:
    0 0 0 3px rgba(215,255,104,.045),
    0 18px 55px rgba(0,0,0,.4) !important;
}

.hx-select-icon {
  background: rgba(215,255,104,.075) !important;
  border-color: rgba(215,255,104,.14) !important;
  color: #d7ff68 !important;
}

.hx-select-menu {
  background:
    radial-gradient(
      circle at top right,
      rgba(215,255,104,.055),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(17,19,18,.99),
      rgba(6,7,7,.99)
    ) !important;

  border: 1px solid rgba(215,255,104,.13) !important;

  box-shadow:
    0 32px 100px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.hx-select-option {
  color: #f4f5ef !important;
}

.hx-select-option:hover {
  background: rgba(215,255,104,.055) !important;
}

.hx-select-option.is-selected {
  background:
    linear-gradient(
      90deg,
      rgba(215,255,104,.12),
      rgba(215,255,104,.025)
    ) !important;
}

.hx-select-option-icon {
  color: rgba(244,245,239,.65) !important;
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.07) !important;
}

.hx-select-option.is-selected .hx-select-option-icon {
  color: #d7ff68 !important;
  background: rgba(215,255,104,.08) !important;
  border-color: rgba(215,255,104,.16) !important;
}

.hx-select-title,
.hx-select-option-copy strong {
  color: #f4f5ef !important;
}

.hx-select-subtitle,
.hx-select-option-copy span {
  color: rgba(244,245,239,.48) !important;
}


/* ===== MOBILE BOTTOM SHEET ===== */

@media (max-width: 700px) {

  .hx-select-wrap {
    z-index: 9990 !important;
  }

  .hx-select-trigger {
    min-height: 66px !important;
    padding: 0 16px !important;
    border-radius: 17px !important;

    background:
      radial-gradient(
        circle at 10% 0%,
        rgba(215,255,104,.06),
        transparent 45%
      ),
      #090a0a !important;
  }

  .hx-select-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .hx-select-title {
    font-size: 15px !important;
  }

  .hx-select-subtitle {
    font-size: 11px !important;
    margin-top: 2px;
  }

  /*
    На телефоне меню превращается
    в нормальный фирменный bottom-sheet
  */
  .hx-select-menu {
    position: fixed !important;

    left: 10px !important;
    right: 10px !important;

    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;

    width: auto !important;

    padding: 10px !important;

    border-radius: 24px !important;

    z-index: 100001 !important;

    background:
      radial-gradient(
        circle at 85% 0%,
        rgba(215,255,104,.075),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        rgba(18,20,19,.995),
        rgba(6,7,7,.995)
      ) !important;

    border:
      1px solid rgba(215,255,104,.15) !important;

    box-shadow:
      0 -10px 80px rgba(0,0,0,.78),
      0 30px 100px rgba(0,0,0,.8),
      inset 0 1px 0 rgba(255,255,255,.05) !important;

    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;

    transform:
      translateY(calc(100% + 30px))
      scale(.98) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition:
      transform .38s cubic-bezier(.16,1,.3,1),
      opacity .22s ease,
      visibility .22s ease !important;
  }

  .hx-select.is-open .hx-select-menu {
    transform:
      translateY(0)
      scale(1) !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .hx-select-menu::before {
    content: "";

    display: block;

    width: 42px;
    height: 4px;

    margin:
      2px auto
      10px;

    border-radius: 999px;

    background: rgba(244,245,239,.18);
  }

  .hx-select-option {
    min-height: 72px !important;

    padding: 12px 13px !important;

    border-radius: 16px !important;
  }

  .hx-select-option + .hx-select-option {
    margin-top: 4px;
  }

  .hx-select-option-icon {
    width: 44px !important;
    height: 44px !important;

    border-radius: 13px !important;
  }

  .hx-select-option-copy strong {
    font-size: 15px !important;
  }

  .hx-select-option-copy span {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .hx-select-check {
    width: 28px !important;
    height: 28px !important;

    border-radius: 50%;

    background: rgba(215,255,104,.08);
  }
}


/* Совсем маленькие телефоны */
@media (max-width: 380px) {

  .hx-select-menu {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;

    border-radius: 20px !important;
  }

  .hx-select-trigger {
    min-height: 62px !important;
  }

  .hx-select-option {
    min-height: 66px !important;
  }

}



/* ===== HANXW GLOBAL SELECT UI V3 ===== */

select.hx-native-select,
select[data-hx-custom-select="true"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
}

.hx-select-wrap {
    position: relative;
    width: 100%;
}

.hx-select {
    position: relative;
    width: 100%;
}

.hx-select.is-open {
    z-index: 10020;
}

/* trigger */

.hx-select-trigger {
    width: 100%;
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 15px !important;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(215,255,104,.045),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        ),
        #090a0a !important;

    color: #f4f5ef !important;

    font: inherit;
    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 35px rgba(0,0,0,.18);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.hx-select-trigger:hover {
    border-color: rgba(215,255,104,.25) !important;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(215,255,104,.065),
            transparent 40%
        ),
        #0b0c0c !important;
}

.hx-select-trigger:focus-visible {
    outline: none;

    border-color: rgba(215,255,104,.55) !important;

    box-shadow:
        0 0 0 4px rgba(215,255,104,.055),
        0 18px 45px rgba(0,0,0,.3);
}

.hx-select.is-open .hx-select-trigger {
    border-color: rgba(215,255,104,.48) !important;

    box-shadow:
        0 0 0 3px rgba(215,255,104,.045),
        0 18px 55px rgba(0,0,0,.42);
}

.hx-select-current {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.hx-select-current-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #d7ff68;

    background: rgba(215,255,104,.07);
    border: 1px solid rgba(215,255,104,.12);
}

.hx-select-current-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hx-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #f4f5ef;

    font-size: 14px;
    line-height: 1.25;
    font-weight: 620;
}

.hx-select-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(244,245,239,.42);

    font-size: 11px;
    line-height: 1.3;
}

.hx-select-arrow {
    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: rgba(244,245,239,.48);

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        color .2s ease,
        background .2s ease;
}

.hx-select.is-open .hx-select-arrow {
    transform: rotate(180deg);
    color: #d7ff68;
    background: rgba(215,255,104,.055);
}

/* dropdown */

.hx-select-menu {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 9px);

    max-height: min(360px, 48vh);

    overflow-x: hidden;
    overflow-y: auto;

    padding: 7px;

    border-radius: 17px;

    border: 1px solid rgba(215,255,104,.11) !important;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(215,255,104,.055),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(17,19,18,.99),
            rgba(6,7,7,.995)
        ) !important;

    box-shadow:
        0 28px 90px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-7px)
        scale(.985);

    transform-origin: top;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .26s cubic-bezier(.16,1,.3,1);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(215,255,104,.25)
        transparent;
}

.hx-select-menu::-webkit-scrollbar {
    width: 5px;
}

.hx-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.hx-select-menu::-webkit-scrollbar-thumb {
    background: rgba(215,255,104,.22);
    border-radius: 999px;
}

.hx-select.is-open .hx-select-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

/* option */

.hx-select-option {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 11px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #f4f5ef;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background .17s ease,
        transform .17s ease;
}

.hx-select-option:hover,
.hx-select-option:focus-visible {
    outline: none;
    background: rgba(255,255,255,.045);
}

.hx-select-option:active {
    transform: scale(.992);
}

.hx-select-option.is-selected {
    background:
        linear-gradient(
            90deg,
            rgba(215,255,104,.105),
            rgba(215,255,104,.018)
        );
}

.hx-select-option:disabled {
    opacity: .34;
    pointer-events: none;
}

.hx-select-option-dot {
    width: 35px;
    height: 35px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: rgba(244,245,239,.55);

    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.055);

    transition:
        color .17s ease,
        background .17s ease,
        border-color .17s ease;
}

.hx-select-option:hover .hx-select-option-dot,
.hx-select-option.is-selected .hx-select-option-dot {
    color: #d7ff68;

    background: rgba(215,255,104,.065);
    border-color: rgba(215,255,104,.13);
}

.hx-select-option-name {
    min-width: 0;
    flex: 1;

    overflow: hidden;
    text-overflow: ellipsis;

    color: #f4f5ef;

    font-size: 13px;
    font-weight: 580;
}

.hx-select-check {
    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 999px;

    color: #d7ff68;

    background: rgba(215,255,104,.065);

    opacity: 0;
    transform: scale(.7);

    transition:
        opacity .17s ease,
        transform .17s ease;
}

.hx-select-option.is-selected .hx-select-check {
    opacity: 1;
    transform: scale(1);
}


/* backdrop */

.hx-select-backdrop {
    display: none;
}


/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 700px) {

    body.hx-select-lock {
        overflow: hidden !important;
        touch-action: none;
    }

    .hx-select-trigger {
        min-height: 64px;

        padding:
            0
            15px;

        border-radius: 16px !important;
    }

    .hx-select-current-icon {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .hx-select-value {
        font-size: 14px;
    }

    .hx-select-hint {
        font-size: 10px;
    }

    .hx-select-backdrop {
        position: fixed;

        inset: 0;

        z-index: 99990;

        display: block;

        background:
            rgba(0,0,0,.56);

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }

    .hx-select.is-open + .hx-select-backdrop,
    .hx-select-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .hx-select-menu {
        position: fixed !important;

        z-index: 100000 !important;

        left: 10px !important;
        right: 10px !important;

        top: auto !important;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            ) !important;

        width: auto !important;

        max-height:
            min(
                72vh,
                520px
            ) !important;

        padding:
            8px
            8px
            10px !important;

        border-radius: 23px !important;

        background:
            radial-gradient(
                circle at 85% 0%,
                rgba(215,255,104,.07),
                transparent 36%
            ),
            linear-gradient(
                180deg,
                #111312 0%,
                #070808 100%
            ) !important;

        border:
            1px solid
            rgba(215,255,104,.13) !important;

        box-shadow:
            0 -20px 80px rgba(0,0,0,.54),
            0 40px 120px rgba(0,0,0,.85),
            inset 0 1px 0 rgba(255,255,255,.045);

        transform:
            translateY(calc(100% + 35px))
            scale(.985) !important;

        transform-origin: bottom center;
    }

    .hx-select.is-open .hx-select-menu {
        transform:
            translateY(0)
            scale(1) !important;
    }

    .hx-select-menu::before {
        content: "";

        display: block;

        width: 41px;
        height: 4px;

        margin:
            3px auto
            10px;

        border-radius: 999px;

        background:
            rgba(244,245,239,.17);
    }

    .hx-select-option {
        min-height: 64px;

        padding:
            11px
            12px;

        border-radius: 15px;
    }

    .hx-select-option + .hx-select-option {
        margin-top: 3px;
    }

    .hx-select-option-dot {
        width: 41px;
        height: 41px;
        border-radius: 12px;
    }

    .hx-select-option-name {
        font-size: 14px;
    }

    .hx-select-check {
        width: 27px;
        height: 27px;
    }

}


/* tiny phones */

@media (max-width: 380px) {

    .hx-select-menu {
        left: 6px !important;
        right: 6px !important;

        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            ) !important;

        border-radius: 20px !important;
    }

    .hx-select-trigger {
        min-height: 60px;
    }

    .hx-select-option {
        min-height: 59px;
    }

}


/* ===== MOBILE SELECT STACKING FIX ===== */

@media (max-width: 700px) {

  /* открытый select должен быть ВЫШЕ backdrop */
  .hx-select-wrap {
    position: relative !important;
    z-index: auto !important;
  }

  .hx-select {
    position: relative !important;
    z-index: 1 !important;
  }

  .hx-select.is-open {
    z-index: 100010 !important;
  }

  /* затемнение ниже меню */
  .hx-select-backdrop {
    z-index: 100000 !important;
  }

  /* само меню всегда сверху */
  .hx-select-menu {
    z-index: 100020 !important;
    pointer-events: auto !important;
  }

  .hx-select-option {
    position: relative !important;
    z-index: 100021 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .hx-select-trigger {
    position: relative !important;
    z-index: 100021 !important;
  }

  /* блокируем только скролл страницы,
     но НЕ touch-события элементов */
  body.hx-select-lock {
    overflow: hidden !important;
    touch-action: auto !important;
  }

}

