/* =========================
   RESET + VARIABLES
   ========================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* ⚠️ акценты сохранены 1:1 */
  --bg:#050016;
  --card:#07001f;
  --accent:#a855f7;
  --accent-alt:#065f46;
  --accent-soft:rgba(168,85,247,.18);

  /* ✅ чуть светлее вторичный текст (убирает "траур") */
  --text-main:#f9fafb;
  --text-muted:#cbd5e1;

  /* ✅ чуть мягче границы */
  --border-soft:rgba(148,163,184,.28);

  /* ✅ поверхности НЕ слишком прозрачные (чтобы фон не «съедал» сайт) */
  --surface:rgba(17,24,39,.88);
  --surface-strong:rgba(15,23,42,.94);

  /* ✅ ПУТЬ К НОВОГОДНЕМУ ФОНУ (поменяй на свой файл) */
  --bg-image: url("assets/bg-newyear.png");
}

/* =========================
   BASE
   ========================= */

/* ====== BACKGROUND FIX: фон виднее + не темнит ====== */

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  color:var(--text-main);
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;

  /* важно для слоёв */
  position: relative;
  isolation: isolate;

  /* убираем старый background */
  background: none;
}

/* Слой 1: сама картинка (чуть ярче/сочнее) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background: var(--bg-image) center/cover no-repeat;
  filter: brightness(1.18) saturate(1.15);
  transform: translateZ(0);
}

/* Слой 2: лёгкая "плёнка" + фирменные подсветки (НО НЕ ТАК ТЕМНО) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    /* фирменные подсветки */
    radial-gradient(circle at 50% -10%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(circle at 15% 10%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(circle at 85% 18%, rgba(34,197,94,.08), transparent 60%),

    /* "плёнка" (ослабили!) */
    linear-gradient(180deg,
      rgba(6,8,24,.42) 0%,
      rgba(3,4,14,.58) 70%,
      rgba(2,3,10,.68) 100%
    );
}

/* на мобилке fixed иногда тормозит — можно так */
@media (max-width:720px){
  body::before, body::after{ position:absolute; }
}

body.page-windows-pay{}

/* =========================
   CARD WRAPPER
   ========================= */

.card{
  width:100%;
  max-width:900px;

  /* ✅ карточка чуть плотнее (не слишком прозрачная) */
  background:linear-gradient(135deg,rgba(12,14,40,.95),rgba(6,8,26,.95));

  border-radius:26px;
  border:1px solid var(--border-soft);

  /* ✅ тень менее «тяжёлая», но премиальная */
  box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 0 1px rgba(148,163,184,.12);

  padding:20px 22px 0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:14px;
  position:relative;
  overflow:hidden;
  margin:16px 0;
}

.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%,rgba(168,85,247,.40),transparent 58%),
    radial-gradient(circle at 100% 0%,rgba(59,130,246,.22),transparent 62%),
    radial-gradient(circle at 100% 100%,rgba(22,163,74,.18),transparent 60%);
  opacity:1;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.card-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* =========================
   TOP: BRAND + NAV
   ========================= */

.top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  position:relative; /* нужно для абсолютного "Кабинет" на мобилке */
}

.brand-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.brand-logo{
  width:80px;
  height:80px;
  border-radius:14px;
  background:radial-gradient(circle at 20% 20%,#f9fafb,#e9d5ff);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(168,85,247,.8),0 12px 30px rgba(88,28,135,.75);
  flex-shrink:0;
}

.brand-logo-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.brand-text-main{
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.brand-text-sub{
  font-size:14px;
  font-weight:500;
  color:var(--text-muted);
}

/* =========================
   STORE / BOT BUTTONS
   ========================= */

.store-group{ display:flex; flex-direction:column; gap:3px; }

.store-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}

.store-row-label{
  font-size:15px;
  font-weight:700;
  color:#dbe2ee;
  margin-right:6px;
  letter-spacing:.02em;
}

.store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid rgba(148,163,184,.55);

  /* ✅ плотнее, чтобы фон не «вылезал» */
  background:var(--surface);

  color:#e5e7eb;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    border-color .15s ease,
    color .15s ease;
}

.store-badge:hover,
.store-badge:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(168,85,247,.28),transparent 60%),
    rgba(24,24,52,.94);

  color:#f9fafb;
  border-color:rgba(168,85,247,.95);
  box-shadow:0 10px 26px rgba(88,28,135,.75),0 0 0 1px rgba(129,140,248,.55);
  transform:translateY(-1px);
}

.store-badge:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25);
}

.store-appstore{ border-color:rgba(129,140,248,.9); }
.store-googleplay{ border-color:rgba(52,211,153,.9); }
.store-telegram{ border-color:rgba(56,189,248,.9); }
.store-desktop{ border-color:rgba(148,163,184,.7); }

.icon-store,
.icon-store-telegram,
.icon-store-apple,
.icon-store-play{
  width:18px;
  height:18px;
  display:inline-block;
  object-fit:contain;
  vertical-align:middle;
  margin-right:6px;
}

/* единая минимальная ширина КНОПОК */
.store-badge,
.contact-link,
.payment-button,
.download-row{
  min-width:190px;
}

/* =========================
   TOP NAV (CABINET)
   ========================= */

.top-nav{
  margin-left:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.top-nav-link{
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:1px dashed rgba(148,163,184,.6);
}

.top-nav-link:hover,
.top-nav-link:focus-visible{
  color:#e5e7eb;
  border-bottom-color:rgba(168,85,247,.9);
}

.copyright .top-nav-link{
  margin-left:10px;
  color:rgba(203,213,225,.75);
  font-weight:700;
  opacity:1;
  text-decoration:none;
}

.copyright .top-nav-link:hover{ text-decoration:underline; }

.top-nav .top-nav-link{ border-bottom:none; }

/* =========================
   CENTER
   ========================= */

.middle-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:flex-start;
  margin-top:0;
}

.left{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.hero-title{
  font-size:clamp(16px,3.2vw,22px);
  line-height:1.2;
  font-weight:650;
  text-align:center;
  margin:10px auto 0;
}

.hero-highlight{
  background:linear-gradient(120deg,#a855f7,#e879f9,#22c55e);
  -webkit-background-clip:text;
  color:transparent;
  font-weight:750;
}

.hero-subtitle{
  font-size:14px;
  color:var(--text-muted);
  max-width:34rem;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.hero-ai{
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  text-align:center;
  width:100%;
  margin-top:4px;
  background:linear-gradient(120deg,#a855f7,#e879f9,#22c55e);
  -webkit-background-clip:text;
  color:transparent;
  text-shadow:0 0 8px rgba(168,85,247,.55),0 0 18px rgba(37,99,235,.35);
  animation:soprano-pulse 2.6s ease-in-out infinite;
}

@keyframes soprano-pulse{
  0%{ text-shadow:0 0 6px rgba(168,85,247,.40),0 0 14px rgba(37,99,235,.24); }
  50%{ text-shadow:0 0 14px rgba(168,85,247,.85),0 0 26px rgba(37,99,235,.55); }
  100%{ text-shadow:0 0 6px rgba(168,85,247,.40),0 0 14px rgba(37,99,235,.24); }
}

.features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 12px;
  margin-top:2px;
}

.feature-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--text-main);
}

.feature-icon{
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(168,85,247,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

.feature-title{
  font-size:13px;
  font-weight:700;
  color:var(--text-main);
  margin-bottom:1px;
}

.feature-text-muted{
  font-size:12px;
  color:var(--text-muted);
}

/* =========================
   FOOTER
   ========================= */

.bottom-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  font-size:11px;
  color:var(--text-muted);
  margin-top:10px;
}

.contacts{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:var(--surface);
  text-decoration:none;
  color:#e5e7eb;
  font-size:13px;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    border-color .15s ease,
    color .15s ease;
}

.contact-link:hover,
.contact-link:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(168,85,247,.26),transparent 60%),
    rgba(17,24,39,.94);
  color:#f9fafb;
  border-color:rgba(168,85,247,.95);
  box-shadow:0 10px 26px rgba(76,29,149,.75),0 0 0 1px rgba(129,140,248,.55);
  transform:translateY(-1px);
}

.contact-link:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25);
}

.contact-link-label{
  font-size:14px;
  font-weight:700;
  color:var(--text-main);
}

.copy-info{
  cursor:pointer;
  border-bottom:1px dashed rgba(148,163,184,.7);
  min-width:0;
}

.copy-info.copied{
  color:var(--accent);
  border-bottom-color:transparent;
}

.copyright{
  font-size:11px;
  color:var(--text-muted);
  text-align:center;
  width:100%;
  align-self:center;
  margin-top:10px;
  margin-bottom:2px;
}

/* =========================
   WINDOWS: DOWNLOADS / VIDEO
   ========================= */

.step-label,
.section-title{
  font-size:16px;
  font-weight:700;
}

.downloads{
  margin-top:2px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.step-label{ margin-bottom:3px; }

.download-row{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:5px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.5);
  background:var(--surface-strong);
  text-decoration:none;
  color:var(--text-main);
  font-size:13px;
  max-width:420px;
  box-shadow:0 0 0 1px rgba(0,0,0,.22);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    border-color .15s ease,
    color .15s ease;
}

.download-row:hover,
.download-row:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(168,85,247,.22),transparent 60%),
    rgba(17,24,39,.94);
  border-color:rgba(168,85,247,.95);
  box-shadow:0 10px 26px rgba(76,29,149,.65),0 0 0 1px rgba(129,140,248,.55);
  transform:translateY(-1px);
}

.download-left{
  font-weight:500;
  display:inline-flex;
  align-items:center;
}

.download-badge-inline{
  font-weight:600;
  font-size:13px;
  opacity:.95;
  white-space:nowrap;
}

.section-subtitle{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:3px;
}

.video-block{ margin-top:4px; }

.video-frame{
  margin-top:4px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.5);
  background:rgba(17,24,39,.82);
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}

.video-frame-inner{ position:relative; width:100%; padding-bottom:56.25%; }

.video-frame-inner video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* back link */
.back-link-wrap{ margin-top:6px; }

.back-link{
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:1px dashed rgba(148,163,184,.6);
}

.back-link:hover{
  color:#e5e7eb;
  border-bottom-color:rgba(168,85,247,.9);
}

/* =========================
   PAYMENTS / TARIFFS
   ========================= */

.payment-block{ margin-top:4px; }

.payment-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.btn-icon{
  width:18px;
  height:18px;
  margin-right:6px;
  flex-shrink:0;
  display:inline-block;
  object-fit:contain;
  vertical-align:middle;
}

.payment-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(52,211,153,.9);
  background:rgba(5,46,22,.90);
  text-decoration:none;
  color:#bbf7d0;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(22,163,74,.45),0 0 0 1px rgba(0,0,0,.25);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    border-color .15s ease,
    color .15s ease;
}

.payment-button:hover,
.payment-button:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.30),transparent 60%),
    rgba(5,46,22,.98);
  color:#ecfdf5;
  border-color:rgba(22,163,74,1);
  transform:translateY(-1px);
}

.payment-button:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25);
}

.payment-button-yoomoney{
  border-color:rgba(147,51,234,.9);
  background:rgba(46,16,101,.92);
  box-shadow:0 6px 16px rgba(147,51,234,.42),0 0 0 1px rgba(0,0,0,.25);
}

.payment-button-yoomoney:hover,
.payment-button-yoomoney:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(168,85,247,.38),transparent 60%),
    rgba(46,16,101,.99);
  border-color:rgba(168,85,247,1);
}

.payment-button-telegram{
  border-color:rgba(56,189,248,.9);
  background:rgba(17,24,39,.90);
  box-shadow:0 6px 16px rgba(37,99,235,.32),0 0 0 1px rgba(0,0,0,.25);
}

.payment-button-telegram:hover,
.payment-button-telegram:focus-visible{
  background:
    radial-gradient(circle at 0 0,rgba(59,130,246,.28),transparent 60%),
    rgba(17,24,39,.98);
  border-color:rgba(59,130,246,1);
}

.payment-note{
  font-size:12px;
  color:var(--text-muted);
  margin-top:2px;
}

.tariff-block{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tariff-button{ justify-content:center; }

.tariff-main-strong{
  font-size:16px;
  font-weight:800;
  line-height:1.4;
}

.tariff-main-strong-big{ font-size:17px; }

.tariff-note{
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
}

.tariff-note-full{ text-align:center; }

.page-windows-pay .pay-panel{ margin-top:14px; max-width:380px; }
.page-windows-pay .pay-panel form{ width:100%; }
.page-windows-pay .pay-panel .payment-button{
  display:flex;
  width:100%;
  max-width:360px;
}

.alt-pay-title{
  font-size:13px;
  color:var(--text-muted);
  margin-top:10px;
}

/* =========================
   FORMS
   ========================= */

.form-group{ margin-top:8px; }

.form-label{
  font-size:14px;
  font-weight:600;
  display:block;
  margin-bottom:4px;
}

.form-input{
  width:100%;
  max-width:320px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.6);
  background:#070a1e;
  color:#f9fafb;
  font-size:14px;
}

.form-input::placeholder{ color:#94a3b8; }

.form-input:focus{
  outline:none;
  border-color:rgba(168,85,247,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 0 2px rgba(168,85,247,.55);
}

.form-hint{
  font-size:12px;
  color:var(--text-muted);
  margin-top:4px;
  max-width:360px;
}

.mt-4{ margin-top:4px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }

/* =========================
   PAY_RETURN (SUCCESS BOX)
   ========================= */

.pay-return-message{ width:100%; }

.pay-success-wrap{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.pay-success-box{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(17,24,39,.68);
  text-align:left;
}

.pay-lead{
  font-size:15px;
  line-height:1.35;
  font-weight:650;
  margin:0 0 8px 0;
}

.pay-text p{
  font-size:14px;
  line-height:1.45;
  font-weight:520;
  color:#e5e7eb;
  margin:0 0 6px 0;
}

.pay-actions{ margin:12px 0 10px 0; }

.pay-primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:750;
  font-size:14px;
  color:#0b1020;
  background:linear-gradient(120deg,#a855f7,#e879f9,#22c55e);
  box-shadow:0 14px 30px rgba(168,85,247,.20);
  border:1px solid rgba(255,255,255,.18);
  min-width:220px;
  transition:transform .12s ease, box-shadow .15s ease;
}

.pay-primary-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(168,85,247,.28);
}

.pay-creds{ margin-top:6px; }

.pay-creds-row{
  margin-top:6px;
  font-size:14px;
  line-height:1.35;
  font-weight:520;
}

.pay-creds-row .pay-creds-label{
  display:block;
  margin-bottom:6px;
}

.pay-creds-row > code{
  display:block;
  margin-top:0;
}

.pay-creds-label{
  color:rgba(255,255,255,.75);
  font-weight:600;
}

.pay-success-box code{
  background:rgba(15,23,42,.82);
  border:1px solid rgba(148,163,184,.30);
  padding:2px 8px;
  border-radius:10px;
  font-size:13px;
  color:#f9fafb;
  word-break:break-all;
}

.pay-small{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.75);
  font-weight:450;
}

@media (max-width:720px){
  .pay-primary-btn{ width:100%; min-width:0; }
}

/* =========================
   FLASH
   ========================= */

.page-windows-pay .flash-container{ margin-top:14px; }
.page-windows-pay .flash{
  font-weight:800;
  font-size:14px;
  line-height:1.35;
}

/* =========================
   CABINET UI
   ========================= */

.cab-card{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(17,24,39,.70);
  border:1px solid rgba(148,163,184,.30);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}

.cab-title{ font-size:15px; font-weight:800; margin-bottom:8px; }

.cab-row{
  display:flex;
  justify-content:space-between;
  margin:6px 0;
  font-size:14px;
}
.cab-row span{ color:var(--text-muted); }

.cab-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.cab-btn{
  min-width:180px;
  padding:9px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
}

.cab-btn-primary{
  background:linear-gradient(120deg,#a855f7,#22c55e);
  color:#0b1020;
  box-shadow:0 8px 22px rgba(168,85,247,.28);
}

.cab-btn-outline{
  background:transparent;
  color:#e5e7eb;
  border-color:rgba(148,163,184,.40);
}

.cab-btn:hover{ transform:translateY(-1px); }

.page-cabinet .brand-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.page-cabinet .cabinet-box{ max-width:760px; margin:0 auto; }

.page-cabinet .cabinet-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
}

.page-cabinet .cabinet-actions .payment-button{
  width:auto !important;
  max-width:none !important;
  min-width:190px;
}

.page-cabinet .cabinet-alert{ font-weight:900; margin-top:8px; }
.page-cabinet .cabinet-note{ margin-top:10px; }

.page-macOS-pay .brand-text-main{ text-transform:none !important; }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:720px){
  body{ padding:8px; align-items:flex-start; }

  .card{
    width:100%;
    max-width:100%;
    padding:12px 8px 0;
    border-radius:20px;
    margin:8px 0 8px;

    /* ✅✅✅ МОБИЛКА: карта прозрачнее на ~5% (0.95 -> 0.90) */
    background:linear-gradient(135deg,rgba(12,14,40,.90),rgba(6,8,26,.90));
  }

  .top-row{ flex-direction:column; gap:6px; }

  .top-nav{
    position:absolute;
    top:10px;
    right:10px;
    z-index:10;
    margin-left:0;
  }

  .top-nav .top-nav-link{
    min-width:0;
    width:fit-content;
    flex:0 0 auto;
    white-space:nowrap;
    padding:5px 10px;
    font-size:12px;
    line-height:1;
  }

  .brand-logo{ width:52px; height:52px; }

  /* ✅ ЕДИНЫЙ блок сдвига текстов под кнопку */
  .brand-text-main{
    font-size:16px;
    margin-top:12px;
  }

  .brand-text-sub{
    font-size:13px;
    line-height:1.2;
    margin-top:14px;
  }

  .store-row{ gap:4px 6px; align-items:flex-start; }

  .store-row-label,
  .contact-link-label{ flex-basis:100%; }

  .store-badge{ font-size:12px; padding:5px 10px; }

  .left{ margin-top:0; gap:6px; }

  .hero-title{ font-size:16px; line-height:1.25; }

  .hero-ai{ font-size:18px; }

  .features{ grid-template-columns:1fr; gap:4px; }

  .contacts{ gap:6px 8px; }

  .bottom-row{ margin-top:8px; }

  .copyright{ margin-top:8px; margin-bottom:2px; }

  .page-windows-pay .pay-panel{ max-width:100%; }
  .page-windows-pay .pay-panel .payment-button{ max-width:100%; }
}

@media (max-width:430px){
  .hero-subtitle{ display:none; }
}

@media (max-height:620px){
  .hero-subtitle,
  .note{ display:none; }

  .card{ padding:12px 8px 0; border-radius:18px; }
  .hero-ai{ font-size:16px; }
  .features{ gap:4px 10px; }
  .bottom-row{ margin-top:6px; }
  .copyright{ margin-top:8px; margin-bottom:2px; }
}

/* =========================
   CABINET BUTTON
   ========================= */

.cabinet-btn{
  border: 2px solid rgba(168, 85, 247, 1) !important;
  color: #f9fafb !important;
  background: rgba(17, 24, 39, 0.92) !important; /* плотнее */
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.20),
    0 10px 24px rgba(88, 28, 135, 0.45) !important;
}

.cabinet-btn:hover,
.cabinet-btn:focus-visible{
  background:
    radial-gradient(circle at 0 0, rgba(168,85,247,0.28), transparent 60%),
    rgba(17, 24, 39, 0.98) !important;
  border-color: rgba(232, 121, 249, 1) !important;
}

.cabinet-btn:active{
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(88, 28, 135, 0.35) !important;
}

@media (max-width: 720px){
  .cabinet-btn{
    min-width: 0 !important;
    width: fit-content !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
}

/* =========================
   FLASH MODAL (POPUP)
   ========================= */

.flash-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
}

.flash-modal.is-open{ display:flex !important; }

.flash-modal__overlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.50) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

.flash-modal__dialog{
  position:relative !important;
  width:min(560px, calc(100% - 24px)) !important;
  border-radius:18px !important;
  border:2px solid rgba(168,85,247,.95) !important;
  background:rgba(12, 14, 40, .94) !important;
  box-shadow:
    0 0 0 1px rgba(168,85,247,.20),
    0 24px 80px rgba(0,0,0,.45) !important;
  color:#fff !important;
  padding:14px 14px 12px !important;
}

.flash-modal__header{
  display:grid !important;
  grid-template-columns: 38px 1fr 38px !important;
  align-items:center !important;
}

.flash-modal__header::before{
  content:"" !important;
  width:38px !important;
  height:38px !important;
  display:block !important;
}

.flash-modal__title{
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  text-align:center !important;
  width:100% !important;
}

.flash-modal__close{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  border:1px solid rgba(168,85,247,.65) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-size:22px !important;
  cursor:pointer !important;
  justify-self:end !important;
}

.flash-modal__body{
  margin-top:10px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  text-align:center !important;
}

.flash-modal__msg{
  padding:10px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.30) !important;
  background:rgba(17,24,39,.80) !important;
  margin-top:10px !important;
  word-break:break-word !important;
  font-weight:800 !important;
  text-align:center !important;
}

.flash-modal__msg--success{
  border-color:rgba(34,197,94,.55) !important;
  background:rgba(34,197,94,.10) !important;
}

.flash-modal__msg--error,
.flash-modal__msg--danger{
  border-color:rgba(239,68,68,.55) !important;
  background:rgba(239,68,68,.10) !important;
}

.flash-modal__msg--info,
.flash-modal__msg--warning{
  border-color:rgba(56,189,248,.45) !important;
  background:rgba(56,189,248,.08) !important;
}

.flash-modal__footer{
  display:flex !important;
  justify-content:center !important;
  margin-top:12px !important;
}

.flash-modal__btn{
  font-weight: 900 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(168,85,247,.18) !important;
  color:#fff !important;
  cursor:pointer !important;
}

@media (max-width: 720px){
  .flash-modal__dialog{
    width: calc(100% - 36px) !important;
    max-width: 420px !important;
    padding: 12px 12px 10px !important;
    border-radius: 16px !important;
  }
  .flash-modal__title{ font-size: 16px !important; }
  .flash-modal__msg{
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
  .flash-modal__btn{
    width: 100% !important;
    max-width: 260px !important;
  }
}

/* =========================
   CONSENT LINKS / TEXT
   ========================= */

.consent-text .consent-link,
.consent-text .consent-link:visited{
  color: rgba(229,231,235,.88) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: pointer;
}

.consent-text .consent-link:hover,
.consent-text .consent-link:focus-visible{
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(229,231,235,.85) !important;
}

.consent-text .consent-link:active{ opacity: .9; }

.consent-text{
  display: block;
  max-width: 520px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.45;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.consent-text::after{
  content: "";
  display: inline-block;
  width: 100%;
}

/* =========================
   iPhone: STOP INPUT ZOOM
   ========================= */

@media (max-width: 720px){
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea{
    font-size:16px !important;
  }
}

/* =========================
   PAY DESIGN UNIFICATION (HEADER + SPACING)
   ========================= */

.pay-brand-title{
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none !important;
  line-height: 1.14;
  font-size: 18px;
  color: var(--text-main);
}

.pay-brand-osline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.pay-brand-osicon{
  width:22px;
  height:22px;
  object-fit:contain;
  vertical-align:middle;
  transform: translateY(-1px);
}

.page-windows-pay .section-title,
.page-macOS-pay .section-title{
  margin-top: 18px !important;
}

.page-windows-pay .tariff-block,
.page-macOS-pay .tariff-block{
  margin-top: 8px !important;
}

.page-windows-pay .tariff-note,
.page-macOS-pay .tariff-note{
  margin-bottom: 6px !important;
}

.page-windows-pay .pay-panel,
.page-macOS-pay .pay-panel{
  margin-top: 6px !important;
}

.page-windows-pay .form-group,
.page-macOS-pay .form-group{
  margin-top: 6px !important;
}

@media (min-width:721px){
  .top-nav .cabinet-btn{
    min-width: 190px !important;
    width: auto !important;
  }
}

@media (max-width:720px){
  .pay-brand-title{
    font-size: 16px;
    line-height: 1.12;
  }
  .pay-brand-osicon{
    width:20px;
    height:20px;
  }
}

.payment-button-yoomoney .btn-icon{
  width:24px;
  height:24px;
  margin-right:8px;
  transform: translateY(1px);
}

.pay-methods{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.pay-methods .flash-modal__ok{ flex: 1 1 220px; }

.pay-methods__hint{
  margin-top:10px;
  opacity:.85;
  font-size:14px;
}


/* ===== MOBILE: фон НЕ мутный ===== */
@media (max-width: 720px){
  /* делаем фон "чистым" (без GPU-фильтров, которые дают мыло) */
  body::before{
    filter: none !important;          /* убрали brightness/saturate */
    transform: none !important;       /* убрали translateZ(0) */
    will-change: auto !important;
    image-rendering: auto;
    /* можно чуть сдвинуть, если надо */
    background-position: center top;
  }

  /* ослабляем «плёнку», чтобы не было тумана */
  body::after{
    background:
      radial-gradient(circle at 50% -10%, rgba(168,85,247,.08), transparent 55%),
      radial-gradient(circle at 15% 10%,  rgba(59,130,246,.06), transparent 55%),
      radial-gradient(circle at 85% 18%,  rgba(34,197,94,.05), transparent 60%),
      linear-gradient(180deg,
        rgba(6,8,24,.18) 0%,
        rgba(3,4,14,.28) 70%,
        rgba(2,3,10,.35) 100%
      ) !important;
  }
}








/* Крупнее текст про код (страница подтверждения) */
.cab-code-info{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 10px;
  margin-bottom: 16px;
}

@media (max-width: 480px){
  .cab-code-info{
    font-size: 18px;
  }
}







.tariffs{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tariff-card{
  border-radius: 16px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}

.tariff-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tariff-title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.tariff-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}

.tariff-price{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}

.tariff-per{
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
  margin-left: 6px;
}

.tariff-note{
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.tariff-list{
  margin: 0;
  padding-left: 18px;
}

.tariff-list li{
  margin: 6px 0;
  font-size: 13px;
  opacity: 0.9;
}

@media (max-width: 860px){
  .tariffs{ grid-template-columns: 1fr; }
}