:root {
  --black: #050609;
  --black-2: #090b11;
  --black-3: #11141d;
  --panel: rgba(17, 19, 27, 0.38);
  --panel-2: rgba(255, 255, 255, 0.04);
  --bone: #f7f5f1;
  --bone-soft: rgba(247, 245, 241, 0.76);
  --bone-muted: rgba(247, 245, 241, 0.56);
  --bone-faint: rgba(247, 245, 241, 0.36);
  --gold: #f4ca73;
  --gold-2: #d8a94e;
  --gold-3: #6e5428;
  --red: #ff6b70;
  --red-2: #9f303b;
  --green: #67e58b;
  --line: rgba(255, 255, 255, 0.15);
  --line-soft: rgba(255, 255, 255, 0.095);
  --glass: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.006) 46%, rgba(255,255,255,.018));
  --glass-strong: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.014) 52%, rgba(255,255,255,.032));
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.27);
  --glass-edge-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(255,205,128,.05), inset 0 -1px 0 rgba(255,255,255,.04);
  --shadow-red: 0 24px 90px rgba(255, 75, 86, 0.17);
  --shadow-gold: 0 24px 90px rgba(244, 202, 115, 0.15);
}

html { background: #050609; }

body {
  color: var(--bone);
  background:
    radial-gradient(ellipse 75% 55% at 78% 5%, rgba(230, 166, 70, .15), transparent 65%),
    radial-gradient(ellipse 60% 55% at 3% 18%, rgba(170, 36, 60, .2), transparent 68%),
    radial-gradient(ellipse 55% 42% at 52% 82%, rgba(46, 64, 130, .14), transparent 72%),
    linear-gradient(165deg, #07090f 0%, #030407 44%, #06070b 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 15%, rgba(255,255,255,.025) 36%, transparent 57%),
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.07), transparent 42%);
}

body::after {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .48) 100%);
}

#stars { opacity: .34; }
.ambient { opacity: .75; }
.ambient::before,
.ambient::after { filter: blur(54px); opacity: .5; }

.page { width: min(1240px, calc(100% - 44px)); }

.topbar {
  top: 14px;
  margin-top: 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-highlight);
  border-radius: 24px;
  background: rgba(10, 12, 17, .48);
  -webkit-backdrop-filter: blur(18px) saturate(150%) contrast(106%);
  backdrop-filter: blur(18px) saturate(150%) contrast(106%);
  box-shadow: var(--glass-edge-shadow), 0 18px 52px rgba(0,0,0,.3);
}

.brand {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: .08em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(244,202,115,.2), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.24);
}

.topbar-right { gap: 20px; }
.status,
.nav-link,
.language-panel a,
.mobile-menu-button,
.mobile-menu-panel a {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  letter-spacing: .015em;
  text-transform: none;
  font-weight: 590;
}
.status { font-size: 12px; }
.nav-link {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
}
.nav-link.primary {
  color: #171109;
  border-color: rgba(255, 226, 164, .7);
  background: linear-gradient(180deg, #f9d98f, #d7a849);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px rgba(215,168,73,.2);
}
.language-toggle,
.mobile-menu-button,
.buy-modal-close {
  border-radius: 12px;
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.language-panel,
.mobile-menu-panel {
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(9, 11, 16, .34);
  -webkit-backdrop-filter: blur(20px) saturate(155%) contrast(108%);
  backdrop-filter: blur(20px) saturate(155%) contrast(108%);
  box-shadow: var(--glass-edge-shadow), 0 24px 70px rgba(0,0,0,.4);
}
.language-panel a,
.mobile-menu-panel a { border-radius: 11px; font-size: 12px; }

.hero {
  min-height: calc(100dvh - 84px);
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 48px;
  padding: 72px 0 104px;
}
.hero-copy {
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-highlight);
  border-radius: 36px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(138%) contrast(106%);
  backdrop-filter: saturate(138%) contrast(106%);
  box-shadow: var(--glass-edge-shadow), 0 34px 100px rgba(0,0,0,.3);
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 1px 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}
.hero-badge {
  margin-bottom: 24px;
  padding: 8px 13px;
  border-color: rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.042);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: none;
}
.hero-badge::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 15px var(--green); }

h1,
h2,
h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
h1 {
  font-size: clamp(50px, 6.3vw, 84px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.058em;
}
h1 .accent {
  color: transparent;
  font-style: normal;
  font-weight: 760;
  background: linear-gradient(95deg, #ff7b7f 8%, #ffc56d 95%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.lead { color: var(--bone-soft); font-size: 19px; line-height: 1.48; }

.hero-cta { gap: 10px; }
.button {
  min-height: 54px;
  padding: 15px 20px;
  border-color: rgba(255,255,255,.17);
  border-radius: 17px;
  background: rgba(255,255,255,.052);
  -webkit-backdrop-filter: saturate(140%) contrast(106%);
  backdrop-filter: saturate(140%) contrast(106%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 14px;
  font-weight: 670;
  letter-spacing: -.005em;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 34px rgba(0,0,0,.2);
}
.button:hover { transform: translateY(-2px) scale(1.01); }
.button.trial {
  color: #151109;
  border-color: rgba(255, 231, 179, .72);
  background: linear-gradient(180deg, #ffe5ad, #e6b75b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 18px 46px rgba(225,174,78,.24);
}
.button.buy {
  color: #fff;
  border-color: rgba(255, 117, 126, .42);
  background: linear-gradient(180deg, rgba(255,103,112,.92), rgba(166,43,56,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 42px rgba(170,44,57,.2);
}

.metrics {
  gap: 8px;
  border: 0;
}
.metric {
  padding: 13px 12px;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 15px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.metric strong { font-family: inherit; font-size: 17px; font-weight: 720; }
.metric span { margin-top: 3px; font-family: inherit; font-size: 10px; letter-spacing: .01em; text-transform: none; }

.hero-art { min-height: 590px; display: grid; place-items: center; }
.sigil {
  width: min(545px, 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-top-color: rgba(255,255,255,.27);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 55% 62%, rgba(255,71,83,.12), transparent 48%),
    rgba(255,255,255,.022);
  -webkit-backdrop-filter: saturate(145%) contrast(108%);
  backdrop-filter: saturate(145%) contrast(108%);
  box-shadow: var(--glass-edge-shadow), inset 0 -24px 80px rgba(0,0,0,.16), 0 45px 120px rgba(0,0,0,.32);
}
.sigil::before { inset: 8%; filter: blur(20px); opacity: .8; }

.section { padding: 108px 0; border-top-color: rgba(255,255,255,.07); }
.section-kicker,
.card-label,
.step-num,
.platforms-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-weight: 650;
  letter-spacing: .06em;
}
.section h2 { font-size: clamp(40px, 5vw, 66px); font-weight: 740; line-height: 1.02; letter-spacing: -.048em; }
.section-head p { color: var(--bone-muted); font-size: 19px; }

.actions-grid { gap: 14px; }
.action-card,
.feature-card,
.step-card,
.trust-card {
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-highlight);
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(138%) contrast(106%);
  backdrop-filter: saturate(138%) contrast(106%);
  box-shadow: var(--glass-edge-shadow), 0 24px 60px rgba(0,0,0,.22);
}
.topbar::after,
.hero-copy::after,
.action-card::after,
.feature-card::after,
.step-card::after,
.trust-card::after,
.buy-modal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  padding: 1px;
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  background: conic-gradient(from 205deg at 50% 50%, rgba(255,255,255,.03), rgba(255,255,255,.42), rgba(255,211,139,.12), rgba(255,255,255,.035), rgba(255,116,126,.1), rgba(255,255,255,.03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .78;
}
.action-card:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(255,255,255,.3); background: var(--glass-strong); }
.action-card h3,
.feature-card h3,
.step-card h3,
.trust-card h3 { font-size: 25px; font-weight: 690; letter-spacing: -.025em; }
.action-card p,
.feature-card p,
.step-card p,
.trust-card p { color: var(--bone-muted); font-size: 16px; }
.feature-card .rune,
.trust-row span { border-color: rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.earth-card { background: radial-gradient(circle at center, rgba(244,202,115,.11), transparent 57%), var(--glass); }
.earth-ring { border-color: rgba(255,255,255,.17); background: radial-gradient(circle, rgba(255,255,255,.06), transparent 64%); }
.earth-made,
.made { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; font-style: normal; font-weight: 620; letter-spacing: -.025em; }

.platforms-list span {
  padding: 10px 16px;
  border-color: rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-family: inherit;
  font-size: 13px;
  font-weight: 610;
  letter-spacing: 0;
  text-transform: none;
}
footer { background: radial-gradient(ellipse at 50% 110%, rgba(157,44,58,.14), transparent 60%); }
.footer-brand,
.footer-links a,
.made-meta { font-family: inherit; text-transform: none; letter-spacing: .01em; }

.buy-modal {
  background: rgba(3,4,8,.54);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.buy-modal-panel {
  border-color: var(--glass-border);
  border-top-color: var(--glass-highlight);
  border-radius: 30px;
  background: rgba(16,18,25,.7);
  -webkit-backdrop-filter: blur(24px) saturate(150%) contrast(108%);
  backdrop-filter: blur(24px) saturate(150%) contrast(108%);
  box-shadow: var(--glass-edge-shadow), 0 34px 110px rgba(0,0,0,.5);
}
.buy-modal h2 { font-weight: 720; letter-spacing: -.035em; }
.buy-option { border-color: rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.06); }
.buy-option:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar,
  .hero-copy,
  .action-card,
  .feature-card,
  .step-card,
  .trust-card,
  .buy-modal-panel,
  .language-panel,
  .mobile-menu-panel { background: rgba(18, 20, 27, .96); }
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 54px; }
  .hero-art { min-height: 460px; }
  .sigil { width: min(440px, 90vw); }
}

@media (max-width: 820px) {
  .page { width: min(100% - 28px, 1240px); }
  .topbar { position: sticky; top: 10px; margin-top: 10px; padding: 9px 10px 9px 13px; border-radius: 20px; }
  .hero { padding-top: 42px; }
  .hero-copy { border-radius: 30px; }
  .mobile-menu-panel { top: 74px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .page { width: min(100% - 20px, 1240px); }
  .brand { font-size: 12px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
  .hero { gap: 24px; padding: 28px 0 72px; }
  .hero-art { min-height: 320px; }
  .sigil { width: min(310px, 88vw); }
  .hero-copy { padding: 26px 20px; border-radius: 26px; }
  h1 { font-size: clamp(40px, 12.7vw, 58px); }
  .lead { max-width: none; font-size: 17px; }
  .button { min-height: 52px; }
  .metrics { gap: 7px; }
  .metric { padding: 12px 10px; border-radius: 13px; }
  .section { padding: 78px 0; }
  .section h2 { font-size: clamp(36px, 11vw, 50px); }
  .action-card,
  .feature-card,
  .step-card,
  .trust-card { border-radius: 24px; }
  .buy-modal { padding: 12px; }
  .buy-modal-panel { padding: 25px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  #stars { display: none; }
}