/* ============================================================
   Axiumn — marketing site styling (Sendblue-structured)
   Brand tokens (tokens.css) + an editorial italic-serif accent.
   ============================================================ */

@import url('tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  color: var(--fg1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
em { font-style: italic; }

::selection { background: var(--violet-100); color: var(--violet-700); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1280px; }

.section { padding: 110px 0; position: relative; }
.section-sm { padding: 76px 0; }
@media (max-width: 760px) { .section { padding: 68px 0; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--t-overline); letter-spacing: var(--t-overline-ls);
  text-transform: uppercase; font-weight: var(--w-semibold);
  color: var(--violet-500);
}
.eyebrow.center { justify-content: center; }

/* ---------- Type — punchier than the app, Sendblue-style ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink-900); }
.serif { font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: 0; }

.display {
  font-size: clamp(42px, 6.6vw, 78px);
  line-height: 1.0; letter-spacing: -0.03em; font-weight: var(--w-semibold);
}
.display .serif { font-size: 1.04em; letter-spacing: -0.01em; }
.h2 {
  font-size: clamp(31px, 4.6vw, 52px);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: var(--w-semibold);
}
.h2 .serif { font-size: 1.06em; }
.h3 {
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.22; letter-spacing: -0.014em; font-weight: var(--w-medium);
}
.lead {
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; font-weight: var(--w-light);
  color: var(--fg2);
}
.muted { color: var(--fg2); }
.mono { font-family: var(--font-mono); }
.vio { color: var(--violet-500); }

.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .h2 { margin-top: 14px; }
.section-head .lead { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 15px;
  padding: 13px 22px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: transform 120ms ease, background 140ms ease, border-color 140ms ease, box-shadow 160ms ease, color 140ms ease;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--violet-500); color: #fff; }
.btn-primary:hover { background: var(--violet-600); box-shadow: var(--shadow-violet); }

.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); box-shadow: var(--shadow-md); }

.btn-secondary { background: #fff; color: var(--ink-900); border-color: var(--ink-200); }
.btn-secondary:hover { border-color: var(--ink-300); background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-50); }

.btn-lg { padding: 16px 30px; font-size: 16px; border-radius: 13px; }
.btn-light { background: #fff; color: var(--violet-700); }
.btn-light:hover { background: var(--violet-50); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.32); color: #fff; }
.btn-outline-light:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--violet-500); color: #fff; font-size: 13px; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 22px; height: 40px; flex-wrap: wrap; }
.topbar a.tb-link { font-weight: var(--w-medium); }
.topbar .tb-msg { font-weight: var(--w-light); opacity: 0.95; }
.topbar .tb-check { display: inline-flex; align-items: center; gap: 6px; opacity: 0.9; }
.topbar .tb-check svg { width: 14px; height: 14px; }
.topbar .tb-pill { background: rgba(255,255,255,0.16); border-radius: 999px; padding: 4px 13px; font-weight: var(--w-medium); transition: background 120ms; }
.topbar .tb-pill:hover { background: rgba(255,255,255,0.26); }
.topbar .tb-right { margin-left: 14px; }
@media (max-width: 720px) { .topbar .tb-msg, .topbar .tb-right { display: none; } }

/* ---------- Nav (centered links) ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color 200ms ease, box-shadow 200ms ease; }
.nav.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-xs); }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 74px; }
.nav-logo { height: 26px; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav-link { font-size: 14.5px; font-weight: var(--w-regular); color: var(--ink-700); padding: 8px 15px; border-radius: 8px; transition: color 120ms ease, background 120ms ease; }
.nav-link:hover { color: var(--ink-900); background: var(--ink-50); }
.nav-cta { display: flex; align-items: center; gap: 10px; justify-self: end; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-inner { grid-template-columns: 1fr auto; } .nav-cta .btn-ghost { display: none; } }

/* ---------- Hero (centered, text-first) ---------- */
.hero { padding: 84px 0 64px; position: relative; overflow: hidden; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(111,24,237,0.10), transparent 62%),
    radial-gradient(620px 360px at 84% 4%, rgba(111,24,237,0.05), transparent 60%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 15px 6px 9px; font-size: 13px; color: var(--ink-700); box-shadow: var(--shadow-xs);
  margin-bottom: 30px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.hero h1 { max-width: 980px; margin: 0 auto 26px; font-weight: var(--w-medium); }
.hero .lead { max-width: 620px; margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); }

/* Hero video — near full-width, breaks out of the 1180 wrap and centres on the viewport */
.hero-video {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1360px, 92vw); margin-top: 48px;
  aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: var(--ink-100); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.hero-video > video, .hero-video > iframe, .hero-video > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.hero-video-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
}
.hero-video-ph svg { width: 54px; height: 54px; color: var(--violet-400); }
.hero-video-ph-t { font-size: 18px; font-weight: var(--w-medium); color: var(--fg2); }
.hero-video-ph-s { font-size: 13.5px; color: var(--fg3); }

/* Numbers band — native section-head + bento-style research stat cards */
.numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 860px) { .numbers-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.num-card { background: var(--ink-50); border: 1px solid var(--border); border-radius: 22px; padding: 30px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.num-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.num-fig { font-size: clamp(46px, 5.4vw, 66px); font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: 1; color: var(--violet-500); }
.num-unit { font-size: 0.34em; font-weight: var(--w-medium); color: var(--fg3); margin-left: 6px; letter-spacing: 0; }
.num-desc { font-size: 15px; color: var(--fg2); line-height: 1.5; margin: 14px 0 0; max-width: 340px; }
.numbers-sources { margin-top: 44px; text-align: center; }
.numbers-sources-label { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); font-weight: var(--w-medium); margin-bottom: 16px; }
.numbers-sources-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.numbers-sources-list span { font-size: 16px; font-weight: var(--w-medium); color: var(--ink-400); letter-spacing: -0.01em; }

/* Feature showcase — tabbed copy-left / visual-right (Apollo-style) */
.showcase { margin-top: 52px; }
.showcase-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 44px; }
.showcase-tab {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: var(--w-medium);
  color: var(--fg2); background: var(--ink-50); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.showcase-tab svg { width: 17px; height: 17px; }
.showcase-tab:hover { color: var(--violet-600); border-color: var(--violet-300); }
.showcase-tab.is-active { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }
.showcase-panel { display: none; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.showcase-panel.is-active { display: grid; animation: quizIn 320ms cubic-bezier(0.22,1,0.36,1); }
.showcase-copy h3 { margin-bottom: 16px; }
.showcase-copy > p { font-size: 16px; color: var(--fg2); line-height: 1.6; margin: 0; max-width: 480px; }
.showcase-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.showcase-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-800); line-height: 1.4; }
.showcase-points li svg { width: 18px; height: 18px; color: var(--violet-500); flex: none; margin-top: 1px; }
.showcase-visual { display: flex; justify-content: center; }
.shot-ph {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 18px;
  background: var(--ink-50); border: 1px dashed var(--border-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.shot-ph svg { width: 40px; height: 40px; color: var(--ink-300); }
.shot-ph-t { font-size: 15px; font-weight: var(--w-medium); color: var(--fg2); }
.shot-ph-s { font-size: 13px; color: var(--fg3); }

/* Feature spotlight — static copy/visual split (alternating) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .split-visual { display: flex; justify-content: center; }
.split.reverse .split-visual { order: -1; }
.split .showcase-copy > p { margin-top: 16px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 30px; } .split .split-visual { order: -1; } }

/* Guarantee promise band */
.guarantee { max-width: 820px; margin: 0 auto; text-align: center; background: var(--violet-50); border: 1px solid rgba(111,24,237,0.14); border-radius: 24px; padding: 56px 40px; }
.guarantee .eyebrow { justify-content: center; }
.guarantee .h2 { margin-top: 14px; }
.guarantee .lead { margin: 16px auto 0; max-width: 620px; }
.guarantee-ph { font-size: 12.5px; color: var(--violet-600); margin-top: 20px; font-weight: var(--w-medium); }
@media (max-width: 860px) {
  .showcase-panel.is-active { grid-template-columns: 1fr; gap: 30px; }
  .showcase-visual { order: -1; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; justify-content: center; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--fg3); display: flex; align-items: center; gap: 8px; justify-content: center; }
.hero-note svg { width: 15px; height: 15px; color: var(--success); }

/* credibility badge row */
.cred { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 46px; }
.cred-badge { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px 16px; box-shadow: var(--shadow-xs); }
.cred-badge svg { width: 18px; height: 18px; color: var(--violet-500); }
.cred-badge .cb-t { font-size: 13px; font-weight: var(--w-medium); color: var(--ink-900); line-height: 1.2; }
.cred-badge .cb-s { font-size: 11px; color: var(--fg3); }
.cred-badge.stars svg { color: #E0901A; width: 15px; height: 15px; fill: currentColor; }
.cred-stars { display: inline-flex; gap: 1px; }

/* rating + social proof line */
.proof { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.proof .stars { display: inline-flex; gap: 2px; color: #E0901A; }
.proof .stars svg { width: 17px; height: 17px; fill: currentColor; }
.proof .rtxt { font-size: 14px; color: var(--ink-800); font-weight: var(--w-medium); }
.proof .divider { width: 1px; height: 20px; background: var(--border-strong); }
.proof .avatars { display: inline-flex; }
.proof .avatars .a { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #fff; margin-left: -9px; display: grid; place-items: center; font-size: 11px; font-weight: var(--w-semibold); color: #fff; }
.proof .avatars .a:first-child { margin-left: 0; }
.proof .ptxt { font-size: 14px; color: var(--fg2); }
.proof .ptxt b { color: var(--ink-900); font-weight: var(--w-medium); }

/* customer logo strip */
.trusted { margin-top: 64px; }
.trusted-label { text-align: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); font-weight: var(--w-medium); margin-bottom: 26px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; gap: 60px; width: max-content; animation: marquee 40s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-word { font-size: 20px; font-weight: var(--w-medium); color: var(--ink-400); white-space: nowrap; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; flex: none; }
.logo-word svg { width: 18px; height: 18px; opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Shared mockup atoms ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.avatar { width: 36px; height: 36px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--w-semibold); color: #fff; }
.avatar.g { background: var(--reqora-gradient); }
.av-name { font-size: 13.5px; font-weight: var(--w-medium); color: var(--ink-900); }
.av-sub { font-size: 12px; color: var(--fg3); }
.spacer { flex: 1; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: var(--w-medium); padding: 4px 10px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill-new { background: var(--status-new-bg); color: var(--status-new); }
.pill-verified { background: var(--status-qualified-bg); color: var(--status-qualified); }
.pill-replied { background: var(--status-replied-bg); color: var(--status-replied); }
.pill-contacted { background: var(--status-contacted-bg); color: var(--status-contacted); }
.pill-ink { background: var(--ink-50); color: var(--ink-600); }

.ring { --p: 94; --c: var(--violet-500); width: 50px; height: 50px; flex: none; position: relative; border-radius: 999px; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--ink-100) 0); display: grid; place-items: center; }
.ring::before { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 999px; }
.ring span { position: relative; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-900); }
.ring.lg { width: 96px; height: 96px; }
.ring.lg::before { inset: 9px; }
.ring.lg span { font-size: 22px; }

/* ---------- Bento grid ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bento-row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 940px) { .bento, .bento-row2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bento, .bento-row2 { grid-template-columns: 1fr; } }

.bento-card { background: var(--ink-50); border: 1px solid var(--border); border-radius: 22px; padding: 30px; overflow: hidden; position: relative; transition: border-color 180ms ease, box-shadow 180ms ease; display: flex; flex-direction: column; }
.bento-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.bento-card h4 { font-size: 20px; font-weight: var(--w-medium); color: var(--ink-900); letter-spacing: -0.012em; margin-bottom: 9px; }
.bento-card p { font-size: 14.5px; color: var(--fg2); margin: 0; max-width: 420px; }
.bento-visual { margin-top: 26px; flex: 1; display: flex; align-items: flex-end; }
.bento-visual.center { align-items: center; justify-content: center; }
.bento-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-500); margin-bottom: 16px; }
.bento-tag svg { width: 15px; height: 15px; }

/* monitoring viz */
.radar-viz { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.radar-line { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg2); }
.radar-line .lt { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.radar-line .lt.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.radar-line .lt.idle { background: var(--ink-200); }
.radar-line .rt { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg3); }

/* ---------- How it works (compact 3-step) ---------- */
.how3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 860px) { .how3 { grid-template-columns: 1fr; } }
.how-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
.how-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--violet-500); font-weight: 600; letter-spacing: 0.1em; }
.how-card h4 { font-size: 18px; font-weight: var(--w-medium); color: var(--ink-900); margin: 14px 0 9px; }
.how-card p { font-size: 14.5px; color: var(--fg2); margin: 0; }
.how-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-500); margin-top: 18px; }
.how-ic svg { width: 21px; height: 21px; }

/* ---------- Intelligence (dark) ---------- */
.dark { background: var(--ink-950); color: #fff; }
.dark h2, .dark h3, .dark h4 { color: #fff; }
.dark .lead, .dark p { color: var(--ink-300); }
.dark .eyebrow { color: var(--violet-300); }
.intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .intel-grid { grid-template-columns: 1fr; gap: 40px; } }
.intel-list { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.intel-item { display: flex; gap: 14px; }
.intel-item .ck { width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center; background: rgba(111,24,237,0.18); color: var(--violet-300); }
.intel-item .ck svg { width: 15px; height: 15px; }
.intel-item h4 { font-size: 16px; font-weight: var(--w-medium); margin-bottom: 4px; }
.intel-item p { font-size: 14px; margin: 0; color: var(--ink-400); }
.intel-card { background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.intel-card .ic-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-800); }
.intel-card .ic-name { color: #fff; font-size: 16px; font-weight: var(--w-medium); }
.intel-card .ic-title { color: var(--ink-400); font-size: 13px; }
.ring-dark::before { background: var(--ink-900); }
.ring-dark span { color: #fff; }
.intel-reason { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-300); background: rgba(255,255,255,0.03); border: 1px solid var(--ink-800); border-radius: 12px; padding: 14px 15px; }
.intel-reason .lab { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-300); font-weight: 600; display: block; margin-bottom: 6px; }
.intel-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-dark { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-300); background: var(--ink-800); border-radius: 7px; padding: 5px 9px; }

/* ---------- Comparison table ---------- */
.compare { margin-top: 52px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.compare-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.compare-row > div { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.compare-row:last-child > div { border-bottom: none; }
.compare-head > div { background: var(--ink-50); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--fg3); }
.compare-head .col-us { background: var(--violet-500); color: #fff; }
.compare-row .rowlabel { font-weight: var(--w-medium); color: var(--ink-900); }
.compare-row .col-us { background: var(--violet-50); font-weight: var(--w-medium); color: var(--violet-800); }
.compare .yes { color: var(--success); }
.compare .no { color: var(--ink-300); }
.compare .yes svg, .compare .no svg { width: 19px; height: 19px; }
.compare-cell-sub { font-size: 12.5px; color: var(--fg3); }
@media (max-width: 820px) { .compare { overflow-x: auto; } .compare-inner { min-width: 680px; } }

/* ---------- Integrations ---------- */
.integ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
@media (max-width: 820px) { .integ-grid { grid-template-columns: 1fr; } }
.integ-card { background: var(--ink-50); border: 1px solid var(--border); border-radius: 20px; padding: 30px; }
.integ-card h4 { font-size: 19px; font-weight: var(--w-medium); color: var(--ink-900); margin-bottom: 9px; }
.integ-card p { font-size: 14.5px; color: var(--fg2); margin: 0; }
.integ-tiles { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.integ-tile { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 20px; box-shadow: var(--shadow-xs); font-size: 14.5px; font-weight: var(--w-medium); color: var(--ink-800); }
.integ-tile .ti { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-500); }
.integ-tile .ti svg { width: 15px; height: 15px; }

/* connect-flow mini viz */
.flow-viz { display: flex; align-items: center; gap: 0; margin-top: 26px; }
.flow-node { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; color: var(--ink-500); flex: none; box-shadow: var(--shadow-xs); }
.flow-node svg { width: 20px; height: 20px; }
.flow-node.brand { background: var(--reqora-gradient); color: #fff; border: none; }
.flow-wire { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-200) 0 6px, transparent 6px 12px); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; max-width: 620px; margin: 0 auto; text-align: center; }
.stat .num { font-size: clamp(34px, 4vw, 46px); font-weight: var(--w-semibold); letter-spacing: -0.03em; color: var(--ink-900); line-height: 1; }
.stat .num.vio { color: var(--violet-500); }
.stat .lab { font-size: 13.5px; color: var(--fg2); margin-top: 10px; }

/* ---------- Testimonials (dark carousel) ---------- */
.testi { background: var(--surface-2); padding: 96px 0; overflow: hidden; }
.testi-rail { display: flex; justify-content: safe center; gap: 22px; margin-top: 48px; padding: 0 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.testi-rail::-webkit-scrollbar { display: none; }
.testi-card { scroll-snap-align: start; flex: 0 0 380px; max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
@media (max-width: 480px) { .testi-card { flex-basis: 84vw; } }
.testi-quote { font-size: 17px; line-height: 1.5; color: var(--ink-900); font-weight: var(--w-regular); flex: 1; }
.testi-quote .serif { color: var(--violet-500); }
.testi-who { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.testi-ph { width: 42px; height: 42px; border-radius: 999px; background: var(--ink-100); display: grid; place-items: center; color: var(--ink-400); flex: none; }
.testi-ph svg { width: 21px; height: 21px; }
.testi-photo { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex: none; }
.testi-who .tn { font-size: 14.5px; font-weight: var(--w-medium); color: var(--ink-900); }
.testi-who .tr { font-size: 12.5px; color: var(--fg3); }
.testi-nav { display: flex; gap: 12px; justify-content: center; margin-top: 36px; }
.testi-nav button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--ink-600); display: grid; place-items: center; cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms; }
.testi-nav button:hover { border-color: var(--violet-400); color: var(--violet-600); background: var(--violet-50); }
.testi-nav button svg { width: 20px; height: 20px; }

/* ---------- Booking widget ---------- */
.booking { position: relative; overflow: hidden; }
.book-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: 0.85fr 1fr 0.7fr; max-width: 1000px; margin: 48px auto 0; }
.book-card.confirmed { grid-template-columns: 1fr; }
@media (max-width: 880px) { .book-card { grid-template-columns: 1fr; } }
.book-info { padding: 32px; border-right: 1px solid var(--border); }
.book-rep { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.book-rep .ph { width: 46px; height: 46px; border-radius: 999px; background: var(--reqora-gradient); display: grid; place-items: center; color: #fff; font-weight: var(--w-semibold); font-size: 15px; }
.book-rep .rname { font-size: 14.5px; font-weight: var(--w-medium); color: var(--ink-900); }
.book-rep .rrole { font-size: 12.5px; color: var(--fg3); }
.book-info h3 { font-size: 21px; font-weight: var(--w-regular); letter-spacing: -0.01em; margin-bottom: 14px; }
.book-detail { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg2); margin-bottom: 11px; }
.book-detail svg { width: 17px; height: 17px; color: var(--violet-500); flex: none; }
.book-bullets { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; }
.book-bullets .b { display: flex; gap: 9px; font-size: 13px; color: var(--fg2); }
.book-bullets .b svg { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 1px; }
.book-cal { padding: 28px 26px; border-right: 1px solid var(--border); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-head .mname { font-size: 15px; font-weight: var(--w-medium); color: var(--ink-900); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-600); transition: background 120ms; }
.cal-nav button:hover { background: var(--ink-50); }
.cal-nav button svg { width: 16px; height: 16px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: 11px; color: var(--fg3); font-weight: var(--w-medium); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; border: none; background: none; border-radius: 9px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-800); cursor: pointer; display: grid; place-items: center; position: relative; transition: background 120ms, color 120ms; }
.cal-day.empty { cursor: default; }
.cal-day.disabled { color: var(--ink-300); cursor: default; }
.cal-day.avail { font-weight: var(--w-medium); color: var(--violet-700); background: var(--violet-50); }
.cal-day.avail:hover { background: var(--violet-100); }
.cal-day.selected { background: var(--violet-500); color: #fff; }
.cal-day.avail::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 999px; background: var(--violet-400); }
.cal-day.selected::after { background: #fff; }
.book-slots { padding: 28px 24px; display: flex; flex-direction: column; }
.slots-head { font-size: 13px; color: var(--fg2); margin-bottom: 16px; }
.slots-head b { color: var(--ink-900); font-weight: var(--w-medium); }
.slots-list { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 318px; padding-right: 2px; }
.slot { padding: 13px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; font-size: 14px; font-weight: var(--w-medium); color: var(--ink-800); cursor: pointer; text-align: center; transition: border-color 120ms, color 120ms, background 120ms; font-family: var(--font-mono); }
.slot:hover { border-color: var(--violet-400); color: var(--violet-600); }
.slots-empty { font-size: 13px; color: var(--fg3); text-align: center; margin-top: 40px; line-height: 1.6; }
.slots-empty svg { width: 26px; height: 26px; color: var(--ink-300); margin-bottom: 10px; }
.book-confirm { padding: 56px 32px; text-align: center; }
.book-confirm .ok { width: 64px; height: 64px; border-radius: 999px; background: var(--success-bg); color: var(--success); display: grid; place-items: center; margin: 0 auto 22px; }
.book-confirm .ok svg { width: 32px; height: 32px; }
.book-confirm h3 { font-size: 25px; font-weight: var(--w-regular); margin-bottom: 12px; }
.book-confirm p { color: var(--fg2); max-width: 460px; margin: 0 auto 8px; }
.book-confirm .when { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: var(--violet-50); color: var(--violet-700); border-radius: 11px; padding: 13px 18px; font-size: 14.5px; font-weight: var(--w-medium); font-family: var(--font-mono); }
.book-confirm .when svg { width: 18px; height: 18px; }
.book-confirm .reset { margin-top: 26px; }

/* ---------- FAQ (two column) ---------- */
.faq-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 52px; max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: #fff; transition: border-color 160ms, box-shadow 160ms; align-self: start; }
.faq-item.open { border-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px; text-align: left; font-family: var(--font-sans); font-size: 16px; font-weight: var(--w-medium); color: var(--ink-900); letter-spacing: -0.008em; }
.faq-q .chev { width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--ink-50); display: grid; place-items: center; color: var(--ink-600); transition: transform 220ms cubic-bezier(0.22,1,0.36,1), background 160ms, color 160ms; }
.faq-q .chev svg { width: 16px; height: 16px; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); background: var(--violet-500); color: #fff; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 280ms cubic-bezier(0.22,1,0.36,1); }
.faq-a-inner { padding: 0 22px 24px; font-size: 14.5px; line-height: 1.65; color: var(--fg2); }

/* ---------- Final CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink-950); border-radius: 28px; padding: 76px 56px; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% -30%, rgba(111,24,237,0.5), transparent 65%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--ink-300); max-width: 540px; margin: 18px auto 0; }
.cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
@media (max-width: 620px) { .cta-band { padding: 52px 26px; } }

/* ---------- Footer ---------- */
.footer { padding: 72px 0 40px; border-top: 1px solid var(--border); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
.footer-logo { height: 24px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--fg2); max-width: 280px; margin: 0; }
.footer-col h5 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); font-weight: 600; margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink-700); margin-bottom: 11px; transition: color 120ms; }
.footer-col a:hover { color: var(--violet-500); }
.footer-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg3); flex-wrap: wrap; gap: 14px; }
.footer-bot .badges { display: flex; gap: 18px; }
.footer-bot .badges span { display: flex; align-items: center; gap: 7px; }
.footer-bot .badges svg { width: 15px; height: 15px; color: var(--ink-400); }

/* ---------- Scroll reveal (visible by default; animates in when class toggles) ---------- */
.reveal { opacity: 1; transform: none; }
.reveal.pre { opacity: 0; transform: translateY(18px); }
.reveal { transition: opacity 620ms cubic-bezier(0.22,1,0.36,1), transform 620ms cubic-bezier(0.22,1,0.36,1); }
.reveal.d1 { transition-delay: 70ms; }
.reveal.d2 { transition-delay: 140ms; }
.reveal.d3 { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.pre { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Additions — hero feed, "See it on your roles" quiz, capture
   ============================================================ */

/* ---------- Hero: self-assembling results feed ---------- */
.hero-feed { max-width: 560px; margin: 46px auto 0; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 15px 18px 14px; text-align: left; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.feed-q { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-800); font-weight: var(--w-medium); }
.feed-q svg { width: 15px; height: 15px; color: var(--violet-500); }
.feed-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--fg3); white-space: nowrap; }
.feed-live .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); animation: feedPulse 2s ease-in-out infinite; }
.feed-rows { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(8px); animation: feedIn 460ms cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: calc(var(--i) * 260ms + 200ms); }
.feed-row:last-child { border-bottom: none; }
.fr-role { min-width: 0; flex: 1; }
.fr-title { font-size: 13.5px; font-weight: var(--w-medium); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-loc { font-size: 11.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-arrow { width: 15px; height: 15px; color: var(--ink-300); flex: none; }
.fr-person { display: flex; align-items: center; gap: 8px; flex: none; }
.fr-who { text-align: right; }
.fr-name { font-size: 12px; font-weight: var(--w-medium); color: var(--ink-800); white-space: nowrap; }
.fr-sub { font-size: 10.5px; color: var(--fg3); }
.feed-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg2); padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); opacity: 0; animation: feedIn 460ms ease forwards; animation-delay: 1640ms; }
.feed-foot svg { width: 16px; height: 16px; color: var(--success); flex: none; }
.feed-foot b { color: var(--ink-900); font-weight: var(--w-semibold); }
@keyframes feedIn { to { opacity: 1; transform: translateY(0); } }
@keyframes feedPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 560px) { .hero-feed { padding: 14px 15px; } }
@media (max-width: 440px) { .fr-who { display: none; } }
@media (prefers-reduced-motion: reduce) { .feed-row, .feed-foot { opacity: 1; transform: none; animation: none; } .feed-live .dot { animation: none; } }

/* ---------- Small helpers (bento "one search" + CRM, integ tiles) ---------- */
.ti-mini { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-500); }
.ti-mini svg { width: 16px; height: 16px; }
.tile-pill { font-size: 10px; padding: 3px 8px; margin-left: 2px; }
.src-total { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg2); }
.src-total svg { width: 14px; height: 14px; color: var(--violet-500); }
.src-total b { color: var(--ink-900); font-weight: var(--w-semibold); }

/* ---------- "See it on your roles" quiz ---------- */
.quiz { max-width: 640px; margin: 48px auto 0; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 40px 40px 34px; text-align: center; }
@media (max-width: 560px) { .quiz { padding: 30px 22px 26px; } }
.quiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; }
.qp-dot { width: 26px; height: 5px; border-radius: 999px; background: var(--ink-100); transition: background 220ms; }
.qp-dot.is-done { background: var(--violet-300); }
.qp-dot.is-active { background: var(--violet-500); }
.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quizIn 320ms cubic-bezier(0.22,1,0.36,1); }
@keyframes quizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quiz-kicker { font-size: 13px; color: var(--violet-600); font-weight: var(--w-medium); margin-bottom: 10px; }
.quiz-q { font-size: clamp(21px, 3vw, 28px); font-weight: var(--w-semibold); letter-spacing: -0.02em; color: var(--ink-900); line-height: 1.2; }
.quiz-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.quiz-chip { font-family: var(--font-sans); font-size: 14.5px; font-weight: var(--w-medium); color: var(--ink-800); background: #fff; border: 1px solid var(--ink-200); border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: border-color 130ms, background 130ms, color 130ms, transform 100ms; }
.quiz-chip:hover { border-color: var(--violet-400); color: var(--violet-600); background: var(--violet-50); }
.quiz-chip:active { transform: scale(0.97); }
.quiz-chip.is-selected { border-color: var(--violet-500); background: var(--violet-500); color: #fff; }
.quiz-chip.big { min-width: 74px; font-size: 18px; padding: 15px 24px; }
.quiz-input { width: 100%; max-width: 380px; margin: 16px auto 0; display: block; font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-900); background: var(--ink-50); border: 1px solid var(--border); border-radius: 11px; padding: 12px 16px; text-align: center; transition: border-color 130ms, background 130ms; }
.quiz-input::placeholder { color: var(--fg3); }
.quiz-input:focus { outline: none; border-color: var(--violet-400); background: #fff; }
.quiz-micro { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; font-weight: var(--w-medium); color: var(--violet-700); background: var(--violet-50); border-radius: 999px; padding: 9px 16px; }
.quiz-micro svg { width: 15px; height: 15px; }
.quiz-hint { font-size: 13.5px; color: var(--fg2); margin-top: 10px; }
.quiz-next { margin-top: 24px; }
.quiz-next:disabled { opacity: 0.45; cursor: default; }
.quiz-back { margin-top: 22px; }
.quiz-backbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--fg3); transition: color 120ms; }
.quiz-backbtn:hover { color: var(--ink-800); }
.quiz-backbtn svg { width: 14px; height: 14px; }
.quiz-reveal { padding: 4px 0; }
.qr-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet-600); background: var(--violet-50); border-radius: 999px; padding: 7px 14px; margin-bottom: 20px; }
.qr-badge svg { width: 15px; height: 15px; }
.qr-line { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; font-weight: var(--w-regular); color: var(--ink-900); max-width: 500px; margin: 0 auto; letter-spacing: -0.01em; }
.qr-line b { font-weight: var(--w-semibold); color: var(--violet-600); }
.qr-sub { font-size: 14.5px; color: var(--fg2); margin: 16px auto 26px; max-width: 420px; }
.quiz-reveal .btn { max-width: 100%; white-space: normal; height: auto; }

/* ---------- Booking: neutral info + lead-capture fields ---------- */
.book-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet-600); margin-bottom: 14px; }
.book-eyebrow svg { width: 15px; height: 15px; }
.book-fields { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; font-weight: var(--w-medium); color: var(--fg2); }
.field input { font-family: var(--font-sans); font-size: 14px; color: var(--ink-900); background: var(--ink-50); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; transition: border-color 130ms, background 130ms; }
.field input::placeholder { color: var(--fg3); }
.field input:focus { outline: none; border-color: var(--violet-400); background: #fff; }
.field.invalid input { border-color: #DC2626; background: #FEF2F2; }
.field-error { font-size: 12.5px; color: #DC2626; font-weight: var(--w-medium); }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Cookie / consent notice ---------- */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  max-width: 380px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  transform: translateY(16px); opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
}
.consent.is-in { transform: translateY(0); opacity: 1; }
.consent-text { font-size: 13px; line-height: 1.5; color: var(--fg2); margin: 0; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { flex: 1; height: 38px; font-size: 13px; padding: 0 14px; }
@media (max-width: 480px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: opacity 240ms ease; transform: none; }
}

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 48px auto 0; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--ink-50); border: 1px solid var(--border); border-radius: 22px; padding: 32px 30px; transition: border-color 160ms, box-shadow 160ms; }
.price-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.price-card.featured { background: #fff; border-color: var(--violet-500); box-shadow: var(--shadow-violet); }
.price-card.pulse { animation: pricePulse 2.2s ease; }
@keyframes pricePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,24,237,0); }
  15% { box-shadow: 0 0 0 4px rgba(111,24,237,0.35); }
  60% { box-shadow: 0 0 0 3px rgba(111,24,237,0.12); }
}
.price-badge { position: absolute; top: -12px; right: 22px; }
.price-tag { font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet-600); margin-bottom: 12px; }
.price-name { font-size: 20px; font-weight: var(--w-semibold); color: var(--ink-900); margin-bottom: 10px; }
.price-amount { font-size: 40px; font-weight: var(--w-bold); color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.price-cur { font-size: 24px; font-weight: var(--w-semibold); vertical-align: 6px; margin-right: 1px; }
.price-per { font-size: 15px; font-weight: var(--w-medium); color: var(--fg2); letter-spacing: 0; }
.price-custom { font-size: 34px; }
.price-note { font-size: 14px; color: var(--fg2); margin: 12px 0 0; line-height: 1.5; }
.price-feats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.price-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-800); line-height: 1.4; }
.price-feats li svg { width: 17px; height: 17px; color: var(--violet-500); flex: none; margin-top: 1px; }
.price-feats li.excl { color: var(--fg3); }
.price-feats li.excl svg { color: var(--ink-300); }
.price-cta { margin-top: 26px; width: 100%; display: flex; justify-content: center; }
.price-claim { margin-top: 12px; font-size: 12.5px; color: var(--fg3); text-align: center; }
.price-claim a { color: var(--violet-600); font-weight: var(--w-medium); }
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; gap: 20px; }
}