/* ============================================================
   HOTLEAD — fresh dark-mode SaaS brand
   Tokens + base + section styles
   Imported from Claude Design project "Hotlead" (Hotlead Landing.html)
   ============================================================ */

:root {
  /* Accent — change these two lines to re-skin the whole page.
     Design offered: #30beac Бирюза · #c8fa4b Лайм · #5ad1ff Циан
                     #ff6fb3 Магента · #ff8a3d Оранж
     (--accent-ink is the text colour that sits ON the accent) */
  --accent: #30beac;
  --accent-ink: #04201c;

  /* Neutral ramp — cool near-black */
  --bg:        #0a0b0d;
  --bg-2:      #0d0f12;
  --surface:   #121419;
  --surface-2: #171a20;
  --surface-3: #1d212a;
  --line:      #23272f;
  --line-2:    #2c313b;

  --text:      #f3f5f7;
  --text-2:    #aeb4bf;
  --text-3:    #767d8a;

  /* Derived accent washes (color-mix keeps them tied to --accent) */
  --accent-12:  color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-18:  color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-30:  color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-dim:  color-mix(in srgb, var(--accent) 60%, var(--text-3));

  /* Type */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Geometry */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -28px rgba(0,0,0,.8);
  --shadow-pop:  0 40px 120px -40px rgba(0,0,0,.9);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* page-wide atmospheric glow */
.bg-aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%, var(--accent-12), transparent 60%),
    radial-gradient(700px 600px at 5% 8%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

#root { position: relative; z-index: 2; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- typography helpers ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.eyebrow.center::before { display: none; }

.section { position: relative; padding-block: clamp(52px, 5.5vw, 84px); }
.section-head { max-width: 760px; }
.section-head h2 {
  font-size: clamp(30px, 4.6vw, 52px);
  margin-top: 20px;
}
.section-head p { margin-top: 18px; color: var(--text-2); font-size: clamp(16px, 1.4vw, 19px); }
/* Блоки-сетки (.qcards, .schemes, .stats-strip) несут собственный верхний
   отступ, а .prose и врезки — нет, и текст прилипал к заголовку вплотную. */
.section-head + .prose,
.section-head + .callout,
.section-head + .dtable,
.section-head + .symptom { margin-top: clamp(26px, 3vw, 38px); }
.kicker-num { font-family: var(--mono); color: var(--text-3); font-size: 13px; letter-spacing: .1em; }

/* ---------- buttons ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, box-shadow .35s, border-color .25s, color .25s;
  text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 0 var(--accent-glow), 0 12px 30px -12px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px -4px var(--accent-glow), 0 18px 40px -16px var(--accent-glow);
}
.btn-ghost {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: var(--line-2); color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); transform: translateY(-2px); }
.btn-sm { --bh: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { --bh: 58px; padding: 0 30px; font-size: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-2); font-weight: 600;
}
.chip svg { width: 15px; height: 15px; }

/* ---------- reveal ----------
   Opacity stays 1 at ALL times (even mid-animation) so a frozen capture
   timeline never blanks content. Entrance is a subtle vertical drift only. */
.reveal { opacity: 1; }
.reveal.in { animation: revIn .7s var(--ease-out); }
@keyframes revIn { from { transform: translateY(20px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.in { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================  NAV  */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  padding: 9px 13px; border-radius: 10px; transition: color .2s, background .2s;
  letter-spacing: -.01em;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-login { font-size: 14px; font-weight: 600; color: var(--text-2); padding: 9px 6px; }
.nav-login:hover { color: var(--accent); }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); place-items: center; cursor: pointer; flex: none; transition: border-color .2s, color .2s; }
.nav-burger:hover { border-color: var(--line-2); }
.nav-burger svg { width: 21px; height: 21px; }
.nav-mobile { display: none; }
.nav-mobile .m-link { font-size: 16px; font-weight: 600; color: var(--text); padding: 13px 12px; border-radius: 10px; transition: background .2s, color .2s; }
.nav-mobile .m-link:hover { background: var(--surface-2); color: var(--accent); }
.nav-mobile .m-divider { height: 1px; background: var(--line); margin: 8px 2px; }
.nav-mobile .btn { width: 100%; margin-top: 8px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-img { height: 30px; width: auto; display: block; }
.logo-fallback { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 24px -10px var(--accent-glow);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-word { font-weight: 800; letter-spacing: -.04em; font-size: 20px; }
.logo-word b { color: var(--accent); font-weight: 800; }

/* ============================================================  HERO  */
.hero { position: relative; padding-top: 150px; padding-bottom: 40px; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 5.6vw, 74px);
  letter-spacing: -.035em; line-height: .98;
  margin-top: 24px;
}
.hero h1 .hl { color: var(--accent); }
.hero-sub { margin-top: 26px; max-width: 520px; color: var(--text-2); font-size: clamp(16px, 1.5vw, 19px); }
.hero-sub b { color: var(--text); font-weight: 700; }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-bullets { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.hero-bullet { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.hero-bullet .tick {
  flex: none; width: 21px; height: 21px; border-radius: 7px; margin-top: 1px;
  background: var(--accent-18); color: var(--accent); display: grid; place-items: center;
}
.hero-bullet .tick svg { width: 13px; height: 13px; }

/* hero dashboard */
.dash {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-pop);
  padding: 16px; overflow: hidden;
}
.dash::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, var(--accent-30), transparent 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.dash-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.dash-title { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: 8px; letter-spacing: .08em; }
.dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--accent); }
.dash-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.dash-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; min-height: 334px; align-items: stretch; }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.dash-body > .panel { min-height: 286px; }
.dash-body > div:last-child { min-height: 286px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-h span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }

/* call rows */
.call { display: flex; align-items: center; gap: 11px; padding: 9px; border-radius: 12px; transition: background .4s; }
.call + .call { margin-top: 4px; }
.call.active { background: var(--accent-soft); }
.call-av { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.call-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.call-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.call-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-state { font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-ring { color: #ffd24a; background: rgba(255,210,74,.12); }
.st-live { color: var(--accent); background: var(--accent-18); }
.st-done { color: var(--text-2); background: var(--surface-3); }

/* waveform */
.wave { display: flex; align-items: center; gap: 3px; height: 40px; margin-top: 6px; }
.wave i { flex: 1; height: 30%; background: var(--accent); border-radius: 2px; opacity: .85; animation: wv 1.1s ease-in-out infinite; }
@keyframes wv { 0%,100% { height: 18%; } 50% { height: 92%; } }

/* mini stats */
.kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.kpi-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.kpi-cell .v { font-family: var(--mono); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.kpi-cell .l { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.kpi-cell .v.up { color: var(--accent); }

/* CRM card pop */
.crm-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 13px; min-height: 163px; flex: 1; }
.crm-swap { animation: crmIn .5s var(--ease-out); }
@keyframes crmIn { from { opacity: .3; } to { opacity: 1; } }
.crm-top { display: flex; align-items: center; gap: 10px; }
.crm-top .av { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-18); color: var(--accent); display: grid; place-items: center; font-weight: 800; }
.crm-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.crm-tag { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.crm-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.crm-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; white-space: nowrap; }
.crm-row .k { color: var(--text-3); flex: none; }
.crm-row .val { font-family: var(--mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; flex: 1; min-width: 0; }

/* ============================================================  TRUST  */
.trust { padding-block: 48px; border-block: 1px solid var(--line); background: var(--bg-2); }
.trust-top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 40px; }
.trust-big { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.trust-big b { color: var(--accent); }
.trust-note { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.marquee { position: relative; overflow-x: hidden; overflow-y: visible; padding-block: 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: scrollx 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.logo-pill {
  display: flex; align-items: center; justify-content: center; flex: none;
  height: 84px; width: 188px; padding: 0 26px;
  border-radius: 16px; border: 1px solid var(--line);
  background: #ffffff;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.logo-pill:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.logo-pill img {
  max-height: 46px; max-width: 140px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.05);
}

/* ============================================================  TOOLS  */
.tools-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tool {
  position: relative; grid-column: span 4; padding: 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .35s, transform .35s var(--ease), background .35s;
}
.tool:hover { border-color: var(--line-2); transform: translateY(-4px); background: var(--surface-2); }
.tool.feature { grid-column: span 6; }
.tool.wide { grid-column: span 6; }
.tool-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-12); color: var(--accent); border: 1px solid var(--accent-18);
  margin-bottom: 18px;
}
.tool-ico svg { width: 23px; height: 23px; }
.tool h3 { font-size: 19px; letter-spacing: -.02em; }
.tool p { margin-top: 9px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.tool .more { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; background: none; border: none; padding: 0; cursor: pointer; }
.tool .more svg { width: 13px; height: 13px; transition: transform .3s; }
.tool:hover .more svg { transform: translateX(4px); }
.tool .beta { position: absolute; top: 18px; right: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-18); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.tool-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(420px 180px at 80% 0%, var(--accent-12), transparent 70%); pointer-events: none; }
.tool:hover .tool-glow { opacity: 1; }

/* ============================================================  INDUSTRIES  */
.ind-shell { margin-top: 52px; }
.ind-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.ind-tab {
  position: relative; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--text-2);
  padding: 11px 22px; border-radius: 999px; transition: color .25s; z-index: 1; white-space: nowrap;
}
.ind-tab.on { color: var(--accent-ink); }
.ind-tab .pill { position: absolute; inset: 0; border-radius: 999px; background: var(--accent); z-index: -1; box-shadow: 0 8px 24px -10px var(--accent-glow); }
.ind-panel { margin-top: 36px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: start; }
.ind-aside { position: sticky; top: 100px; }
.ind-aside .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.ind-aside h3 { font-size: clamp(26px, 3vw, 38px); margin-top: 14px; }
.ind-aside p { margin-top: 16px; color: var(--text-2); font-size: 16px; }
.ind-aside .stat { margin-top: 26px; display: flex; gap: 28px; }
.ind-aside .stat .n { font-family: var(--mono); font-weight: 800; font-size: 30px; color: var(--accent); letter-spacing: -.02em; }
.ind-aside .stat .c { font-size: 12.5px; color: var(--text-3); margin-top: 4px; max-width: 130px; }

.qa-list { display: flex; flex-direction: column; gap: 12px; }
.qa {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .3s, background .3s, transform .3s;
}
.qa:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateX(4px); }
.qa-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-3); color: var(--accent); display: grid; place-items: center; }
.qa-ico svg { width: 20px; height: 20px; }
.qa-q { font-size: 14px; color: var(--text-3); line-height: 1.45; }
.qa-a { margin-top: 7px; font-size: 15.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.qa-a b { color: var(--accent); }

/* ============================================================  CASES  */
.cases-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case {
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .35s, transform .35s var(--ease);
}
.case:hover { border-color: var(--line-2); transform: translateY(-4px); }
.case-media { position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface-3), var(--surface)); }
.case-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,11,.9)); }
.case-grid-bg { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px; mask: radial-gradient(60% 60% at 70% 25%, #000, transparent); }
.case-play {
  position: absolute; top: 22px; left: 22px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px var(--accent-glow); transition: transform .3s;
}
.case:hover .case-play { transform: scale(1.08); }
.case-play svg { width: 20px; height: 20px; margin-left: 2px; }
.case-body { position: relative; padding: 26px; }
.case-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; }
.case-num { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-top: 8px; color: var(--accent); }
.case-num.plain { color: var(--text); }
.case-desc { margin-top: 8px; color: var(--text-2); font-size: 14.5px; max-width: 360px; }

/* ============================================================  YCLIENTS  */
.yc-shell { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(150deg, var(--surface-2), var(--bg-2)); padding: clamp(32px, 5vw, 64px); }
.yc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 320px at 92% 8%, var(--accent-12), transparent 62%); }
.yc-grid { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: center; }
.yc-badge { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-18); color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.yc-badge svg { width: 15px; height: 15px; }
.yc-lockup { display: inline-flex; align-items: center; gap: 14px; }
.yc-lockup-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.yc-logo { height: 38px; width: auto; display: block; border-radius: 9px; }
.yc-title { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.03em; margin-top: 20px; }
.yc-title .hl { color: var(--accent); }
.yc-lead { margin-top: 18px; color: var(--text-2); font-size: clamp(16px, 1.5vw, 19px); max-width: 520px; }
.yc-points { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.yc-point { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.yc-point-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-12); color: var(--accent); border: 1px solid var(--accent-18); display: grid; place-items: center; }
.yc-point-ico svg { width: 20px; height: 20px; }
.yc-point-t { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.yc-point-d { margin-top: 3px; color: var(--text-2); font-size: 14px; line-height: 1.5; }

.yc-vis { display: grid; place-items: center; }
.yc-flow { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.yc-node { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.yc-call { display: flex; align-items: center; gap: 12px; padding: 16px; }
.yc-node-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.yc-node-ico svg { width: 21px; height: 21px; }
.yc-node-t { font-weight: 700; font-size: 14.5px; }
.yc-node-s { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-top: 2px; }
.yc-call > div:nth-child(2) { flex: 1; }
.yc-node-live { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-12); display: grid; place-items: center; flex: none; }
.yc-node-live .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 1.8s infinite; }
.yc-link { height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.yc-link span { width: 2px; height: 5px; border-radius: 2px; background: var(--accent); opacity: .35; animation: ycdrop 1.4s ease-in-out infinite; }
.yc-link span:nth-child(2) { animation-delay: .18s; }
.yc-link span:nth-child(3) { animation-delay: .36s; }
@keyframes ycdrop { 0%, 100% { opacity: .25; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(2px); } }
.yc-record { padding: 18px; }
.yc-rec-h { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.yc-rec-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; font-family: var(--sans); }
.yc-rec-name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin-top: 14px; }
.yc-rec-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.yc-rec-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.yc-rec-row span { color: var(--text-3); flex: none; }
.yc-rec-row b { color: var(--text); font-weight: 600; text-align: right; white-space: nowrap; }
.yc-rec-tag { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--accent); font-weight: 600; }

@media (max-width: 980px) { .yc-grid { grid-template-columns: 1fr; } }

.yc-reviews-block { position: relative; margin-top: clamp(34px, 4vw, 50px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--line-2); }
.yc-reviews-head { max-width: 640px; }
.yc-reviews-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 600; }
.yc-reviews-sub { margin-top: 12px; color: var(--text-2); font-size: clamp(15px, 1.3vw, 17px); }
.yc-reviews { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.yc-case { background: var(--bg-2); }
.yc-case-badge { position: absolute; top: 22px; right: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; backdrop-filter: blur(6px); }
.yc-case-badge img { height: 15px; width: auto; display: block; }
@media (max-width: 680px) { .yc-reviews { grid-template-columns: 1fr; } }

/* ============================================================  CTA BAND  */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 76px); border: 1px solid var(--line-2); background: linear-gradient(150deg, var(--surface-2), var(--bg-2)); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 88% 10%, var(--accent-18), transparent 60%); pointer-events: none; z-index: 1; }

/* animated telephony network backdrop */
.cta-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; -webkit-mask: radial-gradient(120% 130% at 82% 12%, #000 30%, transparent 78%); mask: radial-gradient(120% 130% at 82% 12%, #000 30%, transparent 78%); }
.cta-net-links line { stroke: var(--line-2); stroke-width: 1; }
.cta-call { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--accent-glow)); }
@keyframes ctaflow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
.cta-node { fill: var(--accent); }
.cta-node-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ctaping 3s ease-out infinite; }
@keyframes ctaping { 0% { r: 4; opacity: .7; } 70% { r: 15; opacity: 0; } 100% { r: 15; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-call { animation: none !important; opacity: 0; } .cta-node-ring { animation: none; opacity: 0; } }
.cta-band-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 48px); }
.cta-band p { margin-top: 18px; color: var(--text-2); font-size: 17px; max-width: 460px; }
.cta-checks { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.cta-check { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--text-2); }
.cta-check .tick { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-18); color: var(--accent); display: grid; place-items: center; flex: none; }
.cta-check .tick svg { width: 13px; height: 13px; }
.cta-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ============================================================  PRICING  */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 60px); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px 30px 34px;
  box-shadow: var(--shadow-card);
  transition: border-color .28s var(--ease), transform .28s var(--ease);
  overflow: hidden;
}
.plan:hover { border-color: var(--line-2); transform: translateY(-4px); }
.plan-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px 220px at 50% -8%, var(--accent-12), transparent 70%); }
.plan:hover .plan-glow { opacity: 1; }
.plan.popular {
  border-color: var(--accent-30);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 42%);
  box-shadow: 0 0 0 1px var(--accent-18) inset, 0 40px 110px -44px var(--accent-glow), var(--shadow-card);
  transform: translateY(-8px);
}
.plan.popular:hover { transform: translateY(-12px); }
.plan.popular .plan-glow { opacity: 1; }
.plan-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 8px 22px -8px var(--accent-glow);
}
.plan-tier { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.plan-tagline { margin-top: 6px; color: var(--text-3); font-size: 13.5px; min-height: 38px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.plan-price b { font-family: var(--mono); font-weight: 700; font-size: clamp(38px, 4vw, 46px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.plan.popular .plan-price b { color: var(--accent); }
.plan-price .per { color: var(--text-3); font-size: 15px; font-weight: 600; }
.plan-price .per i { font-style: normal; font-size: 13px; }
.plan-includes { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.plan-includes .tick { width: 20px; height: 20px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--accent-18); color: var(--accent); }
.plan-includes .tick svg { width: 12px; height: 12px; }
.plan-cta { width: 100%; margin-top: 22px; }
.plan-caps { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; }
.plan-caps li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.plan-caps li:last-child { border-bottom: 0; padding-bottom: 0; }
.cap-v { font-family: var(--mono); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 46px; }
.plan.popular .cap-v { color: var(--accent); }
.cap-l { color: var(--text-2); }

.pricing-note {
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--text-2); font-size: 14px; line-height: 1.5;
}
.pricing-note svg { width: 20px; height: 20px; flex: none; color: var(--accent); }

.rates { margin-top: clamp(44px, 5vw, 66px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.rates-head { padding: 30px clamp(24px, 3vw, 40px) 6px; }
.rates-head h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; margin-top: 14px; }
.rates-grid { padding: 18px clamp(24px, 3vw, 40px) 8px; }
.rate { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rate:last-child { border-bottom: 0; }
.rate-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent); }
.rate-ico svg { width: 21px; height: 21px; }
.rate-t { font-size: 16px; font-weight: 700; }
.rate-note { margin-top: 4px; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.rate-price { text-align: right; white-space: nowrap; }
.rate-price b { font-family: var(--mono); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.rate-price span { color: var(--text-3); font-size: 13px; margin-left: 2px; }
.rates-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); background: var(--bg-2);
  color: var(--text-2); font-size: 14px;
}

/* ============================================================  FOOTER  */
.footer { border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 72px); padding-block: 56px 40px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.footer-col h2 { font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; font-weight: 700; }
.footer-col a { display: block; color: var(--text-2); font-size: 14px; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-about p { color: var(--text-2); font-size: 14px; margin-top: 16px; max-width: 320px; line-height: 1.6; }
.footer-badges { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-partner { display: inline-flex; align-items: center; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .25s, background .25s; }
.footer-partner:hover { border-color: var(--line-2); background: var(--surface-2); }
.footer-partner img { height: 34px; width: auto; display: block; opacity: .85; }
.footer-partner-pin { padding: 0 12px; }
.footer-partner-pin img { height: 40px; }
.footer-partner:hover img { opacity: 1; }
.footer-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-3); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 52px; text-transform: uppercase; transition: color .25s, border-color .25s; }
a.footer-badge:hover { color: var(--text-2); border-color: var(--line-2); }
.footer-grant { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); max-width: 360px; }
.footer-bot { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-bot .cc { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* ============================================================  MODAL  */
.modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(5,6,8,.7); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.modal {
  width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-pop);
  animation: pop .4s var(--ease-out); position: relative;
}
.modal.video { max-width: 880px; padding: 14px; }
@keyframes pop { from { transform: translateY(16px) scale(.98); } to { transform: none; } }
.modal-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: color .2s, border-color .2s; }
.modal-x:hover { color: var(--text); border-color: var(--line-2); }
.modal h3 { font-size: 24px; }
.modal .lead { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-meta { padding: 14px 10px 6px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.modal-meta .mc { font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.modal-meta .mn { font-weight: 800; font-size: 20px; margin-top: 4px; color: var(--accent); }
.modal-meta .mn.plain { color: var(--text); }

/* ============================================================  RESPONSIVE  */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .dash { margin-top: 10px; }
  .ind-panel { grid-template-columns: 1fr; }
  .ind-aside { position: static; }
  .cta-band-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-cta .nav-login, .nav-cta-btn { display: none; }
  .nav-burger { display: grid; }
  .nav-mobile.open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 82;
    /* Без ограничения высоты нижние пункты уходили за край экрана: у fixed
       нет прокрутки страницы, добраться до них было нельзя. dvh учитывает
       съезжающую панель браузера на мобильных. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    padding: 16px var(--gutter) 22px; box-shadow: var(--shadow-pop);
    animation: navdrop .26s var(--ease-out);
  }
  .tool, .tool.feature, .tool.wide { grid-column: span 6; }
}
@keyframes navdrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plan, .plan.popular { transform: none; }
  .plan:hover, .plan.popular:hover { transform: translateY(-4px); }
  .plan-tagline { min-height: 0; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .cases-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: repeat(6, 1fr); }
  .tool, .tool.feature, .tool.wide { grid-column: span 6; }
  .dash-body { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; }
  .ind-tabs { width: 100%; overflow-x: auto; }
  .rates-head, .rates-grid, .rates-foot { padding-inline: 22px; }
  .rate { grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 4px; }
  .rate-price { grid-column: 2; text-align: left; }
  .rates-foot { flex-direction: column; align-items: flex-start; }
  .rates-foot .btn { width: 100%; }
}

/* ============================================================
   Additions for the static build (not in the design prototype)
   ============================================================ */

/* Client marquee: wordmark fallback so the strip reads correctly even
   before the curated logo PNGs are copied in from the design project.
   JS swaps to .no-img when an <img> fails to load. */
.logo-pill .pill-word {
  display: none;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  color: #4a5058; text-align: center; line-height: 1.15;
}
.logo-pill.no-img img { display: none; }
.logo-pill.no-img .pill-word { display: block; }

/* The prototype set no size for the modal close icon, so the SVG fell back to
   its 300x150 intrinsic box and overflowed the 36px button. */
.modal-x svg { width: 17px; height: 17px; }

/* .case-num had no line-height, so it inherited body's 1.55 — at 44px that is a
   68px gap between lines. Both case labels in the design were short enough to
   stay on one line, so the looseness never showed. Tight leading matches the
   other display type and keeps a two-line label readable. */
.case-num { line-height: 1.08; }

/* Footer links are 32px tall with zero vertical gap, so on a touch screen two
   adjacent links touch and a slightly-off tap lands on the neighbour. WCAG 2.5.8
   (24x24) passes either way; this only widens the target on touch layouts and
   leaves the desktop spacing exactly as designed. */
@media (max-width: 900px) {
  .footer-col a { padding: 10px 0; }
}

/* Native player replaces the YouTube iframe: the design styled only `iframe`,
   so <video> needs the same box. object-fit keeps 16:9 footage from stretching
   if a clip ever ships in another aspect ratio. */
.video-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  background: #000;
  object-fit: contain;
}

/* `hidden` sets display:none only through the UA stylesheet, so the author rule
   `.ind-panel { display: grid }` outranked it and all three industry panels
   rendered stacked. React swapped panels by unmounting them; static markup
   needs this line to hide the inactive ones. */
.ind-panel[hidden] { display: none; }

/* Below ~352px the hero CTA is what pushed the page sideways: «Попробовать 7
   дней бесплатно» needs ~307px with white-space: nowrap, but a 320px screen
   only offers 280px of content width, and `.btn` is nowrap with a fixed height.
   Letting the label wrap (and the button grow) is the only honest fix — clipping
   would cut the call to action. Untouched at 375px and up, where it already fits. */
@media (max-width: 359px) {
  .hero-cta .btn {
    white-space: normal;
    height: auto;
    min-height: var(--bh);
    padding-block: 12px;
    line-height: 1.25;
  }
}

/* Hero dashboard could not shrink below its nowrap content: at 320px the call
   row measured 237px min-content, pushing .panel to 267px inside a 248px box
   and the document 6px wider than the viewport. The name/number already opt
   into text-overflow: ellipsis — they just needed room to do it. A plain `1fr`
   track is `minmax(auto, 1fr)` and refuses to shrink below min-content, so the
   fix has to be on the tracks, not only on min-width of the children.
   Scoped to narrow widths on purpose: at desktop that same auto-minimum is what
   keeps the two hero buttons on one row, so the tracks stay exactly as designed. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); }
  .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-body > .panel,
  .dash-body > div,
  .call,
  .call-name,
  .call-sub,
  .kpi-cell { min-width: 0; }
  .call-meta { flex: 1 1 0; }
}

/* Keyboard focus — the prototype relied on mouse only. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Case cards are real buttons in the static build. */
button.case { font-family: var(--sans); text-align: left; width: 100%; }

/* Marquee respects reduced motion (the prototype animated regardless). */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .wave i, .dash-live .pulse, .yc-node-live .pulse, .yc-link span { animation: none; }
  .marquee { -webkit-mask: none; mask: none; overflow-x: auto; }
}

/* ============================================================
   INNER PAGES (about.html, docs.html)
   Same tokens and components as the landing; only the layouts
   these two pages need are added here.
   ============================================================ */

/* page header: compact version of the hero for inner pages */
.page-head { padding-top: 132px; padding-bottom: clamp(28px, 3vw, 44px); }
.page-head h1 {
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -.03em; line-height: 1.02;
  margin-top: 20px; max-width: 18ch;
  /* «конфиденциальности» одним словом шире экрана 320px и распирало страницу.
     hyphens даёт аккуратный перенос, break-word — страховка, если словарь
     переносов для языка недоступен. */
  hyphens: auto; overflow-wrap: break-word;
}
.page-head h1 .hl { color: var(--accent); }
.page-head .lead {
  margin-top: 22px; max-width: 62ch;
  color: var(--text-2); font-size: clamp(16px, 1.5vw, 19px);
}
.page-head .lead b { color: var(--text); font-weight: 700; }

/* breadcrumb */
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
.crumbs a { color: var(--text-3); transition: color .2s; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: .5; }

/* stat strip */
.stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; margin-top: clamp(30px, 4vw, 46px);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.stat-cell { background: var(--surface); padding: 22px 24px; }
.stat-cell .n { font-family: var(--mono); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; color: var(--accent); }
.stat-cell .c { margin-top: 6px; font-size: 13px; color: var(--text-3); line-height: 1.45; }

/* prose blocks */
.prose { max-width: 68ch; }
.dtable + .prose, .callout + .prose, .symptom + .prose { margin-top: 22px; }
.prose p { margin-top: 16px; color: var(--text-2); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.62; }
.prose p:first-child { margin-top: 0; }
.prose p b, .prose p strong { color: var(--text); font-weight: 650; }
.prose h3 { font-size: clamp(19px, 2vw, 23px); margin-top: 34px; letter-spacing: -.02em; }
.prose h4 { font-size: 16px; font-weight: 700; margin-top: 26px; }
.prose ul, .prose ol { margin: 16px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* Маркер позиционируется абсолютно, а НЕ через grid на самом <li>.
   При display:grid каждый потомок <li> становится ячейкой, поэтому
   пункт вида «<b>Заголовок</b> — пояснение» разрывало на две строки
   сетки, и пояснение верстало в колонку шириной 22px по слову в строку. */
.prose li {
  position: relative; padding-left: 34px;
  color: var(--text-2); font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.55;
}
.prose li::before {
  content: ""; position: absolute; left: 9px; top: .6em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); opacity: .8;
}
.prose ol { counter-reset: n; }
.prose ol li::before {
  counter-increment: n; content: counter(n);
  left: 0; top: .18em; width: 24px; height: auto;
  background: none; border-radius: 0; opacity: 1;
  font-family: var(--mono); font-size: 13px; color: var(--accent); text-align: center;
}
/* Многоколоночный поток, а не grid: в grid высота ряда равна высоте самого
   высокого пункта, и под коротким пунктом появлялась дыра. Здесь пункты
   перетекают сами, а при нехватке ширины колонка остаётся одна. */
.prose ul.two-col { display: block; columns: 258px 2; column-gap: 34px; }
.prose ul.two-col li { break-inside: avoid; margin-bottom: 11px; }
.prose ul.two-col li:last-child { margin-bottom: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
/* Длинные значения (адреса, эндпоинты) обязаны переноситься: с nowrap
   строка вида crm.hotlead.io/api/v1/who-am-i распирала страницу на 320px. */
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .12em .42em; border-radius: 6px; color: var(--text);
  overflow-wrap: anywhere;
}
/* То же для голых URL в тексте — в политике они длинные и без пробелов. */
.prose p, .prose li, .prose dd { overflow-wrap: anywhere; }

/* question cards (about: «на какие вопросы отвечаем») */
.qcards { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.qcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.qcard:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-3px); }
.qcard .num { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 3px; }
.qcard p { font-size: 15.5px; color: var(--text); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }

/* scheme cards (about: варианты интеграции) */
/* align-items: stretch (по умолчанию) — карточки одинаковой высоты.
   h3 занимает два ряда даже при коротком заголовке, поэтому абзацы во всех
   карточках начинаются на одной линии, а .tags прижаты к низу через auto —
   так списки тоже выровнены между собой. */
.schemes { margin-top: clamp(28px, 3vw, 42px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.scheme {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.scheme:hover { border-color: var(--line-2); transform: translateY(-4px); }
.scheme.best { border-color: var(--accent-30); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 46%); }
.scheme-n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.scheme h3 { font-size: 20px; margin-top: 12px; letter-spacing: -.02em; min-height: 2.08em; }
.scheme p { margin-top: 12px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.scheme .tags { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.scheme .tag-row { display: grid; grid-template-columns: 18px 1fr; gap: 9px; font-size: 13.5px; line-height: 1.4; }
.scheme .tag-row svg { width: 15px; height: 15px; margin-top: 2px; }
.scheme .yes { color: var(--text-2); }
.scheme .yes svg { color: var(--accent); }
.scheme .no { color: var(--text-3); }
.scheme .no svg { color: var(--text-3); }

/* office cards */
.offices { margin-top: clamp(26px, 3vw, 38px); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.office { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.office .city { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.office .role { margin-top: 6px; font-size: 13.5px; color: var(--text-3); line-height: 1.45; }

/* ---------- docs page: sidebar + content ---------- */
.docs-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.docs-nav { position: sticky; top: 96px; }
.docs-nav .h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin-bottom: 14px;
}
.docs-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.docs-nav a {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  padding: 9px 12px 9px 10px; border-radius: 10px;
  font-size: 14px; color: var(--text-2); line-height: 1.35;
  transition: color .2s, background .2s;
}
.docs-nav a:hover { color: var(--text); background: var(--surface); }
.docs-nav a .n { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); padding-top: 2px; }
.docs-nav a.on { color: var(--text); background: var(--surface-2); font-weight: 650; }
.docs-nav a.on .n { color: var(--accent); }

.doc-sec { padding-top: clamp(38px, 4.5vw, 62px); scroll-margin-top: 92px; }
.doc-sec:first-child { padding-top: 0; }
.doc-sec > h2 {
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
}
.doc-sec > h2 .n { font-family: var(--mono); font-size: 13px; color: var(--accent); flex: none; }

/* reference card of key values */
.refcard {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); border-radius: var(--r-lg);
  padding: 24px clamp(20px, 3vw, 28px) 20px; margin-top: 28px;
}
.refcard .h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.refgrid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 18px 26px; }
.refgrid dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 650; }
.refgrid dd { margin: 5px 0 0; font-family: var(--mono); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* callouts */
.callout { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-md); font-size: 15px; line-height: 1.55; }
.callout > :last-child { margin-bottom: 0; }
.callout p { margin: 0; color: var(--text-2); }
.callout p + p { margin-top: 10px; }
.callout .lbl { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.callout a {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.callout a:hover { text-decoration-thickness: 2px; }
.callout.info { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.callout.info .lbl { color: var(--accent); }
.callout.warn { background: rgba(255,210,74,.05); border: 1px solid rgba(255,210,74,.16); border-left: 3px solid #ffd24a; }
.callout.warn .lbl { color: #ffd24a; }

/* symptom block (диагностика) */
.symptom { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.symptom > h3 { position: relative; margin: 0 0 4px; padding-left: 21px; font-size: 16px; letter-spacing: -.01em; }
.symptom > h3::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 9px; height: 9px; border-radius: 50%; background: #e4574c;
}
.symptom ol { margin-top: 12px; }

/* data table */
.dtable { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.dtable table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--surface); }
.dtable th, .dtable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.dtable thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); background: var(--bg-2); white-space: nowrap; font-weight: 700;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td b, .dtable th b { color: var(--text); font-weight: 650; }
.dtable td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }

@media (max-width: 900px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .docs-nav ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 8px; }
  .docs-nav a { padding-block: 12px; }
  .page-head { padding-top: 104px; }
}

/* доступное скрытие — для caption таблиц и прочих подписей для скринридера */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* «Шаг N» над заголовком шага */
.mono-step {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: .62em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* сноска об источниках в конце документации */
.doc-foot {
  margin-top: clamp(38px, 4.5vw, 60px); padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-3); line-height: 1.6;
}

/* ---------- «О нас»: короткая страница в центрированной колонке ----------
   Узкие блоки (.section-head 760px, .prose 68ch) прижаты к левому краю и на
   широком экране оставляли пустой всю правую половину. Колонка центрируется,
   а текст внутри остаётся выключен влево: центрировать длинный абзац нельзя —
   рваный левый край замедляет чтение. Центрируются только короткие заголовки. */
.page-head.center { text-align: center; }
.page-head.center .crumbs { justify-content: center; }
.page-head.center h1 { max-width: 20ch; margin-inline: auto; }
.page-head.center .lead { margin-inline: auto; }
.page-head.center .stats-strip { max-width: 940px; margin-inline: auto; }

.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.center .kicker-num { display: block; }

.mid { max-width: 880px; margin-inline: auto; }
.mid > .prose { margin-inline: auto; }
.mid > .callout { max-width: none; }

/* Нечётное число ячеек в двухколоночной сетке оставляло пустую клетку —
   она видна как серый прямоугольник, потому что фон полосы это разделители
   (--line), а не фон карточек. На узких экранах ставим одну колонку. */
@media (max-width: 560px) {
  .stats-strip { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Юридические документы (оферта, политика) ----------
   Текст переносится дословно, меняется только подача: номер пункта
   выносится в висячий отступ моноширинным акцентом, чтобы структуру
   договора можно было просматривать глазами, не вчитываясь. */
.legal p.cl { position: relative; padding-left: 54px; margin-top: 13px; }
.legal p.cl > .n {
  position: absolute; left: 0; top: .18em;
  font-family: var(--mono); font-size: 12.5px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.legal h2 { margin-top: 34px; font-size: clamp(19px, 2vw, 23px); }
.legal h3 { margin-top: 30px; }
.legal .prose { max-width: 74ch; }

/* Единственная кнопка поддержки в подвале — .footer-col a задаёт блочные
   ссылки-пункты, кнопке нужен свой режим отображения и отступ снизу. */
/* Селектор с .footer-col обязателен: правило `.footer-col a` имеет
   специфичность (0,1,1) и перебивает и `.btn-primary`, и `.footer-support`
   (обе 0,1,0). Из-за этого текст кнопки оставался цветом --text-2 на
   акцентном фоне — контраст 1.11:1, надпись практически не читалась. */
.footer-col a.footer-support { display: inline-flex; margin: 4px 0 14px; padding: 0 16px; color: var(--accent-ink); }
.footer-col a.footer-support:hover,
.footer-col a.footer-support:focus-visible { color: var(--accent-ink); }

/* ---------- Баннер cookie ----------
   Не модальный: не перекрывает контент и не блокирует чтение — по 152-ФЗ
   достаточно уведомить и дать выбор. Появляется снизу, выбор запоминается. */
.cookie {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 18px; z-index: 80;
  max-width: 760px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  animation: cookieIn .45s var(--ease-out);
}
@keyframes cookieIn { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

.cookie p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.cookie a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie .btn { --bh: 40px; padding: 0 18px; font-size: 14px; }

@media (max-width: 620px) {
  .cookie { grid-template-columns: minmax(0, 1fr); bottom: 12px; padding: 16px 18px; }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie .btn { width: 100%; }
}

/* Страховка: класс .ic сам по себе размера не задавал — иконки получали его
   только от правил родителя (.tool-ico svg, .chip svg и т.п.). Иконка в контексте
   без такого правила раскрывалась бы до собственных 300×150. Значение в em
   и низкая специфичность: все существующие правила (0,1,1) его перебивают. */
.ic { width: 1em; height: 1em; flex: none; }

/* ---------- Выпадающее меню «Возможности» ----------
   Открывается наведением И щелчком: наведение — для мыши, щелчок и фокус —
   для клавиатуры и тач-экранов, где hover не существует. */
.nav-item { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
}
.nav-caret { width: 9px; height: 9px; transform: rotate(90deg); transition: transform .25s var(--ease); opacity: .7; }
.nav-item.open .nav-caret { transform: rotate(-90deg); }
.nav-item.open > .nav-toggle { color: var(--text); background: var(--surface-2); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 70;
  width: 330px; padding: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.nav-item.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav-menu { transition: none; } }

.nav-menu-item {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center;
  padding: 9px 10px; border-radius: 10px; transition: background .2s;
}
.nav-menu-item:hover, .nav-menu-item:focus-visible { background: var(--surface-2); }
.nav-menu-item[aria-current="page"] { background: var(--accent-soft); }
.nm-ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--surface-3); color: var(--accent);
}
.nm-ico svg { width: 17px; height: 17px; }
.nav-menu-item b { display: block; font-size: 14px; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.nav-menu-item em { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: var(--text-3); line-height: 1.35; }
.nav-menu-all {
  margin-top: 4px; padding: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); text-align: center;
  border-radius: 0 0 10px 10px; transition: background .2s;
}
.nav-menu-all:hover { background: var(--surface-2); }

/* заголовок группы и вложенные пункты в мобильном меню */
.m-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
  padding: 14px 0 6px;
}
.m-link.m-sub { padding-left: 14px; }

/* Пока открыто мобильное меню, баннер cookie не должен его перекрывать. */
body.nav-open .cookie { display: none; }

/* Ссылка «к содержимому»: WCAG 2.4.1 — с клавиатуры можно пропустить
   шапку и попасть сразу в контент. Видна только при фокусе. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 11px 18px; border-radius: 0 0 10px 10px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Стоп-кадр на карточке кейса ----------
   Раньше фоном был абстрактный градиент, и было непонятно, что за карточкой
   видео. Теперь там реальный кадр из ролика, затемнённый градиентом:
   снизу почти непрозрачно, потому что там лежит текст карточки.
   alt="" + role="presentation" — кадр декоративный, содержание дублируется
   подписью рядом, скринридеру он не нужен. */
.case-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .42;
  filter: saturate(.9) contrast(1.05);
  transition: opacity .45s var(--ease), transform .7s var(--ease), filter .45s;
}
.case:hover .case-still,
.case:focus-visible .case-still { opacity: .6; transform: scale(1.045); filter: saturate(1) contrast(1.05); }

/* сетка поверх фото мешает — гасим её, она была нужна пустому градиенту */
.case-media:has(.case-still) .case-grid-bg { opacity: .16; }

/* затемнение: сверху лёгкое (виден кадр), снизу плотное (читается текст) */
.case-media:has(.case-still)::after {
  background: linear-gradient(180deg,
    rgba(8, 9, 11, .30) 0%,
    rgba(8, 9, 11, .58) 38%,
    rgba(8, 9, 11, .88) 68%,
    rgba(8, 9, 11, .96) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .case:hover .case-still, .case:focus-visible .case-still { transform: none; }
}

/* ---------- YCLIENTS: смена карточки записи ----------
   Звонок мигает первым, карточка подменяется следом — читается как
   причинно-следственная связь, а не как две независимые анимации. */
.yc-call.flash { animation: ycFlash .7s var(--ease); }
@keyframes ycFlash {
  0%   { border-color: var(--line); }
  35%  { border-color: var(--accent-30); box-shadow: 0 0 0 4px var(--accent-soft); }
  100% { border-color: var(--line); box-shadow: none; }
}
.yc-record { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.yc-record.swap { opacity: 0; transform: translateY(8px); }
.yc-rec-tag.cold { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .yc-call.flash { animation: none; }
  .yc-record, .yc-record.swap { transition: none; opacity: 1; transform: none; }
}