:root {
  --bg: #09090f;
  --bg-soft: #11111a;
  --panel: rgba(255, 255, 255, 0.075);
  --panel-strong: rgba(255, 255, 255, 0.11);
  --panel-deep: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --muted: #d4d2dc;
  --muted-dark: #b8b3c8;
  --accent: #a784ff;
  --accent-soft: #efe8ff;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.25);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(18, 14, 33, 0.72), rgba(9, 9, 15, 0.98)),
    radial-gradient(circle at top, rgba(103, 57, 170, 0.25), transparent 34%),
    var(--bg);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

.page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 14%, rgba(140, 92, 255, 0.22), transparent 25rem),
    radial-gradient(circle at 15% 78%, rgba(111, 76, 201, 0.14), transparent 22rem),
    radial-gradient(circle at 82% 70%, rgba(92, 64, 160, 0.10), transparent 20rem);
}

.glass-panel,
.glass-subpanel,
.glass-pill {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.glass-panel {
  border-radius: var(--radius-xl);
}

.glass-subpanel {
  border-radius: var(--radius-lg);
}

.glass-pill {
  border-radius: 999px;
}

.hero {
  min-height: 100svh;
  padding: 28px 24px 34px;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
}

.hero-panel {
  width: min(1020px, 100%);
  padding: clamp(34px, 6vw, 64px);
}

.hero-content { max-width: 960px; }
.hero h1, h2, h3, p { margin-top: 0; }
.hero h1 {
  font-size: clamp(3.5rem, 8vw, 8rem);
  letter-spacing: -0.085em;
  line-height: 0.94;
  font-weight: 900;
  margin-bottom: 20px;
}
.hero-kicker, .eyebrow {
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
  font-weight: 800;
}
.hero-kicker { margin-bottom: 16px; }
.hero-subtitle {
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  margin-bottom: 14px;
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  line-height: 1;
  animation: bob 1.3s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(7px); } }

.site-main {
  width: 100%;
}

.builds-section, .pricing-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 44px;
}

.section-shell {
  padding: 42px 24px;
}

.pricing-section .section-shell {
  padding-top: 38px;
}

.section-heading { text-align: center; max-width: 840px; margin: 0 auto 42px; }
.section-heading.compact { margin-bottom: 36px; }
.section-heading h2 {
  margin-bottom: 15px;
  font-family: Unbounded, Inter, Arial, sans-serif;
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  letter-spacing: -0.075em;
  line-height: 1;
  font-weight: 800;
}
.section-heading .eyebrow { margin-bottom: 13px; }
.section-lead { color: var(--muted); font-size: 1rem; }

.build-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.build-card {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 10px;
  min-height: 100%;
  text-decoration: none;
  color: var(--text);
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-soft);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

.build-thumb-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.build-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .36s ease, filter .36s ease;
}

.card-gradient {
  position: absolute;
  inset: auto 10px 10px;
  height: 52%;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(to top, rgba(4, 4, 10, 0.92), rgba(4, 4, 10, 0));
  pointer-events: none;
}

.card-info {
  position: absolute;
  inset: auto 24px 24px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  z-index: 1;
}

.card-info p {
  margin: 0;
  font-weight: 800;
  font-size: clamp(.84rem, 1.28vw, 1rem);
  line-height: 1.2;
  max-width: 75%;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.card-info span {
  flex: 0 0 auto;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
}

.build-card:hover, .build-card:focus-visible {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(167,132,255,0.46);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.06));
  box-shadow: 0 26px 54px rgba(0,0,0,.38), 0 0 0 1px rgba(167,132,255,.22);
  outline: none;
}

.build-card:hover img, .build-card:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.price-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.price-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
  border-color: rgba(167,132,255,.42);
  box-shadow: var(--shadow);
}

.price-card h3 {
  color: #fff;
  font-size: 1.45rem;
  margin-bottom: 14px;
}

.price-card p {
  color: var(--muted-dark);
  line-height: 1.6;
  margin-bottom: 24px;
}

.price-card strong {
  font-size: 1.8rem;
  margin-top: auto;
  margin-bottom: 16px;
}

.price-card a, .buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  color: white;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: filter .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
}

.price-card a:hover, .buy-button:hover {
  transform: translateY(-2px);
  border-color: rgba(167,132,255,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
}

.site-footer {
  padding: 10px 24px 36px;
}

.footer-panel {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 18px 24px;
  text-align: center;
  color: rgba(255,255,255,0.58);
  font-size: .9rem;
}

.detail-page { min-height: 100svh; }
.detail-layout {
  width: min(1260px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 28px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  margin-bottom: 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.back-link:hover {
  border-color: rgba(167,132,255,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
}

.detail-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .95fr);
  gap: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.detail-image-pane {
  padding: 12px;
}

.detail-image-wrap {
  min-height: 100%;
  background: rgba(255,255,255,0.03);
  border-radius: 22px;
  overflow: hidden;
}

.detail-image-wrap img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  display: block;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(12px, 2vw, 18px) clamp(8px, 1.4vw, 10px) clamp(12px, 2vw, 18px) 0;
}

.detail-content .eyebrow { margin-bottom: 0; }

.detail-content h1 {
  font-family: Unbounded, Inter, sans-serif;
  font-size: clamp(1.85rem, 3vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.06em;
  margin-bottom: 0;
}

.detail-block {
  padding: 22px;
}

.detail-block h2 {
  font-size: 1.16rem;
  margin-bottom: 14px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.feature-list > li {
  position: relative;
  padding-left: 21px;
  color: #f0eef5;
  line-height: 1.45;
}

.feature-list > li::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 1px;
  top: .56em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.command-list > li {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) minmax(0, 1.8fr);
  gap: 10px;
}

.command-list code {
  color: #fff;
  font-weight: 700;
  font-family: Inter, Arial, sans-serif;
}

.command-list span {
  color: var(--muted-dark);
}

.detail-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
}

.detail-price {
  display: grid;
  gap: 5px;
}

.detail-price span {
  color: var(--muted);
}

.detail-price strong {
  font-size: 2rem;
}

.buy-button {
  padding: 0 25px;
  min-width: 146px;
}

.detail-footer {
  padding-top: 0;
}

@media (max-width: 1000px) {
  .build-grid, .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-card { grid-template-columns: 1fr; }
  .detail-content { padding: 0; }
  .detail-image-wrap img { min-height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  .hero { min-height: 92svh; padding-inline: 16px; }
  .hero-panel { padding: 28px 18px; }
  .builds-section, .pricing-section { padding: 0 16px 30px; }
  .section-shell { padding: 30px 14px; }
  .build-grid, .price-grid { grid-template-columns: 1fr; }
  .build-grid { gap: 20px; }
  .card-info { inset: auto 20px 20px; }
  .detail-layout { width: min(100% - 28px, 1260px); padding-top: 22px; }
  .detail-card { border-radius: 24px; padding: 12px; }
  .detail-block, .detail-bottom { padding: 18px; }
  .detail-bottom { align-items: stretch; flex-direction: column; }
  .buy-button { min-height: 52px; }
  .footer-panel { padding: 16px 18px; }
}

/* Reviews — added in the existing Glassmorphism visual system. */
.reviews-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 44px;
}


.review-card {
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 132, 255, 0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
  box-shadow: var(--shadow-soft);
}

.review-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255,255,255,0.08);
}

.review-content {
  min-width: 0;
}

.review-content h3 {
  margin: 1px 0 5px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
}

.review-stars {
  display: inline-block;
  color: #ffd35a;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 211, 90, 0.18);
}

.review-content p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .reviews-section { padding: 0 16px 30px; }
  .review-card { padding: 16px; }
}

/* Reviews carousel — uses the same Glassmorphism system as the existing site. */
.reviews-marquee {
  position: relative;
  overflow: hidden;
  padding: 7px 2px 12px;
  border-radius: var(--radius-lg);
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.reviews-marquee:active { cursor: grabbing; }

.reviews-marquee::before,
.reviews-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(11vw, 110px);
  z-index: 2;
  pointer-events: none;
}

.reviews-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(24, 20, 38, 0.78), rgba(24, 20, 38, 0));
}

.reviews-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(24, 20, 38, 0.78), rgba(24, 20, 38, 0));
}

.reviews-marquee:focus-visible {
  box-shadow: 0 0 0 2px rgba(167, 132, 255, 0.48);
}

.reviews-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.reviews-set {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.reviews-grid {
  display: block;
}

.review-card {
  width: clamp(300px, 30vw, 390px);
  min-height: 154px;
  flex: 0 0 clamp(300px, 30vw, 390px);
}

@media (max-width: 680px) {
  .reviews-marquee {
    padding: 4px 0 10px;
  }

  .reviews-marquee::before,
  .reviews-marquee::after {
    width: 42px;
  }

  .reviews-track,
  .reviews-set {
    gap: 14px;
  }

  .review-card {
    width: min(82vw, 350px);
    flex-basis: min(82vw, 350px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { transform: none !important; }
}


/* SEO intro — kept within the existing Glassmorphism system. */
.seo-intro-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 44px;
}

.seo-intro-shell {
  padding: 42px clamp(24px, 5vw, 72px);
}

.seo-intro-copy {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.seo-intro-copy h2 {
  margin: 0 0 18px;
  font-family: Unbounded, Inter, Arial, sans-serif;
  font-size: clamp(1.8rem, 4.2vw, 3.7rem);
  letter-spacing: -0.07em;
  line-height: 1.08;
}

.seo-intro-copy p:not(.eyebrow) {
  max-width: 880px;
  margin: 0 auto 12px;
  color: var(--muted);
  line-height: 1.7;
}

.seo-intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.seo-intro-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.seo-intro-actions a:hover {
  transform: translateY(-2px);
  border-color: rgba(167,132,255,.42);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
}

@media (max-width: 680px) {
  .seo-intro-section { padding: 0 16px 30px; }
  .seo-intro-shell { padding: 30px 18px; }
}


/* Social links — added in the existing Glassmorphism visual system. */
.social-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 44px;
}

.social-shell {
  padding-bottom: 38px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.social-card {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #fff;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.social-card:hover,
.social-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(167,132,255,.48);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.065));
  box-shadow: var(--shadow-soft);
  outline: none;
}

.social-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.social-icon svg {
  width: 28px;
  height: 28px;
}

.social-card:hover .social-icon,
.social-card:focus-visible .social-icon {
  transform: scale(1.07);
  background: rgba(255,255,255,.15);
}

.social-tiktok:hover .social-icon,
.social-tiktok:focus-visible .social-icon { color: #f5f5f5; }
.social-vk:hover .social-icon,
.social-vk:focus-visible .social-icon { color: #b9d8ff; }
.social-telegram:hover .social-icon,
.social-telegram:focus-visible .social-icon { color: #a9dcff; }
.social-youtube:hover .social-icon,
.social-youtube:focus-visible .social-icon { color: #ffc1c1; }

.social-meta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.social-meta strong {
  font-size: 1rem;
  line-height: 1.2;
}

.social-meta small {
  display: block;
  overflow: hidden;
  color: var(--muted-dark);
  font-size: .76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-arrow {
  margin-left: auto;
  color: rgba(255,255,255,.68);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .22s ease, color .22s ease;
}

.social-card:hover .social-arrow,
.social-card:focus-visible .social-arrow {
  transform: translate(2px, -2px);
  color: #fff;
}

@media (max-width: 1000px) {
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .social-section { padding: 0 16px 30px; }
  .social-shell { padding-bottom: 30px; }
  .social-grid { grid-template-columns: 1fr; gap: 14px; }
  .social-card { min-height: 98px; padding: 16px; }
  .social-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; }
}


/* Utility controls and contact cards — same purple Glassmorphism visual system. */
.site-utility {
  position: fixed;
  inset: 18px 18px auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.site-status,
.support-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.site-status { gap: 8px; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78f5a1;
  box-shadow: 0 0 0 4px rgba(120,245,161,.12), 0 0 14px rgba(120,245,161,.78);
}

.support-link {
  gap: 8px;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.support-link:hover,
.support-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(167,132,255,.48);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
  outline: none;
}

.social-icon-vk { overflow: hidden; }
.vk-wordmark {
  color: currentColor;
  font-family: Inter, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.12em;
  transform: translateX(-1px);
}

.community-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 44px;
}

.community-shell { padding-bottom: 38px; }

.community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}

.community-card {
  min-height: 124px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.community-card:hover,
.community-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(167,132,255,.48);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.065));
  box-shadow: var(--shadow-soft);
  outline: none;
}

.community-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  color: var(--accent-soft);
  font-size: 1.45rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.community-card > span:not(.community-icon) { display: grid; gap: 5px; min-width: 0; }
.community-card strong { font-size: 1rem; line-height: 1.2; }
.community-card small { color: var(--muted-dark); font-size: .82rem; line-height: 1.35; }
.community-card b { margin-left: auto; color: rgba(255,255,255,.68); font-size: 1.25rem; transition: transform .22s ease, color .22s ease; }
.community-card:hover b, .community-card:focus-visible b { transform: translate(2px,-2px); color:#fff; }

/* Detail pages: the original preview is now shown fully and uncropped above all information. */
.detail-card {
  display: block;
}

.detail-image-pane {
  margin-bottom: 18px;
}

.detail-image-wrap {
  min-height: 0;
}

.detail-image-wrap img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}

.detail-content {
  padding: 0;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.detail-info-grid .detail-block { height: 100%; }

@media (max-width: 680px) {
  .site-utility { inset: 12px 12px auto; }
  .site-status, .support-link { min-height: 38px; padding: 0 12px; font-size: .78rem; }
  .community-section { padding: 0 16px 30px; }
  .community-shell { padding-bottom: 30px; }
  .community-grid { grid-template-columns: 1fr; gap: 14px; }
  .community-card { min-height: 102px; padding: 16px; }
  .community-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; }
  .detail-info-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* Purchase modal and promo codes — added without changing the existing Glassmorphism system. */
.payment-modal-open { overflow: hidden; }
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.payment-modal.is-open { opacity: 1; pointer-events: auto; }
.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 10, .74);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.payment-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(880px, calc(100svh - 44px));
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border-color: rgba(214, 198, 255, .28);
  box-shadow: 0 34px 110px rgba(0,0,0,.58), 0 0 0 1px rgba(167,132,255,.12);
  transform: translateY(14px) scale(.98);
  transition: transform .24s ease;
}
.payment-modal.is-open .payment-dialog { transform: translateY(0) scale(1); }
.payment-close {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 400 1.8rem/1 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.payment-close:hover,
.payment-close:focus-visible { transform: rotate(90deg); background: rgba(255,255,255,.15); border-color: rgba(167,132,255,.52); outline: none; }
.payment-heading { padding-right: 48px; margin-bottom: 20px; }
.payment-heading .eyebrow { margin-bottom: 10px; }
.payment-heading h2 { margin: 0 0 10px; font: 800 clamp(1.45rem, 4vw, 2.25rem)/1.05 Unbounded, Inter, Arial, sans-serif; letter-spacing: -.055em; }
.payment-heading p { margin: 0; color: var(--muted); line-height: 1.55; }
.payment-product { padding: 17px 18px; display: grid; gap: 5px; margin-bottom: 17px; }
.payment-product span { color: var(--muted-dark); font-size: .82rem; }
.payment-product strong { color: #fff; font-size: 1.02rem; line-height: 1.35; }
.promo-field { display: grid; gap: 8px; margin: 0 0 17px; color: #fff; font-weight: 800; font-size: .92rem; }
.promo-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.promo-control input {
  min-width: 0;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  outline: none;
  background: rgba(255,255,255,.065);
  color: #fff;
  font: 800 .95rem/1 Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.promo-control input::placeholder { color: rgba(255,255,255,.39); text-transform: none; letter-spacing: 0; font-weight: 600; }
.promo-control input:focus { border-color: rgba(167,132,255,.62); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(167,132,255,.12); }
.promo-control button,
.copy-button {
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font: 800 .88rem/1 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.promo-control button:hover,
.copy-button:hover,
.promo-control button:focus-visible,
.copy-button:focus-visible { transform: translateY(-2px); border-color: rgba(167,132,255,.48); background: rgba(255,255,255,.16); outline: none; }
.promo-field small { min-height: 1.2em; color: var(--muted-dark); font-size: .78rem; font-weight: 600; }
.promo-field small.promo-success { color: #a6f3c0; }
.promo-field small.promo-error { color: #ffb1c0; }
.payment-total { display: grid; gap: 0; margin-bottom: 17px; overflow: hidden; }
.payment-total > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; color: var(--muted); }
.payment-total > div + div { border-top: 1px solid rgba(255,255,255,.1); }
.payment-total > div strong { color: #fff; font-size: 1rem; }
.payment-total .payment-total-final { padding-top: 16px; padding-bottom: 16px; background: rgba(167,132,255,.10); }
.payment-total .payment-total-final span { color: #fff; font-weight: 800; }
.payment-total .payment-total-final strong { font-size: 1.45rem; color: var(--accent-soft); }
.payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 13px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.payment-method:hover,
.payment-method:focus-visible,
.payment-method.is-active { transform: translateY(-2px); border-color: rgba(167,132,255,.60); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(167,132,255,.10)); box-shadow: 0 0 0 2px rgba(167,132,255,.10); outline: none; }
.payment-method-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.12); font-size: 1.1rem; font-weight: 900; }
.payment-method span:last-child { display: grid; gap: 4px; }
.payment-method b { font-size: .96rem; }
.payment-method small { color: var(--muted-dark); font-size: .74rem; font-weight: 600; }
.payment-details { padding: 4px 16px; margin-bottom: 16px; }
.payment-detail-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; opacity: .54; transition: opacity .2s ease; }
.payment-detail-line + .payment-detail-line { border-top: 1px solid rgba(255,255,255,.1); }
.payment-detail-line.is-selected { opacity: 1; }
.payment-detail-line > div { display: grid; min-width: 0; gap: 5px; }
.payment-detail-line span { color: var(--muted-dark); font-size: .76rem; }
.payment-detail-line strong { color: #fff; font-size: clamp(.91rem, 3vw, 1rem); letter-spacing: .035em; white-space: nowrap; }
.copy-button { min-height: 38px; flex: 0 0 auto; padding: 0 12px; font-size: .77rem; }
.payment-note { margin: 1px 0 12px; color: var(--muted-dark); font-size: .78rem; line-height: 1.45; }
.payment-telegram-button,
.price-card .payment-trigger,
.detail-bottom .payment-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(167,132,255,.95), rgba(116,78,221,.95));
  color: #fff;
  font: 800 .92rem/1 Inter, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(90,55,170,.24), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}
.payment-telegram-button { width: 100%; }
.payment-telegram-button:hover,
.payment-telegram-button:focus-visible,
.price-card .payment-trigger:hover,
.price-card .payment-trigger:focus-visible,
.detail-bottom .payment-trigger:hover,
.detail-bottom .payment-trigger:focus-visible { transform: translateY(-2px); filter: brightness(1.12); border-color: rgba(255,255,255,.34); outline: none; }
.price-card .payment-trigger { width: 100%; }
.detail-bottom .payment-trigger { padding: 0 25px; min-width: 146px; }
.payment-footnote { margin: 12px 0 0; color: rgba(255,255,255,.50); text-align: center; font-size: .72rem; line-height: 1.4; }
@media (max-width: 680px) {
  .payment-modal { padding: 12px; }
  .payment-dialog { max-height: calc(100svh - 24px); padding: 22px 16px; border-radius: 24px; }
  .payment-heading { padding-right: 36px; }
  .payment-close { top: 11px; right: 11px; width: 36px; height: 36px; font-size: 1.55rem; }
  .payment-methods { grid-template-columns: 1fr; }
  .payment-detail-line { align-items: flex-start; }
  .payment-detail-line strong { white-space: normal; }
  .promo-control { grid-template-columns: 1fr; }
  .promo-control button { width: 100%; }
}

/* Full catalog update — keeps the existing purple Glassmorphism system. */
.online-status { min-width: 170px; }
.online-label { white-space: nowrap; }
.online-widget { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.online-widget a, .online-widget div, .online-widget span { color: #fff !important; font: 800 .86rem/1 Inter, Arial, sans-serif !important; text-decoration: none !important; background: transparent !important; border: 0 !important; min-width: 0 !important; height: auto !important; }
.build-toolbar { display:flex; align-items:center; justify-content:center; gap:16px; padding:14px; margin:0 auto 16px; }
.build-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-button { min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font: 800 .78rem/1 Inter,Arial,sans-serif; cursor: pointer; transition: transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease; }
.filter-button:hover,.filter-button:focus-visible,.filter-button.is-active { color:#fff; transform:translateY(-1px); border-color:rgba(167,132,255,.52); background:rgba(167,132,255,.18); outline:none; }

.build-counter { margin:0 0 17px; color:var(--muted-dark); font-size:.85rem; text-align:right; }
.card-badges { position:absolute; z-index:2; top:20px; left:20px; display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 40px); }
.card-badges span { padding:5px 8px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(13,11,23,.56); color:#fff; backdrop-filter:blur(9px); font-size:.65rem; font-weight:900; letter-spacing:.04em; }
.empty-state { grid-column:1/-1; margin:0; padding:32px; color:var(--muted); text-align:center; }
.builds-more-wrap { display:flex; justify-content:center; margin-top:28px; }
.more-builds-button { display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 20px; color:#fff; text-decoration:none; font-size:.9rem; font-weight:800; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.more-builds-button:hover,.more-builds-button:focus-visible { transform:translateY(-2px); border-color:rgba(167,132,255,.48); background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08)); outline:none; }
.how-buy-section,.why-section,.faq-section { max-width:1320px; margin:0 auto; padding:0 24px 44px; }
.how-buy-grid,.why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:0; margin:0; list-style:none; }
.how-buy-card,.why-card { min-height:210px; padding:22px; }
.how-buy-card > span,.why-card > span { display:inline-grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(167,132,255,.15); color:var(--accent-soft); font-size:.85rem; font-weight:900; }
.how-buy-card h3,.why-card h3 { margin:0 0 10px; color:#fff; font-size:1.05rem; }
.how-buy-card p,.why-card p { margin:0; color:var(--muted-dark); font-size:.9rem; line-height:1.55; }
.faq-shell { padding-bottom:38px; }
.faq-list { max-width:920px; margin:0 auto; display:grid; gap:12px; }
.faq-item { padding:0; overflow:hidden; }
.faq-item summary { position:relative; padding:19px 54px 19px 20px; color:#fff; cursor:pointer; font-weight:800; list-style:none; }
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after { content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--accent-soft); font-size:1.45rem; font-weight:400; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { margin:0; padding:0 20px 20px; color:var(--muted-dark); line-height:1.65; }
.telegram-float { position:fixed; right:22px; bottom:22px; z-index:55; width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:linear-gradient(180deg,rgba(167,132,255,.98),rgba(113,74,216,.98)); color:#fff; box-shadow:0 18px 40px rgba(68,40,140,.38),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .2s ease,filter .2s ease; }
.telegram-float:hover,.telegram-float:focus-visible { transform:translateY(-4px) scale(1.04); filter:brightness(1.1); outline:none; }
.telegram-float svg { width:28px; height:28px; fill:currentColor; }
.footer-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.footer-guides { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.footer-guides a { color:rgba(255,255,255,.68); text-decoration:none; font-size:.75rem; font-weight:700; }
.footer-guides a:hover { color:#fff; }
.detail-tags { display:flex; flex-wrap:wrap; gap:8px; }
.detail-tags span { padding:7px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); color:var(--accent-soft); font-size:.74rem; font-weight:800; }
.detail-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.compatibility-list,.compact-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.compatibility-list li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--muted-dark); font-size:.87rem; }
.compatibility-list li:last-child { padding-bottom:0; border-bottom:0; }
.compatibility-list strong { color:#fff; font-size:.88rem; text-align:right; }
.compact-list li { position:relative; padding-left:16px; color:var(--muted-dark); font-size:.86rem; line-height:1.45; }
.compact-list li::before { content:''; position:absolute; left:1px; top:.58em; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.detail-updated { margin:0 0 12px; color:var(--muted-dark); line-height:1.45; }
.detail-updated strong { color:#fff; }
.video-link { display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin-top:18px; padding:0 14px; color:#fff; text-decoration:none; font-size:.82rem; font-weight:800; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.video-link:hover,.video-link:focus-visible { transform:translateY(-2px); border-color:rgba(167,132,255,.48); background:rgba(255,255,255,.14); outline:none; }
.guide-layout { width:min(1040px,calc(100% - 40px)); margin:0 auto; padding:36px 0 28px; }
.guide-card { padding:clamp(22px,4vw,48px); }
.guide-card h1 { margin:0 0 18px; font:800 clamp(2rem,5vw,4.2rem)/1.04 Unbounded,Inter,Arial,sans-serif; letter-spacing:-.07em; }
.guide-intro { max-width:780px; margin:0 0 26px; color:var(--muted); font-size:1.04rem; line-height:1.7; }
.guide-sections { display:grid; gap:16px; }
.guide-section { padding:22px; }
.guide-section h2 { margin:0 0 12px; font-size:1.15rem; }
.guide-section p { margin:0 0 10px; color:var(--muted-dark); line-height:1.65; }
.guide-list { display:grid; gap:8px; margin:13px 0 0; padding-left:20px; color:#f0eef5; line-height:1.5; }
.guide-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding:22px; }
.guide-cta p { margin:0; color:var(--muted); font-weight:700; }
@media(max-width:1000px){.how-buy-grid,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.detail-support-grid{grid-template-columns:1fr;}}
@media(max-width:680px){.online-status{min-width:0;}.online-label{display:none;}.site-status{gap:6px;}.build-toolbar{padding:12px;}.build-filters{gap:6px;}.filter-button{min-height:36px;padding:0 11px;font-size:.72rem;}.how-buy-section,.why-section,.faq-section{padding:0 16px 30px;}.how-buy-grid,.why-grid{grid-template-columns:1fr;gap:14px;}.how-buy-card,.why-card{min-height:0;}.telegram-float{right:16px;bottom:16px;width:54px;height:54px;}.footer-panel{align-items:center;flex-direction:column;text-align:center;}.detail-support-grid{gap:14px;}.guide-layout{width:min(100% - 28px,1040px);padding-top:22px;}.guide-card{padding:22px 16px;}.guide-cta{align-items:stretch;flex-direction:column;}.guide-cta .buy-button{min-height:50px;}.card-badges{top:18px;left:18px;}.card-badges span{font-size:.6rem;}.build-counter{text-align:left;}}


/* Refinements: purple hover outline on every interactive glass window. */
.glass-subpanel,
.glass-pill,
.glass-panel:not(.hero-panel):not(.section-shell) {
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.glass-subpanel:hover,
.glass-subpanel:focus-within,
.glass-pill:hover,
.glass-pill:focus-visible,
.glass-panel:not(.hero-panel):not(.section-shell):hover,
.glass-panel:not(.hero-panel):not(.section-shell):focus-within {
  border-color: rgba(167,132,255,.60);
  box-shadow: 0 0 0 2px rgba(167,132,255,.10), var(--shadow-soft);
}

/* Smooth reappearance when a catalog category or price sort is changed. */
.build-grid.is-updating .build-card {
  animation: catalog-card-in .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: min(calc(var(--card-index, 0) * 36ms), 260ms);
}
@keyframes catalog-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.982); filter: saturate(.84); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

/* Smooth FAQ opening and closing. */
.faq-item .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .34s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.faq-item .faq-answer-inner { min-height: 0; overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-item summary { transition: color .2s ease, background .2s ease; }
.faq-item.is-open summary { color: var(--accent-soft); }
.faq-item summary::after { transition: transform .28s cubic-bezier(.2,.8,.2,1), color .2s ease; }
.faq-item.is-open summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }

/* Requested white lightning in the “Fast order” card. */
.why-card > .why-icon-lightning { color:#fff; text-shadow:0 0 14px rgba(255,255,255,.28); }
.why-card > .why-icon-lightning svg { width:23px; height:23px; display:block; fill:currentColor; filter:drop-shadow(0 0 8px rgba(255,255,255,.38)); }

@media (prefers-reduced-motion: reduce) {
  .build-grid.is-updating .build-card { animation: none; }
  .faq-item .faq-answer, .faq-item summary::after { transition: none; }
}

/* Custom glass sorting menu: avoids the browser's default white dropdown. */
@media(max-width:680px){
}


/* Payment wait notice and promo check states — same Glassmorphism visual system. */
.payment-wait-notice {
  margin: 10px 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(167,132,255,.30);
  border-radius: 13px;
  background: rgba(167,132,255,.09);
  color: #ece7ff;
  font-size: .78rem;
  line-height: 1.45;
}
.payment-wait-notice strong { color: #fff; }
.promo-field small.promo-loading { color: #d8ccff; }


/* Activation keys and bonus wheel — added without changing the existing purple Glassmorphism system. */
.detail-order-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.detail-key-button { min-height:50px; padding:0 17px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; font:800 .84rem/1 Inter,Arial,sans-serif; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.detail-key-button:hover,.detail-key-button:focus-visible { transform:translateY(-2px); border-color:rgba(167,132,255,.60); background:rgba(167,132,255,.16); outline:none; }
.payment-key-entry { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; margin:0 0 17px; }
.payment-key-entry > div { display:grid; gap:5px; }
.payment-key-entry strong { color:#fff; font-size:.88rem; }
.payment-key-entry span { color:var(--muted-dark); font-size:.76rem; line-height:1.4; }
.payment-key-entry button { flex:0 0 auto; min-height:40px; padding:0 13px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(255,255,255,.09); color:#fff; font:800 .78rem/1 Inter,Arial,sans-serif; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.payment-key-entry button:hover,.payment-key-entry button:focus-visible { transform:translateY(-2px); border-color:rgba(167,132,255,.60); background:rgba(167,132,255,.15); outline:none; }
.activation-dialog { width:min(570px,100%); }
.activation-footnote { margin:14px 0 0; color:rgba(255,255,255,.55); font-size:.74rem; text-align:center; line-height:1.45; }
.wheel-section { max-width:1320px; margin:0 auto; padding:0 24px 44px; }
.wheel-shell { padding-bottom:44px; }
.wheel-layout { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); align-items:center; gap:28px; max-width:1050px; margin:0 auto; }
.wheel-stage { position:relative; display:grid; place-items:center; min-height:360px; padding:26px; overflow:hidden; }
.wheel-stage::before { content:''; position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(167,132,255,.20),transparent 68%); filter:blur(12px); }
.bonus-wheel { position:relative; width:min(295px,72vw); aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:10px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(255,255,255,.05); box-shadow:0 20px 54px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.08),0 0 0 3px rgba(167,132,255,.18); }
.wheel-rotor { position:absolute; inset:0; border-radius:50%; transform-origin:center; animation:wheel-idle-spin 52s linear infinite; }
@keyframes wheel-idle-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ .wheel-rotor{ animation:none; } }
.bonus-wheel::after { content:''; position:absolute; z-index:2; inset:11px; border:1px solid rgba(255,255,255,.23); border-radius:50%; pointer-events:none; }
.wheel-center { position:relative; z-index:3; width:41%; aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:3px; border:1px solid rgba(255,255,255,.26); border-radius:50%; background:rgba(13,10,27,.86); box-shadow:0 10px 28px rgba(0,0,0,.34); color:#fff; font:900 clamp(1rem,3vw,1.42rem)/1 Inter,Arial,sans-serif; text-align:center; }
.wheel-center small { color:var(--muted); font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.wheel-pointer { position:absolute; z-index:3; top:19px; left:50%; width:0; height:0; transform:translateX(-50%); border-left:17px solid transparent; border-right:17px solid transparent; border-top:34px solid #fff; filter:drop-shadow(0 4px 9px rgba(0,0,0,.5)); }
.wheel-content h3 { margin:0 0 10px; color:#fff; font-size:1.28rem; }
.wheel-content > p { margin:0 0 16px; color:var(--muted-dark); line-height:1.6; }
.wheel-prizes { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.wheel-prizes span { display:inline-flex; align-items:center; min-height:32px; padding:6px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); color:#f5f2ff; font-size:.73rem; font-weight:800; line-height:1.25; }
.wheel-buy-button { width:100%; min-height:52px; border:1px solid rgba(255,255,255,.18); border-radius:15px; background:linear-gradient(135deg,rgba(167,132,255,.95),rgba(116,78,221,.95)); color:#fff; font:800 .9rem/1 Inter,Arial,sans-serif; cursor:pointer; box-shadow:0 12px 26px rgba(90,55,170,.24),inset 0 1px 0 rgba(255,255,255,.16); transition:transform .2s ease,filter .2s ease,border-color .2s ease; }
.wheel-buy-button:hover,.wheel-buy-button:focus-visible { transform:translateY(-2px); filter:brightness(1.12); border-color:rgba(255,255,255,.34); outline:none; }
.wheel-note { margin:12px 0 0!important; color:rgba(255,255,255,.56)!important; font-size:.75rem; }
@media(max-width:800px){.wheel-layout{grid-template-columns:1fr;}.wheel-stage{min-height:318px;}.wheel-content{text-align:center;}.wheel-prizes{justify-content:center;}.detail-order-actions{justify-content:stretch;width:100%;}.detail-order-actions>*{flex:1 1 180px;}.payment-key-entry{align-items:stretch;flex-direction:column;}.payment-key-entry button{width:100%;}.wheel-section{padding:0 16px 30px;}}


/* Wheel flow modal updates */
.payment-key-entry > div:only-child { display:flex; align-items:center; min-height:38px; }
.payment-key-entry strong { font-size:.9rem; }
.wheel-modal .payment-dialog { max-width:960px; }
.wheel-modal-layout { display:grid; grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr); gap:24px; align-items:center; }
.wheel-modal-stage { position:relative; display:grid; place-items:center; min-height:350px; padding:26px; overflow:hidden; }
.wheel-modal-stage::before { content:''; position:absolute; inset:auto; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(167,132,255,.22),transparent 70%); filter:blur(14px); }
.wheel-modal-wheel { width:min(300px,74vw); aspect-ratio:1; }
.wheel-modal-rotor { position:absolute; inset:0; border-radius:50%; transform-origin:center; animation:none; }
.wheel-modal-info { display:grid; gap:16px; }
.wheel-result, .wheel-order-summary { display:grid; gap:10px; }
.wheel-result-label { color:var(--muted-dark); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.wheel-result strong { color:#fff; font-size:1.35rem; line-height:1.15; }
.wheel-result small { color:var(--muted-dark); font-size:.82rem; line-height:1.55; }
.wheel-order-summary > div { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.wheel-order-summary > div:last-child { border-bottom:0; padding-bottom:0; }
.wheel-order-summary span { color:var(--muted-dark); font-size:.8rem; }
.wheel-order-summary strong { color:#fff; text-align:right; font-size:.94rem; }
.wheel-claim-button { opacity:.62; transition:opacity .25s ease, transform .25s ease, filter .25s ease; }
.wheel-claim-button.is-visible { opacity:1; }
.wheel-claim-button:not(:disabled):hover,.wheel-claim-button:not(:disabled):focus-visible { transform:translateY(-2px); filter:brightness(1.08); }
@media(max-width:860px){ .wheel-modal-layout{grid-template-columns:1fr;} .wheel-modal-stage{min-height:300px;} .wheel-modal-info{text-align:center;} .wheel-order-summary>div{flex-direction:column;align-items:center;} .wheel-order-summary strong{text-align:center;} }

/* Wheel modal enlarged and aligned - latest */
.wheel-modal .payment-dialog { width:min(1120px, calc(100vw - 28px)); max-width:1120px; padding:34px 34px 30px; }
.wheel-modal-layout { grid-template-columns:minmax(380px, 430px) minmax(0, 1fr); gap:22px; align-items:stretch; }
.wheel-modal-stage { min-height:420px; padding:22px; }
.wheel-modal-wheel { width:min(380px, 78vw); }
.wheel-modal-info { display:grid; align-content:start; gap:14px; }
.wheel-result strong { font-size:1.7rem; }
.wheel-result small { font-size:.92rem; }
.wheel-order-summary > div { padding:12px 0; }
.wheel-order-summary strong { font-size:1rem; }
@media(max-width:980px){ .wheel-modal .payment-dialog{width:min(94vw, 820px); padding:28px 22px 24px;} .wheel-modal-layout{grid-template-columns:1fr;} .wheel-modal-stage{min-height:340px;} .wheel-modal-wheel{width:min(320px,76vw);} }


/* Wheel result text alignment fix */
.wheel-result {
  padding: 18px 20px;
  overflow: hidden;
}
.wheel-result-label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.2;
}
.wheel-result strong {
  display: block;
  max-width: 100%;
  line-height: 1.14;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  margin-bottom: 10px;
}
.wheel-result small {
  display: block;
  max-width: 100%;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.wheel-order-summary {
  padding: 8px 16px;
}
.wheel-order-summary > div {
  align-items: center;
}
.wheel-order-summary span,
.wheel-order-summary strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media(max-width:980px){
  .wheel-result { padding: 16px 16px; }
}