*,*::before,*::after{box-sizing:border-box}
:root{--cyan:#6edcff;--cyan2:#2aaee8;--white:#f7fbff;--muted:rgba(221,239,248,.72);--line:rgba(140,221,255,.24);--mx:50%;--my:50%;--px:0px;--py:0px}
html,body{margin:0;width:100%;min-height:100%;background:#010611;color:var(--white)}
body{min-height:100vh;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.scene{position:relative;width:100%;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:#010611}
.hero-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;display:block;object-fit:cover;object-position:center center;transform:translate3d(var(--px),var(--py),0) scale(1.015);filter:saturate(1.04) contrast(1.03) brightness(.96);user-select:none;-webkit-user-drag:none;pointer-events:none}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,4,13,.66) 0%,rgba(0,4,13,.22) 28%,rgba(0,4,13,.06) 48%,rgba(0,4,13,.22) 72%,rgba(0,4,13,.62) 100%),linear-gradient(180deg,rgba(0,4,13,.36),transparent 21%,transparent 64%,rgba(0,4,13,.66) 100%),radial-gradient(circle at 50% 45%,transparent 26%,rgba(0,4,13,.05) 55%,rgba(0,4,13,.34) 100%)}
.stars{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;opacity:.12}
.glass{overflow:hidden;border:1px solid var(--line);background:radial-gradient(620px circle at var(--mx) var(--my),rgba(135,224,255,.14),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 35%,rgba(22,118,178,.06) 78%),rgba(2,13,28,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(65,193,255,.08),0 24px 72px rgba(0,0,0,.32);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.glass::before{content:"";position:absolute;inset:-90% -45%;pointer-events:none;background:linear-gradient(110deg,transparent 44%,rgba(255,255,255,.17) 50%,transparent 56%);transform:translateX(-52%);opacity:0;animation:sheen 11s ease-in-out infinite}
.topbar{position:absolute;z-index:8;top:max(18px,env(safe-area-inset-top));left:50%;width:min(1180px,calc(100% - 40px));min-height:48px;padding:0 18px;border-radius:999px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px}
.identity,.systemline{position:relative;z-index:2}.identity{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:850;letter-spacing:.22em}.identity i,.status-dot i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(112,221,255,.07),0 0 20px rgba(112,221,255,.78);animation:pulse 2.1s ease-in-out infinite}.systemline{color:rgba(210,237,249,.48);font-size:8px;font-weight:800;letter-spacing:.16em}
.intro{position:absolute;z-index:7;left:clamp(24px,4vw,72px);top:50%;width:min(430px,calc(100% - 48px));padding:24px 24px 22px;border-radius:30px;transform:translateY(-48%)}
.micro{display:block;margin-bottom:9px;color:rgba(149,225,255,.82);font-size:8px;font-weight:850;letter-spacing:.28em}.intro h1{margin:0;font-size:clamp(28px,3vw,44px);line-height:.95;letter-spacing:-.035em;font-weight:850;text-wrap:balance}.intro p{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.6;text-wrap:pretty}
.areas-panel{position:absolute;z-index:7;right:clamp(24px,3vw,54px);top:50%;width:min(315px,calc(100% - 48px));transform:translateY(-48%);display:grid;gap:8px}
.area{position:relative;min-height:78px;padding:13px 15px 12px;border-radius:20px}.area>span{display:block;margin-bottom:3px;color:rgba(123,216,255,.52);font-size:7px;font-weight:850;letter-spacing:.18em}.area strong{display:block;font-size:12px;letter-spacing:.08em}.area p{margin:4px 0 0;color:rgba(218,238,248,.58);font-size:9.5px;line-height:1.45}
.statusbar{position:absolute;z-index:8;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));width:min(760px,calc(100% - 40px));min-height:58px;padding:12px 16px;border-radius:22px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:18px}.statusbar>div:first-child{display:grid;gap:3px}.statusbar span{color:rgba(197,231,246,.47);font-size:7px;font-weight:800;letter-spacing:.16em}.statusbar strong{font-size:11px;letter-spacing:.06em}.status-dot{display:flex;align-items:center;gap:10px}.status-dot span{color:rgba(231,247,255,.72)}
.footer{position:absolute;left:18px;right:18px;bottom:8px;z-index:9;display:flex;justify-content:space-between;color:rgba(203,229,241,.28);font-size:6.5px;font-weight:700;letter-spacing:.12em;pointer-events:none}
@keyframes sheen{0%,22%{transform:translateX(-52%);opacity:0}35%{opacity:.18}54%{transform:translateX(52%);opacity:.12}68%,100%{transform:translateX(52%);opacity:0}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
@media(max-width:1080px){.intro{left:24px;width:min(390px,calc(100% - 48px))}.areas-panel{right:24px;width:280px}.area p{display:none}.area{min-height:62px}}
@media(max-width:820px){body{overflow:auto}.scene{min-height:100svh}.hero-image{object-fit:cover;object-position:center top}.hero-shade{background:linear-gradient(180deg,rgba(0,4,13,.24),rgba(0,4,13,.06) 34%,rgba(0,4,13,.42) 62%,rgba(0,4,13,.84) 100%)}.topbar{width:calc(100% - 22px);min-height:42px;padding:0 14px}.identity{font-size:8px;letter-spacing:.17em}.systemline{display:none}.intro{left:11px;right:11px;top:auto;bottom:220px;width:auto;padding:18px;border-radius:24px;transform:none}.intro h1{font-size:clamp(25px,8vw,38px)}.intro p{font-size:11.5px;line-height:1.5}.areas-panel{left:11px;right:11px;top:auto;bottom:74px;width:auto;transform:none;grid-template-columns:1fr 1fr;gap:7px}.area{min-height:54px;padding:10px 11px;border-radius:17px}.area p{display:none}.statusbar{display:none}.footer{display:none}}
@media(max-width:520px){.areas-panel{grid-template-columns:1fr 1fr}.area strong{font-size:10px}.hero-image{object-position:center 12%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}.hero-image{transform:none!important}}