/* ==========================================================================
   WPTheme — основные стили (Inter + Inter, light, purple+orange)
   Покрывает: главную (макет) + все секционные шаблоны (page-hero, breadcrumbs,
   compare-table, doc/pay/cert/form/map/step и т.д.).
   ========================================================================== */

:root{
  --bg:         #FFFFFF;
  --bg-2:       #FAFAFC;
  --bg-3:       #F5F3FF;
  --bg-purple:  #F8F6FF;
  --bg-orange:  #FFF8F2;

  --ink:        #0F0F1A;
  --ink-2:      #3D3D52;
  --muted:      #6E6E84;
  --line:       #EAEAF0;
  --line-2:     #F2F2F7;

  --purple:     #7C3AED;
  --purple-d:   #6D28D9;
  --purple-l:   #A78BFA;
  --purple-50:  #F5F3FF;
  --purple-100: #EDE9FE;

  --orange:     #F97316;
  --orange-d:   #EA580C;
  --orange-l:   #FB923C;
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;

  --green:      #10B981;
  --green-100:  #DCFCE7;
  --red:        #EF4444;
  --blue:       #0284C7;
  --blue-100:   #E0F2FE;

  /* акцентный «бренд-цвет» — раньше был purple→orange градиент, теперь solid orange-d */
  --grad-primary: var(--orange-d);
  --grad-purple:  linear-gradient(135deg, var(--purple), var(--purple-d));
  --grad-orange:  linear-gradient(135deg, var(--orange), #FBBF24);
  /* цветные «тон»-градиенты для иконок-чипов на секционных страницах */
  --indigo:       #6366F1;
  --grad-brand:   linear-gradient(135deg, var(--purple), var(--purple-d));
  --grad-cool:    linear-gradient(135deg, #6366F1, #06B6D4);
  --grad-warm:    linear-gradient(135deg, var(--orange), #EC4899);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(15,15,30,0.04), 0 2px 4px rgba(15,15,30,0.03);
  --shadow:    0 4px 12px rgba(15,15,30,0.05), 0 12px 32px rgba(124,58,237,0.06);
  --shadow-lg: 0 8px 24px rgba(15,15,30,0.06), 0 24px 64px rgba(124,58,237,0.10);
  --shadow-pop:0 20px 50px -12px rgba(124,58,237,0.25);

  --maxw: 1800px;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{display:block;max-width:100%}
svg{fill:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
ul{list-style:none;padding:0;margin:0}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:'Inter', sans-serif;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.08;
  color:var(--ink);
  margin:0;
}
h1{font-size:clamp(2.4rem, 5vw, 4.2rem); letter-spacing:-0.03em}
h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.12}
h3{font-size:1.2rem; font-weight:600; line-height:1.3}
h4{font-size:1rem; font-weight:600}
h5{font-size:.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase}
p{color:var(--ink-2); margin:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--purple);
  padding:7px 14px;
  border-radius:999px;
  background:var(--purple-50);
  white-space:nowrap;
}
.eyebrow.orange{color:var(--orange-d); background:var(--orange-50)}
.eyebrow .dot{
  width:6px;height:6px;border-radius:999px;background:var(--purple);
  animation:pulse 2.4s ease-in-out infinite;
}
.eyebrow.orange .dot{background:var(--orange)}
@keyframes pulse{50%{opacity:0.35;transform:scale(0.85)}}

/* Раньше .gradient-text/.hl-gradient были градиентом purple→orange.
   По требованию — solid яркий оранжевый. */
.gradient-text,
.hl-gradient{
  color: var(--orange-d);
  background: none;
  -webkit-text-fill-color: var(--orange-d);
}
.hl-purple{color:var(--purple)}
.hl-orange{color:var(--orange-d)}

/* legacy small chip */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--purple-50); color:var(--purple);
  font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-0.005em;
  padding:13px 22px;
  border-radius:12px;
  border:1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space:nowrap;
}
.btn-lg, .btn.lg{padding:16px 28px; font-size:16px}
.btn-sm{padding:9px 16px; font-size:13px}

.btn-primary{
  background: var(--purple);
  color:#fff;
  box-shadow: 0 1px 2px rgba(15,15,30,0.05), 0 8px 20px -4px rgba(124,58,237,0.45);
}
.btn-primary:hover{background:var(--purple-d); transform:translateY(-1px); box-shadow: 0 1px 2px rgba(15,15,30,0.05), 0 12px 24px -4px rgba(124,58,237,0.55); color:#fff}

.btn-outline{
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover{border-color:var(--purple); color:var(--purple)}

.btn-orange{
  background: var(--orange);
  color:#fff;
  box-shadow: 0 1px 2px rgba(15,15,30,0.05), 0 8px 20px -4px rgba(249,115,22,0.4);
}
.btn-orange:hover{background:var(--orange-d); transform:translateY(-1px); color:#fff}

.btn-ghost{
  color: var(--ink-2); font-weight:500; padding:10px 14px;
}
.btn-ghost:hover{color: var(--purple)}

.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.cta-row.left{justify-content:flex-start}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:24px; padding:14px 0}

.logo{display:flex; align-items:center; gap:11px; color:var(--ink)}
.logo-img{ display:block}
.logo-mark{
  width:38px; height:38px;
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  color:#fff;
  display:grid; place-items:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:15px;
  border-radius:10px;
  box-shadow: 0 4px 12px -2px rgba(124,58,237,0.45);
}
.logo-text .logo-name,
.logo-name{font-family:'Inter',sans-serif; font-weight:800; font-size:17px; line-height:1; color:var(--ink)}
.logo-text .logo-tagline,
.logo-tag, .logo-tagline{font-size:11px; color:var(--muted); margin-top:3px}

.nav-links{display:flex; align-items:center; gap:2px; margin:0 auto}
.nav-links a, .nav-link{
  font-family:'Inter',sans-serif; font-weight:600; font-size:16px;
  color: var(--ink-2);
  padding:10px 14px;
  border-radius:8px;
  transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-link:hover{color: var(--purple); background: var(--purple-50)}

/* Dropdown (исходные секционные ссылки) */
.nav-item{position:relative}
.nav-item .nav-submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:300px;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  opacity:0; visibility:hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index:60;
}
.nav-item:hover .nav-submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-submenu a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  font-size:13.5px;
}
.nav-submenu a:hover{background:var(--purple-50)}
.sub-ico{
  width:36px; height:36px; flex-shrink:0;
  background:var(--purple-100); color:var(--purple);
  border-radius:10px; display:grid; place-items:center;
}
.sub-ico i{font-size:15px; line-height:1}
.sub-info{display:flex; flex-direction:column; gap:2px}
.sub-info small{color:var(--muted); font-size:11px; font-weight:400; display:block}

/* Каретка-стрелка у пунктов с выпадающим подменю.
   Специфичность .nav-link.has-sub (0-2-0) > .nav-links a (0-1-1),
   иначе padding-right из .nav-links a побеждает и каретка лезет на текст. */
.nav-link.has-sub{position:relative; padding-right:28px}
.nav-link.has-sub::after{
  content:'';
  position:absolute; right:12px; top:50%;
  width:6px; height:6px;
  border:1.5px solid currentColor;
  border-top:0; border-left:0;
  transform: translate(0,-65%) rotate(45deg);
  opacity:0.55;
  transition: transform .2s, opacity .2s;
}
.nav-item:hover .nav-link.has-sub::after{
  transform: translate(0,-25%) rotate(225deg);
  opacity:1;
}

/* небольшой «мостик» между пунктом и подменю, чтобы курсор не терял hover */
.nav-item::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:8px;
}

/* Выпадающее меню «Войти» (в nav-right, выровнено по правому краю) */
.login-menu{position:relative; display:flex; align-items:center}
.login-menu .btn-ghost.has-login{position:relative; padding-right:18px}
.login-menu .btn-ghost.has-login::after{
  content:''; position:absolute; right:2px; top:50%;
  width:6px; height:6px; border:1.5px solid currentColor; border-top:0; border-left:0;
  transform: translate(0,-65%) rotate(45deg); opacity:0.55;
  transition: transform .2s, opacity .2s;
}
.login-menu:hover .btn-ghost.has-login::after{transform: translate(0,-25%) rotate(225deg); opacity:1}
.login-menu .login-submenu{
  position:absolute; top:100%; right:0; left:auto; transform: translateY(8px);
  min-width:300px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow: var(--shadow);
  opacity:0; visibility:hidden;
  transition: opacity .18s, transform .18s, visibility .18s; z-index:60;
}
.login-menu:hover .login-submenu{opacity:1; visibility:visible; transform: translateY(0)}
.login-menu::after{content:''; position:absolute; left:0; right:0; top:100%; height:8px}

.nav-right{display:flex; align-items:center; gap:12px}
.lang-switch{position:relative}
.lang-flag{
  display:inline-block; width:20px; height:14px; flex:0 0 auto;
  border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08); line-height:0;
}
.lang-flag svg{display:block; width:100%; height:100%}

.lang-current{
  display:flex; align-items:center; gap:7px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:0.03em;
  padding:5px 8px 5px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  color: var(--ink); background:#fff;
  cursor:pointer; transition: border-color .18s, box-shadow .18s;
}
.lang-current:hover{border-color: var(--purple, #7c5cff)}
.lang-current .lang-caret{color: var(--muted); transition: transform .2s}
.lang-switch.open .lang-current{border-color: var(--purple, #7c5cff); box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.lang-switch.open .lang-current .lang-caret{transform: rotate(180deg)}

.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:168px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 34px rgba(20,16,40,.14);
  list-style:none; margin:0; z-index:70;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform: translateY(0)}
.lang-menu li{margin:0}
.lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:9px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:13.5px;
  color: var(--ink); text-align:left; cursor:pointer;
  transition: background .14s;
}
.lang-menu button:hover{background: var(--purple-50)}
.lang-menu button.active{background: var(--purple-50); font-weight:600}
.lang-menu button.active .lang-name{color: var(--purple, #7c5cff)}
.lang-menu .lang-name{flex:1}
.lang-menu button.active::after{
  content:''; width:8px; height:8px; border-radius:50%;
  background: var(--purple, #7c5cff); flex:0 0 auto;
}

.burger{display:none; width:40px;height:40px; border-radius:10px; color:var(--ink)}

/* ---------- HERO (landing) ---------- */
.hero{position:relative; overflow:hidden; padding:80px 0 90px}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.blob, .hero-blob, .page-hero-blob{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35;
}
.blob-1{top:-20%; left:-10%; width:520px; height:520px; background:var(--purple-l)}
.blob-2{top:30%; right:-10%; width:480px; height:480px; background:var(--orange); opacity:0.18}
.blob-3{bottom:-30%; left:30%; width:600px; height:600px; background:var(--purple-l); opacity:0.18}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr 1fr; gap:60px;
  align-items:center;
}
.hero-left{min-width:0}
.hero-left .eyebrow{margin-bottom:24px}
.hero-h1{margin-bottom:24px}
.hero-h1 .word-purple{
  position:relative;
  color: var(--orange-d);
}
.hero-sub{
  font-size:1.12rem;
  color:var(--ink-2);
  max-width:540px;
  margin-bottom:32px;
}
.hero .cta-row{margin-bottom:36px}

.hero-trust{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.ht-item{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.ht-num{font-family:'Inter',sans-serif; font-weight:800; font-size:1.4rem; color:var(--ink); letter-spacing:-0.02em; line-height:1}
.ht-num small{font-size:0.6em; color:var(--muted); font-weight:600}
.ht-stars{color:var(--orange); font-size:14px; letter-spacing:1px}
.ht-review{color:inherit; text-decoration:none; transition:transform .15s}
.ht-review:hover{transform:translateY(-2px)}
.ht-top{display:flex; align-items:center; gap:8px}
.ht-review-line{font-size:13px; color:var(--muted)}
.g-logo{font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.02em}

.hero-visual{position:relative; min-height:520px; display:grid; place-items:center}

/* Картинка в hero (заменяет платформу-мокап) */
.hero-image{
  width:100%; height:auto;
  display:block; position:relative;
  border-radius:var(--r-lg);
}

/* Browser/platform card в hero */
.platform, .dashboard-card{
  width:100%; max-width:540px;
  background: #fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  position:relative;
}
.platform-head, .dash-topbar{
  display:flex; align-items:center; gap:8px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.dot, .dash-dot{width:11px; height:11px; border-radius:50%; background:#D8D8E0; flex-shrink:0}
.dot.r, .dash-dot.r{background:#FF5F57}
.dot.y, .dash-dot.y{background:#FEBC2E}
.dot.g, .dash-dot.g{background:#28C840}
.platform-url, .dash-url{
  margin-left:14px;
  font-size:12px;
  color:var(--muted);
  padding:5px 12px; border-radius:6px; background:var(--bg-2);
  display:inline-flex; align-items:center; gap:8px;
}
.platform-url svg, .dash-url svg{width:11px;height:11px; stroke:currentColor; fill:none}

.platform-body{padding:22px}
.platform-title{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; margin-bottom:14px; color:var(--ink); display:flex; align-items:center; gap:8px}
.online-pill{
  font-family:'Inter',sans-serif; font-weight:700; font-size:10px;
  background: var(--green-100); color:var(--green);
  padding:3px 8px; border-radius:999px; letter-spacing:0.05em;
  display:inline-flex; align-items:center; gap:5px;
}
.online-pill::before{content:''; width:6px;height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(16,185,129,0.2)}

.metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.metric{
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}
.metric-label{font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px}
.metric-val{font-family:'Inter',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; line-height:1.1}
.metric-bar{height:5px; background:var(--line); border-radius:3px; margin-top:10px; overflow:hidden}
.metric-bar > div{height:100%; background:var(--purple); border-radius:3px}
.metric:nth-child(2) .metric-bar > div{background:var(--orange)}
.metric-foot{font-size:11px; color:var(--muted); margin-top:6px}

/* floating cards */
.float-card{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
  box-shadow: var(--shadow);
  display:flex; align-items:center; gap:12px;
  z-index:2;
}
.fc-icon, .float-icon{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background: var(--purple-100); color: var(--purple);
  font-size:16px;
}
/* Динамика: плавающие карточки + лёгкий пульс иконки */
@keyframes fcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.float-card{animation:fcFloat 4.4s ease-in-out infinite; will-change:transform}
.float-card .fc-icon{animation:fcPulse 2.6s ease-in-out infinite}
.fc-1{animation-duration:4.2s}
.fc-2{animation-duration:5.1s; animation-delay:.5s}
.fc-3{animation-duration:4.7s; animation-delay:1s}
.float-card:hover{animation-play-state:paused; box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion: reduce){
  .float-card, .float-card .fc-icon{animation:none}
}
.fc-1, .float-speed{top:8%; left:-6%}
.fc-1 .fc-icon, .float-speed .float-icon{background:var(--purple-100); color:var(--purple)}
.fc-2, .float-shield{bottom:14%; left:-8%}
.fc-2 .fc-icon, .float-shield .float-icon{background:var(--orange-100); color:var(--orange-d)}
.fc-3, .float-backup{top:50%; right:-4%}
.fc-3 .fc-icon, .float-backup .float-icon{background:var(--green-100); color:var(--green)}
.fc-label, .float-label{font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em}
.fc-val, .float-value{font-family:'Inter',sans-serif; font-weight:800; font-size:15px}

.sale-badge{
  position:absolute; top:-12px; right:6%;
  background: var(--orange);
  color:#fff;
  font-family:'Inter',sans-serif; font-weight:800; font-size:13px;
  padding:8px 14px;
  border-radius:999px;
  box-shadow: 0 8px 20px -4px rgba(249,115,22,0.55);
  transform:rotate(6deg);
  z-index:3;
}

/* ---------- PAGE HERO (section pages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:70px 0;
  border-bottom:1px solid var(--line);
  min-height: 400px;
}
.page-hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.page-hero-blob-1{top:-30%; left:-10%; width:480px; height:480px; background:var(--purple-l); opacity:0.25}
.page-hero-blob-2{top:-15%; right:-10%; width:420px; height:420px; background:var(--orange); opacity:0.13}

.page-hero-inner{
  position:relative; z-index:1;
  max-width:880px; margin:0 auto; text-align:center;
}
/* Баннер-изображение записи под шапкой статьи */
.post-hero-image{
  max-width:900px; margin:-34px auto 0; position:relative; z-index:2;
  border-radius:var(--r-lg); overflow:hidden; line-height:0; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.post-hero-image img{width:100%; height:auto; max-height:460px; object-fit:cover; display:block}
.page-hero-inner.left{text-align:left; margin:0; max-width:none}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{font-size:clamp(2rem, 3.6vw, 3.2rem); margin-bottom:18px}
.page-hero p{font-size:1.05rem; color:var(--ink-2); max-width:640px; margin:0 auto}
.page-hero-inner.left p{margin:0; max-width:none}

/* Breadcrumbs — block-level flex, чтобы сидели отдельной строкой над eyebrow
   и реально применялся margin-bottom. По умолчанию — слева; в центрированном
   .page-hero-inner перебиваем через justify-content:center inline-стилем
   на самом элементе (или классом .center). */
.breadcrumbs{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
  margin-bottom:18px;
}
.page-hero-inner .breadcrumbs{justify-content:flex-start}
.breadcrumbs a{color:var(--muted); transition: color .15s}
.breadcrumbs a:hover{color:var(--purple)}
.breadcrumbs .sep{opacity:0.5}
.breadcrumbs .current{color:var(--ink); font-weight:600}

/* ---------- marquee / trust ---------- */
.marquee-section, .trust-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: var(--bg-2);
  padding:22px 0;
  overflow:hidden;
}
.trust-strip{padding:30px 0}
.trust-head{text-align:center; margin-bottom:24px}
.marquee{overflow:hidden}
.marquee-track{
  display:flex; gap:46px; white-space:nowrap;
  animation: scroll 40s linear infinite;
  will-change: transform;
}
@keyframes scroll{to{transform:translateX(-50%)}}
.mq-item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:0.98rem;
  color:var(--muted);
  letter-spacing:-0.01em;
}
.mq-item .dot-mq, .mq-dot{width:7px;height:7px;border-radius:50%; flex-shrink:0}
.mq-item .cat, .mq-cat{font-size:11px; color:var(--muted); font-weight:500; opacity:0.7}
.mq-dot.c1{background:var(--purple)}
.mq-dot.c2{background:var(--orange)}
.mq-dot.c3{background:var(--purple-l)}
.mq-dot.c4{background:var(--orange-d)}
.mq-dot.c5{background:var(--purple)}
.mq-dot.c6{background:var(--orange)}
.mq-dot.c7{background:var(--purple-l)}
.mq-dot.c8{background:var(--orange-d)}

/* logo-strip */
.logo-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
.logo-strip-item{
  display:flex; align-items:center; gap:12px;
  padding:18px; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  transition: border-color .2s, transform .2s;
}
.logo-strip-item:hover{border-color:var(--purple-l); transform:translateY(-2px)}
.logo-strip-dot{width:32px; height:32px; border-radius:10px; background:var(--purple-100); color:var(--purple); display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:12px; flex-shrink:0}
.logo-strip-name{font-family:'Inter',sans-serif; font-weight:700; color:var(--ink)}
.logo-strip-sub{font-size:12px; color:var(--muted); display:block; margin-top:2px}

/* ---------- stats ---------- */
.stats{padding:80px 0 40px}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:16px;
  padding:26px 26px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--r-lg);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.stat-body{flex:1; min-width:0}
.stat::before{
  content:''; position:absolute; top:-32%; right:-22%;
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, var(--purple-100), transparent 70%);
  opacity:0.6; z-index:-1; pointer-events:none;
  transition: opacity .3s, transform .3s;
}
.stat:hover{border-color:var(--purple-l); transform:translateY(-4px); box-shadow:var(--shadow)}
.stat:hover::before{opacity:0.9; transform:scale(1.25)}
/* иконка-бейдж */
.stat-ico{
  display:grid; place-items:center; flex-shrink:0;
  width:52px; height:52px; border-radius:15px;
  background: var(--grad-purple); color:#fff; font-size:21px;
  box-shadow:0 8px 18px -6px rgba(124,58,237,0.5);
}
.stat-num, .stat-val{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing:-0.03em;
  line-height:1;
  color: var(--ink);
  margin-bottom:10px;
}
.stat-num small, .unit{font-size:0.55em; color:var(--purple); margin-left:2px}
.stat-label{font-size:13px; color:var(--muted); font-weight:500}
/* чередование акцента: чётные — оранжевые */
.stat:nth-child(even)::before{background: radial-gradient(circle, var(--orange-100), transparent 70%)}
.stat:nth-child(even) .stat-ico{background: var(--grad-orange); box-shadow:0 8px 18px -6px rgba(249,115,22,0.5)}
.stat:nth-child(even) .stat-num small, .stat:nth-child(even) .unit{color:var(--orange)}
.stat:nth-child(even):hover{border-color:var(--orange-l)}
/* индивидуальные цвета иконок ТОЛЬКО на главной (.stats): 2 — зелёный, 3 — серый WordPress */
.stats .stat:nth-child(2) .stat-ico{background: var(--green); box-shadow:0 8px 18px -6px rgba(16,185,129,0.5)}
.stats .stat:nth-child(2) .stat-num small, .stats .stat:nth-child(2) .unit{color: var(--green)}
.stats .stat:nth-child(2):hover{border-color:#6EE7B7}
.stats .stat:nth-child(3) .stat-ico{background: linear-gradient(135deg,#54595f,#23282d); box-shadow:0 8px 18px -6px rgba(35,40,45,0.45)}

/* ---------- section ---------- */
.section{padding:90px 0; position:relative}
.section.alt, .section-alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-sm{padding:50px 0}
.section-dark{background:linear-gradient(135deg, var(--purple-d), var(--purple)); color:#fff}
.section-dark h2, .section-dark h3{color:#fff}
.section-dark p{color:rgba(255,255,255,0.85)}
.section-head{max-width:800px; margin:0 auto 60px; text-align:center}
.section-head .eyebrow{margin-bottom:20px}
.section-head .bill-toggle{display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto}
.section-head h2{margin-bottom:14px}
.section-head p{font-size:1.05rem; color:var(--ink-2)}

/* ---------- features ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{
  position:relative;
  padding:30px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition: all .25s;
  overflow:hidden;
}
.feat::before{
  content:''; position:absolute; top:0; right:0; width:120px; height:120px;
  background: radial-gradient(circle, var(--purple-100), transparent 70%);
  opacity:0.4; pointer-events:none;
  transition: opacity .25s, transform .3s;
}
.feat:hover{border-color:var(--purple-l); transform:translateY(-4px); box-shadow:var(--shadow)}
.feat:hover::before{opacity:0.8; transform:scale(1.2)}
.feat{text-align:center}
.feat-icon{
  width:52px; height:52px; border-radius:14px;
  background: var(--purple-100); color: var(--purple);
  display:grid; place-items:center;
  margin:0 auto 20px;
  font-size:22px;
  transition: transform .25s;
}
.feat-icon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.2}
.feat-icon i{line-height:1}
.feat:hover .feat-icon{transform:rotate(-4deg) scale(1.05)}
.feat:nth-child(2) .feat-icon,
.feat:nth-child(5) .feat-icon,
.feat-icon.c2, .feat-icon.c5{background:var(--orange-100); color:var(--orange-d)}
.feat:nth-child(2)::before, .feat:nth-child(5)::before{background:radial-gradient(circle, var(--orange-100), transparent 70%)}
.feat-icon.c1, .feat-icon.c4{background:var(--purple-100); color:var(--purple)}
.feat-icon.c3{background:var(--blue-100); color:var(--blue)}
.feat-icon.c6{background:var(--green-100); color:var(--green)}
.feat h3{margin-bottom:8px; position:relative}
.feat p{color:var(--ink-2); font-size:14.5px; position:relative}

/* iconbox */
.iconbox-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.iconbox-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.iconbox{
  display:flex; gap:16px;
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  transition: border-color .2s, transform .2s;
}
.iconbox:hover{border-color:var(--purple-l); transform:translateY(-2px)}
.iconbox .ico{
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  background:var(--purple-100); color:var(--purple);
  display:grid; place-items:center;
}
.iconbox h3, .iconbox h4{margin-bottom:6px}
.iconbox p{font-size:14px; color:var(--ink-2)}

/* ---------- compare ---------- */
.compare-wrap{display:grid; grid-template-columns: 1fr 1fr; gap:22px; max-width:980px; margin:0 auto}
.cmp-card{padding:32px; border-radius:var(--r-lg); border:1.5px solid var(--line); background:#fff}
.cmp-card.us{
  border-color: var(--purple);
  background: linear-gradient(180deg, #fff 0%, var(--purple-50) 100%);
  box-shadow: var(--shadow);
  position:relative;
}
.cmp-card.us::after{
  content:'РЕКОМЕНДУЕМ';
  position:absolute; top:-12px; left:32px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:10.5px; letter-spacing:0.1em;
  background: var(--purple); color:#fff;
  padding:5px 12px; border-radius:999px;
}
.cmp-head{text-align:center; font-family:'Inter',sans-serif; font-weight:800; font-size:1.3rem; margin-bottom:24px}
.cmp-head .mark{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin:0 auto 12px; font-size:19px}
.cmp-card.us .cmp-head .mark{background:var(--purple); color:#fff; box-shadow:0 8px 18px -6px rgba(124,58,237,0.5)}
.cmp-card.them .cmp-head .mark{background:var(--line-2); color:var(--muted)}
/* динамика иконок в шапке сравнения */
@keyframes cmpBolt{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.14) rotate(-7deg)}60%{transform:scale(1.14) rotate(7deg)}}
@keyframes cmpShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.cmp-card.us .cmp-head .mark i{animation:cmpBolt 2.8s ease-in-out infinite}
.cmp-card.them .cmp-head .mark i{animation:cmpShake 4s ease-in-out infinite}
.cmp-card.us:hover .cmp-head .mark{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){ .cmp-head .mark i{animation:none} }
.cmp-card.them{opacity:0.92}
.cmp-list{display:flex; flex-direction:column}
.cmp-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-row .l{color:var(--ink-2); font-size:14px}
.cmp-row .v{display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:700; font-size:13px}
.cmp-card.us .v{color:var(--purple-d)}
.cmp-card.them .v{color:var(--muted)}
.cmp-row .check{width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0; font-size:9px}
.cmp-card.us .check{background:var(--purple); color:#fff}
.cmp-card.them .check{background:var(--line-2); color:var(--muted)}

/* legacy compare-table */
.compare-table{
  max-width:1100px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.compare-row{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom:1px solid var(--line);
}
.compare-row:last-child{border-bottom:0}
.compare-row:nth-child(odd){background:var(--bg-2)}
.compare-row:first-child{background:var(--purple-50)}
.compare-head{padding:18px 22px; font-family:'Inter',sans-serif; font-weight:800; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink)}
.compare-head.us{color:var(--purple)}
.compare-head.us svg{stroke:var(--purple)}
.compare-head.them{color:var(--muted)}
.compare-head.title-cell{color:var(--muted); letter-spacing:0.1em}
.compare-cell{padding:16px 22px; display:flex; align-items:center; gap:8px; font-size:14px}
.compare-cell.feature{color:var(--ink-2); font-weight:500}
.compare-cell.val{font-family:'Inter',sans-serif; font-weight:700}
.compare-cell.val.yes{color:var(--purple-d)}
.compare-cell.val.yes svg{color:var(--purple)}
.compare-cell.val.no{color:var(--muted)}
.compare-cell.val.star{color:var(--orange-d)}
.compare-cell.val.star svg{color:var(--orange)}

/* ---------- panel showcase ---------- */
.panel-show{display:grid; grid-template-columns: 1fr 1.15fr; gap:60px; align-items:center}
.panel-show h2{margin:18px 0 18px}
.panel-show .lead{color:var(--ink-2); margin-bottom:32px; font-size:1.05rem}
.panel-inner{display:contents}
.panel-feats{display:flex; flex-direction:column; gap:14px}
.pfeat, .panel-feat{display:flex; gap:14px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:14px; transition: border-color .2s}
.pfeat:hover, .panel-feat:hover{border-color:var(--purple-l)}
.pfeat-ico, .panel-feat-icon{width:38px; height:38px; flex-shrink:0; border-radius:10px; background:var(--purple-100); color:var(--purple); display:grid; place-items:center; font-size:15px}
.pfeat:nth-child(2) .pfeat-ico, .panel-feat:nth-child(2) .panel-feat-icon{background:var(--orange-100); color:var(--orange-d)}
.pfeat:nth-child(3) .pfeat-ico, .panel-feat:nth-child(3) .panel-feat-icon{background:var(--blue-100); color:var(--blue)}
.pfeat:nth-child(4) .pfeat-ico, .panel-feat:nth-child(4) .panel-feat-icon{background:var(--green-100); color:var(--green)}
.pfeat h4, .panel-feat h4{font-family:'Inter',sans-serif; font-weight:700; font-size:0.98rem; margin-bottom:3px; color:var(--ink)}
.pfeat p, .panel-feat p{color:var(--muted); font-size:13.5px; margin:0}

.panel-screen{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg)}
.panel-image{display:block; width:100%; height:auto; border-radius:var(--r-lg); box-shadow: var(--shadow-lg)}
.panel-screen-top{display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-2)}
.panel-screen-body, .panel-body{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:22px}
.ps-card, .pscreen-card{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:18px}
.ps-card.wide, .pscreen-card.wide{grid-column:1/-1; background:#fff}
.ps-label, .pscreen-card-label{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px}
.ps-val, .pscreen-card-title{font-family:'Inter',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; line-height:1.1}
.ps-meta, .pscreen-meta{font-size:12px; color:var(--muted); margin-top:6px}
.ps-bar, .pscreen-progress{height:6px; background:var(--line); border-radius:3px; margin-top:12px; overflow:hidden}
.ps-bar > div, .pscreen-progress > div{height:100%; background:var(--purple); border-radius:3px}
.ps-site, .pscreen-site{display:flex; align-items:center; gap:14px}
.ps-site-ico, .pscreen-site-icon{
  width:42px; height:42px; border-radius:10px;
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  color:#fff; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:13px;
  flex-shrink:0;
}
.pscreen-site-name{font-family:'Inter',sans-serif; font-weight:800; color:var(--ink)}
.pscreen-site-url{font-size:12px; color:var(--muted)}
.pscreen-badge{
  font-family:'Inter',sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:0.05em;
  background: var(--green-100); color:var(--green);
  padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}

/* ---------- pricing ---------- */
.billing-toggle, .bill-toggle{
  position:relative;
  display:inline-flex; gap:0;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px; padding:4px;
  margin:30px auto 0;
}
.billing-toggle .slider{display:none}
.billing-toggle button, .bill-toggle button{
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:999px;
  color:var(--muted);
  display:inline-flex; align-items:center; gap:8px;
  position:relative; z-index:1;
}
.billing-toggle button.active, .bill-toggle button.active{background:var(--ink); color:#fff}
.save, .save-pill{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:800;
  background:var(--orange); color:#fff;
  padding:3px 7px; border-radius:5px;
  letter-spacing:0.02em;
}

/* Блок «почему только WordPress» на /hosting/ (под таблицей возможностей) */
.host-why .section-head p{max-width:720px; margin-left:auto; margin-right:auto}
.host-why .section-head strong{color:var(--ink); font-weight:700}
.host-why-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px}
.hw-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px; transition:transform .25s, box-shadow .25s, border-color .2s;
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:start;
}
.hw-card > .hw-card-ico{grid-column:2; grid-row:1 / span 2; margin-bottom:0}
.hw-card > h3{grid-column:1}
.hw-card > p{grid-column:1}
.hw-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.hw-card-ico{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:18px; box-shadow:0 10px 22px -8px rgba(15,15,30,0.3)}
.hw-card-ico svg{width:26px; height:26px}
.hw-card-ico i{font-size:23px}
.hw-ico-1{background:linear-gradient(135deg,#FB923C,#F97316)}
.hw-ico-2{background:linear-gradient(135deg,var(--purple-l),var(--purple-d))}
.hw-ico-3{background:linear-gradient(135deg,#10B981,#06B6D4)}
.hw-card h3{font-size:1.15rem; margin-bottom:8px; letter-spacing:-0.01em}
.hw-card p{font-size:14px; color:var(--ink-2); line-height:1.62}
.host-why-note{
  display:flex; gap:13px; align-items:center; max-width:820px; margin:34px auto 0;
  padding:18px 24px; background:linear-gradient(135deg, var(--purple-50), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); text-align:left;
}
.host-why-note svg{width:20px; height:20px; flex-shrink:0; color:var(--green)}
.host-why-note p{margin:0; font-size:14.5px; color:var(--ink)}
@media (max-width:860px){ .host-why-cards{grid-template-columns:1fr} .host-why-note{flex-direction:column; align-items:flex-start} }

.plans{display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; margin-top:50px}
.plan{
  position:relative;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:18px;
  padding:28px 22px 24px;
  display:flex; flex-direction:column;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.plan-head{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:18px}
.plan-name{
  align-self:stretch;     margin: -28px -22px 18px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:1.14rem; letter-spacing:-0.02em; text-align:center;
  background:var(--purple-100); color:var(--purple-d);
  padding:17px 22px 14px; border-radius:18px 18px 0 0;
}
.plan.popular .plan-name{background:var(--grad-purple); color:#fff}
.plan-storage{
  display:inline-block; align-self:center;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.02em;
  background:var(--purple-50); color:var(--purple-d);
  border:1px solid var(--purple-100);
  padding:4px 12px; border-radius:999px;
  margin-top:8px;
}
.plan-desc{font-size:13px; color:var(--muted); margin-bottom:18px; min-height:36px; text-align:center}
.plan-price{display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:20px; margin-bottom:22px}
.plan-price .val, .plan-price-val{font-family:'Inter',sans-serif; font-weight:800; font-size:2.1rem; line-height:1; letter-spacing:-0.03em; color:var(--ink)}
.plan-price .cur, .plan-price-currency{color:var(--muted); font-size:13px; font-weight:600}
.plan-per, .plan-price-period{font-size:13px; color:var(--muted)}
.plan ul{list-style:none; padding:18px 0 0; margin:0 0 24px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:11px; flex-grow:1}
.plan li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-2)}
.plan li > svg{
  width:19px; height:19px; flex-shrink:0; border-radius:50%;
  background:var(--purple-100); color:var(--purple);
  padding:3px;
  margin-top:1px;
  fill:none; stroke:currentColor;
}
.plan li .li-check{
  width:19px; height:19px; flex-shrink:0; border-radius:50%;
  background:var(--grad-purple); color:#fff;
  display:grid; place-items:center;
  margin-top:1px;
  box-shadow:0 3px 8px -3px rgba(124,58,237,0.5);
}
.plan li .li-check svg{width:11px;height:11px; background:none; color:inherit; border-radius:0; margin:0; padding:0}
.plan .btn{justify-content:center; width:100%}

.plan.popular{
  background: linear-gradient(180deg, #fff 0%, var(--purple-50) 100%);
  border-color: var(--purple);
  box-shadow: 0 24px 54px -22px rgba(124,58,237,0.5);
  transform: translateY(-8px);
  z-index:1;
}
.plan.popular:hover{transform: translateY(-12px)}
.plan.popular .plan-price .val,
.plan.popular .plan-price-val{color:var(--purple-d)}

/* Выбранный тариф (переход с главной по #plan-…) — подсветка фоном */
.plan.is-selected{
  border-color: var(--purple) !important;
  background: linear-gradient(180deg, #fff 0%, var(--purple-50) 100%) !important;
  z-index:2;
  animation: plan-pick 1.6s ease-out 1;
}
@keyframes plan-pick{
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.55), var(--shadow-lg); }
  60%  { box-shadow: 0 0 0 10px rgba(124,58,237,0), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 3px var(--purple), var(--shadow-lg); }
}
.popular-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--orange); color:#fff;
  font-family:'Inter',sans-serif; font-weight:800; font-size:10.5px; letter-spacing:0.1em;
  padding:5px 14px; border-radius:999px;
  white-space:nowrap;
  box-shadow:0 6px 14px -3px rgba(249,115,22,0.55);
  z-index:2;
}
.plan.popular .li-check,
.plan.popular li > svg{background:var(--purple); color:#fff}

.pricing-foot, .pricing-note{
  display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:40px;
  font-size:13px; color:var(--muted);
}
.pricing-foot span, .pricing-note span{display:inline-flex; align-items:center; gap:8px}
.pricing-foot svg, .pricing-note svg{width:14px; height:14px; color:var(--purple); stroke:currentColor; fill:none}
.pricing-foot-link{color:var(--purple); font-weight:600; text-decoration:none}
.pricing-foot-link:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition: border-color .2s, box-shadow .2s}
.faq-item.open{border-color:var(--purple); box-shadow:var(--shadow-sm)}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 24px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink);
  text-align:left; width:100%;
  cursor:pointer;
}
.faq-toggle, .faq-icon{
  width:34px; height:34px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--bg-2);
  transition: all .25s;
  color:var(--muted);
}
.faq-item.open .faq-toggle, .faq-item.open .faq-icon{background:var(--purple); color:#fff; transform:rotate(45deg)}
.faq-a, .faq-a-inner{padding:0 24px 0; color:var(--ink-2); font-size:15px; max-height:0; overflow:hidden; transition: max-height .25s, padding .25s}
.faq-item.open .faq-a, .faq-item.open .faq-a-inner{max-height:520px; padding:0 24px 22px}

/* ---------- blog cards ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.blog-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition: all .25s}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--purple-l)}
.blog-img{height:180px; position:relative; overflow:hidden; display:grid; place-items:center; background: linear-gradient(135deg, var(--purple), var(--purple-l))}
.blog-img.has-img{display:block; padding:0}
.blog-img-photo{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.blog-card:hover .blog-img-photo{transform:scale(1.05)}
.blog-img.b1{background: linear-gradient(135deg, var(--purple), var(--purple-l))}
.blog-img.b2{background:linear-gradient(135deg, #1E1B4B, #4338CA)}
.blog-img.b3{background:linear-gradient(135deg, var(--orange), #FBBF24)}
.blog-img-pattern{position:absolute; inset:0; opacity:0.35; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.5) 1px, transparent 0); background-size:14px 14px}
.blog-img-glyph{font-family:'Inter',sans-serif; font-weight:800; font-size:3rem; color:#fff; position:relative; z-index:1; letter-spacing:-0.03em}
.blog-body{padding:22px 24px}
.blog-meta{display:flex; gap:10px; align-items:center; margin-bottom:14px}
.blog-tag{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:0.08em;
  background:var(--purple-100); color:var(--purple);
  padding:4px 9px; border-radius:5px;
}
.blog-tag.orange{background:var(--orange-100); color:var(--orange-d)}
.blog-tag.dark{background:#E5E7EB; color:#374151}
.blog-meta .date{font-size:12px; color:var(--muted); font-weight:500}
.blog-card h3{font-size:1.1rem; line-height:1.3; margin-bottom:10px}
.blog-card p{color:var(--ink-2); font-size:14px; margin-bottom:14px}
.blog-link{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
  color:var(--purple);
  display:inline-flex; align-items:center; gap:6px;
  transition: gap .2s;
}
.blog-link:hover{gap:10px; color:var(--purple-d)}
.blog-cats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px}

/* ---------- forms ---------- */
.contact-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; align-items:stretch}
.contact-card{padding:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; gap:14px; transition:border-color .2s, transform .2s, box-shadow .2s}
.contact-card:hover{border-color:var(--purple-l); transform:translateY(-2px); box-shadow:var(--shadow)}
.contact-card h3{font-size:1.05rem}
.contact-card p{font-size:14px; color:var(--ink-2)}
.contact-card .list{display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:6px}
.contact-card .list a{color:var(--purple); font-weight:600; font-size:14.5px; transition:color .15s}
.contact-card .list a:hover{color:var(--purple-d)}
.contact-card .ico{width:46px; height:46px; border-radius:13px; background:var(--purple-100); color:var(--purple); display:grid; place-items:center}
/* иконки-чипы с инлайн-градиентом получают белый глиф (gradient или var(--grad-*)) */
.ico[style*="gradient"], .ico[style*="grad-"],
.contact-card .ico[style*="gradient"], .contact-card .ico[style*="grad-"]{color:#fff}
/* соц-кнопки: вернуть заливку брендовым иконкам, Instagram оставить контурным */
.social-row svg{fill:currentColor; stroke:none}
.social-row svg[fill="none"]{fill:none; stroke:currentColor}

.form-card{padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow: var(--shadow-sm)}
.form-title{font-family:'Inter',sans-serif; font-weight:800; font-size:1.4rem; margin-bottom:8px}
.form-desc{color:var(--muted); margin-bottom:24px}
.form-row, .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label, .field > .label{font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:var(--ink-2)}
.form-input, .form-select, input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  width:100%; padding:12px 14px; background:#fff;
  border:1.5px solid var(--line); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, input:focus, textarea:focus, select:focus{
  outline:0; border-color:var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
textarea{min-height:120px; resize:vertical}

/* ---------- documents page ---------- */
.doc-list{display:flex; flex-direction:column; gap:12px}
.doc-item{display:flex; align-items:center; gap:18px; padding:18px 22px; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition: border-color .2s, transform .2s}
.doc-item:hover{border-color:var(--purple-l); transform:translateX(4px)}
.doc-ico{width:48px; height:48px; flex-shrink:0; border-radius:12px; background:var(--purple-100); color:var(--purple); display:grid; place-items:center}
.doc-ico i{font-size:20px}
.doc-zone{font-family:'Inter',sans-serif; font-weight:800; font-size:16px; letter-spacing:0.03em}
.doc-card .doc-ico.has-logo{width:100px; height:100px; background:#fff; border:0; padding:6px; border-radius:16px}
.doc-card .doc-ico.has-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.doc-info{flex-grow:1; min-width:0}
.doc-title{font-family:'Inter',sans-serif; font-weight:700; font-size:1rem; margin-bottom:3px; color:var(--ink)}
.doc-meta{font-size:12.5px; color:var(--muted)}
.doc-arrow{color:var(--purple); flex-shrink:0}

/* --- documents page: card grid --- */
.doc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:980px){.doc-cards{grid-template-columns:repeat(2,1fr)}}
.doc-card{position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:18px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; transition:border-color .2s, transform .25s, box-shadow .25s}
.doc-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad-brand); transform:scaleY(0); transform-origin:top; transition:transform .25s}
.doc-card:hover{border-color:transparent; transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.doc-card:hover::before{transform:scaleY(1)}
.doc-card .doc-ico{width:54px; height:54px; border-radius:14px}
.doc-card-body{flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.doc-card .doc-title{font-size:1.05rem; margin-bottom:0}
.doc-card .doc-meta{font-size:12.5px; line-height:1.45}
.doc-dl{margin-top:10px; display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.02em; color:var(--purple); background:var(--purple-50); border:1px solid var(--purple-100); padding:6px 12px; border-radius:999px; transition:background .2s,color .2s}
.doc-card:hover .doc-dl{background:var(--purple); color:#fff; border-color:var(--purple)}
.doc-dl svg{width:14px; height:14px}

/* electronic-documents note */
.doc-note{display:flex; gap:22px; align-items:flex-start; padding:30px 32px; background:linear-gradient(135deg,var(--purple-50),#fff); border:1px solid var(--purple-100); border-radius:var(--r-lg,20px)}
.doc-note-ico{flex-shrink:0; width:56px; height:56px; border-radius:16px; background:var(--grad-brand); color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px -8px rgba(124,58,237,0.5)}
.doc-note-ico svg{width:28px; height:28px}
.doc-note-ico i{font-size:24px}
.doc-note h2{font-size:1.3rem; margin-bottom:8px}
.doc-note p{font-size:14px; color:var(--ink-2); margin:0}
@media(max-width:720px){.doc-cards{grid-template-columns:1fr} .doc-note{flex-direction:column; gap:16px; padding:24px}}

/* ---------- payment page ---------- */
.pay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pay-card{position:relative; overflow:hidden; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r); display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:5px; align-items:center; transition: border-color .2s, transform .25s, box-shadow .25s}
.pay-card > .pay-logo{grid-column:1; grid-row:1 / span 3; align-self:center}
.pay-card > h3{grid-column:2; grid-row:1; align-self:end}
.pay-card > p{grid-column:2; grid-row:2}
.pay-card > .pay-note{grid-column:2; grid-row:3; align-self:start}
/* фирменная полоса-акцент сверху */
.pay-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--purple)}
.pay-card.humo::before{background:linear-gradient(90deg,#2DD4BF,#0EA5E9)}
.pay-card.uzcard::before, .pay-card.payme::before{background:linear-gradient(90deg,#06B6D4,#0284C7)}
.pay-card.click::before{background:linear-gradient(90deg,#FB923C,#F97316)}
.pay-card.visa::before{background:linear-gradient(90deg,#1A1F71,#3B82F6)}
.pay-card.mc::before{background:linear-gradient(90deg,#EB001B,#F79E1B)}
.pay-card:hover{border-color:transparent; transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.pay-card h3{font-size:1.05rem}
.pay-card p{font-size:13.5px; color:var(--ink-2)}
.pay-note{display:inline-flex; align-items:center; gap:6px; justify-self:start; font-family:'Inter',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--purple); background:var(--purple-50); border:1px solid var(--purple-100); padding:5px 10px; border-radius:999px}
.pay-note::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-100)}
.pay-logo-box{width:66px; height:44px; border-radius:9px; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:12px; color:#fff; letter-spacing:0.05em; box-shadow:0 5px 12px -4px rgba(15,15,30,0.35)}
.pay-logo-box.humo{background:linear-gradient(135deg,#2DD4BF,#0EA5E9)}
.pay-logo-box.uzcard, .pay-logo-box.payme{background:linear-gradient(135deg,#06B6D4,#0284C7)}
.pay-logo-box.click{background:linear-gradient(135deg,#FB923C,#F97316)}
.pay-logo-box.visa{background:#1A1F71}
.pay-logo-box.mc{background:linear-gradient(135deg,#EB001B,#F79E1B)}
.pay-logo{width:92px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:6px; background:transparent; border:0; border-radius:12px}
.pay-logo img{max-height:52px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block}

/* ---------- SSL page ---------- */
.cert-badge{display:flex; align-items:center; gap:18px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition: border-color .2s}
.cert-badge:hover{border-color:var(--purple-l)}
.cert-badge-logo{width:64px; height:64px; flex-shrink:0; border-radius:14px; background:var(--purple-100); color:var(--purple); display:grid; place-items:center}
.cert-badge-logo.digicert{background:linear-gradient(135deg,#003366,#0066CC); color:#fff}
.cert-badge-info h3{margin-bottom:4px}
.cert-badge-info p{font-size:13.5px; color:var(--muted)}
.icann{display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:700; font-size:13px; background:var(--purple-50); color:var(--purple); padding:6px 12px; border-radius:999px}

/* ---------- steps / numlist ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative}
.step{position:relative; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.step-num{
  position:absolute; top:-14px; left:24px;
  width:34px; height:34px; border-radius:50%;
  background:var(--purple); color:#fff;
  display:grid; place-items:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:14px;
  box-shadow: 0 4px 12px -2px rgba(124,58,237,0.4);
}
.step h3{margin:14px 0 8px}
.step p{font-size:13.5px; color:var(--ink-2)}

.numlist{display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto}
.numlist-item{display:flex; gap:18px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.numlist-num{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  background:var(--purple-100); color:var(--purple);
  display:grid; place-items:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:14px;
}
.numlist-body h3{font-size:1.05rem; margin-bottom:6px}
.numlist-body p{font-size:14px; color:var(--ink-2)}

/* ---------- media boxes ---------- */
.media-box{position:relative; padding:30px; background: linear-gradient(135deg, var(--purple-50), var(--orange-50)); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.media-box-glyph{font-family:'Inter',sans-serif; font-weight:800; font-size:4rem; color:var(--purple); opacity:0.18; position:absolute; top:10px; right:20px}
.media-box-caption{font-family:'Inter',sans-serif; font-weight:800; font-size:1.4rem; color:var(--ink); margin-bottom:8px}
.media-box-footer{font-size:13px; color:var(--muted); margin-top:14px}

/* ---------- map ---------- */
.map-box{position:relative; height:360px; background: linear-gradient(135deg, var(--purple-50), var(--bg-2)); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.map-box-inner{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(124,58,237,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,58,237,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-marker{position:absolute; transform:translate(-50%,-100%)}
.map-marker-pin{width:28px; height:28px; border-radius:50% 50% 50% 0; background:var(--purple); transform:rotate(-45deg); box-shadow: 0 6px 14px -2px rgba(124,58,237,0.45); position:relative}
.map-marker-pin::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); width:10px; height:10px; border-radius:50%; background:#fff}
.map-marker-label{position:absolute; top:-44px; left:50%; transform:translateX(-50%); background:#fff; color:var(--ink); font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; padding:5px 10px; border-radius:8px; white-space:nowrap; box-shadow: var(--shadow-sm)}

/* ---------- domain search ---------- */
.dsearch{padding:20px}
.dsearch-bar{display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; margin-bottom:18px}
.dsearch-input-text{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--ink)}
.dsearch-cursor{display:inline-block; width:2px; height:1em; background:var(--purple); margin-left:2px; animation:blink 1s steps(2) infinite; vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.dsearch-results{display:flex; flex-direction:column; gap:8px}
.dsearch-item{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--bg-2); border-radius:10px; font-size:14px}
.dsearch-price{font-family:'Inter',sans-serif; font-weight:700; color:var(--ink)}
.dsearch-status.free{color:var(--green); font-weight:700; font-size:11.5px; background:var(--green-100); padding:3px 8px; border-radius:6px}
.dsearch-status.busy{color:var(--muted); font-weight:700; font-size:11.5px; background:var(--line-2); padding:3px 8px; border-radius:6px}
.dsearch-foot{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; margin-top:14px; background:var(--purple-50); border-radius:10px; font-size:12.5px; color:var(--purple)}
.dsearch-foot-arrow{font-family:'Inter',sans-serif; font-weight:800; font-size:18px}
.dsearch-domain b{color:var(--purple)}
.dsearch-label{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px}

/* ---------- prose ---------- */
.prose{max-width:760px; margin:0 auto; font-size:16px; line-height:1.75; color:var(--ink-2)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 22px}
.prose h2{font-family:'Inter',sans-serif; font-weight:800; font-size:1.6rem; color:var(--ink); margin:42px 0 16px}
.prose h3{font-family:'Inter',sans-serif; font-weight:700; font-size:1.25rem; color:var(--ink); margin:32px 0 12px}
.prose ul, .prose ol{margin:0 0 22px; padding-left:24px}
.prose li{margin-bottom:8px}
.prose a{color:var(--purple); text-decoration:underline; text-underline-offset:3px}

/* ---------- final CTA ---------- */
.cta-final, .cta{padding:90px 0 110px}
.cta-box, .cta .cta-box{
  position:relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-d) 55%, #4C1D95 100%);
  color:#fff;
  border-radius:var(--r-lg);
  padding:60px 50px;
  text-align:center;
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(124,58,237,0.5);
}
/* CTA-блок на всю ширину страницы (full-bleed) */
.cta-final > .container{max-width:none; padding-left:0; padding-right:0}
.cta-final .cta-box{border-radius:0; box-shadow:none}

/* Ссылка «Напишите» в подзаголовке FAQ */
.faq-write-link{color:var(--purple); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.faq-write-link:hover{color:var(--purple-d)}
.cta-box::before{
  content:''; position:absolute; top:-50%; right:-15%; width:60%; height:200%;
  background: radial-gradient(circle, var(--orange), transparent 60%);
  filter:blur(60px); opacity:0.45; pointer-events:none;
}
.cta-box::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size: 24px 24px;
  opacity:0.35;
}
.cta-box .eyebrow{background:rgba(255,255,255,0.14); color:#fff; position:relative}
.cta-box .eyebrow .dot{background:var(--orange-l)}
.cta-box h2{color:#fff; margin:20px 0 14px; position:relative}
.cta-box h2 em{font-style:normal; color:#FDBA74}
.cta-box p{font-size:1.1rem; color:rgba(255,255,255,0.85); margin-bottom:32px; position:relative; max-width:540px; margin-left:auto; margin-right:auto}
.cta-box .cta-row, .cta-ctas{justify-content:center; position:relative; display:flex; gap:12px; flex-wrap:wrap}
.cta-box .btn-orange{background:var(--orange); border-color:transparent}
.cta-box .btn-orange:hover{background:var(--orange-d)}
.cta-box .btn-outline{background:transparent; border-color:rgba(255,255,255,0.3); color:#fff}
.cta-box .btn-outline:hover{background:rgba(255,255,255,0.1); border-color:#fff; color:#fff}

.cta-sticker{
  position:absolute; top:24px; right:28px;
  background: var(--orange);
  color:#fff;
  font-family:'Inter',sans-serif; font-weight:800; font-size:0.82rem;
  padding:7px 14px; border-radius:999px;
  transform:rotate(8deg);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.3);
  z-index:2;
}

/* promo-box */
.promo-box{
  position:relative;
  padding:50px 40px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-d) 100%);
  color:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
  text-align:center;
}
/* promo-box на всю ширину страницы (только .promo-full — about) */
.promo-full > .container{max-width:none; padding-left:0; padding-right:0}
.promo-full .promo-box{border-radius:0}
.promo-box::before{
  content:''; position:absolute; top:-40%; right:-10%; width:50%; height:180%;
  background: radial-gradient(circle, var(--orange), transparent 60%);
  filter:blur(60px); opacity:0.45; pointer-events:none;
}
.promo-box > *{position:relative; z-index:1}
.promo-box h2{color:#fff; margin-bottom:12px}
.promo-box p{color:rgba(255,255,255,0.85); margin-bottom:24px; max-width:560px; margin-left:auto; margin-right:auto}
.promo-box .cta-row{justify-content:center}
.promo-box .btn-primary{background:var(--orange); box-shadow: 0 8px 20px -4px rgba(249,115,22,0.55)}
.promo-box .btn-primary:hover{background:var(--orange-d)}
.promo-box .btn-outline{background:transparent; border-color:rgba(255,255,255,0.3); color:#fff}
.promo-box .btn-outline:hover{background:rgba(255,255,255,0.1); border-color:#fff; color:#fff}

/* ---------- footer ---------- */
footer{
  background: var(--bg-2);
  border-top:1px solid var(--line);
  padding:70px 0 30px;
}
.foot-grid{display:grid; grid-template-columns: 1.5fr repeat(4,1fr); gap:40px; margin-bottom:50px}
.foot-brand p{color:var(--muted); font-size:14px; margin:20px 0; max-width:280px}
.foot-socials, .foot-soc{display:flex; gap:8px}
.foot-social, .foot-soc a{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line);
  color:var(--ink-2);
  transition: all .2s;
}
.foot-social:hover, .foot-soc a:hover{background:var(--purple); color:#fff; border-color:var(--purple)}
/* глобальное svg{fill:none} гасит заливку брендовых иконок — возвращаем fill для соц-иконок,
   а Instagram (нарисован через stroke, fill="none") оставляем контурным */
.foot-social svg, .foot-soc a svg{fill:currentColor; stroke:none}
.foot-social svg[fill="none"], .foot-soc a svg[fill="none"]{fill:none; stroke:currentColor}
.foot-social i, .foot-soc a i{font-size:16px; line-height:1}
.foot-col h5{
  font-family:'Inter',sans-serif; font-weight:800; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink); margin-bottom:18px;
}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0}
.foot-col a{color:var(--ink-2); font-size:14px; transition:color .2s}
.foot-col a:hover{color:var(--purple)}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.foot-trademark{text-align:right; max-width:360px}
.foot-pay{display:flex; align-items:center; gap:10px}
.foot-pay-item{
  font-family:'Inter',sans-serif; font-weight:800; font-size:10.5px;
  background:#fff; padding:5px 9px; border-radius:5px;
  color:var(--ink-2); border:1px solid var(--line);
}

/* ---------- legacy hero slider infrastructure ---------- */
.hero-slider{position:relative}
.hero-track{display:flex; transition: transform .5s cubic-bezier(.4,0,.2,1); width:100%}
.hero-slide{flex:0 0 100%; min-width:0}
.hero-dots{display:flex; gap:8px; justify-content:center; margin-top:30px}
.hero-dot{width:32px; height:4px; border-radius:4px; background:var(--line); cursor:pointer; transition: background .2s, width .2s; border:0}
.hero-dot.active{background:var(--purple); width:40px}

/* hero grid pattern */
.hero-grid-pattern{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-spark{position:absolute; opacity:0.3; color:var(--orange); pointer-events:none}
.hero-spark svg{width:14px; height:14px; fill:currentColor}
.hero-spark-1{top:15%; left:20%}
.hero-spark-2{top:60%; left:8%}
.hero-spark-3{top:30%; right:14%}
.hero-spark-4{bottom:25%; right:30%}
.hero-spark-5{top:70%; right:8%}

.hero-blob-1{top:-15%; left:-5%; width:520px; height:520px; background:var(--purple-l); opacity:0.30}
.hero-blob-2{top:30%; right:-8%; width:480px; height:480px; background:var(--orange); opacity:0.18}
.hero-blob-3{bottom:-25%; left:25%; width:600px; height:600px; background:var(--purple-l); opacity:0.18}
.hero-blob-4{top:50%; left:60%; width:340px; height:340px; background:var(--orange-l); opacity:0.12}
.hero-blob-5{bottom:10%; right:30%; width:380px; height:380px; background:var(--purple); opacity:0.12}

/* legacy site mockup */
.site-mockup{padding:18px}
.site-nav-m{display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px}
.site-brand{display:flex; align-items:center; gap:8px}
.site-brand-mark{width:24px;height:24px;border-radius:6px;background:var(--purple)}
.site-nav-links{display:flex; gap:14px; font-size:12px; color:var(--muted)}
.site-nav-cta{font-size:12px; background:var(--purple); color:#fff; padding:5px 12px; border-radius:6px}
.site-hero-m{margin-bottom:18px}
.site-tag-m{font-size:11px; color:var(--orange); letter-spacing:0.1em; margin-bottom:8px}
.site-title-m{font-family:'Inter',sans-serif; font-weight:800; font-size:1.2rem; line-height:1.2; margin-bottom:10px}
.site-meta-m{display:flex; justify-content:space-between; font-size:11px; color:var(--muted)}
.site-author-m{display:flex; gap:6px; align-items:center}
.site-author-av-m{width:18px; height:18px; border-radius:50%; background:var(--orange-d)}
.site-posts-m{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.site-post-m{border:1px solid var(--line); border-radius:8px; overflow:hidden}
.site-post-img-m{height:50px; background:linear-gradient(135deg,var(--purple),var(--purple-l))}
.site-post-img-m.i2{background:linear-gradient(135deg,var(--orange),#FBBF24)}
.site-post-img-m.i3{background:linear-gradient(135deg,#1E1B4B,#4338CA)}
.site-post-body-m{padding:8px}
.site-post-tag-m{font-size:9px; color:var(--purple); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px}
.site-post-title-m{font-size:11px; font-weight:600; line-height:1.2}

/* legacy wallet (slide 2) */
.wallet{padding:20px}
.wallet-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px}
.wallet-label{font-size:11.5px; color:var(--muted); margin-bottom:4px}
.wallet-amount{font-family:'Inter',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-0.02em}
.wallet-amount span{color:var(--muted); font-size:0.6em; font-weight:600}
.wallet-delta{color:var(--green); font-size:12px; font-weight:600; margin-top:4px}
.wallet-percent{text-align:right; background:var(--orange-50); padding:10px 14px; border-radius:10px}
.wallet-percent-val{font-family:'Inter',sans-serif; font-weight:800; font-size:1.4rem; color:var(--orange-d)}
.wallet-percent-label{font-size:9px; color:var(--orange-d); font-weight:700; letter-spacing:0.08em}
.wallet-history-title{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px}
.wallet-history{display:flex; flex-direction:column; gap:8px}
.wallet-tx{display:flex; align-items:center; gap:10px; padding:10px; background:var(--bg-2); border-radius:8px}
.wallet-tx-icon{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:11px; color:#fff}
.wallet-tx-icon.c1{background:var(--purple)}
.wallet-tx-icon.c2{background:var(--orange)}
.wallet-tx-icon.c3{background:var(--green)}
.wallet-tx-info{flex-grow:1; min-width:0}
.wallet-tx-name{font-size:12px; font-weight:600; color:var(--ink)}
.wallet-tx-date{font-size:10.5px; color:var(--muted)}
.wallet-tx-amt{font-family:'Inter',sans-serif; font-weight:800; color:var(--green); font-size:13px}

/* utility */
.text-center{text-align:center}
.mt-0{margin-top:0!important}
.list{list-style:none; padding:0}
.t-wrap{overflow-x:auto; margin:0 -8px; padding:0 8px}
.t-price{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.t-price th{
  background:var(--purple-50); color:var(--purple);
  font-family:'Inter',sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:14px 18px; text-align:left;
}
.t-price td{padding:14px 18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.t-price tr:hover td{background:var(--bg-2)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid-2.reverse > *:first-child{order:2}

.slider{position:relative; height:6px; background:var(--line); border-radius:3px}
.slider::after{content:''; position:absolute; left:0; top:0; height:100%; width:60%; background:var(--purple); border-radius:3px}

.testim-grid, .cases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.testim-card, .case-card{padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition: border-color .2s, transform .2s}
.testim-card:hover, .case-card:hover{border-color:var(--purple-l); transform:translateY(-3px)}

/* ---------- responsive ---------- */
@media (max-width: 1200px){
  .hero-inner{grid-template-columns:1fr; gap:50px}
  .hero-visual{margin-top:0}
  .panel-show{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .iconbox-grid, .pay-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 900px){
  .feat-grid,.stats-grid,.blog-grid,.iconbox-grid,.testim-grid,.cases-grid{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .compare-wrap,.grid-2,.iconbox-grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .form-row, .field-row{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr; gap:0}
  .compare-row > *{padding:10px 18px}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .feat-grid,.stats-grid,.blog-grid,.plans,.foot-grid,.pay-grid,.iconbox-grid,.steps{grid-template-columns:1fr}
  .nav-links{display:none}
  .burger{display:grid}
  .hero{padding:50px 0 60px}
  .section{padding:60px 0}
  .cta-box, .promo-box{padding:40px 24px}
  .cta-final{padding:60px 0 80px}
  .hero-trust{gap:16px}
}