:root {
  --accent: #2d7a8c;
  --accent-ink: #fff;
  --page: #f3f6f7;
  --ink: #212529;
  --muted: #6c757d;
  --font: Poppins, "Segoe UI", system-ui, sans-serif;
  --card: #fff;
  --promo: #fff;
  --scene-bg: var(--accent);
  --scene-size: auto;
  --scene-anim: hueMove 16s ease-in-out infinite;
  --price-bg: var(--scene-bg);
  --price-ink: #fff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
}
body {
  font-family: var(--font);
  background: var(--page);
  color: var(--ink);
}
html[lang="ar"] body {
  font-family: "Noto Sans Arabic", var(--font);
}
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--scene-bg);
  background-size: var(--scene-size);
  animation: var(--scene-anim);
}
.boot {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--page);
  transition: opacity .16s ease;
}
.boot.is-done { opacity: 0; pointer-events: none; }
.wrap {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 64px) clamp(48px, 8vw, 96px);
  padding-inline-start: clamp(40px, 7vw, 80px);
}
.stack {
  width: min(68rem, 100%);
  min-width: 0;
}
.copy {
  width: 100%;
  min-width: 0;
  padding: clamp(48px, 5.5vh, 72px) clamp(40px, 4vw, 64px) clamp(40px, 5vh, 64px);
  background: var(--card);
  text-align: start;
  border-radius: 20px;
  box-shadow: 5px 5px 3px color-mix(in srgb, var(--accent) 18%, rgba(18, 24, 28, 0.14));
}
html[dir="rtl"] .copy {
  box-shadow: -5px 5px 3px color-mix(in srgb, var(--accent) 18%, rgba(18, 24, 28, 0.14));
}
html[dir="rtl"] .enter-left { transform: translateX(24px); }
html[dir="rtl"] .enter-right { transform: translateX(-24px); }
@keyframes hueMove {
  0%, 100% { filter: hue-rotate(-10deg) saturate(1.04); }
  50% { filter: hue-rotate(18deg) saturate(1.08); }
}
@keyframes wash {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes neonPulse {
  0%, 100% { filter: hue-rotate(-12deg) saturate(1.55) brightness(1.1); }
  50% { filter: hue-rotate(18deg) saturate(1.85) brightness(1.22); }
}
body.bg-acik {
  --promo: #3a3a3a;
  --scene-bg: color-mix(in srgb, var(--accent) 16%, #f6f4ef);
  --scene-anim: hueMove 22s ease-in-out infinite;
  --price-bg: color-mix(in srgb, var(--accent) 32%, #f4f0ea);
  --price-ink: #1a1a1a;
}
body.bg-orta {
  --scene-bg: radial-gradient(ellipse at 62% 40%,
    color-mix(in srgb, var(--accent) 26%, #fff) 0%,
    color-mix(in srgb, var(--accent) 42%, #eef3f4) 58%,
    color-mix(in srgb, var(--accent) 34%, #d9e3e6) 100%);
  --scene-anim: hueMove 16s ease-in-out infinite;
  --price-bg: var(--accent);
  --price-ink: #fff;
}
body.bg-renkli {
  --scene-bg: linear-gradient(120deg, var(--accent), #3ecfbf, #5b9cff, #8b7cf7, #3ecfbf, var(--accent));
  --scene-size: 280% 280%;
  --scene-anim: hueMove 18s ease-in-out infinite, wash 26s ease-in-out infinite;
  --price-bg: linear-gradient(120deg, var(--accent), #3ecfbf, #5b9cff, #8b7cf7);
  --price-ink: #fff;
}
body.bg-dark {
  --page: #07080a;
  --scene-bg: radial-gradient(ellipse at 58% 36%,
    color-mix(in srgb, var(--accent) 28%, #12141a) 0%,
    color-mix(in srgb, var(--accent) 12%, #0a0c10) 52%,
    #050607 100%);
  --scene-anim: hueMove 16s ease-in-out infinite;
  --price-bg: color-mix(in srgb, var(--accent) 22%, #111111);
  --price-ink: #fff;
}
body.bg-neon {
  --page: #05060a;
  --scene-bg:
    radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--accent) 75%, #fff) 0%, transparent 30%),
    radial-gradient(circle at 22% 78%, color-mix(in srgb, var(--accent) 42%, #3ef0ff) 0%, transparent 36%),
    radial-gradient(ellipse at 50% 42%,
      color-mix(in srgb, var(--accent) 88%, #fff) 0%,
      var(--accent) 26%,
      #08060e 74%);
  --scene-anim: neonPulse 9s ease-in-out infinite;
  --price-bg: color-mix(in srgb, var(--accent) 86%, #fff);
  --price-ink: #0a0a12;
}
@media (prefers-reduced-motion: reduce) {
  .scene, .price { animation: none !important; }
}
.enter {
  opacity: 0;
  will-change: transform, opacity;
}
.enter-left { transform: translateX(-24px); }
.enter-right { transform: translateX(24px); }
body.is-in .enter {
  opacity: 1;
  transform: none;
  transition: transform .5s ease, opacity .35s ease;
}
body.is-in .enter-right { transition-delay: .05s; }
.badge {
  margin: 0 0 18px;
  padding: 0;
  color: #737373;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  background: none;
}
h1 {
  margin: 0 0 22px;
  width: 100%;
  font-size: 58px;
  line-height: 1.1;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  unicode-bidi: isolate;
  direction: ltr;
  text-align: start;
}
html[dir="rtl"] h1 { text-align: right; }
.value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 20px;
}
.value-row strong { font-weight: 400; }
.price[hidden],
.contacts a[hidden] { display: none !important; }
.price {
  display: inline-block;
  background: var(--price-bg);
  background-size: var(--scene-size);
  color: var(--price-ink);
  border-radius: 10px;
  padding: 5px 14px;
  font-weight: 700;
  animation: var(--scene-anim);
  direction: ltr;
  unicode-bidi: isolate;
}
.lead {
  margin: 0 0 26px;
  padding-bottom: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
}
.contacts {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 28px;
  font-size: 17px;
  max-width: 100%;
  min-width: 0;
}
.contacts a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  max-width: 100%;
  min-width: 0;
  cursor: pointer;
}
.contacts a:hover { color: var(--accent); }
.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.copy-tip {
  position: fixed;
  z-index: 100;
  padding: 6px 10px;
  border-radius: 8px;
  background: #161616;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
.copy-tip.is-on { opacity: 1; }
.copy-tip::before { content: "✓ "; }
.promo {
  margin: 32px 4px 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--promo);
}
.promo a,
.promo button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--promo);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.promo a:hover,
.promo button:hover { opacity: 0.8; }
.promo-line { white-space: nowrap; }
html[dir="rtl"] .promo-line { white-space: normal; }
.langs {
  margin: 12px 4px 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.55;
  color: var(--promo);
  direction: ltr;
  unicode-bidi: isolate;
}
.langs button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--promo);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.5;
}
.langs button[aria-pressed="true"] { opacity: 1; }
.langs-sep { margin: 0 8px; opacity: 0.45; }
.legal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 16, 14, 0.45);
}
.legal[hidden] { display: none; }
.legal-card {
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow: auto;
  padding: 28px 28px 24px;
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(20, 16, 14, 0.22);
}
.legal-card h2 { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.legal-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: #444; }
.legal-card p:last-of-type { margin-bottom: 20px; }
.legal-close {
  display: inline-block;
  padding: 8px 16px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .wrap {
    padding: clamp(12px, 3.2vw, 28px);
    justify-content: center;
  }
  .stack { width: 100%; }
  .copy {
    padding: clamp(28px, 6vw, 52px) clamp(14px, 4vw, 24px);
    text-align: center;
  }
  .value-row {
    justify-content: center;
    font-size: clamp(17px, 5vw, 22px);
  }
  .lead {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(15px, 4.4vw, 19px);
  }
  .contacts {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: clamp(15px, 4.2vw, 18px);
    width: 100%;
  }
  .contacts a {
    white-space: normal;
    justify-content: center;
    overflow-wrap: anywhere;
  }
  h1,
  html[dir="rtl"] h1 {
    font-size: clamp(24px, 8.8vw, 42px);
    text-align: center;
  }
  .badge { font-size: clamp(24px, 6.8vw, 36px); }
  .promo, .langs { font-size: clamp(13px, 3.6vw, 16px); text-align: center; }
  .langs { margin-left: auto; margin-right: auto; }
  .promo-line { white-space: normal; }
}