/* Textezy theme — brand blue #2A77FF + ink #181818 (from logo) */
:root {
  --blue: #2a77ff;
  --blue-600: #1f63e0;
  --blue-700: #174fb8;
  --blue-50: #eef4ff;
  --blue-100: #dbe8ff;
  --sky: #7fb2ff;
  --ink: #181818;
  --ink-2: #222326;
  --ink-3: #2d2f34;
  --text: #181818;
  --muted: #5d6270;
  --muted-light: #a4a9b6;
  --line: #e6e8ee;
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --red: #e5484d;
  --hl: #fff1b8;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(24, 24, 24, .04), 0 18px 40px -18px rgba(24, 24, 24, .25);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Host Grotesk", var(--font);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
mark { background: var(--hl); color: inherit; padding: 0 .25em; border-radius: 4px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 800px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* Mono kicker with dot icon */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); margin-bottom: 18px;
}
.kicker::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--ink) radial-gradient(circle, var(--blue) 0 4px, transparent 5px);
}
.kicker.on-dark { color: #fff; }
.kicker.on-dark::before { background: #fff radial-gradient(circle, var(--blue) 0 4px, transparent 5px); }
.mono-label { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sky); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font); padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-600); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--blue-50); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 30px; width: auto; }
.nav-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; }
.nav-links { display: flex; gap: 30px; margin: 0 auto; }
.nav-links a { color: var(--ink); font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--blue); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background-color: var(--blue);
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 64px 64px;
  padding: 88px 0 0;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px; pointer-events: none;
  background: linear-gradient(transparent, rgba(23, 79, 184, .45));
}
.hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.pill-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 9px 14px; border-radius: 999px;
}
.pill-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #9cc3ff; box-shadow: 0 0 0 3px rgba(156,195,255,.3); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px; }
.hero h1 .soft { color: var(--ink); }
.lede { font-size: 1.2rem; max-width: 680px; margin: 0 auto 32px; color: rgba(255,255,255,.92); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
.hero-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.92); }
.hero-checks li::before { content: "✓"; font-weight: 700; margin-right: 8px; color: #fff; }

/* Hero tiles */
.hero-tiles {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 64px; text-align: left; border-radius: 24px 24px 0 0; overflow: hidden;
}
.tile { background: var(--ink); color: #fff; padding: 28px 24px 0; min-height: 360px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); }
.tile:last-child { border-right: 0; }
.tile:nth-child(even) { background: var(--ink-2); }
.tile h3 { font-size: 1.35rem; margin: 10px 0 8px; }
.tile p { color: var(--muted-light); font-size: 14.5px; margin-bottom: 22px; }
.tile-visual { margin-top: auto; background: var(--ink-3); border-radius: 16px 16px 0 0; padding: 16px; display: grid; gap: 8px; }
.tv-row { display: flex; align-items: center; gap: 10px; font-size: 13px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 9px 10px; }
.tv-row b { font-weight: 600; }
.tv-row .ok { margin-left: auto; color: #9cc3ff; font-weight: 700; }
.tv-flag { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--blue); font: 700 10px var(--display); flex: none; }
.tv-bubble { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.08); max-width: 92%; }
.tv-bubble.me { background: var(--blue); margin-left: auto; border-radius: 14px 14px 4px 14px; }
.tv-lang { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-lang span { font: 500 11.5px var(--mono); padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.08); }
.tv-lang span.on { background: var(--blue); }
.tv-step { font-size: 13px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.tv-step.trig { background: var(--blue); }

/* Sections */
.section { padding: 104px 0; }
.section.alt { background: var(--bg-alt); }
.section.dark { background: var(--ink); color: #fff; }
.section-title { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 780px; margin-bottom: 18px; }
.section-sub { color: var(--muted); font-size: 1.12rem; max-width: 640px; margin-bottom: 52px; }
.dark .section-sub { color: var(--muted-light); }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head-row .section-sub { margin-bottom: 0; }

/* Bordered tile grid */
.line-grid { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.line-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Stats */
.stats { grid-template-columns: repeat(4, 1fr); }
.stat-tile { padding: 34px 28px; background: #fff; min-height: 230px; display: flex; flex-direction: column; }
.stat-tile .num { font: 600 3.2rem/1 var(--display); letter-spacing: -.04em; margin-bottom: 14px; }
.stat-tile h3 { font-size: 1.15rem; margin-bottom: 6px; }
.stat-tile p { color: var(--muted); font-size: 15px; margin: 0; }
.stat-tile.blue { background: var(--blue); color: #fff; }
.stat-tile.blue p { color: rgba(255,255,255,.88); }
.stat-tile.inkk { background: var(--ink); color: #fff; }
.stat-tile.inkk p { color: var(--muted-light); }
.footnote { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* Compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-card { padding: 36px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.compare-card.after { background: var(--ink); color: #fff; border-color: var(--ink); }
.compare-card h3 { font-size: 1.5rem; margin: 16px 0 20px; }
.tag { display: inline-block; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--muted); }
.after .tag { background: var(--blue); color: #fff; }

.checks li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--blue);
}
.x-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--muted); }
.x-list li::before {
  content: "×"; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; line-height: 1; font-weight: 700; color: var(--red); background: #fdeced;
}

/* How it works + campaign card */
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.steps { display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 24px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 16px var(--mono); }
.steps h3 { font-size: 1.15rem; margin-bottom: 4px; }
.steps p { color: var(--muted); margin: 0; font-size: 15px; }

.campaign-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.cc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cc-title { font-weight: 600; }
.pill { font: 500 12px var(--mono); background: var(--blue-50); color: var(--blue-700); padding: 5px 10px; border-radius: 999px; }
.cc-label { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.bubble { background: var(--blue); color: #fff; padding: 14px 16px; border-radius: 18px 18px 18px 4px; font-size: 15px; margin-bottom: 20px; line-height: 1.5; }
.token { background: rgba(255,255,255,.22); padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.bubble .link { text-decoration: underline; text-underline-offset: 2px; }
.cc-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.cc-rows strong { display: block; font-size: 14px; }
.cc-rows small { display: block; color: var(--muted); font-size: 12.5px; }
.cur { font: 500 12px var(--mono); color: var(--muted); background: var(--bg-alt); padding: 4px 8px; border-radius: 6px; }
.flag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #fff; font: 700 12px var(--display); }
.flag.lg { width: 46px; height: 46px; font-size: 14px; border-radius: 12px; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Use case gallery */
.cases { grid-template-columns: repeat(4, 1fr); }
.case { background: #fff; padding: 22px; display: flex; flex-direction: column; }
.case-screen { background: var(--bg-alt); border-radius: 16px; padding: 18px 16px; margin-bottom: 18px; min-height: 196px; }
.case-from { display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--mono); color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.case-from i { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); display: inline-block; flex: none; }
.case-msg { background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.case h3 { font-size: 1.1rem; margin-bottom: 6px; }
.case-num { font: 500 12px var(--mono); color: var(--muted); }
.case p { color: var(--muted); font-size: 14.5px; margin: 0; }
.case-market { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blue-700); margin-bottom: 8px; }

/* Compliance */
.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.comp-grid .section-sub { margin-bottom: 26px; }
.comp-panel { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 22px; }
.comp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.07); margin-bottom: 22px; }
.comp-tabs button { font: 600 14px var(--font); color: var(--muted-light); background: none; border: 0; padding: 10px 0; border-radius: 999px; cursor: pointer; }
.comp-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.cb-top { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.cb-top .flag { background: var(--blue); }
.cb-top strong { display: block; font-size: 1.15rem; }
.badge { display: inline-block; font: 500 11.5px var(--mono); letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; background: var(--blue-50); color: var(--blue-700); }
.dark .badge { background: rgba(42,119,255,.2); color: var(--sky); }
.status-list li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); font-size: 15px; }
.status-list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 12px; font-weight: 800; }
.more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14.5px; color: var(--blue); }
.dark .more { color: var(--sky); }
.comp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.ready { font: 500 13px var(--mono); color: #9cc3ff; text-transform: uppercase; letter-spacing: .08em; }
.ready::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9cc3ff; margin-right: 8px; vertical-align: 1px; }
.guarantee { margin-top: 26px; padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; }
.dark mark { background: #4a3d12; }

/* Feature rows (numbered) */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--line); }
.feature-row:first-of-type { border-top: 0; padding-top: 8px; }
.feature-row.flip .fr-visual { order: -1; }
.fr-num { font: 500 12.5px var(--mono); letter-spacing: .12em; color: var(--blue-700); text-transform: uppercase; margin-bottom: 14px; display: block; }
.feature-row h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.feature-row > div > p { color: var(--muted); font-size: 1.05rem; }
.feature-row .checks { margin: 22px 0 28px; }
.fr-visual { background: var(--blue-50); border-radius: 24px; padding: 28px; min-height: 340px; display: grid; place-items: center; }
.mock { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px; }
.mock-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.mock-row:first-of-type { border-top: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font); color: #fff; background: var(--ink); flex: none; }
.avatar.b { background: var(--blue); }
.mock-row small { display: block; color: var(--muted); font-size: 12.5px; }
.mock-row .when { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
.bar { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mock-kpis div { background: var(--bg-alt); border-radius: 10px; padding: 10px; }
.mock-kpis b { display: block; font: 600 1.2rem var(--display); }
.mock-kpis span { font-size: 11.5px; color: var(--muted); }
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 400px; }
.int-grid span { background: #fff; border-radius: 14px; padding: 18px 8px; text-align: center; font-weight: 600; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.int-grid span.hub { background: var(--blue); color: #fff; }

/* Feature list grid */
.feat-grid { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.feat-grid li { background: #fff; padding: 22px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.feat-grid li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); flex: none; }

/* Audience */
.aud { grid-template-columns: repeat(4, 1fr); }
.aud li { background: #fff; padding: 30px 26px; }
.aud .mono-label { color: var(--blue-700); display: block; margin-bottom: 14px; }
.aud h3 { font-size: 1.2rem; }
.aud p { color: var(--muted); font-size: 15px; margin: 0; }

/* Automations */
.flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flow { padding: 26px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); }
.flow h3 { font-size: 1.15rem; margin-bottom: 18px; }
.flow ol { display: flex; flex-direction: column; gap: 18px; }
.flow ol li { position: relative; }
.flow ol li:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 100%; height: 18px; border-left: 2px dashed rgba(127,178,255,.5); }
.node { display: block; padding: 11px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); font-size: 14.5px; font-weight: 500; }
.node.trigger { background: var(--blue); }
.node.wait { background: transparent; border: 1px dashed rgba(255,255,255,.25); color: var(--muted-light); }
.node.trigger::before { content: "⚡ "; }
.node.wait::before { content: "⏳ "; }

/* Pricing */
.pricing-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.credit-note { margin: 0; color: var(--muted); }
.credit-note [data-region] { display: none; }
.credit-note [data-region].on { display: inline; }
.region-switch { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.rs-label { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 8px 0 12px; }
.region-switch button { font: 600 14px var(--font); color: var(--muted); background: none; border: 0; padding: 8px 15px; border-radius: 999px; cursor: pointer; }
.region-switch button[aria-checked="true"] { background: var(--ink); color: #fff; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.plan.featured { background: var(--blue); color: #fff; border-color: var(--blue); }
.plan.featured .plan-desc, .plan.featured .per { color: rgba(255,255,255,.85); }
.plan.featured .checks li::before { background: #fff; color: var(--blue); }
.ribbon { position: absolute; top: 22px; right: 20px; background: var(--ink); color: #fff; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; }
.plan h3 { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.price { margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.amt { font: 600 2.5rem/1.05 var(--display); letter-spacing: -.035em; }
.per { color: var(--muted); font-size: 14px; }
.plan-desc { color: var(--muted); font-size: 14.5px; min-height: 2.8em; }
.plan .checks { margin: 8px 0 26px; flex: 1; font-size: 14.5px; }

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 20px; padding: 34px 36px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.calc h3 { font-size: 1.5rem; }
.calc-copy p { color: var(--muted-light); margin: 0; font-size: 15px; }
.calc-ctrl label { display: block; font-weight: 600; margin-bottom: 12px; }
.calc-ctrl label span { font-family: var(--display); font-size: 1.3rem; }
.calc-ctrl input[type="range"] { width: 100%; accent-color: var(--blue); }
.calc-scale { display: flex; justify-content: space-between; font: 500 11.5px var(--mono); color: var(--muted-light); margin-top: 6px; }
.calc-out { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#calc-total { font: 600 2.2rem/1.1 var(--display); color: var(--sky); }
.calc .per { color: var(--muted-light); }

/* Guides */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide { display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.guide:hover { text-decoration: none; border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.guide .badge { align-self: flex-start; margin-bottom: 16px; }
.guide h3 { font-size: 1.25rem; flex: 1; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 56px 24px 0; position: relative; font: 600 1.15rem var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); font: 400 22px var(--font); color: var(--ink); transition: transform .2s, background .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--blue); color: #fff; }
.faq details p { padding: 0 56px 24px 0; margin: 0; color: var(--muted); }

/* Final CTA */
.final-cta {
  padding: 104px 0; color: #fff; background-color: var(--blue);
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 64px 64px;
}
.final-cta h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 700; }
.final-cta p { color: rgba(255,255,255,.9); font-size: 1.15rem; }
.signup-form { display: flex; gap: 8px; max-width: 520px; margin: 30px auto 0; background: #fff; padding: 6px; border-radius: 999px; }
.signup-form input { flex: 1; min-width: 0; font: 500 16px var(--font); padding: 12px 18px; border: 0; background: transparent; color: var(--ink); border-radius: 999px; }
.signup-form input:focus { outline: none; }
.signup-form:focus-within { box-shadow: 0 0 0 4px rgba(255,255,255,.4); }
.form-msg { min-height: 1.6em; margin: 14px 0 0; font-size: 15px !important; }

/* Footer */
.site-footer { background: var(--ink); color: #fff; padding: 72px 0 30px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand p { color: var(--muted-light); max-width: 320px; margin: 18px 0 12px; }
.footer-brand a { color: var(--sky); }
.site-footer h4 { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted-light); margin-bottom: 16px; }
.site-footer nav a { display: block; color: #fff; margin-bottom: 10px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: var(--muted-light); font-size: 13.5px; }
.site-footer mark { background: #4a3d12; color: #fff; }

/* Responsive */
@media (max-width: 1080px) {
  .hero-tiles, .stats, .cases, .aud, .feat-grid, .plans { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 320px; }
  .tile:nth-child(2) { border-right: 0; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-menu { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); padding: 16px 24px 24px; }
  .nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; gap: 2px; margin: 0; }
  .nav-links a { display: block; padding: 10px 0; font-size: 17px; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .how-grid, .comp-grid, .feature-row, .compare, .calc { grid-template-columns: 1fr; gap: 36px; }
  .feature-row.flip .fr-visual { order: 0; }
  .grid-3, .flows { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .hero { padding-top: 56px; }
  .hero-tiles { grid-template-columns: 1fr; margin-top: 48px; border-radius: 20px 20px 0 0; }
  .tile { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 0; }
  .section { padding: 72px 0; }
  .stats, .cases, .aud, .plans, .feat-grid { grid-template-columns: 1fr; }
  .cta-row .btn { flex: 1; }
  .compare-card, .calc { padding: 26px 22px; }
  .fr-visual { padding: 18px; min-height: 0; }
  .region-switch { width: 100%; justify-content: space-between; }
  .rs-label { display: none; }
  .region-switch button { flex: 1; }
  .cc-rows li { grid-template-columns: auto 1fr; }
  .cc-rows .cur { display: none; }
  .signup-form { flex-direction: column; border-radius: 22px; }
  .faq details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ================= Inner pages ================= */
.nav-links a[aria-current="page"] { color: var(--blue); }

/* Page hero (smaller blue band) */
.page-hero {
  color: #fff; background-color: var(--blue);
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 64px 64px; padding: 80px 0 72px;
}
.page-hero.ink { background-color: var(--ink); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; max-width: 880px; margin-bottom: 18px; }
.page-hero .lede { margin: 0 0 28px; text-align: left; max-width: 680px; }
.page-hero .cta-row { justify-content: flex-start; margin-bottom: 0; }
.page-hero .kicker { color: #fff; }
.page-hero .kicker::before { background: #fff radial-gradient(circle, var(--blue) 0 4px, transparent 5px); }
.page-hero.ink .kicker::before { background: var(--blue) radial-gradient(circle, #fff 0 4px, transparent 5px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 22px; color: rgba(255,255,255,.75); }
.crumbs a { color: #fff; }
.crumbs span[aria-hidden] { opacity: .6; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-meta span { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }

/* Generic two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split.center-y { align-items: center; }

/* Info cards grid */
.cards-2, .cards-3, .cards-4 { display: grid; gap: 16px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.info-card h3 { font-size: 1.2rem; }
.info-card p { color: var(--muted); font-size: 15px; margin: 0; }
.info-card .mono-label { color: var(--blue-700); display: block; margin-bottom: 12px; }
.dark .info-card { background: var(--ink-2); border-color: rgba(255,255,255,.08); }
.dark .info-card p { color: var(--muted-light); }
.dark .info-card .mono-label { color: var(--sky); }

/* Country cards */
.country-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.country-card:hover { text-decoration: none; border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.country-card .flag { margin-bottom: 18px; background: var(--blue); }
.country-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.country-card .badge { align-self: flex-start; margin-bottom: 14px; }
.country-card p { color: var(--muted); font-size: 15px; flex: 1; }
.country-card .more { margin-top: 8px; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.table th, .table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--bg-alt); }
.table tbody th { font-weight: 600; }
.table tr:last-child td, .table tr:last-child th { border-bottom: 0; }
.table td.yes::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; }
.table td.no { color: var(--muted-light); }
.table .group th { background: var(--blue-50); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--blue-700); }
.table .hl-col { background: var(--blue-50); }
.table-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; }

/* Numbered process */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.process li { position: relative; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.process li::before { counter-increment: p; content: counter(p, decimal-leading-zero); display: block; font: 500 13px var(--mono); color: var(--blue-700); margin-bottom: 14px; letter-spacing: .1em; }
.process h3 { font-size: 1.1rem; }
.process p { color: var(--muted); font-size: 15px; margin: 0; }

/* Callout */
.callout { padding: 22px 24px; border-radius: var(--radius-sm); background: var(--blue-50); border-left: 4px solid var(--blue); margin: 28px 0; }
.callout p:last-child { margin: 0; }
.callout strong { display: block; margin-bottom: 4px; }
.callout.warn { background: #fff7e6; border-color: #f5a524; }

/* Long-form prose (guides, legal) */
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: 100px; font-size: 14.5px; }
.toc p { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.toc a { display: block; color: var(--muted); padding: 6px 0 6px 14px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-color: var(--blue); text-decoration: none; }
.prose { max-width: 740px; font-size: 17px; line-height: 1.75; }
.prose h2 { font-size: 1.85rem; margin: 56px 0 16px; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 32px 0 10px; }
.prose p, .prose li { color: #33363d; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--blue); }
.prose code { font: 500 .88em var(--mono); background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; }
.prose .sms { font-size: 15px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 14px 16px; margin: 0 0 1.2em; max-width: 520px; }
.prose .sms.bad { border-color: #f3c2c4; background: #fdf3f3; }
.prose .sms.good { border-color: #bfe3cc; background: #f1faf4; }
.prose .sms-label { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 6px; }
.prose .sms.bad .sms-label { color: var(--red); }
.prose .sms.good .sms-label { color: #15803d; }
.prose .table-wrap { margin: 0 0 1.4em; }
.prose .table { font-size: 15px; min-width: 520px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; font: 500 12.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); margin-top: 8px; }
.disclaimer { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 48px; }
.article-cta { margin-top: 48px; padding: 32px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.article-cta h3 { font-size: 1.5rem; color: #fff; margin-top: 0; }
.article-cta p { color: var(--muted-light) !important; }
.article-cta .btn { margin-top: 6px; }

/* Guides index */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-bar button { font: 600 14px var(--font); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.filter-bar button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.guide p { color: var(--muted); font-size: 15px; }
.guide .read-time { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.guide-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.guide-foot .more { margin: 0; }
.guide.soon { background: var(--bg-alt); border-style: dashed; }
.guide.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
[data-topic][hidden] { display: none !important; }

/* Forms */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label, .field legend { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.field input, .field select, .field textarea {
  width: 100%; font: 500 16px var(--font); color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42,119,255,.15); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field fieldset { border: 0; padding: 0; margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.check-pill { position: relative; }
.check-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-pill span { display: block; text-align: center; padding: 11px 6px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; }
.check-pill input:checked + span { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.check-pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--blue); width: 16px; height: 16px; flex: none; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 13px var(--font); background: var(--bg-alt); border: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.form-status { min-height: 1.4em; font-size: 14.5px; margin: 0; }
.form-status.ok { color: #15803d; font-weight: 600; }
.form-status.error { color: var(--red); font-weight: 600; }
.form-foot { font-size: 14.5px; color: var(--muted); text-align: center; margin: 4px 0 0; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { background: #fff; color: var(--ink); border-color: var(--line); width: 100%; }
.btn-google:hover { border-color: var(--ink); }

/* Auth layout (signup / login) */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 72px); }
.auth-side {
  color: #fff; padding: 72px 56px; display: flex; flex-direction: column; justify-content: center;
  background-color: var(--blue);
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 64px 64px;
}
.auth-side.ink { background-color: var(--ink); }
.auth-side h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.03em; }
.auth-side > p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 480px; }
.auth-side .checks li::before { background: #fff; color: var(--blue); }
.auth-side .checks { margin-top: 18px; }
.auth-side .tile-visual { border-radius: 16px; max-width: 420px; margin-top: 32px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h2 { font-size: 2rem; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); margin-bottom: 28px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row a { font-size: 13.5px; font-weight: 600; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.contact-side { display: grid; gap: 16px; }
.contact-side .info-card a { font-weight: 600; }

/* Legal */
.legal-note { background: var(--hl); border-radius: var(--radius-sm); padding: 16px 20px; font-size: 15px; margin-bottom: 36px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-nav a { font: 600 14px var(--font); padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.legal-nav a[aria-current="page"] { background: #fff; color: var(--ink); }
.legal-nav a:hover { text-decoration: none; background: rgba(255,255,255,.15); }
.legal-nav a[aria-current="page"]:hover { background: #fff; }

/* Mini CTA band */
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 40px 44px; border-radius: 24px; background: var(--blue); color: #fff; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.88); }
.cta-band .cta-row { margin: 0; }

@media (max-width: 1080px) {
  .cards-4, .process { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; display: none; }
}
@media (max-width: 900px) {
  .split, .contact-grid, .auth { grid-template-columns: 1fr; gap: 40px; }
  .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .auth-side { padding: 48px 24px; }
  .auth-side .tile-visual { display: none; }
  .auth { min-height: 0; }
}
@media (max-width: 600px) {
  .page-hero { padding: 56px 0 52px; }
  .cards-4, .process, .form-row { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-card { padding: 24px 20px; }
  .cta-band { padding: 28px 22px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 1.55rem; }
}

/* Let grid columns shrink so wide tables scroll inside .table-wrap */
.split > *, .article-layout > *, .contact-grid > *, .comp-grid > * { min-width: 0; }

/* ================= Photos ================= */
/* Hero tiles: photo behind, dark fade so text stays readable */
.tile { position: relative; overflow: hidden; isolation: isolate; }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tile:has(.tile-img)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.72) 42%, rgba(24,24,24,.25) 100%);
}
.tile:has(.tile-img) p { color: #d3d6de; }
.tile:has(.tile-img) .tile-visual { background: rgba(24,24,24,.72); backdrop-filter: blur(8px); }

/* Audience cards with photo */
.aud-img { width: calc(100% + 52px); max-width: none; margin: -30px -26px 22px; aspect-ratio: 4 / 3; object-fit: cover; }

/* Country cards with photo */
.country-card { overflow: hidden; }
.country-card .cc-photo { width: calc(100% + 56px); max-width: none; margin: -28px -28px 20px; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.country-card:hover .cc-photo { transform: scale(1.03); }
.country-card .cc-photo + .flag { margin-top: -50px; position: relative; border: 3px solid #fff; }

/* Page hero with photo */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-photo { margin: 0; position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.hero-photo figcaption {
  position: absolute; left: 16px; bottom: 16px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em;
  background: rgba(24,24,24,.75); color: #fff; padding: 7px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}

/* Contact photo card */
.photo-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; color: #fff; display: flex; align-items: flex-end; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(24,24,24,.85)); }
.photo-card div { position: relative; z-index: 1; padding: 24px; }
.photo-card h3 { font-size: 1.3rem; margin: 6px 0 4px; }
.photo-card p { margin: 0; color: #d3d6de; font-size: 15px; }

.photo-credit { font-size: 12.5px; color: var(--muted-light); margin-top: 12px; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero-photo img { aspect-ratio: 16 / 10; }
}
/* Let hero tile photos show through more */
.tile:has(.tile-img) { min-height: 460px; }
.tile:has(.tile-img)::before {
  background: linear-gradient(180deg, rgba(24,24,24,.95) 0%, rgba(24,24,24,.78) 36%, rgba(24,24,24,0) 62%, rgba(24,24,24,0) 70%, rgba(24,24,24,.55) 100%);
}
.tile:has(.tile-img) .tile-visual { border-radius: 16px; margin: auto 0 18px; }
@media (max-width: 600px) { .tile:has(.tile-img) { min-height: 420px; } }
.photo-card img { object-position: center 25%; }
.photo-card::after { background: linear-gradient(rgba(24,24,24,.05) 10%, rgba(24,24,24,.88) 85%); }
.photo-card .mono-label { color: #fff; }
.cc-goal { font-weight: 600; font-size: 15px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); margin: 0 0 16px; }
.footer-bottom a { color: #fff; font-weight: 600; }
.footer-bottom a:hover { color: var(--sky); }

/* =====================================================================
   Motion & effects layer
   Everything here is progressive: without JS or with reduced motion the
   page renders exactly as before.
   ===================================================================== */

:root { interpolate-size: allow-keywords; --glow: 0 0 0 1px rgba(42,119,255,.25), 0 20px 50px -20px rgba(42,119,255,.55); }
::selection { background: var(--blue); color: #fff; }

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Scroll progress + header state ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--blue), #5b9bff, #9cc3ff);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.scrolled { background: rgba(255,255,255,.78); box-shadow: 0 10px 30px -18px rgba(24,24,24,.35); }

/* Mobile menu slides in */
@media (max-width: 900px) {
  .nav-menu.open { animation: menu-in .28s cubic-bezier(.2,.8,.2,1); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Buttons: shine sweep + glow ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::after { transform: translateX(120%); }
.btn-primary:hover, .btn-dark:hover { box-shadow: var(--glow); }
.btn-white:hover { box-shadow: 0 16px 40px -16px rgba(0,0,0,.45); }

/* ---------- Aurora glow behind blue/dark hero bands ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.aurora span:nth-child(1) { background: #1747b8; top: -22vmax; left: -12vmax; animation: drift1 18s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { background: #2a77ff; top: -18vmax; right: -16vmax; opacity: .4; animation: drift2 22s ease-in-out infinite alternate; }
.aurora span:nth-child(3) { background: #1d4ed8; bottom: -30vmax; left: 30%; opacity: .6; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14vmax, 14vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-16vmax, -8vmax) scale(1.1); } }
.hero, .page-hero, .final-cta, .auth-side, .section.dark { position: relative; isolation: isolate; }
.hero > .container, .page-hero > .container, .final-cta > .container, .auth-side > *:not(.aurora), .section.dark > .container { position: relative; z-index: 1; }
.page-hero.ink .aurora span, .section.dark .aurora span { opacity: .28; }
.auth-side { overflow: hidden; }

/* Moving grid + cursor spotlight on the hero */
.hero, .page-hero, .final-cta { animation: grid-move 14s linear infinite; }
@keyframes grid-move { to { background-position: 64px 64px, 64px 64px; } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.18), transparent 45%);
  transition: opacity .3s;
}

/* Glassy hero badge with live pulse */
.pill-badge { backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.pill-badge .dot { animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(156,195,255,.7); } 100% { box-shadow: 0 0 0 10px rgba(156,195,255,0); } }

/* Hero headline: word-by-word rise */
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(8px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s; transition-delay: calc(var(--i) * 55ms + 100ms); }
.hero h1.go .w { opacity: 1; transform: none; filter: none; }

/* ---------- Scroll reveal ---------- */
.motion .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s; transition-delay: calc(var(--d, 0) * 80ms); }
.motion .reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- Cursor spotlight on cards ---------- */
.spot { --mx: 50%; --my: 50%; }
.spot { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(42,119,255,.09), transparent 45%); }
.tile.spot, .section.dark .spot, .compare-card.after.spot, .calc.spot, .flow.spot { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(127,178,255,.16), transparent 45%); }
.plan.featured.spot { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 45%); }
.info-card, .case, .country-card, .guide, .stat-tile, .compare-card, .plan, .flow, .aud li, .feat-grid li, .steps li, .process li { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.info-card:hover, .case:hover, .plan:hover, .steps li:hover, .process li:hover, .aud li:hover, .flow:hover { box-shadow: 0 24px 50px -28px rgba(42,119,255,.55); border-color: rgba(42,119,255,.45); }
.feat-grid li:hover { color: var(--blue); }
.feat-grid li:hover::before { transform: rotate(45deg) scale(1.2); }
.feat-grid li::before { transition: transform .3s; }

/* 3D tilt (applied by JS on fine pointers) */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* Audience photos zoom */
.aud li { overflow: hidden; }
.aud-img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.aud li:hover .aud-img { transform: scale(1.06); }

/* ---------- Animated AI border ---------- */
.campaign-card, .comp-panel, .mock {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
    conic-gradient(from var(--ang), rgba(42,119,255,.15), #2a77ff, #5b9bff, #9cc3ff, rgba(42,119,255,.15) 40%, rgba(42,119,255,.15)) border-box;
  animation: spin-border 6s linear infinite;
}
.comp-panel { --card-bg: var(--ink-2); }
@keyframes spin-border { to { --ang: 360deg; } }

/* ---------- AI demo sequence on the campaign card ---------- */
.ai-thinking { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--blue-700); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; }
.ai-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: blink 1s infinite; }
.ai-thinking i:nth-child(2) { animation-delay: .15s; } .ai-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; transform: translateY(-2px); } }
.ai-seq .bubble, .ai-seq .cc-rows li, .ai-seq .cc-foot { transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; }
.ai-seq.pending .bubble, .ai-seq.pending .cc-rows li, .ai-seq.pending .cc-foot, .ai-seq.pending .cc-label:not(:first-of-type) { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.ai-seq .cc-label { transition: opacity .5s; }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cc-rows li .cur { transition: background .3s, color .3s; }
.cc-rows li.done .cur { background: #e8f7ee; color: #15803d; }
.cc-foot .btn.ready-pulse { animation: ready 1.6s ease-out 2; }
@keyframes ready { 0% { box-shadow: 0 0 0 0 rgba(42,119,255,.6); } 100% { box-shadow: 0 0 0 14px rgba(42,119,255,0); } }

/* ---------- Ticker ---------- */
.ticker { position: relative; overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--line); background: #fff; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; gap: 40px; padding-right: 40px; }
.ticker li { display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; color: var(--ink); }
.ticker li::before { content: "✦"; color: var(--blue); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Stats count-up shimmer ---------- */
.stat-tile .num { background: linear-gradient(90deg, currentColor 40%, rgba(127,178,255,.9) 50%, currentColor 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; }
.stat-tile.blue .num { color: #fff; }
.stat-tile .num.shine { -webkit-text-fill-color: transparent; animation: shine 1.6s ease forwards; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Price change flash */
.amt.flash { animation: flash .5s cubic-bezier(.2,.8,.2,1); }
@keyframes flash { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

/* ---------- FAQ smooth open ---------- */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.2,.8,.2,1), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--blue); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; font-size: 20px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s, background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blue); }


/* ---------- Reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora, .scroll-progress { display: none; }
  .hero, .page-hero, .final-cta, .ticker-track, .campaign-card, .comp-panel, .mock, .pill-badge .dot { animation: none !important; }
  .hero h1 .w { transition: none; opacity: 1; transform: none; filter: none; }
  .motion .reveal { opacity: 1; transform: none; filter: none; }
  .btn::after { display: none; }
}
.ai-thinking[hidden] { display: none; }

/* =====================================================================
   Floating glass header
   ===================================================================== */
html { scroll-padding-top: 100px; }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 16px 0; background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.site-header.scrolled { background: transparent; box-shadow: none; }
.site-header.hide { transform: translateY(calc(-100% - 10px)); }

.site-header .nav {
  pointer-events: auto; position: relative; isolation: isolate;
  max-width: 1180px; height: 64px; margin: 0 auto; padding: 0 8px 0 22px; gap: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 40px -18px rgba(16,24,64,.45);
  transition: height .35s cubic-bezier(.2,.8,.2,1), max-width .5s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .35s;
}
.site-header.scrolled .nav {
  height: 58px; max-width: 1080px; background: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 50px -18px rgba(16,24,64,.5);
}
/* Animated gradient ring around the capsule */
.site-header .nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1.2px;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.75), #2a77ff, #5b9bff, #9cc3ff, rgba(255,255,255,.75) 42%, rgba(255,255,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 8s linear infinite;
}

.site-header .logo img { height: 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.site-header .logo:hover img { transform: scale(1.05); }

/* Links + sliding highlight */
.site-header .nav-menu { gap: 12px; }
.site-header .nav-links { gap: 2px; margin: 0 auto; }
.site-header .nav-links a {
  position: relative; z-index: 1; display: block; padding: 9px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink); transition: color .25s;
}
.site-header .nav-links a:hover, .site-header .nav-links a:focus-visible, .site-header .nav-links a[aria-current="page"] { color: var(--blue); text-decoration: none; }
.nav-indicator {
  position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0; pointer-events: none;
  border-radius: 999px; background: rgba(42,119,255,.1); box-shadow: inset 0 0 0 1px rgba(42,119,255,.2);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), top .3s, height .3s, opacity .25s;
}
.nav-indicator.on { opacity: 1; }

/* Actions */
.site-header .nav-actions { gap: 4px; }
.nav-login {
  font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 10px 16px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.nav-login:hover { text-decoration: none; background: rgba(24,24,24,.06); }
.nav-cta {
  padding: 12px 18px; font-size: 14.5px;
  background: linear-gradient(135deg, #2a77ff, #1a56d6);
  box-shadow: 0 10px 26px -10px rgba(42,119,255,.85), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-cta:hover { background: linear-gradient(135deg, #1f63e0, #1447b8); box-shadow: 0 14px 34px -10px rgba(26,86,214,.9); }
.nav-arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-cta:hover .nav-arrow { transform: translateX(4px); }

/* Reading progress lives inside the capsule */
.site-header .scroll-progress { position: absolute; top: auto; bottom: 0; left: 34px; right: 34px; height: 2px; border-radius: 2px; z-index: 2; }

/* Space for the floating header on the first band of every page */
.hero { padding-top: 168px; }
.page-hero { padding-top: 160px; }
.auth { min-height: 100vh; }
.auth-side { padding-top: 150px; }
.auth-main { padding-top: 130px; }

/* Mobile: capsule + glass dropdown panel */
@media (max-width: 900px) {
  .site-header { padding: 10px 10px 0; }
  .site-header .nav { height: 60px; padding: 0 8px 0 18px; }
  .site-header.scrolled .nav { height: 56px; }
  .site-header .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(24,24,24,.06); transition: background .2s;
  }
  .site-header .nav-toggle[aria-expanded="true"] { background: var(--ink); }
  .site-header .nav-toggle[aria-expanded="true"] span { background: #fff; }
  .site-header .nav-toggle span { margin: 2.5px 0; width: 18px; }

  .site-header .nav-menu {
    display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px; padding: 14px;
    border-radius: 26px; border: 1px solid rgba(255,255,255,.75);
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 30px 70px -24px rgba(16,24,64,.5);
    opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top center;
    visibility: hidden; pointer-events: none;
    transition: opacity .25s, transform .3s, visibility 0s .3s;
  }
  .site-header .nav-menu.open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto; animation: none;
    transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .site-header .nav-links { flex-direction: column; gap: 2px; margin: 0; counter-reset: nl; }
  .site-header .nav-links li { counter-increment: nl; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .45s cubic-bezier(.2,.8,.2,1); }
  .site-header .nav-menu.open .nav-links li { opacity: 1; transform: none; }
  .site-header .nav-menu.open .nav-links li:nth-child(2) { transition-delay: .05s; }
  .site-header .nav-menu.open .nav-links li:nth-child(3) { transition-delay: .1s; }
  .site-header .nav-menu.open .nav-links li:nth-child(4) { transition-delay: .15s; }
  .site-header .nav-links a {
    display: flex; align-items: baseline; gap: 14px; padding: 13px 14px; border-radius: 16px;
    font: 600 1.4rem/1.2 var(--display); letter-spacing: -.02em;
  }
  .site-header .nav-links a::before { content: counter(nl, decimal-leading-zero); font: 500 12px var(--mono); letter-spacing: .1em; color: var(--blue-700); }
  .site-header .nav-links a:hover, .site-header .nav-links a[aria-current="page"] { background: rgba(42,119,255,.08); }
  .nav-indicator { display: none; }
  .site-header .nav-actions { flex-direction: row; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .site-header .nav-actions > * { flex: 1; justify-content: center; text-align: center; padding: 14px; }
  .nav-login { border: 1px solid var(--line); }
  .site-header .scroll-progress { left: 26px; right: 26px; }

  .auth-side { padding-top: 120px; }
  .auth-main { padding-top: 56px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 116px; }
  .page-hero { padding-top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav::before { animation: none; }
  .site-header, .site-header .nav, .nav-indicator, .site-header .nav-menu, .site-header .nav-links li { transition: none; }
}
/* Mobile menu: solid glass panel + dimmed, blurred page behind */
@media (max-width: 900px) {
  .site-header .nav-menu { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,255,.97)); }
  .site-header::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(12,16,34,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .3s;
  }
  .site-header.menu-open::before { opacity: 1; pointer-events: auto; }
}

/* =====================================================================
   Hero: "AI core". Dark cinematic stage with messages orbiting a
   glowing AI orb.
   ===================================================================== */
.hero-orbit {
  background-color: #07090f;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-orbit::before { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(125,178,255,.10), transparent 45%); }
.hero-orbit::after {
  inset: 0; height: auto; z-index: 0;
  background:
    radial-gradient(55% 40% at 50% 64%, rgba(42,119,255,.34), transparent 70%),
    radial-gradient(35% 26% at 50% 62%, rgba(42,119,255,.28), transparent 70%),
    radial-gradient(70% 40% at 50% -5%, rgba(42,119,255,.22), transparent 70%);
}
.hero-orbit .aurora span { opacity: .2; }

/* Copy */
.hero-center { position: relative; z-index: 3; max-width: 980px; margin: 0 auto; text-align: center; }
.hero-orbit h1 {
  font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: .96; letter-spacing: -.055em; font-weight: 700;
  margin-bottom: 26px; color: #fff;
}
.hero-orbit h1 .grad {
  display: inline-block; padding-bottom: .07em;
  background: linear-gradient(92deg, #ffffff 0%, #b9d4ff 30%, #5b9bff 62%, #2a77ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(0) drop-shadow(0 0 28px rgba(79,155,255,.45));
}
.motion .hero h1 .no-split {
  opacity: 0; transform: translateY(.25em); filter: blur(10px) drop-shadow(0 0 0 rgba(79,155,255,0));
  transition: opacity 1s cubic-bezier(.2,.8,.2,1) .45s, transform 1s cubic-bezier(.2,.8,.2,1) .45s, filter 1.2s .45s;
}
.motion .hero h1.go .no-split { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 28px rgba(79,155,255,.45)); }
.hero-orbit .lede { max-width: 620px; margin: 0 auto 34px; color: rgba(226,232,255,.78); font-size: 1.18rem; }
.hero-orbit .hero-checks { color: rgba(226,232,255,.7); }
.hero-cta {
  background: linear-gradient(135deg, #2a77ff, #1a56d6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 50px -12px rgba(42,119,255,.9);
}
.hero-cta:hover { background: linear-gradient(135deg, #1f63e0, #1447b8); box-shadow: 0 22px 60px -10px rgba(42,119,255,1); }
.hero-cta:hover .nav-arrow { transform: translateX(4px); }
.btn-glass { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

/* Orbit stage */
.orbit-scene { position: relative; z-index: 2; height: 460px; max-width: 1200px; margin: 34px auto 0; }
.orbit-path {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(125,178,255,.24); box-shadow: inset 0 0 40px rgba(42,119,255,.15);
}
.orbit-path::after { content: ""; position: absolute; inset: -34px -70px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.08); }

/* The AI core */
.core {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #eaf2ff 0%, #9cc3ff 12%, #2a77ff 40%, #1747b8 66%, #0a1a4a 90%);
  box-shadow: inset -24px -34px 60px rgba(4,6,30,.85), inset 12px 14px 36px rgba(255,255,255,.28), 0 0 60px 10px rgba(42,119,255,.55), 0 0 180px 60px rgba(42,119,255,.3);
  transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  animation: core-breathe 5s ease-in-out infinite;
}
.core::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; mix-blend-mode: screen; filter: blur(12px);
  background: conic-gradient(from var(--ang), transparent 0deg, rgba(156,195,255,.65) 40deg, transparent 100deg, rgba(91,155,255,.6) 190deg, transparent 260deg, rgba(156,195,255,.45) 320deg, transparent 360deg);
  animation: spin-border 7s linear infinite;
}
.core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
@keyframes core-breathe {
  50% { box-shadow: inset -24px -34px 60px rgba(4,6,30,.85), inset 12px 14px 36px rgba(255,255,255,.28), 0 0 90px 20px rgba(42,119,255,.7), 0 0 230px 80px rgba(42,119,255,.38); }
}
.core-label {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font: 600 15px var(--mono); letter-spacing: .32em; text-indent: .32em; color: rgba(255,255,255,.92);
  text-shadow: 0 0 14px rgba(255,255,255,.85);
}
.core-wave { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(125,178,255,.55); pointer-events: none; animation: wave 4.5s cubic-bezier(.2,.6,.3,1) infinite; }
.core-wave:nth-child(2) { animation-delay: 1.5s; }
.core-wave:nth-child(3) { animation-delay: 3s; }
@keyframes wave { from { transform: scale(1); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }

/* Orbiting messages (positioned every frame by script.js) */
.orbit-msg {
  position: absolute; left: 50%; top: 50%; width: 236px; padding: 12px 14px; text-align: left;
  border-radius: 18px 18px 18px 6px; color: #fff; font-size: 13.5px; line-height: 1.4;
  background: linear-gradient(160deg, rgba(42,119,255,.26), rgba(16,20,32,.88));
  border: 1px solid rgba(156,195,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -20px rgba(0,0,0,.7);
  transform: translate(-50%, -50%); will-change: transform, opacity;
}
.orbit-msg b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9cc3ff; }
.orbit-msg b::after { content: "✓✓"; margin-left: auto; letter-spacing: 0; color: #9cc3ff; }
.orbit-msg p { margin: 0; }

/* Particles (stars) */
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-particles i {
  position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(156,195,255,.85); opacity: 0;
  animation: rise var(--dur) linear var(--delay) infinite;
}
@keyframes rise { 10% { opacity: .9; } 85% { opacity: .5; } to { transform: translate(var(--sway), calc(-1 * var(--h))); opacity: 0; } }

/* Feature tiles become glass on the dark stage */
.hero-orbit .hero-tiles { margin-top: 24px; border: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
.hero-orbit .tile { background-color: rgba(255,255,255,.03); border-right-color: rgba(255,255,255,.07); }
.hero-orbit .tile:nth-child(even) { background-color: rgba(255,255,255,.05); }
.hero-orbit .tile-visual { background: rgba(255,255,255,.05); }

@media (max-width: 900px) {
  .orbit-scene { height: 400px; }
  .core { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .orbit-msg { width: 200px; font-size: 12.5px; }
}
@media (max-width: 600px) {
  .hero-orbit h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .hero-orbit .lede { font-size: 1.05rem; }
  .orbit-scene { height: 340px; margin-top: 16px; }
  .core { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
  .core-label { font-size: 12px; }
  .orbit-msg { width: 168px; padding: 10px 12px; font-size: 12px; }
  .orbit-path::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .core, .core::before, .core-wave { animation: none; }
  .core-wave { display: none; }
  .core { transition: none; }
}

/* =====================================================================
   Hero feature cards: glass cards with icons and looping mini demos
   ===================================================================== */
.hero-orbit { padding-bottom: 96px; }
.hero-orbit .hero-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px;
  border: 0; border-radius: 0; overflow: visible;
}
.hero-orbit .tile {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: 22px 20px 20px;
  border: 1px solid rgba(156,195,255,.12); border-radius: 22px;
  background-color: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .45s, background-color .35s;
}
.hero-orbit .tile:nth-child(even) { background-color: rgba(255,255,255,.035); }
.hero-orbit .tile::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(156,195,255,.9), transparent); opacity: 0; transition: opacity .4s;
}
.hero-orbit .tile:hover {
  border-color: rgba(156,195,255,.34); background-color: rgba(42,119,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -28px rgba(42,119,255,.6);
}
.hero-orbit .tile:not(.tilt):hover { transform: translateY(-6px); }
.hero-orbit .tile:hover::after { opacity: 1; }
.hero-orbit .tile h3 { font-size: 1.25rem; margin: 8px 0 8px; }
.hero-orbit .tile p { color: rgba(214,224,245,.72); font-size: 14.5px; margin-bottom: 20px; }

.tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tile-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #cfe2ff;
  background: linear-gradient(145deg, rgba(42,119,255,.38), rgba(42,119,255,.06));
  border: 1px solid rgba(156,195,255,.32);
  box-shadow: 0 0 0 4px rgba(42,119,255,.06), 0 10px 30px -8px rgba(42,119,255,.6);
  transition: box-shadow .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.tile-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile-icon svg * { stroke-dasharray: 100; stroke-dashoffset: 0; }
.tile:hover .tile-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 6px rgba(42,119,255,.1), 0 14px 38px -6px rgba(42,119,255,.85); }
.tile:hover .tile-icon svg * { animation: draw 1s cubic-bezier(.6,0,.2,1) both; }
.tile:hover .tile-icon svg *:nth-child(2) { animation-delay: .15s; }
.tile:hover .tile-icon svg *:nth-child(3) { animation-delay: .3s; }
.tile:hover .tile-icon svg *:nth-child(4) { animation-delay: .45s; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.tile-num { font: 500 12px var(--mono); letter-spacing: .14em; color: rgba(156,195,255,.55); }

/* Shared visual frame */
.hero-orbit .tile-visual {
  position: relative; margin-top: auto; height: 228px; padding: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; background: rgba(5,8,18,.55); border: 1px solid rgba(255,255,255,.06);
}
.tv-tag { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(214,224,245,.6); }
.tv-tag.ai { color: #9cc3ff; }

/* 01 Writer */
.tvw-prompt { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13px; min-height: 52px; }
.tvw-out { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 12px; background: linear-gradient(160deg, rgba(42,119,255,.32), rgba(42,119,255,.12)); border: 1px solid rgba(156,195,255,.2); flex: 1; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.tvw-out.show { opacity: 1; transform: none; }
.tvw-msg { margin: 0 !important; font-size: 13px !important; line-height: 1.4; color: #fff !important; min-height: 2.8em; }
.tvw-skel { display: none; flex-direction: column; gap: 6px; padding-top: 4px; }
.tvw-out.writing .tvw-skel { display: flex; }
.tvw-out.writing .tvw-msg { display: none; }
.tvw-skel i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(156,195,255,.12), rgba(156,195,255,.4), rgba(156,195,255,.12)) 0 0 / 200% 100%; animation: skel 1s linear infinite; }
.tvw-skel i:nth-child(2) { width: 85%; } .tvw-skel i:nth-child(3) { width: 60%; }
@keyframes skel { to { background-position: -200% 0; } }
.tvw-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font: 500 10.5px var(--mono); color: rgba(214,224,245,.65); }
.tvw-variants { display: inline-flex; gap: 4px; }
.tvw-variants b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(156,195,255,.3); color: rgba(214,224,245,.7); transition: background .3s, color .3s; }
.tvw-variants b.on { background: #2a77ff; border-color: #2a77ff; color: #fff; }

/* 02 Audiences */
.tv-aud { gap: 7px !important; }
.tva-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 11px 9px;
  border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid transparent; font-size: 13px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.tva-row span { font-weight: 600; }
.tva-num { font: 600 12.5px var(--mono); color: #9cc3ff; }
.tva-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.tva-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1a56d6, #5b9bff); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.tva-row.scan { background: rgba(42,119,255,.14); border-color: rgba(156,195,255,.25); }
.tva-row.picked { background: rgba(42,119,255,.22); border-color: rgba(156,195,255,.5); box-shadow: 0 0 24px -6px rgba(42,119,255,.8); }
.tva-pick { margin-top: auto; font-size: 12px; color: rgba(214,224,245,.75); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.tva-pick b { color: #fff; }
.tva-pick.show { opacity: 1; transform: none; }

/* 03 Inbox */
.tvi-in, .tvi-draft { max-width: 88%; padding: 9px 11px; font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s; }
.tvi-in { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.08); }
.tvi-draft { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(42,119,255,.12); border: 1px dashed rgba(156,195,255,.5); display: flex; flex-direction: column; gap: 3px; }
.tvi-draft p { margin: 0 !important; font-size: 13px !important; color: #fff !important; min-height: 2.8em; }
.tvi-draft.sent { background: #2a77ff; border: 1px solid #2a77ff; }
.tvi-draft.sent .tv-tag { display: none; }
.tvi-in.show, .tvi-draft.show { opacity: 1; transform: none; }
.tvi-typing { display: none; align-self: flex-end; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(42,119,255,.14); }
.tvi-typing.show { display: inline-flex; }
.tvi-typing i { width: 5px; height: 5px; border-radius: 50%; background: #9cc3ff; animation: blink 1s infinite; }
.tvi-typing i:nth-child(2) { animation-delay: .15s; } .tvi-typing i:nth-child(3) { animation-delay: .3s; }
.tvi-foot { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; min-height: 30px; }
.tvi-approve {
  display: none; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #2a77ff, #1a56d6); box-shadow: 0 8px 20px -8px rgba(42,119,255,.9);
  transition: transform .15s, box-shadow .3s;
}
.tvi-approve.show { display: inline-block; animation: pop .35s cubic-bezier(.2,.8,.2,1); }
.tvi-approve.hover { box-shadow: 0 0 0 4px rgba(42,119,255,.3), 0 10px 24px -8px rgba(42,119,255,1); }
.tvi-approve.press { transform: scale(.92); }
.tvi-sent { display: none; font: 500 11px var(--mono); letter-spacing: .08em; color: #9cc3ff; }
.tvi-sent.show { display: inline; animation: pop .35s cubic-bezier(.2,.8,.2,1); }

/* 04 Compliance */
.tv-comp { gap: 6px !important; }
.tvc-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13px; font-weight: 600; color: rgba(214,224,245,.6); transition: color .3s, background .3s; }
.tvc-item i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid rgba(156,195,255,.4); transition: background .25s, border-color .25s; }
.tvc-item i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-style: normal; font-weight: 800; color: #fff; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tvc-item.ok { color: #fff; background: rgba(42,119,255,.12); }
.tvc-item.ok i { background: #2a77ff; border-color: #2a77ff; }
.tvc-item.ok i::after { transform: scale(1); }
.tvc-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(91,155,255,.28) 70%, rgba(156,195,255,.9) 100%);
  border-bottom: 1px solid rgba(156,195,255,.9);
}
.tvc-scan.run { animation: scan 1.7s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes scan { 0% { opacity: 0; transform: translateY(-40px); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(224px); } }
.tvc-ready {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #fff;
  background: rgba(42,119,255,.25); border: 1px solid rgba(156,195,255,.45);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s, box-shadow .4s;
}
.tvc-ready::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9cc3ff; box-shadow: 0 0 10px #9cc3ff; }
.tvc-ready.show { opacity: 1; transform: none; box-shadow: 0 0 26px -4px rgba(42,119,255,.8); }

/* Entrance: cards rise in one after another */
.motion .hero-tiles:not(.in) .tile { opacity: 0; }
.motion .hero-tiles.in .tile { animation: tile-in .9s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(36px); filter: blur(6px); } }

@media (max-width: 1080px) {
  .hero-orbit .hero-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero-orbit { padding-bottom: 64px; }
  .hero-orbit .hero-tiles { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile:hover .tile-icon svg * { animation: none; }
  .tvw-skel i, .tvi-typing i { animation: none; }
  .motion .hero-tiles:not(.in) .tile { opacity: 1; }
}

.tva-row span, .tvc-item { white-space: nowrap; }

/* AI bot mark inside the core */
.core-bot { width: 27%; height: auto; color: #fff; overflow: visible; filter: drop-shadow(0 0 10px rgba(255,255,255,.75)) drop-shadow(0 0 22px rgba(156,195,255,.6)); }
.core-bot-eyes { transform-box: fill-box; transform-origin: center; animation: bot-blink 4.5s infinite; }
@keyframes bot-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .core-bot-eyes { animation: none; } }

/* =====================================================================
   Hero galaxy backdrop (replaces the grid)
   ===================================================================== */
.hero-orbit {
  background-color: #03050c;
  background-image:
    radial-gradient(60% 50% at 18% 22%, rgba(23,71,184,.38), transparent 70%),
    radial-gradient(45% 40% at 85% 18%, rgba(42,119,255,.22), transparent 70%),
    radial-gradient(70% 55% at 75% 85%, rgba(10,26,74,.85), transparent 70%),
    radial-gradient(50% 45% at 10% 90%, rgba(42,119,255,.14), transparent 70%);
  background-size: auto;
  animation: none;
}
/* Milky Way band + glow behind the core */
.hero-orbit::after {
  background:
    linear-gradient(118deg, transparent 30%, rgba(91,155,255,.05) 40%, rgba(156,195,255,.11) 48%, rgba(207,226,255,.07) 52%, rgba(91,155,255,.05) 60%, transparent 70%),
    radial-gradient(50% 36% at 50% 64%, rgba(42,119,255,.3), transparent 70%),
    radial-gradient(30% 22% at 50% 62%, rgba(91,155,255,.22), transparent 70%);
}
.hero-stars { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-orbit .hero-particles { display: none; }
/* Richer nebula clouds along the band */
.hero-orbit::after {
  background:
    radial-gradient(28% 20% at 30% 58%, rgba(91,155,255,.16), transparent 70%),
    radial-gradient(24% 18% at 72% 30%, rgba(42,119,255,.18), transparent 70%),
    linear-gradient(118deg, transparent 30%, rgba(91,155,255,.06) 40%, rgba(156,195,255,.14) 48%, rgba(207,226,255,.09) 52%, rgba(91,155,255,.06) 60%, transparent 70%),
    radial-gradient(50% 36% at 50% 64%, rgba(42,119,255,.3), transparent 70%),
    radial-gradient(30% 22% at 50% 62%, rgba(91,155,255,.22), transparent 70%);
}

/* Industry use-case cards (US page) */
.uc-card { display: flex; flex-direction: column; }
.uc-card h3 { font-size: 1.35rem; margin-top: 4px; }
.uc-card > p { margin-bottom: 18px !important; }
.uc-card .checks { font-size: 15px; margin-bottom: 18px; }
.uc-sample {
  margin-top: auto; padding: 14px 16px; border-radius: 16px 16px 16px 4px; font-size: 14.5px; line-height: 1.5;
  background: var(--bg-alt); border: 1px solid var(--line);
}
.uc-sample span { display: block; margin-bottom: 4px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--blue-700); }

/* Hero cards: same frosted-glass capsule style as the header */
.hero-orbit .tile {
  isolation: isolate; border: 0; color: var(--ink);
  background-color: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 50px -20px rgba(4,10,40,.6);
}
.hero-orbit .tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1.2px;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.75), #2a77ff, #5b9bff, #9cc3ff, rgba(255,255,255,.75) 42%, rgba(255,255,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 8s linear infinite;
}
.hero-orbit .tile:nth-child(2)::before { animation-delay: -2s; }
.hero-orbit .tile:nth-child(3)::before { animation-delay: -4s; }
.hero-orbit .tile:nth-child(4)::before { animation-delay: -6s; }
.hero-orbit .tile.spot { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(42,119,255,.12), transparent 45%); }
.hero-orbit .tile:hover {
  background-color: rgba(255,255,255,.84) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -24px rgba(42,119,255,.75);
}
.hero-orbit .tile::after { display: none; }
.hero-orbit .tile h3 { color: var(--ink); }
.hero-orbit .tile p { color: #4c5263; }
.hero-orbit .tile .mono-label { color: var(--blue-700); }
.hero-orbit .tile-num { color: rgba(23,79,184,.55); }
.hero-orbit .tile-icon {
  color: #fff; border: 0;
  background: linear-gradient(135deg, #2a77ff, #1a56d6);
  box-shadow: 0 0 0 4px rgba(42,119,255,.12), 0 10px 24px -8px rgba(42,119,255,.8);
}
.hero-orbit .tile:hover .tile-icon { box-shadow: 0 0 0 6px rgba(42,119,255,.16), 0 14px 32px -6px rgba(42,119,255,.95); }
/* Demo screens stay dark, like a device set into the glass */
.hero-orbit .tile-visual { background: #0b1022; border: 1px solid rgba(10,20,60,.15); color: #fff; box-shadow: inset 0 2px 10px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .hero-orbit .tile::before { animation: none; } }

/* Hero announcement badge */
.hero-badge {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 28px; padding: 5px 6px 5px 5px; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px -12px rgba(42,119,255,.6);
}
.hero-badge::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.2), #2a77ff, #9cc3ff, rgba(255,255,255,.2) 45%, rgba(255,255,255,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 6s linear infinite;
}
.hero-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); animation: hb-shine 5s ease-in-out infinite;
}
@keyframes hb-shine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.hb-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .12em;
  background: linear-gradient(135deg, #2a77ff, #1a56d6); box-shadow: 0 0 18px -2px rgba(42,119,255,.9);
}
.hb-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: hb-pulse 1.8s ease-out infinite; }
@keyframes hb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.hb-text { font-size: 14px; font-weight: 500; color: rgba(226,232,255,.88); }
.hb-regions { display: inline-flex; gap: 4px; }
.hb-regions b {
  padding: 5px 9px; border-radius: 999px; font: 500 11.5px var(--mono); letter-spacing: .06em;
  color: #cfe2ff; background: rgba(255,255,255,.07); border: 1px solid rgba(156,195,255,.18);
  animation: hb-region 6s ease-in-out infinite;
}
.hb-regions b:nth-child(2) { animation-delay: 1.5s; }
.hb-regions b:nth-child(3) { animation-delay: 3s; }
.hb-regions b:nth-child(4) { animation-delay: 4.5s; }
@keyframes hb-region {
  0%, 30%, 100% { color: #cfe2ff; background: rgba(255,255,255,.07); border-color: rgba(156,195,255,.18); box-shadow: none; }
  10%, 20% { color: #fff; background: rgba(42,119,255,.45); border-color: rgba(156,195,255,.7); box-shadow: 0 0 14px -2px rgba(42,119,255,.9); }
}
@media (max-width: 600px) {
  .hero-badge { gap: 7px; flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: 6px; }
  .hb-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge::before, .hero-badge::after, .hb-dot, .hb-regions b { animation: none; }
}

/* =====================================================================
   Footer: dark galaxy, glowing edge, glass CTA and giant wordmark
   ===================================================================== */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 0; color: #fff; font-size: 14.5px;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(23,71,184,.35), transparent 70%),
    radial-gradient(50% 45% at 90% 30%, rgba(42,119,255,.16), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(42,119,255,.28), transparent 70%),
    #03050c;
}
/* Fine star dust */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #cfe2ff, transparent),
    radial-gradient(1px 1px at 44% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 63% 12%, #fff, transparent),
    radial-gradient(1px 1px at 78% 48%, #cfe2ff, transparent), radial-gradient(1px 1px at 91% 22%, #fff, transparent),
    radial-gradient(1px 1px at 8% 80%, #fff, transparent), radial-gradient(1px 1px at 52% 84%, #cfe2ff, transparent),
    radial-gradient(1.5px 1.5px at 86% 76%, #fff, transparent), radial-gradient(1px 1px at 35% 8%, #fff, transparent);
  background-size: 420px 300px;
}
/* Glowing top edge */
.site-footer::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(91,155,255,.4) 20%, #9cc3ff 50%, rgba(91,155,255,.4) 80%, transparent);
  box-shadow: 0 0 30px 2px rgba(42,119,255,.6);
}

/* CTA strip */
.footer-cta {
  position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 34px 38px; margin-bottom: 64px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(42,119,255,.22), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(42,119,255,.6);
}
.footer-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1.2px;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.15), #2a77ff, #9cc3ff, rgba(255,255,255,.15) 45%, rgba(255,255,255,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 8s linear infinite;
}
.footer-eyebrow { margin: 0 0 8px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #9cc3ff; }
.footer-cta h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.03em; max-width: 560px; }
.footer-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Link columns */
.site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.2fr 1fr; gap: 36px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand p { color: rgba(214,224,245,.7); max-width: 280px; margin: 18px 0 14px; }
.footer-mail { display: inline-block; color: #cfe2ff; font-weight: 600; border-bottom: 1px solid rgba(156,195,255,.35); padding-bottom: 2px; }
.footer-mail:hover { text-decoration: none; color: #fff; border-color: #fff; }
.footer-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.footer-regions li {
  padding: 5px 10px; border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .08em; color: #cfe2ff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(156,195,255,.2);
}
.site-footer h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #9cc3ff; }
.site-footer h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2a77ff; box-shadow: 0 0 10px #2a77ff; }
.site-footer nav a {
  position: relative; display: block; width: fit-content; margin-bottom: 9px; color: rgba(226,232,255,.78);
  transition: color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.site-footer nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #2a77ff, #9cc3ff); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.site-footer nav a:hover { color: #fff; text-decoration: none; transform: translateX(3px); }
.site-footer nav a:hover::after { transform: scaleX(1); }
.site-footer .footer-all { margin-top: 6px; color: #9cc3ff; font-weight: 600; }
.footer-stack { display: flex; flex-direction: column; gap: 28px; }

/* Bottom bar */
.site-footer .footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 56px; padding: 22px 0;
  border-top: 1px solid rgba(156,195,255,.14); color: rgba(214,224,245,.6); font-size: 13.5px;
}
.site-footer .footer-bottom a { color: #fff; font-weight: 600; }
.site-footer .footer-bottom a:hover { color: #9cc3ff; text-decoration: none; }

/* Giant wordmark fading into the bottom edge */
.footer-wordmark { display: flex; justify-content: center; margin-top: 8px; padding: 0 16px; pointer-events: none; user-select: none; }
.footer-wordmark img {
  width: min(1180px, 100%); height: auto; opacity: .16; margin-bottom: -4%;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  filter: drop-shadow(0 0 40px rgba(42,119,255,.6));
}

@media (max-width: 1080px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer { padding-top: 48px; }
  .footer-cta { padding: 26px 22px; margin-bottom: 44px; }
  .footer-cta-actions, .footer-cta-actions .btn { width: 100%; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { .footer-cta::before { animation: none; } }
.compare-grid .info-card { display: flex; flex-direction: column; } .compare-grid .info-card p { flex: 1; } .compare-grid .more { margin-top: 12px; } .info-card[id] { scroll-margin-top: 110px; }

/* =====================================================================
   Final CTA: launch portal
   ===================================================================== */
.final-cta {
  position: relative; overflow: hidden; isolation: isolate; padding: 120px 0;
  background-color: #1a56d6;
  background-image:
    radial-gradient(60% 70% at 50% 50%, rgba(91,155,255,.55), transparent 70%),
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 82% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 70% 72%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 92% 85%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 6% 60%, rgba(255,255,255,.7), transparent),
    linear-gradient(160deg, #2a77ff 0%, #1a56d6 55%, #0f3a9e 100%);
  animation: none;
}
.final-cta .aurora { display: none; }
.cta-rings { position: absolute; left: 50%; top: 50%; z-index: 0; width: 0; height: 0; pointer-events: none; }
.cta-rings span {
  position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(207,226,255,.35); animation: cta-ring 8s cubic-bezier(.2,.6,.3,1) infinite;
}
.cta-rings span:nth-child(2) { animation-delay: 2s; }
.cta-rings span:nth-child(3) { animation-delay: 4s; }
.cta-rings span:nth-child(4) { animation-delay: 6s; }
@keyframes cta-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(3); opacity: 0; } }

.cta-card {
  position: relative; isolation: isolate; max-width: 680px; margin: 0 auto; padding: 56px 48px 40px; border-radius: 32px;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 80px -30px rgba(6,20,80,.7);
}
.cta-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1.4px;
  background: conic-gradient(from var(--ang), rgba(255,255,255,.35), #cfe2ff, #ffffff, #9cc3ff, rgba(255,255,255,.35) 45%, rgba(255,255,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 7s linear infinite;
}
.cta-icon {
  display: grid; place-items: center; width: 76px; height: 76px; margin: -94px auto 22px; border-radius: 24px;
  background: radial-gradient(circle at 35% 28%, #9cc3ff, #2a77ff 45%, #1747b8 85%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 6px rgba(255,255,255,.12), 0 20px 40px -10px rgba(6,20,80,.7), 0 0 50px rgba(156,195,255,.6);
}
.cta-bot { width: 34px; height: auto; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
.cta-bot .core-bot-eyes { transform-box: fill-box; transform-origin: center; animation: bot-blink 4.5s infinite; }
.final-cta .cta-card h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 14px; }
.final-cta .cta-card > p:not(.form-msg) { color: rgba(255,255,255,.88); font-size: 1.1rem; margin-bottom: 0; }

.final-cta .signup-form {
  max-width: 520px; margin: 30px auto 0; padding: 6px; border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 20px 40px -18px rgba(6,20,80,.7);
  transition: box-shadow .3s;
}
.final-cta .signup-form:focus-within { box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 0 40px rgba(207,226,255,.7); }
.cta-submit {
  color: #fff; padding: 15px 22px;
  background: linear-gradient(135deg, #181818, #2d2f34); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}
.cta-submit:hover { background: linear-gradient(135deg, #2a77ff, #1a56d6); box-shadow: 0 12px 28px -8px rgba(42,119,255,.9); }
.cta-submit:hover .nav-arrow { transform: translateX(4px); }
.cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.cta-trust li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
.cta-trust li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1a56d6; font-size: 11px; font-weight: 800; }

/* Avoid a second CTA right after this one on the homepage */
.home .footer-cta { display: none; }

@media (max-width: 600px) {
  .final-cta { padding: 96px 0 72px; }
  .cta-card { padding: 48px 20px 28px; border-radius: 26px; }
  .final-cta .signup-form { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-rings span, .cta-card::before, .cta-bot .core-bot-eyes { animation: none; }
  .cta-rings span { opacity: .25; }
}
.final-cta { background-size: auto; background-repeat: no-repeat; background-position: 0 0; }

/* Footer credit: tiny orbiting planet */
.made-by { display: inline-flex; align-items: center; gap: 8px; }
.mini-orbit {
  position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(156,195,255,.35);
  background: radial-gradient(circle at 50% 50%, #5b9bff 0 3px, transparent 3.5px);
  box-shadow: 0 0 10px rgba(42,119,255,.5);
  animation: spin-mini 3s linear infinite;
}
.mini-orbit i { position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #cfe2ff; box-shadow: 0 0 8px #9cc3ff; }
@keyframes spin-mini { to { transform: rotate(360deg); } }
.made-by a { background: linear-gradient(90deg, #fff, #9cc3ff, #fff) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: credit-shine 4s linear infinite; }
.made-by a:hover { text-decoration: underline; text-decoration-color: #9cc3ff; }
@keyframes credit-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mini-orbit, .made-by a { animation: none; } }

/* Animated footer wordmark: logo used as a mask over moving light */
.footer-wordmark { position: relative; }
.footer-wordmark .wm {
  --mx: 50%; --my: 50%;
  width: min(1180px, 100%); aspect-ratio: 6330 / 1688; margin-bottom: -4%;
  -webkit-mask: url(assets/textezy-logo-white.svg) center / contain no-repeat; mask: url(assets/textezy-logo-white.svg) center / contain no-repeat;
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(156,195,255,.55), transparent 60%),
    linear-gradient(105deg, transparent 35%, rgba(156,195,255,.75) 48%, #fff 50%, rgba(156,195,255,.75) 52%, transparent 65%) -150% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(42,119,255,.12) 70%, transparent);
  animation: wm-sweep 7s ease-in-out infinite;
  opacity: 0; transform: translateY(40px); filter: blur(8px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s;
}
.footer-wordmark.in .wm { opacity: 1; transform: none; filter: drop-shadow(0 0 30px rgba(42,119,255,.45)); }
@keyframes wm-sweep { 0%, 15% { background-position: 0 0, -150% 0, 0 0; } 70%, 100% { background-position: 0 0, 250% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .footer-wordmark .wm { animation: none; opacity: 1; transform: none; filter: none; transition: none; } }

/* Wordmark v3: original logo image + entrance, mouse glow and edge fade */
.footer-wordmark .wm {
  position: relative; background: none; animation: none;
  -webkit-mask: linear-gradient(180deg, #000 20%, transparent 95%); mask: linear-gradient(180deg, #000 20%, transparent 95%);
}
.footer-wordmark .wm img { display: block; width: 100%; height: auto; opacity: .16; margin: 0; -webkit-mask-image: none; mask-image: none; filter: none; }
.footer-wordmark.in .wm { filter: drop-shadow(0 0 40px rgba(42,119,255,.6)); }
.wm-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  -webkit-mask: url(assets/textezy-logo-white.svg) center / contain no-repeat; mask: url(assets/textezy-logo-white.svg) center / contain no-repeat;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(156,195,255,.7), rgba(42,119,255,.25) 45%, transparent 70%);
}
.site-footer:hover .wm-glow { opacity: 1; }

/* =====================================================================
   Square corners everywhere (kept round: the AI core, rings and dots)
   ===================================================================== */
body:not(.app-body) *, body:not(.app-body) *::before, body:not(.app-body) *::after { border-radius: 0 !important; }
body:not(.app-body) .core,
body:not(.app-body) .core::before,
body:not(.app-body) .core::after,
body:not(.app-body) .core-wave,
body:not(.app-body) .orbit-path,
body:not(.app-body) .orbit-path::after,
body:not(.app-body) .cta-rings span,
body:not(.app-body) .dot,
body:not(.app-body) .hb-dot,
body:not(.app-body) .studio-dot,
body:not(.app-body) .pill-badge .dot,
body:not(.app-body) .ready::before,
body:not(.app-body) .tvc-ready::before,
body:not(.app-body) .site-footer h4::before,
body:not(.app-body) .sms-typing i,
body:not(.app-body) .tvi-typing i,
body:not(.app-body) .ai-thinking i,
body:not(.app-body) .hero-particles i,
body:not(.app-body) .mini-orbit,
body:not(.app-body) .mini-orbit i { border-radius: 50% !important; }

/* =====================================================================
   HUD edges + dark glass header
   ===================================================================== */
/* Header: dark glass control bar */
.site-header .nav {
  background: rgba(8,12,30,.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(156,195,255,.18), 0 18px 50px -20px rgba(0,0,0,.8), 0 0 40px -10px rgba(42,119,255,.35);
}
.site-header.scrolled .nav { background: rgba(8,12,30,.82) !important; }
.site-header .nav::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #5b9bff, #cfe2ff, #5b9bff, transparent); box-shadow: 0 0 14px rgba(91,155,255,.9);
}
.site-header .nav-links a { color: rgba(226,232,255,.82); }
.site-header .nav-links a:hover, .site-header .nav-links a:focus-visible, .site-header .nav-links a[aria-current="page"] { color: #fff; }
.nav-indicator { background: rgba(42,119,255,.28); box-shadow: inset 0 0 0 1px rgba(156,195,255,.45), 0 0 18px -4px rgba(42,119,255,.9); }
.nav-login { color: #fff; }
.nav-login:hover { background: rgba(255,255,255,.08); }
.site-header .nav-toggle { background: rgba(255,255,255,.1); }
.site-header .nav-toggle span { background: #fff; }
.site-header .nav-toggle[aria-expanded="true"] { background: #2a77ff; }
@media (max-width: 900px) {
  .site-header .nav-menu { background: linear-gradient(180deg, rgba(10,14,34,.98), rgba(6,9,22,.98)); border-color: rgba(156,195,255,.2); }
  .site-header .nav-links a { color: #fff; }
  .site-header .nav-links a:hover, .site-header .nav-links a[aria-current="page"] { background: rgba(42,119,255,.18); }
  .site-header .nav-links a::before { color: #9cc3ff; }
  .site-header .nav-actions { border-top-color: rgba(156,195,255,.18); }
  .nav-login { border-color: rgba(156,195,255,.3); }
}

/* Corner brackets (injected by script.js as .hud) */
.hud { position: absolute; inset: -1px; z-index: 3; pointer-events: none; }
.hud i {
  position: absolute; width: 12px; height: 12px; border: 0 solid #5b9bff;
  filter: drop-shadow(0 0 4px rgba(91,155,255,.9));
  transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.hud i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
:is(.tile, .cta-card, .footer-cta, .hero-badge, .info-card, .plan, .guide, .country-card, .studio):hover > .hud i { width: 22px; height: 22px; border-color: #cfe2ff; }
.hero-badge .hud i { width: 7px; height: 7px; }
.site-header .nav > .hud i { width: 14px; height: 14px; }
/* On light sections the brackets use brand blue */
.section:not(.dark) .hud i { border-color: #2a77ff; filter: none; }

/* Buttons: angled corners */
.btn { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn-sm { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

/* Header stroke: clean gradient hairline (no rotating ring) */
.site-header .nav::before {
  animation: none; padding: 1px;
  background: linear-gradient(180deg, rgba(207,226,255,.55), rgba(91,155,255,.18) 60%, rgba(91,155,255,.35));
}
.site-header .nav { box-shadow: 0 18px 50px -20px rgba(0,0,0,.8), 0 0 40px -10px rgba(42,119,255,.35) !important; }

/* Hero badge v2: signal status bar */
.hero-badge { padding: 8px 14px 8px 12px; gap: 12px; color: #fff; text-decoration: none; background: rgba(8,12,30,.55); transition: background .3s, box-shadow .3s; }
.hero-badge:hover { text-decoration: none; background: rgba(20,40,100,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 30px -6px rgba(42,119,255,.9); }
.hero-badge::before { animation: none; padding: 1px; background: linear-gradient(180deg, rgba(207,226,255,.5), rgba(91,155,255,.2)); }
.hb-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.hb-signal i { width: 3px; background: #5b9bff; box-shadow: 0 0 6px rgba(91,155,255,.9); animation: hb-bars 2.4s ease-in-out infinite; }
.hb-signal i:nth-child(1) { height: 4px; } .hb-signal i:nth-child(2) { height: 7px; animation-delay: .15s; }
.hb-signal i:nth-child(3) { height: 10px; animation-delay: .3s; } .hb-signal i:nth-child(4) { height: 14px; animation-delay: .45s; }
@keyframes hb-bars { 0%, 100% { opacity: .35; } 30%, 70% { opacity: 1; } }
.hero-badge .hb-text { font-size: 14px; color: rgba(226,232,255,.75); }
.hb-rotor { position: relative; display: inline-grid; height: 1.4em; overflow: hidden; font: 600 14px var(--font); color: #fff; min-width: 9.2em; text-align: left; }
.hb-rotor span { grid-area: 1 / 1; line-height: 1.4em; opacity: 0; transform: translateY(100%); animation: hb-rot 10s cubic-bezier(.2,.8,.2,1) infinite; text-shadow: 0 0 12px rgba(156,195,255,.6); }
.hb-rotor span:nth-child(2) { animation-delay: 2.5s; } .hb-rotor span:nth-child(3) { animation-delay: 5s; } .hb-rotor span:nth-child(4) { animation-delay: 7.5s; }
@keyframes hb-rot { 0% { opacity: 0; transform: translateY(100%); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-100%); } }
.hb-sep { width: 1px; height: 16px; background: rgba(156,195,255,.3); }
.hb-go { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #9cc3ff; }
.hb-go b { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.hero-badge:hover .hb-go b { transform: translateX(4px); }
@media (max-width: 600px) { .hero-badge { flex-wrap: nowrap; gap: 9px; padding: 8px 10px; } .hb-sep, .hb-go { display: none; } .hb-rotor { min-width: 8.6em; } }
@media (prefers-reduced-motion: reduce) {
  .hb-signal i { animation: none; opacity: 1; }
  .hb-rotor span { animation: none; } .hb-rotor span:first-child { opacity: 1; transform: none; }
}
.hero-badge::before, .hero-badge > .hud { display: none; } .hero-badge { box-shadow: 0 10px 30px -12px rgba(42,119,255,.6); }
.hero-badge, .hero-badge:hover { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .hero-badge::after { display: none; }

/* No grid anywhere: smooth lit brand-blue bands */
.page-hero, .auth-side {
  animation: none;
  background-size: auto; background-repeat: no-repeat;
  background-image:
    radial-gradient(60% 80% at 85% 10%, rgba(156,195,255,.35), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(23,71,184,.6), transparent 70%),
    linear-gradient(150deg, #2a77ff 0%, #1f63e0 55%, #1747b8 100%);
}
.page-hero.ink, .auth-side.ink {
  background-image:
    radial-gradient(60% 80% at 85% 10%, rgba(42,119,255,.3), transparent 60%),
    linear-gradient(150deg, #181818, #0b0f1e);
}
.hero:not(.hero-orbit) { background-image: none; animation: none; }

/* Small phones: keep the feature rows inside the screen */
.feature-row > * { min-width: 0; }
@media (max-width: 420px) {
  .int-grid { gap: 6px; }
  .int-grid span { padding: 14px 4px; font-size: 12px; }
  .mock-kpis b { font-size: 1rem; }
}

/* Badge: green signal + rotor sized to the current country */
.hb-signal i { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.9); }
.hb-rotor { min-width: 0; width: auto; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.hb-rotor.js span { animation: none; opacity: 0; transform: translateY(100%); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.hb-rotor.js span.on { opacity: 1; transform: none; }
.hb-rotor.js span.out { opacity: 0; transform: translateY(-100%); }

/* Header edges only appear once the page is scrolled */
.site-header .nav::before, .site-header .nav::after, .site-header .nav > .hud { transition: opacity .4s ease; }
.site-header .nav { transition: height .35s cubic-bezier(.2,.8,.2,1), max-width .5s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .4s; }
.site-header:not(.scrolled) .nav::before,
.site-header:not(.scrolled) .nav::after,
.site-header:not(.scrolled) .nav > .hud { opacity: 0; }
.site-header:not(.scrolled) .nav { box-shadow: none !important; }

/* At the very top the header floats with no background; glass appears on scroll */
.site-header:not(.scrolled) .nav {
  background: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header:not(.scrolled):has(.nav-menu.open) .nav { background: rgba(8,12,30,.82) !important; }
.site-header .logo img { height: 32px; } @media (max-width: 900px) { .site-header .logo img { height: 28px; } }
.hb-rotor.js { justify-items: start; } .hb-rotor.js span { width: max-content; }

/* Font: Outfit for headings, Inter for paragraphs and body text (DM Mono stays for small labels) */
:root { --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Outfit", system-ui, sans-serif; }
body { font-size: 15.5px; letter-spacing: -.005em; }
h1, h2, h3, h4 { letter-spacing: -.035em; }
.hero-orbit h1 { letter-spacing: -.06em; font-weight: 700; }
.lede, .section-sub { font-weight: 300; }

/* Footer wordmark: typing dots inside the logo's chat bubble
   (positions match the dots in textezy-logo-white.svg, viewBox 6330 x 1688) */
.wm-dots { position: absolute; inset: 0; pointer-events: none; }
.wm-dots i {
  position: absolute; top: 33.57%; width: 1.554%; aspect-ratio: 1; border-radius: 50% !important;
  transform: translate(-50%, -50%); background: #fff; opacity: .2;
  animation: wm-typing 1.6s ease-in-out infinite;
}
.wm-dots i:nth-child(1) { left: 61.27%; }
.wm-dots i:nth-child(2) { left: 64.10%; animation-delay: .2s; }
.wm-dots i:nth-child(3) { left: 66.92%; animation-delay: .4s; }
@keyframes wm-typing {
  0%, 60%, 100% { opacity: .2; transform: translate(-50%, -50%); box-shadow: none; }
  30% { opacity: .95; transform: translate(-50%, -85%); box-shadow: 0 0 18px 4px rgba(156,195,255,.7); }
}
@media (prefers-reduced-motion: reduce) { .wm-dots i { animation: none; } }

/* Five-country grid + five country choices */
@media (min-width: 1081px) { .cards-5 { grid-template-columns: repeat(5, 1fr); } .cards-5 .country-card { padding: 22px; } .cards-5 .country-card .cc-photo { width: calc(100% + 44px); margin: -22px -22px 18px; } }
@media (min-width: 601px) and (max-width: 1080px) { .cards-5 { grid-template-columns: repeat(3, 1fr); } }
.check-grid { grid-template-columns: repeat(5, 1fr); }
.check-pill span { padding-left: 4px; padding-right: 4px; font-size: 13.5px; }
@media (max-width: 600px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.region-switch { flex-wrap: wrap; }

/* =====================================================================
   Auth pages (signup / login): galaxy stage + dark glass form
   ===================================================================== */
.auth-body { background: #03050c; }
.auth-stage {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; color: #fff;
  padding: 130px 24px 72px; display: flex; align-items: center;
  background-color: #03050c;
  background-image:
    radial-gradient(55% 50% at 20% 25%, rgba(23,71,184,.45), transparent 70%),
    radial-gradient(45% 45% at 85% 70%, rgba(42,119,255,.28), transparent 70%),
    radial-gradient(70% 60% at 60% 110%, rgba(10,26,74,.9), transparent 70%);
}
.auth-stage .hero-stars { z-index: -1; }
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }

/* Pitch column */
.auth-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #9cc3ff; }
.auth-pitch h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.055em; font-weight: 700; margin-bottom: 18px; }
.auth-pitch h1 .grad {
  background: linear-gradient(92deg, #fff 0%, #b9d4ff 30%, #5b9bff 62%, #2a77ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(79,155,255,.45));
}
.auth-lede { max-width: 500px; margin: 0 0 30px; font-size: 1.08rem; font-weight: 300; color: rgba(226,232,255,.78); }

.auth-demo {
  position: relative; max-width: 460px; padding: 16px; margin-bottom: 30px;
  background: rgba(10,16,44,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(156,195,255,.16), 0 30px 60px -30px rgba(0,0,0,.8);
}
.ad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: rgba(214,224,245,.75); }
.ad-dot { width: 7px; height: 7px; border-radius: 50% !important; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.ad-tag { margin-left: auto; padding: 3px 8px; background: rgba(255,255,255,.08); color: #9cc3ff; }
.ad-goal { padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.ad-msg { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; font-size: 13.5px; line-height: 1.45; background: linear-gradient(135deg, #2a77ff, #1a56d6); min-height: 84px; }
.ad-label { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.8); }
.ad-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ad-checks span { padding: 4px 9px; font: 500 11px var(--mono); color: #cfe2ff; background: rgba(255,255,255,.06); border: 1px solid rgba(156,195,255,.18); }

.auth-points { display: grid; gap: 14px; margin-bottom: 28px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.ap-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: linear-gradient(135deg, rgba(42,119,255,.55), rgba(42,119,255,.15)); box-shadow: inset 0 0 0 1px rgba(156,195,255,.3); }
.ap-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-points b { display: block; font-weight: 600; font-size: 15px; }
.auth-points small { color: rgba(214,224,245,.65); font-size: 13.5px; }
.auth-regions { display: flex; flex-wrap: wrap; gap: 6px; }
.auth-regions li { padding: 5px 10px; font: 500 11px var(--mono); letter-spacing: .08em; color: #cfe2ff; background: rgba(255,255,255,.05); border: 1px solid rgba(156,195,255,.18); }

/* Form panel */
.auth-panel {
  position: relative; padding: 36px 34px 26px; color: #fff;
  background: linear-gradient(160deg, rgba(20,30,70,.72), rgba(8,12,30,.82));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(156,195,255,.18), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(42,119,255,.45);
}
.auth-panel::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #9cc3ff, transparent); box-shadow: 0 0 12px rgba(91,155,255,.9); }
.auth-panel-head h2 { font-size: 1.9rem; letter-spacing: -.04em; margin-bottom: 6px; color: #fff; }
.auth-panel-head p { color: rgba(214,224,245,.7); margin-bottom: 26px; }
.auth-panel a { color: #9cc3ff; font-weight: 600; }
.auth-panel .field label, .auth-panel .field legend { color: rgba(226,232,255,.88); font-size: 13.5px; }
.auth-panel .field .hint { color: rgba(214,224,245,.5); }
.auth-panel .field input {
  color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(156,195,255,.2); padding: 13px 14px;
}
.auth-panel .field input::placeholder { color: rgba(214,224,245,.35); }
.auth-panel .field input:focus { border-color: #5b9bff; background: rgba(42,119,255,.1); box-shadow: 0 0 0 3px rgba(42,119,255,.25), 0 0 24px -6px rgba(42,119,255,.8); }
.auth-panel .field [aria-invalid="true"] { border-color: #f87171; }
.auth-panel .pw-toggle { background: rgba(255,255,255,.08); color: #cfe2ff; }
.auth-panel .check-pill span { border: 1px solid rgba(156,195,255,.2); background: rgba(255,255,255,.04); color: rgba(226,232,255,.85); }
.auth-panel .check-pill input:checked + span { border-color: #5b9bff; background: rgba(42,119,255,.3); color: #fff; box-shadow: 0 0 18px -6px rgba(42,119,255,.9); }
.auth-panel .consent { color: rgba(214,224,245,.7); }
.auth-panel .consent input { accent-color: #2a77ff; }
.auth-panel .label-row a { font-size: 13px; }
.auth-submit {
  margin-top: 4px; color: #fff; background: linear-gradient(135deg, #2a77ff, #1a56d6);
  box-shadow: 0 14px 34px -12px rgba(42,119,255,.95);
}
.auth-submit:hover { background: linear-gradient(135deg, #3d86ff, #1f63e0); box-shadow: 0 18px 40px -10px rgba(42,119,255,1); }
.auth-submit:hover .nav-arrow { transform: translateX(4px); }
.auth-panel .form-status.ok { color: #4ade80; }
.auth-panel .form-status.error { color: #f87171; }
.auth-fine { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(156,195,255,.14); font-size: 12.5px; color: rgba(214,224,245,.5); text-align: center; }

/* Password strength meter */
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter i { height: 3px; background: rgba(255,255,255,.1); transition: background .3s; }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: #f87171; }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: #fbbf24; }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #5b9bff; }
.pw-meter[data-score="4"] i { background: #22c55e; }

@media (max-width: 960px) {
  .auth-wrap { grid-template-columns: 1fr; gap: 40px; }
  .auth-stage { padding: 110px 16px 48px; align-items: flex-start; }
  .auth-panel { order: -1; }
  .auth-demo, .auth-points { display: none; }
}
@media (max-width: 600px) {
  .auth-panel { padding: 28px 20px 22px; }
  .auth-pitch h1 { font-size: 2.2rem; }
}

/* =====================================================================
   Auth pages v3: clean light split
   ===================================================================== */
.auth-light { background: #fff; }
.split-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }

/* Brand panel */
.sa-brand {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 56px; color: #fff;
  background: linear-gradient(155deg, #2a77ff 0%, #1f63e0 45%, #1747b8 100%);
}
.sa-brand::before, .sa-brand::after { content: ""; position: absolute; z-index: -1; border-radius: 50% !important; pointer-events: none; filter: blur(10px); }
.sa-brand::before { width: 520px; height: 520px; right: -180px; top: -160px; background: radial-gradient(circle, rgba(156,195,255,.55), transparent 65%); }
.sa-brand::after { width: 460px; height: 460px; left: -160px; bottom: -180px; background: radial-gradient(circle, rgba(10,26,90,.55), transparent 65%); }
.sa-logo img { height: 34px; width: auto; }
.sa-copy { max-width: 460px; }
.sa-copy h1 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 700; margin-bottom: 16px; }
.sa-copy > p { font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,.88); margin-bottom: 26px; }
.sa-checks { display: grid; gap: 12px; }
.sa-checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.sa-checks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; background: #fff; color: #1a56d6; font-size: 12px; font-weight: 800; }
.sa-regions { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-regions li { padding: 5px 10px; font: 500 11px var(--mono); letter-spacing: .08em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }

/* Form side */
.sa-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 32px 40px; background: #fff; color: var(--ink); }
.sa-back { position: absolute; top: 28px; right: 32px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sa-back:hover { color: var(--blue); text-decoration: none; }
.sa-form { width: 100%; max-width: 440px; }
.sa-form h2 { font-size: 2rem; letter-spacing: -.045em; margin-bottom: 6px; }
.sa-sub { color: var(--muted); margin-bottom: 28px; }
.sa-sub a { font-weight: 600; }
.sa-form .field label, .sa-form .field legend { font-size: 13.5px; }
.sa-form .field input { padding: 13px 14px; background: #fff; border: 1.5px solid #dde1ea; }
.sa-form .field input::placeholder { color: #a3a9b6; }
.sa-form .field input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42,119,255,.14); }
.sa-form .check-pill span { border: 1.5px solid #dde1ea; font-size: 13.5px; }
.sa-form .check-pill input:checked + span { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.sa-form .pw-toggle { background: var(--bg-alt); color: var(--ink); }
.sa-form .btn-primary .nav-arrow { transition: transform .3s; }
.sa-form .btn-primary:hover .nav-arrow { transform: translateX(4px); }
.sa-form .pw-meter i { background: #e6e8ee; }
.sa-legal { margin: 36px 0 0; font-size: 13px; color: var(--muted); }
.sa-legal a { color: var(--muted); }
.sa-legal a:hover { color: var(--blue); }

@media (max-width: 900px) {
  .split-auth { grid-template-columns: 1fr; }
  .sa-brand { padding: 28px 22px 30px; gap: 24px; }
  .sa-copy h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .sa-copy > p { margin-bottom: 0; font-size: .98rem; }
  .sa-checks, .sa-regions { display: none; }
  .sa-main { padding: 36px 20px 32px; justify-content: flex-start; }
  .sa-back { position: static; align-self: flex-end; margin-bottom: 18px; }
}
@media (max-width: 600px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   Auth brand panel: motion + creative elements
   ===================================================================== */
/* Drifting glows */
.sa-brand::before { animation: sa-glow1 14s ease-in-out infinite alternate; }
.sa-brand::after { animation: sa-glow2 18s ease-in-out infinite alternate; }
@keyframes sa-glow1 { to { transform: translate(-120px, 140px) scale(1.15); } }
@keyframes sa-glow2 { to { transform: translate(140px, -120px) scale(.9); } }

.sa-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Floating glass chat bubbles */
.sa-bub {
  position: absolute; bottom: -60px; display: inline-flex; gap: 4px; padding: 10px 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: sa-float linear infinite; opacity: 0;
}
.sa-bub i { width: 5px; height: 5px; border-radius: 50% !important; background: rgba(255,255,255,.85); animation: blink 1.2s infinite; }
.sa-bub i:nth-child(2) { animation-delay: .15s; } .sa-bub i:nth-child(3) { animation-delay: .3s; }
.sa-bub.b1 { left: 8%; animation-duration: 16s; }
.sa-bub.b2 { left: 70%; animation-duration: 20s; animation-delay: -6s; transform: scale(.8); }
.sa-bub.b3 { left: 38%; animation-duration: 18s; animation-delay: -11s; }
.sa-bub.b4 { left: 84%; animation-duration: 22s; animation-delay: -3s; }
.sa-bub.b5 { left: 55%; animation-duration: 25s; animation-delay: -16s; }
@keyframes sa-float {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .9; }
  85% { opacity: .5; }
  100% { transform: translateY(-115vh); opacity: 0; }
}

/* Orbit rings in the corner with a travelling dot */
.sa-rings { position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; }
.sa-rings span { position: absolute; inset: 0; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.18); }
.sa-rings span:nth-child(2) { inset: 60px; border-color: rgba(255,255,255,.14); }
.sa-rings span:nth-child(3) { inset: 120px; border-color: rgba(255,255,255,.1); }
.sa-rings b { position: absolute; inset: 0; animation: spin-mini 12s linear infinite; }
.sa-rings b::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% !important;
  background: #fff; box-shadow: 0 0 14px 4px rgba(207,226,255,.9);
}

/* Entrance */
.sa-logo, .sa-copy h1, .sa-copy > p, .sa-checks li, .sa-toasts, .sa-regions {
  animation: sa-rise .8s cubic-bezier(.2,.8,.2,1) backwards;
}
.sa-logo { animation-delay: .05s; }
.sa-copy h1 { animation-delay: .15s; }
.sa-copy > p { animation-delay: .28s; }
.sa-checks li:nth-child(1) { animation-delay: .4s; }
.sa-checks li:nth-child(2) { animation-delay: .5s; }
.sa-checks li:nth-child(3) { animation-delay: .6s; }
.sa-toasts { animation-delay: .75s; }
.sa-regions { animation-delay: .9s; }
@keyframes sa-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
.sa-checks li::before { animation: sa-pop .5s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: inherit; }
@keyframes sa-pop { from { transform: scale(0); } }

/* Live notification card */
.sa-toasts { position: relative; height: 74px; margin-top: 30px; max-width: 400px; }
.sa-toast {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(6,20,80,.6);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.sa-toast.on { opacity: 1; transform: none; }
.sa-toast.out { opacity: 0; transform: translateY(-14px) scale(.97); }
.st-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; background: #fff; color: #1a56d6; font-size: 16px; }
.sa-toast b { display: block; font-size: 14px; }
.sa-toast small { display: block; font-size: 12.5px; color: rgba(255,255,255,.82); }
.st-time { margin-left: auto; align-self: flex-start; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }

/* Market chips light up in turn */
.sa-regions li { animation: sa-chip 7.5s ease-in-out infinite; }
.sa-regions li:nth-child(2) { animation-delay: 1.5s; } .sa-regions li:nth-child(3) { animation-delay: 3s; }
.sa-regions li:nth-child(4) { animation-delay: 4.5s; } .sa-regions li:nth-child(5) { animation-delay: 6s; }
@keyframes sa-chip { 0%, 25%, 100% { background: rgba(255,255,255,.14); } 8%, 16% { background: rgba(255,255,255,.4); box-shadow: 0 0 16px rgba(255,255,255,.5); } }

/* Right side: form entrance */
.sa-form { animation: sa-rise .8s cubic-bezier(.2,.8,.2,1) .2s backwards; }

@media (max-width: 900px) { .sa-decor, .sa-toasts { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sa-brand::before, .sa-brand::after, .sa-bub, .sa-bub i, .sa-rings b, .sa-regions li,
  .sa-logo, .sa-copy h1, .sa-copy > p, .sa-checks li, .sa-checks li::before, .sa-toasts, .sa-regions, .sa-form { animation: none; }
  .sa-bub { display: none; }
}


/* =====================================================================
   Signup stat ring + one-screen fit for login/signup
   ===================================================================== */
.su-ring { position: relative; width: 168px; height: 168px; margin-bottom: 26px; animation: sa-rise .8s cubic-bezier(.2,.8,.2,1) .1s backwards; }
.su-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.su-ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: rgba(255,255,255,.18); }
.ring-fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--o, 0); filter: drop-shadow(0 0 8px rgba(255,255,255,.75)); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-time { font: 700 2.5rem/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ring-label { margin-top: 6px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.8); }
.su-ring.live { animation: ring-pop .5s cubic-bezier(.3,1.6,.5,1); }
.su-ring.live .ring-fg { filter: drop-shadow(0 0 16px #fff); }
@keyframes ring-pop { 50% { transform: scale(1.06); } }
.su-stat h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); }

/* Fit on one screen */
.split-auth { height: 100vh; height: 100dvh; min-height: 0; }
.sa-brand { padding: 36px 52px; min-height: 0; }
.sa-main { padding: 28px 32px; min-height: 0; overflow-y: auto; }
.sa-form h2 { font-size: 1.75rem; margin-bottom: 4px; }
.sa-sub { margin-bottom: 18px; }
.sa-form .form { gap: 13px; }
.sa-form .field label, .sa-form .field legend { margin-bottom: 5px; }
.sa-form .field input { padding: 11px 12px; font-size: 15px; }
.sa-form .check-pill span { padding: 9px 4px; }
.sa-form .consent { font-size: 13px; }
.sa-form .btn-lg { padding: 14px 20px; }
.sa-form .pw-meter { margin-top: 6px; }
.sa-form .form-status { min-height: 0; }
.sa-legal { margin-top: 16px; }
.sa-copy h1 { margin-bottom: 12px; }
.sa-copy > p { margin-bottom: 20px; }

@media (max-height: 780px) and (min-width: 901px) {
  .sa-brand { padding: 28px 48px; }
  .su-ring { width: 132px; height: 132px; margin-bottom: 18px; }
  .ring-time { font-size: 2rem; }
  .sa-copy h1, .su-stat h1 { font-size: 2.3rem; }
  .sa-checks { gap: 8px; }
  .sa-toasts { margin-top: 18px; }
  .sa-form h2 { font-size: 1.55rem; }
  .sa-sub { margin-bottom: 12px; }
  .sa-form .form { gap: 10px; }
  .sa-form .field input { padding: 9px 12px; }
  .sa-form .check-pill span { padding: 7px 4px; }
  .sa-form .btn-lg { padding: 12px 20px; }
  .sa-legal { margin-top: 10px; }
}

/* Phones: slim logo strip + compact form */
@media (max-width: 900px) {
  .split-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sa-brand { padding: 14px 20px; gap: 0; }
  .sa-brand .sa-copy, .sa-brand .sa-regions, .sa-decor { display: none; }
  .sa-logo img { height: 26px; }
  .sa-back { display: none; }
  .sa-main { padding: 20px 18px; justify-content: flex-start; }
  .sa-form h2 { font-size: 1.5rem; }
  .sa-sub { margin-bottom: 14px; font-size: 14px; }
  .sa-form .form { gap: 10px; }
  .sa-form .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sa-form .field input { padding: 10px 11px; font-size: 15px; }
  .sa-form .check-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .sa-form .check-pill span { padding: 8px 2px; font-size: 12px; }
  .sa-form .consent { font-size: 12px; }
  .sa-legal { margin-top: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .su-ring, .su-ring.live { animation: none; } }
.plans-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); text-align: center; } .plans-note a { font-weight: 600; }

/* Footer bottom bar */
.site-footer .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px 0; font-size: 13.5px; }
.fb-copy { display: inline-flex; align-items: center; gap: 10px; color: rgba(214,224,245,.65); }
.fb-copy img { height: 20px; width: auto; filter: drop-shadow(0 0 8px rgba(42,119,255,.6)); }
.fb-tag { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #9cc3ff; }
.fb-tag i { width: 6px; height: 6px; border-radius: 50% !important; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: hb-pulse 2s ease-out infinite; }
.site-footer .footer-bottom .fb-top { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: rgba(226,232,255,.8); font-weight: 500; }
.fb-top b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(156,195,255,.3); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s; }
.site-footer .footer-bottom .fb-top:hover { color: #fff; text-decoration: none; }
.fb-top:hover b { transform: translateY(-3px); background: rgba(42,119,255,.3); }
@media (max-width: 700px) {
  .site-footer .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .site-footer .footer-bottom .fb-top { justify-self: center; }
}

/* Hero orbit keeps its original rounded message bubbles (exempt from square corners) */
body:not(.app-body) .orbit-scene .orbit-msg { border-radius: 18px 18px 18px 6px !important; }

/* Final CTA: no card box, content floats on the blue */
.cta-card { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 0; padding-bottom: 0; }
.cta-card::before, .cta-card > .hud { display: none; }
.cta-icon { margin: 0 auto 26px; }

/* Final CTA: live message stream (replaces the pulsing rings) */
.final-cta .cta-rings { display: none; }
.cta-stream {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-around; padding: 34px 0;
  -webkit-mask-image: radial-gradient(42% 60% at 50% 50%, transparent 35%, #000 75%);
  mask-image: radial-gradient(42% 60% at 50% 50%, transparent 35%, #000 75%);
}
.cs-lane { display: flex; width: max-content; gap: 18px; animation: cs-left var(--dur, 60s) linear infinite; }
.cs-lane.rev { animation-name: cs-right; }
@keyframes cs-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cs-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cs-msg {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; white-space: nowrap;
  font-size: 13px; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body:not(.app-body) .cs-msg { border-radius: 16px 16px 16px 4px !important; }
.cs-msg b { padding: 2px 6px; font: 500 10px var(--mono); letter-spacing: .08em; color: #1a56d6; background: #fff; }
body:not(.app-body) .cs-msg b { border-radius: 6px !important; }
.cs-msg i { font-style: normal; font-size: 11px; letter-spacing: -1px; color: rgba(255,255,255,.55); animation: cs-tick 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cs-tick { 0%, 40% { color: rgba(255,255,255,.5); } 55%, 100% { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,.7); } }
@media (max-width: 600px) { .cta-stream { -webkit-mask-image: linear-gradient(transparent, #000 15%, transparent 35%, transparent 70%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, transparent 35%, transparent 70%, #000 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cs-lane, .cs-msg i { animation: none; } }
.cta-stream {
  opacity: .8;
  -webkit-mask-image: radial-gradient(58% 78% at 50% 50%, transparent 52%, rgba(0,0,0,.35) 66%, #000 86%);
  mask-image: radial-gradient(58% 78% at 50% 50%, transparent 52%, rgba(0,0,0,.35) 66%, #000 86%);
}

/* Final CTA trust line: clean inline ticks, no boxes */
.cta-trust { gap: 0; margin-top: 24px; }
.cta-trust li { gap: 8px; padding: 0 18px; background: none; border: 0; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.92); }
.cta-trust li + li { border-left: 1px solid rgba(255,255,255,.3); }
.cta-trust li::before {
  width: 18px; height: 18px; font-size: 10px; background: #22c55e; color: #fff;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2), 0 0 12px rgba(34,197,94,.6);
}
body:not(.app-body) .cta-trust li::before { border-radius: 50% !important; }
@media (max-width: 600px) {
  .cta-trust { flex-direction: column; align-items: center; gap: 10px; }
  .cta-trust li { padding: 0; }
  .cta-trust li + li { border-left: 0; }
}

/* Final CTA icon: mini AI core orb */
.cta-icon {
  width: 84px; height: 84px; margin: 0 auto 28px;
  background: radial-gradient(circle at 34% 28%, #eaf2ff 0%, #9cc3ff 14%, #2a77ff 45%, #1747b8 75%, #0a1a4a 100%);
  box-shadow: inset -8px -12px 22px rgba(4,6,30,.55), inset 5px 6px 14px rgba(255,255,255,.35), 0 0 0 8px rgba(255,255,255,.08), 0 0 40px 6px rgba(156,195,255,.55), 0 18px 40px -12px rgba(6,20,80,.7);
  animation: cta-orb-float 5s ease-in-out infinite;
}
body:not(.app-body) .cta-icon { border-radius: 50% !important; }
.cta-bot { width: 30px; }
@keyframes cta-orb-float { 50% { transform: translateY(-8px); box-shadow: inset -8px -12px 22px rgba(4,6,30,.55), inset 5px 6px 14px rgba(255,255,255,.35), 0 0 0 12px rgba(255,255,255,.06), 0 0 56px 10px rgba(156,195,255,.65), 0 26px 44px -12px rgba(6,20,80,.6); } }
@media (prefers-reduced-motion: reduce) { .cta-icon { animation: none; } }

/* Hero headline: living gradient on "that thinks." + light scan on "SMS marketing" */
.hero-orbit h1 .grad {
  background-image: linear-gradient(92deg, #ffffff 0%, #b9d4ff 18%, #5b9bff 36%, #2a77ff 50%, #5b9bff 64%, #b9d4ff 82%, #ffffff 100%);
  background-size: 200% 100%;
  animation: h1-flow 6s ease-in-out infinite, h1-glow 4s ease-in-out infinite;
}
@keyframes h1-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes h1-glow { 50% { filter: blur(0) drop-shadow(0 0 40px rgba(79,155,255,.75)); } }
.motion .hero-orbit h1.go .no-split { animation: h1-flow 6s ease-in-out 1.6s infinite, h1-glow 4s ease-in-out 1.6s infinite; }

.hero-orbit h1 .w {
  background: linear-gradient(100deg, #fff 42%, #cfe2ff 48%, #9cc3ff 50%, #cfe2ff 52%, #fff 58%) 150% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: h1-scan 7s ease-in-out 2s infinite;
}
@keyframes h1-scan { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }
.hero-orbit h1 .w:nth-child(2) { animation-delay: 2.25s; }
@media (prefers-reduced-motion: reduce) { .hero-orbit h1 .grad, .hero-orbit h1 .w { animation: none; } }
.hero-orbit h1 .w {
  background:
    linear-gradient(100deg, transparent 42%, #cfe2ff 48%, #9cc3ff 50%, #cfe2ff 52%, transparent 58%) 150% 0 / 250% 100% no-repeat,
    linear-gradient(#fff, #fff);
  -webkit-background-clip: text; background-clip: text;
}
@keyframes h1-scan { 0%, 55% { background-position: 150% 0, 0 0; } 85%, 100% { background-position: -50% 0, 0 0; } }

/* Hero headline: rotating keyword line */
.hero-orbit h1 .rot-h1 { display: inline-grid; justify-items: center; background: none; animation: h1-glow 4s ease-in-out infinite; }
.motion .hero-orbit h1.go .rot-h1 { animation: h1-glow 4s ease-in-out 1.6s infinite; }
.rot-h1 > span {
  grid-area: 1 / 1; white-space: nowrap; padding-bottom: .07em;
  background-image: linear-gradient(92deg, #ffffff 0%, #b9d4ff 18%, #5b9bff 36%, #2a77ff 50%, #5b9bff 64%, #b9d4ff 82%, #ffffff 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: h1-flow 6s ease-in-out infinite;
  opacity: 0; transform: translateY(.35em); filter: blur(10px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.rot-h1 > span.on { opacity: 1; transform: none; filter: none; }
.rot-h1 > span.out { opacity: 0; transform: translateY(-.35em); filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { .rot-h1 > span { transition: none; animation: none; } }

/* Stats tiles: one column on phones, numbers sized to fit */
@media (max-width: 600px) {
  .line-grid.stats { grid-template-columns: 1fr; }
  .stat-tile { min-height: 0; }
  .stat-tile .num { font-size: 2.6rem; }
}
.stat-tile { min-width: 0; }
.stat-tile .num { overflow-wrap: anywhere; }

/* Hero keyword: AI "decode" effect */
.rot-word { position: relative; }
.rot-word.decoding::after {
  content: ""; position: absolute; right: -.12em; top: .12em; bottom: .16em; width: .07em;
  background: #9cc3ff; -webkit-background-clip: border-box; background-clip: border-box;
  box-shadow: 0 0 14px rgba(156,195,255,.9); animation: caret 0.7s steps(1) infinite;
}
.rot-word .sc { color: #9cc3ff; -webkit-text-fill-color: #9cc3ff; text-shadow: 0 0 18px rgba(156,195,255,.8); opacity: .85; }
.rot-word .lk { animation: lock-in .45s ease-out; }
@keyframes lock-in { from { text-shadow: 0 0 22px rgba(255,255,255,.95); } }

/* Gradient/scan text: room for glyph overhang so edge letters aren't clipped */
.hero-orbit h1 .w, .rot-h1 > span { padding: .12em .1em .26em; margin: -.12em -.1em -.26em; }

/* Two-plan pricing (early access: Pay as you go + Custom) */
.plans.plans-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
@media (max-width: 640px) { .plans.plans-2 { grid-template-columns: 1fr; } }
.sa-form .field select { height: 40px; padding: 0 12px; font-size: 15px; background-color: #fff; border: 1.5px solid #dde1ea; }
.sa-form .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42,119,255,.14); }

/* Competitor comparison cards */
.info-card.cmp p + p { margin-top: 10px; }
.info-card.cmp .more { margin-top: auto; padding-top: 14px; }

/* Keep the rotating keyword on its own line (Outfit is narrow enough to fit both on one) */
.hero-orbit h1 .rot-h1 { display: grid; }
.sa-form .field textarea { min-height: 0; padding: 9px 12px; font-size: 15px; background: #fff; border: 1.5px solid #dde1ea; resize: vertical; }
.sa-form .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42,119,255,.14); }

/* Hero background v3: one clean, symmetric light setup in brand blue.
   Glows are pinned in px to the headline and the AI core (the hero is very tall,
   so percentage positions drifted into the tiles). */
.hero-orbit {
  background-color: #040815;
  background-image:
    radial-gradient(1100px 520px at 50% -140px, rgba(42,119,255,.55), rgba(42,119,255,.12) 55%, transparent 75%),
    radial-gradient(760px 460px at 50% 850px, rgba(42,119,255,.40), rgba(23,71,184,.12) 55%, transparent 75%),
    radial-gradient(620px 520px at -6% 520px, rgba(23,71,184,.20), transparent 70%),
    radial-gradient(620px 520px at 106% 520px, rgba(23,71,184,.20), transparent 70%),
    linear-gradient(180deg, #0a1638 0, #050b1e 640px, #040815 1200px, #03060f 100%);
  background-size: auto;
}
.hero-orbit::after { background: none; }
.hero-orbit .aurora { display: none; }
@media (max-width: 720px) {
  .hero-orbit {
    background-image:
      radial-gradient(560px 380px at 50% -100px, rgba(42,119,255,.55), rgba(42,119,255,.12) 55%, transparent 75%),
      radial-gradient(420px 320px at 50% 760px, rgba(42,119,255,.38), transparent 75%),
      linear-gradient(180deg, #0a1638 0, #050b1e 560px, #040815 1100px, #03060f 100%);
  }
}

/* =====================================================================
   Interactive product demo (homepage "See it work")
   ===================================================================== */
.demo-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.demo-head .section-sub { margin-inline: auto; }
.demo-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.dg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font: 500 15px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s, background .2s; }
.dg span { font-size: 16px; }
.dg:hover { border-color: var(--blue); }
.dg.on { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 10px 28px -10px rgba(42,119,255,.8); }
.dg:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.demo-stage { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: center; }

/* App window */
.dw { background: #0b1022; color: #e8eefc; border: 1px solid #1b2547; box-shadow: 0 40px 80px -40px rgba(10,30,90,.55), 0 0 0 6px rgba(42,119,255,.06); overflow: hidden; }
.dw-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0e1530; border-bottom: 1px solid #1b2547; }
.dw-bar > i { width: 10px; height: 10px; background: #26325c; }
.dw-url { margin-left: 10px; padding: 3px 10px; font: 500 11.5px var(--mono); color: #8d9bc4; background: #0b1022; border: 1px solid #1b2547; }
.dw-replay { margin-left: auto; padding: 4px 10px; font: 500 12px var(--font); color: #9cc3ff; background: transparent; border: 1px solid #26325c; cursor: pointer; }
.dw-replay:hover { color: #fff; border-color: var(--blue); }
.dw-body { display: grid; grid-template-columns: 54px 1fr; min-height: 470px; }
.dw-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; background: #0a0f20; border-right: 1px solid #1b2547; }
.dw-side b { width: 24px; height: 24px; background: var(--blue); margin-bottom: 8px; }
.dw-side span { width: 22px; height: 22px; background: #1a2448; }
.dw-side span.on { background: #2a3a72; box-shadow: inset 2px 0 0 var(--blue); }
.dw-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dw-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dw-top small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6f7ca6; }
.dw-title { margin: 2px 0 0; font: 600 1.15rem var(--display); color: #fff; letter-spacing: -.01em; }
.dw-flag { padding: 4px 8px; font: 500 11px var(--mono); color: #cfe2ff; background: #16214a; border: 1px solid #26325c; }
.dw-k { display: block; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6f7ca6; }
.dw-goal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #10183a; border: 1px solid #26325c; min-height: 46px; }
.dw-goal .dw-k { color: #9cc3ff; flex: none; }
.dw-goal-text { font-size: 15px; color: #fff; }
.dw-caret { width: 2px; height: 18px; background: #9cc3ff; animation: dw-blink 1s steps(1) infinite; }
@keyframes dw-blink { 50% { opacity: 0; } }
.dw-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.dw-card { padding: 12px 14px; background: #10183a; border: 1px solid #1f2b55; }
.dw-col { display: flex; flex-direction: column; gap: 10px; }
.dw-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dw-ai { font: 500 11px var(--mono); color: #9cc3ff; }
.dw-msg { display: flex; flex-direction: column; min-height: 196px; }
.dw-msg-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #e8eefc; white-space: pre-wrap; }
.dw-msg-text .var { color: #9cc3ff; background: rgba(42,119,255,.18); padding: 0 3px; }
.dw-msg-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); color: #6f7ca6; }
.dw-ab { display: flex; gap: 4px; }
.dw-ab b { width: 20px; height: 20px; display: grid; place-items: center; font-size: 10px; color: #cfe2ff; background: #1a2448; }
.dw-ab b:first-child { background: var(--blue); color: #fff; }
.dw-writing { display: none; gap: 5px; padding: 6px 0; }
.dw-writing i { width: 7px; height: 7px; background: #9cc3ff; animation: dw-dot 1s ease-in-out infinite; }
.dw-writing i:nth-child(2) { animation-delay: .15s; } .dw-writing i:nth-child(3) { animation-delay: .3s; }
@keyframes dw-dot { 50% { opacity: .25; transform: translateY(-3px); } }
.dw-msg.writing .dw-writing { display: flex; }
.dw-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; }
.dw-row b { display: block; margin-top: 2px; font-weight: 500; font-size: 13.5px; color: #fff; }
.dw-row strong { font: 600 1.25rem var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.dw-ico { font-size: 16px; }
.dw-checks ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dw-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfd8f2; opacity: .35; transition: opacity .3s; }
.dw-checks li::before { content: ""; width: 14px; height: 14px; flex: none; border: 1.5px solid #3a4a80; transition: background .3s, border-color .3s; }
.dw-checks li.ok { opacity: 1; }
.dw-checks li.ok::before { background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #22c55e; }
.dw-send { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #10183a; border: 1px solid #1f2b55; }
.dw-send b { display: block; font: 600 1.1rem var(--display); color: #fff; margin-top: 2px; }
.dw-send-btn { padding: 9px 14px; font-weight: 600; font-size: 13.5px; color: #fff; background: var(--blue); white-space: nowrap; transition: transform .15s, box-shadow .3s; }
.dw-send.go .dw-send-btn { transform: scale(.94); box-shadow: 0 0 0 6px rgba(42,119,255,.3); }
.dw-send.sent .dw-send-btn { background: #22c55e; }
.dw-results { padding: 12px 14px; background: linear-gradient(90deg, rgba(42,119,255,.16), rgba(42,119,255,.04)); border: 1px solid #26325c; }
.dw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.dw-stats div { font-size: 12px; color: #8d9bc4; }
.dw-stats b { display: block; font: 600 1.35rem var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.dw-insight { margin: 10px 0 0; font-size: 13px; color: #cfe2ff; }
/* steps reveal */
.dw [data-step] { opacity: .18; transform: translateY(4px); transition: opacity .45s, transform .45s; }
.dw [data-step].in { opacity: 1; transform: none; }

/* Phone */
.dp { position: relative; width: 270px; height: 540px; padding: 12px; background: #0b0f1c; border: 1px solid #222a44; box-shadow: 0 40px 70px -30px rgba(10,30,90,.55), inset 0 0 0 2px #1a2036; }
.dp-notch { position: absolute; top: 12px; left: 50%; width: 90px; height: 22px; transform: translateX(-50%); background: #0b0f1c; z-index: 2; }
.dp-screen { position: relative; height: 100%; overflow: hidden; background: #f4f6fb; display: flex; flex-direction: column; }
.dp-head { padding: 40px 14px 12px; text-align: center; background: #fff; border-bottom: 1px solid #e6e9f2; }
.dp-head b { display: block; font: 600 14px var(--font); color: var(--ink); }
.dp-head small { font-size: 11px; color: #8a90a2; }
.dp-thread { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.dp-bubble, .dp-reply { max-width: 86%; padding: 10px 12px; font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .4s cubic-bezier(.3,1.4,.5,1); }
.dp-bubble { align-self: flex-start; background: #e4e7ef; color: #1b1f2b; }
.dp-reply { align-self: flex-end; background: var(--blue); color: #fff; }
.dp-bubble.in, .dp-reply.in { opacity: 1; transform: none; }
.dp-toast { position: absolute; top: 8px; left: 8px; right: 8px; padding: 10px 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); font-size: 12px; color: #1b1f2b; transform: translateY(-120%); transition: transform .45s cubic-bezier(.3,1.3,.5,1); z-index: 3; }
.dp-toast b { display: block; font-size: 12.5px; }
.dp-toast span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4c5263; }
.dp-toast.in { transform: none; }

/* Round shapes are part of the phone metaphor */
body:not(.app-body) .dp { border-radius: 38px !important; }
body:not(.app-body) .dp-screen { border-radius: 28px !important; }
body:not(.app-body) .dp-notch { border-radius: 0 0 14px 14px !important; }
body:not(.app-body) .dp-bubble { border-radius: 18px 18px 18px 6px !important; }
body:not(.app-body) .dp-reply { border-radius: 18px 18px 6px 18px !important; }
body:not(.app-body) .dp-toast { border-radius: 14px !important; }
body:not(.app-body) .dw-bar > i { border-radius: 50% !important; }

/* Step captions under the demo */
.demo-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.demo-steps li { position: relative; padding: 14px 16px 14px; font-weight: 500; color: var(--muted); border-top: 2px solid var(--line); transition: color .3s, border-color .3s; }
.demo-steps li b { margin-right: 8px; font: 500 12px var(--mono); color: var(--blue); }
.demo-steps li.on { color: var(--ink); border-color: var(--blue); }

@media (max-width: 1000px) {
  .demo-stage { grid-template-columns: 1fr; justify-items: center; }
  .dw { width: 100%; }
}
@media (max-width: 720px) {
  .dw-body { grid-template-columns: 1fr; min-height: 0; }
  .dw-side { display: none; }
  .dw-main { padding: 16px 14px; }
  .dw-grid { grid-template-columns: 1fr; }
  .dw-msg { min-height: 150px; }
  .dw-url { display: none; }
  .demo-steps { grid-template-columns: 1fr; gap: 0; }
  .dg { font-size: 14px; padding: 9px 12px; }
  .dp { width: 250px; height: 480px; }
}
.dw-variant { margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #9fb0dc; background: rgba(42,119,255,.08); border-left: 2px solid #3a5bb0; }
.dw-variant:empty { display: none; }

/* Hero background v4: mesh gradient (black → royal blue → sky cyan), like a
   soft aurora. Anchored in px to the headline and orbit area, then fading to
   deep navy behind the feature cards. */
.hero-orbit {
  background-color: #010309;
  background-image:
    linear-gradient(180deg, rgba(4,8,21,0) 0, rgba(4,8,21,0) 1250px, #040815 1700px),
    radial-gradient(1100px 600px at 84% 940px, #52c6fa 0, #52c6fa 30%, rgba(82,198,250,.7) 52%, rgba(82,198,250,.2) 70%, transparent 82%),
    radial-gradient(760px 420px at 40% 1080px, rgba(82,198,250,.75), transparent 75%),
    radial-gradient(780px 360px at 90% 560px, rgba(35,80,224,.95), rgba(35,80,224,.45) 50%, transparent 78%),
    radial-gradient(380px 760px at 14% 640px, rgba(35,80,224,.95), rgba(26,63,184,.5) 50%, transparent 78%),
    radial-gradient(520px 300px at 6% 120px, rgba(26,63,184,.45), transparent 75%),
    linear-gradient(180deg, #010309 0, #02050f 100%);
  background-size: auto;
}
@media (max-width: 720px) {
  .hero-orbit {
    background-image:
      linear-gradient(180deg, rgba(4,8,21,0) 0, rgba(4,8,21,0) 1150px, #040815 1550px),
      radial-gradient(520px 440px at 88% 820px, #52c6fa 0, #52c6fa 25%, rgba(82,198,250,.6) 50%, transparent 80%),
      radial-gradient(260px 520px at 0% 620px, rgba(35,80,224,.9), transparent 78%),
      radial-gradient(380px 260px at 100% 520px, rgba(35,80,224,.85), transparent 78%),
      linear-gradient(180deg, #010309 0, #02050f 100%);
  }
}

/* Hero background v5: same palette, far more black. Blue and cyan are now
   accents (one sweep on each side, one cyan glow behind the orb). */
.hero-orbit {
  background-color: #010309;
  background-image:
    linear-gradient(180deg, rgba(4,8,21,0) 0, rgba(4,8,21,0) 1150px, #040815 1600px),
    radial-gradient(640px 360px at 88% 1000px, rgba(74,168,255,.55), rgba(74,168,255,.18) 50%, transparent 78%),
    radial-gradient(460px 260px at 50% 980px, rgba(42,119,255,.28), transparent 75%),
    radial-gradient(300px 560px at 2% 700px, rgba(35,80,224,.55), rgba(26,63,184,.18) 55%, transparent 80%),
    radial-gradient(520px 240px at 100% 600px, rgba(35,80,224,.35), transparent 78%),
    linear-gradient(180deg, #010309 0, #02050f 100%);
}
@media (max-width: 720px) {
  .hero-orbit {
    background-image:
      linear-gradient(180deg, rgba(4,8,21,0) 0, rgba(4,8,21,0) 1100px, #040815 1500px),
      radial-gradient(360px 300px at 95% 860px, rgba(74,168,255,.5), transparent 78%),
      radial-gradient(200px 420px at 0% 640px, rgba(35,80,224,.5), transparent 80%),
      linear-gradient(180deg, #010309 0, #02050f 100%);
  }
}

/* Country flags in the hero badge rotor */
.hb-rotor span { display: inline-flex; align-items: center; gap: 7px; }
.hb-flag { width: 18px; height: 12px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }

a[data-book-demo] { cursor: pointer; }

/* =====================================================================
   Get started flow (signup.html)
   ===================================================================== */
.gs { width: 100%; max-width: 480px; }
.gs-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.gs-progress i { height: 4px; background: #e3e7f0; transition: background .35s; }
.gs-progress i.on { background: var(--blue); }
.gs-count { margin: 0 0 18px; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-step { border: 0; margin: 0; padding: 0; min-width: 0; animation: gs-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes gs-in { from { opacity: 0; transform: translateX(14px); } }
.gs-step.back { animation-name: gs-in-back; }
@keyframes gs-in-back { from { opacity: 0; transform: translateX(-14px); } }
.gs-title { padding: 0; margin: 0 0 6px; font: 600 1.6rem/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.gs-help { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.gs-sub-q { margin: 18px 0 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.gs-pill { position: relative; display: block; }
.gs-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.gs-pill span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 11px 13px; font-weight: 500; font-size: 14.5px; color: var(--ink); background: #fff; border: 1.5px solid #dde1ea; transition: border-color .2s, background .2s, color .2s; }
.gs-pill:hover span { border-color: #b9c6e4; }
.gs-pill input:checked + span { border-color: var(--blue); background: var(--blue-50); color: var(--blue-700); }
.gs-pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.gs-countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
.gs-countries .gs-pill:last-child { grid-column: span 2; }
.gs-uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gs-volume { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gs-volume .gs-pill span { justify-content: center; padding: 10px 6px; }
.gs-pill input[type="checkbox"]:checked + span::after { content: "✓"; margin-left: auto; font-weight: 700; }
.gs-review { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0; border: 1px solid #e3e7f0; }
.gs-review dt, .gs-review dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid #eef1f6; font-size: 14px; }
.gs-review dt { color: var(--muted); font-weight: 500; }
.gs-review dd { color: var(--ink); font-weight: 500; }
.gs-review button { padding: 10px 12px; font: 600 13px var(--font); color: var(--blue); background: none; border: 0; border-bottom: 1px solid #eef1f6; cursor: pointer; }
.gs-review > :nth-last-child(-n+3) { border-bottom: 0; }
.gs-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.gs-nav .btn { margin-left: auto; min-width: 170px; justify-content: center; }
.gs-back { padding: 10px 4px; font: 600 14.5px var(--font); color: var(--muted); background: none; border: 0; cursor: pointer; }
.gs-back:hover { color: var(--ink); }
.gs-form .form-status { margin: 12px 0 0; min-height: 0; }
.gs-form .form-status:empty { display: none; }
.gs-alt { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.gs-alt a { font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gs-done { animation: gs-in .4s cubic-bezier(.2,.8,.2,1); }
.gs-done h2 { margin: 14px 0 6px; font: 600 1.8rem/1.15 var(--display); letter-spacing: -.02em; }
.gs-tick { display: grid; place-items: center; width: 56px; height: 56px; background: #22c55e; box-shadow: 0 0 0 8px rgba(34,197,94,.15); animation: gs-pop .5s cubic-bezier(.3,1.6,.5,1); }
.gs-tick::after { content: ""; width: 22px; height: 12px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-3px) rotate(-45deg); }
@keyframes gs-pop { from { transform: scale(.4); opacity: 0; } }
body:not(.app-body) .gs-tick { border-radius: 50% !important; }
.gs-next { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: gs; display: grid; gap: 4px; }
.gs-next li { counter-increment: gs; position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid #eef1f6; }
.gs-next li::before { content: counter(gs); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; font: 600 13px var(--font); color: var(--blue-700); background: var(--blue-50); }
.gs-next b { display: block; font-size: 15px; color: var(--ink); }
.gs-next span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 600px) {
  .gs-title { font-size: 1.35rem; }
  .gs-uses { grid-template-columns: 1fr; }
  .gs-volume { grid-template-columns: repeat(2, 1fr); }
  .gs-nav .btn { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .gs-step, .gs-done, .gs-tick { animation: none; } }
.gs-flag { width: 20px; height: 14px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.gs [hidden] { display: none !important; }

/* Get started: live "Your Textezy setup" card in the blue panel */
.gs-setup-wrap { max-width: 440px; }
.gs-setup-wrap h1 { font-size: clamp(2rem, 3vw, 2.7rem); }
.gs-setup-wrap > p { margin-bottom: 22px; }
.gs-setup { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(4,12,50,.6); animation: sa-rise .8s cubic-bezier(.2,.8,.2,1) .3s backwards; }
.gs-setup-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.18); }
.gs-setup-h span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.gs-setup-h b { font-weight: 600; font-size: 14px; color: #fff; text-align: right; }
.gs-row { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.12); opacity: .55; transition: opacity .35s, background .35s; }
.gs-row.filled { opacity: 1; }
.gs-row.flash { background: rgba(255,255,255,.08); }
.gs-row-ico { display: grid; place-items: center; width: 34px; height: 34px; font-size: 16px; background: rgba(255,255,255,.14); }
.gs-row-ico svg { width: 22px; height: 15px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.gs-row b { display: block; font-weight: 600; font-size: 15.5px; color: #fff; line-height: 1.3; }
.gs-row small { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.4; }
.gs-row small:empty { display: none; }
.gs-setup-f { padding: 12px 18px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 900px) { .gs-setup { display: none; } }
.gs-brand { justify-content: flex-start; }
.gs-brand .gs-setup-wrap { margin: auto 0; padding: 24px 0; }

/* Get started flow: phone layout */
.gs-home, .gs-mini { display: none; }
@media (max-width: 900px) {
  .gs-brand { position: relative; flex-direction: row; align-items: center; justify-content: space-between; }
  .gs-home { display: inline-flex; align-items: center; gap: 6px; order: 2; font-size: 14px; font-weight: 600; color: #fff; opacity: .9; }
  .gs-home:hover { opacity: 1; text-decoration: none; }
  .sa-main:has(.gs) { padding: 16px 18px 0; }
  .gs { display: flex; flex-direction: column; min-height: 100%; }
  .gs-progress { gap: 4px; margin-bottom: 8px; }
  .gs-count { margin-bottom: 10px; font-size: 10.5px; }
  .gs-mini:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--blue-700); background: var(--blue-50); border: 1px solid #d6e3ff; }
  .gs-mini svg { width: 18px; height: 12px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
  .gs-form { display: flex; flex-direction: column; flex: 1; }
  .gs-title { font-size: 1.3rem; }
  .gs-help { margin-bottom: 14px; font-size: 14px; }
  .gs-sub-q { margin: 14px 0 8px; font-size: 14px; }
  .gs-pill span { padding: 10px 11px; font-size: 14px; }
  .gs-countries { gap: 6px; margin-bottom: 14px; }
  .gs-uses, .gs-volume { gap: 6px; }
  .gs-uses { grid-template-columns: 1fr 1fr; }
  .gs-uses .gs-pill span { padding: 9px 10px; font-size: 13.5px; }
  .gs-step .form-row { grid-template-columns: 1fr; gap: 10px; }
  /* 16px stops iPhones zooming in when a field is tapped */
  .gs-form input:not([type="radio"]):not([type="checkbox"]), .gs-form select { font-size: 16px !important; }
  .gs-review dt, .gs-review dd, .gs-review button { padding: 9px 10px; font-size: 13.5px; }
  /* Buttons stay at the bottom, within thumb reach */
  .gs-nav { position: sticky; bottom: 0; z-index: 2; margin: auto -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px -12px rgba(16,24,48,.18); }
  .gs-form .form-status { margin-top: 10px; }
  .gs-alt { margin: 14px 0 18px; font-size: 13px; text-align: center; }
  .sa-main:has(.gs) .sa-legal { display: none; }
  .gs-done { padding-bottom: 24px; }
}
@media (max-width: 360px) {
  .gs-uses { grid-template-columns: 1fr; }
}

/* Get started: five equal country tiles (flag above name) */
.gs-countries { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gs-countries .gs-pill:last-child { grid-column: auto; }
.gs-countries .gs-pill span { flex-direction: column; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; text-align: center; font-size: 13.5px; line-height: 1.25; }
.gs-countries .gs-flag { width: 30px; height: 20px; }
@media (max-width: 600px) {
  .gs-countries { grid-template-columns: 1fr; gap: 6px; }
  .gs-countries .gs-pill span { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 11px 12px; text-align: left; font-size: 14.5px; }
  .gs-countries .gs-flag { width: 22px; height: 15px; }
}

/* Sending state: spinner in the button, form dims while we wait */
.btn.is-loading { position: relative; pointer-events: none; opacity: .92; }
.btn.is-loading .nav-arrow { display: none; }
.btn.is-loading::before { content: ""; width: 16px; height: 16px; margin-right: 10px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: gs-spin .7s linear infinite; flex: none; }
body:not(.app-body) .btn.is-loading::before { border-radius: 50% !important; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-form.is-sending .gs-step, .gs-form.is-sending .gs-back { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* Get started: keep "Back to home" in the flow so it never overlaps the progress bar */
.sa-main:has(.gs) .sa-back { position: static; align-self: stretch; max-width: 480px; width: 100%; margin: 0 auto 18px; text-align: right; }
.sa-main:has(.gs) { justify-content: center; }

/* =====================================================================
   Get started v2: the form leads, the panel supports
   ===================================================================== */
@media (min-width: 901px) {
  .split-auth:has(.gs) { grid-template-columns: minmax(340px, 36%) minmax(0, 1fr); }

  /* Calmer panel: deep navy with a soft blue glow, smaller type */
  .gs-brand { padding: 36px 40px; background: linear-gradient(165deg, #0a1638 0%, #0e2259 55%, #16367f 100%); }
  .gs-brand::before { opacity: .45; }
  .gs-brand .sa-rings { opacity: .35; }
  .gs-setup-wrap { max-width: 400px; }
  .gs-setup-wrap h1 { font-size: clamp(1.6rem, 2.1vw, 2.05rem); line-height: 1.12; margin-bottom: 10px; }
  .gs-setup-wrap > p { font-size: 14.5px; color: rgba(255,255,255,.72); margin-bottom: 20px; }
  .gs-setup { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
  .gs-setup-h { padding: 12px 16px; }
  .gs-row { grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 16px; }
  .gs-row-ico { width: 28px; height: 28px; font-size: 14px; }
  .gs-row-ico svg { width: 18px; height: 12px; }
  .gs-row b { font-size: 14px; }
  .gs-row small { font-size: 12.5px; color: rgba(255,255,255,.66); }
  .gs-setup-f { padding: 10px 16px; font-size: 12.5px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }

  /* Roomier form */
  .sa-main:has(.gs) { justify-content: space-between; align-items: center; padding: 28px 56px; }
  .sa-main:has(.gs) .sa-back { max-width: 560px; margin-bottom: 0; }
  .gs { max-width: 560px; padding: 24px 0; }
  .gs-progress { gap: 8px; margin-bottom: 14px; }
  .gs-count { margin-bottom: 26px; }
  .gs-title { font-size: 2rem; margin-bottom: 8px; }
  .gs-help { font-size: 15.5px; margin-bottom: 26px; }
  .gs-pill span { min-height: 56px; padding: 14px 16px; font-size: 15px; gap: 10px; }
  .gs-uses { gap: 10px; }
  .gs-countries { gap: 10px; margin-bottom: 26px; }
  .gs-countries .gs-pill span { min-height: 100px; gap: 10px; font-size: 14px; }
  .gs-volume { gap: 10px; }
  .gs-volume .gs-pill span { min-height: 52px; }
  .gs-sub-q { margin: 30px 0 12px; font-size: 15px; }
  .gs-step .field label { font-size: 14.5px; }
  .gs-step .form-row { gap: 14px; }
  .gs-step .field { margin-bottom: 4px; }
  .gs-review dt, .gs-review dd, .gs-review button { padding: 13px 16px; font-size: 14.5px; }
  .gs-nav { margin-top: 34px; }
  .gs-nav .btn { min-width: 200px; }
  .gs-other { margin-top: 14px; }

  /* Secondary links sit at the bottom of the page, away from the buttons */
  .gs-foot { width: 100%; max-width: 560px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid #eef1f6; }
  .gs-foot p { margin: 0; font-size: 13px; }
  .gs-foot .gs-alt { color: var(--muted); }
}
@media (max-width: 900px) {
  .gs-foot { padding: 0 0 18px; text-align: center; }
  .gs-foot .sa-legal { display: none; }
}
/* Shorter laptop screens: same layout, tighter rhythm so each step fits */
@media (min-width: 901px) and (max-height: 860px) {
  .sa-main:has(.gs) { padding: 16px 56px; }
  .gs { padding: 6px 0; }
  .gs-progress { margin-bottom: 10px; }
  .gs-count { margin-bottom: 16px; }
  .gs-title { font-size: 1.7rem; margin-bottom: 4px; }
  .gs-help { margin-bottom: 16px; font-size: 15px; }
  .gs-pill span { min-height: 46px; padding: 10px 14px; font-size: 14.5px; }
  .gs-uses, .gs-volume { gap: 8px; }
  .gs-volume .gs-pill span { min-height: 44px; }
  .gs-countries { margin-bottom: 18px; }
  .gs-countries .gs-pill span { min-height: 84px; }
  .gs-sub-q { margin: 18px 0 8px; }
  .gs-other { margin-top: 10px; }
  .gs-review dt, .gs-review dd, .gs-review button { padding: 9px 14px; font-size: 14px; }
  .gs-nav { margin-top: 20px; }
  .gs-foot { padding-top: 12px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .gs-setup-wrap > p { display: none; }
  .gs-title { font-size: 1.55rem; }
  .gs-help { margin-bottom: 12px; }
  .gs-pill span { min-height: 42px; padding: 9px 12px; }
  .gs-review dt, .gs-review dd, .gs-review button { padding: 7px 12px; }
  .sa-main:has(.gs) .sa-back { font-size: 13px; }
}
@media (max-width: 900px) { .sa-main:has(.gs) { justify-content: flex-start; } }