:root{
--logo-dark: 13,55,63;
--logo-teal: 17,195,176;
--logo-cyan: 78,224,208;


--page-bg: radial-gradient(1200px 900px at 18% 18%, rgba(var(--logo-dark),0.18), transparent 70%), rgb(8,14,18);
--card-bg: rgba(20,24,30,0.94);
--card-bg-2: rgba(16,18,24,0.96);
--toc-bg: rgba(255,255,255,0.02);


--text-base: rgba(236,245,246,0.98);
--muted: rgba(175,185,190,0.72);
--lead: rgba(210,225,225,0.74);


--accent: rgba(var(--logo-teal),0.98);
--accent-2: rgba(var(--logo-cyan),0.92);


--btn-border: rgba(255,255,255,0.06);
--btn-bg: linear-gradient(90deg, rgba(var(--logo-teal),0.14), rgba(var(--logo-cyan),0.10));


--radius: 12px;
--maxw: 1100px;
--gap: 20px;

  --shadow-teal-light: rgba(100, 220, 200, 0.25);
  --shadow-teal-medium: rgba(80, 200, 180, 0.35);
  --shadow-teal-strong: rgba(60, 180, 160, 0.45);
  --shadow-cyan-glow: rgba(100, 240, 220, 0.2);
  
  --shadow-teal-light-light: rgba(100, 220, 200, 0.15);
  --shadow-teal-medium-light: rgba(80, 200, 180, 0.2);
  --shadow-teal-strong-light: rgba(60, 180, 160, 0.25);
}

/* ПЕРЕХОД МЕЖДУ ТЕМАМИ */
html.theme-transition,
html.theme-transition body,
html.theme-transition .topbar,
html.theme-transition .hero-inner,
html.theme-transition .tariff-card,
html.theme-transition .tariff-card recommended,
html.theme-transition .tariff-card highlight,
html.theme-transition .benefit,
html.theme-transition .toc,
html.theme-transition .btn {
  transition: color 320ms ease, background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, fill 320ms ease, stroke 320ms ease, opacity 240ms ease;
}

/* СВЕТЛАЯ ТЕМА */
html[data-theme='light']{
  --btn-bg: linear-gradient(90deg, rgba(var(--logo-teal),0.94), rgba(var(--logo-cyan),0.90));
  --btn-border: rgba(0,0,0,0.08);
  --btn-text: #ffffff;
  --btn-text-dark: #062028;
--page-bg: linear-gradient(135deg, rgba(236,245,246,1), rgba(245,250,251,1));
--card-bg: rgba(255,255,255,0.98);
--card-bg-2: rgba(250,251,252,0.98);
--toc-bg: rgba(6,6,8,0.02);


--text-base: rgba(18,22,26,0.96);
--muted: rgba(70,75,90,0.72);
--lead: rgba(70,75,90,0.65);
--accent: rgba(var(--logo-teal),0.96);
--accent-2: rgba(var(--logo-cyan),0.88);
--btn-border: rgba(30,30,40,0.08);
.btn.secondary{
  border: 1px solid rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.7);
  background: transparent;
}
.btn.ghost{
  color: rgba(0,0,0,0.6);
}
}


/* СБРОС И БАЗА */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
color:var(--text-base);
background:var(--page-bg);
min-height:100vh;
-webkit-font-smoothing:antialiased;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
background-size:cover;
line-height:1.45;
}


.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.grid-wrap{display:grid;grid-template-columns:280px 1fr;gap:var(--gap);max-width:var(--maxw);margin:24px auto;padding:0 18px;position:relative}


/* ВЕРХУШКА - ТОПБАР */
.topbar{
display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-base)}
.brand-logo{width:75px;height:75px;border-radius:8px;object-fit:contain;background:transparent;display:block}
.brand-text{font-weight:700;font-size:17px}
.brand .dot{color:var(--accent);margin-left:6px}


.nav{display:flex;align-items:center;gap:10px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;font-size:14px}
.nav-link:hover{color:var(--accent)}


/* КНОПКИ */
.btn{
display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:8px 12px;border:1px solid var(--btn-border);background:transparent;color:var(--text-base);text-decoration:none;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--shadow-teal-strong);
}
.btn.primary{
  background: var(--btn-bg);
  border: 0;
  color: var(--btn-text, #fff);
  box-shadow: 0 2px 4px var(--shadow-teal-medium);
}
.btn.primary:hover {
  box-shadow: 0 6px 12px var(--shadow-teal-strong);
}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.btn.ghost{background:transparent;border:0;color:var(--muted)}


/* ОСНОВНОЙ БАННЕР */
.hero{position:relative;display:flex;align-items:center;justify-content:center;padding:42px 16px}
.hero-inner{max-width:840px;background:linear-gradient(180deg,var(--card-bg),var(--card-bg-2));padding:28px;border-radius:14px;box-shadow:0 10px 30px var(--shadow-teal-medium);backdrop-filter:blur(4px)}
.hero-title{margin:0;text-align:center;font-size:30px;color:var(--accent);line-height:1.05}
.hero-mini-title{margin:0;text-align:center;font-size:29px;color:var(--accent);line-height:1.05}
.hero-sub{margin:10px 0;color:var(--lead)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.features-quick{display:flex;gap:12px;list-style:none;padding:10px 0;margin:12px 0 0;color:var(--muted);font-size:14px}


.hero-watermark{position:absolute;right:6%;top:6%;opacity:0.06;pointer-events:none;will-change:opacity,transform}
.hero-watermark img{width:320px;max-width:38vw;height:auto;display:block;filter: drop-shadow(0 8px 24px var(--shadow-cyan-glow))}


/* ОГЛАВЛЕНИЕ */
.toc{background:var(--toc-bg);padding:14px;border-radius:12px;color:var(--muted);position:sticky;top:20px;align-self:flex-start}
.toc h3{margin:0 0 8px 0;color:var(--accent)}
.toc .toc-nav{display:flex;flex-direction:column;gap:8px}
.toc a{color:var(--muted);text-decoration:none;font-size:15px}
.toc a:hover{color:var(--accent)}


/* КОНТЕНТ */
.content{padding:6px}
h2{color:var(--accent);margin-top:8px}
.muted{color:var(--muted);font-size:14px}


/* ТАРИФНЫЕ КАРТОЧКИ */
.tariff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
  margin: 12px 0;
}
.tariff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 18px 24px;
  min-height: 260px;
  gap: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 2px 14px var(--shadow-teal-light);
  transition: transform .14s ease, box-shadow .14s ease;
  overflow: visible;
}
.tariff-card:hover {
  box-shadow: 0 8px 20px var(--shadow-teal-strong);
}
.tariff-card.recommended:hover {
  box-shadow: 0 8px 20px var(--shadow-teal-strong);
}
.tariff-card.highlight:hover {
  box-shadow: 0 8px 20px var(--shadow-teal-strong);
}
.tariff-emblem {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: translateZ(0);
}
.recommended{border:1px solid rgba(255,255,255,0.04)}
.tariff-card.recommended{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 18px 24px;
  min-height: 260px;
  gap: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 2px 14px var(--shadow-teal-light);
  transition: transform .14s ease, box-shadow .14s ease;
  overflow: visible;
}
.tariff-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.12;
  color: var(--text-base);
}
.tariff-card .muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.tariff-card .tariff-action {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.tariff-card .btn.buy {
  align-self: center;
  padding: 10px 16px;
}

/* БЕНЕФИТС */
.benefits{display:flex;gap:14px;margin:18px 0;flex-wrap:wrap}
.benefit{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:14px;border-radius:12px;flex:1;min-width:200px;box-shadow:0 4px 16px var(--shadow-teal-light)}
.benefit .icon{font-size:20px;margin-bottom:8px}

/* ФАК (ю лол кек) */
.faq details{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:10px;border-radius:10px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--accent)}


/* ФУТЕР */
.site-footer{padding:20px 18px;border-top:1px solid rgba(255,255,255,0.03);text-align:center;color:var(--muted);margin-top:22px}


/* АНИМАЦИЯ ПОЯВЛЕНИЯ */
.tariff-card, .benefit, .referral, .faq details, .hero-inner{opacity:0;transform:translateY(18px) scale(.995);transition:opacity .42s ease, transform .42s ease}
.tariff-card.inview, .benefit.inview, .referral.inview, .faq details.inview, .hero-inner.inview{opacity:1;transform:none}


@keyframes fadeInUp{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}


/* accessibility & utilities */
a:focus, button:focus, .btn:focus{outline:3px solid rgba(var(--logo-teal),0.14);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* performance hints */
body, .topbar, .hero-inner, .tariff-card, .benefit, .referral, .nav-link, .btn, .site-footer, .faq details, .hero-watermark img{transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .4s ease}


/* reduced motion */
@media (prefers-reduced-motion: reduce){
*{transition:none!important;animation:none!important}
}


/* responsiveness */
@media (max-width:1000px){
.tariff-grid{grid-template-columns:1fr 1fr}
.grid-wrap{grid-template-columns:1fr;padding:0 14px}
.toc{display:none}
.hero-inner{padding:20px}
.hero-title{font-size:24px}
.hero-watermark{display:none}
}
@media (max-width:640px){
.tariff-grid{grid-template-columns:1fr}
.brand-text{display:none}
.brand-logo{width:36px;height:36px}
.hero-inner{padding:18px}
.hero-title{font-size:20px}
}


/* ФИКСЫ ПОД МОБИЛУ */
@media (max-width:800px){body{background-attachment:scroll}}