:root {
  --bg: #0b0912;
  --surface: #12101a;
  --surface-2: #171225;
  --line: rgba(189, 169, 255, .14);
  --primary: #8f69ff;
  --primary-soft: #a98cff;
  --text: #f0eaff;
  --muted: #8f7ad0;
  --green: #7dffb0;
  --display: "Space Grotesk", sans-serif;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.page-glow { position: fixed; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(120px); opacity: .12; pointer-events: none; z-index: -1; }
.page-glow--one { background: var(--primary); top: -15rem; right: -10rem; }
.page-glow--two { background: #4d36aa; top: 55rem; left: -20rem; }

.site-header { height: 82px; max-width: 1440px; margin: auto; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.05); }
.brand, .footer-brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; background: linear-gradient(145deg, #a98cff, #5a3eb8); clip-path: polygon(25% 0, 75% 0, 100% 23%, 100% 77%, 75% 100%, 25% 100%, 0 77%, 0 23%); box-shadow: 0 0 24px rgba(143,105,255,.35); }
.brand-mark > span { font: 800 19px/1 var(--display); }
.brand-mark > span { color: #fff; }
.brand-name, .footer-brand strong { font: 700 18px/1 var(--display); letter-spacing: .13em; }
.desktop-nav { display: flex; gap: 34px; font-size: 13px; font-weight: 600; color: #aa9dca; }
.desktop-nav a { position: relative; transition: color .25s; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--text); }
.desktop-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -31px; width: 18px; height: 2px; transform: translateX(-50%); background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.shop-link { color: #bcaeff; font-size: 13px; font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 800; transition: transform .25s, box-shadow .25s, border-color .25s; }
.button:hover { transform: translateY(-2px); }
.button--small { min-height: 41px; padding: 0 17px; font-size: 12px; }
.button--ghost { border-color: rgba(169,140,255,.25); background: rgba(143,105,255,.07); }
.button--ghost:hover { border-color: rgba(169,140,255,.55); }
.button--primary { background: linear-gradient(135deg, #8f69ff, #4d36aa); box-shadow: 0 12px 40px rgba(89,57,180,.28), inset 0 1px rgba(255,255,255,.18); }
.button--primary:hover { box-shadow: 0 16px 45px rgba(89,57,180,.42); }
.menu-button, .mobile-nav { display: none; }

.hero { max-width: 1440px; min-height: calc(100vh - 82px); margin: auto; padding: 100px 7vw 115px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; position: relative; isolation: isolate; }
.hero-grid { position: absolute; inset: 0; z-index: -3; opacity: .17; background-image: linear-gradient(rgba(143,105,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(143,105,255,.12) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to bottom, transparent, #000 25%, transparent 95%); }
.hero::before { content: ""; position: absolute; inset: 8% 0 0 50%; z-index: -2; background: radial-gradient(circle, rgba(143,105,255,.15), transparent 63%); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #bda9ff; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.eyebrow span { width: 23px; height: 1px; background: var(--primary); box-shadow: 0 0 8px var(--primary); }
h1, h2, h3 { margin: 0; font-family: var(--display); }
h1 { max-width: 780px; font-size: clamp(3.6rem, 6.4vw, 6.6rem); line-height: .94; letter-spacing: -.065em; }
h1 span, h2 span { color: transparent; background: linear-gradient(100deg, #eee7ff 5%, #8f69ff 70%, #bda9ff); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 585px; margin: 28px 0 36px; color: #a79cbe; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; gap: 14px; align-items: stretch; }
.server-address { min-width: 222px; padding: 0 17px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(18,16,26,.73); cursor: pointer; text-align: left; transition: border-color .25s, background .25s; }
.server-address:hover { border-color: rgba(169,140,255,.4); background: rgba(23,18,37,.9); }
.server-address span:nth-child(2), .floating-card span:last-child { display: flex; flex-direction: column; gap: 3px; }
.server-address small, .floating-card small { color: #716885; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.server-address strong { font: 600 13px var(--display); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 10px var(--green); }
.copy-icon { margin-left: auto; color: #776994; }
.hero-meta { margin-top: 30px; display: flex; align-items: center; gap: 14px; }
.hero-meta p { margin: 0; color: #6f667f; font-size: 10px; line-height: 1.6; }
.hero-meta strong { color: #aaa0bb; font-size: 11px; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar-stack i { width: 28px; height: 28px; margin-left: -7px; border: 2px solid var(--bg); border-radius: 50%; background: linear-gradient(145deg, #312452, #8f69ff); }
.avatar-stack i:nth-child(2) { background: linear-gradient(145deg, #8f7ad0, #312452); }
.avatar-stack i:nth-child(3) { background: linear-gradient(145deg, #5a3eb8, #171225); }

.hero-visual { height: 590px; position: relative; display: grid; place-items: center; }
.portal-ring { position: absolute; border-radius: 50%; }
.portal-ring--outer { width: 450px; height: 450px; border: 1px solid rgba(169,140,255,.16); box-shadow: inset 0 0 90px rgba(143,105,255,.08); animation: spin 32s linear infinite; }
.portal-ring--outer::before, .portal-ring--outer::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 15px var(--primary); }
.portal-ring--outer::before { top: 42px; left: 78px; }
.portal-ring--outer::after { right: 10px; bottom: 145px; }
.portal-ring--inner { width: 330px; height: 330px; border: 1px dashed rgba(169,140,255,.25); animation: spin 23s linear reverse infinite; }
.portal-core { width: 240px; height: 240px; display: grid; place-items: center; position: relative; border: 1px solid rgba(189,169,255,.3); border-radius: 50%; background: radial-gradient(circle at 42% 33%, #312452, #171225 50%, #0b0912 72%); box-shadow: 0 0 80px rgba(143,105,255,.24), inset 0 0 40px rgba(143,105,255,.14); }
.core-mark { color: rgba(240,234,255,.9); font: 800 96px var(--display); text-shadow: 0 0 30px rgba(143,105,255,.7); transform: skew(-5deg); }
.core-label { position: absolute; bottom: 35px; color: #8f7ad0; text-align: center; font: 700 7px/1.5 var(--display); letter-spacing: .28em; }
.floating-card { position: absolute; min-width: 190px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(189,169,255,.14); border-radius: 8px; background: rgba(18,16,26,.78); backdrop-filter: blur(16px); box-shadow: 0 15px 50px rgba(0,0,0,.25); }
.floating-card strong { font: 600 11px var(--display); }
.floating-card.is-offline .status-dot { background: #ff8f9a; box-shadow: 0 0 10px #ff8f9a; }
.floating-card--online { top: 120px; right: 10px; }
.floating-card--season { bottom: 110px; left: 0; }
.card-icon { width: 25px; height: 25px; display: grid; place-items: center; color: var(--primary-soft); border-radius: 5px; background: rgba(143,105,255,.14); }
.hero-orbit { position: absolute; border: 1px solid rgba(143,105,255,.08); transform: rotate(-12deg); z-index: -1; }
.hero-orbit--one { width: 670px; height: 260px; border-radius: 50%; right: -80px; top: 190px; }
.hero-orbit--two { width: 520px; height: 200px; border-radius: 50%; right: 10px; top: 230px; transform: rotate(22deg); }
.scroll-cue { position: absolute; left: 7vw; bottom: 31px; display: flex; align-items: center; gap: 11px; color: #625a70; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.scroll-cue span { width: 1px; height: 26px; background: linear-gradient(var(--primary), transparent); }

.trust-strip { max-width: 1280px; margin: 0 auto; padding: 27px 5vw; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: rgba(18,16,26,.35); }
.trust-strip div { display: grid; grid-template-columns: 35px 1fr; align-items: center; padding: 4px 24px; border-right: 1px solid var(--line); }
.trust-strip div:last-child { border: 0; }
.trust-strip span { grid-row: 1 / 3; color: var(--primary-soft); font-size: 18px; }
.trust-strip strong { font: 600 11px var(--display); }
.trust-strip small { margin-top: 4px; color: #665e75; font-size: 9px; }

.section { max-width: 1280px; margin: auto; padding: 130px 5vw; }
.section-heading { max-width: 740px; margin-bottom: 55px; }
h2 { font-size: clamp(2.5rem, 4.6vw, 4.7rem); line-height: 1.02; letter-spacing: -.055em; }
.section-heading p, .start-copy p { max-width: 580px; color: #8e849f; font-size: 14px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.feature-card { min-height: 270px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(23,18,37,.85), rgba(13,11,22,.78)); }
.feature-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; top: -80px; border-radius: 50%; background: var(--primary); filter: blur(80px); opacity: .08; }
.feature-card--large { grid-row: span 2; min-height: 556px; }
.feature-card--accent { background: linear-gradient(135deg, rgba(49,36,82,.8), rgba(13,11,22,.9)); }
.feature-number { position: absolute; top: 24px; right: 27px; color: #494052; font: 600 10px var(--display); }
.feature-icon { width: 40px; height: 40px; margin-bottom: 20px; display: grid; place-items: center; color: var(--primary-soft); border: 1px solid rgba(169,140,255,.22); border-radius: 7px; background: rgba(143,105,255,.1); }
.feature-card h3 { font-size: 20px; letter-spacing: -.025em; }
.feature-card p { max-width: 430px; margin: 11px 0 0; color: #82788f; font-size: 12px; line-height: 1.75; }
.feature-content { position: relative; z-index: 2; }
.landscape-art { position: absolute; inset: 0; opacity: .72; mask-image: linear-gradient(#000, #000 70%, transparent); }
.moon { position: absolute; width: 110px; height: 110px; top: 70px; right: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bda9ff, #5a3eb8 55%, transparent 57%); filter: drop-shadow(0 0 30px rgba(143,105,255,.4)); }
.mountain { position: absolute; bottom: 120px; width: 75%; height: 55%; background: linear-gradient(145deg, #312452, #12101a); clip-path: polygon(0 100%, 25% 35%, 42% 64%, 62% 20%, 100% 100%); }
.m1 { left: -10%; }
.m2 { right: -30%; bottom: 90px; opacity: .7; transform: scale(.8); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(transparent, #0d0b16 45%); }

.start { padding-top: 20px; padding-bottom: 130px; }
.start-panel { padding: 70px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; border: 1px solid rgba(169,140,255,.2); border-radius: 16px; background: radial-gradient(circle at 10% 50%, rgba(143,105,255,.18), transparent 35%), linear-gradient(135deg, #171225, #0d0b16); box-shadow: 0 30px 100px rgba(0,0,0,.22); }
.start-copy p { margin: 20px 0 30px; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 55px 1fr; gap: 18px; align-items: start; padding: 23px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border: 0; }
.steps > li > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary-soft); border: 1px solid rgba(169,140,255,.23); border-radius: 50%; font: 600 10px var(--display); }
.steps div { display: flex; flex-direction: column; gap: 8px; }
.steps strong { font: 600 15px var(--display); }
.steps small { color: #7c728b; font-size: 11px; line-height: 1.6; }

.site-footer { max-width: 1280px; margin: auto; padding: 50px 5vw 35px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-top: 1px solid var(--line); color: #756b84; }
.footer-brand .brand-mark { width: 32px; height: 32px; }
.footer-brand > div { display: flex; flex-direction: column; gap: 3px; }
.footer-brand strong { color: var(--text); font-size: 16px; }
.footer-brand small { color: #9b8bab; font-size: 8px; letter-spacing: .3em; }
.site-footer > p { grid-column: 1; margin: 0; font-size: 12px; }
.footer-links { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 25px; font-size: 12px; font-weight: 600; }
.footer-links a:hover { color: var(--primary-soft); }
.copyright { grid-column: 1 / 3; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.06); color: #8f849d; font-size: 11px; line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; padding: 13px 18px; border: 1px solid rgba(125,255,176,.25); border-radius: 7px; color: var(--green); background: rgba(13,11,22,.94); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal--delay { transition-delay: .15s; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .desktop-nav, .header-actions { display: none; }
  .menu-button { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 0; background: transparent; cursor: pointer; }
  .menu-button span { width: 23px; height: 1px; margin-left: auto; background: var(--text); transition: .25s; }
  .menu-button span:last-child { width: 16px; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { width: 23px; transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { position: absolute; top: 82px; left: 0; right: 0; z-index: 25; padding: 25px 5vw; flex-direction: column; gap: 21px; border-bottom: 1px solid var(--line); background: rgba(11,9,18,.97); backdrop-filter: blur(15px); }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { color: #b7abc9; font-size: 13px; font-weight: 700; }
  .hero { grid-template-columns: 1fr; padding-top: 85px; text-align: center; }
  .hero-content { z-index: 2; }
  .eyebrow, .hero-actions, .hero-meta { justify-content: center; }
  .hero-copy { margin-inline: auto; }
  .hero-visual { height: 470px; margin-top: -10px; }
  .scroll-cue { display: none; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip div:nth-child(2) { border-right: 0; }
  .trust-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .site-header { height: 70px; }
  .mobile-nav { top: 70px; }
  .hero { min-height: auto; padding: 70px 6vw 85px; }
  h1 { font-size: clamp(3.05rem, 14vw, 4.7rem); }
  .hero-copy { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button, .server-address { width: 100%; }
  .server-address { min-height: 55px; }
  .hero-visual { height: 390px; margin-inline: -5vw; }
  .portal-ring--outer { width: 330px; height: 330px; }
  .portal-ring--inner { width: 255px; height: 255px; }
  .portal-core { width: 185px; height: 185px; }
  .core-mark { font-size: 73px; }
  .core-label { bottom: 25px; }
  .floating-card { min-width: 160px; padding: 11px; }
  .floating-card--online { top: 65px; right: 0; }
  .floating-card--season { bottom: 35px; left: 0; }
  .trust-strip { margin: 0 4vw; grid-template-columns: 1fr; padding: 10px 0; }
  .trust-strip div { padding: 16px 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip div:nth-child(3) { border-bottom: 1px solid var(--line); }
  .section { padding: 90px 6vw; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card--large { grid-row: auto; min-height: 440px; }
  .start { padding-top: 0; }
  .start-panel { padding: 42px 25px; grid-template-columns: 1fr; gap: 35px; }
  .site-footer { margin-inline: 5vw; padding-inline: 0; grid-template-columns: 1fr; }
  .site-footer > p, .footer-links, .copyright { grid-column: 1; grid-row: auto; }
  .footer-links { flex-wrap: wrap; gap: 15px 22px; }
}

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

/* Readability pass: secondary copy must remain comfortable on desktop and mobile. */
.hero-meta p { font-size: 12px; }
.hero-meta strong { font-size: 13px; }
.trust-strip strong { font-size: 13px; }
.trust-strip small { font-size: 11px; line-height: 1.5; }
.section-heading p, .start-copy p { font-size: 15px; }
.feature-card p { font-size: 14px; }
.steps strong { font-size: 16px; }
.steps small { font-size: 13px; }