/* ============================================================
   4DK / «Что делать Внедрение» — reconstructed brand tokens
   Derived from logo (blue #1068BF, ink #333238) + ТЗ spec.
   ============================================================ */
.test-drive-page {
  /* ---- Brand blues (dominant) — brandbook ---- */
  --blue-primary: #1798F5;
  --blue-hover:   #0B5CAD;
  --blue-deep:    #0B5CAD;
  --blue-light:   #E8F4FD;   /* badge / soft fills */
  --blue-50:      #F3F9FE;   /* section tint */
  --blue-ring:    rgba(23,152,245,.16);

  /* ---- Yellow accent (CTA only, 1–2 per screen) ---- */
  --yellow-accent: #FBE022;
  --yellow-hover:  #DFC71A;
  --yellow-light:  #FEFBE8;
  --yellow-deep:   #7B6000;

  /* ---- Ink & grays — brandbook ---- */
  --gray-900: #30353A;   /* Dark Primary — headings & body */
  --gray-800: #30353A;
  --gray-700: #444B52;
  --gray-600: #5E6873;
  --gray-500: #798490;   /* Grey 80 — secondary */
  --gray-400: #A7AFB8;
  --gray-300: #E9E9E9;   /* Grey 40 — borders */
  --gray-200: #E9E9E9;
  --gray-100: #F9F9F9;   /* Grey 20 — section bg */
  --gray-50:  #F9F9F9;
  --white: #FFFFFF;

  /* ---- States — brandbook ---- */
  --green:  #A7C435;        /* brand green */
  --green-light: #F4F8E4;
  --green-tag: #A7C435;     /* lime tag */
  --red:    #E53E3E;
  --red-light: #FFF5F5;
  --purple: #520BAD;        /* violet */
  --purple-light: #F3EEFF;
  --orange: #EAA335;

  /* ---- Shadows — brandbook ---- */
  --shadow-card:  0 2px 12px rgba(0,0,0,.08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.12);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.18);
  --shadow-cta:   0 6px 18px rgba(251,224,34,.45);

  /* ---- Radii — brandbook ---- */
  --r-btn: 8px;
  --r-card: 16px;
  --r-lg: 24px;
  --r-pill: 9999px;

  /* ---- Layout ---- */
  --maxw: 1100px;
  --gut: 32px;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.test-drive-page, .test-drive-page * { box-sizing: border-box; }
.test-drive-page { scroll-behavior: smooth; }

.test-drive-page {
  margin: 0;
  font-family: var(--font);
  color: var(--gray-800);
  background: var(--white);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.test-drive-page img { max-width: 100%; display: block; }
.test-drive-page a { color: inherit; text-decoration: none; }

.test-drive-page ::selection { background: var(--blue-light); color: var(--blue-deep); }

/* ---------- Layout helpers ---------- */
.test-drive-page .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.test-drive-page .section { padding: 72px 0; }
.test-drive-page .section--tint { background: var(--gray-100); }
.test-drive-page .section--blue { background: var(--blue-50); }

.test-drive-page .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.test-drive-page .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---------- Type ---------- */
.test-drive-page .eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-primary);
  font-weight: 600;
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.test-drive-page h1, .test-drive-page h2, .test-drive-page h3 { color: var(--gray-900); margin: 0; text-wrap: balance; }
.test-drive-page .h1 { font-size: 48px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.test-drive-page .h2 { font-size: 36px; font-weight: 800; line-height: 1.14; letter-spacing: -0.014em; }
.test-drive-page .h2 em { color: var(--blue-primary); font-style: normal; }
.test-drive-page .h1 em { color: var(--blue-primary); font-style: normal; }
.test-drive-page .lead { font-size: 19px; color: var(--gray-500); line-height: 1.55; text-wrap: pretty; }
.test-drive-page .section-head { max-width: 760px; margin-bottom: 40px; }
.test-drive-page .section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.test-drive-page .num { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ---------- Buttons ---------- */
.test-drive-page .btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: var(--r-btn);
  padding: 14px 26px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  line-height: 1.1;
  text-align: center;
}
.test-drive-page .btn:active { transform: translateY(0); }

.test-drive-page .btn-cta { background: var(--yellow-accent); color: var(--gray-900); box-shadow: var(--shadow-cta); }
.test-drive-page .btn-cta:hover { background: var(--yellow-hover); transform: translateY(-2px); }

.test-drive-page .btn-primary { background: var(--blue-primary); color: #fff; }
.test-drive-page .btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.test-drive-page .btn-ghost { background: transparent; color: var(--blue-primary); border: 1.5px solid var(--gray-200); }
.test-drive-page .btn-ghost:hover { border-color: var(--blue-primary); background: var(--blue-50); }

.test-drive-page .btn-block { width: 100%; }
.test-drive-page .btn-lg { padding: 17px 30px; font-size: 17px; }

/* ---------- Pills / badges / tags ---------- */
.test-drive-page .pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue-light); color: var(--blue-primary);
  font-weight: 700; font-size: 14px;
  padding: 8px 16px; border-radius: var(--r-pill);
}
.test-drive-page .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-accent); box-shadow: 0 0 0 3px rgba(251,224,34,.30); }

.test-drive-page .tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 6px 13px; border-radius: var(--r-pill); }
.test-drive-page .tag-blue { background: var(--blue-light); color: var(--blue-primary); }
.test-drive-page .tag-green { background: var(--green-light); color: #276749; }
.test-drive-page .tag-purple { background: var(--purple-light); color: var(--purple); }
.test-drive-page .tag-amber { background: var(--yellow-light); color: #7B6000; }

/* ---------- Cards ---------- */
.test-drive-page .card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-card);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.test-drive-page .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--blue-ring); }

.test-drive-page .icon-chip {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--blue-light); color: var(--blue-primary);
  display: grid; place-items: center; margin-bottom: 16px;
}
.test-drive-page .icon-chip svg { width: 24px; height: 24px; }

/* ---------- Checklist ---------- */
.test-drive-page .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.test-drive-page .checklist li { display: flex; gap: 13px; align-items: flex-start; line-height: 1.45; }
.test-drive-page .check-ico {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-primary); color: #fff;
  display: grid; place-items: center; margin-top: 1px;
}
.test-drive-page .check-ico svg { width: 13px; height: 13px; }
.test-drive-page .check-ico.green { background: var(--green); }

/* ---------- Forms ---------- */
.test-drive-page .field { display: block; margin-bottom: 14px; }
.test-drive-page .field-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.test-drive-page .field-label .req { color: var(--blue-primary); }
.test-drive-page .input, .test-drive-page .select, .test-drive-page .textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--gray-900);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.test-drive-page .input::placeholder, .test-drive-page .textarea::placeholder { color: var(--gray-400); }
.test-drive-page .input:focus, .test-drive-page .select:focus, .test-drive-page .textarea:focus {
  outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 4px var(--blue-ring);
}
.test-drive-page .input.err, .test-drive-page .select.err { border-color: var(--red); box-shadow: 0 0 0 4px rgba(214,69,69,.14); }
.test-drive-page .textarea { resize: vertical; min-height: 92px; }
.test-drive-page .select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2374747F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.test-drive-page .field-err { color: var(--red); font-size: 12.5px; margin-top: 5px; display: none; }
.test-drive-page .field.show-err .field-err { display: block; }

.test-drive-page .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--gray-500); line-height: 1.5; margin: 4px 0 16px; cursor: pointer; }
.test-drive-page .consent input { margin-top: 2px; accent-color: var(--blue-primary); width: 16px; height: 16px; flex: none; }
.test-drive-page .consent a { color: var(--blue-primary); text-decoration: underline; }

.test-drive-page .microcopy { font-size: 12px; color: var(--gray-500); line-height: 1.5; margin-top: 12px; }

/* ---------- Notice ---------- */
.test-drive-page .notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--yellow-light);
  border: 1px solid #F2E6A0;
  border-left: 4px solid var(--yellow-accent);
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--gray-700);
  font-weight: 600;
  line-height: 1.5;
}
.test-drive-page .notice svg { flex: none; color: var(--yellow-deep); width: 24px; height: 24px; margin-top: 1px; }

/* ---------- Animations (cascade, reduced-motion safe) ---------- */
.test-drive-page @media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
}

/* ---------- Utilities ---------- */
.test-drive-page .muted { color: var(--gray-500); }
.test-drive-page .center { text-align: center; }
.test-drive-page .mt-8 { margin-top: 8px; } .test-drive-page .mt-16 { margin-top: 16px; } .test-drive-page .mt-24 { margin-top: 24px; } .test-drive-page .mt-32 { margin-top: 32px; } .test-drive-page .mt-40 { margin-top: 40px; }
.test-drive-page .nowrap { white-space: nowrap; }

/* ============================================================
   Section layout — Тест-драйв сопровождения 1С
   ============================================================ */
/* ---------- HERO ---------- */
.test-drive-page .hero {
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(23,152,245,.10), transparent 60%),
    linear-gradient(180deg, var(--blue-50) 0%, #fff 72%);
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--gray-100);
}
.test-drive-page .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
.test-drive-page .hero-left .h1 { max-width: 600px; }
.test-drive-page .hero-bullets li { font-weight: 600; color: var(--gray-800); font-size: 15.5px; }

.test-drive-page .trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--gray-200);
}
.test-drive-page .trust-item { display: flex; flex-direction: column; line-height: 1.15; }
.test-drive-page .trust-n { font-size: 19px; font-weight: 700; color: var(--blue-primary); }
.test-drive-page .trust-t { font-size: 12px; color: var(--gray-500); }

.test-drive-page .hero-right { position: sticky; top: 24px; }
.test-drive-page .hero-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--gray-100);
  padding: 28px;
}
.test-drive-page .hero-form-note {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  font-size: 12.5px; color: var(--gray-500);
  margin-top: 14px;
}

/* ---------- Grids ---------- */
.test-drive-page .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.test-drive-page .value-grid > .card:nth-child(4), .test-drive-page .value-grid > .card:nth-child(5) { grid-column: span 1; }
@media (min-width: 861px) {
  .test-drive-page .value-grid { grid-template-columns: repeat(6, 1fr); }
  .test-drive-page .value-grid > .card { grid-column: span 2; }
  .test-drive-page .value-grid > .card:nth-child(4) { grid-column: 2 / span 2; }
  .test-drive-page .value-grid > .card:nth-child(5) { grid-column: 4 / span 2; }
}

.test-drive-page .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 861px) {
  .test-drive-page .audience-grid { grid-template-columns: repeat(6, 1fr); }
  .test-drive-page .audience-grid > .aud-card { grid-column: span 2; }
  .test-drive-page .audience-grid > .aud-card:nth-child(4) { grid-column: 2 / span 2; }
  .test-drive-page .audience-grid > .aud-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- Included ---------- */
.test-drive-page .included-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.test-drive-page .incl-badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; padding: 9px 16px;
  background: var(--blue-light); color: var(--blue-deep);
  border-radius: var(--r-pill); font-weight: 700; font-size: 14px;
}

/* ---------- Pain ---------- */
.test-drive-page .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; max-width: 880px; margin: 0 auto; }
.test-drive-page .pain-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 16px 18px;
  font-weight: 600; font-size: 14.5px; color: var(--gray-800);
}
.test-drive-page .pain-mark {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--blue-light); color: var(--blue-primary);
  display: grid; place-items: center;
}
.test-drive-page .pain-mark svg { width: 14px; height: 14px; }

/* ---------- Selector ---------- */
.test-drive-page .selector {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 32px; align-items: start;
}
.test-drive-page .sel-steps { display: grid; gap: 22px; }
.test-drive-page .sel-q { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; margin-bottom: 11px; color: var(--gray-900); }
.test-drive-page .sel-q-n { font-size: 13px; color: #fff; background: var(--blue-primary); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; font-weight: 700; }
.test-drive-page .sel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.test-drive-page .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-700);
  border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer;
  transition: all .15s ease;
}
.test-drive-page .chip:hover { border-color: var(--blue-primary); color: var(--blue-primary); }
.test-drive-page .chip.active { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; }

.test-drive-page .sel-result { position: sticky; top: 24px; }
.test-drive-page .sel-result-empty {
  background: var(--blue-50); border: 1.5px dashed var(--blue-ring);
  border-radius: var(--r-card); padding: 34px 26px; text-align: center;
  position: relative;
}
.test-drive-page .sel-prog { position: absolute; top: 16px; right: 18px; font-weight: 700; font-size: 13px; color: var(--blue-primary); }
.test-drive-page .sel-result-card {
  background: linear-gradient(180deg, #fff, var(--blue-50));
  border: 1px solid var(--blue-ring);
  border-radius: var(--r-card); padding: 26px;
  box-shadow: var(--shadow-card);
  animation: pop .35s cubic-bezier(.2,.8,.2,1.2);
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Steps ---------- */
.test-drive-page .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.test-drive-page .step { position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-card); padding: 26px 22px; }
.test-drive-page .step-n {
  font-size: 22px; font-weight: 800; color: var(--blue-primary);
  background: var(--blue-light); width: 50px; height: 50px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 16px;
}
.test-drive-page .step-arrow { position: absolute; top: 38px; right: -22px; color: var(--gray-300); z-index: 2; }

/* ---------- Why / tags ---------- */
.test-drive-page .tag-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.test-drive-page .tag-row .tag { font-size: 13.5px; padding: 8px 16px; }

/* ---------- Compare ---------- */
.test-drive-page .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 860px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.test-drive-page .cmp-col { padding: 26px; }
.test-drive-page .cmp-col--dim { background: #fff; border: 1px solid var(--gray-200); border-right: none; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.test-drive-page .cmp-col--hi { background: linear-gradient(180deg, var(--blue-primary), var(--blue-hover)); color: #fff; border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-hover); }
.test-drive-page .cmp-head { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.08); }
.test-drive-page .cmp-col--hi .cmp-head { border-color: rgba(255,255,255,.22); }
.test-drive-page .cmp-col--dim .cmp-head { color: var(--gray-500); }
.test-drive-page .cmp-row { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; font-size: 14.5px; line-height: 1.4; }
.test-drive-page .cmp-col--dim .cmp-row { color: var(--gray-500); border-bottom: 1px solid var(--gray-100); }
.test-drive-page .cmp-col--hi .cmp-row { border-bottom: 1px solid rgba(255,255,255,.14); font-weight: 600; }
.test-drive-page .cmp-row:last-child { border-bottom: none; }
.test-drive-page .cmp-check { flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--yellow-accent); color: var(--gray-900); display: grid; place-items: center; margin-top: 1px; }

/* ---------- Risk ---------- */
.test-drive-page .risk-wrap { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center; }
.test-drive-page .risk-cards { display: grid; gap: 14px; }
.test-drive-page .risk-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--green); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.test-drive-page .risk-card .check-ico { margin-top: 2px; }

/* ---------- Reviews ---------- */
.test-drive-page .review-card { display: flex; flex-direction: column; }
.test-drive-page .rv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.test-drive-page .rv-logo { width: 46px; height: 46px; border-radius: 11px; background: var(--gray-100); color: var(--gray-700); font-weight: 800; font-size: 15px; display: grid; place-items: center; flex: none; font-family: var(--mono); }
.test-drive-page .rv-co { font-weight: 700; font-size: 14.5px; }
.test-drive-page .rv-stars { display: flex; gap: 2px; color: var(--yellow-accent); margin-top: 2px; }
.test-drive-page .rv-text { font-size: 14px; color: var(--gray-700); line-height: 1.55; margin: 0 0 16px; flex: 1; }
.test-drive-page .review-card .tag { align-self: flex-start; margin-bottom: 14px; }
.test-drive-page .rv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--blue-primary); }
.test-drive-page .rv-link:hover { color: var(--blue-deep); }
.test-drive-page .all-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue-primary); font-size: 15px; }
.test-drive-page .all-link:hover { gap: 12px; }

/* ---------- Experts ---------- */
.test-drive-page .experts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.test-drive-page .expert-card { text-align: center; }
.test-drive-page .ex-photo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 300px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: var(--gray-100, #eef1f5);
}
.test-drive-page .expert-card h3 { text-align: center; }
.test-drive-page .ex-role { font-size: 13.5px; font-weight: 700; color: var(--blue-primary); margin-bottom: 10px; }
.test-drive-page .ex-spec { font-size: 13.5px; color: var(--gray-500, #667085); font-style: italic; line-height: 1.5; max-width: 260px; margin: 0 auto; }

/* ---------- FAQ ---------- */
.test-drive-page .faq-wrap { max-width: 820px; }
.test-drive-page .faq-list { display: grid; gap: 12px; }
.test-drive-page .faq-item { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.test-drive-page .faq-item.open { border-color: var(--blue-ring); box-shadow: var(--shadow-card); }
.test-drive-page .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; cursor: pointer; padding: 19px 22px; font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--gray-900); text-align: left; }
.test-drive-page .faq-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--gray-100); color: var(--blue-primary); display: grid; place-items: center; transition: transform .25s, background .2s; }
.test-drive-page .faq-item.open .faq-ico { transform: rotate(180deg); background: var(--blue-light); }
.test-drive-page .faq-a-wrap { overflow: hidden; transition: max-height .3s ease; }
.test-drive-page .faq-a { margin: 0; padding: 0 22px 20px; color: var(--gray-600); font-size: 14.5px; line-height: 1.6; }

/* ---------- Final ---------- */
.test-drive-page .final { background: linear-gradient(135deg, #0B5CAD 0%, #1A3F9E 70%, #3A1B8F 100%); position: relative; overflow: hidden; }
.test-drive-page .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 400px at 16% 0%, rgba(23,152,245,.5), transparent 62%), radial-gradient(520px 320px at 94% 100%, rgba(82,11,173,.42), transparent 64%); pointer-events: none; }
.test-drive-page .final-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 52px; align-items: center; position: relative; }
.test-drive-page .final-trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.test-drive-page .final-trust li { display: flex; flex-direction: column; color: rgba(255,255,255,.7); font-size: 12.5px; }
.test-drive-page .final-trust-n { font-size: 22px; font-weight: 800; color: #fff; }
.test-drive-page .final-card { background: #fff; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-modal); }

/* ---------- Modal ---------- */
.test-drive-page .modal-ov { position: fixed; inset: 0; background: rgba(16,28,50,.55); backdrop-filter: blur(3px); z-index: 200; display: grid; place-items: center; padding: 20px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.test-drive-page .modal-card { background: #fff; border-radius: var(--r-lg); padding: 30px; width: 100%; max-width: 480px; box-shadow: var(--shadow-modal); position: relative; max-height: 92vh; overflow-y: auto; animation: pop .3s cubic-bezier(.2,.8,.2,1.2); }
.test-drive-page .modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--gray-100); color: var(--gray-600); cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.test-drive-page .modal-x:hover { background: var(--gray-200); }

/* ---------- Sticky mobile CTA ---------- */
.test-drive-page .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--gray-200); box-shadow: 0 -6px 20px rgba(20,30,55,.08); transform: translateY(120%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.test-drive-page .sticky-cta.show { transform: none; }

/* ---------- Side widget ---------- */
.test-drive-page .side-widget { position: fixed; right: 22px; bottom: 22px; z-index: 140; width: 320px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--shadow-modal); padding: 22px; transform: translateY(140%) scale(.96); opacity: 0; pointer-events: none; transition: transform .4s cubic-bezier(.2,.8,.2,1.1), opacity .3s; }
.test-drive-page .side-widget.open { transform: none; opacity: 1; pointer-events: auto; }
.test-drive-page .side-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--gray-100); color: var(--gray-500); cursor: pointer; display: grid; place-items: center; }
.test-drive-page .side-x:hover { background: var(--gray-200); }
.test-drive-page .side-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--blue-light); color: var(--blue-primary); display: grid; place-items: center; margin-bottom: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.test-drive-page @media (max-width: 1040px) {
  .selector { grid-template-columns: 1fr; }
  .sel-result { position: static; }
}
@media (max-width: 860px) {
  .test-drive-page { --gut: 20px; }
  .test-drive-page .section { padding: 52px 0; }
  .test-drive-page .h1 { font-size: 36px; }
  .test-drive-page .h2 { font-size: 27px; }
  .test-drive-page .lead { font-size: 17px; }
  .test-drive-page .hero { padding: 32px 0 44px; }
  .test-drive-page .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .test-drive-page .hero-right { position: static; order: -1; }
  .test-drive-page .included-grid, .test-drive-page .risk-wrap, .test-drive-page .final-grid { grid-template-columns: 1fr; gap: 32px; }
  .test-drive-page .value-grid, .test-drive-page .audience-grid, .test-drive-page .grid-3, .test-drive-page .why-grid, .test-drive-page .steps-grid, .test-drive-page .experts-grid, .test-drive-page .reviews-grid { grid-template-columns: 1fr 1fr !important; }
  .test-drive-page .value-grid > .card, .test-drive-page .audience-grid > .aud-card { grid-column: auto !important; }
  .test-drive-page .step-arrow { display: none; }
  .test-drive-page .sticky-cta { display: flex; }
  .test-drive-page .side-widget { display: none; }
  .test-drive-page .pain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .test-drive-page .value-grid, .test-drive-page .audience-grid, .test-drive-page .grid-3, .test-drive-page .why-grid, .test-drive-page .steps-grid, .test-drive-page .experts-grid, .test-drive-page .reviews-grid, .test-drive-page .compare { grid-template-columns: 1fr !important; }
  .test-drive-page .h1 { font-size: 30px; }
  .test-drive-page .h2 { font-size: 23px; }
  .test-drive-page .cmp-col--dim { border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--gray-200); border-bottom: none; }
  .test-drive-page .cmp-col--hi { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .test-drive-page .hero-form, .test-drive-page .final-card, .test-drive-page .modal-card { padding: 22px; }
  .test-drive-page .trust-n { font-size: 17px; }
}

.test-drive-page .ex-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:18px;margin-bottom:18px;background:#e5e7eb}
.test-drive-page .hero-cta-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-card)}
.test-drive-page .hero-cta-card .btn{margin-top:22px;width:100%}
.test-drive-page .faq-q{width:100%}
.test-drive-page button{font:inherit}
@media(max-width:700px){.test-drive-page .hero-cta-card{padding:22px}}