:root {
  font-family: Inter, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  color: #eef4ff;
  background: #080b16;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  --bg: #080b16;
  --panel: #101523;
  --panel-2: #121a2b;
  --line: rgba(143, 170, 218, .13);
  --muted: #8996af;
  --dim: #5f6c85;
  --cyan: #72e0ff;
  --blue: #5599ff;
  --violet: #aa83ff;
  --sans: Inter, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { color: #07121e; background: #8de7ff; }

.site-header { height: 76px; position: relative; z-index: 10; border-bottom: 1px solid rgba(164, 187, 236, .075); background: #090d19; }
.header-inner { height: 100%; max-width: 1240px; padding: 0 44px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.9px; color: #eff8ff; }
.brand img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(90, 208, 255, .38)); }
.brand-light { font-weight: 500; color: #94a3bf; }
.nav-links { display: flex; gap: 34px; align-items: center; font-size: 12px; color: #a3aec2; }
.nav-links > a:not(.button) { transition: color .2s; }
.nav-links > a:not(.button):hover { color: #effaff; }
.nav-links .nav-login { color: #e4edff !important; margin-left: 7px; }
.nav-user { display: inline-flex; gap: 7px; align-items: center; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dot, .live-orb, .pulse-dot, .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: #62e0b0; box-shadow: 0 0 10px rgba(98, 224, 176, .86); }
.mobile-menu { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; font-size: 12px; line-height: 1; font-weight: 700; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .nav-links a:focus-visible, .text-link:focus-visible, .client-row:focus-visible, .auth-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.button:disabled { opacity: .65; cursor: wait; }
.button-small { padding: 11px 15px; }
.button-large { padding: 15px 18px; }
.button-primary { color: #07101c; background: linear-gradient(112deg, #69eaff 0%, #78bdff 54%, #a98cff 100%); box-shadow: inset 0 1px rgba(255,255,255,.66); }
.button-primary:hover { box-shadow: 0 0 18px rgba(105, 191, 255, .18), inset 0 1px rgba(255,255,255,.8); }
.button-quiet { border-color: rgba(160, 181, 224, .17); color: #d0d9eb; background: rgba(255,255,255,.025); }
.button-quiet:hover { border-color: rgba(130, 203, 255, .38); background: rgba(111, 177, 255, .07); }
.button-quiet.button-large { color: #c0cade; }

.hero-wrap { position: relative; overflow: hidden; background: radial-gradient(ellipse 65% 60% at 78% 41%, rgba(41, 68, 151, .17), transparent 73%), radial-gradient(ellipse 42% 66% at 37% -6%, rgba(36, 87, 126, .095), transparent 76%); }
.hero-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(rgba(128, 165, 221, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 165, 221, .09) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.hero-grid { display: grid; grid-template-columns: 47% 53%; align-items: center; min-height: 578px; position: relative; }
.hero-width { max-width: 1240px; padding: 0 44px; margin: 0 auto; }
.hero-copy { position: relative; z-index: 2; padding: 35px 0 38px 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #9dacc7; font-family: var(--mono); font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: 1.55px; }
.live-orb { width: 5px; height: 5px; }
.hero-copy h1, .auth-story h1, .dashboard-top h1, .dashboard-gate h1 { margin: 25px 0 17px; font-family: var(--sans); font-size: clamp(46px, 5.05vw, 68px); font-weight: 700; letter-spacing: -4.3px; line-height: 1.075; color: #eff4ff; }
.hero-copy h1 .gradient-text { text-shadow: 0 0 19px rgba(111, 172, 255, .23); }
.hero-period { color: var(--cyan); text-shadow: 0 0 24px rgba(90, 216, 255, .58); }
.hero-description { max-width: 470px; margin: 0; color: #a0acc2; font-size: 14px; line-height: 1.9; letter-spacing: -.07px; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 29px; }
.play-icon { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(179,199,230,.26); border-radius: 50%; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 36px; color: #8291aa; font-size: 10px; }
.proof-lock { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(132,214,255,.24); color: var(--cyan); border-radius: 6px; }
.proof-divider { width: 2px; height: 2px; border-radius: 50%; background: #455570; margin: 0 3px; }

.ray-scene { position: relative; height: 476px; min-width: 0; display: flex; justify-content: center; align-items: center; isolation: isolate; }
.scene-glow { position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(55, 119, 226, .2) 0, rgba(78, 76, 183, .1) 39%, transparent 72%); z-index: -2; }
.scene-orbit { position: absolute; border: 1px solid rgba(133, 185, 254, .11); border-radius: 50%; transform: rotate(-21deg); }
.orbit-one { width: 400px; height: 180px; }
.orbit-two { width: 485px; height: 235px; transform: rotate(26deg); border-color: rgba(140, 158, 247, .1); }
.orbit-three { width: 290px; height: 300px; transform: rotate(63deg); border-color: rgba(99, 210, 255, .095); }
.ray-art { display: block; width: min(100%, 558px); height: 430px; max-height: 100%; }
.ray-static-art { height: auto; object-fit: contain; }
.floating-chip { position: absolute; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(163, 194, 242, .17); border-radius: 10px; background: #111a2d; color: #bcc9df; font-size: 9px; }
.chip-encrypt { top: 72px; right: 0; padding: 10px 11px; color: #d0dbea; }
.chip-encrypt > svg { color: var(--cyan); }
.chip-check { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #80f0bf; background: rgba(62, 193, 137, .13); }
.chip-node { left: 3%; bottom: 77px; padding: 9px 11px; font-family: var(--mono); font-size: 8px; letter-spacing: .8px; color: #94a6c2; }
.chip-node b { color: var(--cyan); font-size: 9px; font-weight: 500; }
.chip-node .pulse-dot { width: 5px; height: 5px; }
.scene-caption { position: absolute; bottom: 21px; right: 0; display: flex; gap: 10px; align-items: center; color: #647490; font-family: var(--mono); font-size: 7px; letter-spacing: .8px; }
.caption-separator { width: 23px; height: 1px; background: linear-gradient(90deg, rgba(114,224,255,.7), rgba(170,131,255,.7)); }
.hero-bottom-bar { height: 48px; border-top: 1px solid rgba(164,187,236,.08); border-bottom: 1px solid rgba(164,187,236,.075); display: flex; align-items: center; justify-content: center; gap: 34px; position: relative; padding: 0 44px; color: #8290aa; font-family: var(--mono); font-size: 8px; letter-spacing: .9px; }
.hero-bottom-bar > span:first-child { color: #54617a; }
.hero-bottom-bar > div:not(.hero-bottom-right) { display: flex; align-items: center; gap: 8px; }
.bottom-dot { width: 4px; height: 4px; border-radius: 50%; background: #828cff; box-shadow: 0 0 7px rgba(133, 140, 255, .78); }
.hero-bottom-right { position: absolute; right: max(44px, calc((100vw - 1152px)/2)); display: flex; align-items: center; gap: 8px; color: #75829d; font-family: 'DM Sans', sans-serif; letter-spacing: 0; font-size: 10px; }

.section-wrap, .download-section { max-width: 1152px; margin-left: auto; margin-right: auto; padding-left: 42px; padding-right: 42px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 33px; }
.eyebrow-mark { color: #6cdcff; }
.section-heading h2, .security-copy h2 { margin: 15px 0 0; font-family: var(--sans); font-size: 34px; line-height: 1.25; letter-spacing: -1.8px; font-weight: 700; }
.gradient-text { color: transparent; background: linear-gradient(105deg, #b8f4ff 0%, #73caff 42%, #ba96ff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 24px rgba(96, 164, 255, .08); }
.section-heading > p { max-width: 385px; margin: 0 0 3px; color: #8995aa; font-size: 12px; line-height: 1.85; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: #8edaff; font-weight: 600; font-size: 10px; transition: gap .18s, color .18s; }
.text-link:hover { gap: 10px; color: #c7f3ff; }

.how-section { padding: 76px 0 73px; border-top: 1px solid rgba(160, 182, 226, .075); border-bottom: 1px solid rgba(160, 182, 226, .075); background: radial-gradient(ellipse 75% 95% at 50% 115%, rgba(38, 74, 139, .14), transparent 75%), linear-gradient(115deg, rgba(13, 18, 31, .4), rgba(14, 18, 33, .18)); }
.how-heading { margin-bottom: 31px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.step-card { min-height: 165px; position: relative; padding: 19px 18px 16px; border: 1px solid rgba(143, 171, 219, .115); border-radius: 8px; background: rgba(11, 16, 29, .55); }
.step-number { position: absolute; top: 22px; right: 19px; color: #576782; font-family: var(--mono); font-size: 8px; letter-spacing: .6px; }
.step-icon { width: 33px; height: 33px; display: grid; place-items: center; color: #85deff; border: 1px solid rgba(121,192,255,.17); border-radius: 8px; background: rgba(75, 142, 240, .07); }
.step-card:nth-child(2) .step-icon { color: #b998ff; border-color: rgba(182,150,255,.18); background: rgba(152,108,255,.07); }
.step-card h3 { margin: 15px 0 7px; font-family: var(--sans); font-size: 13px; letter-spacing: -.25px; }
.step-card p { max-width: 295px; margin: 0; color: #8692a8; font-size: 9px; line-height: 1.7; }
.step-line { position: absolute; top: 37px; right: -14px; z-index: 1; width: 15px; height: 1px; background: linear-gradient(90deg, rgba(109,193,250,.54), rgba(145,127,255,.04)); }
.step-card:last-child .step-line { display: none; }
.server-callout { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(93, 189, 241, .13); border-radius: 8px; background: linear-gradient(98deg, rgba(33, 93, 130, .12), rgba(73, 65, 127, .08)); }
.callout-icon { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; color: var(--cyan); border-radius: 7px; background: rgba(77, 171, 222, .12); }
.server-callout strong { font-size: 10px; font-weight: 700; }
.server-callout p { margin: 3px 0 0; color: #8492aa; font-size: 9px; }
.callout-badge { display: flex; align-items: center; gap: 7px; margin-left: auto; white-space: nowrap; padding: 6px 8px; border: 1px solid rgba(102, 214, 173, .15); border-radius: 4px; color: #86d8b5; font-family: var(--mono); font-size: 7px; letter-spacing: .65px; }
.callout-badge .pulse-dot { width: 4px; height: 4px; }

.download-section { padding-top: 72px; padding-bottom: 75px; }
.download-heading { margin-bottom: 24px; }
.download-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.download-panel { position: relative; min-width: 0; margin: 0; padding: 19px 18px 15px; border: 1px solid rgba(151, 178, 228, .15); border-radius: 16px; background: linear-gradient(136deg, #111a2d, #0c1222); box-shadow: inset 0 1px rgba(255,255,255,.035); overflow: hidden; }
.download-platform-card { display: flex; flex-direction: column; }
.download-panel::before { content: ''; position: absolute; top: -230px; right: -30px; width: 480px; height: 260px; background: radial-gradient(ellipse, rgba(69, 121, 242, .17), transparent 68%); pointer-events: none; }
.download-panel-head { position: relative; display: flex; align-items: center; justify-content: space-between; }
.panel-kicker { color: #7f91af; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: 1.15px; }
.platform-title { display: flex; align-items: center; gap: 11px; }
.platform-symbol { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(131,193,255,.18); border-radius: 9px; color: #83dfff; background: rgba(85,151,255,.08); }
.platform-mac { color: #c7d5eb; border-color: rgba(180,190,218,.18); background: rgba(144,157,184,.07); }
.platform-linux { color: #b59aff; border-color: rgba(180,145,255,.2); background: rgba(151,101,255,.075); }
.platform-title h3 { margin: 0; font-family: var(--sans); font-size: 18px; letter-spacing: -.55px; }
.platform-title p { margin: 3px 0 0; color: #8795ab; font-size: 8px; }
.client-list { flex: 1; margin-top: 15px; border-top: 1px solid rgba(143, 167, 211, .1); }
.client-row { display: flex; align-items: center; gap: 9px; min-height: 60px; padding: 9px 2px; border-bottom: 1px solid rgba(143, 167, 211, .1); transition: background .16s, padding .16s; }
.client-row:hover { background: rgba(87, 127, 204, .05); padding-left: 7px; padding-right: 5px; }
.client-icon { flex: 0 0 auto; width: 37px; height: 37px; display: grid; place-items: center; color: #a58fff; border: 1px solid rgba(165, 145, 255, .17); border-radius: 8px; background: rgba(126, 99, 224, .09); }
.download-rayvpn { color: #87e6f4; border-color: rgba(115, 209, 255, .2); background: linear-gradient(145deg, rgba(38, 148, 188, .13), rgba(116, 82, 206, .12)); }
.download-rayvpn img { width: 25px; height: 25px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(106, 227, 245, .22)); }
.download-wireguard { color: #b59aff; border-color: rgba(180, 145, 255, .2); background: rgba(151, 101, 255, .08); }
.client-row-disabled { opacity: .64; cursor: not-allowed; }
.client-info { min-width: 0; flex: 1; }
.client-title { display: flex; align-items: center; gap: 6px; color: #e0e9f8; font-weight: 700; font-size: 10px; }
.external-indicator { display: inline-flex; color: #63748e; }
.client-info p { margin: 3px 0 0; color: #8995aa; font-size: 9px; }
.client-note { display: inline-block; margin-top: 4px; color: #606f87; font-family: var(--mono); font-size: 7px; letter-spacing: .05px; }
.client-action { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #9ac8fc; font-size: 8px; white-space: nowrap; }
.client-download { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(145, 174, 228, .13); border-radius: 6px; color: #9ac8fc; background: rgba(94, 139, 227, .055); }
.client-row:hover .client-download { color: #c4f2ff; border-color: rgba(126,204,255,.29); background: rgba(72, 160, 224, .11); }
.download-footnote { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #68758d; font-size: 8px; }
.download-footnote svg { color: #83bded; }
.download-feedback { margin: 0 0 13px; padding: 10px 12px; border: 1px solid rgba(113, 222, 174, .19); border-radius: 7px; color: #9be5c4; background: rgba(47,126,99,.1); font-size: 10px; }
.download-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; color: #7d8ba4; font-size: 9px; }
.download-notice svg { flex: 0 0 auto; color: #94aee0; }
.download-help { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 19px auto 0; color: #718098; font-size: 9px; }
.download-help > svg { color: #8195b4; }
.download-help a { display: inline-flex; gap: 5px; align-items: center; margin-left: 4px; color: #a1c9ed; }

.security-section { padding-top: 13px; padding-bottom: 89px; }
.security-card { min-height: 284px; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 34px 55px; border: 1px solid rgba(148, 172, 218, .12); border-radius: 10px; background: radial-gradient(ellipse 50% 95% at 77% 49%, rgba(54, 70, 158, .18), transparent 73%), linear-gradient(110deg, rgba(15, 21, 36, .95), rgba(12, 15, 29, .95)); overflow: hidden; }
.security-copy { position: relative; z-index: 1; max-width: 520px; }
.security-copy h2 { margin-top: 14px; font-size: 29px; }
.security-copy p { max-width: 435px; margin: 13px 0 17px; color: #8995ab; font-size: 10px; line-height: 1.8; }
.security-visual { width: 270px; height: 220px; position: relative; display: grid; place-items: center; }
.security-rings { width: 198px; height: 198px; position: relative; display: grid; place-items: center; }
.security-ring { position: absolute; border: 1px solid rgba(127, 180, 255, .16); border-radius: 50%; transform: rotate(-28deg); }
.ring-a { width: 198px; height: 96px; }
.ring-b { width: 145px; height: 202px; transform: rotate(43deg); border-color: rgba(176, 146, 255, .17); }
.security-rings::before, .security-rings::after { content: ''; position: absolute; border: 1px solid rgba(112, 199, 255, .1); border-radius: 50%; }
.security-rings::before { width: 155px; height: 155px; }
.security-rings::after { width: 108px; height: 108px; border-color: rgba(148, 160, 255, .1); }
.security-core { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(158, 211, 255, .36); border-radius: 18px; color: #a4e8ff; background: linear-gradient(140deg, rgba(72, 168, 228, .21), rgba(104, 88, 211, .2)); box-shadow: 0 0 33px rgba(96, 164, 255, .24), inset 0 1px rgba(255,255,255,.16); transform: rotate(45deg); }
.security-core svg { transform: rotate(-45deg); }
.security-pill, .security-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(148, 180, 234, .14); border-radius: 5px; color: #9aaac4; background: rgba(12, 19, 35, .75); font-family: var(--mono); font-size: 7px; letter-spacing: .45px; white-space: nowrap; }
.security-pill { top: 17px; right: -11px; }
.security-chip { left: -8px; bottom: 14px; }
.security-pill .pulse-dot { width: 4px; height: 4px; }

.site-footer { max-width: 1240px; margin: 0 auto; padding: 0 44px 22px; border-top: 1px solid rgba(155, 175, 216, .09); }
.footer-top { min-height: 67px; display: flex; align-items: center; gap: 15px; }
.brand-compact { font-size: 16px; gap: 7px; }
.brand-compact img { width: 25px; height: 25px; }
.footer-top > span { margin-left: 3px; color: #596983; font-family: var(--mono); font-size: 7px; letter-spacing: .85px; }
.footer-social { display: flex; gap: 6px; margin-left: auto; }
.footer-social a { width: 26px; height: 26px; display: grid; place-items: center; color: #75849d; border: 1px solid rgba(152,173,212,.13); border-radius: 6px; }
.footer-social a:hover { color: #9eeaff; border-color: rgba(131,210,252,.27); }
.footer-bottom { min-height: 35px; display: flex; align-items: center; justify-content: space-between; color: #54617a; font-family: var(--mono); font-size: 7px; letter-spacing: .7px; }
.footer-bottom > span:nth-child(2) { margin-left: auto; margin-right: 22px; }
.footer-star { color: #8e85ff; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 4px; color: #8a98b0; }

.auth-page { min-height: calc(100vh - 76px); position: relative; display: flex; align-items: center; padding: 57px 24px; overflow: hidden; }
.auth-atmosphere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 80% at 24% 49%, rgba(35, 85, 147, .16), transparent 75%), radial-gradient(ellipse 40% 70% at 82% 48%, rgba(91, 65, 169, .14), transparent 72%); }
.auth-layout { width: min(100%, 960px); margin: 0 auto; position: relative; display: grid; grid-template-columns: 1fr 395px; gap: 86px; align-items: center; }
.auth-story { min-height: 440px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 30px 5px; }
.auth-story h1 { font-size: 53px; letter-spacing: -3.4px; margin: 25px 0 15px; }
.auth-story > p { max-width: 390px; margin: 0; color: #929fb6; font-size: 13px; line-height: 1.85; }
.auth-story-rules { display: flex; flex-direction: column; gap: 13px; margin-top: 27px; color: #aab7cc; font-size: 10px; }
.auth-story-rules span { display: flex; align-items: center; gap: 10px; }
.auth-story-rules svg { color: #83dfff; }
.auth-ray { display: flex; align-items: center; gap: 11px; position: absolute; bottom: 5px; left: 0; color: #62708c; font-family: var(--mono); font-size: 7px; letter-spacing: 1px; }
.auth-ray img { width: 31px; height: 31px; object-fit: contain; opacity: .78; }
.auth-card { position: relative; padding: 26px 26px 19px; border: 1px solid rgba(155, 180, 227, .21); border-radius: 18px; background: linear-gradient(143deg, #141d32, #0d1425); box-shadow: inset 0 1px rgba(255,255,255,.055); }
.auth-card-head { display: flex; gap: 12px; align-items: center; }
.auth-mini-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(114, 210, 255, .19); border-radius: 9px; background: rgba(78, 155, 214, .1); }
.auth-mini-mark img { width: 29px; height: 29px; object-fit: contain; }
.auth-card-head h2 { margin: 5px 0 0; font-family: var(--sans); font-size: 19px; letter-spacing: -.7px; }
.auth-subtitle { margin: 14px 0 18px; color: #8f9cb3; font-size: 10px; }
.setup-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px; border: 1px solid rgba(140, 178, 242, .14); border-radius: 6px; color: #94a7c5; background: rgba(71, 111, 182, .09); font-size: 9px; line-height: 1.6; }
.setup-hint svg { flex: 0 0 auto; margin-top: 1px; color: #8ddfff; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin: 0 0 6px; color: #aebbd0; font-size: 9px; font-weight: 600; }
.input-wrap { display: flex; align-items: center; gap: 9px; height: 39px; margin-bottom: 14px; padding: 0 11px; border: 1px solid rgba(146, 169, 209, .15); border-radius: 6px; color: #687a98; background: rgba(5, 9, 18, .48); transition: border-color .18s, box-shadow .18s; }
.input-wrap:focus-within { border-color: rgba(120, 203, 255, .5); box-shadow: 0 0 0 3px rgba(90, 165, 247, .08); }
.input-wrap > span { font-size: 13px; }
.input-wrap input { width: 100%; min-width: 0; padding: 0; outline: none; border: 0; color: #eaf3ff; background: transparent; font-size: 10px; }
.input-wrap input::placeholder { color: #586783; }
.auth-submit { min-height: 40px; justify-content: space-between; padding: 0 13px; margin-top: 3px; }
.form-feedback { margin: 11px 0 0; padding: 9px 10px; border-radius: 5px; font-size: 9px; line-height: 1.55; }
.error-feedback { color: #ffb3bd; border: 1px solid rgba(255, 113, 140, .2); background: rgba(156, 42, 72, .12); }
.success-feedback { color: #9be5c4; border: 1px solid rgba(113, 222, 174, .19); background: rgba(47, 126, 99, .1); }
.auth-resend { align-self: flex-start; padding: 9px 0 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.auth-resend:disabled { opacity: .65; cursor: wait; }
.auth-switch { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 18px; color: #7f8da6; font-size: 9px; }
.auth-switch button { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; color: #a2dfff; background: none; cursor: pointer; font-size: 9px; font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #57657e; font-family: var(--mono); font-size: 7px; letter-spacing: .65px; white-space: nowrap; }
.auth-divider span { flex: 1; height: 1px; background: rgba(144, 165, 204, .1); }
.auth-legal { display: flex; align-items: flex-start; gap: 6px; margin: 11px 0 0; color: #5e6c83; font-size: 8px; line-height: 1.6; }
.auth-legal svg { flex: 0 0 auto; margin-top: 1px; color: #8092b1; }

.dashboard-page { max-width: 1152px; margin: 0 auto; padding: 52px 42px 20px; }
.dashboard-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.dashboard-top h1 { font-size: 43px; letter-spacing: -2.6px; margin: 18px 0 9px; }
.dashboard-top p { max-width: 500px; margin: 0; color: #8d9ab0; font-size: 11px; line-height: 1.7; }
.signout-button { padding: 10px 12px; margin-top: 9px; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: 1.27fr .73fr; gap: 14px; }
.dashboard-main-card, .dashboard-side-card { min-height: 300px; padding: 21px; border: 1px solid rgba(149, 174, 222, .16); border-radius: 16px; background: linear-gradient(145deg, #141d32, #0d1425); }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; }
.dash-card-head h2, .dashboard-side-card h2 { margin: 5px 0 0; font-family: var(--sans); font-size: 18px; letter-spacing: -.5px; }
.status-pill { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(216, 181, 112, .16); border-radius: 4px; color: #d4b67e; font-family: var(--mono); font-size: 7px; letter-spacing: .55px; }
.status-pending .status-dot { width: 5px; height: 5px; background: #edbd69; box-shadow: 0 0 8px rgba(237,189,105,.55); }
.server-empty { display: flex; align-items: center; gap: 16px; max-width: 440px; margin: 22px 0 16px; }
.server-halo { flex: 0 0 auto; width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid rgba(122, 186, 255, .19); border-radius: 21px; background: radial-gradient(circle, rgba(80, 153, 255, .19), rgba(58, 75, 149, .08) 60%, transparent); box-shadow: 0 0 35px rgba(89, 134, 229, .1); }
.server-halo img { width: 51px; height: 51px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(91,211,255,.28)); }
.server-empty h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 13px; }
.server-empty p, .dashboard-side-card > p { margin: 0; color: #8895ac; font-size: 9px; line-height: 1.7; }
.dashboard-main-card > .button { padding: 11px 13px; font-size: 10px; }
.server-private-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(141, 165, 209, .1); color: #73819a; font-size: 8px; }
.server-private-note svg { color: #81dafa; }
.dashboard-side-card h2 { margin-top: 7px; }
.dashboard-side-card > p { margin-top: 7px; margin-bottom: 16px; }
.connection-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid rgba(141,165,209,.09); }
.connection-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(136,185,246,.13); border-radius: 6px; color: #91cbfc; background: rgba(85,140,215,.06); }
.connection-row > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.connection-row b { font-size: 9px; }
.connection-row span { color: #77859c; font-size: 8px; }
.dashboard-next { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 13px 16px; border: 1px solid rgba(153, 175, 220, .12); border-radius: 8px; background: rgba(12, 18, 32, .58); }
.next-icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; color: #b49bff; border-radius: 8px; background: rgba(145,113,235,.1); }
.dashboard-next h3 { margin: 0 0 4px; font-size: 10px; }
.dashboard-next p { margin: 0; color: #8290a8; font-size: 8px; }
.next-actions { display: flex; align-items: center; gap: 19px; margin-left: auto; }
.next-install { padding: 9px 10px; font-size: 8px; }
.dashboard-page .download-section { max-width: none; padding: 71px 0 55px; }
.dashboard-page .download-heading { display: none; }
.dashboard-page .download-panel { max-width: 100%; }
.dashboard-gate { min-height: calc(100vh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 20px; text-align: center; background: radial-gradient(ellipse 50% 55% at 50% 46%, rgba(64,92,182,.17), transparent 75%); }
.gate-mark { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(119,202,255,.17); border-radius: 21px; background: rgba(76,141,218,.085); }
.gate-mark img { width: 49px; height: 49px; object-fit: contain; }
.dashboard-gate h1 { font-size: 42px; margin: 15px 0 8px; letter-spacing: -2px; }
.dashboard-gate p { margin: 0 0 19px; color: #8997ae; font-size: 11px; }
.dashboard-gate .button { padding: 12px 15px; }

@media (min-width: 1400px) {
  .hero-grid { min-height: 610px; }
  .ray-scene { height: 510px; }
}
@media (max-width: 1020px) {
  .header-inner, .hero-width { padding-left: 28px; padding-right: 28px; }
  .hero-grid { grid-template-columns: 50% 50%; min-height: 535px; }
  .hero-copy { padding-left: 0; }
  .hero-copy h1 { font-size: 58px; }
  .ray-scene { height: 420px; }
  .orbit-one { width: 340px; height: 160px; }
  .orbit-two { width: 390px; height: 205px; }
  .scene-caption { right: 4px; }
  .section-wrap, .download-section { padding-left: 30px; padding-right: 30px; }
  .hero-bottom-right { right: 28px; }
  .auth-layout { gap: 45px; }
  .dashboard-page { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 760px) {
  .site-header { height: 66px; }
  .header-inner { padding: 0 21px; }
  .brand { font-size: 18px; }
  .brand img { width: 29px; height: 29px; }
  .mobile-menu { display: grid; place-items: center; color: #dce9fc; }
  .nav-links { display: none; position: absolute; left: 14px; right: 14px; top: 60px; flex-direction: column; align-items: stretch; gap: 0; padding: 9px; border: 1px solid rgba(152, 181, 232, .18); border-radius: 8px; background: rgba(10, 15, 28, .97); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
  .nav-links.nav-open { display: flex; }
  .nav-links > a:not(.button) { padding: 12px 10px; border-bottom: 1px solid rgba(142,165,208,.085); }
  .nav-links .button { margin-top: 8px; }
  .nav-links .nav-login { margin-left: 0; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; padding: 0 22px; }
  .hero-copy { padding: 52px 0 5px; }
  .hero-copy h1 { margin: 22px 0 14px; font-size: clamp(42px, 10vw, 58px); letter-spacing: -3px; }
  .hero-description { max-width: 490px; font-size: 12px; }
  .hero-actions { flex-wrap: wrap; gap: 9px; margin-top: 23px; }
  .button-large { min-height: 44px; padding: 13px 13px; font-size: 10px; }
  .hero-proof { flex-wrap: wrap; gap: 8px; margin-top: 25px; font-size: 9px; }
  .ray-scene { width: 100%; height: 310px; margin: 3px auto 5px; }
  .ray-art { width: min(100%, 390px); height: 310px; max-height: 100%; }
  .orbit-one { width: min(85vw, 300px); height: 130px; }
  .orbit-two { width: min(94vw, 360px); height: 180px; }
  .orbit-three { width: min(67vw, 255px); height: 260px; }
  .chip-encrypt { top: 21px; right: 0; font-size: 8px; }
  .chip-node { bottom: 52px; left: 0; }
  .scene-caption { right: 0; bottom: 5px; font-size: 6px; }
  .hero-bottom-bar { padding: 0 21px; height: 43px; gap: 15px; font-size: 7px; }
  .hero-bottom-bar > span:first-child { display: none; }
  .hero-bottom-right { display: none !important; }
  .section-wrap, .download-section { padding-left: 22px; padding-right: 22px; }
  .section-heading { display: block; margin-bottom: 23px; }
  .section-heading h2 { margin-top: 12px; font-size: 29px; }
  .section-heading > p { max-width: 520px; margin-top: 13px; font-size: 10px; }
  .how-section { padding: 59px 0; }
  .steps-grid { grid-template-columns: 1fr; gap: 9px; }
  .step-card { min-height: 0; padding: 15px; }
  .step-card h3 { margin-top: 11px; }
  .step-card p { max-width: 450px; }
  .step-line { display: none; }
  .server-callout { align-items: flex-start; gap: 10px; padding: 11px; }
  .server-callout p { line-height: 1.65; }
  .callout-badge { display: none; }
  .download-section { padding-top: 62px; padding-bottom: 61px; }
  .download-heading { display: block; }
  .download-heading > p { margin-top: 12px; }
  .download-platform-grid { grid-template-columns: 1fr; gap: 10px; }
  .download-panel { padding: 18px 15px 14px; }
  .client-row { gap: 10px; min-height: 64px; }
  .client-info p { line-height: 1.45; }
  .client-action { font-size: 8px; }
  .client-download { width: 26px; height: 26px; }
  .download-footnote { align-items: flex-start; line-height: 1.6; }
  .download-footnote svg { flex: 0 0 auto; margin-top: 1px; }
  .download-help { justify-content: flex-start; line-height: 1.6; }
  .security-section { padding-bottom: 61px; }
  .security-card { align-items: flex-start; min-height: 0; padding: 23px 20px 198px; }
  .security-copy h2 { font-size: 25px; }
  .security-copy p { font-size: 9px; }
  .security-visual { width: 210px; height: 190px; position: absolute; bottom: -9px; right: 10px; transform: scale(.82); transform-origin: bottom right; }
  .site-footer { padding: 0 21px 16px; }
  .footer-top { min-height: 59px; }
  .footer-top > span { font-size: 6px; letter-spacing: .4px; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; gap: 9px; padding-top: 11px; font-size: 6px; }
  .footer-bottom > span:nth-child(2) { margin-left: 0; margin-right: auto; }
  .auth-page { min-height: auto; padding: 39px 20px; }
  .auth-layout { max-width: 460px; grid-template-columns: 1fr; gap: 23px; }
  .auth-story { min-height: 0; padding: 8px 0 0; }
  .auth-story h1 { font-size: 42px; margin: 18px 0 9px; }
  .auth-story > p { max-width: 430px; font-size: 11px; }
  .auth-story-rules { display: none; }
  .auth-ray { display: none; }
  .auth-card { padding: 21px 19px 17px; }
  .dashboard-page { padding: 38px 21px 10px; }
  .dashboard-top { gap: 12px; }
  .dashboard-top h1 { font-size: 36px; letter-spacing: -2px; }
  .dashboard-top p { max-width: 365px; font-size: 10px; }
  .signout-button { white-space: nowrap; padding: 9px 10px; font-size: 8px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-main-card, .dashboard-side-card { min-height: 0; padding: 17px; }
  .server-empty { align-items: flex-start; gap: 11px; margin: 18px 0 15px; }
  .server-halo { width: 56px; height: 56px; border-radius: 16px; }
  .server-halo img { width: 43px; height: 43px; }
  .server-empty h3 { font-size: 11px; }
  .server-empty p { font-size: 8px; }
  .dashboard-next { flex-wrap: wrap; }
  .next-actions { width: 100%; justify-content: space-between; margin-left: 44px; }
  .dashboard-page .download-section { padding: 53px 0 39px; }
  .dashboard-gate { min-height: calc(100vh - 150px); }
}
@media (max-width: 420px) {
  .hero-copy h1 { font-size: 41px; }
  .hero-actions .button-primary { width: 100%; }
  .hero-proof { font-size: 8px; }
  .hero-bottom-bar { gap: 13px; }
  .footer-top > span { display: none; }
  .status-pill { font-size: 6px; }
  .auth-card { padding-left: 15px; padding-right: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}