@import url('desktop-base.css?v=1');
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:#080f1d; color:#eef4ff; font-family:'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.site-header { height:88px; max-width:1320px; margin:auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid #c3ddff1c; }
.wordmark { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:750; letter-spacing:4px; }
.wordmark img { width:36px; height:40px; object-fit:contain; }
.wordmark small { font-size:10px; letter-spacing:1px; padding:4px 6px; border:1px solid #759cc04d; border-radius:5px; color:#9dcce3; }
.site-header nav { display:flex; gap:32px; font-size:13px; color:#afbed3; }
.site-header nav a:hover { color:white; }
.header-login { display:flex; align-items:center; gap:10px; font-size:13px; }
.hero-world { position:absolute; top:0; left:0; width:100%; height:1080px; background:linear-gradient(180deg,#080f1d80 0%,#080f1d75 30%,#080f1df0 85%,#080f1d 100%),url('../landing/desktop/realm.webp') center top / cover; pointer-events:none; }
.landing-main { position:relative; }
.hero { max-width:1200px; margin:auto; padding:70px 24px 0; text-align:center; }
.eyebrow { color:#92c8dd; font-size:10px; letter-spacing:2.5px; font-weight:600; text-transform:uppercase; }
.hero-tag { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #b6d6ff38; background:#0c182c9c; border-radius:30px; color:#c7d9e9; font-size:11px; letter-spacing:1px; }
.status-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:#84dac4; box-shadow:0 0 12px #84dac450; }
.hero h1 { font-size:clamp(40px,4.6vw,66px); font-weight:600; line-height:1.1; letter-spacing:-2.7px; margin:22px 0; }
.hero h1 span { color:#94cde4; }
.hero-lead { font-size:16px; line-height:1.8; color:#c3cddd; max-width:580px; margin:0 auto; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin:28px 0 16px; }
.action { display:inline-flex; justify-content:center; align-items:center; gap:10px; border:1px solid #829ebf45; border-radius:9px; padding:13px 22px; background:#142038bb; font-size:13px; font-weight:600; color:#e8f4ff; transition:background .2s,transform .2s; }
.action:hover { background:#213552; transform:translateY(-2px); }
.action.primary { background:linear-gradient(110deg,#5478dc,#3279b4); border-color:#7fb2f170; box-shadow:0 5px 28px #3274d32b; }
.hero-note { color:#9dabbd; font-size:11px; }
.features { max-width:1170px; margin:100px auto 0; padding:0 24px; }
.section-top { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:28px; }
.section-top h2,.join-copy h2 { font-size:36px; line-height:1.2; font-weight:550; letter-spacing:-1.3px; margin:12px 0 0; }
.section-top>p { color:#8fa2bc; font-size:13px; line-height:1.7; max-width:310px; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { padding:26px; border:1px solid #9bb7de21; background:linear-gradient(145deg,#16243a,#0d192b); border-radius:13px; }
.feature-card>span { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #8bb7d82b; border-radius:11px; color:#8fcadd; background:#80b6e10b; }
.feature-card h3 { font-size:17px; font-weight:550; margin:22px 0 10px; }
.feature-card p { color:#98abc3; font-size:13px; line-height:1.8; margin:0; }
.features-note { color:#7589a3; font-size:11px; margin-top:18px; }
.join { max-width:1122px; margin:90px auto; display:grid; grid-template-columns:1fr 420px; gap:70px; align-items:center; padding:44px; border:1px solid #90b6dc25; border-radius:18px; background:radial-gradient(ellipse at 0% 20%,#26445a66,transparent 65%),#101c2d; scroll-margin-top:30px; }
.join-copy>p { color:#a2b3c8; font-size:14px; line-height:1.8; margin:24px 0; }
.join-steps { list-style:none; padding:0; margin:32px 0; display:grid; gap:22px; }
.join-steps li { display:flex; align-items:center; gap:16px; font-size:13px; color:#bed0e1; }
.join-steps span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #85bfda3b; border-radius:50%; color:#8dc9e0; font-size:11px; }
.join .auth { background:#0b1424; border:1px solid #85b0d62c; border-radius:13px; padding:28px; min-width:0; }
.auth-logo-symbol,.auth-logo h2 { display:none; }
.auth-subtitle { margin:0 0 22px; color:#9db0c8; font-size:12px; }
.tabs { display:flex; gap:24px; border-bottom:1px solid #ffffff13; margin-bottom:22px; }
.tab { font-size:11px; letter-spacing:.7px; padding-bottom:14px; color:#7f94b0; }
.tab.active { color:#a5dbec; border-bottom:2px solid #8ecde2; }
.form-group { margin-top:15px; }
.form-label { display:block; font-size:11px; color:#b4c4d7; margin-bottom:7px; }
.input-wrapper { display:flex; align-items:center; position:relative; }
.input-icon { position:absolute; left:12px; color:#6e8aa7; display:flex; }
.input-wrapper input { min-width:0; width:100%; height:44px; padding:0 40px; border:1px solid #718eaf3b; border-radius:7px; color:#edf4ff; background:#111e30; font-size:12px; }
input::placeholder { color:#677e9b; }
.password-toggle { position:absolute; right:10px; border:0; background:none; color:#809ab6; display:flex; padding:4px; }
.form-note,.auth-footer { font-size:10px; color:#7d93ad; line-height:1.7; }
.main-button { width:100%; margin-top:22px; border:1px solid #8ebaea44; background:linear-gradient(110deg,#557bdf,#367caf); padding:14px; color:white; border-radius:7px; font-weight:600; font-size:11px; letter-spacing:.8px; }
.auth-footer { margin-top:15px; }
.hp-field { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.msg { font-size:12px; margin-top:12px; line-height:1.6; }
.msg.err { color:#ffa4ad; }.msg.ok { color:#8dddbf; }
.site-footer { max-width:1240px; padding:28px 24px; margin:auto; display:flex; justify-content:space-between; border-top:1px solid #ffffff13; color:#778ca7; font-size:11px; }
.site-footer a { color:#a1bbd3; }
:focus-visible { outline:2px solid #98d7ee; outline-offset:4px; }
@media(max-width:800px) { .site-header {padding:0 22px;height:74px}.site-header nav{gap:15px}.hero{padding-top:48px}.hero h1{letter-spacing:-1.5px}.feature-grid{grid-template-columns:1fr}.feature-card{padding:24px}.feature-card h3{margin-top:16px}.features{margin-top:65px}.join{margin:60px 24px;grid-template-columns:1fr;gap:26px;padding:28px}.join-copy h2{font-size:32px}.join-steps{margin-bottom:0}.section-top{align-items:start;flex-direction:column;gap:15px}.section-top>p{max-width:500px}.section-top h2{font-size:30px} }
@media(max-width:560px) { .site-header nav{display:none}.wordmark{font-size:20px}.header-login{font-size:11px}.hero{padding-left:16px;padding-right:16px}.hero h1{font-size:41px}.hero-lead{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch;margin-left:25px;margin-right:25px}.features{padding:0 20px}.join{margin:50px 16px;padding:22px;gap:25px}.join .auth{padding:20px}.site-footer{gap:20px;flex-wrap:wrap} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }