/* Hangar Çeviri v3 — kurumsal, tek vurgu renkli sunum katmanı.
   styles.css'in üzerine yüklenir. Ana sayfa tamamen bu dosyadan beslenir;
   diğer sayfalar ortak header/footer ve renk token'larını alır. */

:root {
  --hx-bg: #101014;
  --hx-bg-2: #18181c;
  --hx-bg-deep: #060608; /* darker scene sections (services, story) */
  --hx-surface: #202024;
  --hx-surface-2: #2a2a2f;
  --hx-surface-3: #343439;
  --hx-line: #ffffff14;
  --hx-line-2: #ffffff29;
  --hx-text: #ffffff;
  --hx-soft: #ffffffd9;
  --hx-muted: #ffffffa6;
  --hx-dim: #ffffff73;
  --hx-accent: #26bbff;
  --hx-accent-hover: #61cdff;
  --hx-accent-ink: #101014;
  --hx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-ease: cubic-bezier(.22, 1, .36, 1);
  --hx-gutter: clamp(16px, 4vw, 56px);
  --hx-max: 1440px;
  --hx-radius: 12px;
  --hx-radius-sm: 8px;
  --hx-header-h: 72px;
  /* legacy tokens so older templates follow the same palette */
  --bg-primary: var(--hx-bg);
  --bg-secondary: var(--hx-bg-2);
  --surface-1: var(--hx-surface);
  --surface-2: var(--hx-surface-2);
  --brand: var(--hx-accent);
  --brand-hover: var(--hx-accent-hover);
  --brand-deep: #0e8fd0;
  --font-body: var(--hx-font);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body.v3 { background: var(--hx-bg); color: var(--hx-text); font-family: var(--hx-font); font-weight: 400; overflow-x: clip; }
body.v3 ::selection { background: #26bbff55; color: #fff; }
.v3 h1, .v3 h2, .v3 h3 { letter-spacing: -.02em; }
.v3.cover-collection { --bg-primary: var(--hx-bg); --header-height: var(--hx-header-h); }

.hx-container { width: min(var(--hx-max), calc(100% - var(--hx-gutter) * 2)); margin-inline: auto; }
.hx-section { padding-block: clamp(36px, 5vw, 64px); }
.hx-h2 { font: 700 clamp(20px, 1.7vw, 24px)/1.25 var(--hx-font); letter-spacing: -.01em; }
.hx-h2 a { display: inline-flex; align-items: center; gap: 10px; }
.hx-h2 a i { font-size: .6em; transition: transform .35s var(--hx-ease); }
.hx-h2 a:hover i { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 10px; font: 600 14px/1 var(--hx-font); letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, transform .2s; }
.hx-btn:active { transform: scale(.98); }
.hx-btn-primary { background: var(--hx-accent); color: var(--hx-accent-ink); }
.hx-btn-primary:hover { background: var(--hx-accent-hover); }
.hx-btn-secondary { background: #ffffff1f; color: var(--hx-text); }
.hx-btn-secondary:hover { background: #ffffff33; }
.hx-btn-light { background: #ffffff; color: var(--hx-bg); }
.hx-btn-light:hover { background: #e4e4e8; }
.hx-btn .fa-arrow-right { font-size: 13px; transition: transform .3s var(--hx-ease); }
.hx-btn:hover .fa-arrow-right { transform: translateX(3px); }
.hx-btn-sm { min-height: 38px; padding: 0 16px; font-size: 13px; border-radius: 8px; }
.hx-btn-lg { min-height: 56px; padding: 0 30px; font-size: 15px; }
.hx-btn-lg .fa-windows { font-size: 18px; }
.hx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--hx-text); }
.hx-link i { font-size: 12px; transition: transform .3s var(--hx-ease); }
.hx-link:hover { color: var(--hx-accent); }
.hx-link:hover i { transform: translateX(3px); }
.hx-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: #ffffff1a; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--hx-soft); }

/* ---------- Header ---------- */
.hx-header { position: sticky; top: 0; z-index: 60; background: var(--hx-bg); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.hx-header.is-scrolled { background: #101014fa; border-color: var(--hx-line); }
.hx-header-inner { display: flex; align-items: center; gap: 20px; height: var(--hx-header-h); }
.hx-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.hx-brand img { border-radius: 8px; }
.hx-brand-word { font: 800 19px/1 var(--hx-font); letter-spacing: -.04em; }
.hx-brand-word span { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .38em; color: var(--hx-dim); }
.hx-search { display: flex; align-items: center; gap: 10px; width: 240px; height: 40px; margin-left: 12px; padding: 0 12px 0 16px; border: 0; border-radius: 999px; background: var(--hx-surface); color: var(--hx-muted); font: 500 14px/1 var(--hx-font); text-align: left; transition: background-color .2s; }
.hx-search span { flex: 1; }
.hx-search:hover { background: var(--hx-surface-2); color: var(--hx-soft); }
.hx-search kbd { border-color: var(--hx-line-2); color: var(--hx-dim); }
.hx-nav { display: flex; gap: 4px; margin-right: auto; }
.hx-nav a { position: relative; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--hx-muted); transition: color .2s; }
.hx-nav a:hover { color: var(--hx-text); }
.hx-nav a[aria-current] { color: var(--hx-text); }
.hx-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--hx-text); transform: scaleX(0); transition: transform .3s var(--hx-ease); }
.hx-nav a:hover::after, .hx-nav a[aria-current]::after { transform: scaleX(1); }
.hx-nav a:not([aria-current])::after { background: var(--hx-dim); }
.hx-actions { display: flex; align-items: center; gap: 8px; }
.hx-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--hx-muted); font-size: 18px; transition: background-color .2s, color .2s; }
.hx-icon:hover { background: var(--hx-surface); color: var(--hx-text); }
.hx-menu-toggle { display: none; }

/* Dialogs */
.v3 dialog { background: var(--hx-bg-2); border-color: var(--hx-line); }
.v3 dialog::backdrop { background: #000000b3; backdrop-filter: blur(4px); }
.v3 dialog[open] { animation: hx-dialog-in .35s var(--hx-ease); }
.v3 .menu-dialog[open] { animation: hx-drawer-in .4s var(--hx-ease); }
.v3 .search-dialog { border-radius: 16px; }
.v3 .search-field { border-radius: 10px; background: var(--hx-surface); border-color: transparent; }
.v3 .search-field:focus-within { border-color: var(--hx-accent); }
.v3 .dialog-heading h2 { font-weight: 700; font-size: 20px; }
.v3 .menu-dialog nav a { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.v3 .menu-dialog nav a span { color: var(--hx-dim); font-size: 22px; }
.v3 .menu-dialog .button { border-radius: 10px; }
.v3 .search-result { border-radius: 10px; }
.v3 .search-result:hover, .v3 .search-result:focus-visible { background: var(--hx-surface); }
@keyframes hx-dialog-in { from { opacity: 0; transform: translateY(12px); } }
/* "Coming soon" dialog for the Windows client (header button and the laptop section CTA). */
.v3 .hx-client-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 22px; background: var(--hx-bg-2); box-shadow: 0 0 0 1px #ffffff14, 0 40px 120px #000000b3; }
.hx-client-dialog-close { position: absolute; z-index: 2; right: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #0b0b0ecc; color: var(--hx-text); font-size: 15px; cursor: pointer; transition: background-color .2s; }
.hx-client-dialog-close:hover { background: #2a2a30; }
.hx-client-dialog-art { position: relative; height: 210px; overflow: hidden; background: radial-gradient(70% 95% at 50% 100%, #26bbff33, #26bbff00 70%), #0b0b0e; }
.hx-client-dialog-window { position: absolute; left: 50%; top: 34px; width: 76%; overflow: hidden; border-radius: 12px 12px 0 0; background: #101014; box-shadow: 0 0 0 1px #ffffff1f, 0 -18px 60px #00000099; transform: translateX(-50%); }
.hx-client-dialog-bar { display: flex; gap: 6px; padding: 9px 12px; background: #1c1c21; }
.hx-client-dialog-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff29; }
.hx-client-dialog-window img { display: block; width: 100%; height: auto; }
.hx-client-dialog-logo { position: absolute; left: 24px; bottom: 20px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--hx-accent); color: #0b0b0e; font-size: 24px; box-shadow: 0 14px 34px #26bbff4d, inset 0 1px 0 #ffffff66; }
.hx-client-dialog[open] .hx-client-dialog-window { animation: hx-window-up .9s var(--hx-ease) .08s both; }
.hx-client-dialog[open] .hx-client-dialog-logo { animation: hx-pop-in .7s var(--hx-ease) .3s both; }
@keyframes hx-window-up { from { opacity: 0; transform: translate(-50%, 40px); } }
@keyframes hx-pop-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
.hx-client-dialog-body { padding: 26px 30px 30px; }
.hx-client-dialog-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: #26bbff1f; color: var(--hx-accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.hx-client-dialog-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: hx-blink 1.8s ease-in-out infinite; }
.hx-client-dialog h2 { margin-top: 14px; font: 800 clamp(24px, 3.2vw, 30px)/1.12 var(--hx-font); letter-spacing: -.03em; }
.hx-client-dialog-body > p:not(.hx-client-dialog-badge) { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--hx-muted); }
.hx-client-dialog-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.hx-client-dialog-list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #ffffff0a; font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-client-dialog-list i { color: var(--hx-accent); }
.hx-client-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 520px) {
  .hx-client-dialog-art { height: 170px; }
  .hx-client-dialog-body { padding: 22px 20px; }
  .hx-client-dialog-actions .hx-btn { flex: 1 1 100%; }
}
@keyframes hx-drawer-in { from { transform: translateX(100%); } }
.v3 .scroll-top-btn { border-radius: 10px; width: 44px; height: 44px; background: var(--hx-surface); border-color: var(--hx-line); }
.v3 .scroll-top-btn:hover { background: var(--hx-surface-2); }
.v3 :focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 3px; }

/* ---------- First screen: showcase slider + featured row fit one viewport ---------- */
.hx-mono { margin-bottom: 14px; font: 600 12px/1.4 ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace; letter-spacing: .14em; color: var(--hx-dim); }
:root { --hx-row-h: 388px; }
.hx-show { position: relative; z-index: 0; }
.hx-show-stage { position: relative; height: clamp(310px, calc(100svh - var(--hx-header-h) - var(--hx-row-h)), 620px); overflow: hidden; background: #0b0b0e; will-change: transform; }
.hx-show-stage::after { content: ""; position: absolute; inset: 0; z-index: 8; background: #101014; pointer-events: none; animation: hx-curtain 1s cubic-bezier(.4, 0, .2, 1) .05s forwards; }
@keyframes hx-curtain { to { opacity: 0; visibility: hidden; } }
.hx-show-dim { position: absolute; inset: 0; z-index: 7; background: #101014; opacity: 0; pointer-events: none; will-change: opacity; }
.hx-show-slide { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1), visibility 0s 1.1s; }
.hx-show-slide.is-active { z-index: 3; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1), visibility 0s; }
.hx-show-slide.is-leaving { z-index: 2; visibility: visible; clip-path: inset(0 0 0 0); transition: none; }
.hx-show-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, #0b0b0e 0%, #0b0b0ecc 22%, #0b0b0e00 62%), linear-gradient(90deg, #0b0b0ee6 0%, #0b0b0e80 36%, #0b0b0e00 68%); }
.hx-show-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.14); transition: transform 8s cubic-bezier(.2, .6, .3, 1); will-change: transform; }
.hx-show-slide.is-active .hx-show-bg { transform: scale(1.02); }
.hx-show-content { position: relative; z-index: 2; padding-bottom: clamp(56px, 8vh, 84px); }
.hx-show-content > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--hx-ease), transform .9s var(--hx-ease); }
.hx-show-slide.is-active .hx-show-content > * { opacity: 1; transform: none; transition-delay: .35s; }
.hx-show-slide.is-active .hx-show-content > :nth-child(2) { transition-delay: .43s; }
.hx-show-slide.is-active .hx-show-content > :nth-child(3) { transition-delay: .51s; }
.hx-show-slide.is-active .hx-show-content > :nth-child(4) { transition-delay: .59s; }
.js .hx-show:not(.is-ready) .hx-show-content > * { opacity: 0; transform: translateY(26px); }
.hx-show-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-show-tag span { padding: 4px 8px; border-radius: 4px; background: var(--hx-text); color: var(--hx-bg); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hx-show-name { max-width: 760px; margin-bottom: 12px; font: 800 clamp(28px, 3.5vw, 54px)/1.02 var(--hx-font); letter-spacing: -.045em; text-wrap: balance; }
.hx-show-desc { max-width: 500px; margin-bottom: 20px; font-size: 15px; line-height: 1.55; color: var(--hx-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-show-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.hx-show-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hx-muted); }
.hx-show-status i { width: 7px; height: 7px; border-radius: 50%; background: #62f2a6; box-shadow: 0 0 0 4px #62f2a61f; }
.hx-show-rail-wrap { position: absolute; left: 0; right: 0; bottom: clamp(56px, 8vh, 84px); z-index: 5; display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; pointer-events: none; }
.hx-show-rail-wrap > * { pointer-events: auto; }
.hx-show-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.hx-show-count { margin-right: 6px; font: 600 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; color: var(--hx-muted); }
.hx-show-count b { color: var(--hx-text); font-weight: 600; }
.hx-show .hx-arrow { width: 38px; height: 38px; background: #ffffff1f; }
.hx-show .hx-arrow:hover { background: #ffffff38; }
.hx-show-rail { display: flex; align-items: flex-end; gap: 10px; }
.hx-rail-item { position: relative; width: 58px; padding: 0; border: 0; background: none; opacity: .5; transition: opacity .3s, transform .6s var(--hx-ease); }
.hx-rail-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 30px #000000b3; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .3s; }
.hx-rail-item:hover { opacity: .9; transform: translateY(-4px); }
.hx-rail-item.is-active { opacity: 1; transform: translateY(-10px); }
.hx-rail-item.is-active img { outline-color: #ffffffd9; }
.hx-rail-bar { display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #ffffff26; }
.hx-rail-bar i { display: block; height: 100%; background: var(--hx-accent); transform-origin: left; transform: scaleX(0); }
.hx-rail-item.is-active.is-timing .hx-rail-bar i { animation: hx-fill var(--hx-slide-ms, 7000ms) linear forwards; }
.hx-rail-item.is-active:not(.is-timing) .hx-rail-bar i { transform: scaleX(1); }
.hx-show[data-paused] .hx-rail-bar i { animation-play-state: paused !important; }
@keyframes hx-fill { to { transform: scaleX(1); } }
/* The featured row is a sheet that overlaps the slider and slides over it while scrolling. */
.hx-row-section { position: relative; z-index: 2; margin-top: -24px; padding-top: 26px; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, var(--hx-bg) calc(100% - 140px), #10101400 100%); box-shadow: 0 -30px 60px #00000080; }
.hx-row-section .hx-row { grid-auto-columns: calc((100% - 7 * 16px) / 8); gap: 16px; }

/* ---------- Rows & cards ---------- */
.hx-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hx-row-arrows { display: flex; gap: 8px; }
.hx-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--hx-surface); color: var(--hx-text); font-size: 12px; transition: background-color .2s; }
.hx-arrow:hover:not(:disabled) { background: var(--hx-surface-2); }
.hx-arrow:disabled { opacity: .35; }
.hx-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 20px) / 6); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hx-row::-webkit-scrollbar { display: none; }
.hx-card { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.hx-card-art { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 12px; border-radius: var(--hx-radius-sm); background: var(--hx-surface); }
.hx-card-art::after { content: ""; position: absolute; inset: 0; background: #ffffff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hx-card:hover .hx-card-art::after, .hx-card:focus-visible .hx-card-art::after { opacity: .1; }
.hx-card-type { font-size: 12px; font-weight: 500; color: var(--hx-muted); margin-bottom: 4px; }
.hx-card-title { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.hx-card-status { font-size: 13px; color: var(--hx-muted); }

/* uiPoster() markup */
.hx-card-art .poster-image { width: 100%; height: 100%; object-fit: cover; }
.hx-card-art .poster-adapted { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.poster-adapted-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(12px) brightness(.6); }
.hx-card-art .poster-adapted .poster-image { position: relative; object-fit: contain; }
.hx-card-art .poster-fallback { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: var(--hx-bg-2); }
.poster-fallback .poster-ambient { position: absolute; inset: -15%; width: 130%; max-width: none; height: 130%; object-fit: cover; filter: blur(22px) brightness(.35); }
.poster-fallback .poster-original { position: relative; width: 100%; height: auto; max-height: 62%; object-fit: contain; }
.hx-card-art .poster-fallback-title { display: none; }

/* ---------- Services (3D objects) ---------- */
/* Full-screen scene revealed from inside a glowing wave (clip-path by v3.js, edge glow by v3-3d.js). */
.hx-services { position: relative; z-index: 1; min-height: calc(100svh - var(--hx-header-h)); display: flex; }
.hx-services-body { position: relative; display: flex; align-items: center; width: 100%; min-height: inherit; padding-block: clamp(32px, 5vh, 64px); }
/* Page rhythm: dark scene (services) -> normal panel (ongoing) -> dark scene (story) -> normal. */
.hx-dark-bg { background-color: var(--hx-bg-deep); }
.hx-services-body { background-image: linear-gradient(180deg, var(--hx-bg) 0, var(--hx-bg-deep) 120px); }
.hx-services-body > .hx-container { width: min(var(--hx-max), calc(100% - var(--hx-gutter) * 2)); }
/* Only as tall as the reveal needs (the story section is several screens tall). */
.hx-wave-fx { position: absolute; left: 0; top: -180px; z-index: 3; display: block; width: 100%; height: min(calc(100% + 180px), calc(100vh + 320px)); pointer-events: none; visibility: hidden; }
.hx-wave-fx.is-on { visibility: visible; }
.hx-services-title { font: 800 clamp(30px, 3.9vw, 60px)/1.04 var(--hx-font); letter-spacing: -.05em; }
.hx-services-title b { color: var(--hx-accent); }
.hx-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.hx-mask > span { display: inline-block; will-change: transform; }
.hx-services-sub { max-width: 560px; margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--hx-muted); }
.hx-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 52px); }
.hx-service { position: relative; isolation: isolate; display: block; height: clamp(300px, min(29vw, calc(100svh - 340px)), 480px); overflow: hidden; border-radius: 18px; background: radial-gradient(75% 55% at 50% 45%, #17171d 0%, #0a0a0c 72%); box-shadow: inset 0 0 0 1px #ffffff12, 0 30px 70px #00000073; transition: box-shadow .4s; }
.hx-service:hover, .hx-service:focus-visible { box-shadow: inset 0 0 0 1px #ffffff2e, 0 30px 70px #00000073; }
.hx-service-canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }
.hx-service-text { position: absolute; left: 26px; right: 80px; bottom: 24px; display: grid; gap: 6px; }
.hx-service-text strong { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.035em; }
.hx-service-text small { font-size: 13px; color: var(--hx-muted); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--hx-ease); }
.hx-service:hover small, .hx-service:focus-visible small { opacity: 1; transform: none; }
.hx-service-go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ffffff14; font-size: 14px; transition: background-color .3s, color .3s, transform .45s var(--hx-ease); }
.hx-service:hover .hx-service-go { background: var(--hx-accent); color: var(--hx-bg); transform: rotate(-45deg); }

/* ---------- Ongoing work (poster cards, same language as the rows) ---------- */
/* A normal-coloured panel between the two dark scenes, overlapping both with rounded corners. */
.hx-work-section { position: relative; z-index: 2; margin-block: -28px; padding-block: clamp(56px, 6vw, 88px); border-radius: 28px; background: var(--hx-bg); box-shadow: 0 0 0 1px #ffffff0a, 0 30px 80px #00000099; }
/* Gold collectibles (Three.js, v3-3d.js) floating at the page edges around the panel corners; v3.js slides them in with scroll. */
.hx-work-section { overflow-x: clip; }
.hx-toys { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hx-toy { position: absolute; width: var(--s); height: var(--s); }
.hx-toy canvas { display: block; width: 100%; height: 100%; }
/* Top pair flanks the centred heading at the page edges; bottom pair sits on the panel's lower corners. */
.hx-toy--trophy { --s: clamp(150px, 13vw, 220px); left: -1%; top: clamp(8px, 1.6vw, 26px); }
.hx-toy--key { --s: clamp(140px, 12vw, 200px); right: -.5%; top: clamp(12px, 2vw, 32px); }
.hx-toy--coin { --s: clamp(100px, 8vw, 130px); left: 2.5%; bottom: calc(var(--s) * -.5); }
.hx-toy--gem { --s: clamp(90px, 7vw, 120px); right: 3%; bottom: calc(var(--s) * -.48); }
.hx-work-head { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(22px, 2.4vw, 30px); text-align: center; }
.hx-work-heading { font: 800 clamp(28px, 3vw, 44px)/1.08 var(--hx-font); letter-spacing: -.035em; }
.hx-work-lead { max-width: 560px; margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--hx-muted); }
.hx-work-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.hx-work-summary > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff12; font-size: 13px; color: var(--hx-muted); }
.hx-work-summary strong { font-size: 15px; font-weight: 800; color: var(--hx-text); font-variant-numeric: tabular-nums; }
.hx-work-summary .hx-link { margin-left: 8px; }

/* Board: spotlight of the selected project + selectable list. Hidden-before-animation states are
   scoped to .js so everything stays visible without scripts. */
.hx-work-board { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; }
.js .hx-work-board .hx-work-stage { opacity: .001; transform: translateY(40px) scale(.98); transition: opacity .9s var(--hx-ease), transform 1.2s var(--hx-ease); }
.js .hx-work-board .hx-work-tab { opacity: .001; transform: translateX(28px); transition: opacity .7s var(--hx-ease) calc(.25s + var(--n, 0) * .08s), transform .9s var(--hx-ease) calc(.25s + var(--n, 0) * .08s), background-color .3s; }
.js .hx-work-board.is-in .hx-work-stage, .js .hx-work-board.is-in .hx-work-tab { opacity: 1; transform: none; }
.hx-work-tab:nth-child(2) { --n: 1; } .hx-work-tab:nth-child(3) { --n: 2; } .hx-work-tab:nth-child(4) { --n: 3; } .hx-work-tab:nth-child(5) { --n: 4; } .hx-work-tab:nth-child(6) { --n: 5; }

.hx-work-stage { position: relative; isolation: isolate; min-height: clamp(420px, min(31vw, calc(100svh - 300px)), 520px); overflow: hidden; border-radius: 20px; background: #0b0b0e; box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-work-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 2.4vw, 34px); opacity: 0; transition: opacity .8s var(--hx-ease); }
.hx-work-panel.is-active { z-index: 1; opacity: 1; }
.hx-work-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b0b0ef5 0%, #0b0b0ebf 40%, #0b0b0e26 78%), linear-gradient(0deg, #0b0b0ef2 0%, #0b0b0e00 58%), linear-gradient(180deg, #0b0b0e99 0%, #0b0b0e00 24%); }
.hx-work-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.8s var(--hx-ease); }
.hx-work-panel.is-active .hx-work-bg { transform: scale(1); }
.hx-work-stage:hover .hx-work-panel.is-active .hx-work-bg { transform: scale(1.03); }
.hx-work-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hx-work-state { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #101014d9; box-shadow: inset 0 0 0 1px #ffffff14; font-size: 12px; font-weight: 600; }
.hx-work-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-accent); animation: hx-blink 1.8s ease-in-out infinite; }
.hx-work-state--1 i { background: #ffc15c; }
.hx-work-state--0 i { background: #8a8a93; animation: none; }
@keyframes hx-blink { 50% { opacity: .35; } }
.hx-work-sample { padding: 5px 8px; border-radius: 6px; background: #101014d9; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hx-soft); }

/* Copy of the selected project slides in line by line. */
.hx-work-body { width: 100%; }
.js .hx-work-body > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--hx-ease), transform .9s var(--hx-ease); }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-body > * { opacity: 1; transform: none; }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-body > :nth-child(2) { transition-delay: .06s; }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-body > :nth-child(3) { transition-delay: .12s; }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-body > :nth-child(4) { transition-delay: .18s; }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-body > :nth-child(5) { transition-delay: .24s; }
.hx-work-kind { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-work-name { max-width: 15em; font: 800 clamp(28px, 2.9vw, 46px)/1.04 var(--hx-font); letter-spacing: -.035em; text-wrap: balance; }
.hx-work-desc { display: -webkit-box; max-width: 480px; margin-top: 12px; overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--hx-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-work-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(20px, 2.4vw, 30px); }

/* Stage track: done steps fill in one after another, the current one pulses. */
.hx-work-track { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 500px; margin: 0; padding: 0; list-style: none; }
.hx-work-track li { position: relative; padding: 32px 8px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--hx-dim); transition: color .4s calc(.35s + var(--i) * .14s); }
.hx-work-track li::before { content: ""; position: absolute; left: 26px; right: 4px; top: 11px; height: 2px; border-radius: 2px; background: #ffffff1f; }
.hx-work-track li::after { content: ""; position: absolute; left: 26px; right: 4px; top: 11px; height: 2px; border-radius: 2px; background: var(--hx-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--hx-ease) calc(.45s + var(--i) * .14s); }
.hx-work-track li:last-child::before, .hx-work-track li:last-child::after { display: none; }
.hx-work-track li > span[aria-hidden] { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0b0b0e; box-shadow: inset 0 0 0 2px #ffffff2e; font-size: 10px; color: #0b0b0e; transition: background-color .4s calc(.35s + var(--i) * .14s), box-shadow .4s calc(.35s + var(--i) * .14s); }
.hx-work-track li > span[aria-hidden] i { opacity: 0; transition: opacity .3s calc(.45s + var(--i) * .14s); }
.hx-work-board.is-in .hx-work-panel.is-active li.is-done, .hx-work-board.is-in .hx-work-panel.is-active li.is-now { color: var(--hx-text); }
.hx-work-board.is-in .hx-work-panel.is-active li.is-done > span[aria-hidden] { background: var(--hx-accent); box-shadow: inset 0 0 0 2px var(--hx-accent); }
.hx-work-board.is-in .hx-work-panel.is-active li.is-done > span[aria-hidden] i { opacity: 1; }
.hx-work-board.is-in .hx-work-panel.is-active li.is-done::after { transform: scaleX(1); }
.hx-work-board.is-in .hx-work-panel.is-active li.is-now::after { transform: scaleX(.45); }
.hx-work-board.is-in .hx-work-panel.is-active li.is-now > span[aria-hidden] { box-shadow: inset 0 0 0 2px var(--hx-accent), 0 0 0 5px #26bbff29; animation: hx-now 2s ease-in-out 1s infinite; }
.hx-work-track li.is-now > span[aria-hidden]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-accent); }
.hx-work-track li.is-now > span[aria-hidden] i { display: none; }
@keyframes hx-now { 50% { box-shadow: inset 0 0 0 2px var(--hx-accent), 0 0 0 9px #26bbff14; } }
.hx-work-pct { flex-shrink: 0; text-align: right; }
.hx-work-pct strong { display: block; font: 800 clamp(42px, 4.4vw, 66px)/.9 var(--hx-font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.hx-work-pct small { display: block; margin-top: 8px; font-size: 12px; color: var(--hx-dim); }
.hx-work-bar { height: 4px; margin-top: 20px; overflow: hidden; border-radius: 4px; background: #ffffff1a; }
.hx-work-bar i { display: block; height: 100%; border-radius: inherit; background: var(--hx-accent); transform: scaleX(var(--p)); transform-origin: left; }
.js .hx-work-bar i { transform: scaleX(0); transition: transform 1.3s var(--hx-ease) .3s; }
.js .hx-work-board.is-in .hx-work-panel.is-active .hx-work-bar i { transform: scaleX(var(--p)); }

/* Project list */
.hx-work-list { display: flex; flex-direction: column; gap: 8px; }
.hx-work-tab { position: relative; display: grid; flex: 1 1 0; grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 10px 14px; min-height: 96px; padding: 12px 18px 14px 12px; overflow: hidden; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hx-work-tab:hover { background: #16161a; }
.hx-work-tab.is-active { background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff14; }
.hx-work-tab:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-work-thumb { grid-row: 1 / 3; width: 54px; height: 72px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px #00000073; filter: saturate(.6) brightness(.75); transition: filter .4s; }
.hx-work-tab:hover .hx-work-thumb, .hx-work-tab.is-active .hx-work-thumb { filter: none; }
.hx-work-tab-text { min-width: 0; }
.hx-work-tab-text strong { display: block; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: var(--hx-soft); transition: color .3s; }
.hx-work-tab.is-active .hx-work-tab-text strong { color: var(--hx-text); }
.hx-work-tab-text small { display: block; margin-top: 4px; font-size: 12px; color: var(--hx-dim); }
.hx-work-tab-pct { font-size: 15px; font-weight: 700; color: var(--hx-muted); font-variant-numeric: tabular-nums; }
.hx-work-tab.is-active .hx-work-tab-pct { color: var(--hx-text); }
.hx-work-tab-bar { grid-column: 2 / 4; height: 3px; overflow: hidden; border-radius: 3px; background: #ffffff14; }
.hx-work-tab-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: #ffffff4d; transition: background-color .3s; }
.hx-work-tab.is-active .hx-work-tab-bar i { background: var(--hx-accent); }
/* Auto-advance timer: a thin line along the left edge of the active row. */
.hx-work-tab-timer { position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: #ffffff0f; opacity: 0; transition: opacity .3s; }
.hx-work-tab-timer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hx-accent); transform: scaleY(0); transform-origin: top; }
.hx-work-tab.is-active .hx-work-tab-timer { opacity: 1; }
.hx-work-tab.is-timing .hx-work-tab-timer::after { animation: hx-fill-y var(--hx-work-ms, 7000ms) linear forwards; }
@keyframes hx-fill-y { to { transform: scaleY(1); } }
.hx-empty { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 28px; border-radius: var(--hx-radius); background: var(--hx-bg-2); }
.hx-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--hx-surface); font-size: 22px; color: var(--hx-accent); }
.hx-empty h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.hx-empty p { font-size: 14px; color: var(--hx-muted); max-width: 620px; }

/* ---------- Story ---------- */
.hx-story { position: relative; z-index: 1; overflow-x: clip; }
.hx-story-body { position: relative; padding-block: clamp(90px, 10vw, 150px); background-image: linear-gradient(180deg, transparent calc(100% - 160px), var(--hx-bg) 100%); }
.hx-story-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); }
.hx-story-steps { display: grid; }
.hx-story-step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 520px; opacity: .22; transition: opacity .9s var(--hx-ease); }
.hx-story-step.is-active { opacity: 1; }
/* The community step is longer so the two Hangar cards can arrive slowly and then rest on screen. */
.hx-story-step:last-child { min-height: 140vh; justify-content: flex-start; }
/* Its text stays pinned beside the deck until both cards have settled, then both leave together. */
.hx-story-step-pin { position: sticky; top: calc(var(--hx-header-h) + 24px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: min(calc(100vh - var(--hx-header-h) - 48px), 820px); }
.hx-step-num { font-size: 13px; font-weight: 600; color: var(--hx-accent); margin-bottom: 16px; }
.hx-story-step h3 { font: 800 clamp(28px, 3.4vw, 46px)/1.1 var(--hx-font); letter-spacing: -.03em; margin-bottom: 18px; }
.hx-story-step p { font-size: 17px; line-height: 1.7; color: var(--hx-muted); margin-bottom: 22px; }
.hx-story-step p strong { color: var(--hx-text); font-weight: 600; }
.hx-story-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-story-sticky { position: sticky; top: calc(var(--hx-header-h) + 24px); height: calc(100vh - var(--hx-header-h) - 48px); max-height: 820px; overflow: visible; }
.hx-story-progress { position: absolute; left: 50%; bottom: 22px; display: flex; gap: 8px; transform: translateX(-50%); }
.hx-story-progress span { width: 24px; height: 3px; border-radius: 3px; background: #ffffff26; transition: background-color .3s, width .4s var(--hx-ease); }
.hx-story-progress span.is-active { width: 40px; background: var(--hx-text); }

/* ---------- Closing scene above the footer (city + walking characters) ---------- */
.hx-scene { position: relative; isolation: isolate; overflow: hidden; height: clamp(560px, 80vh, 720px); margin-top: clamp(40px, 6vw, 90px); background: linear-gradient(180deg, #101014 0%, #121218 50%, #16161d 100%); }
.hx-scene::before { content: ""; position: absolute; left: 50%; bottom: 40px; width: 120%; height: 60%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 100%, #26bbff12, transparent 70%); pointer-events: none; }
.hx-scene-sky { position: absolute; inset: 0; z-index: -1; }
.hx-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .45; }
/* Only every fourth star twinkles: each animated star is its own compositor layer. */
.hx-stars i:nth-child(4n) { animation: hx-twinkle 4.2s ease-in-out infinite; }
@keyframes hx-twinkle { 50% { opacity: .08; } }
.hx-moon { position: absolute; top: 11%; right: 13%; width: clamp(56px, 6vw, 86px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 62% 38%, #ffffff00 0 14%, #00000014 15% 20%, #ffffff00 21%), radial-gradient(circle at 34% 64%, #00000012 0 9%, #ffffff00 10%), radial-gradient(circle at 36% 34%, #f4f4f7, #c9cad2 75%); box-shadow: 0 0 50px 6px #ffffff12, 0 0 160px 40px #26bbff0d; }
.hx-cloud { position: absolute; height: 34px; border-radius: 999px; background: #ffffff07; animation: hx-drift linear infinite; }
.hx-cloud::before, .hx-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.hx-cloud::before { left: 18%; width: 46%; aspect-ratio: 1; }
.hx-cloud::after { left: 46%; width: 34%; aspect-ratio: 1; }
.hx-cloud--1 { top: 16%; width: 190px; animation-duration: 120s; animation-delay: -30s; }
.hx-cloud--2 { top: 34%; width: 150px; animation-duration: 150s; animation-delay: -95s; opacity: .8; }
.hx-cloud--3 { top: 8%; width: 120px; animation-duration: 170s; animation-delay: -10s; opacity: .6; }
@keyframes hx-drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }
.hx-plane { position: absolute; top: 1.5%; left: 0; width: clamp(230px, 22vw, 330px); animation: hx-fly 34s linear infinite; animation-delay: -6s; }
.hx-plane svg { display: block; width: 100%; overflow: visible; }
.hx-plane-body { animation: hx-bob-plane 2.4s ease-in-out infinite alternate; }
.hx-prop { transform-origin: 289px 38px; animation: hx-prop .12s linear infinite alternate; }
.hx-banner { transform-origin: 112px 33px; animation: hx-banner 1.2s ease-in-out infinite alternate; }
@keyframes hx-fly { 0% { transform: translate(-360px, 16px); } 62% { transform: translate(calc(100vw + 30px), -4px); } 100% { transform: translate(calc(100vw + 30px), -4px); } }
@keyframes hx-bob-plane { to { transform: translateY(-4px) rotate(-1deg); } }
@keyframes hx-prop { to { transform: scaleY(.15); } }
@keyframes hx-banner { from { transform: skewY(-2deg) scaleY(.97); } to { transform: skewY(2deg) scaleY(1.02); } }

.hx-city { position: absolute; inset: auto 0 0; height: 64%; z-index: 0; pointer-events: none; }
.hx-city-layer { position: absolute; left: 0; bottom: 54px; width: 100%; will-change: transform; }
.hx-city--far { height: 100%; }
.hx-city--mid { height: 80%; }
.hx-city--near { height: 56%; }
.hx-lit { fill: #e8e8ee; opacity: .3; }
.hx-lit--blink { animation: hx-window 11s steps(1) infinite; }
.hx-lit--blue { fill: #26bbff; opacity: .5; }
@keyframes hx-window { 78% { opacity: .06; } }
.hx-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, #1b1b21 0%, #131318 55%, #0c0c0f 100%); box-shadow: 0 -1px 0 #ffffff0f; }

.hx-scene-copy { position: relative; z-index: 3; display: grid; justify-items: center; padding-top: clamp(48px, 9vh, 104px); text-align: center; }
.hx-scene-title { font: 800 clamp(40px, 6.2vw, 88px)/1 var(--hx-font); letter-spacing: -.05em; }
.hx-scene-title span { display: block; }
.hx-scene-title span + span { color: #ffffffb8; }
.hx-scene-sub { max-width: 560px; margin: 22px 0 30px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--hx-muted); }
.hx-scene-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.hx-signs { position: absolute; z-index: 2; bottom: 34px; display: grid; gap: 8px; pointer-events: none; }
.hx-signs .hx-post { position: absolute; z-index: -1; bottom: 0; width: 7px; border-radius: 4px 4px 0 0; background: #2a2a31; }
.hx-signs--old { left: 4%; justify-items: start; transform-origin: 28px 0; animation: hx-sign 6s ease-in-out infinite alternate; }
.hx-signs--old .hx-post { left: 30px; top: -12px; }
.hx-plank { display: block; padding: 9px 18px 9px 28px; background: #202026; color: #ffffff5c; font-size: 13px; font-weight: 600; text-decoration: line-through; text-decoration-color: #ffffff80; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.hx-plank:nth-of-type(2) { transform: rotate(-3deg); }
.hx-plank:nth-of-type(3) { transform: rotate(2deg) translateX(4px); }
.hx-plank:nth-of-type(4) { transform: rotate(-1.5deg); }
.hx-signs--new { right: 5%; z-index: 4; justify-items: start; }
.hx-signs--new .hx-post { left: 44px; top: 30px; height: calc(100% - 30px); }
.hx-board { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; background: var(--hx-accent); color: var(--hx-bg); border-radius: 10px 0 0 10px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); transform-origin: 44px 50%; animation: hx-sign 5s ease-in-out infinite alternate; }
.hx-board img { width: 36px; height: 36px; border-radius: 9px; }
.hx-board b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.hx-board small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.hx-board > i { font-size: 16px; }
.hx-tag { display: flex; align-items: center; gap: 8px; margin-left: 22px; padding: 7px 14px; border: 1px solid #26bbff59; border-radius: 8px; background: #16161b; color: var(--hx-soft); font-size: 13px; font-weight: 600; transform-origin: 22px 50%; animation: hx-sign 4.4s ease-in-out infinite alternate; }
.hx-tag i { width: 16px; color: var(--hx-accent); }
.hx-tag:nth-of-type(odd) { animation-delay: -1.7s; }
@keyframes hx-sign { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }

.hx-walkers { position: absolute; inset: 0; pointer-events: none; }
.hx-walker { position: absolute; left: 0; bottom: 22px; z-index: 3; animation: hx-walk var(--dur) linear var(--delay) infinite; will-change: transform; }
.hx-walker--back { bottom: 40px; z-index: 1; opacity: .55; }
.hx-char { display: block; width: calc(92px * var(--scale)); height: auto; overflow: visible; }
@keyframes hx-walk { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 20px)); } }
.hx-char .c-leg { transform-origin: 40px 92px; animation: hx-leg .9s ease-in-out infinite alternate; }
.hx-char .c-leg--b { animation-delay: -.9s; }
.hx-char .c-arm { transform-origin: 40px 57px; animation: hx-arm .9s ease-in-out infinite alternate; }
.hx-char .c-arm--b { animation-delay: -.9s; }
.hx-char .c-arm--staff { animation-name: hx-staff; }
.hx-char .c-bob { animation: hx-bob .45s ease-in-out infinite alternate; }
.hx-char .c-cape { transform-origin: 30px 54px; animation: hx-cape .9s ease-in-out infinite alternate; }
.hx-char .c-orb { animation: hx-orb 1.6s ease-in-out infinite alternate; }
@keyframes hx-leg { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes hx-arm { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes hx-staff { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
@keyframes hx-bob { to { transform: translateY(-2.5px); } }
@keyframes hx-cape { from { transform: rotate(3deg); } to { transform: rotate(-5deg); } }
@keyframes hx-orb { to { opacity: .55; } }
.hx-slime { display: block; width: 44px; overflow: visible; animation: hx-hop .7s cubic-bezier(.3, 0, .4, 1) infinite; }
.hx-slime-body { transform-origin: 20px 27px; animation: hx-squash .7s ease-in-out infinite; }
@keyframes hx-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hx-squash { 0%, 100% { transform: scale(1.15, .85); } 25%, 75% { transform: scale(1); } 50% { transform: scale(.92, 1.08); } }
.hx-scene.is-paused *, .hx-scene.is-paused *::before, .hx-scene.is-paused *::after { animation-play-state: paused !important; }

/* ---------- Story deck (game cards → Hangar cards) ---------- */
.hx-deck { position: absolute; inset: 0 -4% 0 -4%; }
.hx-deck::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 44px 44px; background-position: center; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 80%); }
.hx-deck-cards { position: absolute; inset: 0; }
/* Shadows kept tight: each card is its own layer and big blurs made its first raster a visible hitch. */
.hx-deck-card { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 2 / 3; margin: -31.5% 0 0 -21%; overflow: hidden; border-radius: 16px; background: var(--hx-surface); box-shadow: 0 16px 32px #000000b3, inset 0 0 0 1px #ffffff14; will-change: transform, opacity; }
.hx-deck-card img { width: 100%; height: 100%; object-fit: cover; }
.hx-deck-shade { position: absolute; inset: 0; background: #0b0b0e; opacity: 0; pointer-events: none; will-change: opacity; }
.hx-deck-scan { position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(180deg, transparent, #26bbff4d 70%, #26bbffcc 100%); opacity: 0; transition: opacity .3s; }
.hx-deck[data-step="1"] .hx-deck-card.is-center .hx-deck-scan { opacity: 1; animation: hx-scan 1.6s ease-in-out infinite; }
@keyframes hx-scan { to { top: 100%; } }
.hx-deck-chip { position: absolute; z-index: 120; left: 50%; bottom: 13%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #ffffff1f; border-radius: 999px; background: #101014f0; font-size: 13px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); transition: opacity .3s; }
.hx-deck-chip i { color: var(--hx-accent); }
.hx-deck-chip.is-pop { animation: hx-pop .45s var(--hx-ease); }
@keyframes hx-pop { from { transform: translateX(-50%) translateY(8px) scale(.94); opacity: 0; } }
.hx-hcards { position: absolute; inset: 0; z-index: 130; pointer-events: none; }
.hx-deck.is-merged .hx-hcards { animation: hx-float 5s ease-in-out infinite alternate; }
@keyframes hx-float { to { transform: translateY(-10px); } }
.hx-hcard { position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1.586; margin: -20.8% 0 0 -33%; display: grid; place-items: center; overflow: hidden; border-radius: 18px; opacity: 0; font-size: clamp(12px, 1.4vw, 20px); color: #fff; box-shadow: 0 20px 40px #000000c0, inset 0 0 0 1px #ffffff33, inset 0 -3px 0 #00000033; will-change: transform, opacity; }
.hx-hcard--blue { background: linear-gradient(135deg, #6ad5ff 0%, #26bbff 40%, #0e8ccc 100%); }
.hx-hcard--dark { background: linear-gradient(135deg, #505058 0%, #2c2c31 45%, #19191d 100%); }
.hx-hcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, #ffffff3d 0%, #ffffff00 42%), radial-gradient(90% 70% at 0% 0%, #ffffff29, transparent 55%); }
.hx-hcard::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(100deg, transparent, #ffffff40, transparent); transform: skewX(-18deg); animation: hx-sheen 4.5s ease-in-out infinite; }
.hx-hcard--dark::after { animation-delay: -2.2s; }
@keyframes hx-sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.hx-hcard-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: .75em; filter: drop-shadow(0 2px 3px #00000040); }
.hx-hcard-mark { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: .09em solid #fff; border-radius: .42em; font-size: 1.7em; font-weight: 800; line-height: 1; padding-bottom: .06em; }
.hx-hcard-word { font-size: 2.1em; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.hx-hcard-word small { display: block; margin-top: 1.2em; font-size: .3em; font-weight: 700; letter-spacing: .5em; }
/* ---------- Windows client (3D laptop) ---------- */
.hx-client { position: relative; padding-bottom: clamp(40px, 6vw, 80px); }
.hx-client-pin { min-height: calc(100vh - var(--hx-header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 28px; overflow: hidden; }
.hx-client-head { text-align: center; display: grid; justify-items: center; gap: 12px; }
.hx-client-head .hx-h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.03em; }
.hx-client-head > p:last-child { max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--hx-muted); }
.hx-laptop-stage { position: relative; width: min(1100px, 96vw); height: clamp(300px, 54vh, 620px); margin: 18px auto 0; }
.hx-laptop-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hx-laptop-fallback { position: absolute; left: 50%; top: 50%; width: min(640px, 82%); height: auto; border-radius: 12px; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px #0a0a0c, 0 0 0 11px #ffffff1f, 0 40px 80px #000000cc; }
.hx-laptop-stage.is-3d .hx-laptop-fallback { display: none; }
.hx-client-cta { display: grid; justify-items: center; gap: 12px; margin-top: 4px; text-align: center; }
.hx-client-note { font-size: 13px; color: var(--hx-dim); }
.hx-client-features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(900px, 100%); margin: 24px auto 0; padding: 0; text-align: left; }
.hx-client-features li { display: flex; gap: 14px; padding: 18px; border-radius: var(--hx-radius); background: var(--hx-bg-2); }
.hx-client-features i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--hx-surface); color: var(--hx-accent); font-size: 14px; }
.hx-client-features span { font-size: 13px; line-height: 1.5; color: var(--hx-muted); }
.hx-client-features strong { display: block; font-size: 14px; color: var(--hx-text); margin-bottom: 2px; }

/* ---------- Footer (sits right under the city scene) ---------- */
.hx-footer { position: relative; padding-bottom: 26px; background: #0c0c0f; font-size: 14px; }
.hx-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #26bbff73 50%, transparent); }
.hx-footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 44px 36px; }
.hx-footer-brand p { max-width: 300px; margin: 14px 0 18px; font-size: 14px; line-height: 1.6; color: var(--hx-muted); }
.hx-footer-social { display: flex; gap: 8px; }
.hx-footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff0d; color: var(--hx-soft); font-size: 17px; transition: background-color .2s, color .2s, transform .3s var(--hx-ease); }
.hx-footer-social a:hover { background: var(--hx-accent); color: var(--hx-bg); transform: translateY(-2px); }
.hx-footer nav { display: grid; align-content: start; gap: 12px; }
.hx-footer nav h2 { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--hx-dim); }
.hx-footer nav a { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; color: var(--hx-soft); overflow-wrap: anywhere; transition: color .2s; }
.hx-footer nav a:hover { color: var(--hx-text); }
.hx-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 64px 0 0; border-top: 1px solid var(--hx-line); font-size: 12px; color: var(--hx-dim); }
.hx-footer-top-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--hx-soft); font: 600 13px/1 var(--hx-font); cursor: pointer; transition: color .2s; }
.hx-footer-top-link:hover { color: var(--hx-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .hx-nav a { padding-inline: 10px; }
  .hx-search { width: 190px; }
  .hx-row, .hx-row-section .hx-row { grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; }
  :root { --hx-row-h: 400px; }
}
@media (max-width: 1080px) {
  .hx-nav { display: none; }
  .hx-search { margin-right: auto; }
  .hx-menu-toggle { display: grid; }
  .hx-row, .hx-row-section .hx-row { grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; }
  .hx-work-board { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); }
  .hx-work-track li { font-size: 11px; }
  .hx-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hx-services-grid { grid-template-columns: 1fr; }
  .hx-service { height: 380px; }
  .hx-service-text small { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  :root { --hx-header-h: 60px; }
  .hx-search { width: 40px; height: 40px; margin-left: 0; padding: 0; justify-content: center; }
  .hx-search span, .hx-search kbd, .hx-brand-word span, .hx-win-btn span { display: none; }
  .hx-win-btn { width: 40px; padding: 0; }
  .hx-win-btn i { font-size: 16px; }
  .hx-row, .hx-row-section .hx-row { grid-auto-columns: 40%; gap: 14px; }
  .hx-row-section { margin-top: -20px; padding-top: 26px; border-radius: 20px 20px 0 0; }
  .hx-empty { grid-template-columns: 1fr; justify-items: start; }
  .hx-show-stage { height: 540px; }
  .hx-show-content { padding-bottom: 128px; }
  .hx-show-rail-wrap { justify-content: space-between; bottom: 32px; gap: 10px; }
  .hx-show-nav { order: 2; margin-bottom: 13px; }
  .hx-show-count { display: none; }
  .hx-show .hx-arrow { width: 34px; height: 34px; }
  .hx-show-rail { gap: 6px; }
  .hx-rail-item { width: 40px; }
  .hx-rail-item img { border-radius: 6px; }
  .hx-show-slide::before { background: linear-gradient(180deg, #0b0b0eb3 0%, #0b0b0e00 20%), linear-gradient(0deg, #0b0b0e 0%, #0b0b0ee0 40%, #0b0b0e33 75%); }
  .hx-work-section { padding-top: 104px; }
  .hx-toy--trophy { --s: 104px; left: -10px; top: 4px; }
  .hx-toy--key { --s: 92px; right: -8px; top: 10px; }
  .hx-toy--coin, .hx-toy--gem { display: none; }
  .hx-work-summary .hx-link { flex-basis: 100%; justify-content: center; margin: 4px 0 0; }
  .hx-work-board { grid-template-columns: 1fr; }
  .hx-work-stage { min-height: 540px; border-radius: 16px; }
  .hx-work-panel::before { background: linear-gradient(0deg, #0b0b0ef7 0%, #0b0b0edb 48%, #0b0b0e33 82%), linear-gradient(180deg, #0b0b0e99 0%, #0b0b0e00 24%); }
  .hx-work-foot { flex-direction: column-reverse; align-items: stretch; gap: 18px; }
  .hx-work-pct { display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .hx-work-pct small { margin: 0; }
  .hx-work-track li { padding-right: 4px; font-size: 10.5px; }
  .hx-work-tab { min-height: 84px; }
  .js .hx-work-board .hx-work-tab { transform: translateY(20px); }
  .hx-scene { height: 640px; }
  .hx-scene-copy { padding-top: 104px; }
  .hx-scene-sub { margin: 16px 0 24px; }
  .hx-signs--old { display: none; }
  .hx-signs--new { right: 12px; bottom: 30px; transform: scale(.72); transform-origin: right bottom; }
  .hx-tag:nth-of-type(n+4) { display: none; }
  .hx-char { width: calc(70px * var(--scale)); }
  .hx-walker--back { display: none; }
  .hx-moon { top: 2.5%; right: 6%; width: 40px; }
  .hx-plane { top: 3.5%; width: 190px; }
  .hx-deck-card { width: 38%; margin: -28.5% 0 0 -19%; }
  .hx-deck-chip { bottom: 8%; font-size: 12px; }
  .hx-story-grid { grid-template-columns: 1fr; gap: 0; }
  .hx-story-visual { order: -1; position: sticky; top: var(--hx-header-h); z-index: 1; height: 44vh; margin-inline: calc(var(--hx-gutter) * -1); background: var(--hx-bg-deep); }
  .hx-story-sticky { position: relative; top: 0; height: 100%; }
  .hx-story-step { min-height: 78vh; padding-top: 24px; }
  .hx-story-step:last-child { min-height: 115vh; padding-top: 18vh; }
  .hx-story-step-pin { top: calc(var(--hx-header-h) + 44vh + 12px); justify-content: flex-start; min-height: 0; }
  .hx-story-step p { font-size: 16px; }
  .hx-laptop-stage { height: 300px; }
  .hx-client-features { grid-template-columns: 1fr; }
  .hx-footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 36px 28px; }
  .hx-footer-bottom { flex-direction: column; align-items: flex-start; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-walker, .hx-char *, .hx-slime, .hx-slime-body, .hx-plane, .hx-cloud, .hx-signs, .hx-board, .hx-tag, .hx-stars i, .hx-lit, .hx-work-state i, .hx-show-label-icon i, .hx-show-scroll span { animation: none !important; }
  .hx-walker { transform: translateX(var(--x)); }
  .hx-plane { transform: translate(18vw, 10px); }
  .hx-hcard::after, .hx-deck-scan { display: none; }
  .hx-show-slide, .hx-show-bg, .hx-show-content > *, .hx-work-panel, .hx-work-panel *, .hx-work-panel *::after, .hx-work-stage, .hx-work-tab { transition: none !important; }
  .hx-work-track li.is-now > span[aria-hidden] { animation: none !important; }
}