/* ==========================================================================
   Bookify — Лендинг для владельцев заведений
   Visual system: Bookify Mini App design tokens (single green accent,
   Geist type, rounded-3xl cards, zinc light / slate dark) — 1:1 с
   app/app/globals.css. Landing-specific layout + interaction styles on top.
   ========================================================================== */

/* -- Tokens ----------------------------------------------------------------- */
:root {
  /* brand green ramp */
  --green-50:#eff6ff; --green-100:#dbeafe; --green-300:#93c5fd;
  --green-400:#60a5fa; --green-500:#3b82f6; --green-600:#2563eb; --green-700:#1d4ed8;
  --premium-from:#fb923c; --premium-to:#f97316;
  --slate-400:#94a3b8;

  /* light theme (default) — mirrors globals.css :root */
  --bg:#f2f2f5;
  --bg-elevated:#ffffff;
  --card:#ffffff;
  --fg:#09090b;
  --fg-muted:#52525b;
  --fg-subtle:#71717a;
  --border:#e4e4e7;
  --border-strong:#d4d4d8;
  --primary:#3b82f6;
  --primary-hover:#2563eb;
  --primary-fg:#ffffff;
  --tint:#dbeafe;
  --tint-fg:#2563eb;
  --danger:#ef4444;
  --danger-strong:#dc2626;
  --plan-bg:#f1f5f9;
  --plan-grid:#e2e8f0;
  --plan-busy:#94a3b8;
  --plan-busy-bd:#64748b;
  --plan-hold:#f59e0b;
  --plan-hold-bd:#d97706;
  --plan-paper:#fafaf9;
  --plan-wall:#0f172a;
  --plan-zone:#f1f5f9;
  --plan-zone-text:#64748b;
  --plan-chair:#cbd5e1;
  --plan-busy-text:#475569;
  --plan-grid-line:rgb(15 23 42 / .05);
  --plan-ink:#475569;
  --plan-ink-soft:#cbd5e1;
  --code-bg:#f4f4f5;
  --glow:rgba(59,130,246,.13);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow:0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
  --shadow-lg:0 18px 40px -12px rgb(16 24 40 / .18), 0 6px 14px -8px rgb(16 24 40 / .12);
  --nav-bg:rgba(242,242,245,.82);
  --grain-opacity:.4;

  --maxw:1120px;
  --maxw-narrow:780px;
  --radius-card:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.2,1);
  --speed:1;
}

[data-theme="dark"] {
  --bg:#0b1220;
  --bg-elevated:#111c30;
  --card:#1e293b;
  --fg:#f1f5f9;
  --fg-muted:#cbd5e1;
  --fg-subtle:#94a3b8;
  --border:#334155;
  --border-strong:#3f4d63;
  --primary:#3b82f6;
  --primary-hover:#60a5fa;
  --primary-fg:#0b1220;
  --tint:rgba(59,130,246,.14);
  --tint-fg:#60a5fa;
  --danger:#f87171;
  --danger-strong:#ef4444;
  --plan-bg:#0f172a;
  --plan-grid:#1e293b;
  --plan-busy:#475569;
  --plan-busy-bd:#334155;
  --plan-hold:#f59e0b;
  --plan-hold-bd:#d97706;
  --plan-paper:#1f2937;
  --plan-wall:#e2e8f0;
  --plan-zone:#334155;
  --plan-zone-text:#94a3b8;
  --plan-chair:#475569;
  --plan-busy-text:#cbd5e1;
  --plan-grid-line:rgb(255 255 255 / .05);
  --plan-ink:#94a3b8;
  --plan-ink-soft:#475569;
  --code-bg:#0f172a;
  --glow:rgba(59,130,246,.16);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .4);
  --shadow:0 1px 3px 0 rgb(0 0 0 / .5);
  --shadow-lg:0 24px 50px -16px rgb(0 0 0 / .6), 0 8px 18px -10px rgb(0 0 0 / .5);
  --nav-bg:rgba(11,18,32,.8);
  --grain-opacity:.55;
}

* { 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);
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3,h4,p { margin:0; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num { font-variant-numeric:tabular-nums; }
::selection { background:color-mix(in srgb,var(--primary) 30%,transparent); }

/* -- Layout ----------------------------------------------------------------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap--narrow { max-width:var(--maxw-narrow); }
.section { padding:clamp(64px,9vw,120px) 0; position:relative; }
.section--tight { padding:clamp(48px,6vw,88px) 0; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tint-fg); background:var(--tint);
  border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);
  padding:6px 13px; border-radius:999px;
}
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px -1px var(--primary); }
.section__head { max-width:680px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.section__head.is-left { margin-left:0; text-align:left; }
.section__title {
  font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1.08;
  margin-top:18px;
}
.section__sub { font-size:clamp(16px,1.6vw,18px); color:var(--fg-muted); margin-top:16px; line-height:1.55; text-wrap:pretty; }

/* -- Buttons ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 24px; border-radius:999px;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:background .16s, border-color .16s, transform .16s, box-shadow .16s, color .16s;
}
.btn svg { width:19px; height:19px; }
.btn--primary { background:var(--primary); color:var(--primary-fg); box-shadow:0 8px 22px -10px var(--primary); }
.btn--primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 12px 26px -10px var(--primary); }
.btn--ghost { background:transparent; color:var(--fg); border-color:var(--border-strong); }
.btn--ghost:hover { border-color:var(--fg-subtle); transform:translateY(-1px); }
.btn--sm { height:44px; padding:0 18px; font-size:15px; }
.btn--lg { height:58px; padding:0 30px; font-size:17px; }

/* -- Nav -------------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.4) blur(14px);
  background:var(--nav-bg);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.is-scrolled { border-bottom-color:var(--border); }
.nav__in { max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; font-size:17px; letter-spacing:-.02em; }
.brand__mark { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--primary); color:var(--primary-fg); flex-shrink:0; box-shadow:0 6px 16px -6px var(--primary); }
.brand__mark svg { width:21px; height:21px; }
.nav__links { display:flex; align-items:center; gap:6px; margin-left:18px; }
.nav__link { font-size:15px; font-weight:500; color:var(--fg-muted); padding:8px 12px; border-radius:10px; transition:color .15s, background .15s; }
.nav__link:hover { color:var(--fg); background:color-mix(in srgb,var(--fg-subtle) 12%,transparent); }
.nav__spacer { flex:1; }
.nav__actions { display:flex; align-items:center; gap:10px; }
.icon-btn { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); color:var(--fg); transition:border-color .15s, transform .15s; }
.icon-btn:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.icon-btn svg { width:19px; height:19px; }
@media (max-width:980px){ .nav__links { display:none; } }
@media (max-width:520px){ .nav__actions .btn { display:none; } }

/* -- Hero ------------------------------------------------------------------- */
.hero { position:relative; overflow:hidden; padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(40px,6vw,72px); }
.hero__aurora {
  content:""; position:absolute; z-index:0; pointer-events:none; inset:-30% -10% auto -10%; height:680px;
  background:
    radial-gradient(620px 420px at 78% 18%, var(--glow), transparent 62%),
    radial-gradient(520px 360px at 12% 8%, color-mix(in srgb,var(--primary) 9%,transparent), transparent 60%),
    conic-gradient(from 200deg at 70% 30%, transparent, color-mix(in srgb,var(--primary) 10%,transparent), transparent 40%);
  filter:blur(8px); animation:auroraFloat calc(18s / var(--speed)) ease-in-out infinite alternate;
}
@keyframes auroraFloat { from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(-3%,2%,0) scale(1.06);} }
.hero__grain {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:920px){ .hero__grid { grid-template-columns:1fr; gap:44px; } }
.hero h1 { font-size:clamp(38px,6.2vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1.02; margin:22px 0 0; }
.hero h1 .rot { display:inline-flex; vertical-align:bottom; position:relative; color:var(--primary); min-height:1.05em; }
.hero__rot-track { display:inline-block; }
.hero p.hero__lead { font-size:clamp(17px,1.9vw,20px); color:var(--fg-muted); margin-top:24px; max-width:560px; line-height:1.55; text-wrap:pretty; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__trust { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:30px; }
.hero__trust .ti { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--fg-muted); }
.hero__trust .ti svg { width:18px; height:18px; color:var(--primary); flex-shrink:0; }
.hero__visual { position:relative; }
.hero__halo { position:absolute; z-index:0; inset:6% 8%; border-radius:50%; background:radial-gradient(circle at 50% 40%, var(--glow), transparent 68%); filter:blur(28px); pointer-events:none; }

/* venue marquee */
.marquee { position:relative; z-index:1; margin-top:clamp(40px,5vw,64px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:14px; width:max-content; animation:marquee calc(38s / var(--speed)) linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.mq-chip { display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--fg-muted); font-size:14.5px; font-weight:600; white-space:nowrap; }
.mq-chip svg { width:17px; height:17px; color:var(--primary); }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } .hero__aurora{ animation:none; } }

/* -- Phone mockup ----------------------------------------------------------- */
.phone {
  position:relative; z-index:1; width:300px; max-width:84vw; margin:0 auto;
  border-radius:46px; padding:12px;
  background:linear-gradient(150deg,#42434d 0%,#1c1d22 38%,#0b0b0f 100%);
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px #050507,
    0 0 0 3px rgba(255,255,255,.05),
    0 1px 0 1px rgba(255,255,255,.08) inset;
}
[data-theme="dark"] .phone { background:linear-gradient(150deg,#4a4f63 0%,#23262f 40%,#0a0e18 100%); }
/* power button (right edge) — sits below the volume rocker like a real phone */
.phone::before { content:""; position:absolute; right:-3px; top:188px; width:3px; height:78px; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#101015,#3c3d47); }
/* volume rocker (left edge) — element + box-shadow copy = two buttons */
.phone::after { content:""; position:absolute; left:-3px; top:104px; width:3px; height:40px; border-radius:3px 0 0 3px; background:linear-gradient(270deg,#101015,#3c3d47); box-shadow:0 52px 0 0 #23242b; }
.phone__screen {
  position:relative; border-radius:34px; overflow:hidden; background:var(--bg);
  aspect-ratio:300/620; display:flex; flex-direction:column;
  box-shadow:0 0 0 2px #000 inset;
}
.phone__screen::after { content:""; position:absolute; inset:0; z-index:25; pointer-events:none; border-radius:34px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%); }
/* Dynamic Island + camera lens */
.phone__notch { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:96px; height:28px; background:#050506; border-radius:999px; z-index:30; box-shadow:0 0 0 1px rgba(255,255,255,.04); }
.phone__notch::after { content:""; position:absolute; right:11px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #2b3a55, #07090e 70%); box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.app { display:flex; flex-direction:column; height:100%; }
.app__bar { padding:48px 16px 12px; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.app__bar .back { position:absolute; left:14px; bottom:11px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); color:var(--fg); }
.app__bar .back svg { width:16px; height:16px; }
.app__title { font-size:16px; font-weight:700; letter-spacing:-.01em; }
.app__body { flex:1; overflow:hidden; padding:14px 14px 0; display:flex; flex-direction:column; gap:11px; }
/* realistic floor-plan rendered inside the flow phone */
.fp-plan { position:relative; flex:1; min-height:0; border-radius:14px; overflow:hidden; background:var(--plan-paper); border:1px solid var(--border); }
.fp-plan svg { width:100%; height:100%; display:block; }
/* flow phone — booking confirmation overlay (used by the animated demo) */
.fp-done { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(3px); }
.fp-done__ico { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:#fff; box-shadow:0 14px 30px -10px var(--primary); }
.fp-done__ico svg { width:32px; height:32px; }
.fp-done__t { font-size:17px; font-weight:700; }
.fp-done__s { font-size:13px; color:var(--fg-muted); }

/* mini building card inside phone — mirrors app BuildingCard */
.mcard { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); }
.mcard__photo { aspect-ratio:16/9; background-size:cover; background-position:center; position:relative; }
.mcard__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .08) 45%, transparent 70%); }
.mcard__kind { position:absolute; top:9px; left:9px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--fg); background:rgba(255,255,255,.94); padding:4px 9px; border-radius:999px; }
.mcard__kind svg { width:12px; height:12px; }
.mcard__seats { position:absolute; top:9px; right:9px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#fff; background:rgba(59,130,246,.95); padding:4px 9px; border-radius:999px; }
.mcard__seats.full { background:rgba(113,113,122,.92); }
.mcard__seats .pulse { width:6px; height:6px; border-radius:50%; background:#fff; }
.mcard__title { position:absolute; left:11px; right:11px; bottom:9px; z-index:2; color:#fff; }
.mcard__name { font-size:14px; font-weight:700; letter-spacing:-.01em; text-shadow:0 1px 3px rgb(0 0 0 / .4); }
.mcard__meta { font-size:11px; color:rgba(255,255,255,.92); margin-top:2px; display:flex; align-items:center; gap:5px; text-shadow:0 1px 2px rgb(0 0 0 / .4); }
.mcard__meta svg { width:12px; height:12px; }
.mcard__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; }
.mcard__hours { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-subtle); }
.mcard__hours svg { width:13px; height:13px; }
.mcard__pick { display:inline-flex; align-items:center; gap:3px; height:30px; padding:0 11px; border-radius:999px; background:var(--tint); color:var(--tint-fg); font-size:12.5px; font-weight:600; }
.mcard__pick svg { width:14px; height:14px; }

/* room card inside phone — mirrors app RoomCard (icon badge + progress) */
.rcard { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:16px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.rcard.hot { border-color:color-mix(in srgb,var(--primary) 55%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent); }
.rcard__badge { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--tint-fg); flex-shrink:0; }
.rcard__badge svg { width:20px; height:20px; }
.rcard__main { flex:1; min-width:0; }
.rcard__name { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.rcard__desc { font-size:11.5px; color:var(--fg-subtle); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcard__bar { display:flex; align-items:center; gap:8px; margin-top:7px; }
.rcard__track { flex:1; height:4px; border-radius:999px; background:var(--border); overflow:hidden; }
.rcard__fill { height:100%; background:var(--primary); border-radius:999px; }
.rcard__fill.full { background:var(--plan-busy); }
.rcard__cnt { font-size:11px; font-weight:600; color:var(--primary); }
.rcard__cnt.full { color:var(--fg-subtle); }
.rcard__chev { color:var(--fg-subtle); flex-shrink:0; display:grid; place-items:center; }
.rcard__chev svg { width:16px; height:16px; display:block; }

/* phone bottom nav — mirrors app BottomNav (4 tabs + center scan FAB) */
.app__nav { display:flex; align-items:flex-end; justify-content:space-around; padding:9px 6px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bg-elevated); }
.app__nav i { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--fg-subtle); font-style:normal; flex:1; }
.app__nav i.on { color:var(--primary); }
.app__nav i svg { width:20px; height:20px; }
.app__nav i.fab { position:relative; }
.app__nav i.fab span { position:relative; top:-12px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(to bottom,#60a5fa,#2563eb); box-shadow:0 10px 20px -3px rgb(59 130 246 / .45); }
.app__nav i.fab span svg { width:21px; height:21px; }

/* -- Reveal on scroll ------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal-init .reveal { transition:none !important; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; } }

/* -- Metrics band ----------------------------------------------------------- */
.section--metrics { padding:clamp(40px,5vw,64px) 0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:820px){ .metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .metrics { grid-template-columns:1fr; } }
.metric { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:26px 24px; position:relative; overflow:hidden; }
.metric::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); opacity:.7; }
.metric__ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--tint-fg); margin-bottom:14px; }
.metric__ic svg { width:20px; height:20px; }
.metric__val { font-size:clamp(34px,4.4vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1; }
.metric__val .suf { font-size:.5em; font-weight:700; color:var(--fg-subtle); margin-left:2px; }
.metric__lbl { font-size:14px; color:var(--fg-muted); margin-top:8px; line-height:1.45; }
.metrics__note { text-align:center; color:var(--fg-subtle); font-size:12.5px; margin-top:20px; }

/* -- Before / After --------------------------------------------------------- */
.ba { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; }
@media (max-width:880px){ .ba { grid-template-columns:1fr; gap:16px; } }
.ba__col { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:28px 26px; }
.ba__col--before { border-color:color-mix(in srgb,var(--danger) 30%,var(--border)); }
.ba__col--after { border-color:color-mix(in srgb,var(--primary) 45%,transparent); box-shadow:var(--shadow-lg); }
.ba__tag { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.02em; padding:8px 14px; border-radius:999px; background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger-strong); margin-bottom:18px; }
.ba__tag svg { width:16px; height:16px; }
.ba__tag--ok { background:var(--tint); color:var(--tint-fg); }
.ba__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ba__list li { display:flex; gap:12px; font-size:15px; color:var(--fg-muted); line-height:1.45; align-items:flex-start; }
.ba__x, .ba__c { flex-shrink:0; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; margin-top:1px; }
.ba__x { background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger-strong); }
.ba__c { background:var(--tint); color:var(--tint-fg); }
.ba__x svg, .ba__c svg { width:15px; height:15px; }
.ba__arrow { display:grid; place-items:center; color:var(--primary); }
.ba__arrow svg { width:30px; height:30px; }
@media (max-width:880px){ .ba__arrow { transform:rotate(90deg); padding:4px 0; } }

/* -- Flow (3-step) ---------------------------------------------------------- */
.flow { display:grid; grid-template-columns:1fr 56px 1fr 56px 1fr; gap:0; align-items:stretch; }
@media (max-width:880px){ .flow { grid-template-columns:1fr; gap:16px; } }
.flow__step {
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:26px 24px 24px; transition:border-color .3s, box-shadow .3s, transform .3s;
}
.flow__step.is-active { border-color:color-mix(in srgb,var(--primary) 60%,transparent); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.flow__no { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--primary); }
.flow__ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--tint); color:var(--tint-fg); margin:14px 0 16px; }
.flow__ic svg { width:23px; height:23px; }
.flow__t { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.flow__d { font-size:14.5px; color:var(--fg-muted); margin-top:8px; line-height:1.5; }
.flow__conn { display:flex; align-items:center; justify-content:center; }
.flow__conn .line { width:100%; height:2px; background:var(--border); position:relative; overflow:visible; }
@media (max-width:880px){ .flow__conn { height:20px; } .flow__conn .line { width:2px; height:100%; } }
.flow__conn .spark { position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%); background:var(--primary); box-shadow:0 0 10px 1px var(--primary); opacity:0; }
.flow__conn.run .spark { opacity:1; animation:sparkRun calc(1.6s / var(--speed)) linear infinite; }
@keyframes sparkRun { 0%{left:-2%;opacity:0} 14%{opacity:1} 86%{opacity:1} 100%{left:102%;opacity:0} }

.flow__stage { margin-top:36px; display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center; }
@media (max-width:880px){ .flow__stage { grid-template-columns:1fr; gap:28px; } }
.flow__caption { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:26px; }
.flow__caption .ph { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; color:var(--primary); font-weight:600; }
.flow__caption h4 { font-size:21px; font-weight:600; letter-spacing:-.02em; margin:12px 0 10px; }
.flow__caption p { font-size:15px; color:var(--fg-muted); line-height:1.55; min-height:48px; }
.flow__ctl { display:flex; align-items:center; gap:14px; margin-top:20px; }
.dots { display:flex; gap:6px; flex:1; }
.dots i { height:4px; flex:1; border-radius:3px; background:var(--border-strong); transition:background .3s; }
.dots i.on { background:var(--primary); }
.dots i.done { background:color-mix(in srgb,var(--primary) 45%,transparent); }
.playbtn { width:42px; height:42px; flex-shrink:0; border-radius:12px; border:1px solid var(--border-strong); background:var(--card); color:var(--fg); display:grid; place-items:center; transition:border-color .15s,transform .15s; }
.playbtn:hover { border-color:var(--fg-subtle); transform:translateY(-1px); }
.playbtn svg { width:16px; height:16px; }

/* -- Playground (use-case + floor plan) ------------------------------------- */
.tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:30px; }
.tab {
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px; font-size:15px; font-weight:600; letter-spacing:-.01em;
  background:var(--card); border:1px solid var(--border); color:var(--fg-muted);
  transition:all .16s;
}
.tab svg { width:18px; height:18px; }
.tab:hover { color:var(--fg); border-color:var(--border-strong); transform:translateY(-1px); }
.tab.is-active { background:var(--tint); color:var(--tint-fg); border-color:color-mix(in srgb,var(--primary) 40%,transparent); }
.play__note { text-align:center; color:var(--fg-subtle); font-size:13px; line-height:1.5; max-width:640px; margin:-12px auto 30px; }

.play { display:grid; grid-template-columns:1.25fr .95fr; gap:28px; align-items:stretch; }
@media (max-width:900px){ .play { grid-template-columns:1fr; } }
.play__canvas { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.play__canvas-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 6px 14px; }
.play__canvas-head .ttl { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.play__canvas-head .rt { font-family:var(--font-mono); font-size:12px; color:var(--fg-subtle); }
.planbox { position:relative; flex:1; border-radius:18px; background:var(--plan-paper); overflow:hidden; min-height:330px; border:1px solid var(--border); }
.planbox svg { display:block; width:100%; height:100%; }
/* floor-plan zoom + pan (Yandex-style) — controls + cursor + touch behaviour */
.planbox svg { touch-action:pan-y; }
.planbox.is-zoomed svg { touch-action:none; }
.planbox.is-zoomed { cursor:grab; }
.planbox.is-zoomed:active { cursor:grabbing; }
.plan-zoombadge { position:absolute; left:10px; top:10px; z-index:5; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--fg-muted); background:color-mix(in srgb,var(--card) 86%,transparent); border:1px solid var(--border); padding:3px 8px; border-radius:8px; box-shadow:var(--shadow-sm); pointer-events:none; }
.plan-ctrls { position:absolute; right:10px; bottom:10px; z-index:5; display:flex; flex-direction:column; gap:7px; }
.plan-ctl { width:34px; height:34px; border-radius:10px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); display:grid; place-items:center; color:var(--fg); transition:transform .1s, border-color .15s; }
.plan-ctl:hover { border-color:var(--border-strong); }
.plan-ctl:active { transform:scale(.92); }
.plan-ctl svg { width:18px; height:18px; }
.plan-ctl--fit { color:var(--primary); }
.plan-hint { position:absolute; left:10px; bottom:10px; z-index:4; font-size:10.5px; color:var(--fg-subtle); background:color-mix(in srgb,var(--card) 80%,transparent); padding:3px 8px; border-radius:7px; max-width:178px; line-height:1.3; pointer-events:none; }
@media (max-width:520px){ .plan-hint { display:none; } }
/* JS sets per-status fill/stroke inline (mirrors real PlanCanvas getPalette);
   CSS keeps only interaction + hover + coach-mark. No red in the plan. */
.plan-obj { transition:fill-opacity .15s, stroke-width .15s; }
.plan-obj.free, .plan-obj.mine { cursor:pointer; }
.plan-obj.free:hover { fill-opacity:.5 !important; }
.plan-obj.busy { cursor:default; }
.plan-obj.hold { cursor:not-allowed; }
.plan-obj.coach { animation:coachPulse 1.5s var(--ease) infinite; }
@keyframes coachPulse { 0%,100%{ fill-opacity:.25; stroke-width:1.8; } 50%{ fill-opacity:.6; stroke-width:3.5; } }
@media (prefers-reduced-motion:reduce){ .plan-obj.coach { animation:none; } }

/* tap tooltip explaining the tapped object */
.plan-tip { position:absolute; transform:translate(-50%,-100%); z-index:6; pointer-events:none;
  background:#0f172a; color:#fff; padding:8px 12px; border-radius:12px; font-size:12px; font-weight:500;
  line-height:1.35; box-shadow:var(--shadow-lg); max-width:200px; animation:popIn .2s var(--ease); }
.plan-tip::after { content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg); width:11px; height:11px; background:inherit; border-radius:2px; }
.plan-tip b { font-weight:700; }
.plan-tip i { display:block; font-style:normal; font-size:11px; opacity:.78; margin-top:3px; }
.plan-tip .ok { color:#60a5fa; font-weight:700; margin-left:6px; }
[data-theme="dark"] .plan-tip { background:#e2e8f0; color:#0f172a; }
[data-theme="dark"] .plan-tip .ok { color:#2563eb; }
.plan-legend { display:flex; flex-wrap:wrap; gap:16px; padding:14px 6px 2px; font-size:13px; color:var(--fg-muted); }
.plan-legend .lg { display:flex; align-items:center; gap:7px; }
.plan-legend .sw { width:14px; height:14px; border-radius:4px; }
.sw.free { background:var(--green-500); opacity:.4; border:1.5px solid var(--green-600); }
.sw.busy { background:var(--plan-busy); border:1.5px solid var(--plan-busy-bd); }
.sw.hold { background:var(--plan-hold); opacity:.55; border:1.5px solid var(--plan-hold-bd); }
.sw.mine { background:var(--green-500); opacity:.85; border:1.5px solid var(--green-700); }

.play__side { display:flex; flex-direction:column; gap:16px; }
.play__info { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:24px; }
.play__info .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tint); color:var(--tint-fg); }
.play__info .ic svg { width:24px; height:24px; }
.play__info h3 { font-size:21px; font-weight:600; letter-spacing:-.02em; margin:16px 0 8px; }
.play__info p { font-size:15px; color:var(--fg-muted); line-height:1.55; }
.play__info .ex { margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.play__info .ex .row { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--fg-muted); }
.play__info .ex .row svg { width:16px; height:16px; color:var(--primary); flex-shrink:0; }

.booking-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:20px 22px; }
.booking-card .bc-head { display:flex; align-items:center; justify-content:space-between; }
.booking-card .bc-head .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-subtle); }
.booking-card .bc-cnt { font-size:34px; font-weight:700; letter-spacing:-.02em; margin-top:4px; }
.booking-card .bc-cnt .u { font-size:16px; color:var(--fg-subtle); font-weight:600; }
.booking-card .bc-list { margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; min-height:30px; }
.chip-seat { font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--tint); color:var(--tint-fg); border:1px solid color-mix(in srgb,var(--primary) 30%,transparent); animation:popIn .3s var(--ease); }
@keyframes popIn { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:none} }
.booking-card .bc-empty { font-size:14px; color:var(--fg-subtle); }
.booking-card .bc-btn { margin-top:16px; width:100%; }
.booking-card .bc-btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* -- Features grid ---------------------------------------------------------- */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .features { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features { grid-template-columns:1fr; } }
.feat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:26px 24px; transition:border-color .3s, transform .3s, box-shadow .3s; }
.feat-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--primary) 40%,transparent); box-shadow:var(--shadow-lg); }
.feat-card .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tint); color:var(--tint-fg); margin-bottom:16px; }
.feat-card .ic svg { width:23px; height:23px; }
.feat-card h3 { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.feat-card p { font-size:14.5px; color:var(--fg-muted); margin-top:8px; line-height:1.5; }

/* -- Setup walkthrough ------------------------------------------------------ */
.setup { display:grid; grid-template-columns:.92fr 1.08fr; gap:44px; align-items:center; }
@media (max-width:920px){ .setup { grid-template-columns:1fr; gap:32px; } }
.setup__steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.setup__step { display:flex; gap:16px; padding:18px 18px; border-radius:18px; border:1px solid transparent; transition:background .3s, border-color .3s; cursor:default; }
.setup__step.is-active { background:var(--card); border-color:var(--border); box-shadow:var(--shadow-sm); }
.setup__step .no { flex-shrink:0; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-mono); font-weight:600; font-size:14px; background:var(--code-bg); color:var(--fg-subtle); border:1px solid var(--border); transition:all .3s; }
.setup__step.is-active .no { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }
.setup__step .tt { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.setup__step .dd { font-size:14px; color:var(--fg-muted); margin-top:5px; line-height:1.5; }

/* admin mock */
.mock { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg-elevated); overflow:hidden; box-shadow:var(--shadow-lg); }
.mock__bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--border); }
.mock__dots { display:flex; gap:6px; }
.mock__dots i { width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.mock__route { font-family:var(--font-mono); font-size:12px; color:var(--fg-subtle); }
.mock__body { padding:20px; min-height:300px; display:flex; flex-direction:column; gap:14px; }
.msec { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); display:flex; align-items:center; gap:10px; }
.msec::after { content:""; flex:1; height:1px; background:var(--border); }
.mrow { display:flex; align-items:center; gap:12px; }
.mrow .ml { width:96px; flex-shrink:0; font-size:13px; color:var(--fg-subtle); }
.mfld { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; height:38px; padding:0 13px; border-radius:11px; border:1px solid var(--border); background:var(--card); font-size:14px; font-weight:500; transition:border-color .25s, box-shadow .25s; }
.mfld .ph { color:var(--fg-subtle); font-weight:400; }
.mfld.sel::after { content:"▾"; color:var(--fg-subtle); font-size:11px; }
.mfld.focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }
.mchips { display:flex; flex-wrap:wrap; gap:7px; }
.mchip { font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--border); color:var(--fg-subtle); background:var(--card); transition:all .25s; }
.mchip.on { color:var(--tint-fg); background:var(--tint); border-color:color-mix(in srgb,var(--primary) 35%,transparent); }
.mact { display:flex; justify-content:flex-end; gap:9px; margin-top:auto; }
.mbtn { font-size:13px; font-weight:600; padding:9px 16px; border-radius:11px; border:1px solid var(--border-strong); background:var(--card); color:var(--fg); transition:all .2s; }
.mbtn.pri { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }
.mbtn.press { transform:translateY(1px); filter:brightness(.92); }
.mbtn.ok { box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent); }
/* mini plan editor */
.mplan { position:relative; border-radius:14px; background:var(--plan-bg); height:150px; overflow:hidden; border:1px solid var(--border); }
.mplan svg { width:100%; height:100%; display:block; }
.mplan .obj { fill:var(--green-500); fill-opacity:.28; stroke:var(--green-600); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.mplan .obj.show { animation:objDrop .4s var(--ease) forwards; }
@keyframes objDrop { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }

/* shared demo cursor */
.cursor { position:absolute; z-index:40; width:22px; height:22px; left:0; top:0; pointer-events:none; opacity:0; transform:translate(0,0); transition:transform .55s var(--ease), opacity .3s; filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.cursor.show { opacity:1; }
.cursor svg { width:100%; height:100%; display:block; }
.cursor.click svg { transform:scale(.8); }

/* -- Testimonials ----------------------------------------------------------- */
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .reviews { grid-template-columns:1fr; max-width:560px; margin:0 auto; } }
.review { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:26px 24px; display:flex; flex-direction:column; }
.review__quote { color:color-mix(in srgb,var(--primary) 55%,transparent); }
.review__quote svg { width:30px; height:30px; }
.review__stars { display:flex; gap:2px; margin:14px 0 12px; color:#f59e0b; }
.review__stars svg { width:16px; height:16px; }
.review__text { font-size:15px; color:var(--fg); line-height:1.55; flex:1; }
.review__who { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.review__av { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; flex-shrink:0; }
.review__name { font-size:14.5px; font-weight:600; }
.review__role { font-size:12.5px; color:var(--fg-subtle); margin-top:2px; }

/* -- Pricing ---------------------------------------------------------------- */
.price-toggle { display:inline-flex; align-items:center; gap:3px; padding:4px; border-radius:999px; background:var(--card); border:1px solid var(--border); margin:0 auto 8px; }
.price-toggle button { border:0; background:transparent; color:var(--fg-muted); font-size:14px; font-weight:600; padding:9px 18px; border-radius:999px; transition:all .18s; }
.price-toggle button.on { background:var(--tint); color:var(--tint-fg); }
.price-toggle .save { font-size:11px; color:var(--primary); font-weight:700; }
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; margin-top:36px; }
@media (max-width:900px){ .pricing { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; } }
.plan-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:30px 26px; display:flex; flex-direction:column; transition:border-color .3s, transform .3s, box-shadow .3s; }
.plan-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.plan-card.feat { border-color:color-mix(in srgb,var(--primary) 55%,transparent); box-shadow:var(--shadow-lg); }
.plan-card .tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 13px; border-radius:999px; background:var(--primary); color:var(--primary-fg); white-space:nowrap; }
.plan-card .pname { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.plan-card .pdesc { font-size:13.5px; color:var(--fg-subtle); margin-top:6px; min-height:38px; }
.plan-card .pprice { margin-top:18px; display:flex; align-items:baseline; gap:6px; }
.plan-card .pprice .amt { font-size:42px; font-weight:700; letter-spacing:-.03em; }
.plan-card .pprice .per { font-size:14px; color:var(--fg-subtle); }
.plan-card .pfeat { list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-card .pfeat li { display:flex; gap:10px; font-size:14.5px; color:var(--fg-muted); line-height:1.4; }
.plan-card .pfeat li svg { width:18px; height:18px; color:var(--primary); flex-shrink:0; margin-top:1px; }
.plan-card .btn { width:100%; }
/* premium gradient — reserved for the Pro upsell only */
.plan-card.pro .tag { background:linear-gradient(90deg,var(--premium-from),var(--premium-to)); }
.plan-card.pro .btn--primary { background:linear-gradient(90deg,var(--premium-from),var(--premium-to)); box-shadow:0 8px 22px -10px var(--premium-to); }
.plan-card.pro .btn--primary:hover { opacity:.95; transform:translateY(-1px); }
.plan-card.pro .pfeat li svg { color:var(--premium-to); }

/* -- FAQ -------------------------------------------------------------------- */
.faq { display:flex; flex-direction:column; gap:12px; }
.faq__item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.faq__item.open { border-color:color-mix(in srgb,var(--primary) 45%,transparent); box-shadow:var(--shadow-sm); }
.faq__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; background:transparent; border:0; text-align:left; font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--fg); }
.faq__q .chev { flex-shrink:0; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--fg-subtle); transition:transform .3s var(--ease), color .25s, background .25s; }
.faq__q .chev svg { width:18px; height:18px; }
.faq__item.open .faq__q .chev { transform:rotate(180deg); color:var(--tint-fg); background:var(--tint); }
.faq__a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq__a-in { padding:0 22px 22px; font-size:15px; color:var(--fg-muted); line-height:1.6; }

/* -- Final CTA -------------------------------------------------------------- */
.cta-band { position:relative; overflow:hidden; border-radius:32px; padding:clamp(40px,6vw,72px); background:var(--card); border:1px solid var(--border); text-align:center; }
.cta-band::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(700px 360px at 50% -30%, var(--glow), transparent 70%); pointer-events:none; }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1.06; }
.cta-band p { font-size:clamp(16px,1.8vw,19px); color:var(--fg-muted); margin:18px auto 0; max-width:560px; line-height:1.55; }
.cta-form { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.cta-input { height:58px; padding:0 20px; border-radius:999px; border:1px solid var(--border-strong); background:var(--bg-elevated); color:var(--fg); font-size:16px; font-family:inherit; min-width:240px; transition:border-color .15s, box-shadow .15s; }
.cta-input::placeholder { color:var(--fg-subtle); }
.cta-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }
.cta-band .cta-form .btn { flex-shrink:0; }
.cta-ok { display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:12px 20px; border-radius:999px; background:var(--tint); color:var(--tint-fg); font-size:15px; font-weight:600; animation:popIn .3s var(--ease); }
.cta-ok svg { width:18px; height:18px; }
.cta-band .note { font-size:13.5px; color:var(--fg-subtle); margin-top:18px; }

/* -- Footer ----------------------------------------------------------------- */
.footer { border-top:1px solid var(--border); padding:40px 0 56px; }
.footer__in { display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.footer__links { display:flex; flex-wrap:wrap; gap:22px; font-size:14px; color:var(--fg-muted); }
.footer__links a:hover { color:var(--fg); }
.footer__copy { font-size:13px; color:var(--fg-subtle); }