/* ============================================================
   Travel Engagement OS — Site styles (consumes tokens.css)
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-400);
  line-height: var(--lh-normal); color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }
h1,h2,h3,h4 { margin: 0 0 .5em; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 800; }
h1 { font-size: var(--fs-900); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }
small { font-size: var(--fs-200); }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-200); color: var(--ink-900); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark { background: var(--grad-dark); color: var(--fg-invert); }
.section--soft { background: var(--bg-soft); }
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3,.grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px) { .grid--2,.grid--3,.grid--4 { grid-template-columns: 1fr;} }

.eyebrow { display:inline-flex; align-items:center; gap:.5em; font-size: var(--fs-200); font-weight:700;
  letter-spacing:.12em; text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--sp-3); }
.eyebrow::before { content:""; width: 22px; height: 2px; background: currentColor; border-radius:2px; }
.lead { font-size: var(--fs-500); color: var(--fg-muted); max-width: 62ch; }
.section--dark .lead, .section--dark p { color: #c7cde6; }
.muted { color: var(--fg-muted); }
.text-center { text-align: center; }
.center { margin-inline: auto; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size: var(--fs-400); line-height:1; padding: .95em 1.5em; border-radius: var(--r-full);
  border: 2px solid transparent; cursor:pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease);
  text-decoration:none; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); text-decoration:none; }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-glow); }
.btn--primary:hover { color:#fff; box-shadow: 0 16px 44px rgba(63,95,245,.42); }
.btn--accent { background: var(--grad-sunset); color:#fff; box-shadow: 0 12px 32px rgba(240,127,8,.30); }
.btn--accent:hover { color:#fff; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--ghost:hover { color: var(--fg); border-color: var(--brand-400); }
.section--dark .btn--ghost { color:#fff; border-color: rgba(255,255,255,.35); }
.section--dark .btn--ghost:hover { border-color:#fff; color:#fff; }
.btn--lg { font-size: 1.05rem; padding: 1.1em 1.9em; }
.btn--block { width:100%; }

/* Header */
.header { position: sticky; top:0; z-index: 50; height: var(--header-h); display:flex; align-items:center;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.header__inner { display:flex; align-items:center; gap: var(--sp-6); width:100%; }
.logo { display:flex; align-items:center; gap:.6em; font-weight:800; font-size:1.05rem; color: var(--fg); text-decoration:none; letter-spacing:-.02em; }
.logo:hover { text-decoration:none; color: var(--fg); }
.logo__mark { width:32px; height:32px; border-radius:9px; background: var(--grad-brand); display:grid; place-items:center; color:#fff; font-size:1rem; box-shadow: var(--sh-sm); }
.nav { margin-left:auto; display:flex; align-items:center; gap: var(--sp-5); }
.nav a { color: var(--fg); font-weight:600; font-size: var(--fs-300); }
.nav a:hover { color: var(--brand-600); text-decoration:none; }
.nav__cta { display:none; }
@media (min-width: 860px) { .nav__cta { display:inline-flex; } }
@media (max-width: 859px) { .nav a:not(.btn) { display:none; } }
.menu-btn { display:none; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem,7vw,6rem); }
.hero--mesh { background: var(--grad-mesh), var(--bg-soft); }
.hero--dark { background: var(--grad-dark); color:#fff; }
.hero__grid { display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--sp-5); }
.hero .lead { font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-5); }
.hero__trust { display:flex; flex-wrap:wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.hero__trust div { display:flex; flex-direction:column; }
.hero__trust b { font-size: 1.5rem; letter-spacing:-.02em; }
.hero__trust span { font-size: var(--fs-200); color: var(--fg-muted); }
.section--dark .hero__trust span, .hero--dark .hero__trust span { color:#a9b0d0; }
.badges { display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-200); font-weight:600; color: var(--fg-muted); }
.badges span::before { content:"✓"; color: var(--success); margin-right:.35em; font-weight:800; }

/* Card */
.card { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); height:100%; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card__icon { width:48px; height:48px; border-radius: 12px; display:grid; place-items:center; font-size:1.35rem;
  background: var(--brand-50); color: var(--brand-600); margin-bottom: var(--sp-4); }
.section--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow:none; backdrop-filter: blur(6px); }
.section--dark .card:hover { background: rgba(255,255,255,.08); }
.section--dark .card__icon { background: rgba(255,255,255,.10); color:#fff; }
.card h3 { font-size: var(--fs-600); }
.card p:last-child { margin-bottom: 0; }
.card--stat b { display:block; font-size: clamp(1.8rem,3.4vw,2.5rem); letter-spacing:-.03em; background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps { display:grid; gap: var(--sp-5); counter-reset: step; }
.step { position:relative; padding-left: 4.2rem; }
.step::before { counter-increment: step; content: counter(step); position:absolute; left:0; top:-.2rem;
  width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.2rem;
  background: var(--grad-brand); color:#fff; box-shadow: var(--sh-glow); }
.step h3 { margin-bottom:.3em; }
.step p { margin:0; color: var(--fg-muted); }
.section--dark .step p { color:#a9b0d0; }

/* Pricing */
.pricing { align-items:stretch; }
.plan { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); box-shadow: var(--sh-sm); height:100%; }
.plan--featured { border:2px solid var(--brand-500); box-shadow: var(--sh-lg); transform: scale(1.03); z-index:2; }
.plan--featured::after { content:"Популярный"; position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background: var(--grad-brand); color:#fff; font-size: var(--fs-200); font-weight:700; padding:.3em 1em; border-radius: var(--r-full); }
.plan__name { font-size: var(--fs-600); margin-bottom: .1em; }
.plan__tag { color: var(--fg-muted); font-size: var(--fs-200); margin-bottom: var(--sp-4); }
.plan__price { font-size: clamp(1.9rem,3.6vw,2.6rem); font-weight:800; letter-spacing:-.03em; }
.plan__price small { font-size:.9rem; font-weight:600; color: var(--fg-muted); letter-spacing:0; }
.plan__promise { margin: var(--sp-3) 0 var(--sp-5); font-weight:600; color: var(--brand-700); }
.plan ul { list-style:none; padding:0; margin:0 0 var(--sp-6); display:grid; gap:.6em; }
.plan li { padding-left:1.6em; position:relative; font-size: var(--fs-300); }
.plan li::before { content:"✓"; position:absolute; left:0; color: var(--success); font-weight:800; }
.plan .btn { margin-top:auto; }

/* FAQ */
.faq { display:grid; gap: var(--sp-3); }
details.qa { background:#fff; border:1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
details.qa summary { cursor:pointer; font-weight:700; font-size: var(--fs-500); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:"+"; font-size:1.4rem; color: var(--brand-600); transition: transform var(--dur) var(--ease); }
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { margin: var(--sp-3) 0 0; color: var(--fg-muted); }

/* Table */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius: var(--r-lg); }
table.tbl { width:100%; border-collapse: collapse; font-size: var(--fs-300); min-width: 640px; }
table.tbl th, table.tbl td { padding: .85em 1em; text-align:left; border-bottom:1px solid var(--border); }
table.tbl th { background: var(--bg-soft); font-weight:700; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl td b { color: var(--brand-700); }

/* CTA band */
.cta-band { border-radius: var(--r-xl); padding: clamp(2.5rem,5vw,4rem); background: var(--grad-dark); color:#fff; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: var(--grad-mesh); opacity:.8; pointer-events:none; }
.cta-band > * { position:relative; }
.urgency { display:inline-flex; align-items:center; gap:.5em; background: rgba(255,154,46,.16); color: var(--accent-400);
  border:1px solid rgba(255,154,46,.4); border-radius: var(--r-full); padding:.4em 1em; font-size: var(--fs-200); font-weight:700; }

/* Footer */
.footer { background: var(--bg-dark); color:#a9b0d0; padding-block: var(--sp-12) var(--sp-8); }
.footer a { color:#d7dbef; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { color:#fff; font-size: var(--fs-300); text-transform:uppercase; letter-spacing:.1em; margin-bottom: var(--sp-4); }
.footer ul { list-style:none; padding:0; display:grid; gap:.6em; }
.footer__bottom { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap: var(--sp-4); justify-content:space-between; font-size: var(--fs-200); }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; left:0; right:0; bottom:0; z-index:60; padding: var(--sp-3); background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); border-top:1px solid var(--border); display:none; }
@media (max-width: 719px) { .sticky-cta { display:flex; gap: var(--sp-2); } body { padding-bottom: 72px; } }

/* Widgets — Wheel */
.wheel-widget { display:grid; place-items:center; gap: var(--sp-4); }
.wheel-stage { position:relative; width: min(340px, 82vw); aspect-ratio:1; }
.wheel-ring { position:absolute; inset:0; border-radius:50%; box-shadow: var(--sh-lg), inset 0 0 0 10px #fff; overflow:hidden; transition: transform 4.2s cubic-bezier(.15,.9,.05,1); background: conic-gradient(
  var(--brand-500) 0 12.85%, #fff 12.85% 14.28%,
  var(--accent-500) 14.28% 26.13%, #fff 26.13% 28.56%,
  var(--violet-500) 28.56% 40.41%, #fff 40.41% 42.84%,
  var(--teal-500) 42.84% 54.69%, #fff 54.69% 57.12%,
  var(--pink-500) 57.12% 68.97%, #fff 68.97% 71.4%,
  var(--brand-700) 71.4% 83.25%, #fff 83.25% 85.68%,
  var(--accent-600) 85.68% 97.53%, #fff 97.53% 100%); }
.wheel-hub { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:26%; aspect-ratio:1; border-radius:50%;
  background:#fff; box-shadow: var(--sh-md); display:grid; place-items:center; font-size:1.5rem; cursor:pointer; z-index:3; border:2px solid var(--border); }
.wheel-pointer { position:absolute; top:-8px; left:50%; transform: translateX(-50%); width:0; height:0; z-index:4;
  border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid var(--ink-900); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.wheel-result { min-height: 2.6em; text-align:center; font-weight:700; }
.wheel-result b { color: var(--brand-600); font-size:1.15em; }

/* ROI calculator */
.roi { display:grid; gap: var(--sp-4); }
.roi__field { display:grid; gap:.4em; }
.roi__field label { font-weight:600; font-size: var(--fs-300); display:flex; justify-content:space-between; }
.roi__field label output { color: var(--brand-600); font-weight:800; }
input[type=range] { width:100%; accent-color: var(--brand-500); height: 6px; }
.roi__result { background: var(--grad-dark); color:#fff; border-radius: var(--r-lg); padding: var(--sp-6); }
.roi__result b { display:block; font-size: clamp(1.6rem,3.4vw,2.4rem); letter-spacing:-.03em; color: #9fe6a0; }
.roi__result .roi__metrics { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width:600px){ .roi__result .roi__metrics { grid-template-columns:1fr; } }
.roi__metrics div span { font-size: var(--fs-200); color:#a9b0d0; display:block; }
.roi__metrics div b { font-size:1.3rem; color:#fff; }

/* Quiz */
.quiz { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-md); }
.quiz__q { font-weight:700; font-size: var(--fs-500); margin-bottom: var(--sp-4); }
.quiz__opts { display:grid; gap: var(--sp-2); }
.quiz__opt { text-align:left; padding:.85em 1.1em; border:2px solid var(--border); border-radius: var(--r-md); background:#fff;
  cursor:pointer; font: inherit; font-weight:600; transition: all var(--dur-fast) var(--ease); }
.quiz__opt:hover { border-color: var(--brand-400); background: var(--brand-50); }
.quiz__opt.is-active { border-color: var(--brand-500); background: var(--brand-50); }
.quiz__bar { height:6px; border-radius:var(--r-full); background: var(--ink-100); overflow:hidden; margin-bottom: var(--sp-5); }
.quiz__bar i { display:block; height:100%; background: var(--grad-brand); width:0; transition: width var(--dur) var(--ease); }
.quiz__nav { display:flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.quiz__verdict { text-align:center; }
.quiz__verdict .score { font-size: clamp(2.4rem,6vw,3.6rem); font-weight:800; letter-spacing:-.03em; background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Forms */
.form { display:grid; gap: var(--sp-4); }
.form__row { display:grid; gap: var(--sp-4); grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .form__row { grid-template-columns:1fr; } }
.field { display:grid; gap:.4em; }
.field label { font-weight:600; font-size: var(--fs-300); }
.field input, .field select, .field textarea { font: inherit; padding:.85em 1em; border:2px solid var(--border); border-radius: var(--r-md); width:100%; background:#fff; transition: border-color var(--dur-fast); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--brand-500); }
.form__note { font-size: var(--fs-200); color: var(--fg-muted); }
.form__ok { display:none; padding: var(--sp-4); background: #eafaf0; border:1px solid #bcdfc9; border-radius: var(--r-md); color:#0a7a3d; font-weight:600; }
.form__ok.show { display:block; }
.consent { display:flex; gap:.6em; align-items:flex-start; font-size: var(--fs-200); color: var(--fg-muted); }
.consent input { width:auto; margin-top:.25em; }

/* Logos strip */
.logos { display:flex; flex-wrap:wrap; gap: var(--sp-6) var(--sp-10); align-items:center; justify-content:center; opacity:.75; }
.logos span { font-weight:800; font-size:1.05rem; color: var(--ink-400); letter-spacing:-.02em; }

/* Utility */
.stack > * + * { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); }
.hide { display:none !important; }
.h3-sm { font-size: var(--fs-600); }
.pill { display:inline-block; padding:.25em .8em; border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-200); font-weight:700; }
.pill--accent { background: #fff2e2; color: var(--accent-600); }
.pill--teal { background: #e3f8f6; color: var(--teal-500); }
figure.mock { margin:0; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--border); box-shadow: var(--sh-md); background:#fff; }
figure.mock figcaption { font-size: var(--fs-200); color: var(--fg-muted); padding: var(--sp-3) var(--sp-4); border-top:1px solid var(--border); }
.mock-bar { display:flex; gap:.4em; padding:.7em .9em; border-bottom:1px solid var(--border); background: var(--bg-soft); }
.mock-bar i { width:11px; height:11px; border-radius:50%; background: var(--ink-200); }
.mock-bar i:nth-child(1){background:#ff5f57;} .mock-bar i:nth-child(2){background:#febc2e;} .mock-bar i:nth-child(3){background:#28c840;}
.mock-body { padding: var(--sp-5); display:grid; gap: var(--sp-3); }
.mock-msg { max-width: 82%; padding:.7em 1em; border-radius: 14px; font-size: var(--fs-300); }
.mock-msg.in { background: var(--bg-soft); border-bottom-left-radius:4px; }
.mock-msg.out { background: var(--brand-500); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.mock-msg b { display:block; }
.mock-btn { display:block; text-align:center; padding:.7em; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); font-weight:700; font-size: var(--fs-300); }
/* Timeline */
.timeline { display:grid; gap: var(--sp-4); border-left:2px dashed var(--border); padding-left: var(--sp-6); margin-left: var(--sp-3); }
.timeline__item { position:relative; }
.timeline__item::before { content:""; position:absolute; left: calc(-1 * var(--sp-6) - 7px); top:.4em; width:12px; height:12px; border-radius:50%; background: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.timeline__item h3 { font-size: var(--fs-500); margin-bottom:.2em; }
.timeline__item p { margin:0; color: var(--fg-muted); font-size: var(--fs-300); }
/* Nav pills (landing switch) */
.nav-pills { display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.nav-pills a { padding:.4em .9em; border-radius: var(--r-full); border:1px solid var(--border); font-size: var(--fs-200); font-weight:600; color: var(--fg); background:#fff; }
.nav-pills a:hover { border-color: var(--brand-400); text-decoration:none; }
.nav-pills a[aria-current="page"] { background: var(--brand-500); color:#fff; border-color: var(--brand-500); }
/* Reveal animation */
/* Progressive enhancement: content is ALWAYS visible.
   JS only adds a subtle lift-animation; opacity never hides content. */
.reveal { transform: translateY(14px); transition: transform var(--dur-slow) var(--ease); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } }
@media print { .header,.sticky-cta,.cta-band { display:none; } }

/* Segment bar: виден на мобиле, скроллится горизонтально */
.segment-bar { display: none; }
@media (max-width: 859px) {
  .header { height: auto; flex-wrap: wrap; }
  .header__inner { min-height: var(--header-h); }
  .segment-bar {
    display: block; width: 100%; border-top: 1px solid var(--border);
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  }
  .segment-bar__inner { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: .45rem;
    scrollbar-width: none; -ms-overflow-style: none; }
  .segment-bar__inner::-webkit-scrollbar { display: none; }
  .segment-bar a { white-space: nowrap; padding: .4em .85em; border-radius: var(--r-full);
    border: 1px solid var(--border); font-size: var(--fs-200); font-weight: 600; color: var(--fg); }
  .segment-bar a:hover { text-decoration: none; border-color: var(--brand-400); }
  .segment-bar a[aria-current="page"] { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
}