/* ============================================================
   AIO — All In One Merchant — Design System
   Ink Navy / Signal Orange / Amber Gold
   Display: Space Grotesk · Body: IBM Plex Sans · Utility: IBM Plex Mono
   ============================================================ */

:root {
  --ink:        #0B1E3A;
  --ink-2:      #12274A;
  --ink-3:      #1B335C;
  --line-dark:  #263D66;
  --surface:    #EEF1F6;
  --surface-2:  #FFFFFF;
  --line:       #D7DEEA;
  --line-soft:  #E4E9F2;
  --accent:     #F07E12;
  --accent-2:   #FFC24D;
  --accent-ink: #7A3E00;
  --text:       #142140;
  --text-soft:  #4C5A78;
  --text-mute:  #7A87A2;
  --on-ink:     #EDF1F9;
  --on-ink-soft:#A9B8D6;

  /* logo blue -- one flat brand color, no gradient */
  --brand-blue:     #1E3A8A;
  --brand-blue-2:   #2F6FE0;
  --brand-gradient: #1F3E8C;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 2px rgba(11,30,58,.04), 0 12px 28px -14px rgba(11,30,58,.18);
  --shadow-lift: 0 24px 48px -18px rgba(11,30,58,.30);

  --disp: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--ink-3) var(--surface); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; border: 3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--disp); margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* ---------- Utility bar ---------- */
.utility {
  background: var(--ink);
  color: rgba(255,255,255,.82);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--accent);
}
.utility .wrap {
  display: flex; justify-content: space-between; align-items: center;
  height: 36px;
}
.utility a { color: rgba(255,255,255,.9); border-bottom: 1px solid transparent; }
.utility a:hover { color: #fff; border-color: #fff; }
.utility .topbar-demo-btn {
  display: inline-flex; align-items: center;
  background: var(--accent); color: #fff;
  padding: 3px 12px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; letter-spacing: normal;
  border-bottom: none;
  transition: background .15s ease;
}
.utility .topbar-demo-btn:hover { background: var(--accent-2); color: #fff; border-color: transparent; }
.utility .dot { color: rgba(255,255,255,.5); margin: 0 8px; }
@media (max-width: 640px) {
  .utility .wrap { justify-content: center; }
  .utility .wrap > span:first-child { display: none; }
}

/* ---------- Header / Product Rail ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11,30,58,.02), 0 8px 24px -18px rgba(11,30,58,.25);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* background + blur live on a pseudo-element clipped strictly to the header's
   own box -- keeps the blur from bleeding past the edge without clipping
   real children like .nav-drop-panel, which intentionally overflow below it */
header.site::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  transition: background .3s ease, backdrop-filter .3s ease;
}
/* Transparent (but slightly tinted/frosted) header floating over the dark
   home hero -- added only on pages that have a .hero (script.js), so
   product pages with a light .pband keep the normal solid header instead. */
header.site.header--overlay:not(.header--scrolled) {
  border-bottom-color: transparent;
  box-shadow: none;
}
header.site.header--overlay:not(.header--scrolled)::before {
  background: rgba(11,30,58,.10);
}
header.site.header--overlay:not(.header--scrolled) .logo { color: var(--on-ink); }
header.site.header--overlay:not(.header--scrolled) .nav-link { color: var(--on-ink); }
header.site.header--overlay:not(.header--scrolled) .nav-link:hover,
header.site.header--overlay:not(.header--scrolled) .nav-link.active { background: rgba(255,255,255,.14); color: #fff; }
header.site.header--overlay:not(.header--scrolled) .nav-link.active { color: var(--accent-2); }
header.site.header--overlay:not(.header--scrolled) .menu-toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
header.site.header--overlay:not(.header--scrolled) .menu-toggle span { background: #fff; }

.header-row {
  display: flex; align-items: center; gap: 28px;
  height: 76px;
}
.logo {
  font-family: var(--disp); font-weight: 700; font-size: 20px;
  color: var(--text); display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.logo span.sub {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  color: var(--accent-2); letter-spacing: .1em; text-transform: uppercase;
}
.logo-img { height: 38px; width: auto; display: block; }
header.site .logo {
  background: #fff; border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.35);
}
header.site .logo-img {
  height: 44px;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------- Main nav (Home / Salon Solutions ▾ / Marketing / Packages / Pricing / About / Contact) ---------- */
.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link {
  font-family: var(--body); font-weight: 500; font-size: 14.5px;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--accent-ink); }
.nav-link .caret-ico { font-size: 10px; transition: transform .15s ease; }

.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 230px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 50;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel,
.nav-drop.open .nav-drop-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-drop:hover .caret-ico, .nav-drop.open .caret-ico { transform: rotate(180deg); }
.nav-drop-panel a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 14px; color: var(--text-soft);
  padding: 10px 12px; border-radius: 8px;
}
.nav-drop-panel a:hover { background: var(--surface); color: var(--text); }
.nav-drop-panel a.active { background: var(--surface); color: var(--accent-ink); }
.nav-drop-panel a .code {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  width: 30px; flex-shrink: 0;
}

.header-cta { flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }

/* ---------- Language toggle (EN / VI) ---------- */
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text);
  cursor: pointer; flex-shrink: 0; transition: border-color .15s ease, background .15s ease;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.lang-flag { font-size: 14px; line-height: 1; }
header.site.header--overlay:not(.header--scrolled) .lang-toggle {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: var(--on-ink);
}
.lang-toggle--mobile { width: 100%; justify-content: center; margin-top: 10px; }

/* ---------- Mobile menu ---------- */
.menu-toggle {
  display: none; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  align-items: center; justify-content: center; gap: 4px;
  flex-direction: column;
}
.menu-toggle span { width: 16px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
  display: none;
  max-height: 0; overflow: hidden;
  background: transparent; border-top: 0 solid var(--line);
  transition: max-height .25s ease, border-top-width .25s ease;
}
.mobile-panel.open { max-height: 640px; background: var(--surface-2); border-top-width: 1px; }
.mobile-panel-inner { padding: 10px 20px 22px; display: flex; flex-direction: column; }
.mobile-panel a, .mobile-panel .mobile-group-label {
  padding: 12px 4px; font-size: 15px; color: var(--text-soft);
  border-bottom: 1px solid var(--line);
}
.mobile-panel a:hover, .mobile-panel a.active { color: var(--accent-ink); }
.mobile-panel .mobile-group-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); border-bottom: none; padding-bottom: 2px; padding-top: 18px;
}
.mobile-panel .mobile-sub { padding-left: 14px; font-size: 14px; }
.mobile-panel .btn { margin-top: 16px; justify-content: center; }

@media (max-width: 980px) {
  .mainnav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-panel { display: block; }
  .header-right > .lang-toggle:not(.lang-toggle--mobile) { display: none; }
}
@media (max-width: 460px) {
  .header-login { padding: 10px 14px; font-size: 13px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--body); font-weight: 600; font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(31,62,140,.5);
}
.btn-primary:hover { background: #274a9e; }
.btn-ghost-dark { color: var(--on-ink); border-color: var(--line-dark); }
.btn-ghost-dark:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn-ghost-light { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.btn-ghost-light:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-arrow { transition: transform .15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Eyebrow / badges ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .bar { width: 20px; height: 1px; background: var(--accent); display: inline-block; }
.eyebrow.on-dark { color: var(--accent-2); }
.eyebrow.on-light { color: var(--accent-ink); }
/* .hero / .pband switched from dark to light backgrounds -- their eyebrow
   badges (still marked up as "on-dark" per-page) need the light-bg color */
.pband .eyebrow.on-dark { color: var(--accent-ink); }

.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-dark); color: var(--on-ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================
   HERO (home) — split hero with live device mock, tab-driven
   ============================================================ */
.hero {
  position: relative;
  /* pulled up under the sticky header (~76.5px tall) so the transparent
     header shows this dark background through it instead of a gap --
     must NOT exceed header's real height or hero paints over the
     topbar/header seam itself (hero is later in DOM, so any overshoot
     bleeds its own background over the accent border at the seam) */
  margin-top: -76px;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(240,126,18,.16), transparent 60%),
    radial-gradient(900px 520px at 6% 100%, rgba(47,111,224,.28), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink);
  padding: 92px 0 36px;
  overflow: hidden;
}
@media (max-width: 700px) { .hero { padding: 124px 0 36px; } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  animation: heroDrift 34s linear infinite;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  right: -14vw; top: -18vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(78,150,255,.16), transparent 72%);
  animation: heroPulse 9s ease-in-out infinite;
}
.hero > .wrap { position: relative; z-index: 1; max-width: 1320px; margin-left: auto; margin-right: auto; transform: translateX(-30px); }
@media (max-width: 1420px) { .hero > .wrap { transform: none; } }
/* a few twinkling stars scattered across the hero background */
.hero-star {
  position: absolute; z-index: 0; pointer-events: none;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.8);
  animation: heroStarTwinkle 3.6s ease-in-out infinite;
}
@keyframes heroStarTwinkle {
  0%, 100% { opacity: .15; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-star { animation: none; opacity: .5; }
}
@keyframes heroDrift {
  from { background-position: 0 0, 23px 23px; }
  to   { background-position: 460px 230px, 483px 253px; }
}
@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 44px; row-gap: 6px; align-items: stretch;
}
@media (max-width: 1180px) { .hero-grid { grid-template-columns: 1fr; gap: 0; } }

.hero h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  margin: 18px 0 20px;
}
.hero h1 em {
  font-style: normal; color: var(--accent-2);
}
.hero p.lede {
  font-size: 17px; color: var(--on-ink-soft); max-width: 46ch; margin-bottom: 30px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-tab {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line-dark); color: var(--on-ink-soft);
  transition: all .15s ease;
}
.hero-tab.active { border-color: var(--accent); color: var(--accent-2); background: rgba(240,126,18,.08); }

/* device mock */
.device {
  position: relative;
  background: linear-gradient(180deg, #16294D, #0E2040);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 22px;
  min-height: 340px;
}
.device-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.device-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-dark); }
.device-label {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--on-ink-soft);
  letter-spacing: .06em;
}
.device-screen { font-family: var(--mono); font-size: 13px; color: var(--on-ink-soft); min-height: 250px; }
.device-screen .line { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-dark); }
.device-screen .line:last-child { border-bottom: none; }
.device-screen .k { color: var(--accent-2); flex-shrink: 0; }
.device-screen .v { color: var(--on-ink); }
.device-screen .caret { display: inline-block; width: 7px; height: 14px; background: var(--accent); animation: blink 1s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Sections — light surface
   ============================================================ */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
@media (max-width: 700px) { section.tight { padding: 32px 0; } }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 14px; }
.section-head p { color: var(--text-soft); margin-top: 14px; font-size: 16px; }

.trust-logos { padding: 40px 0 8px; text-align: center; }
.trust-logos-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 26px;
}
.trust-logos-row {
  display: flex; align-items: center; justify-content: center;
  gap: 44px; flex-wrap: wrap;
}
.tl {
  display: flex; align-items: center; gap: 10px;
  opacity: .6; filter: grayscale(.4);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.tl:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); }
.tl-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.tl-ico svg { width: 18px; height: 18px; }
.tl-ico-google { background: #fff; border: 1px solid var(--line); }
.tl-ico-google svg { width: 20px; height: 20px; }
.tl-ico-facebook { background: #1877F2; }
.tl-ico-openai { background: #10A37F; }
.tl-ico-twilio { background: #F22F46; }
.tl-ico-mx { background: var(--ink); }
.tl-name { font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--text); }

.trust-logos--footer {
  padding: 34px 0; margin: 8px 0 0;
  border-bottom: 1px solid var(--line-dark);
}
.trust-logos--footer .trust-logos-head { color: var(--on-ink-soft); }
.trust-logos--footer .tl-name { color: var(--on-ink); }
.trust-logos--footer .tl-ico-mx { background: var(--ink-3); }

@media (max-width: 640px) {
  .trust-logos-row { gap: 20px 26px; }
  .tl-name { font-size: 15px; }
  .tl-ico { width: 28px; height: 28px; }
}

.stat-strip-head {
  font-family: var(--disp); font-weight: 700; font-size: 15px; color: var(--text-mute);
  margin: 30px 0 -4px;
}
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-cell { padding: 26px 28px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.stat-cell:last-child { border-right: none; }
.stat-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-ico svg { width: 19px; height: 19px; }
.stat-ico-a { background: rgba(240,126,18,.12); color: var(--accent); }
.stat-ico-b { background: rgba(56,132,255,.12); color: #3884FF; }
.stat-ico-c { background: rgba(139,92,246,.12); color: #8B5CF6; }
.stat-ico-d { background: rgba(16,163,127,.12); color: #10A37F; }
.stat-cell .num { font-family: var(--disp); font-size: 28px; font-weight: 700; color: var(--ink); }
.stat-cell .lbl { font-family: var(--mono); font-size: 11.5px; color: var(--text-mute); letter-spacing: .04em; margin-top: 4px; }

/* ---------- All in one: hub photo + 3 cards left/right ---------- */
.flow2-section { padding: 76px 0 88px; background: var(--surface-2); }
.flow2-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.flow2-head h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 14px 0 12px; color: var(--text); }
.flow2-head p { color: var(--text-soft); font-size: 15.5px; line-height: 1.6; }

.flow2-diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; max-width: 1080px; margin: 0 auto; }
.flow2-col { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.flow2-right { align-items: flex-end; }

.flow2-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 18px; width: 260px; box-sizing: border-box;
  transition: transform .2s ease, box-shadow .2s ease;
}
.flow2-right .flow2-card { flex-direction: row-reverse; text-align: right; }
.flow2-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.flow2-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.flow2-ico svg { width: 19px; height: 19px; }
.flow2-ico.c1 { color: var(--accent); }
.flow2-ico.c2 { color: #3B82F6; }
.flow2-ico.c3 { color: #F5A623; }
.flow2-ico.c4 { color: #10B981; }
.flow2-ico.c5 { color: #EC4899; }
.flow2-ico.c6 { color: #A855F7; }
.flow2-text { display: flex; flex-direction: column; }
.flow2-text strong { font-family: var(--disp); font-size: 14.5px; color: var(--text); }
.flow2-text span { font-family: var(--body); font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }

.flow2-center { display: flex; align-items: center; justify-content: center; }
.flow2-blob { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; }
.flow2-blob img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

@media (max-width: 900px) {
  .flow2-diagram { grid-template-columns: 1fr; justify-items: center; }
  .flow2-center { order: -1; margin-bottom: 12px; }
  .flow2-col, .flow2-right { align-items: center; }
  .flow2-right .flow2-card { flex-direction: row; text-align: left; }
  .flow2-blob { width: 240px; height: 260px; }
}
.flow-head .eyebrow { justify-content: center; }
.flow-head h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 14px 0 12px; color: var(--text); }
.flow-head p { color: var(--text-soft); font-size: 15.5px; line-height: 1.6; }

.flow-diagram { position: relative; max-width: 1180px; margin: 0 auto; }
.flow-row { display: flex; gap: 14px; }
.flow-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }

.flow-card {
  width: 100%; min-height: 96px; box-sizing: border-box;
  background: var(--ink); border: 2px solid transparent; border-radius: 14px;
  padding: 20px 6px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.flow-ico { display: inline-flex; width: 30px; height: 30px; margin-bottom: 8px; }
.flow-ico svg { width: 100%; height: 100%; }
.flow-ico.c1 { color: #8B5CF6; }
.flow-ico.c2 { color: #EC4899; }
.flow-ico.c3 { color: #3B82F6; }
.flow-ico.c4 { color: #10B981; }
.flow-ico.c5 { color: #F5A623; }
.flow-ico.c6 { color: #A855F7; }
.flow-ico.c7 { color: #14B8A6; }
.flow-card-label { font-family: var(--disp); font-weight: 700; font-size: 13.5px; color: #fff; line-height: 1.3; }

.flow-line { width: 0; margin: 0 auto; border-left: 3px dashed var(--line); transition: border-color .25s ease, border-style .25s ease; }
.flow-line-top { height: 62px; }
.flow-line-gap { height: 56px; border-left-color: transparent; }
.flow-line-bottom { height: 62px; }

.flow-status {
  width: 100%; box-sizing: border-box; text-align: center;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 6px;
  font-family: var(--body); font-weight: 600; font-size: 12.5px; color: var(--text);
  background: var(--surface-2);
  transition: border-color .25s ease, color .25s ease;
}

.flow-hub {
  position: absolute; left: 50%; top: 190px; transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff;
  padding: 14px 22px; border-radius: 14px;
  font-family: var(--disp); font-weight: 700; font-size: 15px;
  box-shadow: 0 0 0 6px rgba(240,126,18,.10), 0 10px 34px -6px rgba(240,126,18,.55);
  animation: flowHubPulse 2.6s ease-in-out infinite;
}
.flow-hub-ico { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.flow-hub-ico svg { width: 100%; height: 100%; }
@keyframes flowHubPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(240,126,18,.10), 0 10px 34px -6px rgba(240,126,18,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(240,126,18,.16), 0 14px 44px -6px rgba(240,126,18,.7); }
}

/* active branch -- cycled via JS to suggest a live data flow */
.flow-col--active .flow-card { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.flow-col--active .flow-line-top,
.flow-col--active .flow-line-gap,
.flow-col--active .flow-line-bottom { border-left-style: solid; border-left-color: var(--accent); }
.flow-col--active .flow-status { border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .flow-hub { animation: none; } }

@media (max-width: 980px) {
  .flow-row { flex-wrap: wrap; row-gap: 40px; }
  .flow-col { flex: 0 0 calc(33.333% - 10px); }
  .flow-hub { position: static; transform: none; margin: 24px auto 0; width: max-content; }
  .flow-line-gap { display: none; }
  .flow-line-top, .flow-line-bottom { height: 30px; }
}
@media (max-width: 620px) {
  .flow-col { flex: 0 0 calc(50% - 7px); }
}

/* ---------- Grand counter band ---------- */
.counter-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 420px at 92% 100%, rgba(47,111,224,.20), transparent 62%),
    linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%);
  padding: 64px 0;
}
.counter-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px);
  background-size: 34px 34px;
}
.counter-band::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,126,18,.14), transparent 70%);
  pointer-events: none;
}
.counter-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) { .counter-grid { grid-template-columns: 1fr; gap: 34px; } }
.counter-cell {
  text-align: center; padding: 0 28px; border-right: 1px solid var(--line-dark);
}
.counter-cell:last-child { border-right: none; }
@media (max-width: 700px) { .counter-cell { border-right: none; padding: 0; } }
.counter-num {
  font-family: var(--disp); font-weight: 700; color: var(--on-ink);
  font-size: clamp(40px, 5.2vw, 60px); line-height: 1;
}
.counter-num::after { content: attr(data-suffix); color: var(--accent-2); }
.counter-lbl {
  font-family: var(--mono); font-size: 12.5px; color: var(--on-ink-soft);
  letter-spacing: .04em; margin-top: 12px;
}

/* Product grid */
.grid-4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.pcard {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column; height: 100%;
}
.pcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.pcard .code { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); letter-spacing: .06em; }
.pcard .icon { width: 40px; height: 40px; margin: 14px 0 16px; color: var(--accent); }
.pcard h3 { font-size: 19px; margin-bottom: 10px; }
.pcard p { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; flex: 1; }
.pcard .go { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.pcard:hover .go { color: var(--accent-ink); }

/* Connect diagram */
/* ---------- Demo video ---------- */
.demo-grid         { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.demo-grid-reverse { display: grid; grid-template-columns: 1.15fr .85fr;  gap: 56px; align-items: center; }
@media (max-width: 700px) { .demo-grid, .demo-grid-reverse { grid-template-columns: 1fr; gap: 24px; } }
.demo-video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-lift); border: 1px solid var(--line);
}
@media (max-width: 700px) { .demo-video { aspect-ratio: 4 / 3; max-height: 240px; } }
.demo-video img, .demo-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.demo-video:hover img, .demo-video:hover video { transform: scale(1.03); }
.demo-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(11,30,58,.55); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .2s ease, transform .2s ease;
}
.demo-video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.demo-video:hover .demo-video-play { background: var(--accent); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.08); color: #22140a; }

.connect-wrap {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 48px 40px; box-shadow: var(--shadow-card);
}
.connect-diagram { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; position: relative; margin-bottom: 34px; }
@media (max-width: 800px) { .connect-diagram { grid-template-columns: 1fr 1fr; } }
.connect-node {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 14px; text-align: center; background: var(--surface);
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
}
.connect-node .tag { color: var(--accent-ink); display: block; font-size: 10.5px; margin-bottom: 6px; letter-spacing: .06em; }
.connect-hub {
  text-align: center; padding: 18px; border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px;
  color: var(--accent-ink); background: rgba(240,126,18,.06);
}

/* Feature blocks (product pages) */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 24px; display: flex; gap: 16px;
}
.feat .num { font-family: var(--mono); color: var(--accent); font-size: 13px; flex-shrink: 0; padding-top: 3px; }
.feat h4 { font-size: 16.5px; margin-bottom: 8px; }
.feat p { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }

/* How it works steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 24px 0; } }
.step { position: relative; padding: 0 22px 0 0; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; right: -2px; width: calc(100% - 40px);
  border-top: 1px dashed var(--line); display: none;
}
@media (min-width: 901px) { .step:not(:last-child)::after { display: block; } }
.step .tag { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); }
.step-dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink);
  color: var(--on-ink); font-family: var(--mono); font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step h4 { font-size: 15.5px; margin: 0 0 8px; }
.step p { color: var(--text-soft); font-size: 13.5px; line-height: 1.5; }

/* Product hero band on inner pages -- dark theme, matching the home hero */
.pband {
  position: relative;
  /* pulled up under the sticky header, same trick as .hero, so the
     transparent header shows this dark background through it */
  margin-top: -76px;
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(240,126,18,.16), transparent 60%),
    radial-gradient(800px 420px at 4% 110%, rgba(47,111,224,.28), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink); padding: 140px 0 60px;
  border-bottom: none;
  overflow: hidden;
}
@media (max-width: 700px) { .pband { padding: 148px 0 60px; } }
/* same drifting dot-grid + pulsing glow as the home hero, so secondary
   pages feel like the same living background instead of a static gradient */
.pband::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  animation: heroDrift 34s linear infinite;
}
.pband::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  right: -14vw; top: -18vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(78,150,255,.16), transparent 72%);
  animation: heroPulse 9s ease-in-out infinite;
}
.pband > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .pband::before, .pband::after { animation: none; }
}
.pband-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .pband-grid { grid-template-columns: 1fr; } }
.pband h1 { font-size: clamp(32px, 4vw, 48px); margin: 16px 0 16px; }
.pband h1 em {
  font-style: normal !important;
  background: var(--brand-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.pband p.lede { color: var(--on-ink-soft); font-size: 16.5px; max-width: 48ch; margin-bottom: 26px; }
.crumbs { font-family: var(--mono); font-size: 11.5px; color: var(--on-ink-soft); margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent-2); }

.cross-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.cross-chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--on-ink-soft);
  border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 12px;
}
.cross-chip:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* Testimonial */
.quote-strip { background: var(--ink-2); color: var(--on-ink); border-radius: var(--radius-lg); padding: 48px 44px; }
.quote-strip blockquote { font-family: var(--disp); font-size: clamp(20px,2.4vw,28px); line-height: 1.4; margin: 0 0 20px; }
.quote-strip cite { font-family: var(--mono); font-size: 12.5px; color: var(--on-ink-soft); font-style: normal; }

/* ---------- Get a website — agency-style split (copy block + photo grid) ---------- */
.webshow2 { overflow: hidden; }
.webshow2-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 560px;
}
.webshow2-copy {
  grid-column: 1 / 2;
  height: 100%;
  background:
    radial-gradient(500px 320px at 90% 0%, rgba(240,126,18,.16), transparent 60%),
    radial-gradient(420px 300px at 6% 100%, rgba(47,111,224,.32), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px;
  padding: 56px 48px;
  box-sizing: border-box;
}
.webshow2-copy .eyebrow { color: var(--accent-2); }
.webshow2-copy h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.22; }
.webshow2-copy h2 em { font-style: normal; color: var(--accent-2); }
.webshow2-copy p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.65; max-width: 42ch; }
.webshow2-copy .btn { align-self: flex-start; margin-top: 6px; }

.webshow2-photos { grid-column: 2 / 5; height: 100%; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.webshow2-photo {
  position: relative; overflow: hidden; height: 100%;
  padding: 0; border: none; margin: 0; cursor: pointer;
}
.webshow2-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block; transition: transform .5s ease, opacity .3s ease;
}
.webshow2-photo:hover img { transform: scale(1.06); }
.webshow2-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,40,.25), transparent 40%);
  pointer-events: none;
}

.webshow2-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11,20,40,.55); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
.webshow2-arrow:hover { background: var(--accent); border-color: var(--accent); }
.webshow2-prev { left: 14px; }
.webshow2-next { right: 14px; }

@media (max-width: 900px) {
  .webshow2-grid { grid-template-columns: 1fr; height: auto; }
  .webshow2-copy { grid-column: 1 / -1; padding: 48px 24px; height: auto; }
  .webshow2-photos { grid-column: 1 / -1; height: 260px; }
}
@media (max-width: 560px) {
  .webshow2-photos { grid-template-columns: 1fr; height: 220px; }
  .webshow2-photo { height: 100%; }
}

/* ---------- Get a website — showcase marquee ---------- */
.webshow {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 8% 0%, rgba(47,111,224,.18), transparent 60%),
    radial-gradient(700px 380px at 95% 100%, rgba(240,126,18,.10), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding: 72px 0 56px;
}
.webshow-head { max-width: 640px; margin: 0 auto; text-align: center; color: var(--on-ink); }
.webshow-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin: 16px 0 18px; color: var(--on-ink); }
.webshow-head p { color: var(--on-ink-soft); font-size: 15.5px; line-height: 1.6; margin-bottom: 26px; }

.web-marquee {
  margin-top: 44px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.web-track {
  display: flex; gap: 22px; width: max-content;
  animation: webScroll 34s linear infinite;
}
.web-marquee:hover .web-track { animation-play-state: paused; }
@keyframes webScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .web-track { animation: none; } }

.web-card {
  position: relative;
  flex: 0 0 460px; height: 320px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line-dark);
  padding: 0; background: #fff; cursor: pointer;
  opacity: .55; transform: scale(.9);
  transition: transform .4s cubic-bezier(.22,.9,.32,1), opacity .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.web-card:hover { transform: scale(.94) translateY(-4px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.5); }
.web-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* the card nearest the marquee's center, tracked live in script.js, gets
   the "in focus" wow treatment -- everything else fades/shrinks around it */
.web-card--center {
  opacity: 1; transform: scale(1.1); z-index: 2;
  border-color: var(--accent);
  box-shadow:
    0 34px 70px -18px rgba(0,0,0,.6),
    0 0 0 3px rgba(240,126,18,.55),
    0 0 46px 8px rgba(47,111,224,.4);
}
.web-card--center:hover { transform: scale(1.12) translateY(-4px); }
.web-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  backface-visibility: hidden; transform: translateZ(0);
}
@media (max-width: 560px) { .web-card { flex-basis: 300px; height: 210px; } }
@media (prefers-reduced-motion: reduce) {
  .web-card, .web-card--center { opacity: 1; transform: none; }
}

/* ---------- Website template lightbox ---------- */
.tpl-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
}
.tpl-lightbox.open { display: flex; }
.tpl-lightbox-backdrop { position: absolute; inset: 0; background: rgba(238,241,246,.97); backdrop-filter: blur(4px); }
.tpl-lightbox-stage {
  position: relative; z-index: 1; max-width: 84vw; max-height: 86vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.tpl-lightbox-stage img {
  max-width: 84vw; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  border: 1px solid var(--line-dark);
}
.tpl-lightbox-count {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--on-ink-soft); background: var(--ink-2); border: 1px solid var(--line-dark);
  border-radius: 999px; padding: 6px 16px;
}
.tpl-lightbox-close {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--line-dark); color: var(--on-ink);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.tpl-lightbox-close:hover { background: var(--ink-3); color: var(--accent-2); }
.tpl-lightbox-nav {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--line-dark); color: var(--on-ink);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  margin: 0 18px;
}
.tpl-lightbox-nav:hover { background: var(--ink-3); color: var(--accent-2); border-color: var(--accent); }
@media (max-width: 720px) {
  .tpl-lightbox-nav { width: 40px; height: 40px; margin: 0 8px; }
  .tpl-lightbox-close { top: 14px; right: 14px; }
}

/* CTA band */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 340px at 90% 0%, rgba(240,126,18,.18), transparent 65%),
    radial-gradient(500px 320px at 4% 100%, rgba(47,111,224,.28), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 52px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
  background-size: 34px 34px;
}
.cta-band::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,126,18,.16), transparent 72%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h3 { font-size: clamp(22px,2.6vw,30px); }
.cta-band p { color: rgba(255,255,255,.82); margin-top: 8px; }
.cta-band .btn-primary { background: #fff; color: var(--accent-ink); box-shadow: 0 10px 24px -10px rgba(0,0,0,.3); }
.cta-band .btn-primary:hover { filter: none; background: #fff; box-shadow: 0 10px 28px -8px rgba(0,0,0,.4); transform: translateY(-2px); }

/* ---------- Footer ---------- */
footer.site {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(240,126,18,.10), transparent 60%),
    radial-gradient(800px 420px at 4% 100%, rgba(47,111,224,.20), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink-soft); padding: 60px 0 28px; margin-top: 40px;
}
footer.site > .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.1fr .8fr .8fr 1.1fr; gap: 32px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-brand, .foot-cta-card { grid-column: 1 / -1; }
}
.foot-grid h5 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 14px; }
.foot-grid li { margin-bottom: 9px; font-size: 13.5px; }
.foot-grid li a:hover { color: var(--accent-2); }
.foot-brand .logo {
  display: inline-flex; background: #fff; border-radius: 12px;
  padding: 10px 16px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.foot-brand .logo-img { height: 46px; }
.foot-app-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.foot-app-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
}
.foot-app-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.foot-app-btn span { display: flex; flex-direction: column; line-height: 1.25; }
.foot-app-btn em { font-style: normal; font-weight: 400; font-size: 9px; opacity: .8; }
.foot-app-btn--dark { background: var(--ink-3); border: 1px solid var(--line-dark); color: var(--on-ink); }
.foot-app-btn--dark:hover { border-color: var(--accent-2); }
.foot-app-btn--light { background: transparent; border: 1px solid var(--line-dark); color: var(--on-ink); }
.foot-app-btn--light:hover { border-color: var(--accent-2); }
@media (max-width: 520px) {
  .foot-app-btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .foot-app-btn em { display: none; }
  .foot-app-btn span { line-height: 1; }
}

.foot-pay-row { display: flex; gap: 6px; margin-top: 14px; flex-wrap: nowrap; }
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 30px; padding: 0 8px; border-radius: 6px;
  background: var(--ink-3); border: 1px solid var(--line-dark);
  font-family: var(--disp); font-weight: 700; font-size: 10px; letter-spacing: .02em;
  color: var(--on-ink);
  white-space: nowrap;
}
@media (max-width: 360px) {
  .foot-pay-row { gap: 4px; }
  .pay-badge { padding: 0 6px; font-size: 9px; }
  .pay-ico { width: 18px; height: 12px; }
}
.pay-badge--accent { color: var(--accent-2); }
.pay-badge--mc { gap: 0; padding: 0 10px; }
.pay-ico { width: 22px; height: 15px; flex-shrink: 0; border-radius: 2px; }
.mc-dot { width: 13px; height: 13px; border-radius: 50%; }
.mc-dot-a { background: #EB001B; }
.mc-dot-b { background: #F79E1B; margin-left: -5px; mix-blend-mode: screen; }

.foot-legal { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.foot-legal a { color: var(--on-ink-soft); }
.foot-legal a:hover { color: var(--accent-2); }
.foot-legal-sep { color: var(--line-dark); margin: 0 8px; }
.foot-legal-links { display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 640px) {
  .foot-legal-sep--desktop { display: none; }
}
.foot-cta-card {
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-md);
  padding: 22px 22px 24px;
}
.foot-cta-title { font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--on-ink); margin-bottom: 8px; }
.foot-cta-card > p { font-size: 13px; color: var(--on-ink-soft); line-height: 1.5; margin-bottom: 16px; }
.foot-cta-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.foot-cta-row a { font-size: 13.5px; color: var(--on-ink); }
.foot-cta-row a:hover { color: var(--accent-2); }
.foot-cta-ico {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-3); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
}
.foot-cta-ico svg { width: 14px; height: 14px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; font-family: var(--mono); font-size: 11.5px; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .foot-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
  .foot-legal { justify-content: center; text-align: center; }
}
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center; color: var(--on-ink-soft);
}
.foot-social a svg { width: 15px; height: 15px; }
.foot-social a:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* device photo (real hardware shot inside the device frame) */
.device-photo {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line-dark);
  background: #081733;
  height: 420px; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) { .device-photo { height: 280px; } }
.device-photo img { width: 100%; height: 100%; object-fit: fill; }
.device-caption {
  margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--on-ink-soft);
  display: flex; justify-content: space-between; gap: 10px;
}
.device-caption .tag { color: var(--accent-2); }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-toggle-note {
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  text-align: center; margin: -8px 0 34px;
}
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card); position: relative;
}
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.plan-badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--accent); color: #22140a; font-family: var(--mono); font-size: 11px;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .04em;
}
.plan-name { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .06em; margin-bottom: 10px; }
.plan-price { font-family: var(--disp); font-size: 34px; font-weight: 700; color: var(--ink); }
.plan-price span { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--text-mute); }
.plan-desc { color: var(--text-soft); font-size: 14px; margin: 10px 0 22px; line-height: 1.5; }
.plan-list { flex: 1; margin-bottom: 26px; }
.plan-list li { display: flex; gap: 10px; font-size: 14px; color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.plan-list li:last-child { border-bottom: none; }
.plan-list li .chk { color: var(--accent); flex-shrink: 0; font-family: var(--mono); }
.plan-list li.muted { color: var(--text-mute); }
.plan-list li.muted .chk { color: var(--text-mute); }

.faq { border-top: 1px solid var(--line); }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-item h4 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; max-width: 68ch; }

/* ---------- Legal pages (Terms / Privacy) ---------- */
.legal-updated {
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.legal-content { max-width: 74ch; }
.legal-content section { padding: 0; margin-bottom: 36px; }
.legal-content h2 { font-size: 20px; margin-bottom: 12px; scroll-margin-top: 100px; }
.legal-content h2 .legal-num { color: var(--accent); font-family: var(--mono); font-size: 14px; margin-right: 10px; }
.legal-content p { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
.legal-content ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal-content li { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 44px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.legal-toc a {
  font-family: var(--mono); font-size: 12px; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px;
}
.legal-toc a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   HERO — ORBIT LAYOUT (device center, 6 product nodes around it)
   ============================================================ */
.hero-orbit-wrap {
  position: relative;
  min-height: 600px;
  display: flex; align-items: center; justify-content: center;
}
.hero-orbit-wrap::before {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(closest-side, rgba(240,126,18,.18), transparent 72%);
  pointer-events: none;
  animation: heroPulse 9s ease-in-out infinite;
}
/* AI mark at the center of the ellipse -- a circuit-brain glyph
   (two lobes + circuit nodes + an "AI" chip) in a violet-to-blue
   gradient, reading as a distinct "AI" motif at a glance. */
.orbit-sun {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 68px; height: 68px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: sunPulse 4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(99,102,241,.65)) drop-shadow(0 0 34px rgba(56,189,248,.35));
}
.orbit-sun-brain { width: 100%; height: 100%; }
@keyframes sunPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-sun { animation: none; }
}
.orbit-ring {
  position: absolute; left: 4%; top: 12%; z-index: 1;
  width: 92%; height: 76%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0%, var(--brand-blue-2) 35%, var(--accent-2) 65%, var(--accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 14px rgba(59,130,246,.4));
  animation: orbitSpin 18s linear infinite;
}
.orbit-ring::before, .orbit-ring::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 10px 2px rgba(255,194,77,.7);
}
.orbit-ring::before { top: -3px; left: calc(50% - 3px); }
.orbit-ring::after { bottom: -3px; left: calc(50% - 3px); }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hero-orbit-center {
  position: relative; z-index: 2;
  max-width: 300px;
  padding: 60px 8px;
  text-align: center;
}
@media (max-width: 1180px) {
  .hero-orbit-center { padding: 16px 8px; max-width: 100%; }
}
.hero-orbit-center .eyebrow { justify-content: center; }
.hero-orbit-center h1, .hero-orbit-center .lede { transition: opacity .2s ease; }
.hero-orbit-center h1.h1-anim { animation: heroHeadlineIn .55s cubic-bezier(.22,.9,.32,1); }
@keyframes heroHeadlineIn {
  0%   { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit-center h1.h1-anim { animation: none; }
}
/* smaller than the site-wide .hero h1 -- this heading has to fit inside the
   ellipse without touching the product icons around it */
.hero-orbit-center h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  margin: 10px 0 78px;
}
.hero-orbit-center .lede {
  font-size: 14px;
  max-width: 34ch;
  margin: 0 auto;
}
@media (max-width: 1180px) {
  .hero-orbit-center h1 { margin-bottom: 12px; }
}
.hero-slide-col { display: flex; align-items: center; justify-content: center; height: 100%; }
@media (max-width: 1180px) { .hero-slide-col { height: auto; } }
.orbit-podium {
  position: relative; z-index: 2;
  width: 100%; max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.hero-slide-eyebrow { display: none; }
.hero-mobile-eyebrow {
  display: flex; justify-content: center;
  grid-column: 1 / -1; order: -2;
  margin-bottom: 6px;
  font-size: 15px; letter-spacing: .18em;
  background: linear-gradient(100deg, var(--accent-2) 0%, #fff 50%, var(--accent-2) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: eyebrowShimmer 3.2s ease-in-out infinite;
}
.hero-mobile-eyebrow .bar {
  background: var(--accent-2);
  animation: eyebrowBar 3.2s ease-in-out infinite;
}
@keyframes eyebrowShimmer {
  0%   { background-position: 220% 0; }
  60%, 100% { background-position: -20% 0; }
}
@keyframes eyebrowBar {
  0%, 100% { width: 20px; opacity: .7; }
  50%      { width: 32px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mobile-eyebrow, .hero-mobile-eyebrow .bar { animation: none; }
}
.orbit-frame {
  position: relative;
  border-radius: 16px; overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 0 34px 60px -18px rgba(0,0,0,.55), 0 0 0 4px rgba(240,126,18,.14);
  background: var(--ink-2);
  animation: orbitFrameGlow 3.6s ease-in-out infinite;
}
/* soft breathing glow around the frame border, so the slide doesn't just
   sit static between autoplay changes */
@keyframes orbitFrameGlow {
  0%, 100% { box-shadow: 0 34px 60px -18px rgba(0,0,0,.55), 0 0 0 4px rgba(240,126,18,.14); }
  50%      { box-shadow: 0 34px 60px -18px rgba(0,0,0,.55), 0 0 0 7px rgba(240,126,18,.26); }
}
/* a light diagonal sheen that sweeps across the frame periodically */
.orbit-frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 130% -30%;
  animation: orbitFrameSheen 5s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes orbitFrameSheen {
  0%   { background-position: 130% -30%; }
  35%  { background-position: -30% 130%; }
  100% { background-position: -30% 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit-wrap::before, .orbit-ring { animation: none; }
  .orbit-frame { animation: none; }
  .orbit-frame::after { display: none; }
}
.orbit-podium .orbit-caption {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 11px; color: var(--on-ink-soft);
  letter-spacing: .04em;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 999px;
  padding: 8px 18px;
  transition: opacity .2s ease;
}
.orbit-slides { position: relative; background: var(--ink-2); }
/* fixed frame size for every slide -- product screenshots come in wildly
   different native aspect ratios, so without this the podium visibly grows
   and shrinks each time the active product changes. */
.orbit-slide {
  display: none; width: 100%; aspect-ratio: 16 / 10.2; overflow: hidden;
}
@media (max-width: 1180px) {
  .orbit-slides { max-height: 220px; overflow: hidden; }
  .orbit-slide { aspect-ratio: unset; height: 220px; }
}
@media (max-width: 700px) {
  .orbit-slides { max-height: none; display: block; }
  .orbit-slide { height: auto; aspect-ratio: 16 / 9; }
}
.orbit-slide.active {
  display: block;
  animation: orbitSlideIn .5s cubic-bezier(.22,.9,.32,1);
}
.orbit-slide img, .orbit-slide .mock {
  width: 100%; height: 100%; display: block;
  object-fit: fill;
}
@keyframes orbitSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-slide.active { animation: none; }
}
.orbit-node {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100px;
  cursor: pointer; background: none; border: none; padding: 4px; border-radius: 14px;
  transition: transform .18s ease;
}
/* per-product icon color, matching the reference: each node gets its own
   accent instead of every icon being the same brand orange */
.orbit-node.n1 { --node-color: #3B82F6; } /* AI Reception -- blue */
.orbit-node.n3 { --node-color: #9AA8C7; } /* AI Google Review -- icon is the real multi-color mark */
.orbit-node.n4 { --node-color: #F5A623; } /* AI Booking -- amber */
.orbit-node.n5 { --node-color: #14B8A6; } /* Merchant Services -- teal */
.orbit-node.n6 { --node-color: #EC4899; } /* Marketing -- pink */

.orbit-node .node-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink-3); border: 1.5px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--node-color, var(--accent)); margin-bottom: 6px;
  box-shadow: var(--shadow-card);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.orbit-node .node-dot svg { width: 19px; height: 19px; }
.orbit-node .node-label { font-family: var(--disp); font-weight: 600; font-size: 11.5px; color: var(--on-ink); transition: color .2s ease; }
.orbit-node .node-sub { font-family: var(--body); font-size: 10px; color: var(--on-ink-soft); }
.orbit-node:hover { transform: translate(-50%, -22px) translateY(-2px); }
.orbit-node:hover .node-dot, .orbit-node:focus-visible .node-dot {
  border-color: var(--node-color, var(--accent)); transform: scale(1.05);
}
.orbit-node:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.orbit-node.active .node-dot {
  background: var(--ink-2); border-color: var(--node-color, var(--accent)); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.05), 0 10px 22px -8px rgba(0,0,0,.5);
  transform: scale(1.06);
}
.orbit-node.active .node-label { color: var(--node-color, var(--accent-2)); }

/* positioned on the ellipse path traced by .orbit-ring, 60 deg apart --
   Y offset is -22px (half the node-dot's own height), not -50% of the
   whole node box, so the dot itself sits centered on the ring line
   instead of the box (dot + label) as a whole. */
.orbit-node.n2 { left: 50%; top: 12%; transform: translate(-50%, -22px); }
.orbit-node.n3 { left: 90%; top: 31%; transform: translate(-50%, -22px); }
.orbit-node.n5 { left: 90%; top: 69%; transform: translate(-50%, -22px); }
.orbit-node.n6 { left: 50%; top: 88%; transform: translate(-50%, -22px); }
.orbit-node.n4 { left: 10%; top: 69%; transform: translate(-50%, -22px); }
.orbit-node.n1 { left: 10%; top: 31%; transform: translate(-50%, -22px); }

@media (max-width: 1080px) {
  .orbit-node { width: 108px; }
  .orbit-node .node-dot { width: 44px; height: 44px; }
  .orbit-node .node-label { font-size: 11.5px; }
  .orbit-node .node-sub { font-size: 10px; }
}
@media (max-width: 1180px) {
  .hero-mobile-eyebrow { margin-bottom: 4px; }
  .hero-orbit-wrap {
    min-height: 0; padding: 12px 0 0;
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
    row-gap: 22px; column-gap: 12px;
  }
  .hero-orbit-wrap::before { display: none; }
  .orbit-ring { display: none; }
  .orbit-sun { display: none; }
  .hero-orbit-center { order: -1; flex: 1 1 100%; max-width: 100%; text-align: center; margin-bottom: 0; margin-top: 0; }
  .hero-orbit-center .hero-cta { justify-content: center; }
  .hero-orbit-center .trust-row { justify-content: center; }
  .orbit-node,
  .orbit-node.n1, .orbit-node.n2, .orbit-node.n3,
  .orbit-node.n4, .orbit-node.n5, .orbit-node.n6 {
    position: static; left: auto; top: auto; right: auto; bottom: auto;
    transform: none; width: 30%; min-width: 92px;
  }
  .orbit-node:hover { transform: translateY(-2px); }
  .hero-slide-col { margin-top: 18px; display: block; width: 100%; }
}
@media (max-width: 480px) {
  .orbit-node { width: 45%; }
}

.trust-row { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; }
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-item .ico {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-2); border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center; color: var(--accent-2);
}
.trust-item .ico svg { width: 15px; height: 15px; }
.trust-item .t1 { font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--on-ink); }
.trust-item .t2 { font-family: var(--body); font-size: 12px; color: var(--on-ink-soft); }

/* ============================================================
   PRODUCT TIMELINE (vertical center line, alternating left/right)
   ============================================================ */
.ptimeline { position: relative; max-width: 1080px; margin: 0 auto; padding-top: 8px; }
.ptimeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--line); transform: translateX(-50%);
}
.ptimeline-item {
  position: relative; display: grid;
  grid-template-columns: 1fr 44px 1fr; align-items: stretch; gap: 32px;
  margin-bottom: 64px;
}
.ptimeline-item:last-child { margin-bottom: 0; }
.ptimeline-card { grid-column: 1; grid-row: 1; text-align: right; }
.ptimeline-dot-col { grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; }
.ptimeline-media { grid-column: 3; grid-row: 1; }
.ptimeline-reverse .ptimeline-card { grid-column: 3; text-align: left; }
.ptimeline-reverse .ptimeline-media { grid-column: 1; }

.ptimeline-dot {
  position: relative; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-2); border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(240,126,18,.14);
}
.ptimeline-dot.c-reception { border-color: #3B82F6; box-shadow: 0 0 0 5px rgba(59,130,246,.14); }
.ptimeline-dot.c-booking { border-color: #F5A623; box-shadow: 0 0 0 5px rgba(245,166,35,.14); }
.ptimeline-dot.c-review { border-color: #9AA8C7; box-shadow: 0 0 0 5px rgba(154,168,199,.14); }
.ptimeline-dot.c-merchant { border-color: #14B8A6; box-shadow: 0 0 0 5px rgba(20,184,166,.14); }
.ptimeline-dot.c-marketing { border-color: #EC4899; box-shadow: 0 0 0 5px rgba(236,72,153,.14); }

.ptimeline-tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent-ink);
  margin-bottom: 10px;
}
.ptimeline-tag.c-reception { color: #2158B8; }
.ptimeline-tag.c-booking { color: #B5760D; }
.ptimeline-tag.c-review { color: #5C6B8C; }
.ptimeline-tag.c-merchant { color: #0B8577; }
.ptimeline-tag.c-marketing { color: #C22B78; }

.ptimeline-card h3 { font-size: clamp(21px, 2.2vw, 26px); margin-bottom: 10px; }
.ptimeline-card p { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.ptimeline-reverse .ptimeline-card,
.ptimeline-card { max-width: 42ch; }
.ptimeline-item .ptimeline-card { margin-left: auto; }
.ptimeline-reverse .ptimeline-card { margin-left: 0; margin-right: auto; }
.ptimeline-card .btn { display: inline-flex; }
.ptimeline-item .ptimeline-card .btn { margin-left: auto; }
.ptimeline-reverse .ptimeline-card .btn { margin-left: 0; }

.ptimeline-media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lift); border: 1px solid var(--ink);
}
.ptimeline-media img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .ptimeline::before { left: 20px; }
  .ptimeline-item, .ptimeline-reverse {
    grid-template-columns: 40px 1fr; gap: 18px; margin-bottom: 40px;
  }
  .ptimeline-item .ptimeline-card, .ptimeline-reverse .ptimeline-card { grid-column: 2; grid-row: 2; text-align: left; margin: 0; }
  .ptimeline-item .ptimeline-dot-col, .ptimeline-reverse .ptimeline-dot-col { grid-column: 1; grid-row: 1 / 3; align-items: flex-start; padding-top: 4px; }
  .ptimeline-item .ptimeline-media, .ptimeline-reverse .ptimeline-media { grid-column: 2; grid-row: 1; margin-bottom: 16px; }
  .ptimeline-card .btn, .ptimeline-item .ptimeline-card .btn, .ptimeline-reverse .ptimeline-card .btn { margin: 0; }
}

/* ============================================================
   BENTO GRID (six products, asymmetric mosaic of real screenshots) -- superseded by .ptimeline
   ============================================================ */
.bento-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px;
  gap: 16px;
}
.bento-pos       { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-booking   { grid-column: 3 / 5; grid-row: 1 / 2; }
.bento-reception { grid-column: 3 / 4; grid-row: 2 / 3; }
.bento-review    { grid-column: 4 / 5; grid-row: 2 / 3; }
.bento-merchant  { grid-column: 1 / 3; grid-row: 3 / 4; }
.bento-marketing { grid-column: 3 / 5; grid-row: 3 / 4; }

.bento-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--ink-2);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.bento-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top; display: block;
  transition: transform .5s ease;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.bento-tile:hover img { transform: scale(1.06) translateZ(0); }
.bento-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,40,.92) 0%, rgba(11,20,40,.55) 38%, rgba(11,20,40,.05) 68%);
}
.bento-content { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; }
.bento-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.bento-icon svg { width: 17px; height: 17px; }
.bento-icon.c-pos       { color: var(--accent); }
.bento-icon.c-reception { color: #3B82F6; }
.bento-icon.c-booking   { color: #F5A623; }
.bento-icon.c-review    { color: #9AA8C7; }
.bento-icon.c-merchant  { color: #14B8A6; }
.bento-icon.c-marketing { color: #EC4899; }
.bento-name { font-family: var(--disp); font-weight: 700; font-size: 17px; color: #fff; }
.bento-sub { font-family: var(--body); font-size: 13px; color: rgba(255,255,255,.78); margin-top: 4px; max-width: 34ch; }
.bento-go {
  font-family: var(--body); font-weight: 600; font-size: 12.5px; color: var(--accent-2);
  margin-top: 10px; opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.bento-tile:hover .bento-go { opacity: 1; transform: translateY(0); }
.bento-pos .bento-name { font-size: 22px; }
.bento-pos .bento-content, .bento-booking .bento-content, .bento-merchant .bento-content, .bento-marketing .bento-content { left: 22px; right: 22px; bottom: 20px; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .bento-pos, .bento-booking, .bento-reception, .bento-review, .bento-merchant, .bento-marketing {
    grid-column: span 2; grid-row: auto;
  }
  .bento-pos { grid-row: span 2; }
}
@media (max-width: 520px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-pos, .bento-booking, .bento-reception, .bento-review, .bento-merchant, .bento-marketing {
    grid-column: span 1; grid-row: auto !important; height: 220px;
  }
}

/* ============================================================
   PRODUCT ROW (photo-thumb + content cards) -- superseded by .bento-grid above
   ============================================================ */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }

.pgrid-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; overflow: hidden; position: relative;
}
.pgrid-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.pgrid-thumb {
  flex: 0 0 48%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pgrid-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* hover reveal: the product screenshot expands to cover the whole card */
.pgrid-hover-media {
  position: absolute; inset: 0; z-index: 3;
  opacity: 0; transition: opacity .28s ease;
  pointer-events: none;
}
.pgrid-hover-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pgrid-hover-media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,40,.88) 0%, rgba(11,20,40,.35) 55%, rgba(11,20,40,.1) 100%);
}
.pgrid-hover-label {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: var(--disp); font-weight: 700; font-size: 17px; color: #fff;
}
.pgrid-card:hover .pgrid-hover-media { opacity: 1; }
.pgrid-thumb svg { width: 44%; height: 44%; color: rgba(11,30,58,.32); }
.pgrid-thumb.t1 { background: linear-gradient(160deg, #FDE7CE 0%, #FBCFA0 100%); }
.pgrid-thumb.t2 { background: linear-gradient(160deg, #E4E9F7 0%, #C9D2EE 100%); }
.pgrid-thumb.t3 { background: linear-gradient(160deg, #DCEFE6 0%, #B9E0CE 100%); }
.pgrid-thumb.t4 { background: linear-gradient(160deg, #FCE4EC 0%, #F8C7D8 100%); }
.pgrid-thumb.t5 { background: linear-gradient(160deg, #DDF0F0 0%, #B7DEE0 100%); }
.pgrid-thumb.t6 { background: linear-gradient(160deg, #F5E6FB 0%, #E3C6F2 100%); }
.pgrid-body { flex: 1; padding: 22px 20px; display: flex; flex-direction: column; min-width: 0; }
.pgrid-sub { font-family: var(--mono); font-size: 10.5px; color: var(--accent-ink); letter-spacing: .06em; margin-bottom: 8px; }
.pgrid-icon {
  width: 30px; height: 30px; color: var(--accent); margin-bottom: 10px;
}
.pgrid-icon svg { width: 22px; height: 22px; }
.pgrid-card h4 { font-size: 16px; margin-bottom: 8px; }
.pgrid-card p { color: var(--text-soft); font-size: 13.5px; line-height: 1.55; flex: 1; }
.pgrid-card .go { margin-top: 14px; font-family: var(--body); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.pgrid-card:hover .go { color: var(--accent-ink); }
@media (max-width: 560px) {
  .pgrid-card { flex-direction: column; }
  .pgrid-thumb { flex-basis: auto; height: 120px; }
}

/* ============================================================
   TESTIMONIALS — three-card grid
   ============================================================ */
.testi-wrap {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(240,126,18,.08), transparent 60%),
    radial-gradient(900px 420px at 88% 100%, rgba(11,30,58,.06), transparent 60%),
    var(--surface);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
}
.testi-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px 24px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.testi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.testi-stars { color: var(--accent); display: flex; gap: 2px; margin-bottom: 14px; }
.testi-stars svg { width: 15px; height: 15px; }
.testi-quote { color: var(--text-soft); font-size: 14px; line-height: 1.6; flex: 1; }
.testi-person { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-2); color: var(--accent-2);
  font-family: var(--disp); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.testi-name { font-family: var(--body); font-weight: 600; font-size: 13.5px; color: var(--text); }
.testi-role { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }

/* ---------- AI decision-tree flowchart (product-reception "under the hood") ---------- */
.logic-section {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding: 76px 0;
}
.logic-section .section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.logic-section .section-head .eyebrow { justify-content: center; }
.logic-section .section-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 14px 0 12px; }
.logic-section .section-head p { font-size: 15px; line-height: 1.6; }

.logic-flow { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }

.logic-node {
  font-family: var(--mono); font-size: 13px; color: var(--on-ink);
  background: var(--ink-2);
  padding: 12px 22px;
  text-align: center;
  white-space: nowrap;
}
.logic-node--pill { border-radius: 999px; border: 1.5px solid var(--accent); }
.logic-node--box { border-radius: 10px; border: 1.5px dashed var(--line-dark); }
.logic-node--top { box-shadow: 0 0 22px -4px rgba(240,126,18,.4); }
.logic-hl { color: var(--accent-2); font-weight: 600; }
.logic-quote { color: var(--accent-2); }
.logic-ico { margin-right: 5px; }

.logic-arrow {
  width: 0; height: 24px; margin: 4px auto;
  border-left: 2px dashed var(--line-dark);
  position: relative;
}
.logic-arrow::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--line-dark);
}

.logic-check { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 6px 0 2px; }
.logic-check-ico { display: inline-block; color: var(--accent-2); font-size: 16px; animation: logicSpin 3s linear infinite; }
.logic-check-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-soft);
}
@keyframes logicSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.logic-branches { display: flex; gap: 56px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.logic-branch { display: flex; flex-direction: column; align-items: center; width: 250px; }
.logic-branch .logic-node { white-space: normal; }

.logic-branch--ok .logic-node--pill,
.logic-branch--ok .logic-node--box { border-color: #14B8A6; }
.logic-branch--ok .logic-node--result { color: #14B8A6; }

.logic-branch--warn .logic-node--pill,
.logic-branch--warn .logic-node--box { border-color: var(--accent); }
.logic-branch--warn .logic-node--result { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) { .logic-check-ico { animation: none; } }
@media (max-width: 720px) {
  .logic-branches { flex-direction: column; align-items: center; gap: 8px; }
  .logic-node { white-space: normal; }
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .device-screen .caret { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  padding: 24px 0;
  box-shadow: 0 -12px 32px -12px rgba(0,0,0,.35);
  transform: translateY(0);
  animation: cookieSlideUp .35s ease;
}
@keyframes cookieSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.cookie-banner-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.cookie-banner h3 {
  font-family: var(--disp); font-weight: 600; font-size: 24px; margin: 0 0 10px;
}
.cookie-banner p {
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 68ch; margin: 0;
}
.cookie-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.cookie-btn {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  padding: 11px 22px; border-radius: 4px; cursor: pointer;
  border: 1px solid #fff; background: transparent; color: #fff;
  transition: background .15s ease, color .15s ease;
}
.cookie-btn-accept, .cookie-btn-reject { background: #fff; color: var(--ink); }
.cookie-btn-accept:hover, .cookie-btn-reject:hover { background: rgba(255,255,255,.85); }
.cookie-btn-review {
  border-style: dashed; background: transparent; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.cookie-btn-review:hover { background: rgba(255,255,255,.12); }
.cookie-btn-review .caret-ico { font-size: 10px; transition: transform .15s ease; }
.cookie-banner.review-open .cookie-btn-review .caret-ico { transform: rotate(180deg); }
.cookie-review-panel {
  display: none; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.cookie-banner.review-open .cookie-review-panel { display: block; }
.cookie-review-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.cookie-review-row:last-of-type { border-bottom: none; }
.cookie-review-row strong { font-size: 13.5px; font-weight: 600; }
.cookie-review-row span { display: block; font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.cookie-review-save {
  margin-top: 14px; background: #fff; color: var(--ink);
  border: 1px solid #fff; border-radius: 4px; font-weight: 600; font-size: 13.5px;
  padding: 9px 18px; cursor: pointer;
}
.cookie-review-save:hover { background: rgba(255,255,255,.85); }
@media (max-width: 640px) {
  .cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .cookie-btn { text-align: center; }
}