/* reelme — маркетинг-сайт. ДНК: near-black + сочный градиент lime→emerald→cyan (higgsfield-стиль, как студия), unbounded строчными, скругления 32 */
:root {
  --bg: #0a0b0d;
  --panel: #14171b;
  --panel-2: #1a1e23;
  --line: rgba(255, 255, 255, .09);
  --txt: #f4f7f5;
  --muted: rgba(244, 247, 245, .72);
  --dim: rgba(244, 247, 245, .52);
  --acc: #10e06a;
  --acc-soft: rgba(16, 224, 106, .14);
  --acc-cyan: #14d6c8;
  --acc-lime: #8ef05a;
  --grad: linear-gradient(120deg, #8ef05a 0%, #10e06a 46%, #14d6c8 100%);
  --grad-soft: linear-gradient(120deg, rgba(142,240,90,.16), rgba(20,214,200,.16));
  --glow: 0 14px 40px -12px rgba(16, 224, 106, .55);
  --r-lg: 32px;
  --r-md: 20px;
  --r-sm: 14px;
  --font-d: 'Unbounded', sans-serif;
  --font-b: 'Onest', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--txt);
  font-family: var(--font-b); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--acc); color: #111; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 62px); }

h1, h2, h3 { font-family: var(--font-d); font-weight: 600; line-height: 1.18; text-transform: lowercase; }
h1 { font-size: clamp(30px, 4.2vw, 56px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 3.2vw, 45px); }
h3 { font-size: clamp(17px, 1.5vw, 22px); }
.lead { color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); max-width: 640px; }
.tag { font-size: clamp(12px, .95vw, 15px); color: var(--acc); letter-spacing: .06em; text-transform: lowercase; font-weight: 600; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-d); font-weight: 500; text-transform: lowercase;
  font-size: clamp(14px, 1vw, 16px);
  background: var(--grad); color: #04130a; font-weight: 700; border: 0; border-radius: 16px;
  padding: 17px 34px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
  box-shadow: 0 3px 10px -4px rgba(16, 224, 106, .35);
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 18px -6px rgba(16, 224, 106, .45); filter: brightness(1.05); }
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--acc); color: var(--acc); box-shadow: none; }

/* ---------- шапка ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled { background: rgba(17, 17, 17, .78); backdrop-filter: blur(14px); border-color: var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 4vw, 62px); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-d); font-weight: 600; font-size: 20px; }
.logo b { color: var(--acc); font-weight: 600; }
.logo svg { display: block; }
.nav { display: flex; gap: clamp(12px, 2.4vw, 36px); align-items: center; font-family: var(--font-d); font-size: 14px; font-weight: 500; text-transform: lowercase; }
.nav a { opacity: .85; transition: opacity .2s, color .2s; }
.nav a:hover { opacity: 1; color: var(--acc); }
.nav .nav-login { color: var(--acc); font-weight: 600; }
@media (max-width: 860px) { .nav a:not(.nav-login) { display: none; } }

/* ---------- hero: живая медиа-стена + промпт-строка (higgsfield-стиль) ---------- */
.hero { position: relative; min-height: 94vh; display: flex; align-items: center; padding: clamp(110px, 14vh, 170px) 0 clamp(56px, 7vw, 100px); overflow: hidden; }
.hero-wall { position: absolute; inset: -6% -2%; z-index: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; opacity: .52; pointer-events: none; }
.hw-col { display: flex; flex-direction: column; gap: 14px; will-change: transform; animation: hw-up 44s linear infinite; }
.hw-col.down { animation-name: hw-down; }
.hw-col.slow { animation-duration: 66s; }
.hw-col img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; }
@keyframes hw-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hw-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 900px) { .hero-wall { grid-template-columns: repeat(3, 1fr); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hw-col { animation: none; } }
.hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(130% 90% at 50% 28%, rgba(10,11,13,.5), rgba(10,11,13,.92) 72%), linear-gradient(180deg, rgba(10,11,13,.72), rgba(10,11,13,.45) 42%, var(--bg)); }
.hero-scrim::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 42%, rgba(16,224,106,.15), transparent 62%), radial-gradient(46% 38% at 82% 18%, rgba(20,214,200,.13), transparent 62%); }
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; }
.hero-inner .tag { display: inline-block; }
.hero-inner h1 { font-size: clamp(34px, 6vw, 76px); margin: 16px 0 18px; }
.hero-inner h1 em { font-style: normal; }
.hero-inner .lead { margin: 0 auto 30px; font-size: clamp(16px, 1.35vw, 20px); }
.hero-prompt { display: flex; align-items: center; gap: 10px; max-width: 660px; margin: 0 auto 16px;
  background: rgba(18,22,26,.72); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 8px 8px 8px 18px; box-shadow: 0 24px 70px -22px rgba(0,0,0,.85); }
.hero-prompt:focus-within { border-color: rgba(16,224,106,.5); box-shadow: 0 24px 70px -22px rgba(0,0,0,.85), 0 0 0 3px rgba(16,224,106,.14); }
.hp-ic { flex-shrink: 0; width: 22px; height: 22px; }
.hp-ic svg { width: 22px; height: 22px; fill: var(--acc-lime); }
.hero-prompt input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--txt); font-family: var(--font-b); font-size: clamp(14px, 1.15vw, 16px); }
.hero-prompt input::placeholder { color: var(--dim); }
.hero-prompt .btn { flex-shrink: 0; padding: 13px 24px; border-radius: 12px; }
.hero-prompt-hint { max-width: 660px; margin: -6px auto 14px; color: var(--acc-lime); font-size: 14px; }
.hero-prompt-hint[hidden] { display: none; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-note { margin-top: 20px; color: var(--dim); font-size: 13.5px; }

/* телефоны в hero */
.phones { position: relative; height: clamp(380px, 44vw, 560px); }
.phone {
  position: absolute; width: clamp(150px, 16vw, 218px); aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden; border: 4px solid rgba(255, 255, 255, .92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone.p1 { left: 4%; top: 8%; transform: rotate(-8deg); z-index: 1; }
.phone.p2 { left: 32%; top: 0; z-index: 3; width: clamp(170px, 18vw, 244px); }
.phone.p3 { right: 2%; top: 12%; transform: rotate(9deg); z-index: 2; }
.phone .badge {
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  background: rgba(17, 17, 17, .72); backdrop-filter: blur(8px);
  border-radius: 10px; padding: 7px 10px; font-size: 11.5px; color: #fff; line-height: 1.35;
}
.phone .badge b { color: var(--acc); }

/* ---------- statement ---------- */
.statement { padding: clamp(70px, 10vw, 150px) 0 0; }
.statement p {
  font-family: var(--font-d); font-weight: 600; text-transform: lowercase;
  font-size: clamp(22px, 3vw, 40px); line-height: 1.25; max-width: 1050px;
}
.statement em { font-style: normal; color: var(--acc); }

/* ---------- секции ---------- */
section { padding-top: clamp(80px, 11vw, 160px); }
.sec-head { margin-bottom: clamp(26px, 4vw, 52px); }
.sec-head .lead { margin-top: 18px; }

/* ---------- marquee галереи ---------- */
.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 14vw; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg) 10%, transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg) 10%, transparent); }
.mrow { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; padding: clamp(6px, .8vw, 10px) 0; }
.mrow.r1 { animation: slide-l 46s linear infinite; }
.mrow.r2 { animation: slide-r 52s linear infinite; }
.marquee:hover .mrow { animation-play-state: paused; }
@keyframes slide-l { to { transform: translateX(-50%); } }
@keyframes slide-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mcard {
  width: clamp(160px, 17vw, 235px); aspect-ratio: 9 / 16; border-radius: var(--r-md);
  overflow: hidden; position: relative; flex-shrink: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mcard:hover { transform: scale(1.045); z-index: 3; }
.mcard img { width: 100%; height: 100%; object-fit: cover; }
.mcard span {
  position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600;
  background: rgba(17,17,17,.65); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 8px;
}

/* ---------- пайплайн ---------- */
.pipe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pipe .step {
  font-family: var(--font-d); font-size: clamp(12px, 1vw, 15px); font-weight: 500; text-transform: lowercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; color: var(--dim);
  transition: color .45s ease, border-color .45s ease, background-color .45s ease, box-shadow .45s ease; background: var(--panel);
}
.pipe .arr { color: var(--dim); opacity: .6; }
.pipe .step.lit { color: #fff; border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 24px rgba(0,204,85,.12); }
.pipe-hint { margin-top: 22px; }

/* ---------- форматы ---------- */
.fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); }
@media (max-width: 1000px) { .fmt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fmt-grid { grid-template-columns: 1fr; } }
.fmt {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 32px); position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s;
}
.fmt:hover { transform: translateY(-6px); border-color: rgba(0, 204, 85, .5); }
.fmt .ico { width: 52px; height: 52px; border-radius: 15px; background: var(--acc); display: grid; place-items: center; margin-bottom: 16px; box-shadow: 0 8px 22px -6px rgba(16,224,106,.5); }
.fmt .ico svg { width: 26px; height: 26px; fill: #06130b; }
.fmt h3 { margin-bottom: 10px; }
.fmt p { color: var(--muted); font-size: 14.5px; }
.fmt .dyn { margin-top: 14px; font-size: 12.5px; color: var(--acc); font-weight: 600; letter-spacing: .04em; }
.fmt::after {
  content: ''; position: absolute; inset: auto -30% -55% auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 204, 85, .12), transparent 65%); opacity: 0; transition: opacity .4s;
}
.fmt:hover::after { opacity: 1; }

/* ---------- сценарии (3 больших карточки) ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
.case {
  border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 38px); min-height: 320px;
  display: flex; flex-direction: column; border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.case:hover { transform: translateY(-6px); }
.case.c1 { background: linear-gradient(160deg, #0d2818, #131413); }
.case.c2 { background: linear-gradient(160deg, #101c2a, #131313); }
.case.c3 { background: linear-gradient(160deg, #23150c, #141312); }
.case .num { font-family: var(--font-d); color: var(--acc); font-size: 15px; margin-bottom: auto; }
.case h3 { margin: 26px 0 12px; }
.case p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.case .btn { align-self: flex-start; padding: 12px 24px; font-size: 13.5px; }

/* ---------- фичи-грид ---------- */
.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, 1fr); } }
.feat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; transition: border-color .3s; }
.feat:hover { border-color: rgba(0, 204, 85, .4); }
.feat b { display: block; font-family: var(--font-d); font-size: 14.5px; font-weight: 500; text-transform: lowercase; margin-bottom: 8px; }
.feat span { color: var(--dim); font-size: 13.5px; line-height: 1.45; }

/* ---------- отзывы-джок ---------- */

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-family: var(--font-d); font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; text-transform: lowercase;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.faq summary::after { content: '+'; font-size: 26px; color: var(--acc); transition: transform .3s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 4px 24px; color: var(--muted); max-width: 720px; }

/* ---------- финальный CTA ---------- */
.final {
  margin-top: clamp(80px, 11vw, 160px); border-radius: var(--r-lg);
  background: radial-gradient(120% 160% at 50% -20%, rgba(0, 204, 85, .22), transparent 55%), var(--panel);
  border: 1px solid var(--line); text-align: center; padding: clamp(50px, 7vw, 100px) 24px;
}
.final h2 { margin-bottom: 16px; }
.final .lead { margin: 0 auto 34px; }

/* ---------- футер ---------- */
footer { margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); padding: 44px 0 60px; }
.ftr { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.ftr .cols { display: flex; gap: clamp(30px, 5vw, 80px); flex-wrap: wrap; }
.ftr h4, .ftr-h { font-family: var(--font-d); font-size: 13px; font-weight: 500; text-transform: lowercase; color: var(--dim); margin-bottom: 14px; }
.ftr a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 10px; transition: color .2s; }
.ftr a:hover { color: var(--acc); }
.copy { margin-top: 40px; color: var(--dim); font-size: 12.5px; }

/* ---------- зерно, прогресс, градиентный текст ---------- */
body::after {
  content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -8%); }
  30% { transform: translate(4%, -3%); } 50% { transform: translate(-6%, 6%); }
  70% { transform: translate(6%, 2%); } 90% { transform: translate(-3%, 4%); }
}
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--acc); z-index: 60; }

.grad {
  background: linear-gradient(100deg, #8ef05a, #14d6c8 50%, #10e06a 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradshift 5s ease-in-out infinite alternate;
}
@keyframes gradshift { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- секция кино ---------- */
.cinema {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  min-height: clamp(340px, 42vw, 560px); display: flex; align-items: flex-end;
}
.cinema img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease; }
.cinema:hover img.bg { transform: scale(1); }
.cinema::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,17,17,.2), rgba(17,17,17,.9) 80%);
}
.cinema-in { position: relative; z-index: 2; padding: clamp(24px, 4vw, 56px); max-width: 760px; }
.cinema h2 { margin: 10px 0 14px; }
.cinema .lead { margin-bottom: 24px; }
.cinema .specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cinema .specs span {
  font-family: var(--font-d); font-size: 12.5px; text-transform: lowercase;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(6px);
}

/* ---------- reveal-анимации ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .mrow { animation: none !important; }
  body::after { animation: none !important; }
}

/* ---------- блог ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); }
@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card { border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.post-card:hover { transform: translateY(-6px); border-color: rgba(0, 204, 85, .4); }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card .pc-body { padding: 22px 24px 26px; }
.post-card h3 { margin-bottom: 10px; }
.post-card p { color: var(--muted); font-size: 14px; }
.post-card .date { color: var(--dim); font-size: 12.5px; margin-top: 14px; display: block; }

.article { max-width: 800px; margin: 0 auto; padding-top: clamp(110px, 14vh, 160px); }
.article img.cover { border-radius: var(--r-lg); margin: 30px 0; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.article h1 { text-transform: none; font-size: clamp(26px, 3.4vw, 42px); }
.article h2 { text-transform: none; font-size: clamp(20px, 2.2vw, 28px); margin: 44px 0 16px; }
.article p, .article li { color: var(--muted); margin-bottom: 14px; font-size: 16px; line-height: 1.7; }
.article ul, .article ol { padding-left: 24px; margin-bottom: 18px; }
.article strong { color: #fff; }
.article .meta { color: var(--dim); font-size: 13.5px; margin-top: 14px; }
.article .cta-inline {
  margin: 40px 0; padding: 28px; border-radius: var(--r-md); border: 1px solid rgba(0, 204, 85, .35);
  background: var(--acc-soft);
}
.article .cta-inline p { margin-bottom: 16px; color: #fff; }

/* ---------- Тарифы на маркетинге ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.price-card:hover { transform: translateY(-6px); border-color: rgba(0,204,85,.4); }
.price-card.popular { border-color: var(--acc); box-shadow: 0 0 50px rgba(0,204,85,.12); }
.pc-badge { position: absolute; top: -12px; left: 28px; background: var(--acc); color: #052; font-family: var(--font-d); font-size: 11px; font-weight: 500; padding: 4px 14px; border-radius: 20px; text-transform: lowercase; }
.pc-name { font-family: var(--font-d); font-size: 20px; margin-bottom: 12px; }
.pc-price { margin-bottom: 4px; } .pc-price b { font-family: var(--font-d); font-size: 40px; } .pc-price span { color: var(--dim); }
.pc-tok { color: var(--acc); font-weight: 600; font-size: 14px; margin-bottom: 22px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-card li { color: var(--muted); font-size: 14.5px; padding: 6px 0 6px 24px; position: relative; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--acc); font-weight: 700; }
.price-card .btn { width: 100%; }

/* ---------- Cookie-баннер ---------- */
.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80;
  width: min(760px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  background: rgba(28,28,30,.96); backdrop-filter: blur(14px); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cookie-bar span { color: var(--muted); font-size: 13.5px; flex: 1; min-width: 240px; }
.cookie-bar a { color: var(--acc); }
.cookie-bar .btn { padding: 10px 22px; }

/* ---------- Пагинация блога ---------- */
.blog-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.blog-pager a, .blog-pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); font-family: var(--font-d); font-size: 14px; }
.blog-pager a { color: var(--muted); transition: color .2s, border-color .2s; }
.blog-pager a:hover { border-color: var(--acc); color: var(--acc); }
.blog-pager span.on { background: var(--acc); color: #052; border-color: var(--acc); }

/* ---------- Цифры ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); }
@media (max-width: 800px) { .nums { grid-template-columns: 1fr 1fr; } }
.num-cell {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 34px); text-align: center;
  transition: border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.num-cell:hover { border-color: rgba(0,204,85,.45); transform: translateY(-5px); }
.num-cell b { display: block; font-family: var(--font-d); font-size: clamp(38px, 5vw, 60px); font-weight: 600; color: var(--acc); line-height: 1; margin-bottom: 12px; }
.num-cell span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- Сравнение ---------- */
.cmp { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; align-items: center; }
.cmp-row > span { padding: 16px clamp(10px, 1.4vw, 20px); font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.cmp-row:last-child > span { border-bottom: 0; }
.cmp-head > span { font-family: var(--font-d); font-size: 12.5px; text-transform: lowercase; color: var(--dim); background: var(--panel); }
.cmp-head .cmp-us { color: var(--acc); }
.cmp-k { font-weight: 600; color: #fff !important; }
.cmp-us { background: var(--acc-soft); color: #fff !important; font-weight: 600; border-left: 1px solid rgba(0,204,85,.3); border-right: 1px solid rgba(0,204,85,.3); }
.cmp-row .y { color: var(--acc); } .cmp-row .n { color: var(--dim); }
@media (max-width: 900px) {
  .cmp { border: 0; overflow-x: auto; }
  .cmp-inner, .cmp { min-width: 680px; }
}

/* ---------- Партнёрка-тизер ---------- */
.ptease {
  border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(120% 150% at 85% 20%, rgba(0,204,85,.16), transparent 55%), var(--panel);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: clamp(32px, 5vw, 64px);
}
.ptease-in { max-width: 640px; }
.ptease-in h2 { margin: 12px 0 16px; }
.ptease-in .lead { margin-bottom: 28px; }
.ptease-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ptease-badge {
  flex-shrink: 0; text-align: center; border: 1px solid rgba(0,204,85,.4); border-radius: var(--r-md);
  padding: 28px 34px; background: rgba(0,204,85,.06);
}
.ptease-badge b { font-family: var(--font-d); font-size: clamp(48px, 6vw, 76px); color: var(--acc); line-height: 1; display: block; }
.ptease-badge span { color: var(--muted); font-size: 13px; margin-top: 10px; display: block; }
@media (max-width: 820px) { .ptease { flex-direction: column; align-items: flex-start; } .ptease-badge { align-self: center; } }

/* ---------- Переключатель оплаты ---------- */
.bill-toggle { font-family: var(--font-d); font-size: 14px; text-transform: lowercase; background: transparent; border: 0; color: var(--muted); padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: background-color .25s, color .25s; display: inline-flex; align-items: center; gap: 8px; }
.bill-toggle.on { background: var(--acc); color: #052; }
.bill-toggle .save { font-size: 11px; background: rgba(0,0,0,.18); padding: 2px 8px; border-radius: 20px; }
.bill-toggle:not(.on) .save { background: var(--acc-soft); color: var(--acc); }

/* ---------- Таблица расценок ---------- */
.rate-row { display: grid; grid-template-columns: 1.1fr 1.6fr .7fr; align-items: center; }
.rate-row > span { padding: 15px clamp(12px, 1.6vw, 22px); font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.rate-row:last-child > span { border-bottom: 0; }
.rate-head > span { font-family: var(--font-d); font-size: 12.5px; text-transform: lowercase; color: var(--dim); background: var(--panel); }
.rate-row .cmp-us { text-align: center; }
@media (max-width: 700px) { .rates-wrap, .rate-row { min-width: 520px; } #rates .cmp { overflow-x: auto; } }

/* ---------- Соцсети-флоу (лента шагов) ---------- */
.social-flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: clamp(30px, 4vw, 48px); }
.social-flow .step {
  font-family: var(--font-d); font-size: clamp(12px, 1vw, 15px); font-weight: 500; text-transform: lowercase;
  border: 1px solid rgba(0,204,85,.35); border-radius: 999px; padding: 12px 20px; color: #fff;
  background: var(--acc-soft);
}
.social-flow .arr { color: var(--acc); opacity: .7; }

/* ===== СОЧНЫЙ СЛОЙ (2026): higgsfield-градиенты и свечения на весь лендинг ===== */
.hdr.scrolled { background: rgba(10, 11, 13, .8); }
.logo b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num-cell:hover { border-color: rgba(16,224,106,.5); box-shadow: var(--glow); }
.fmt:hover { border-color: rgba(16,224,106,.5); box-shadow: 0 22px 54px -22px rgba(0,0,0,.72); }
.fmt::after { background: radial-gradient(circle, rgba(20,214,200,.14), transparent 65%); }
.feat:hover, .post-card:hover { border-color: rgba(16,224,106,.45); }
.mcard { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.mcard:hover { box-shadow: 0 22px 54px -18px rgba(0,0,0,.72), 0 0 0 2px rgba(16,224,106,.55); }
.mcard span { background: linear-gradient(0deg, rgba(4,10,7,.82), transparent); }
.case:hover { box-shadow: 0 26px 62px -24px rgba(0,0,0,.72); }
.social-flow .step { background: var(--grad-soft); border-color: rgba(20,214,200,.25); }
.pipe .step.lit { border-color: rgba(16,224,106,.5); background: var(--acc-soft); box-shadow: var(--glow); }
/* тарифы на лендинге */
.price-card.popular { border-color: rgba(16,224,106,.6); box-shadow: 0 0 60px -10px rgba(16,224,106,.22); }
.price-card.popular::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--acc); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.price-card.popular .pc-price b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-card li::before { color: var(--acc); }
/* финальный CTA + hero-note */
.final { background: radial-gradient(120% 160% at 50% -20%, rgba(20,214,200,.2), transparent 55%), radial-gradient(120% 150% at 50% 120%, rgba(16,224,106,.14), transparent 55%), var(--panel); border-color: rgba(16,224,106,.28); }
.hero-note { color: var(--dim); }

/* ---------- мобильная версия (15.09.2026) ---------- */
/* Нет скрипта или он не успел — текст виден сразу (см. REVEAL в <head>). */
.rv-all .rv { opacity: 1 !important; transform: none !important; }
/* Ничего не должно раздвигать страницу вбок: таблица сравнения была 680px при экране 390–412px. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .cmp-row { min-width: 640px; }
  .hero-inner, .hero-inner > * { max-width: 100%; min-width: 0; }
  .hero-inner input { min-width: 0; }
  /* лёгкий первый экран: три колонки «стены» вместо пяти, без размытия под шапкой */
  .hw-col:nth-child(n+4) { display: none; }
  .hdr.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(17, 17, 17, .95); }
}

/* ===== ПЕРВЫЙ ЭКРАН 2026 (design): карточки-доказательства, тихие CTA, тонкая cookie-полоска ===== */
/* Было: первый экран не показывал ни одного видео, было четыре кнопки одинакового веса, плейсхолдер
   в поле обрезался на телефоне на полуслове, cookie-плашка занимала треть экрана и закрывала кнопку.
   Ниже — точечные правки под это. Остальной лендинг не менялся. */

/* три карточки-доказательства в hero: переиспользуют .mcard из галереи #works ниже по странице,
   саму галерею это не меняет — .hero-proof только добавляет контекст своим карточкам */
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 8px; max-width: 420px; margin: 0 auto 12px; }
.hero-proof .mcard { width: 100%; }
.hero-proof-cap { color: var(--dim); font-size: 12px; margin-bottom: 22px; }
@media (min-width: 700px) { .hero-proof { max-width: 520px; gap: 14px; } }

/* мобильный вертикальный ритм первого экрана: первая правка (короткий подзаголовок, заголовок
   без тире-переноса) уже убирает у .hero ~120px лишней высоты — этих чуть более тесных отступов
   не хватало бы без неё, а вместе с ней это честный запас, а не подгонка под конкретный экран */
@media (max-width: 760px) {
  .hero { padding-top: clamp(96px, 14vh, 170px); }
  .hero-inner .lead { margin: 0 auto 20px; }
  .hero-proof { margin: 0 auto 8px; }
  .hero-proof-cap { margin-bottom: 14px; }
}

/* бейдж «видео 9:16»: непрозрачная тёмная подложка + блюр, чтобы текст был читаем на любом кадре снизу
   (на светлом небе в reel-travel.jpg зелёный текст без плотной подложки терялся) */
.mcard .hero-proof-badge {
  position: absolute; top: 8px; left: 8px; bottom: auto;
  font-family: var(--font-d); font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--acc-lime); background: rgba(6,10,8,.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.14); padding: 4px 8px; border-radius: 7px;
}

/* тихая ссылка вместо второй кнопки-ghost в hero (вторая, «соцсети на автопилоте», убрана из первого
   экрана — у неё есть своя секция #social ниже по странице) */
.hero-quiet-link {
  font-family: var(--font-d); font-size: 13.5px; font-weight: 500; color: var(--dim);
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .hero-quiet-link:hover { color: var(--acc); border-color: rgba(16,224,106,.4); }
}

/* узкие телефоны (≤389px, это почти все, кроме экранов от 390 и шире): кнопка в hero-prompt уходит
   на свою строку и растягивается на всю ширину, а не делит строку с полем. Раньше порог был 359px —
   при 360 и 375 (самые частые ширины Android и iPhone) поле и так делило строку с кнопкой, и на 360
   подсказка «кофейня в дождь» не влезала — не хватало 7px, а на 375 запас был всего 8px, тоже мало.
   Подняли порог до 389, то есть ровно до границы, на которой самим замером подтверждено, что запас
   комфортный (390 даёт полю примерно на 30px больше места, чем нужно тексту). Так поле получает всю
   ширину раньше, чем не хватает места, — это чинит причину (тесно в строке), а не подгоняет текст
   под неё каждый раз заново. */
@media (max-width: 389px) {
  .hero-prompt { flex-wrap: wrap; row-gap: 8px; }
  .hero-prompt input { flex-basis: 0; }
  .hero-prompt .btn { flex-basis: 100%; width: 100%; justify-content: center; }
}

/* cookie-полоска: было — карточка почти на всю ширину экрана с крупной градиентной кнопкой,
   съедала треть первого экрана на телефоне. Стало — тонкая полоска, кнопка обычная, без градиента
   (это не главное действие на странице). Текст, ссылку на политику и localStorage-логику в
   assets/site.js не трогали — там поменялось только КУДА вставляется тот же .cookie-bar. */
.cookie-bar { width: min(380px, calc(100vw - 24px)); gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; bottom: 10px; }
.cookie-bar span { font-size: 11px; line-height: 1.3; min-width: 150px; }
.cookie-bar .btn { background: var(--acc-lime); color: #04130a; box-shadow: none; padding: 7px 14px; font-size: 12px; border-radius: 8px; }
.cookie-bar .btn::after { display: none; }
.cookie-bar .btn:hover { transform: none; box-shadow: none; filter: brightness(1.08); }

/* .cookie-bar-flow: вариант для страниц с hero (сейчас только главная). Раньше плашка держалась на
   position:fixed и «плавала» у нижнего края ЭКРАНА — на низких экранах (iPhone SE, 667px) она поднималась
   вместе с краем окна и на части высот перекрывала кнопку «создать» в hero. Теперь на такой странице
   site.js вставляет плашку не поверх страницы, а сразу в поток — обычным блоком после секции .hero,
   перед секцией statement. Она отодвигает то, что ниже, вниз, но с кнопкой в hero пересечься физически
   не может ни при какой высоте экрана: это не позиционирование внутри вьюпорта, а порядок элементов
   в документе. На страницах без .hero (блог, тарифы и т.д.) ничего не изменилось — там прежний
   плавающий .cookie-bar, потому что там нет кнопки в hero, с которой можно столкнуться. */
.cookie-bar.cookie-bar-flow {
  position: relative; left: auto; bottom: auto; transform: none; z-index: auto;
  width: min(560px, calc(100% - 24px));
  margin: 20px auto clamp(28px, 6vw, 56px);
}

/* QA 29.09 — design: мобильное меню шапки (кнопку и панель строит site.js из ссылок .nav) */
.nav-burger, .mnav { display: none; }
@media (max-width: 860px) {
  .nav { margin-left: auto; margin-right: 6px; }
  .nav-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; border-radius: 12px; color: var(--txt); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s cubic-bezier(.23, 1, .32, 1), opacity .15s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  .hdr.menu-open { background: #0a0b0d; border-color: var(--line); }
  .mnav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 4px clamp(16px, 4vw, 62px) 18px; background: #0a0b0d; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1), visibility 0s .18s; }
  .mnav.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .mnav a { display: flex; align-items: center; min-height: 52px; font-family: var(--font-d); font-size: 16px; font-weight: 500; text-transform: lowercase; border-bottom: 1px solid var(--line); }
  .mnav a:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
  .mnav a.btn { justify-content: center; margin-top: 16px; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-burger span, .mnav { transition: none; } }

/* ---------- 12.10.2026: телефон, /pricing.html и /partners.html ---------- */
/* Расценки: на телефоне строка-карточка (название и цена в одной строке, модель под ними), без горизонтального сдвига */
@media (max-width: 760px) {
  #rates .cmp { min-width: 0; overflow: visible; border: 1px solid var(--line); }
  #rates .rate-row { min-width: 0; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "k p" "m m"; align-items: baseline; column-gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  #rates .rate-row:last-child { border-bottom: 0; }
  #rates .rate-row > span { padding: 0; border: 0; }
  #rates .rate-head { display: none; }
  #rates .rate-row .cmp-k { grid-area: k; font-size: 15px; }
  #rates .rate-row > span:nth-child(2) { grid-area: m; margin-top: 4px; font-size: 13px; line-height: 1.4; }
  #rates .rate-row .cmp-us { grid-area: p; background: none; border: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--acc) !important; font-size: 16px; }
}
/* Партнёрам: сетки без инлайн-колонок, чтобы работали медиазапросы */
.fmt-grid.cols-3, .nums.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .fmt-grid.cols-3, .nums.cols-3 { grid-template-columns: 1fr; } }