/* /download/styles.css */

:root{
  --brand-violet:#857BFF;
  --brand-blue:#00A3FF;

  --shadow-soft:0 18px 55px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05) inset;
  --shadow-hover:0 22px 70px rgba(0,0,0,.58),0 1px 0 rgba(255,255,255,.06) inset;

  --radius-xl:30px;
  --glass-blur:16px;
  --glass-sat:1.06;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:.12s;
  --t-base:.18s;

  --focus:0 0 0 3px rgba(0,163,255,.30),0 0 0 1px rgba(255,255,255,.14) inset;
}

/* page layout */
body[data-page="download"]{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body[data-page="download"] main{ flex:1; }

/* ✅ ВАЖНО: отступ сверху от Control Panel Widget (как на support) */
.dl-main{
  padding-top: calc(var(--ml-cp-h, 0px) + 58px);
  padding-bottom:70px;
}
.dl-section{ padding:34px 0; }

/* title */
.dl-title{
  margin:0 0 14px;
  text-align:center;
  font-family:'Unbounded','Inter',system-ui,sans-serif;
  font-weight:650;
  font-size:clamp(22px,2.2vw,36px);
  line-height:1.12;
  letter-spacing:.2px;
  color:#E7E3EA;
}

/* download card */
.dl-cards{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,380px));
  justify-content:center;
  gap:18px;
  margin-bottom:18px;
}

.dl-card{
  width:100%;
  border-radius:26px;
  padding:28px 26px 22px;
  text-align:center;
  position:relative;
  overflow:hidden;

  background:rgba(10,15,29,.56);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 22px 60px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:blur(var(--glass-blur)) saturate(1.08);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.08);
}

.dl-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 300px at 50% 0%, rgba(133,123,255,.26) 0%, transparent 58%),
    radial-gradient(520px 320px at 80% 10%, rgba(0,163,255,.20) 0%, transparent 62%);
  opacity:.95;
  pointer-events:none;
}

.dl-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.06) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.05) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.04) 0, transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.dl-card > *{ position:relative; }

.dl-os-icon{
  width:56px;
  height:56px;
  margin:6px auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.45));
}
.dl-os-icon img{ width:44px; height:44px; display:block; }

.dl-os-name{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.1;
  margin:0 0 14px;
  color:#fff;
}

.dl-btn{
  height:52px;
  width:100%;
  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  text-decoration:none;

  color:#fff;
  background:var(--brand-violet);
  box-shadow:0 16px 40px rgba(0,0,0,.42);

  transition:none;
  transform:none;

  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.dl-btn:hover{
  background:var(--brand-blue);
  filter:brightness(1.03);
}

.dl-btn:active{
  transform:translateY(1px);
  background:rgba(0,163,255,.95);
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}

.dl-btn:focus-visible{
  outline:none;
  box-shadow:var(--focus),0 16px 40px rgba(0,0,0,.42);
}

.dl-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
}

.dl-os-meta{
  margin-top:12px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:650;
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(154,164,191,.92);
}

/* SEO section */
.dl-seo{ padding:22px 0 40px; }

.dl-seo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

/* shared link */
.dl-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:52px;
  min-width:210px;
  padding:0 26px;
  border-radius:14px;

  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.01em;
  text-decoration:none;

  color:#fff;
  background:var(--brand-violet);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.34);

  transition:none;
  transform:none;

  -webkit-tap-highlight-color:transparent;
}

.dl-link:hover{ background:var(--brand-blue); filter:brightness(1.02); }
.dl-link:active{ background:rgba(0,163,255,.95); transform:translateY(1px); box-shadow:0 12px 30px rgba(0,0,0,.30); }
.dl-link:focus-visible{ outline:none; box-shadow:var(--focus),0 14px 34px rgba(0,0,0,.34); }

html[data-lang="en"] .dl-title{ word-spacing:.25em; }

/* ======================================================================
   SEO CARDS — unified split layout (cover/body/footer) to align buttons
   ====================================================================== */

.dl-seo-card{
  border-radius:var(--radius-xl);
  overflow:hidden;
  position:relative;

  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    var(--shadow-soft),
    inset 0 -1px 0 rgba(0,0,0,.35);

  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));

  transition:none;
  transform:none;

  display:flex;
  flex-direction:column;
}

.dl-seo-card:hover{
  transform:none;
  filter:none;
  border-color: rgba(255,255,255,.10);
  box-shadow:
    var(--shadow-soft),
    inset 0 -1px 0 rgba(0,0,0,.35);
}

.dl-seo-card::before,
.dl-seo-card::after{
  content:none !important;
}

.dl-seo-card--split{ padding:0; }

/* COVER */
.dl-seo-cover{
  position:relative;
  aspect-ratio:16 / 6.2;

  padding:
    clamp(10px, 1.2vw, 14px)
    clamp(10px, 1.6vw, 14px);

  overflow:hidden;
  display:block;

  background:
    radial-gradient(14px 14px at 18% 38%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(12px 12px at 78% 28%, rgba(0,163,255,.22), transparent 72%),
    radial-gradient(10px 10px at 64% 72%, rgba(133,123,255,.22), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    radial-gradient(640px 260px at 22% 18%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(135deg,
      rgba(168,85,247,.96) 0%,
      rgba(124,58,237,.92) 55%,
      rgba(59,130,246,.86) 100%
    );
}

/* вариации */
.dl-seo-cover--a{
  background:
    radial-gradient(14px 14px at 18% 38%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(12px 12px at 78% 28%, rgba(0,163,255,.22), transparent 72%),
    radial-gradient(10px 10px at 64% 72%, rgba(133,123,255,.22), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    radial-gradient(640px 260px at 22% 18%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(135deg, rgba(168,85,247,.96) 0%, rgba(124,58,237,.92) 55%, rgba(59,130,246,.86) 100%);
}
.dl-seo-cover--b{
  background:
    radial-gradient(14px 14px at 22% 30%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(12px 12px at 76% 22%, rgba(0,163,255,.24), transparent 72%),
    radial-gradient(10px 10px at 62% 70%, rgba(133,123,255,.18), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 1px, transparent 1px 26px),
    radial-gradient(640px 260px at 18% 14%, rgba(255,255,255,.11), transparent 62%),
    linear-gradient(135deg, rgba(124,58,237,.96) 0%, rgba(99,102,241,.92) 52%, rgba(14,165,233,.84) 100%);
}
.dl-seo-cover--c{
  background:
    radial-gradient(14px 14px at 20% 40%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(12px 12px at 80% 26%, rgba(0,163,255,.20), transparent 72%),
    radial-gradient(10px 10px at 66% 70%, rgba(133,123,255,.24), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    radial-gradient(640px 260px at 24% 16%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(135deg, rgba(168,85,247,.94) 0%, rgba(139,92,246,.90) 48%, rgba(59,130,246,.84) 100%);
}
.dl-seo-cover--d{
  background:
    radial-gradient(14px 14px at 18% 34%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(12px 12px at 78% 26%, rgba(0,163,255,.24), transparent 72%),
    radial-gradient(10px 10px at 60% 72%, rgba(133,123,255,.18), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.034) 0 1px, transparent 1px 26px),
    radial-gradient(640px 260px at 20% 14%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(135deg, rgba(99,102,241,.94) 0%, rgba(124,58,237,.90) 50%, rgba(59,130,246,.84) 100%);
}

.dl-seo-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(640px 280px at 70% 40%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(520px 260px at 20% 50%, rgba(0,0,0,.10), transparent 60%);
  pointer-events:none;
}

.dl-seo-coverInner{
  position:relative;
  z-index:2;

  height:100%;
  width:100%;

  display:grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.52fr);
  align-items:center;

  gap:clamp(2px, .6vw, 6px);

  min-width:0;
  pointer-events:none;
}

/* LEFT ICON */
.dl-seo-icon{
  position:relative;
  width:100%;
  min-width:0;

  height:100%;
  display:grid;

  align-items:center;
  justify-items:start;

  padding-left: clamp(0px, 0.6vw, 8px);
  overflow:visible;
}

.dl-seo-iconImg{
  width:min(100%, clamp(140px, 19vw, 190px));
  height:auto;
  max-height:100%;
  display:block;
  object-fit:contain;

  transform: translateX(clamp(4px, 0.55vw, 8px)) translateY(0);
  transform-origin:50% 50%;

  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.32));
}

/* RIGHT TEXT */
.dl-seo-coverText{
  min-width:0;
  height:100%;
  box-sizing:border-box;

  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding-block: clamp(10px, 1.2vw, 14px);
  padding-inline: 0;

  overflow:hidden;
}

/* TITLE */
.dl-seo-coverTitle{
  margin:0;
  font-family:'Unbounded', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;

  font-size:clamp(18px, 2.05vw, 28px);
  color:rgba(255,255,255,0.98);
  text-shadow:0 14px 34px rgba(0,0,0,0.35);

  display:block;
  min-width:0;
  max-width:100%;
}

.dl-seo-coverTitle .dl-titleLine{
  display:block;
  line-height:1.02;
}

.dl-seo-coverTitle--ru{
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
}

.dl-seo-coverTitle--ru2lines{
  font-size: clamp(18px, 2.05vw, 28px);
  letter-spacing: -0.03em;
}

/* BODY */
.dl-seo-body{
  position:relative;
  overflow:hidden;

  background:rgba(10, 15, 29, .56);
  border-top:1px solid rgba(255,255,255,.10);

  padding:
    clamp(20px, 2.4vw, 26px)
    clamp(18px, 2.2vw, 22px)
    clamp(22px, 2.6vw, 28px);

  display:flex;
  flex-direction:column;

  flex:1;
}

.dl-seo-body::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 300px at 50% 0%, rgba(133,123,255,.22) 0%, transparent 58%),
    radial-gradient(520px 320px at 80% 10%, rgba(0,163,255,.16) 0%, transparent 62%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}

.dl-seo-body::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.055) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.045) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.04) 0, transparent 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.dl-seo-body > *{
  position:relative;
  z-index:1;
}

.dl-seo-text{
  margin:0 0 10px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:520;
  font-size:14.5px;
  line-height:1.78;
  color:rgba(217,222,234,.88);
}
.dl-seo-text:last-child{ margin-bottom:0; }
.dl-seo-text strong{ color:#fff; font-weight:820; }

/* list */
.dl-seo-list{
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.dl-seo-list li{
  position:relative;
  padding-left:18px;

  font-family:'Inter',system-ui,sans-serif;
  font-weight:540;
  font-size:14.5px;
  line-height:1.72;
  color:rgba(217,222,234,.88);
}

.dl-seo-list li strong{ color:#fff; font-weight:820; }

.dl-seo-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;

  width:7px;
  height:7px;
  border-radius:50%;

  background: var(--brand-violet);
  box-shadow:0 0 0 3px rgba(0,163,255,.12);
}

/* FOOTER */
.dl-seo-footer{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(9, 13, 26, .66);

  padding:18px 18px 20px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* 1-я карточка: чуть крупнее текст (как у тебя было) */
.dl-seo-grid > article:nth-child(1) .dl-seo-text{
  font-size: 15.6px;
  line-height: 1.88;
  margin: 0 0 14px;
}
.dl-seo-grid > article:nth-child(1) .dl-seo-body{
  padding:
    clamp(22px, 2.6vw, 30px)
    clamp(20px, 2.4vw, 26px)
    clamp(24px, 2.9vw, 32px);
}

/* 4-я карточка: “пункты” без точек (как у тебя было) */
.dl-seo-grid > article:nth-child(4) .dl-seo-body{
  padding:
    clamp(24px, 2.9vw, 34px)
    clamp(22px, 2.6vw, 30px)
    clamp(26px, 3.2vw, 38px);

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.dl-seo-grid > article:nth-child(4) .dl-seo-text{
  position:relative;
  margin:0;

  padding:14px 16px;
  border-radius:14px;

  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);

  font-size:16.6px;
  line-height:1.9;
  font-weight:560;
  color:rgba(217,222,234,.92);
}
.dl-seo-grid > article:nth-child(4) .dl-seo-text::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;

  width:3px;
  border-radius:3px;

  background: var(--brand-violet);
  opacity: .95;
}
.dl-seo-grid > article:nth-child(4) .dl-seo-text strong{
  color:#fff;
  font-weight:900;
}
.dl-seo-grid > article:nth-child(4) .dl-seo-text:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

/* responsive */
@media (max-width:1104px){
  .dl-main{
    padding-top: calc(var(--ml-cp-h, 0px) + 48px);
    padding-bottom:58px;
  }
  .dl-seo-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .dl-seo-cover{
    aspect-ratio:16 / 7.8;
    padding:10px 10px;
  }

  .dl-seo-coverInner{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.52fr) !important;
    gap:4px;
  }

  .dl-seo-icon{
    padding-left:4px;
  }

  .dl-seo-iconImg{
    width:min(100%, clamp(130px, 36vw, 170px));
    transform: translateX(6px) translateY(0);
  }

  .dl-seo-coverText{
    padding-block: 10px;
  }

  .dl-link{ min-width:190px; }
}

@media (max-width:520px){
  .dl-card{ padding:24px 18px 18px; border-radius:22px; }
  .dl-os-name{ font-size:24px; }

  .dl-seo-card{ border-radius:22px; }
  .dl-seo-coverTitle{ font-size:clamp(18px, 6vw, 26px); }
  .dl-seo-coverTitle--ru{ font-size:clamp(18px, 6vw, 26px); }

  .dl-link{
    height:48px;
    min-width:190px;
    padding:0 22px;
    font-size:14.8px;
  }

  .dl-seo-grid > article:nth-child(4) .dl-seo-body{ gap:12px; }
  .dl-seo-grid > article:nth-child(4) .dl-seo-text{
    padding:12px 14px;
    font-size:15.6px;
    line-height:1.85;
  }
  .dl-seo-grid > article:nth-child(4) .dl-seo-text::before{
    top:10px;
    bottom:10px;
  }
}

/* на всякий случай: внутри карточек тоже без анимаций */
.dl-seo-card *{ transition:none !important; }