:root {
  --primary:  #00B4D8;
  --secondary:#0077B6;
  --tertiary: #023E8A;
  --accent:   #48CAE4;
  --neon:     #00F5FF;
  --bg:       #0A0E17;
  --bg2:      #0D1321;
  --bg3:      #1B2838;
  --text:     #E8F4F8;
  --muted:    #8BA3B5;
  --dim:      #4A6375;
  --border:   rgba(0,180,216,.15);
  --glow-p:   0 0 30px rgba(0,180,216,.4);
  --glow-s:   0 0 30px rgba(0,119,182,.4);
  --glow-n:   0 0 20px rgba(0,245,255,.5);
  --ease:     cubic-bezier(.4,0,.2,1);
  --r:        12px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Space Grotesk',-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden; line-height:1.6;
}
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer }

/* ── ANIMATED BG ──────────────────────────────────── */
.bg-anim {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,119,182,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(2,62,138,.15) 0%, transparent 50%),
    var(--bg);
}
.bg-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.2; animation:orbFloat 25s ease-in-out infinite }
.bg-orb.o1 { width:500px; height:500px; background:var(--secondary); top:-150px; left:-150px; animation-delay:0s }
.bg-orb.o2 { width:400px; height:400px; background:var(--tertiary); top:40%; right:-100px; animation-delay:8s }
.bg-orb.o3 { width:350px; height:350px; background:var(--primary); bottom:-100px; left:40%; animation-delay:16s }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1) }
  25%  { transform:translate(30px,-30px) scale(1.05) }
  50%  { transform:translate(-20px,20px) scale(.95) }
  75%  { transform:translate(15px,15px) scale(1.02) }
}
.grid-overlay {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,180,216,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,216,.03) 1px, transparent 1px);
  background-size:50px 50px;
}
.grid-overlay::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,245,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,.02) 1px, transparent 1px);
  background-size:200px 200px;
}

/* ── HEADER ───────────────────────────────────────── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1rem 2rem;
  transform:translateZ(0); will-change:transform,background-color;
  background-color:rgba(10,14,23,0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.header.scrolled {
  background:rgba(10,14,23,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 30px rgba(0,0,0,.4), inset 0 -1px 0 rgba(0,180,216,.1);
}
.header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:.75rem }
.logo-ico {
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--tertiary), var(--secondary));
  border:1px solid rgba(0,180,216,.3); border-radius:8px;
  font-size:1.2rem;
  transition:all .3s var(--ease);
  position:relative;
}
.logo-ico::before {
  content:''; position:absolute; inset:-2px; border-radius:10px;
  background:linear-gradient(135deg, var(--primary), var(--neon));
  opacity:0; z-index:-1; transition:opacity .3s;
}
.logo:hover .logo-ico::before { opacity:.5 }
.logo:hover .logo-ico { transform:rotate(10deg) scale(1.1); box-shadow:var(--glow-n) }
.logo-txt {
  font-size:1.4rem; font-weight:700; letter-spacing:1px;
  background:linear-gradient(135deg, var(--primary), var(--neon));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; gap:2rem }
.nav-link {
  color:var(--muted); font-size:.95rem; font-weight:500;
  position:relative; padding:.5rem 0;
  transition:color .3s var(--ease); letter-spacing:.5px;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--neon));
  transition:width .3s ease; box-shadow:var(--glow-n);
}
.nav-link:hover { color:var(--neon) }
.nav-link:hover::after { width:100% }
.nav-r { display:flex; align-items:center; gap:1rem }
.lang-sw {
  display:flex; gap:.25rem;
  padding:.4rem .5rem;
  background:rgba(0,180,216,.06);
  border:1px solid rgba(0,180,216,.25); border-radius:8px;
}
.lb {
  padding:.25rem .65rem; border-radius:5px; border:none;
  background:transparent; color:var(--muted);
  font-size:.8rem; font-weight:700; cursor:pointer;
  transition:all .2s var(--ease); font-family:inherit;
}
.lb.on { background:var(--primary); color:var(--bg) }
.tg-nav {
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem;
  background:transparent; border:1px solid var(--primary);
  border-radius:8px; color:var(--primary);
  font-weight:600; font-size:.9rem;
  position:relative; overflow:hidden;
  transition:all .3s var(--ease); text-decoration:none;
}
.tg-nav::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  opacity:0; transition:opacity .3s;
}
.tg-nav:hover::before { opacity:1 }
.tg-nav:hover { color:var(--bg); border-color:transparent; box-shadow:var(--glow-p); transform:translateY(-2px) }
.tg-nav span, .tg-nav svg { position:relative; z-index:1 }
.tg-nav { white-space:nowrap }   /* кнопка никогда не переносится в 2 строки */

/* ── HERO ─────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:8rem 2rem 4rem; position:relative;
}
.hero-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center; width:100%;
}
.hero-text { animation:fadeInUp .8s ease both }
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem;
  background:rgba(0,180,216,.1); border:1px solid rgba(0,180,216,.3);
  border-radius:6px; color:var(--neon);
  font-size:.8rem; font-weight:600;
  margin-bottom:1.5rem;
  text-transform:uppercase; letter-spacing:2px;
}
.bdot {
  width:7px; height:7px; background:var(--neon); border-radius:50%;
  box-shadow:var(--glow-n); animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }

h1 {
  font-size:3.5rem; font-weight:800; line-height:1.15;
  margin-bottom:1.5rem; letter-spacing:-1px;
}
.grad-txt {
  background:linear-gradient(135deg, var(--primary) 0%, var(--neon) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc {
  font-size:1.1rem; color:var(--muted); line-height:1.8;
  margin-bottom:2.5rem; max-width:500px;
}
.hero-btns { display:flex; gap:1rem; margin-bottom:3rem; flex-wrap:wrap }

.btn-pri {
  display:flex; align-items:center; gap:.5rem;
  padding:1rem 2rem;
  background:linear-gradient(135deg, var(--secondary), var(--primary));
  border:none; border-radius:8px; color:#fff;
  font-size:1rem; font-weight:600;
  box-shadow:var(--glow-p);
  position:relative; overflow:hidden;
  transition:all .3s var(--ease); text-decoration:none;
}
.btn-pri::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s ease;
}
.btn-pri:hover::before { left:100% }
.btn-pri:hover { transform:translateY(-3px); box-shadow:0 15px 40px rgba(0,180,216,.5) }

.btn-sec {
  padding:1rem 2rem;
  background:transparent; border:1px solid rgba(0,180,216,.3);
  border-radius:8px; color:var(--text);
  font-size:1rem; font-weight:600;
  transition:all .3s var(--ease); text-decoration:none;
  display:inline-flex; align-items:center;
}
.btn-sec:hover { background:rgba(0,180,216,.1); border-color:var(--primary); transform:translateY(-3px) }

.hero-stats { display:flex; gap:3rem }
.hstat {
  display:flex; flex-direction:column;
  position:relative; padding-left:1rem;
}
.hstat::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:linear-gradient(180deg, var(--primary), var(--neon));
  border-radius:2px;
}
.hstat-num {
  font-size:2.2rem; font-weight:800;
  background:linear-gradient(135deg, var(--primary), var(--neon));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-family:'Space Grotesk', monospace;
}
.hstat-lbl { font-size:.85rem; color:var(--dim); text-transform:uppercase; letter-spacing:1px }

/* ── HERO VISUAL (code window) ────────────────────── */
.hero-visual { position:relative; animation:fadeInRight .8s ease .3s both }
@keyframes fadeInRight { from { opacity:0; transform:translateX(50px) } to { opacity:1; transform:translateX(0) } }

.code-win {
  background:var(--bg2);
  border:1px solid rgba(0,180,216,.2); border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(0,180,216,.1);
  position:relative;
}
.code-win::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity:.5;
}
.win-hdr {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1.25rem; background:var(--bg3);
  border-bottom:1px solid rgba(0,180,216,.1);
}
.win-dots { display:flex; gap:.5rem }
.wd { width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.1) }
.wd.r { background:#FF6B6B }
.wd.y { background:#FFE66D }
.wd.g { background:#4ECDC4 }
.win-title { font-size:.8rem; color:var(--dim); font-family:'Space Grotesk', monospace }

.win-body {
  padding:1.25rem 1.5rem;
  font-family:'Space Grotesk', monospace; font-size:.85rem; line-height:1.9;
}
.line { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.15rem }
.ln  { color:var(--dim); min-width:1.5rem; font-size:.75rem; user-select:none }
.ct  { color:var(--primary) }
.cv  { color:#4ECDC4 }
.ca  { color:var(--accent) }
.cm  { color:var(--dim) }
.cs  { color:var(--neon) }
.cok { color:#30d158; font-weight:600 }
.cfl { color:#ff5f57; font-weight:600 }
.cursor {
  display:inline-block; width:2px; height:1em;
  background:var(--neon); vertical-align:middle; margin-left:2px;
  box-shadow:var(--glow-n); animation:blink 1s infinite;
}
@keyframes blink { 0%,50% { opacity:1 } 51%,100% { opacity:0 } }

.fcrd {
  position:absolute; display:flex; align-items:center; gap:.65rem;
  padding:.6rem 1rem;
  background:rgba(13,19,33,.95); backdrop-filter:blur(10px);
  border:1px solid rgba(0,180,216,.2); border-radius:8px;
  font-size:.8rem; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  animation:flt 6s ease-in-out infinite;
}
.fcrd::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
}
.fcrd svg { flex-shrink:0 }
.fcrd-1 { top:-18px; right:-24px; animation-delay:0s }
.fcrd-2 { bottom:30px; left:-36px; animation-delay:3s }
@keyframes flt { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-12px) } }

.scroll-ind {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  animation:bounce 2s ease-in-out infinite;
}
.mouse { width:24px; height:38px; border:2px solid rgba(0,180,216,.4); border-radius:12px; position:relative }
.mouse::before {
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:var(--neon); border-radius:2px;
  box-shadow:var(--glow-n); animation:sw 2s ease-in-out infinite;
}
@keyframes bounce { 0%,100% { transform:translateX(-50%) translateY(0) } 50% { transform:translateX(-50%) translateY(10px) } }
@keyframes sw { 0% { opacity:1; transform:translateX(-50%) translateY(0) } 100% { opacity:0; transform:translateX(-50%) translateY(10px) } }

/* ── SECTION COMMONS ──────────────────────────────── */
.sec { padding:5rem 2rem; position:relative }
.container { max-width:1200px; margin:0 auto }
.sec-hdr { text-align:center; margin-bottom:4rem }
.sec-tag {
  display:inline-block; color:var(--neon);
  font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:3px; margin-bottom:1rem;
  padding:.5rem 1rem;
  background:rgba(0,180,216,.1); border:1px solid rgba(0,180,216,.2);
  border-radius:4px;
}
.sec-title { font-size:2.75rem; font-weight:800; margin-bottom:1rem; letter-spacing:-.5px }
.sec-desc { font-size:1.1rem; color:var(--muted); max-width:600px; margin:0 auto; line-height:1.7 }

/* ── HOW IT WORKS ─────────────────────────────────── */
.flow-wrap {
  background:rgba(13,19,33,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,180,216,.12); border-radius:var(--r);
  padding:3rem; position:relative; overflow:hidden;
}
.flow-wrap::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
}
.flow-body {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap; row-gap:24px;
}
.fn {
  padding:1.1rem 1.25rem; border-radius:10px;
  font-size:.9rem; font-weight:700; text-align:center;
  width:150px; flex-shrink:0; transition:all .3s var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fn-ico  { font-size:1.6rem; margin-bottom:.5rem }
.fn-sub  { font-size:.7rem; opacity:.5; margin-top:.25rem; font-weight:500 }
.fn-in   { background:rgba(27,40,56,.8); border:1px solid rgba(255,255,255,.1); color:var(--text) }
.fn-core {
  background:rgba(0,119,182,.12); border:2px solid var(--primary); color:var(--primary);
  font-size:1rem; padding:1.25rem 1.75rem;
  animation:cpulse 2.5s ease-in-out infinite;
}
@keyframes cpulse {
  0%,100% { box-shadow:0 0 20px rgba(0,180,216,.2), inset 0 0 20px rgba(0,180,216,.05) }
  50%      { box-shadow:0 0 50px rgba(0,180,216,.45), inset 0 0 30px rgba(0,180,216,.1) }
}
.fn-bot { background:rgba(255,59,48,.06); border:1px solid rgba(255,59,48,.2); color:#ff5f57 }
.fn-hum { background:rgba(0,180,216,.07); border:1px solid rgba(0,180,216,.25); color:var(--accent) }
.fn-whi { background:rgba(52,199,89,.06); border:1px solid rgba(52,199,89,.2); color:#30d158 }
.fn-blk { background:rgba(0,119,182,.1); border:1px solid rgba(0,180,216,.25); color:var(--primary) }

.arr  { display:flex; align-items:center; padding:0 4px; flex-shrink:0 }
.aline {
  width:48px; height:2px;
  background:linear-gradient(90deg, rgba(0,180,216,.2), rgba(0,180,216,.7));
  position:relative; overflow:visible;
}
.aline::after {
  content:''; position:absolute; right:-5px; top:-4px;
  border:5px solid transparent; border-left-color:rgba(0,180,216,.7);
}
.aline .adot {
  position:absolute; top:-3px; width:8px; height:8px;
  background:var(--neon); border-radius:50%; opacity:0;
  box-shadow:0 0 6px rgba(0,245,255,.8);
  animation:slidedot 2s linear infinite;
}
@keyframes slidedot { 0% { left:-8px; opacity:0 } 10% { opacity:1 } 85% { opacity:1 } 100% { left:100%; opacity:0 } }
.aline .adot:nth-child(2) { animation-delay:.7s }
.aline .adot:nth-child(3) { animation-delay:1.4s }
.fork { display:flex; flex-direction:column; gap:14px; flex-shrink:0 }
.frow { display:flex; align-items:stretch; gap:0 }
.frow .arr { align-self:center }   /* стрелки по центру, боксы — растянуты */

/* Все 4 бокса форка — одинаковая минимальная высота */
.fn-bot, .fn-whi, .fn-hum, .fn-blk { min-height:110px }

/* Flow legend */
.flow-legend {
  display:flex; justify-content:center; gap:2.5rem;
  margin-top:1.75rem; flex-wrap:wrap;
}
.flow-legend > div {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:var(--muted);
}

/* ── FEATURES ─────────────────────────────────────── */
.feat-bg { background:linear-gradient(180deg, transparent, rgba(0,119,182,.05), transparent) }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem }
.fc {
  position:relative; padding:2.5rem;
  background:rgba(13,19,33,.6);
  border:1px solid rgba(0,180,216,.1); border-radius:var(--r);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:all .3s var(--ease); overflow:hidden;
}
.fc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:0; transition:opacity .3s;
}
.fc:hover::before { opacity:1 }
.fc:hover {
  transform:translateY(-10px);
  border-color:rgba(0,180,216,.3);
  box-shadow:0 20px 40px rgba(0,119,182,.2);
}
.fc-ico {
  position:relative; width:70px; height:70px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(0,119,182,.2), rgba(0,180,216,.1));
  border:1px solid rgba(0,180,216,.3); border-radius:12px;
  margin-bottom:1.5rem; box-shadow:0 0 18px rgba(0,180,216,.10);
  transition:all .3s var(--ease);
}
.fc-ico svg { width:34px; height:34px; color:var(--primary); filter:drop-shadow(0 0 5px rgba(0,180,216,.7)); transition:all .3s var(--ease) }
.fc:hover .fc-ico { transform:scale(1.1); box-shadow:var(--glow-n); border-color:var(--primary) }
.fc:hover .fc-ico svg { color:var(--neon); filter:drop-shadow(0 0 10px rgba(0,229,255,.85)) }
.ico-glow {
  position:absolute; inset:-15px;
  background:radial-gradient(circle, var(--primary), transparent 70%);
  opacity:0; filter:blur(15px); transition:opacity .3s; z-index:-1;
}
.fc:hover .ico-glow { opacity:.4 }
.fc-title { font-size:1.3rem; font-weight:700; margin-bottom:.75rem }
.fc-desc  { color:var(--muted); line-height:1.7; font-size:.95rem }

/* ── PRICING ──────────────────────────────────────── */
.price-grid {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1.25rem; max-width:1200px; margin:0 auto;
}
.pc {
  position:relative; padding:2rem 1.75rem;
  background:rgba(13,19,33,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,180,216,.22); border-radius:var(--r);
  transition:all .3s var(--ease);
  display:flex; flex-direction:column;       /* кнопка прижата к низу => все карты равны */
}
.pc > .btn-p { margin-top:auto }
.pc:hover { transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,119,182,.15) }
.pc.hot  { border-color:rgba(0,180,216,.4); background:rgba(0,119,182,.07) }
/* выше специфичности .fi.vis (transform), чтобы scale не слетал после fade-in */
.price-grid .pc.hot { transform:scale(1.05); z-index:2 }
/* Тот же вес нужен и обычным картам: .fi.vis ниже по файлу и с равной
   специфичностью гасил подъём. transition-delay:0 — чтобы ховер не ждал
   задержку .d1–.d3, унаследованную от анимации появления. */
.price-grid .pc:hover     { transform:translateY(-10px); transition-duration:.3s; transition-delay:0s }
.price-grid .pc.hot:hover { transform:scale(1.05) translateY(-10px); transition-duration:.3s; transition-delay:0s }
.pc.hot::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--neon), var(--primary), var(--secondary));
  border-radius:var(--r) var(--r) 0 0;
}
.pop {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:4px 18px;
  background:linear-gradient(135deg, var(--neon), var(--primary));
  border-radius:100px; font-size:.7rem; font-weight:800; color:var(--bg);
  white-space:nowrap; text-transform:uppercase; letter-spacing:1px;
}
.p-tier  { font-size:.8rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:.5rem }
.p-price { font-size:3.5rem; font-weight:800; letter-spacing:-2px; line-height:1; margin-bottom:.25rem }
.p-price sup { font-size:1.5rem; vertical-align:super; letter-spacing:0 }
.p-per   { font-size:.85rem; color:var(--muted); margin-bottom:1.75rem }
.p-div   { height:1px; background:rgba(0,180,216,.1); margin-bottom:1.5rem }
.p-ul    { list-style:none; margin-bottom:2rem }
.p-ul li {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.9rem;
}
.p-ul li:last-child { border-bottom:none }
.chk { color:var(--primary); flex-shrink:0; font-size:.9rem; line-height:1.5 }
.btn-p {
  width:100%; padding:.9rem; border-radius:8px;
  font-size:.95rem; font-weight:700; cursor:pointer;
  transition:all .3s var(--ease); font-family:inherit; text-align:center;
}
.btn-p.out { background:transparent; border:1px solid rgba(0,180,216,.3); color:var(--text) }
.btn-p.out:hover { background:rgba(0,180,216,.1); border-color:var(--primary); transform:translateY(-2px) }
.btn-p.sol {
  background:linear-gradient(135deg, var(--secondary), var(--primary));
  border:none; color:#fff; box-shadow:var(--glow-p);
  position:relative; overflow:hidden;
}
.btn-p.sol::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s ease;
}
.btn-p.sol:hover::before { left:100% }
.btn-p.sol:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,180,216,.5) }

/* ── PRICING v2 ───────────────────────────────── */
.pc { text-align:center }
.p-acc-num {
  font-size:5rem; font-weight:800; line-height:1; letter-spacing:-4px;
  background:linear-gradient(135deg, var(--neon), var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:1.5rem 0 .4rem;
  padding-right:4px;   /* компенсирует хвостовой letter-spacing, иначе цифру уводит вправо */
}
/* «1» в Space Grotesk узкая, но занимает полную ширину табличной цифры —
   свободного места слева больше, чем справа. Дотягиваем оптически. */
.p-acc-num.one { padding-right:14px }
.p-acc-lbl { font-size:.95rem; color:var(--muted); font-weight:500; margin-bottom:.25rem }
.p-price-row {
  display:flex; align-items:baseline; gap:.35rem; justify-content:center;
  margin:1.25rem 0 .35rem;
}
.pc .p-price { font-size:2.75rem; font-weight:800; letter-spacing:-1.5px; margin-bottom:0 }
.pc .p-per   { font-size:.85rem; color:var(--muted) }
/* цена за поток под ценой — заполняет карточку, показывает ценность */
.p-eco { display:flex; flex-direction:column; align-items:center; gap:.55rem; font-size:.82rem; font-weight:600; color:var(--primary); letter-spacing:.2px; margin-bottom:1.75rem }
.p-save {
  display:inline-flex; align-items:center; padding:.24rem .8rem; border-radius:100px;
  font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  background:rgba(0,245,255,.1); color:var(--neon);
  border:1px solid rgba(0,245,255,.4); box-shadow:0 0 14px rgba(0,245,255,.18);
}
.p-save.best {
  background:linear-gradient(135deg, rgba(0,245,255,.2), rgba(72,202,228,.18));
  color:#9beaff; border-color:rgba(0,245,255,.55); box-shadow:0 0 18px rgba(0,245,255,.3);
}
.pr-incl {
  background:rgba(0,180,216,.04); border:1px solid rgba(0,180,216,.1);
  border-radius:var(--r); padding:1.25rem 1.75rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  max-width:960px; margin:0 auto 3rem;
}
.pr-incl-lbl {
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--primary); white-space:nowrap; flex-shrink:0;
}
.pr-incl-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem }
.prp {
  padding:.3rem .9rem; border-radius:20px;
  background:rgba(0,180,216,.08); border:1px solid rgba(0,180,216,.15);
  font-size:.8rem; color:var(--muted); font-weight:500;
}
.pr-note {
  text-align:center; margin-top:2.5rem;
  font-size:.9rem; color:var(--muted); line-height:1.8;
}
.pr-note-lnk {
  color:var(--primary); font-weight:600;
  border-bottom:1px solid rgba(0,180,216,.3);
  transition:color .3s var(--ease), border-color .3s;
}
.pr-note-lnk:hover { color:var(--neon); border-color:rgba(0,245,255,.5) }

/* ── CTA ──────────────────────────────────────────── */
.cta-sec {
  padding:5rem 2rem; text-align:center;
  background:linear-gradient(180deg, transparent, rgba(0,119,182,.05), transparent);
}
.cta-box {
  max-width:700px; margin:0 auto;
  background:rgba(13,19,33,.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,180,216,.2); border-radius:20px;
  padding:4rem 3rem; position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), var(--primary), transparent);
}
.cta-orb {
  position:absolute; width:500px; height:400px;
  background:radial-gradient(ellipse, rgba(0,119,182,.08) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.cta-box h2  { font-size:2.5rem; font-weight:800; letter-spacing:-.5px; margin-bottom:1rem; position:relative }
.cta-box p   { color:var(--muted); font-size:1.1rem; margin-bottom:2.5rem; line-height:1.7; position:relative }
.cta-btns    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative }

.btn-tg {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2rem;
  background:linear-gradient(135deg, var(--secondary), var(--primary));
  border:none; border-radius:8px; color:#fff;
  font-size:1rem; font-weight:600;
  box-shadow:var(--glow-p);
  position:relative; overflow:hidden;
  transition:all .3s var(--ease); text-decoration:none; font-family:inherit;
}
.btn-tg::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s ease;
}
.btn-tg:hover::before { left:100% }
.btn-tg:hover { transform:translateY(-3px); box-shadow:0 15px 40px rgba(0,180,216,.5) }

/* ── COOKIE BANNER ───────────────────────────────── */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(10,14,23,.95);
  border-top:1px solid rgba(0,180,216,.2);
  padding:1rem 2rem; z-index:9999;
  transform:translateY(100%);
  transition:transform .4s ease-out;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cookie-banner.show { transform:translateY(0) }
.cookie-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-dsc { font-size:.95rem; color:var(--muted); flex:1; margin:0; min-width:200px }
.cookie-policy-lnk {
  color:var(--primary); font-size:.9rem; font-weight:600;
  border-bottom:1px solid rgba(0,180,216,.3); white-space:nowrap;
  transition:color .2s;
}
.cookie-policy-lnk:hover { color:var(--neon) }
.cookie-ok {
  padding:.55rem 1.75rem;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  border:none; border-radius:8px; color:#fff;
  font-size:.9rem; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:all .25s var(--ease); font-family:inherit;
}
.cookie-ok:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,180,216,.35) }
@media (max-width:600px) {
  .cookie-banner { padding:1rem 1.25rem }
  .cookie-inner  { gap:.85rem; justify-content:space-between; align-items:center }
  .cookie-dsc    { flex:none; width:100%; font-size:.9rem; line-height:1.5 }
  .cookie-policy-lnk { font-size:.88rem }
  .cookie-ok     { padding:.65rem 2.25rem }
}

/* ── FOOTER ───────────────────────────────────────── */
footer {
  border-top:1px solid rgba(0,180,216,.1);
  padding:2.5rem 2rem;
  background:rgba(13,19,33,.5);
  backdrop-filter:blur(10px);
}
.foot-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.foot-logo-txt {
  font-size:1.2rem; font-weight:700; letter-spacing:1px;
  background:linear-gradient(135deg, var(--primary), var(--neon));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.foot-copy { font-size:.85rem; color:var(--dim) }
.foot-tg {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.2rem;
  border:1px solid rgba(0,180,216,.25); border-radius:8px;
  color:var(--primary); font-size:.85rem; font-weight:600;
  background:rgba(0,180,216,.05);
  transition:all .3s var(--ease); text-decoration:none;
}
.foot-tg:hover { background:rgba(0,180,216,.12); border-color:var(--primary); box-shadow:var(--glow-p); transform:translateY(-2px) }
.foot-policy { font-size:.82rem; color:var(--dim); transition:color .3s var(--ease) }
.foot-policy:hover { color:var(--primary) }

/* ── FADE IN ──────────────────────────────────────── */
.fi  { opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease), transform .65s var(--ease) }
.fi.vis { opacity:1; transform:translateY(0) }
.d1 { transition-delay:.1s }
.d2 { transition-delay:.2s }
.d3 { transition-delay:.3s }
.d4 { transition-delay:.4s }

/* ── HERO TAGLINE ─────────────────────────────────── */
.hero-tagline {
  font-size:1.2rem; font-weight:700; line-height:1.4;
  margin-bottom:1.25rem; color:var(--text);
}
.hero-tl-hl { color:var(--neon); text-shadow:0 0 15px rgba(0,245,255,.35) }

/* ── PAIN SECTION ─────────────────────────────────── */
.pain-sec {
  padding:0 2rem 4rem; position:relative;
}
.pain-strip {
  background:rgba(13,19,33,.8);
  border:1px solid rgba(0,180,216,.2); border-radius:var(--r);
  padding:2.5rem 3rem;
  display:flex; align-items:center; justify-content:center;
  gap:3rem; margin-bottom:2rem;
  position:relative; overflow:hidden; flex-wrap:wrap; text-align:center;
}
.pain-strip::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,95,87,.6), var(--neon), rgba(255,95,87,.6), transparent);
}
.pain-q-wrap { display:flex; flex-direction:column; align-items:center; gap:.5rem }
.pain-emoji  { font-size:2rem }
.pain-q      { font-size:1.45rem; font-weight:800; letter-spacing:-.5px; line-height:1.3 }
.pain-divider{ font-size:2rem; color:var(--dim); flex-shrink:0 }
.pain-r-wrap { display:flex; flex-direction:column; align-items:center; gap:.6rem }
.pain-tag-pill {
  display:inline-block; padding:.35rem 1rem;
  background:rgba(0,245,255,.1); border:1px solid rgba(0,245,255,.3);
  border-radius:100px; color:var(--neon);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
}
.pain-ans { font-size:1.2rem; font-weight:700; max-width:360px; line-height:1.35; color:var(--text) }

.pain-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem }
.pain-card {
  background:rgba(13,19,33,.6);
  border:1px solid rgba(0,180,216,.1); border-radius:var(--r);
  padding:2rem; text-align:center;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.pain-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:0; transition:opacity .3s;
}
.pain-card:hover::before { opacity:1 }
.pain-card:hover { transform:translateY(-6px); border-color:rgba(0,180,216,.25); box-shadow:0 12px 30px rgba(0,119,182,.15) }
.pc-ico   { font-size:2.25rem; display:block; margin-bottom:.9rem }
.pc-title { font-size:1.05rem; font-weight:700; margin-bottom:.5rem }
.pc-desc  { font-size:.88rem; color:var(--muted); line-height:1.65 }

/* ── DOMAINS INCLUDED BAND ────────────────────────── */
.dom-sec { padding:0 2rem 4rem; position:relative }
.dom-band {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:1.75rem;
  max-width:960px; margin:0 auto;
  background:linear-gradient(120deg, rgba(0,180,216,.07), rgba(13,19,33,.85));
  border:1px solid rgba(0,180,216,.25); border-radius:var(--r);
  padding:2.75rem 3rem; box-shadow:var(--glow-p);
}
.dom-top { display:flex; align-items:center; gap:3rem }
.dom-band::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
}
.dom-text { flex:1 1 0; min-width:0 }
.dom-tag {
  display:inline-block; padding:.35rem 1rem;
  background:rgba(0,245,255,.1); border:1px solid rgba(0,245,255,.3);
  border-radius:100px; color:var(--neon);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  margin-bottom:1rem;
}
.dom-title { font-size:1.85rem; font-weight:800; line-height:1.2; letter-spacing:-.5px; margin-bottom:.85rem }
.dom-desc  { color:var(--muted); font-size:1rem; max-width:560px; margin-bottom:1.5rem }
.dom-points { display:flex; flex-wrap:wrap; gap:.85rem 1.75rem }
.dom-pt { display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600 }
.dom-ck {
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:rgba(0,180,216,.15); color:var(--neon); font-size:.7rem; flex:0 0 auto;
}
.dom-visual { flex:0 0 300px; display:flex; flex-direction:column; gap:.7rem }
.dom-chip {
  display:flex; align-items:center; gap:.6rem;
  background:rgba(13,19,33,.85); border:1px solid var(--border); border-radius:8px;
  padding:.7rem 1rem; font-size:.9rem;
}
.dom-name { white-space:nowrap }
.dom-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto }
.dom-dot.live { background:var(--neon); box-shadow:0 0 8px var(--neon) }
.dom-dot.burn { background:#FF5F57 }
.dom-st { margin-left:auto; font-size:.7rem; text-transform:uppercase; letter-spacing:1px }
.dom-st.live { color:var(--accent) }
.dom-st.burn { color:#FF5F57 }
.dom-chip.burned { opacity:.5 }
.dom-chip.burned .dom-name { text-decoration:line-through }
/* pills live inside the same band, below the highlight, split by a hairline */
.dom-incl { border-top:1px solid var(--border); padding-top:1.75rem }
.dom-incl .pr-incl-lbl { display:block; margin-bottom:1rem }

/* ── FAQ ──────────────────────────────────────────── */
.faq-list {
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:.75rem;
}
.faq-item {
  background:rgba(13,19,33,.6); backdrop-filter:blur(10px);
  border:1px solid rgba(0,180,216,.1); border-radius:var(--r);
  overflow:hidden; transition:border-color .3s var(--ease);
}
.faq-item.open { border-color:rgba(0,180,216,.35) }
.faq-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.75rem; background:transparent; border:none;
  color:var(--text); font-size:1rem; font-weight:600; text-align:left;
  cursor:pointer; transition:color .25s var(--ease); gap:1rem; font-family:inherit;
}
.faq-btn:hover { color:var(--neon) }
.faq-icon {
  flex-shrink:0; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,180,216,.3); border-radius:50%;
  font-size:1.1rem; line-height:1; color:var(--primary);
  transition:all .3s var(--ease);
}
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--neon); color:var(--neon) }
.faq-body { max-height:0; overflow:hidden; transition:max-height .4s var(--ease) }
.faq-body.open { max-height:400px }
.faq-body-inner {
  padding:.25rem 1.75rem 1.5rem;
  border-top:1px solid rgba(0,180,216,.08);
  color:var(--muted); font-size:.95rem; line-height:1.75;
}

/* ── RESPONSIVE ───────────────────────────────────── */

/* ── Tablet landscape (≤1100px) ── */
@media (max-width:1100px) {
  h1 { font-size:3rem }
  .hero-inner { gap:2.5rem }
  .price-grid { grid-template-columns:repeat(2,1fr); max-width:720px }
}

/* ── Tablet portrait (≤960px) — 1-column hero, code window below ── */
@media (max-width:960px) {
  .hero-inner {
    grid-template-columns:1fr;
    max-width:640px;
    gap:2.5rem;
  }
  .hero-text  { text-align:center }
  .hero-desc  { margin:0 auto 2.5rem }
  .hero-btns  { justify-content:center }
  .hero-stats { justify-content:center }
  .hero-visual {
    max-width:520px;
    margin:0 auto;
  }
  .fcrd-1 { top:-10px; right:-10px }
  .fcrd-2 { bottom:16px; left:-10px }
}

/* ── Mobile (≤767px) ── */
@media (max-width:767px) {

  /* Header */
  .header          { padding:.8rem 1.1rem }
  .nav-links       { display:none }
  .logo-ico        { width:36px; height:36px; font-size:1rem }
  .logo-txt        { display:none }      /* на телефоне — только иконка, освобождаем место под кнопку */
  .nav-r           { gap:.55rem }
  .lang-sw         { padding:.3rem .35rem; gap:.15rem }
  .tg-nav          { padding:.5rem .8rem; min-width:unset; font-size:.85rem }
  .nav-login       { display:none }   /* на узких экранах оставляем только «Регистрация» */

  /* Hero — text only, no code window */
  .hero         { padding:5.5rem 1.25rem 2.5rem }
  .hero-visual  { display:none }
  .scroll-ind   { display:none }
  .hero-inner   { gap:0 }
  .hero-text    { text-align:center }
  h1            { font-size:2.25rem; letter-spacing:-.5px }
  .hero-badge   { font-size:.75rem; padding:.4rem .875rem }
  .hero-desc    { font-size:1rem; margin:0 auto 2rem }
  .hero-btns    { flex-direction:column; align-items:stretch; gap:.75rem }
  .btn-pri,
  .btn-sec      { justify-content:center; width:100% }
  .hero-stats   { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; width:100% }
  .hstat        { padding-left:.75rem }
  .hstat-num    { font-size:1.5rem }
  .hstat-lbl    { font-size:.7rem; letter-spacing:.5px }

  /* Sections */
  .sec      { padding:3.5rem 1.25rem }
  .sec-hdr  { margin-bottom:2.5rem }
  .sec-title{ font-size:1.875rem; letter-spacing:-.25px }
  .sec-desc { font-size:1rem }
  .sec-tag  { font-size:.72rem; letter-spacing:2px }

  /* Hero tagline */
  .hero-tagline { font-size:1rem }

  /* Pain section */
  .pain-sec   { padding:0 1.25rem 3rem }
  .pain-strip { flex-direction:column; gap:1.5rem; padding:2rem 1.5rem }
  .pain-divider { transform:rotate(90deg) }
  .pain-q     { font-size:1.2rem }
  .pain-ans   { font-size:1rem; max-width:100% }
  .pain-cards { grid-template-columns:1fr }
  .dom-sec    { padding:0 1.25rem 3rem }
  .dom-band   { padding:2rem 1.5rem }
  .dom-top    { flex-direction:column; gap:2rem }
  .dom-title  { font-size:1.45rem }
  .dom-visual { flex-basis:auto; width:100% }

  /* FAQ */
  .faq-btn        { padding:1rem 1.25rem; font-size:.9rem }
  .faq-body-inner { padding:.25rem 1.25rem 1.25rem }

  /* Flow diagram — vertical stack */
  .flow-wrap  { padding:2rem 1.25rem }
  .flow-body  { flex-direction:column; align-items:center; row-gap:0; gap:0 }
  .arr        { transform:rotate(90deg); padding:.2rem 0; flex-shrink:0 }
  .aline      { width:36px }
  .fn         { min-width:200px; padding:.875rem 1.25rem }
  .fn-core    { padding:1rem 1.5rem; font-size:.95rem }

  /* Fork — 3-строчная сетка: блок / стрелка / блок */
  .fork { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:.5rem .75rem; width:100%; margin-top:.5rem }
  .frow { display:contents }

  /* frow:first-child = левый путь (bot → white) */
  .frow:first-child > :nth-child(1) { display:none }
  .frow:first-child > :nth-child(2) { grid-column:1; grid-row:1 }
  .frow:first-child > :nth-child(3) { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:center; transform:rotate(90deg); padding:0 }
  .frow:first-child > :nth-child(4) { grid-column:1; grid-row:3 }

  /* frow:last-child = правый путь (hum → offer) */
  .frow:last-child > :nth-child(1) { display:none }
  .frow:last-child > :nth-child(2) { grid-column:2; grid-row:1 }
  .frow:last-child > :nth-child(3) { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:center; transform:rotate(90deg); padding:0 }
  .frow:last-child > :nth-child(4) { grid-column:2; grid-row:3 }

  .fn-bot, .fn-whi, .fn-hum, .fn-blk { width:100%; height:120px !important; min-height:unset !important; align-self:start }

  /* Legend — по центру на мобиле */
  .flow-legend { flex-direction:column; align-items:center; gap:.75rem; text-align:center }

  /* Features — 1 column */
  .feat-grid  { grid-template-columns:1fr; gap:1rem }
  .fc         { padding:1.75rem }
  .fc-ico     { width:56px; height:56px; font-size:1.5rem }
  .fc-title   { font-size:1.1rem }
  .fc-desc    { font-size:.9rem }

  /* Pricing — 1 column centered */
  .price-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:1.5rem }
  .pc         { padding:2rem 1.5rem }
  .price-grid .pc.hot { margin-top:.75rem; transform:none }
  .p-price    { font-size:3rem }

  /* CTA */
  .cta-sec    { padding:3.5rem 1.25rem }
  .cta-box    { padding:2.5rem 1.5rem; border-radius:16px }
  .cta-box h2 { font-size:1.75rem }
  .cta-box p  { font-size:1rem }
  .cta-btns   { flex-direction:column; align-items:stretch }
  .btn-tg     { justify-content:center; width:100% }

  /* Footer */
  footer            { padding:2rem 1.25rem }
  .foot-inner       { flex-direction:column; align-items:center; text-align:center; gap:1rem }
}

/* ── Small mobile (≤480px) ── */
@media (max-width:480px) {
  .header     { padding:.75rem 1rem }
  .logo-ico   { width:32px; height:32px; font-size:.9rem }
  .logo-txt   { font-size:1.1rem }
  .tg-nav     { padding:.6rem 1rem; font-size:.85rem }

  .hero       { padding:5rem 1rem 2rem }
  h1          { font-size:1.875rem }
  .hero-badge { font-size:.7rem; letter-spacing:1.5px }
  .hstat-num  { font-size:1.45rem }
  .hstat-lbl  { font-size:.65rem }

  .sec        { padding:3rem 1rem }
  .sec-title  { font-size:1.625rem }
  .sec-desc   { font-size:.95rem }

  /* Flow — minimal on tiny screens */
  .flow-wrap  { padding:1.5rem 1rem }
  .fn         { min-width:0; width:100%; max-width:220px }
  .fork       { gap:.5rem }
  .frow       { gap:.35rem }

  .fc         { padding:1.5rem }
  .fc-ico     { width:50px; height:50px; font-size:1.35rem; margin-bottom:1rem }

  .price-grid { max-width:100% }
  .pc         { padding:1.75rem 1.25rem }
  .p-price    { font-size:2.75rem }

  .cta-box    { padding:2rem 1.25rem }
  .cta-box h2 { font-size:1.5rem }
  .btn-tg     { font-size:.9rem; padding:.875rem 1.5rem }
}