/* ===== foundation ===== */
:root{
  --bg1:#090c14; --bg2:#111524;
  --text:#e6e9f2; --muted:#9aa3b2;
  --stroke:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);

  --font-head:"Sora", Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  --font-text:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial;

  /* палитры планов */
  --wk1:#06b6d4; --wk2:#22d3ee;   /* week (cyan)    */
  --mo1:#8b5cf6; --mo2:#a78bfa;   /* month (violet) */
  --q3a:#ec4899; --q3b:#f472b6;   /* 3m  (pink)     */
  --h6a:#14b8a6; --h6b:#2dd4bf;   /* 6m  (teal)     */
  --yr1:#d97706; --yr2:#f59e0b;   /* year (amber)   */
}

/* === акцент для всей страницы от плана (используется и в хедере) === */
body{ --ac1: var(--wk1); --ac2: var(--wk2); }                 /* дефолт */
body[data-plan="week"]   { --ac1:var(--wk1); --ac2:var(--wk2); }
body[data-plan="month"]  { --ac1:var(--mo1); --ac2:var(--mo2); }
body[data-plan="3months"]{ --ac1:var(--q3a); --ac2:var(--q3b); }
body[data-plan="6months"]{ --ac1:var(--h6a); --ac2:var(--h6b); }
body[data-plan="year"]   { --ac1:var(--yr1); --ac2:var(--yr2); }

/* === header: логотип + градиентный текст === */
.brand-link{
  display:inline-flex; align-items:center; gap:12px;
  padding:6px 10px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--ac2) 35%, rgba(255,255,255,.1));
  box-shadow:
    0 10px 26px rgba(2,6,23,.45),
    0 0 0 1px color-mix(in oklab, var(--ac2) 40%, transparent) inset,
    0 0 22px color-mix(in oklab, var(--ac2) 25%, transparent);
}

.brand-logo{
  width:40px; height:40px; display:block; border-radius:10px;
  box-shadow:
    0 4px 16px color-mix(in oklab, var(--ac2) 28%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.10);
  object-fit:cover; /* на случай, если прилетит другой логотип */
}

.gradient-text{
  font-family: var(--font-head);
  font-weight: 800; letter-spacing:.3px;
  font-size: 18px; line-height: 1;
  background: linear-gradient(90deg, var(--ac1), var(--ac2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* делаем реальным градиентом */
  text-shadow: 0 0 24px color-mix(in oklab, var(--ac2) 20%, transparent);
}

/* адаптив на очень узких экранах */
@media (max-width:420px){
  .brand-logo{width:34px; height:34px}
  .gradient-text{font-size:16px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-text);
  color:var(--text); line-height:1.55; overflow-x:hidden; position:relative;
  background:
    radial-gradient(70% 100% at 20% 10%, rgba(49,38,100,.5) 0%, rgba(49,38,100,0) 70%),
    radial-gradient(80% 120% at 80% -10%, rgba(13,134,216,.32) 0%, rgba(13,134,216,0) 60%),
    radial-gradient(90% 130% at 95% 95%, rgba(104,36,126,.34) 0%, rgba(104,36,126,0) 70%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:-20px; pointer-events:none; z-index:0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.02) 0 2deg, transparent 2deg 4deg),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, transparent 1px 2px);
  mix-blend-mode:soft-light; opacity:.5;
}

a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:28px}
.header,.footer{display:flex;justify-content:center;padding:12px 0;position:relative;z-index:2}
.logo{font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:.4px}

/* ===== стеклянная сцена, центр ===== */
.stage{
  position:relative; z-index:1; padding:32px;
  max-width:980px; margin:40px auto;
}
.stage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));
  border-radius:24px; border:1px solid var(--stroke);
  box-shadow:0 30px 80px rgba(2,6,23,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===== карточка (вертикальная раскладка) ===== */
/* переменные акцента будут прокинуты планом ниже */
.tariff-card{
  --ac1: var(--wk1);
  --ac2: var(--wk2);

  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:22px;
  padding:32px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), var(--glass);
  border:1px solid var(--stroke);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 44px rgba(2,6,23,.55),
    0 0 0 1.5px color-mix(in oklab, var(--ac2) 55%, transparent) inset,
    0 0 36px color-mix(in oklab, var(--ac2) 22%, transparent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tariff-card:hover{transform:translateY(-2px)}
@media (min-width:860px){ .tariff-card{padding:36px} }

/* ===== заголовок ===== */
.t-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.t-title{
  font-family:var(--font-head);
  font-size:34px; line-height:1.15;
  font-weight:800; letter-spacing:.2px; margin:0;
}
.t-title .brand{color:var(--ac2)} /* акцент бренда */
@media (min-width:980px){ .t-title{font-size:38px} }

.t-badge{
  font-size:12px; padding:6px 10px; border-radius:999px; font-weight:800;
  color:#fff; border:none;
  background:linear-gradient(135deg, var(--ac1), var(--ac2));
  box-shadow:0 2px 10px color-mix(in oklab, var(--ac2) 35%, transparent);
}

/* ===== цена ===== */
.t-price{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.t-price .main{font-family:var(--font-head); font-size:52px; font-weight:900; letter-spacing:.2px}
.t-price .note{display:flex; align-items:baseline; gap:8px; color:var(--muted)}
.t-price .old{opacity:.55; text-decoration:line-through}
.t-price .discount{font-weight:900; font-size:26px; color:var(--ac2)}

/* ===== фичи ===== */
.t-features{
  display:grid; grid-template-columns:repeat(2, minmax(280px,1fr)); gap:16px 22px;
}
@media (max-width:780px){ .t-features{grid-template-columns:1fr} }

.t-feature{display:flex; align-items:flex-start; gap:12px}
.tf-text{display:flex; flex-direction:column; gap:2px}
.tf-title{font-weight:800; font-size:16px; letter-spacing:.2px}
.tf-desc{font-size:14px; color:var(--muted)}

/* ===== иконки: единый стиль + акцент цвета ===== */
.t-ico{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 32px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--ac1) 18%, transparent), color-mix(in oklab, var(--ac2) 10%, transparent));
  border:1px solid color-mix(in oklab, var(--ac2) 28%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--ac2);
}
.t-ico svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}

/* ===== CTA ===== */
.t-cta{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.btn{
  padding:14px 22px; border-radius:14px; font-weight:900; letter-spacing:.2px;
  color:#fff; box-shadow:0 10px 28px color-mix(in oklab, var(--ac2) 35%, rgba(2,6,23,.45));
  background:linear-gradient(135deg,var(--ac1),var(--ac2));
  transition:.2s;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.05)}
.btn-ghost{font-size:13px; opacity:.85; text-decoration:underline; text-underline-offset:3px}

/* ===== инъекция палитры по плану ===== */
.tariff-card[data-plan="week"]  { --ac1:var(--wk1); --ac2:var(--wk2); }
.tariff-card[data-plan="month"] { --ac1:var(--mo1); --ac2:var(--mo2); }
.tariff-card[data-plan="3months"]{ --ac1:var(--q3a); --ac2:var(--q3b); }
.tariff-card[data-plan="6months"]{ --ac1:var(--h6a); --ac2:var(--h6b); }
.tariff-card[data-plan="year"]  { --ac1:var(--yr1); --ac2:var(--yr2); }