@font-face { font-family: "Gilroy"; src: url("/new2/assets/gilroy-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/new2/assets/gilroy-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/new2/assets/gilroy-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/new2/assets/gilroy-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("/new2/assets/gilroy-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --blue: #00a6f4;
  --blue-dark: #0088dc;
  --indigo: #5865f2;
  --violet: #7c3aed;
  --ink: #101820;
  --muted: #687680;
  --surface: #ffffff;
  --surface-soft: #f5f9fc;
  --line: #dfe8ee;
  --green: #17a86b;
  --red: #e05461;
  --yellow: #f0b429;
  --shadow: 0 24px 80px rgba(29, 66, 97, .14);
  --shadow-soft: 0 12px 40px rgba(29, 66, 97, .09);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 3%, rgba(0, 166, 244, .12), transparent 26%),
    radial-gradient(circle at 88% 13%, rgba(124, 58, 237, .08), transparent 24%),
    #fbfdff;
  font-family: "Gilroy", Inter, Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { line-height: 1.65; }
h1, h2, h3 { font-family: "Gilroy", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.narrow { width: min(calc(100% - 40px), 860px); }
.section { padding: 112px 0; position: relative; }
.section-shell { position: relative; }
.section-heading { text-align: center; max-width: 820px; margin: 0 auto 54px; }
.section-heading h2, .rnp-copy h2, .security-copy h2, .faq-intro h2, .roadmap-copy h2, .final-content h2 {
  margin: 10px 0 18px;
  font-size: clamp(36px, 4.1vw, 58px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.section-heading p, .rnp-copy > p, .security-copy > p, .faq-intro > p, .roadmap-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.section-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.section-kicker--light { color: rgba(255,255,255,.78); }
.section-kicker--light::before { background: rgba(255,255,255,.8); }
.gradient-text {
  background: linear-gradient(115deg, var(--blue) 0%, #3477f1 42%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-glow { position: fixed; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .12; z-index: -1; transform: translateZ(0); will-change: transform; contain: paint; }
.page-glow--one { width: 420px; height: 420px; background: #00a6f4; left: -240px; top: 42vh; }
.page-glow--two { width: 360px; height: 360px; background: #8a4fff; right: -220px; top: 68vh; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 80;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, background .25s, backdrop-filter .25s, border-color .25s;
  transform: translateZ(0);
  will-change: transform;
}
.site-header.is-scrolled { background: rgba(255,255,255,.9); border-bottom-color: rgba(223, 232, 238, .72); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 8px 30px rgba(28,57,80,.08); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { width: 116px; display: block; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; gap: 30px; align-items: center; }
.desktop-nav a, .text-link { color: #42515b; font-size: 14px; font-weight: 650; transition: color .2s; }
.desktop-nav a:hover, .text-link:hover { color: var(--blue-dark); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: white; padding: 11px; }
.menu-toggle span { display: block; width: 100%; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--ink); }
.mobile-menu { display: none; padding: 12px 20px 22px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
.mobile-menu a { display: block; padding: 11px 4px; font-weight: 650; color: #40515c; }

.button {
  appearance: none; border: 0; border-radius: 14px; padding: 13px 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 750; letter-spacing: -.01em; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 19px; height: 19px; }
.button--small { padding: 11px 17px; border-radius: 12px; font-size: 14px; }
.button--large { min-height: 56px; padding: 16px 25px; border-radius: 17px; font-size: 16px; }
.button--primary { color: #fff; background: linear-gradient(115deg, #00a6f4, #397cf1 56%, #6559ee); box-shadow: 0 12px 30px rgba(0, 142, 222, .22); }
.button--primary:hover { box-shadow: 0 17px 38px rgba(0, 142, 222, .3); }
.button--secondary { color: #283944; background: rgba(255,255,255,.85); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(30,65,90,.06); }
.button--secondary:hover { border-color: #b5d6e9; background: white; }
.button--white { color: #0874b0; background: #fff; box-shadow: 0 16px 40px rgba(1, 63, 105, .22); }
.button--glass { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.button-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,166,244,.1); color: var(--blue-dark); }
.text-button, .inline-link, .footer-link { border: 0; background: transparent; padding: 0; color: var(--blue-dark); font-weight: 750; display: inline-flex; align-items: center; gap: 8px; }
.text-button:hover, .inline-link:hover { color: var(--violet); }
.text-button svg { width: 18px; }

.hero { padding: 104px 0 78px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 850px; z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,166,244,.16), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(126,69,255,.13), transparent 26%),
    linear-gradient(180deg, #f8fcff 0%, rgba(248,252,255,0) 100%);
}
.hero::after { content: ""; position: absolute; left: 50%; top: 120px; width: min(1500px, 100%); height: 780px; transform: translateX(-50%); background-image: linear-gradient(rgba(0,166,244,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,166,244,.12) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 72% 78%, #000 48%, transparent 88%); -webkit-mask-image: radial-gradient(ellipse 72% 78%, #000 48%, transparent 88%); z-index: -1; }
.hero-copy { text-align: center; max-width: 950px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(0,166,244,.2); background: rgba(255,255,255,.66); border-radius: 999px; color: #40525d; font-size: 13px; font-weight: 700; backdrop-filter: blur(12px); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #1fc779; box-shadow: 0 0 0 5px rgba(31,199,121,.12); }
.eyebrow-wb { width: 17px; height: 17px; display: block; border-radius: 5px; flex: 0 0 auto; }
.wb-word { background: linear-gradient(90deg, #6f01fb, #ff49d7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 { margin: 24px auto 24px; max-width: 980px; font-size: 54px; line-height: 1.08; letter-spacing: -.02em; }
.hero-lead { max-width: 790px; margin: 0 auto; color: #5d6d78; font-size: clamp(18px, 2vw, 21px); line-height: 1.58; }
.hero-actions { margin: 34px 0 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.hero-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; color: #61717b; font-size: 13px; font-weight: 650; }
.hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes svg { color: var(--green); width: 17px; }

.hero-visual { margin-top: 60px; position: relative; }
.product-window { position: relative; border: 1px solid rgba(173, 205, 224, .55); border-radius: 22px; background: white; box-shadow: 0 30px 80px rgba(26,70,102,.16); overflow: hidden; }
.screenshot-scroll { width: 100%; aspect-ratio: 2560/1440; overflow: hidden; background: #f7f9fb; }
.screenshot-scroll img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.selection-box { position: absolute; left: 43.7%; top: 28.4%; width: 21.1%; height: 5.7%; border: 2px solid #1597ff; box-shadow: 0 0 0 3px rgba(21,151,255,.1); animation: selectPulse 3.5s ease-in-out infinite; }
.screenshot-scroll { cursor: zoom-in; }
.image-lightbox { padding: 24px; }
.image-lightbox .lightbox-image { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: min(100%, 1680px); max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 100px rgba(0,0,0,.5); cursor: zoom-out; }
.floating-card { position: absolute; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 17px; background: rgba(255,255,255,.93); border: 1px solid rgba(211,226,235,.9); box-shadow: 0 16px 45px rgba(33,73,100,.16); backdrop-filter: blur(15px); transition: transform .3s ease; white-space: nowrap; transform: rotate(var(--rot,0deg)) scale(var(--pk,1)); }
/* «Летящие» плашки в боковых полях у заголовка — слева и справа, вразнобой. */
.floating-card--profit   { left: 2%;   top: 96px;  --rot: -6deg; }
.floating-card--unit     { left: 6.5%; top: 214px; --rot: 4deg; }
.floating-card--planfact { left: 1%;   top: 332px; --rot: -5deg; }
.floating-card--comments { left: 7%;   top: 450px; --rot: 6deg; }
.floating-card--spp      { right: 3%;  top: 150px; --rot: 5deg; }
.floating-card--stock    { right: 6.5%;top: 268px; --rot: -4deg; }
.floating-card--roi      { right: 1.5%;top: 386px; --rot: 7deg; }
.floating-card--time     { right: 6%;  top: 468px; --rot: -6deg; }
.floating-card:hover { transform: rotate(0deg) scale(calc(var(--pk,1) * 1.04)); }
/* Слой плашек; их размер зависит от ширины экрана (уже окно — мельче плашки). */
.hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; --pk: 1; }
.hero-fx .floating-card { pointer-events: auto; }
@media (max-width: 1750px) { .hero-fx { --pk: 1; } }
@media (max-width: 1550px) { .hero-fx { --pk: .96; } }
@media (max-width: 1450px) { .hero-fx { --pk: .86; } }
.float-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue-dark); background: rgba(0,166,244,.1); border-radius: 11px; }
.floating-card span { display: block; color: #74828b; font-size: 11px; }
.floating-card strong { font-size: 14px; }
.floating-card em { color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; padding: 4px 7px; border-radius: 8px; background: rgba(23,168,107,.1); }
.floating-card em.is-down { color: #e0466e; background: rgba(224,70,110,.1); }
.visual-orbit { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .24; z-index: -1; }
.orbit-one { width: 220px; height: 220px; background: #00a6f4; left: -80px; top: -40px; }
.orbit-two { width: 190px; height: 190px; background: #7c3aed; right: -50px; bottom: -20px; }
.stats-strip { margin-top: 76px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-strip > div { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; border-right: 1px solid var(--line); }
.stats-strip > div:last-child { border-right: 0; }
.stats-strip strong { font-size: 28px; letter-spacing: -.04em; }
.stats-strip span { color: var(--muted); font-size: 13px; margin-top: 7px; }
.stats-strip .stat-feature { font-size: clamp(15px, 1.35vw, 17px); font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }

.video-section { background: linear-gradient(180deg, rgba(244,249,253,.6), #fff); }
.video-card { position: relative; display: block; width: 100%; aspect-ratio: 16/8.3; border: 1px solid rgba(188,209,222,.8); border-radius: 30px; overflow: hidden; padding: 0; background: #0b1721; box-shadow: var(--shadow); color: white; text-align: left; }
.video-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.04); filter: saturate(.9) brightness(.82); transition: transform .65s ease, filter .65s ease; }
.video-card:hover img { transform: scale(1.07); filter: saturate(1) brightness(.74); }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,22,38,.08), rgba(0,20,35,.72)); }
.video-topline { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 750; }
.video-topline span { background: rgba(7,23,35,.45); border: 1px solid rgba(255,255,255,.17); border-radius: 999px; padding: 8px 12px; backdrop-filter: blur(12px); }
.video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.93); color: var(--blue-dark); display: grid; place-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.26); transition: transform .25s; }
.video-card:hover .video-play { transform: translate(-50%,-50%) scale(1.08); }
.video-play svg { width: 34px; height: 34px; margin-left: 3px; }
.video-caption { position: absolute; left: 32px; bottom: 28px; }
.video-caption span { display: block; opacity: .76; font-size: 13px; margin-bottom: 6px; }
.video-caption strong { font-size: clamp(20px, 3vw, 34px); letter-spacing: -.035em; }
.video-footer { display: flex; justify-content: center; align-items: center; gap: 18px; padding-top: 22px; color: var(--muted); }

.comparison { background: #fff; padding-top: 0; }
.comparison-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.comparison-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--line); }
.comparison-card--muted { background: linear-gradient(180deg, #fbfdff, #f5f8fa); }
.comparison-card--accent { color: #fff; background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.18), transparent 24%), linear-gradient(145deg, #0479c0, #00a6f4 44%, #6559ee 100%); border-color: transparent; box-shadow: 0 26px 60px rgba(0,126,206,.22); transform: translateY(-10px); }
.comparison-label { display: inline-flex; padding: 7px 11px; border-radius: 999px; color: #647581; background: rgba(99,119,132,.08); font-size: 12px; font-weight: 800; }
.comparison-card--accent .comparison-label { color: #fff; background: rgba(255,255,255,.16); }
.comparison-icon { margin: 26px 0 18px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: var(--blue-dark); background: rgba(0,166,244,.1); }
.comparison-card--accent .comparison-icon { color: #fff; background: rgba(255,255,255,.15); }
.comparison-card h3 { margin: 0 0 18px; font-size: 24px; letter-spacing: -.03em; }
.comparison-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.comparison-card li { position: relative; padding-left: 22px; color: #61717c; line-height: 1.5; font-size: 14px; }
.comparison-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #c9d6de; }
.comparison-card--accent li { color: rgba(255,255,255,.88); }
.comparison-card--accent li::before { background: #9af1d0; box-shadow: 0 0 0 4px rgba(154,241,208,.12); }
.comparison-result { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; font-weight: 800; font-size: 13px; }

/* --- Сравнительная таблица «Почему Qbiki» --- */
.compare-table-wrap { max-width: 820px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); overflow-x: auto; }
.compare-table { width: 100%; min-width: 480px; border-collapse: collapse; background: #fff; }
.compare-table th, .compare-table td { padding: 17px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 16px; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { width: 165px; }
.compare-table thead th { font-size: 15px; font-weight: 800; color: #647581; background: #f6f9fb; }
.compare-table tbody td:first-child, .compare-table thead th:first-child { text-align: left; font-weight: 650; color: var(--ink); font-size: 17px; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .col-qbiki { background: rgba(0,166,244,.06); }
.compare-table thead th.col-qbiki { background: rgba(0,166,244,.1); color: var(--blue-dark); }
.compare-table .mk { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.compare-table .mk svg { width: 15px; height: 15px; stroke-width: 3; }
.compare-table .mk-yes { background: var(--green); }
.compare-table .mk-no { background: #e0616e; }

.rnp-section { background: linear-gradient(180deg, #f6fbff 0%, #fff 100%); overflow: hidden; }
.rnp-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: center; }
.rnp-copy h2 { max-width: 500px; }
.rnp-points { display: grid; gap: 9px; margin: 30px 0; }
.rnp-point { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 14px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 15px; transition: .22s ease; }
.rnp-point:hover, .rnp-point.is-active { background: white; border-color: #dceaf2; box-shadow: var(--shadow-soft); transform: translateX(5px); }
.rnp-point > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #ecf7fc; color: var(--blue-dark); font-size: 12px; font-weight: 850; }
.rnp-point strong, .rnp-point small { display: block; }
.rnp-point strong { margin-bottom: 3px; }
.rnp-point small { color: var(--muted); }
.rnp-demo { position: relative; }
.rnp-screen { position: relative; aspect-ratio: 1.04/1; border-radius: 26px; overflow: hidden; border: 1px solid #dbe8ef; background: white; box-shadow: var(--shadow); }
.rnp-screen img { width: 165%; max-width: none; height: 100%; object-fit: cover; object-position: left top; transform: scale(1.15); transform-origin: left top; }
.rnp-highlight { display: none; position: absolute; border: 2px solid #1398f8; background: rgba(19,152,248,.07); border-radius: 7px; opacity: 0; transform: scale(.98); transition: opacity .25s, transform .25s; box-shadow: 0 0 0 4px rgba(19,152,248,.1); }
.rnp-highlight.is-visible { opacity: 1; transform: scale(1); }
.rnp-highlight--profit { left: 45%; top: 88%; width: 55%; height: 3%; }
.rnp-highlight--economy { left: 20%; top: 31%; width: 80%; height: 41%; }
.rnp-highlight--custom { left: 4%; top: 4%; width: 65%; height: 60%; }
.rnp-highlight--team { left: 1%; top: 10%; width: 18%; height: 51%; }
.rnp-description { position: absolute; left: 34px; right: 34px; bottom: -42px; display: flex; align-items: center; gap: 15px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.95); border: 1px solid #dce8ef; box-shadow: 0 18px 44px rgba(27,67,95,.16); backdrop-filter: blur(14px); }
.rnp-desc-icon { width: 42px; height: 42px; border-radius: 13px; background: rgba(0,166,244,.1); color: var(--blue-dark); display: grid; place-items: center; flex: 0 0 auto; }
.rnp-description strong { font-size: 15px; }
.rnp-description p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.rnp-cards { display: none; }

.advantages { background: #fff; }
.advantages-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.advantage-card { min-height: 245px; padding: 27px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f9fcfe); transition: transform .25s, box-shadow .25s, border-color .25s; }
.advantage-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); border-color: #c8dfec; }
.advantage-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--blue-dark); background: linear-gradient(145deg, rgba(0,166,244,.13), rgba(124,58,237,.08)); }
.advantage-card h3 { margin: 22px 0 10px; font-size: 21px; letter-spacing: -.025em; }
.advantage-card p { margin: 0; color: var(--muted); font-size: 14px; }

.morning-section { background: linear-gradient(180deg, #f4f9fd 0%, #fff 100%); }
.morning-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.morning-card { position: relative; overflow: hidden; border-radius: 26px; padding: 28px; border: 1px solid var(--line); background: white; }
.morning-card--old { background: linear-gradient(180deg,#fbfcfd,#f4f7f9); }
.morning-card--new { color: white; border-color: transparent; background: linear-gradient(150deg, #046baf, #009de6 44%, #5c59e9); box-shadow: 0 28px 70px rgba(0,128,203,.2); }
.morning-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,.14); filter: blur(45px); right: -80px; top: -100px; }
.morning-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--line); position: relative; }
.morning-card--new .morning-head { border-color: rgba(255,255,255,.22); }
.morning-head span { font-size: 22px; font-weight: 820; }
.morning-head strong { font-size: 12px; padding: 7px 10px; border-radius: 999px; color: #6f7b84; background: rgba(105,120,130,.08); }
.morning-card--new .morning-head strong { color: #fff; background: rgba(255,255,255,.15); }
.timeline { display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 48px; top: 10px; bottom: 10px; width: 1px; background: #dce6ec; }
.morning-card--new .timeline::before { background: rgba(255,255,255,.24); }
.timeline div { display: grid; grid-template-columns: 78px 1fr; min-height: 52px; position: relative; align-items: start; }
.timeline div::before { content: ""; position: absolute; left: 44px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #c4d2da; box-shadow: 0 0 0 5px #fff; }
.morning-card--old .timeline div:nth-child(3)::before, .morning-card--old .timeline div:nth-child(4)::before { background: #ef8d95; }
.morning-card--new .timeline div::before { background: #a6f2d0; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.timeline time { color: #87949c; font-size: 12px; font-weight: 760; }
.morning-card--new .timeline time { color: rgba(255,255,255,.65); }
.timeline p { margin: -2px 0 0; font-size: 14px; color: #53646f; }
.morning-card--new .timeline p { color: rgba(255,255,255,.88); }
.morning-note { margin-top: 22px; padding: 17px 22px; border-radius: 16px; background: white; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 12px; color: #42535e; box-shadow: var(--shadow-soft); }
.morning-note svg { color: var(--blue-dark); flex: 0 0 auto; }

.modules { background: #fff; }
.modules-shell { border-radius: 30px; border: 1px solid var(--line); background: #f8fbfd; box-shadow: var(--shadow-soft); overflow: hidden; }
.modules-tabs { display: flex; gap: 5px; padding: 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); overflow-x: auto; scrollbar-width: none; }
.modules-tabs::-webkit-scrollbar { display: none; }
.module-tab { white-space: nowrap; border: 0; border-radius: 12px; padding: 12px 18px; color: #697982; background: transparent; font-weight: 750; }
.module-tab.is-active { color: white; background: linear-gradient(110deg,var(--blue),#5870ed); box-shadow: 0 9px 22px rgba(0,149,230,.18); }
.module-content { min-height: 520px; display: grid; grid-template-columns: .74fr 1.26fr; gap: 28px; padding: 34px; }
.module-copy { padding: 12px 0 0 6px; }
.module-number { color: var(--blue-dark); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.module-copy h3 { margin: 12px 0 15px; font-size: 34px; letter-spacing: -.04em; line-height: 1.1; }
.module-copy p { color: var(--muted); }
.module-copy ul { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 13px; }
.module-copy li { display: flex; gap: 10px; align-items: flex-start; color: #42545e; font-size: 14px; }
.module-copy li svg { width: 18px; color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.module-preview { position: relative; min-height: 450px; }
.mock-app { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .28s, transform .28s; border-radius: 22px; border: 1px solid #d9e7ef; background: white; box-shadow: 0 18px 45px rgba(38,73,98,.12); overflow: hidden; padding: 22px; }
.mock-app.is-active { opacity: 1; pointer-events: auto; transform: none; }
.mock-app--rnp { padding: 0; }
.mock-app--rnp img { width: 140%; max-width: none; height: 100%; object-fit: cover; object-position: top left; }
.mock-header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8eef2; font-weight: 800; }
.mock-header button { border: 0; color: white; background: var(--blue); border-radius: 9px; padding: 8px 11px; font-size: 11px; font-weight: 750; }
.metric-row, .buyout-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0; }
.metric-row > div, .buyout-stats > div { border-radius: 12px; background: #f4f8fb; padding: 14px; }
.metric-row small, .buyout-stats small { display: block; color: #82909a; font-size: 10px; }
.metric-row strong, .buyout-stats strong { display: block; margin-top: 7px; font-size: 16px; }
.mock-table { border: 1px solid #e3ebf0; border-radius: 12px; overflow: hidden; }
.mock-tr { min-height: 54px; display: grid; grid-template-columns: 1.35fr repeat(3,1fr); align-items: center; gap: 10px; padding: 0 13px; border-top: 1px solid #e8eef2; font-size: 11px; }
.mock-tr:first-child { border-top: 0; }
.mock-th { color: #7d8c95; background: #f8fafb; font-weight: 750; min-height: 42px; }
.mock-tr span:last-child { position: relative; }
.mock-tr b { display: block; height: 5px; margin-bottom: 5px; border-radius: 5px; background: linear-gradient(90deg,var(--blue),#5e65ed); }
.mock-tr em { font-style: normal; border-radius: 7px; padding: 5px 7px; background: rgba(0,166,244,.08); color: var(--blue-dark); }
.mock-pills { display: flex; gap: 5px; }
.mock-pills i { font-style: normal; font-size: 10px; padding: 5px 8px; border-radius: 7px; background: #eef4f7; }
.fact-chart { height: 300px; margin-top: 25px; border-left: 1px solid #dce6ec; border-bottom: 1px solid #dce6ec; position: relative; display: grid; grid-template-columns: 38px 1fr; }
.fact-axis { display: flex; flex-direction: column; justify-content: space-between; color: #9ba7ae; font-size: 9px; transform: translateX(-6px); }
.fact-bars { display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 22px; padding: 0 18px; }
.fact-bars > div { display: flex; align-items: end; justify-content: center; gap: 5px; height: 100%; position: relative; }
.fact-bars i, .fact-bars b { width: 22px; border-radius: 6px 6px 0 0; }
.fact-bars i { background: #dce7ed; }
.fact-bars b { background: linear-gradient(180deg,#00a6f4,#5b63ed); }
.fact-bars span { position: absolute; bottom: -25px; white-space: nowrap; font-size: 9px; color: #7f8c94; }
.chart-legend { display: flex; justify-content: center; gap: 20px; margin-top: 34px; font-size: 10px; color: #7b8992; }
.chart-legend span { display: flex; gap: 6px; align-items: center; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: #dce7ed; }
.chart-legend span:last-child i { background: var(--blue); }
.unit-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; }
.unit-form { display: grid; gap: 9px; }
.unit-form label { color: #788690; font-size: 10px; }
.unit-form input { margin-top: 5px; width: 100%; border: 1px solid #dde7ed; background: #f8fafb; border-radius: 10px; padding: 11px; color: #1f303a; font-weight: 750; }
.unit-result { padding: 20px; border-radius: 17px; background: linear-gradient(145deg,#eef9ff,#f4efff); text-align: center; }
.unit-result small { color: #76858e; }
.unit-result > strong { display: block; margin: 8px 0 14px; font-size: 34px; }
.donut { width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--blue) 0 63deg,#e4edf2 63deg 360deg); display: grid; place-items: center; position: relative; }
.donut::before { content:""; width: 84px; height: 84px; border-radius: 50%; background: #fff; position: absolute; }
.donut span { position: relative; z-index: 1; font-weight: 850; }
.unit-result p { color: #71808a; font-size: 10px; }

.audience { background: linear-gradient(180deg,#f6faff,#fff); }
.audience-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.audience-card { position: relative; min-height: 310px; padding: 25px; border-radius: 23px; border: 1px solid var(--line); background: rgba(255,255,255,.86); overflow: hidden; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.audience-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); }
.audience-index { position: absolute; right: 18px; top: 16px; color: #d5e1e8; font-size: 32px; font-weight: 900; }
.audience-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg,rgba(0,166,244,.12),rgba(124,58,237,.1)); font-size: 25px; }
.audience-card h3 { margin: 25px 0 12px; font-size: 21px; letter-spacing: -.03em; }
.audience-card p { color: var(--muted); font-size: 14px; }
.audience-card > strong { display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--blue-dark); }

.proof { background: #fff; }
.proof-shell { position: relative; overflow: hidden; padding: 58px; border-radius: 34px; color: white; background: radial-gradient(circle at 90% 0%,rgba(128,99,255,.42),transparent 28%), radial-gradient(circle at 8% 90%,rgba(0,198,255,.25),transparent 30%), linear-gradient(145deg,#071d2b,#063756 52%,#182355); box-shadow: 0 34px 90px rgba(3,38,63,.22); }
.proof-shell::after { content:""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }
.proof-heading, .proof-stats, .cases-grid { position: relative; z-index: 1; }
.proof-heading { display: grid; grid-template-columns: 1fr; gap: 14px; }
.proof-heading h2 { margin: 10px 0 0; font-size: clamp(38px,4vw,56px); line-height: 1.05; letter-spacing: -.045em; }
.proof-heading h2 span { color: #75d7ff; }
.proof-heading p { margin: 0; max-width: 640px; color: rgba(255,255,255,.68); }
.proof-stats { margin: 42px 0 24px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.proof-stats > div { padding: 23px; text-align: center; border-right: 1px solid rgba(255,255,255,.14); }
.proof-stats > div:last-child { border-right: 0; }
.proof-stats strong { display: block; font-size: 34px; }
.proof-stats span { color: rgba(255,255,255,.63); font-size: 12px; }
.cases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 44px; }
.cases-grid article { padding: 22px; border-radius: 19px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(12px); }
.cases-grid article > span { color: #79d8ff; font-size: 11px; font-weight: 850; }
.cases-grid h3 { margin: 12px 0; font-size: 18px; line-height: 1.25; }
.cases-grid p { color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.55; }
.cases-grid strong { display: block; margin-top: 18px; color: #a6f2d0; font-size: 11px; }

.security { background: linear-gradient(180deg,#f5faff,#fff); }
.security-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 54px; align-items: start; }
.security-copy { position: sticky; top: 120px; }
.security-badge { margin-top: 28px; padding: 17px; display: flex; gap: 12px; border: 1px solid #cde4ef; border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: var(--shadow-soft); }
.security-badge svg { width: 29px; height: 29px; color: var(--green); flex: 0 0 auto; }
.security-badge strong, .security-badge span { display: block; }
.security-badge span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.security-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.security-grid article { min-height: 180px; padding: 24px; border-radius: 21px; border: 1px solid var(--line); background: white; transition: transform .25s, box-shadow .25s; }
.security-grid article:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.security-grid article > svg { width: 28px; height: 28px; color: var(--blue-dark); }
.security-grid h3 { margin: 20px 0 8px; font-size: 18px; }
.security-grid p { margin: 0; color: var(--muted); font-size: 13px; }

.steps { background: #fff; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; position: relative; }
.steps-grid::before { content: ""; position: absolute; left: 16%; right: 16%; top: 102px; height: 2px; background: linear-gradient(90deg,rgba(0,166,244,.2),rgba(0,166,244,.72),rgba(124,58,237,.3)); z-index: 0; }
.step-card { position: relative; z-index: 1; text-align: center; padding: 26px; }
.step-card > span { display: block; text-align: center; color: #cdd9e1; font-size: 30px; font-weight: 900; line-height: 1; margin: 0 0 12px; }
.step-icon { width: 72px; height: 72px; margin: 0 auto 23px; display: grid; place-items: center; border-radius: 22px; color: var(--blue-dark); background: white; border: 1px solid #cfe4ee; box-shadow: 0 12px 30px rgba(28,83,118,.13); }
.step-icon svg { width: 30px; height: 30px; }
.step-card h3 { margin: 0 0 8px; font-size: 21px; }
.step-card p { margin: 0; color: var(--muted); font-size: 14px; }
.step-card .inline-link { margin-top: 10px; font-size: 12px; }
.steps-cta { margin-top: 35px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.steps-cta span { color: var(--muted); font-size: 12px; }

.pricing { background: linear-gradient(180deg,#f4faff,#fff); }
.pricing-card { display: grid; grid-template-columns: 1.16fr .84fr; border-radius: 30px; overflow: hidden; border: 1px solid #d7e7ef; background: white; box-shadow: var(--shadow); }
.pricing-controls { padding: 42px; display: grid; gap: 38px; }
.pricing-control label { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 800; }
.pricing-control small { display: block; margin-top: 11px; color: var(--muted); font-size: 12px; }
.store-stepper { width: min(100%,390px); height: 92px; border: 1px solid #d9e7ee; border-radius: 20px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; background: #f8fbfd; }
.store-stepper button { height: 100%; border: 0; background: transparent; color: #4e626e; font-size: 30px; }
.store-stepper button:hover { color: var(--blue-dark); }
.store-stepper > div { text-align: center; }
.store-stepper strong { font-size: 34px; margin-right: 7px; }
.store-stepper span { color: var(--muted); }
.period-switch { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 7px; border-radius: 17px; background: #f1f6f9; }
.period-switch button { min-height: 64px; border: 0; border-radius: 12px; color: #667781; background: transparent; font-weight: 760; }
.period-switch button span { display: block; margin-top: 4px; color: var(--green); font-size: 10px; }
.period-switch button.is-active { color: white; background: linear-gradient(120deg,var(--blue),#5865ee); box-shadow: 0 10px 24px rgba(0,150,230,.2); }
.period-switch button.is-active span { color: #bff4df; }
.pricing-result { position: relative; overflow: hidden; padding: 42px; color: white; background: radial-gradient(circle at 90% 0%,rgba(255,255,255,.16),transparent 30%),linear-gradient(145deg,#086cae,#00a6f4 48%,#5d5ce9); display: flex; flex-direction: column; justify-content: center; }
.price-badge { align-self: flex-start; padding: 7px 10px; border-radius: 999px; color: white; background: rgba(255,255,255,.15); font-size: 11px; font-weight: 800; }
.pricing-result > span { margin-top: 30px; color: rgba(255,255,255,.68); font-size: 12px; }
.main-price { display: flex; align-items: flex-end; gap: 7px; margin: 6px 0 24px; }
.main-price strong { font-size: clamp(48px,5vw,72px); line-height: 1; letter-spacing: -.055em; }
.main-price b { font-size: 25px; margin-bottom: 8px; }
.price-summary { display: grid; gap: 11px; margin-bottom: 24px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.price-summary div { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.price-summary span { color: rgba(255,255,255,.65); }
.pricing-result .button { width: 100%; }
.pricing-result .text-button { color: white; justify-content: center; margin: 16px 0 7px; }
.pricing-result > small { text-align: center; color: rgba(255,255,255,.6); }
.pricing-table-wrap { margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; overflow: hidden; }
.pricing-table-toggle { width: 100%; padding: 18px 22px; border: 0; background: white; display: flex; align-items: center; justify-content: space-between; color: #4a5d68; font-weight: 750; }
.pricing-table-toggle svg { transition: transform .25s; }
.pricing-table-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pricing-table-content { display: none; padding: 0 22px 20px; overflow-x: auto; }
.pricing-table-wrap.is-open .pricing-table-content { display: block; }
.pricing-table-content table { width: 100%; min-width: 660px; border-collapse: collapse; }
.pricing-table-content th, .pricing-table-content td { padding: 14px; border: 1px solid #e1e9ee; text-align: right; }
.pricing-table-content th:first-child { text-align: left; }
.pricing-table-content thead th { background: #f5f8fa; }
.pricing-table-content p { color: var(--muted); font-size: 12px; }

.roadmap { background: #fff; }
.roadmap-shell { border-radius: 30px; padding: 50px; background: radial-gradient(circle at 85% 0%,rgba(0,166,244,.13),transparent 27%),linear-gradient(145deg,#f1f9fd,#f9f7ff); border: 1px solid #dce9f0; display: grid; grid-template-columns: .84fr 1.16fr; gap: 55px; }
.roadmap-copy h2 { font-size: clamp(35px,3.5vw,50px); }
.roadmap-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.roadmap-col { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.76); border: 1px solid rgba(214,229,237,.9); }
.roadmap-col h3 { margin: 0 0 18px; display: flex; align-items: center; gap: 9px; font-size: 16px; }
.roadmap-col h3 span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(23,168,107,.1); }
.roadmap-col--next h3 span { background: var(--blue); box-shadow: 0 0 0 5px rgba(0,166,244,.1); }
.roadmap-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.roadmap-col li { position: relative; padding-left: 16px; color: #576873; font-size: 13px; }
.roadmap-col li::before { content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:#b9c9d2; }

.faq { background: linear-gradient(180deg,#f6fbff,#fff); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.faq-intro { position: sticky; top: 118px; }
.faq-intro h2 { font-size: clamp(37px,4vw,53px); }
.faq-intro .button { margin-top: 20px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 4px; font-size: 17px; font-weight: 780; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: #778892; transition: transform .25s; }
.faq-list details[open] summary svg { transform: rotate(180deg); color: var(--blue-dark); }
.faq-list details p { margin: -7px 35px 24px 4px; color: var(--muted); font-size: 14px; }

.final-cta { background: #fff; padding-top: 70px; }
.final-card { min-height: 520px; border-radius: 36px; overflow: hidden; position: relative; color: white; background: linear-gradient(140deg,#0471b5 0%,#00a6f4 42%,#5864ee 75%,#7949e8 100%); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; padding: 60px; box-shadow: 0 35px 90px rgba(0,129,205,.24); }
.final-card::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:45px 45px; mask-image:linear-gradient(90deg,#000,transparent); }
.final-orb { position:absolute; border-radius:50%; filter:blur(35px); background:rgba(255,255,255,.2); }
.final-orb--one { width:250px;height:250px;left:-80px;bottom:-100px; }
.final-orb--two { width:220px;height:220px;right:16%;top:-80px;background:rgba(151,102,255,.35); }
.final-content, .final-preview { position:relative; z-index:2; }
.final-content h2 { font-size: clamp(42px,4.8vw,65px); max-width: 720px; }
.final-content h2 span { color: #bff4ff; }
.final-content > p { max-width: 620px; color: rgba(255,255,255,.78); font-size: 18px; }
.final-actions { display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 20px; }
.final-notes { display:flex;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.78);font-size:12px;font-weight:650; }
.final-notes span { display:flex;gap:6px;align-items:center; }
.final-notes svg { width:16px; }
.final-preview { align-self:end; margin-right:-190px; margin-bottom:-110px; transform:rotate(-5deg); }
.final-preview img { width:780px; max-width:none; border-radius:22px; border:1px solid rgba(255,255,255,.28); box-shadow:0 25px 70px rgba(0,25,45,.34); }

.site-footer { padding: 64px 0 28px; background: #071722; color: white; }
.footer-grid { display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:45px; }
.footer-brand img { width:128px; }
.footer-brand p { max-width:310px;color:rgba(255,255,255,.55);font-size:13px; }
.footer-grid h3 { margin:0 0 17px;font-size:13px;color:rgba(255,255,255,.88); }
.footer-grid a,.footer-link { display:block;margin:10px 0;color:rgba(255,255,255,.55);font-size:12px;text-align:left; }
.footer-grid a:hover,.footer-link:hover { color:white; }
.footer-bottom { margin-top:45px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:rgba(255,255,255,.4);font-size:11px; }

.cookie-banner { position:fixed;left:20px;bottom:20px;z-index:100;width:min(440px,calc(100% - 40px));padding:16px;border-radius:17px;background:rgba(255,255,255,.95);border:1px solid #dce7ed;box-shadow:0 20px 60px rgba(25,55,77,.2);backdrop-filter:blur(16px);display:none;align-items:center;justify-content:space-between;gap:18px; }
.cookie-banner.is-visible { display:flex;animation:slideUp .35s ease; }
.cookie-banner strong { font-size:13px; }
.cookie-banner p { margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.4; }
.cookie-actions { display:flex;align-items:center;gap:14px;flex:0 0 auto; }
.cookie-actions .text-button { font-size:11px; }
.cookie-more { color:var(--blue-dark);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:2px;white-space:nowrap; }
.cookie-more:hover { color:var(--violet); }

.modal { position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px; }
.modal.is-open { display:flex; }
.modal-backdrop { position:absolute;inset:0;background:rgba(5,18,29,.68);backdrop-filter:blur(8px);animation:fadeIn .2s ease; }
.modal-dialog { position:relative;z-index:1;width:min(100%,560px);max-height:calc(100vh - 40px);overflow:auto;padding:36px;border-radius:26px;background:white;box-shadow:0 30px 90px rgba(0,0,0,.28);animation:modalIn .28s ease; }
.modal-dialog--compact { width:min(100%,500px); }
.modal-close { position:absolute;right:16px;top:14px;width:39px;height:39px;border-radius:12px;border:1px solid var(--line);background:#f7fafb;color:#60717c;display:inline-flex;align-items:center;justify-content:center;z-index:3; }
.modal-close svg { width:17px;height:17px;stroke-width:2.4; }
.modal-icon { width:49px;height:49px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,rgba(0,166,244,.14),rgba(124,58,237,.11));color:var(--blue-dark); }
.modal-kicker { display:block;margin-top:18px;color:var(--blue-dark);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase; }
.modal-copy h2,.modal-dialog > h2 { margin:8px 0 10px;font-size:30px;letter-spacing:-.04em; }
.modal-copy p { margin:0;color:var(--muted);font-size:14px; }
#leadForm { margin-top:24px;display:grid;gap:14px; }
#leadForm label { color:#53636d;font-size:12px;font-weight:700; }
#leadForm input,#leadForm select { width:100%;margin-top:6px;border:1px solid #d9e5ec;border-radius:12px;padding:13px 14px;background:#fbfdfe;color:var(--ink);outline:none; }
#leadForm input:focus,#leadForm select:focus { border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,166,244,.1); }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.consent { display:flex;align-items:flex-start;gap:8px; }
.consent input { width:17px!important;height:17px;margin:1px 0 0!important; }
.consent span { color:var(--muted);font-weight:500;line-height:1.4; }
.consent a { color:var(--blue-dark);font-weight:650;text-decoration:underline;text-underline-offset:2px; }
.consent a:hover { color:var(--violet); }
.form-status { margin:0;color:var(--red);font-size:12px;min-height:18px; }
.modal-success { text-align:center;padding:20px 0 5px; }
.success-check { width:70px;height:70px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(23,168,107,.12);color:var(--green); }
.success-check svg { width:36px;height:36px; }
.modal-success h2 { margin:0 0 8px;font-size:30px; }
.modal-success p { color:var(--muted); }
.modal--video { padding:30px; }
.video-dialog { position:relative;z-index:1;width:min(1280px,100%);display:grid;grid-template-columns:1fr 330px;border-radius:27px;overflow:hidden;background:#071722;box-shadow:0 30px 100px rgba(0,0,0,.42);animation:modalIn .28s ease; }
.demo-player { padding:20px;background:#06121b;color:white; }
.demo-player-top { display:flex;justify-content:space-between;padding:2px 4px 14px;color:rgba(255,255,255,.6);font-size:11px; }
.demo-stage { position:relative;aspect-ratio:16/9;border-radius:17px;overflow:hidden;background:#0d1c28; }
.demo-stage img { width:100%;height:100%;object-fit:cover;object-position:top; }
.demo-stage video { width:100%;height:100%;object-fit:contain;display:block;background:#000; }
.demo-focus { position:absolute;left:44%;top:28%;width:22%;height:8%;border:2px solid #2fb8ff;box-shadow:0 0 0 100vmax rgba(3,15,24,.48),0 0 30px rgba(47,184,255,.5);border-radius:5px; }
.demo-tip { position:absolute;left:20px;bottom:20px;max-width:360px;padding:13px 15px;border-radius:13px;background:rgba(5,19,29,.84);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px); }
.demo-tip strong,.demo-tip span { display:block; }
.demo-tip strong { font-size:13px; }
.demo-tip span { margin-top:4px;color:rgba(255,255,255,.6);font-size:10px; }
.demo-progress { height:4px;margin-top:14px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden; }
.demo-progress span { display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),#7d5cff); }
.demo-controls { display:flex;justify-content:space-between;align-items:center;padding-top:14px; }
.demo-controls button { border:0;background:transparent;color:white;display:flex;align-items:center;gap:9px;font-weight:750; }
.demo-controls button svg { width:20px; }
.demo-controls small { color:rgba(255,255,255,.37); }
.demo-side { padding:54px 30px 30px;color:white;background:linear-gradient(160deg,#0b2638,#123a59); }
.demo-side .modal-kicker { color:#67d0ff; }
.demo-side h2 { margin:10px 0 14px;font-size:31px;line-height:1.08;letter-spacing:-.04em; }
.demo-side p { color:rgba(255,255,255,.63);font-size:13px; }
.demo-side .button { margin-top:22px;width:100%; }
.token-steps { padding-left:22px;color:#51626d;font-size:14px;display:grid;gap:12px; }
.token-note { display:flex;align-items:center;gap:10px;margin:20px 0;padding:13px;border-radius:13px;background:#f0faf6;color:#3a5d4d;font-size:12px; }
.token-note svg { color:var(--green);flex:0 0 auto; }
.mobile-sticky { display:none;position:fixed;left:14px;right:14px;bottom:12px;z-index:70;border:0;border-radius:14px;padding:15px;color:white;background:linear-gradient(110deg,var(--blue),#5d5deb);box-shadow:0 15px 35px rgba(0,131,207,.28);font-weight:800; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes selectPulse { 0%,100%{box-shadow:0 0 0 3px rgba(21,151,255,.1)}50%{box-shadow:0 0 0 7px rgba(21,151,255,.08)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes modalIn { from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none} }

/* Плашки живут в боковых полях рядом с заголовком — прячем их, когда полей не хватает. */
@media (max-width: 1400px) {
  .floating-card, .sum-toast { display: none; }
}

@media (max-width: 1080px) {
  .desktop-nav { gap:18px; }
  .rnp-layout,.security-layout,.roadmap-shell { grid-template-columns:1fr; }
  .rnp-copy { max-width:760px; }
  .rnp-demo { max-width:780px;margin:10px auto 30px; }
  .security-copy,.faq-intro { position:static; }
  .audience-grid { grid-template-columns:repeat(2,1fr); }
  .proof-heading { grid-template-columns:1fr;gap:15px; }
  .pricing-card { grid-template-columns:1fr; }
  .pricing-result { min-height:430px; }
  .final-card { grid-template-columns:1fr; }
  .final-preview { display:none; }
}

@media (max-width: 900px) {
  .desktop-nav,.desktop-only { display:none; }
  .menu-toggle { display:block; }
  .mobile-menu.is-open { display:block; }
  .comparison-grid,.advantages-grid,.cases-grid,.steps-grid { grid-template-columns:1fr; }
  .comparison-card--accent { transform:none; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .stats-strip > div:nth-child(2) { border-right:0; }
  .stats-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .morning-grid { grid-template-columns:1fr; }
  .module-content { grid-template-columns:1fr; }
  .module-preview { min-height:460px; }
  .faq-layout { grid-template-columns:1fr;gap:35px; }
  .footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column:2/4; }
  .video-dialog { grid-template-columns:1fr;max-height:calc(100vh - 50px);overflow:auto; }
  .demo-side { padding:28px; }
}

@media (max-width: 680px) {
  .container,.narrow { width:min(calc(100% - 28px),var(--container)); }
  .section { padding:82px 0; }
  .header-inner { min-height:68px; }
  .brand { width:102px; }
  .header-actions .button { display:none; }
  .hero { padding-top:120px; }
  .hero h1 { font-size:44px; }
  .hero-lead { font-size:17px; }
  .hero-actions { display:grid;grid-template-columns:1fr; }
  .hero-actions .button { width:100%; }
  .hero-notes { flex-direction:column;align-items:center;gap:10px; }
  .hero-visual { margin-top:45px; }
  .product-window { border-radius:18px; }
  .screenshot-scroll { aspect-ratio:16/9;overflow:hidden; }
  .screenshot-scroll img { width:100%;max-width:none;height:100%;object-fit:cover;object-position:top center;transform:none; }
  .selection-box,.sum-toast,.floating-card { display:none; }
  .stats-strip { margin-top:45px; }
  .stats-strip > div { min-height:96px;padding:14px; }
  .stats-strip strong { font-size:23px; }
  .video-card { border-radius:20px;aspect-ratio:16/9; }
  .video-card img { object-position:top center;transform:none; }
  .video-play { width:68px;height:68px; }
  .video-caption { left:20px;bottom:20px;right:20px; }
  .video-caption strong { font-size:22px; }
  .video-footer { align-items:flex-start;flex-direction:column; }
  .comparison-card,.advantage-card { padding:23px; }
  .compare-table-wrap { overflow-x:hidden; }
  .compare-table { min-width:0; }
  .compare-table th, .compare-table td { padding:10px 6px;font-size:12.5px; }
  .compare-table thead th { font-size:11px;line-height:1.2; }
  .compare-table tbody td:first-child { font-size:12.5px; }
  .compare-table thead th:first-child { font-size:12px; }
  .compare-table th:not(:first-child), .compare-table td:not(:first-child) { width:56px; }
  .compare-table .mk { width:24px;height:24px; }
  .compare-table .mk svg { width:13px;height:13px; }
  .rnp-layout { gap:24px; }
  .rnp-points, .rnp-demo { display:none; }
  .rnp-cards { display:grid;gap:16px;margin:18px 0 6px; }
  .rnp-card { background:#f4f8fb;border:1px solid var(--line);border-radius:22px;padding:22px 20px; }
  .rnp-card h3 { margin:0 0 8px;font-size:19px;letter-spacing:-.02em; }
  .rnp-card p { margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5; }
  .rnp-card img { width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left;border-radius:14px;border:1px solid #e2ebf0;box-shadow:0 10px 30px rgba(30,65,90,.1);background:#fff; }
  .rnp-copy .button { width:100%; }
  .advantages-grid,.audience-grid,.security-grid { grid-template-columns:1fr; }
  .morning-card { padding:22px; }
  .timeline div { grid-template-columns:70px 1fr; }
  .timeline::before { left:42px; }
  .timeline div::before { left:38px; }
  .morning-note { align-items:flex-start; }
  .modules-shell { border-radius:22px; }
  .module-content { padding:22px;min-height:700px; }
  .module-copy h3 { font-size:29px; }
  .module-preview { min-height:470px; }
  .unit-layout { grid-template-columns:1fr; }
  .metric-row,.buyout-stats { grid-template-columns:1fr; }
  .mock-tr { grid-template-columns:1.2fr repeat(3,.8fr);font-size:9px;padding:0 8px; }
  .proof-shell { padding:32px 22px;border-radius:26px; }
  .proof-stats { grid-template-columns:1fr; }
  .proof-stats > div { border-right:0;border-bottom:1px solid rgba(255,255,255,.14); }
  .proof-stats > div:last-child { border-bottom:0; }
  .security-grid article { min-height:150px; }
  .steps-grid::before { display:none; }
  .pricing-controls,.pricing-result { padding:28px 22px; }
  .period-switch { grid-template-columns:repeat(2,1fr); }
  .store-stepper { grid-template-columns:60px 1fr 60px; }
  .pricing-table-wrap { display:none; }
  .roadmap-shell { padding:28px 20px; }
  .roadmap-columns { grid-template-columns:1fr; }
  .final-card { min-height:auto;padding:42px 22px;border-radius:27px; }
  .final-actions { display:grid;grid-template-columns:1fr; }
  .final-actions .button { width:100%; }
  .final-notes { flex-direction:column;gap:8px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/3; }
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column;gap:8px; }
  .cookie-banner { flex-direction:row;align-items:center;gap:12px;padding:12px 14px;bottom:12px; }
  .cookie-banner p { display:none; }
  .cookie-actions { width:auto;flex:0 0 auto; }
  .modal { padding:12px; }
  .modal-dialog { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; }
  .modal--video { padding:10px; }
  .demo-player { padding:10px; }
  .demo-controls { align-items:flex-start;flex-direction:column;gap:8px; }
  .demo-tip { left:10px;right:10px;bottom:10px; }
  .site-footer { padding-bottom:40px; }
  /* Мобильная версия: короткий путь Hero → Обзор → Почему Qbiki →
     Главный инструмент → Прозрачная цена → Финальный CTA → Футер.
     Остальные блоки скрываем. */
  .advantages, .morning-section, .audience, .proof, .security, .steps, .roadmap, .faq { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .reveal { opacity:1;transform:none; }
}