/* ============================================================
   AVS CRM — промо-лендинг
   ============================================================ */

:root {
  --accent: #4F5DE0;
  --accent-2: #a7b0f2;
  --accent-3: #818cf8;
  --ink: #19182A;
  --muted: #55546b;
  --muted-2: #6b6a85;
  --faint: #8a899c;
  --bg: #F5F5FB;
  --dark: #121026;
  --ok: #1C7C4D;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', sans-serif;
  --mono: 'Spline Sans Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
/* height: auto is the actual fix here, not just tidiness — the width/height
   HTML attributes on <img> (added for CLS) are presentational hints at the
   lowest CSS specificity; max-width:100% only overrides the width side of
   that hint, so without an explicit height rule the height hint can stay
   pinned at its raw pixel value on some browsers while width shrinks,
   distorting the image instead of scaling it proportionally. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .85; }
button { font-family: inherit; }
input, textarea, button { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4, p { margin: 0; }

.wrap { max-width: 1220px; margin: 0 auto; padding-left: clamp(20px, 5vw, 34px); padding-right: clamp(20px, 5vw, 34px); }
.wrap--narrow { max-width: 1020px; }
.wrap--mid { max-width: 1120px; }

/* ---------- Headings ---------- */
.h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(42px, 7.2vw, 88px); line-height: .98;
  letter-spacing: -.035em; text-wrap: balance;
}
.h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -.03em; line-height: 1.02;
}
.section-lead {
  font-size: clamp(18px, 2.3vw, 21px); line-height: 1.5;
  color: var(--muted); font-weight: 400;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; border: none; cursor: pointer;
  border-radius: 12px; padding: 11px 20px; line-height: 1.2;
  transition: opacity .2s ease, transform .2s ease;
}
.btn-accent { color: #fff; background: var(--accent); box-shadow: 0 14px 30px -14px rgba(79,93,224,.7); }
.btn-accent:hover { opacity: 1; }
.btn-light { color: var(--dark); background: #fff; box-shadow: 0 20px 44px -18px rgba(0,0,0,.5); }
.btn-lg { font-size: 17px; padding: 18px 34px; border-radius: 16px; box-shadow: 0 22px 48px -16px rgba(79,93,224,.85); }
.btn-block { width: 100%; justify-content: center; }

/* Shine sweep */
.cta-shine { position: relative; overflow: hidden; }
.cta-shine::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: ctaSheen 4.8s ease-in-out infinite; pointer-events: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(245,245,251,.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(79,93,224,.08);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 15px; padding-bottom: 15px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__dots { display: flex; gap: 5px; }
.brand__dots span { width: 11px; height: 11px; border-radius: 50%; }
.brand__dots span:first-child { background: var(--accent); }
.brand__dots span:last-child { background: var(--accent-2); }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.brand__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted-2);
  border: 1px solid rgba(79,93,224,.22); border-radius: 6px; padding: 3px 7px;
}
.brand--dark .brand__name { color: #fff; }
.brand--dark .brand__tag { color: #9c9bb5; border-color: rgba(255,255,255,.16); }

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { color: #3a3950; font-size: 15px; font-weight: 500; }
.nav a.btn-accent { color: #fff; }

.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1px solid rgba(79,93,224,.22);
  box-shadow: 0 10px 26px -18px rgba(48,45,120,.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.burger span { display: block; width: 19px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform .34s cubic-bezier(.6,.2,.1,1); }
body.menu-open .burger { background: var(--accent); border-color: var(--accent); box-shadow: 0 14px 30px -12px rgba(79,93,224,.7); }
body.menu-open .burger span { background: #fff; }
body.menu-open .burger span:first-child { transform: translateY(3.3px) rotate(45deg); }
body.menu-open .burger span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* ---------- Mobile fullscreen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--dark);
  display: flex; flex-direction: column;
  padding: calc(15px + 46px + 30px) clamp(24px, 7vw, 40px) clamp(28px, 7vw, 44px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transition: opacity .32s ease, transform .32s ease;
  opacity: 0; pointer-events: none; transform: translateY(-14px);
}
body.menu-open .menu { opacity: 1; pointer-events: auto; transform: none; }
.menu__links { display: flex; flex-direction: column; gap: 2px; margin-top: 4vh; }
.menu__links a {
  font-family: var(--display); font-weight: 600; font-size: clamp(18px, 5vw, 22px);
  letter-spacing: -.01em; color: #fff; padding: 15px 2px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.menu__cta {
  display: block; text-align: center; margin-top: 36px; font-weight: 700; font-size: 19px;
  color: #fff; background: var(--accent); padding: 19px; border-radius: 16px;
  box-shadow: 0 20px 44px -16px rgba(79,93,224,.85);
}
.menu__contact { margin-top: auto; padding-top: 34px; }
.menu__contact p { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #7d7c98; margin: 0 0 14px; }
.menu__contact-row { display: flex; gap: 12px; }
.menu__contact-row a {
  flex: 1; text-align: center; font-weight: 600; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 16px; border-radius: 14px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(167,176,242,.5), transparent 60%),
    radial-gradient(900px 600px at 96% 8%, rgba(79,93,224,.28), transparent 58%),
    linear-gradient(180deg, #EFEFFA 0%, var(--bg) 62%, var(--bg) 100%);
}
.hero__inner { position: relative; padding-top: clamp(56px, 8vw, 92px); }
.hero h1 { margin: 26px 0 0; max-width: 15ch; }
.hero h1 .accent { color: var(--accent); }
.hero__lead { margin: 26px 0 0; max-width: 52ch; color: #4a495f; font-size: clamp(18px, 2.3vw, 22px); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 34px 0 0; }
.hero__note { font-family: var(--mono); font-size: 13px; color: var(--muted-2); }

.hero__shot { margin: clamp(46px, 7vw, 74px) 0 0; position: relative; }
.hero__shot-frame {
  border-radius: 20px 20px 0 0; padding: 10px 10px 0;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8); border-bottom: none;
  box-shadow: 0 -10px 80px -30px rgba(79,93,224,.6); backdrop-filter: blur(10px);
}
.hero__shot-frame img { border-radius: 12px 12px 0 0; border: 1px solid rgba(25,24,42,.08); border-bottom: none; }
.hero__chip {
  position: absolute; left: -14px; top: 34px; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 24px 50px -20px rgba(79,93,224,.5); backdrop-filter: blur(12px);
  border-radius: 16px; padding: 12px 18px; animation: floatC 7s ease-in-out infinite;
}
.hero__chip b { font-family: var(--mono); font-weight: 600; font-size: 20px; color: var(--accent); }
.hero__chip small { font-size: 13px; color: #4a495f; line-height: 1.25; font-weight: 700; }
.hero__chip small span { color: var(--faint); font-weight: 500; font-size: 12px; }

/* Decorative floating cubes */
.cube {
  position: absolute; pointer-events: none;
  border: 1px solid rgba(255,255,255,.8);
  background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(167,176,242,.4));
  backdrop-filter: blur(4px);
}
.hero__cube-1 { right: 6%; top: 190px; width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 34px 70px -26px rgba(79,93,224,.6); animation: floatA 8s ease-in-out infinite; }
.hero__cube-2 { right: 20%; top: 74px; width: 80px; height: 80px; border-radius: 22px; box-shadow: 0 26px 50px -22px rgba(79,93,224,.55); animation: floatB 9s ease-in-out infinite; }

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section { padding-top: clamp(72px, 10vw, 116px); padding-bottom: clamp(72px, 10vw, 116px); position: relative; overflow: hidden; }
.section--tabs { background: linear-gradient(180deg, var(--bg), #EEEEF8); }
.section--prices { background: linear-gradient(180deg, #EEEEF8, var(--bg)); }
.section--faq { background: linear-gradient(180deg, var(--bg), #EEEEF8); }
.section--dark { color: #fff; background: radial-gradient(900px 500px at 88% -10%, rgba(79,93,224,.32), transparent 60%), var(--dark); }
.section--model { color: #fff; background: radial-gradient(800px 460px at 10% 110%, rgba(79,93,224,.3), transparent 62%), var(--dark); }
.section__head-lead { margin: 20px 0 0; max-width: 58ch; }

/* ============================================================
   TABS (situations)
   ============================================================ */
.tabs__heading { margin: 20px 0 0; max-width: 20ch; }
.tabs__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(79,93,224,.18);
  cursor: pointer; text-align: left; font-family: var(--sans); font-weight: 600; font-size: 15px;
  background: rgba(255,255,255,.7); color: var(--ink);
  transition: all .18s ease; backdrop-filter: blur(8px);
}
.tab-btn__num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-weight: 600; font-size: 12px;
  background: rgba(79,93,224,.1); color: var(--accent); transition: all .18s ease;
}
.tab-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 16px 34px -14px rgba(79,93,224,.7); }
.tab-btn.is-active .tab-btn__num { background: rgba(255,255,255,.2); color: #fff; }

.tabs__panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px); align-items: center; margin: 26px 0 0;
  background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.8);
  border-radius: 30px; padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 50px 90px -56px rgba(48,45,120,.5), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
/* JS toggles .is-active on [data-tab-panel] (main.js initTabs) — this rule
   was simply never written, so every panel sat visible at once regardless
   of which tab was selected. Same pattern already exists correctly for
   [data-tab-media] a few lines down (img { display:none } / .is-active
   { display:block }) — this mirrors it for the text panels. */
[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; }

.steps { position: relative; }
.steps__line { position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, #b9b8ca 0%, #B23A3A 46%, var(--ok) 100%); border-radius: 2px; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start; }
.step__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #b9b8ca; }
.step__dot span { width: 9px; height: 9px; border-radius: 50%; background: #9d9cb2; }
.step__dot--pain { border-color: #B23A3A; box-shadow: 0 0 0 5px rgba(178,58,58,.1); }
.step__dot--pain span { background: #B23A3A; }
.step__dot--fix { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 5px rgba(28,124,77,.12); }
.step__dot--fix span { width: auto; height: auto; background: none; color: #fff; font-size: 15px; font-weight: 700; }
.step__body { padding-bottom: 26px; }
.step__body.is-last { padding-bottom: 0; }
.step__kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted-2); }
.step__kicker--pain { color: #B23A3A; }
.step__kicker--fix { color: var(--ok); }
.step__text { font-size: clamp(17px, 2vw, 19px); line-height: 1.55; margin: 7px 0 0; font-weight: 400; color: #3a3950; }
.step__text--strong { color: var(--ink); }
.tabs__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(25,24,42,.08); }
.tabs__price { display: inline-flex; align-items: center; gap: 10px; background: rgba(79,93,224,.08); border: 1px solid rgba(79,93,224,.18); border-radius: 14px; padding: 13px 17px; max-width: 100%; }
.tabs__price span { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--ink); }
.tabs__cta { font-weight: 700; font-size: 16px; }

.tabs__media { position: relative; }
.tabs__media-frame { position: relative; border-radius: 20px; padding: 8px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 44px 80px -40px rgba(48,45,120,.6); backdrop-filter: blur(12px); }
.tabs__media-frame img { border-radius: 14px; border: 1px solid rgba(25,24,42,.08); }
.tabs__media-frame img { display: none; }
.tabs__media-frame img.is-active { display: block; }
.tabs__caption { position: relative; display: flex; align-items: center; gap: 9px; margin: 16px auto 0; width: fit-content; max-width: 100%; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; padding: 8px 15px; box-shadow: 0 18px 40px -24px rgba(48,45,120,.5); backdrop-filter: blur(12px); }
.tabs__caption span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tabs__caption span:last-child { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.3; }

/* ============================================================
   FITS marquee
   ============================================================ */
.fits { padding: clamp(40px, 6vw, 68px) 0 clamp(48px, 7vw, 76px); background: linear-gradient(180deg, #EEEEF8, var(--bg)); overflow: hidden; }
.fits__head { max-width: 1220px; margin: 0 auto 22px; padding: 0 clamp(20px, 5vw, 34px); display: flex; align-items: center; gap: 12px; }
.fits__head .dot { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--accent); flex-shrink: 0; }
.fits__head .label { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fits__head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(79,93,224,.24), transparent); }
.fits__mask { display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.fits__viewport:hover .fits__track { animation-play-state: paused; }
.fits__track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.fits__track--l { animation: marqueeL 44s linear infinite; }
.fits__track--r { animation: marqueeR 50s linear infinite; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 15px; color: #3a3950;
  border-radius: 999px; padding: 12px 20px; backdrop-filter: blur(14px);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 3px rgba(79,93,224,.14); }
.chip--a { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 20px 40px -34px rgba(48,45,120,.55); }
.chip--b { background: rgba(79,93,224,.06); border: 1px solid rgba(79,93,224,.16); }

/* ============================================================
   HOW (dark cards)
   ============================================================ */
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin: clamp(44px, 6vw, 60px) 0 0; }
.dcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px 28px; backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease; }
.dcard:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); }
.dcard__num { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: -.03em; color: var(--accent-2); margin: 0 0 18px; }
.dcard__title { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 10px; letter-spacing: -.01em; color: #fff; }
.dcard__text { font-size: 16px; line-height: 1.5; color: #b3b2cc; margin: 0; font-weight: 400; }

.how__screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; margin: 20px 0 0; }
.screen-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: clamp(26px, 4vw, 36px) clamp(26px, 4vw, 36px) 0; overflow: hidden; backdrop-filter: blur(12px); }
.screen-card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.6vw, 25px); color: #fff; margin: 16px 0 12px; letter-spacing: -.015em; }
.screen-card p { font-size: 16px; line-height: 1.55; color: #b3b2cc; margin: 0 0 26px; font-weight: 400; }
.screen-card img { border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,.12); border-bottom: none; }

/* ============================================================
   PRICES
   ============================================================ */
.prices__lead { margin: 20px 0 0; max-width: 56ch; }
.prices__table { margin: clamp(36px, 5vw, 46px) 0 0; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; padding: 8px clamp(12px, 3vw, 26px); box-shadow: 0 50px 90px -56px rgba(48,45,120,.5), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(20px); }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding: 26px 8px; border-radius: 18px; transition: background .18s ease; }
.price-row + .price-row { border-top: 1px solid rgba(25,24,42,.08); }
.price-row:hover { background: rgba(79,93,224,.05); }
.price-row__info { flex: 1 1 260px; min-width: 0; }
.price-row__name { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.4vw, 22px); margin: 0; letter-spacing: -.01em; }
.price-row__name span { color: var(--faint); font-weight: 500; }
.price-row__desc { font-size: 15px; color: #6b6a80; margin: 5px 0 0; font-weight: 400; }
.price-row__desc .save { color: var(--ok); font-weight: 600; }
.price-row__price { font-family: var(--mono); font-weight: 600; font-size: clamp(22px, 3vw, 28px); white-space: nowrap; color: var(--ink); }
.prices__note { font-size: 15px; color: var(--faint); margin: 18px 6px 0; font-weight: 400; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid { max-width: 1220px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__rail { position: sticky; top: 96px; }
.faq__rail h2 { margin: 20px 0 0; }
.faq__rail p { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 34ch; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -46px rgba(48,45,120,.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.faq-item.is-open { background: rgba(255,255,255,.72); border-color: rgba(79,93,224,.4); box-shadow: 0 34px 64px -40px rgba(79,93,224,.6); }
.faq-item__head { width: 100%; display: flex; align-items: center; gap: clamp(14px,2vw,20px); padding: clamp(18px,2.6vw,22px) clamp(20px,3vw,26px); background: transparent; border: none; cursor: pointer; text-align: left; }
.faq-item__num { flex-shrink: 0; font-family: var(--mono); font-weight: 600; font-size: 14px; color: #a3a2ba; transition: color .2s ease; width: 26px; }
.faq-item.is-open .faq-item__num { color: var(--accent); }
.faq-item__q { font-family: var(--sans); font-weight: 700; font-size: clamp(16px, 2vw, 19px); letter-spacing: -.01em; color: var(--ink); text-align: left; line-height: 1.38; flex: 1; }
.faq-item__icon { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(79,93,224,.1); border: 1px solid rgba(79,93,224,.22); transition: background .22s ease, border-color .22s ease; }
.faq-item.is-open .faq-item__icon { background: var(--accent); border-color: var(--accent); }
.faq-item__icon span { position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--accent); transition: transform .32s cubic-bezier(.6,.2,.1,1), opacity .28s ease; }
.faq-item.is-open .faq-item__icon span { background: #fff; }
.faq-item__icon span:first-child { transform: translate(-50%,-50%); }
.faq-item__icon span:last-child { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon span:last-child { transform: translate(-50%,-50%) rotate(180deg); opacity: 0; }
.faq-item__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .18s ease; }
.faq-item.is-open .faq-item__body { max-height: 360px; opacity: 1; transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease .06s; }
.faq-item__body p { font-family: var(--sans); font-size: clamp(16px, 2vw, 18px); line-height: 1.62; color: #3a3950; margin: 0; padding: 0 clamp(20px, 3vw, 26px) clamp(20px, 3vw, 26px) clamp(56px, 8vw, 68px); }

.faq__cta { max-width: 860px; margin: clamp(40px, 6vw, 60px) auto 0; position: relative; z-index: 1; }
.faq__cta-card { position: relative; overflow: hidden; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.85); border-radius: 28px; padding: clamp(28px, 4.5vw, 44px); box-shadow: 0 50px 90px -56px rgba(48,45,120,.5), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(22px); }
.faq__cta-card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--ink); }
.faq__cta-card > .form-intro { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--muted); margin: 10px 0 24px; }
.faq__cta-cube { position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 28px; background: linear-gradient(150deg, rgba(129,140,248,.4), rgba(79,93,224,.2)); border: 1px solid rgba(255,255,255,.6); animation: floatA 10s ease-in-out infinite; pointer-events: none; }

/* Floating decorative cubes in faq */
.faq__cube { border: 1px solid rgba(255,255,255,.8); background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(167,176,242,.32)); z-index: 0; }
.faq__cube-1 { right: 7%; top: 130px; width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 30px 60px -28px rgba(79,93,224,.4); animation: floatA 9s ease-in-out infinite; }
.faq__cube-2 { right: 3%; bottom: 22%; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 22px 44px -22px rgba(79,93,224,.4); animation: floatB 11s ease-in-out infinite; }
.faq__cube-3 { left: 2%; top: 42%; width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 20px 40px -22px rgba(79,93,224,.4); animation: floatC 8s ease-in-out infinite; }

/* ============================================================
   EXTRAS
   ============================================================ */
.section--extras { padding: clamp(56px, 7vw, 84px) 0 clamp(64px, 9vw, 100px); background: linear-gradient(180deg, var(--bg), #EEEEF8); }
.extras__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.extras__head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -.025em; line-height: 1.06; margin: 16px 0 0; color: var(--ink); }
.extras__head > p { font-size: clamp(15px, 1.9vw, 17px); line-height: 1.5; color: var(--faint); margin: 0; max-width: 30ch; }
.extras__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin: clamp(28px, 4vw, 40px) 0 0; }
.extra-card { position: relative; overflow: hidden; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); border-radius: 22px; padding: 28px 26px; display: flex; flex-direction: column; box-shadow: 0 26px 54px -46px rgba(48,45,120,.5); backdrop-filter: blur(16px); transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease; }
.extra-card:hover { transform: translateY(-6px); box-shadow: 0 44px 74px -42px rgba(48,45,120,.55); border-color: rgba(79,93,224,.32); }
.extra-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), rgba(167,176,242,.5)); opacity: .7; }
.extra-card__meta { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.extra-card__meta span:first-child { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--accent); }
.extra-card__meta span:last-child { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #a3a2ba; }
.extra-card__title { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.extra-card__text { font-size: 15px; line-height: 1.5; color: #6b6a80; margin: 0 0 22px; flex: 1; }
.extra-card__price { font-family: var(--mono); font-weight: 600; font-size: 21px; color: var(--ink); }
.extra-card__price--muted { color: var(--faint); }

.extras__banner { position: relative; overflow: hidden; margin: 16px 0 0; border-radius: 24px; padding: clamp(28px, 4vw, 40px) clamp(26px, 4vw, 44px); background: radial-gradient(600px 240px at 88% -20%, rgba(129,140,248,.45), transparent 60%), linear-gradient(150deg, #2a2960, #1a1840); border: 1px solid rgba(167,176,242,.3); box-shadow: 0 44px 90px -46px rgba(79,93,224,.7); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.extras__banner-cube { position: absolute; right: 12%; top: -20px; width: 76px; height: 76px; border-radius: 20px; background: linear-gradient(150deg, rgba(255,255,255,.28), rgba(167,176,242,.14)); border: 1px solid rgba(255,255,255,.28); animation: floatC 8s ease-in-out infinite; pointer-events: none; }
.extras__banner-copy { position: relative; max-width: 46ch; }
.extras__banner-copy p:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: #b8c0f6; margin: 0 0 12px; }
.extras__banner-copy h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; color: #fff; }
.extras__banner-copy p:last-child { font-size: clamp(15px, 1.9vw, 17px); line-height: 1.5; color: #c3c2d6; margin: 0; }

/* ============================================================
   MODEL (VS comparison)
   ============================================================ */
.model__lead { margin: 20px 0 0 0; max-width: 58ch; }
.model__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin: clamp(40px, 6vw, 50px) 0 0; }
.model-card { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(28px, 4vw, 38px); backdrop-filter: blur(12px); }
.model-card--bad { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.model-card--good { background: linear-gradient(160deg, rgba(79,93,224,.32), rgba(79,93,224,.1)); border: 1px solid rgba(167,176,242,.5); box-shadow: 0 44px 90px -40px rgba(79,93,224,.8); }
.model-card__ghost { position: absolute; top: -26px; font-family: var(--display); font-weight: 700; font-size: 150px; line-height: 1; pointer-events: none; }
.model-card--bad .model-card__ghost { right: -12px; color: rgba(255,255,255,.03); }
.model-card--good .model-card__ghost { right: -6px; top: -30px; color: rgba(255,255,255,.07); }
.model-card__inner { position: relative; }
.model-card__kicker { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; margin: 0 0 8px; }
.model-card--bad .model-card__kicker { color: #7d7c98; }
.model-card--good .model-card__kicker { color: #b8c0f6; }
.model-card__title { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 24px; }
.model-card--bad .model-card__title { color: #9d9cba; }
.model-card--good .model-card__title { color: #fff; }
.model-card__badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.model-card__badge span { width: 6px; height: 6px; border-radius: 50%; background: #7fe0a8; }
.model-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.model-list { display: flex; flex-direction: column; gap: 16px; }
.model-list p { display: flex; align-items: flex-start; gap: 13px; margin: 0; font-size: 16px; line-height: 1.45; }
.model-list--bad p { color: #a9a8c0; font-weight: 400; }
.model-list--good p { color: #f2f1fc; font-weight: 500; }
.model-list .mk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; margin-top: 1px; }
.model-list--bad .mk { background: rgba(229,115,115,.14); color: #e57373; }
.model-list--good .mk { background: rgba(127,224,168,.2); color: #7fe0a8; }
.model-card__cta { display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0; font-weight: 700; font-size: 15px; color: var(--dark); background: #fff; padding: 13px 20px; border-radius: 13px; }
.model__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--dark); border: 1px solid rgba(167,176,242,.4); box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: #b8c0f6; }

/* ============================================================
   DEMO section
   ============================================================ */
.section--demo { background: radial-gradient(760px 500px at 8% 0%, rgba(129,140,248,.6), transparent 62%), radial-gradient(760px 500px at 96% 100%, rgba(79,93,224,.4), transparent 62%), #E7E8F6; }
.demo__inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; }
.demo__inner h2 { margin: 20px 0 14px; }
.demo__inner .section-lead { margin: 0 0 clamp(34px, 5vw, 42px); }
.demo__cube-1 { left: 4%; bottom: 12%; width: 110px; height: 110px; border-radius: 28px; background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(167,176,242,.4)); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 30px 60px -24px rgba(79,93,224,.5); backdrop-filter: blur(4px); animation: floatB 9s ease-in-out infinite; }
.demo__cube-2 { right: 5%; top: 16%; width: 88px; height: 88px; border-radius: 24px; background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(129,140,248,.45)); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 26px 50px -22px rgba(79,93,224,.5); backdrop-filter: blur(4px); animation: floatA 8s ease-in-out infinite; }

/* ============================================================
   FORMS
   ============================================================ */
.form { text-align: left; }
.form-card {
  position: relative; background: #fff; border: 1px solid rgba(79,93,224,.18);
  border-top: 4px solid var(--accent); border-radius: 28px; padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 4px 0 rgba(79,93,224,.06), 0 40px 90px -30px rgba(48,45,120,.55), 0 0 0 6px rgba(79,93,224,.08);
}
.field { display: block; }
.field + .field, .field-group + .field, .field + .field-group, .form-check { margin-top: 18px; }
.field__label { display: block; font-weight: 600; font-size: 14px; color: #3a3950; margin: 0 0 8px; }
.input, .textarea {
  width: 100%; padding: 15px 16px; font-size: 16px; color: var(--ink);
  border: 1px solid rgba(25,24,42,.12); border-radius: 13px; background: rgba(255,255,255,.7);
  outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.textarea { resize: vertical; font-family: var(--sans); }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,93,224,.16); background: #fff; }

/* Contact-method toggle */
.method__label { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px; color: #3a3950; margin: 0 0 10px; }
.method { display: flex; gap: 8px; flex-wrap: wrap; }
.method__btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  border: 1px solid rgba(25,24,42,.14); background: rgba(255,255,255,.65); color: var(--muted);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.method__btn.is-active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 12px 26px -14px rgba(79,93,224,.7); }

.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.form-check span { font-size: 13px; line-height: 1.45; color: var(--faint); font-weight: 400; }
.form-submit { width: 100%; margin: 18px 0 0; padding: 18px; font-weight: 700; font-size: 17px; color: #fff; background: var(--accent); border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 22px 48px -18px rgba(79,93,224,.8); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Honeypot — invisible to real visitors, catches bots that fill every input */
.field-honeypot { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; }

.is-hidden { display: none !important; }
.form-error {
  display: block; margin: 0 0 14px; padding: 11px 14px; border-radius: 11px;
  background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.18);
  color: #b91c1c; font-size: 13px; font-weight: 600; line-height: 1.4;
}

/* FAQ form (bordered, no card) */
.faq-form .method { margin: 0 0 16px; }
.faq-form .textarea { margin-top: 14px; }
.faq-form .form-submit { padding: 17px; font-size: 16px; border-radius: 15px; box-shadow: 0 20px 44px -18px rgba(79,93,224,.8); }

/* Underline form (project modal) */
.form--line { display: flex; flex-direction: column; gap: 20px; }
.form--line .field__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: #a3a2ba; text-transform: uppercase; }
.form--line .method__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: #a3a2ba; text-transform: uppercase; }
.input--line {
  width: 100%; padding: 12px 2px; font-family: var(--sans); font-size: 17px; color: var(--ink);
  border: none; border-bottom: 1.5px solid rgba(25,24,42,.14); background: transparent; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease; border-radius: 0;
}
.input--line:focus { border-bottom-color: var(--accent); box-shadow: 0 2px 0 -1px var(--accent); }
.form--line .field, .form--line .field-group, .form--line .form-check { margin-top: 0; }
.form--line .form-submit { margin: 0; padding: 17px; font-size: 16px; border-radius: 15px; box-shadow: 0 20px 44px -18px rgba(79,93,224,.8); }

/* Success notification */
.form-success { display: none; }
.is-sent .form-success { display: block; }
.is-sent .form { display: none; }
.notice { text-align: center; animation: riseUp .5s cubic-bezier(.2,.7,.2,1) both; }
.notice--card { background: #fff; border: 1px solid rgba(79,93,224,.18); border-top: 4px solid var(--accent); border-radius: 28px; padding: clamp(36px, 6vw, 50px) clamp(24px, 4vw, 36px); box-shadow: 0 40px 90px -30px rgba(48,45,120,.5), 0 0 0 6px rgba(79,93,224,.08); }
.notice--plain { padding: clamp(10px, 2vw, 22px) 0; }
.notice__badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  background: linear-gradient(150deg, #eaf6ef, #d6efe0); color: var(--ok);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  animation: okPop .45s cubic-bezier(.2,.9,.3,1.4) both, okRing 2.4s ease-out .45s infinite;
}
.notice__tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ok); background: rgba(28,124,77,.1); border-radius: 999px; padding: 5px 13px; margin: 0 0 14px; }
.notice__title { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -.02em; color: var(--ink); }
.notice__text { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0; font-weight: 400; }

/* ============================================================
   PROJECT MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: clamp(20px, 6vh, 64px) clamp(16px, 4vw, 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
body.modal-open .modal { opacity: 1; pointer-events: auto; }
.modal__backdrop { position: fixed; inset: 0; background: rgba(18,16,38,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__card { position: relative; width: 100%; max-width: 480px; margin: auto; background: #fff; border: 1px solid rgba(25,24,42,.06); border-radius: 26px; padding: clamp(28px, 4vw, 40px); box-shadow: 0 60px 120px -40px rgba(18,16,38,.6); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
body.modal-open .modal__card { transform: none; }
.modal__close { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(25,24,42,.05); border: 1px solid rgba(25,24,42,.1); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.modal__card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 22px; color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--dark); color: #fff; padding: clamp(44px, 6vw, 58px) 0; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer p { font-size: 15px; color: #9c9bb5; margin: 0; max-width: 40ch; font-weight: 400; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__row a { font-weight: 600; font-size: 15px; color: #c8c7da; border: 1px solid rgba(255,255,255,.14); padding: 11px 18px; border-radius: 12px; }
.footer__row a.btn-accent { color: #fff; border: none; font-weight: 700; padding: 12px 20px; }
.footer__sub { font-size: 13px; color: #7d7c98; font-weight: 400; }
.footer__sub span { color: var(--accent-2); font-weight: 600; }
.footer__legal { max-width: 1220px; margin: 32px auto 0; padding: 24px clamp(20px, 5vw, 34px) 0; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.footer__legal a { color: var(--accent-2); }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes riseUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-24px) rotate(-4deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(11deg); } 50% { transform: translateY(20px) rotate(6deg); } }
@keyframes floatC { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-16px) rotate(-2deg); } }
@keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes ctaSheen { 0% { left: -70%; } 22% { left: 140%; } 100% { left: 140%; } }
@keyframes okPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes okRing { 0% { box-shadow: 0 0 0 0 rgba(28,124,77,.4); } 70% { box-shadow: 0 0 0 18px rgba(28,124,77,0); } 100% { box-shadow: 0 0 0 0 rgba(28,124,77,0); } }

/* ---------- Heading helpers (replace inline styles) ---------- */
.h2--how { max-width: 22ch; margin-top: 20px; }
.h2--gap { margin: 20px 0 14px; }
.h2--model { max-width: 20ch; margin: 20px 0 14px; }
.section--dark .section__head-lead,
.section--model .model__lead { color: #b3b2cc; }
.notice__title--lg { font-size: 27px; }
.notice__demo-link { font-size: 15px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(79,93,224,.18); font-weight: 500; }
.notice__demo-link a { color: var(--accent); text-decoration: underline; }
.textarea--fixed { resize: none; }

/* Entrance for hero */
.rise { opacity: 0; animation: riseUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .13s; }
.rise-3 { animation-delay: .21s; }
.rise-4 { animation-delay: .29s; }
.rise-5 { animation-delay: .4s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: flex; }
  .tab-btn { flex: 1 1 100%; }
  .faq__rail { position: static; }
  .model__vs { display: none; }
}
@media (min-width: 861px) {
  .menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .rise { opacity: 1; }
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px;
  padding: 18px clamp(20px, 5vw, 34px);
  background: var(--dark); color: #e7e7f3;
  box-shadow: 0 -18px 40px -20px rgba(0,0,0,.5);
  transform: translateY(110%); transition: transform .4s cubic-bezier(.6,.2,.1,1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__text { font-size: 13.5px; line-height: 1.55; color: #b8b7ce; max-width: 640px; margin: 0; }
.cookie-banner__text a { color: var(--accent-2); }
.cookie-banner__btn {
  flex-shrink: 0; font-weight: 700; font-size: 14px; color: #fff; background: var(--accent);
  border: none; border-radius: 12px; padding: 12px 26px; cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(79,93,224,.8); transition: opacity .2s ease;
}
.cookie-banner__btn:hover { opacity: .88; }
@media (max-width: 560px) {
  .cookie-banner { justify-content: flex-start; padding-bottom: 20px; }
  .cookie-banner__btn { width: 100%; }
}