/* Layout refinements: one quiet landscape, clear reading surfaces, generous spacing. */
:root {
  --page-landscape:url('/assets/xxtra-world-v2.webp');
  --page-floor:#100e1a;
  --glass-surface:#211c31ed;
  --glass-line:#b3a2ca45;
  --copy-soft:#c8bfd4;
}
[data-season="winter"] {
  --page-landscape:url('/assets/xxtra-winter-world.webp');
  --page-floor:#0c1222;
  --glass-surface:#192338eb;
  --glass-line:#b6d6eb45;
  --copy-soft:#c8d5e4;
}
body,
[data-season="winter"] body {
  position:relative;
  isolation:isolate;
  background-color:var(--page-floor);
  background-image:radial-gradient(ellipse at 14% 16%,#6c3c7121,transparent 48%),radial-gradient(ellipse at 90% 45%,#3c5b8221,transparent 52%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
/* Blur is confined to a decorative strip below the hero, never applied to text. */
.ambient-world {
  position:absolute;
  inset:clamp(760px,100svh,1100px) 0 auto;
  height:1500px;
  width:100%;
  z-index:-1;
  contain:paint;
  overflow:hidden;
  pointer-events:none;
  background:none;
  opacity:.48;
}
.ambient-world::before {
  content:"";
  position:absolute;
  inset:-48px;
  background:linear-gradient(180deg,var(--page-floor),transparent 20%,transparent 58%,var(--page-floor)),var(--page-landscape) center 34%/cover no-repeat;
  filter:blur(32px) saturate(.68);
  opacity:.72;
}
.ambient-world::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,var(--page-floor));
  animation:none;
}

.hero-actions { margin-bottom:0; }
.hero-copy .hotbar-wrap { margin-top:34px; padding-top:30px; }
.hero-copy .hotbar { margin-top:0; max-width:100%; }
.hero-copy .hotbar-label {
  top:0;
  max-width:calc(100% - 16px);
  font:700 13px/1.55 Manrope,Arial,sans-serif;
  letter-spacing:.2px;
  color:#f1f6ff;
  text-shadow:0 2px 9px #080914;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-meta { margin-top:30px; }

.product-body,
[data-season="winter"] .product-body {
  background:linear-gradient(145deg,#ffffff06,transparent 65%),var(--glass-surface);
}
.home-pass,
.translation-section,
.final-cta,
.steps article,
[data-season="winter"] .home-pass,
[data-season="winter"] .translation-section,
[data-season="winter"] .final-cta,
[data-season="winter"] .steps article {
  background:linear-gradient(135deg,#ffffff09,transparent 60%),var(--glass-surface);
  border-color:var(--glass-line);
  box-shadow:inset 0 1px #ffffff13,0 16px 40px #02061133;
}
@supports(backdrop-filter:blur(12px)) {
  .home-pass,.translation-section,.final-cta,.steps article {
    backdrop-filter:blur(12px);
  }
}
.home-pass { gap:36px; padding:38px; }
.home-pass>div { min-width:0; }
.home-pass>div+div { border-color:var(--glass-line); padding-left:36px; }
.home-pass p,
.translation-copy>p,
.final-cta-copy>p,
.steps p,
[data-season="winter"] .translation-copy>p {
  color:var(--copy-soft);
  font:14px/1.9 Manrope,Arial,sans-serif;
}
.home-pass h2 { line-height:1.9; margin:18px 0; }
.home-pass .text-link,
.translation-copy .text-link,
.catalog-more .text-link {
  font:700 14px/1.6 Manrope,Arial,sans-serif;
  letter-spacing:0;
  min-height:48px;
  padding:13px 17px;
  text-align:center;
}
.catalog-more { margin-top:30px; gap:16px 24px; flex-wrap:wrap; }
.catalog-more>p { font:14px/1.8 Manrope,Arial,sans-serif; color:var(--copy-soft); margin:0; }
.catalog-note { font:12px/1.9 Manrope,Arial,sans-serif; padding:14px 18px; border-left-width:2px; background:#e4b07b09; }
.translation-section { gap:42px; padding:48px; }
.translation-copy { min-width:0; padding:0; }
.translation-copy h2 { line-height:1.9; margin:18px 0 22px; }
.translation-copy>p { margin:0; max-width:580px; }
.translation-copy .text-link { margin-top:28px; }
.language-card small,.language-card>span { font:11px/1.7 Manrope,Arial,sans-serif; letter-spacing:.2px; }
.language-card strong { letter-spacing:-.5px; }

.steps { gap:26px; align-items:stretch; }
.steps article {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px!important;
  border-top-color:#cb995e;
  border-width:1px;
  border-top-width:2px;
}
.steps .step-icon,
[data-season="winter"] .steps .step-icon {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0;
  background:#d9eaff08;
  border:1px solid #bad7ee30;
  border-radius:12px;
  box-shadow:inset 0 1px #ffffff13;
}
.step-item {
  display:block;
  flex:none;
  width:48px;
  height:48px;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 4px 5px #05060d55);
}
.steps h3 { font:700 18px/1.55 Manrope,Arial,sans-serif; letter-spacing:0; min-height:0; margin:22px 0 15px!important; }
.steps p { max-width:none; margin:0; }
.steps .step-number { top:24px!important; right:24px; padding:4px 7px; color:var(--copy-soft); border-color:var(--glass-line); font:600 12px/1.5 Manrope,Arial,sans-serif; }

.final-cta.wrap {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  gap:36px;
  padding:clamp(32px,4.2vw,64px);
}
.final-cta-copy { min-width:0; }
.final-cta-copy>.eyebrow { line-height:1.8; }
.final-cta h2 { font-size:clamp(21px,2vw,29px); line-height:1.9; margin:22px 0; }
.final-cta-copy>p { max-width:560px; margin:0 0 30px; }
.final-cta .button { min-height:54px; font-size:12px; }
.portal-composition,.final-rune {
  position:relative;
  inset:auto;
  display:grid;
  place-items:center;
  width:100%;
  max-width:450px;
  margin:0;
  justify-self:center;
  aspect-ratio:1/1;
  transform:none;
  color:inherit;
  background:none;
  border:0;
  box-shadow:none;
  pointer-events:none;
  user-select:none;
  animation:none;
}
.portal-composition img,.final-rune img,img.final-portal-art {
  display:block;
  width:100%;
  height:auto;
  max-height:470px;
  object-fit:contain;
  -webkit-user-drag:none;
  filter:drop-shadow(0 12px 22px #0905154d);
}

@media(max-width:1000px) {
  .final-cta.wrap { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:24px; padding:38px; }
  .translation-section { padding:36px; gap:28px; }
  .home-pass { padding:30px; gap:28px; }
  .home-pass>div+div { padding-left:28px; }
}
@media(max-width:800px) {
  .hero { min-height:920px; }
  .hero-inner { min-height:920px; }
  .steps article { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px 22px; padding:26px!important; }
  .steps .step-icon { grid-row:1/3; }
  .steps h3 { margin:0 38px 5px 0!important; }
  .steps p { grid-column:2; }
  .steps .step-number { top:20px!important; right:18px; }
  .translation-section { grid-template-columns:1fr; padding:34px; }
  .translation-art { max-width:440px; width:100%; justify-self:center; }
  .final-cta.wrap { grid-template-columns:1fr; gap:28px; padding:36px; }
  .final-cta-copy>p { max-width:100%; }
  .portal-composition,.final-rune { max-width:330px; aspect-ratio:auto; }
}
@media(max-width:540px) {
  .hero { min-height:940px; height:auto; }
  .hero-inner { height:auto; min-height:940px; padding-top:126px; padding-bottom:94px; }
  .hero-copy { padding-block:0; }
  .hero-actions { gap:18px; }
  .hero-copy .hotbar-wrap { margin-top:36px; padding-top:32px; }
  .hero-meta { margin-top:28px; gap:14px 20px; }
  .hero-bottom { bottom:22px; }
  .home-pass { padding:26px 22px; gap:26px; }
  .home-pass>div+div { border-left:0; padding-left:0; padding-top:26px; }
  .home-pass h2 { font-size:18px!important; }
  .home-pass p { font-size:14px; }
  .catalog-more { flex-direction:column; align-items:stretch; text-align:center; gap:14px; }
  .catalog-more .text-link { justify-content:center; margin-top:0; }
  .catalog-note { padding:13px 15px; }
  .translation-section { padding:26px 20px 30px; gap:24px; }
  .translation-art { min-height:228px; }
  .language-card { width:144px; min-width:0; height:184px; padding:17px 12px; }
  .language-card.russian { margin-left:-18px; }
  .language-card small,.language-card>span { font-size:10px; }
  .language-card strong { font-size:12px; margin-top:20px; }
  .translation-copy h2 { font-size:18px; margin-top:16px; }
  .translation-copy .text-link { width:100%; justify-content:center; margin-top:24px; }
  .steps { gap:18px; }
  .steps article { padding:24px 20px!important; grid-template-columns:52px minmax(0,1fr); column-gap:16px; }
  .steps .step-icon { width:52px; height:52px; border-radius:10px; }
  .step-item { width:40px; height:40px; }
  .steps h3 { font-size:17px; margin:0 25px 6px 0!important; }
  .steps p { grid-column:1/-1; margin-top:10px; }
  .steps .step-number { top:17px!important; right:14px; font-size:11px; }
  .final-cta.wrap { gap:26px; padding:28px 22px 24px; }
  .final-cta h2 { font-size:20px; line-height:1.9; margin:18px 0 20px; }
  .final-cta-copy>p { margin-bottom:26px; }
  .final-cta .button { width:100%; min-height:52px; font-size:11px; padding:15px; }
  .portal-composition,.final-rune { width:100%; max-width:290px; }
  .ambient-world { top:940px; height:1300px; opacity:.38; }
  .ambient-world::before { filter:blur(24px) saturate(.65); }
}
@media(max-width:370px) {
  .hero-actions .button { min-width:0; width:min(100%,270px); }
  .home-pass h2 { font-size:16px!important; }
  .translation-section { padding-inline:16px; }
  .language-card { width:128px; height:178px; padding-inline:10px; }
  .language-card small { font-size:9px; }
  .language-card strong { font-size:11px; }
  .translation-copy h2 { font-size:16px; }
  .final-cta.wrap { padding-inline:20px; }
  .final-cta h2 { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .ambient-world::before,.ambient-world::after,.portal-composition,.final-rune { animation:none; transform:none; translate:none; }
}
.translation-gem{display:block;width:42px;height:42px;object-fit:contain;image-rendering:pixelated;user-select:none;pointer-events:none}
.language-card strong{font:800 22px/1.45 Manrope,Arial,sans-serif;letter-spacing:-.5px}
@media(max-width:540px){.language-card strong{font-size:19px}.translation-gem{width:34px;height:34px}}
@media(max-width:370px){.language-card strong{font-size:17px}}
@media(max-width:760px){.account-page .account-nav>:last-child{grid-column:1/-1;flex-direction:row;justify-content:center}}
@media(max-width:540px){
 .nav .profile-nav-toggle{max-width:126px}
 .nav .profile-nav-toggle .nav-account-label{max-width:52px}
 .nav .menu-toggle{flex-shrink:0;min-height:44px}
}
@media(max-width:370px){
 .nav{gap:7px}
 .nav .logo{font-size:16px;gap:6px}
 .nav .logomark{width:26px;height:26px}
 .nav .nav-account{min-width:0;padding:0 9px;gap:6px;font-size:12px}
 .nav .profile-nav-toggle{width:59px;padding:0 8px}
 .nav .profile-nav-toggle .nav-account-label{display:none}
}