/* Zexora Demo Hub, bright, colourful, bento-grid dashboard */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- Design tokens ---------- */
:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #6B7280;
  --line: #E5E5E5;
  --accent: #FF7A1A;
  --accent-2: #FFB26B;
  --accent-ink: #FFFFFF;

  /* per-tile colour systems: default bg tint + hover bg tint + icon colour */
  --website-bg:   #EEF4FF;   --website-hov:  #DCE8FF;   --website-ink:  #2563EB;
  --landing-bg:   #FFF1E0;   --landing-hov:  #FFE0BD;   --landing-ink:  #E8731C;
  --ads-bg:       #EFE9FF;   --ads-hov:      #DCCFFF;   --ads-ink:      #6D3BF0;
  --apps-bg:      #E6F5F4;   --apps-hov:     #C9EAE7;   --apps-ink:     #0D8A8A;
  --store-bg:     #E4F7EB;   --store-hov:    #C9EED6;   --store-ink:    #10A24A;
  --restaurant-bg:#FFE5E5;   --restaurant-hov:#FFC9C9;  --restaurant-ink:#D63A3A;
  --salon-bg:     #FFE3F0;   --salon-hov:    #FFC7E0;   --salon-ink:    #D4317A;
  --furniture-bg: #F2E9D8;   --furniture-hov:#E8D9B5;   --furniture-ink:#8A6B2E;
  --trade-bg:     #FFF3C2;   --trade-hov:    #FFE78A;   --trade-ink:    #B58600;

  --radius: 1.5rem;
  --radius-sm: 999px;
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 4px 14px rgba(10,10,10,0.05);
  --shadow-md: 0 8px 16px rgba(10,10,10,0.06), 0 24px 48px rgba(10,10,10,0.10);

  --gap: 20px;
  --pad-tile: 26px;
  --pad-section: 72px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; position: relative; overflow: hidden; }
#services, #demos, #pricing, #areas { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Closing a modal hands focus back to whatever opened it, which is right for a keyboard and
   leaves a mouse user staring at a ring until they click elsewhere. focus-visible is the split. */
:where(a, button, input, textarea, select, [tabindex]):focus:not(:focus-visible) { outline: none; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1 { font-weight: 700; font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
p  { color: var(--muted); font-size: 18px; line-height: 1.5; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px clamp(20px, 5vw, 48px);
  background: var(--ink);
  color: #fff;
  transform: translateY(-105%);
  opacity: 0;
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease;
  will-change: transform, opacity;
}
.topbar.is-scrolled {
  transform: translateY(0);
  opacity: 1;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #D4317A, #6D3BF0, #2563EB, var(--accent));
  background-size: 200% 100%;
  animation: slide 14s linear infinite;
  pointer-events: none;
}
.topbar-start { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.topbar-end   { justify-self: end;   display: inline-flex; align-items: center; gap: 10px; }
.topbar .brand { justify-self: start; }

/* Desktop inline nav */
.topbar-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}
.topbar-nav a {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 6px 2px;
  position: relative;
  transition: color 160ms var(--ease);
}
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
  border-radius: 999px;
}
.topbar-nav a:hover { color: #fff; }
.topbar-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .topbar-nav { display: none; } }

/* Hamburger */
/* No chrome, just the rule lines; the 42px box stays as the tap target. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 180ms var(--ease);
}
.nav-toggle:hover { opacity: 1; }
.nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; }

/* Desktop shows CTA, mobile shows hamburger */
@media (max-width: 720px) {
  /* Two tracks, because the empty start spacer is what was centring the brand. */
  .topbar {
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
  }
  .topbar-start { display: none; }
  .topbar .brand { justify-self: start; }
  .topbar-end { justify-self: end; }
  .topbar .cta-pill { display: none; }
  .nav-toggle { display: inline-flex; }
}
.topbar.is-scrolled {
  box-shadow: 0 8px 26px rgba(0,0,0,0.28);
}

/* Brand mark */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark img,
.brand-mark svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark--lg { width: 44px; height: 44px; }

/* Footer wordmark */
.footer-wordmark {
  display: block;
  height: 28px;
  width: auto;
  aspect-ratio: 320 / 88;
  margin-bottom: 10px;
  object-fit: contain;
}

.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: #fff; }
.brand-accent { color: var(--accent); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ---------- CTA pill ---------- */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: transform 150ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cta-pill:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,122,26,0.3); }
.cta-pill--lg { padding: 14px 22px; font-size: 15px; }
.topbar .cta-pill { background: var(--accent); color: #fff; }
.topbar .cta-pill:hover { background: var(--accent-2); color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--pad-section) clamp(20px, 5vw, 48px) 40px;
  text-align: left;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 420px);
  grid-template-areas: "text feed";
  column-gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.hero-text { grid-area: text; min-width: 0; }
.hero-feed { grid-area: feed; align-self: center; }
.hero::before {
  content: "";
  position: absolute;
  top: -120px; left: -80px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,122,26,0.18), rgba(255,122,26,0) 70%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  top: 40px; right: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(109,59,240,0.14), rgba(109,59,240,0) 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
  max-width: 100%;
  flex-wrap: wrap;
}
.hero-eyebrow .he-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,122,26,0.55);
  animation: pulseOrange 2s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes pulseOrange {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,26,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(255,122,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); }
}
.hero-eyebrow .he-item {
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.hero-eyebrow:hover .he-item { color: var(--ink); }
.hero-eyebrow .he-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(10,10,10,0.2);
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .hero-eyebrow { font-size: 11.5px; gap: 8px; padding: 6px 12px 6px 10px; }
  .hero-eyebrow .he-sep { display: none; }
  .hero-eyebrow .he-item + .he-item::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
}
.hero h1, .hero .hero-title {
  font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero h1 .accent, .hero .hero-title .accent { color: var(--accent); }
.hero .hero-sub { margin-top: 18px; max-width: 50ch; font-size: 19px; }

@media (max-width: 640px) {
  .hero { padding-top: 48px; padding-bottom: 24px; }
}

/* ---------- Sections ---------- */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px clamp(20px, 5vw, 48px) 80px;
}
.section-head {
  margin-bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.section-eyebrow {
  display: inline-block;
  align-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 28ch;
  margin: 0 auto;
}
.section-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 56ch;
  margin-top: 2px;
}

/* What we do — 3 equal service tiles, taller, with sub-copy */
.services-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
.services-grid .tile { min-height: 220px; padding: 28px; }
.services-grid .tile-title { font-size: 24px; }
.tile-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
  max-width: 32ch;
}

/* Live demos — 3×2 grid, uniform compact tiles */
.demos-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
.demos-grid .tile { min-height: 170px; }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .demos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .demos-grid { grid-template-columns: 1fr; }
}

/* ---------- Tile base ---------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad-tile);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: default;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease);
  min-height: 170px;
  overflow: hidden;
  isolation: isolate;
}
a.tile { cursor: pointer; color: inherit; text-decoration: none; }
.tile::after {
  /* subtle corner glow decoration */
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
  opacity: 0.9;
}
.tile > * { position: relative; z-index: 1; }

.tile-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(10,10,10,0.05);
  transition: transform 350ms var(--ease-spring), background 300ms var(--ease);
}
.tile-icon svg { width: 26px; height: 26px; transition: transform 450ms var(--ease-spring); }

.tile-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tile-title .arrow {
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}

/* Hero tile gets biggest title, landing (secondary hero) slightly bigger */
.tile--website .tile-title { font-size: 30px; }
.tile--landing .tile-title { font-size: 24px; }
.tile--website .tile-icon { width: 56px; height: 56px; border-radius: 16px; }
.tile--website .tile-icon svg { width: 30px; height: 30px; }

/* ---------- Per-tile default colours ---------- */
.tile--website    { background: var(--website-bg); }
.tile--website    .tile-icon svg { color: var(--website-ink); }
.tile--landing    { background: var(--landing-bg); }
.tile--landing    .tile-icon svg { color: var(--landing-ink); }
.tile--ads        { background: var(--ads-bg); }
.tile--ads        .tile-icon svg { color: var(--ads-ink); }
.tile--apps       { background: var(--apps-bg); }
.tile--apps       .tile-icon svg { color: var(--apps-ink); }
.tile--store      { background: var(--store-bg); }
.tile--store      .tile-icon svg { color: var(--store-ink); }
.tile--restaurant { background: var(--restaurant-bg); }
.tile--restaurant .tile-icon svg { color: var(--restaurant-ink); }
.tile--salon      { background: var(--salon-bg); }
.tile--salon      .tile-icon svg { color: var(--salon-ink); }
.tile--furniture  { background: var(--furniture-bg); }
.tile--furniture  .tile-icon svg { color: var(--furniture-ink); }
.tile--trade      { background: var(--trade-bg); }
.tile--trade      .tile-icon svg { color: var(--trade-ink); }

/* ---------- Hover state ---------- */
@media (hover: hover) {
  .tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
  }
  .tile:hover .tile-icon { transform: scale(1.08) rotate(-2deg); }
  .tile:hover::after { transform: translate(20px, -20px) scale(1.1); opacity: 1; }
  .tile:hover .tile-title .arrow { opacity: 1; transform: translateX(0); }

  .tile--website:hover    { background: var(--website-hov); }
  .tile--landing:hover    { background: var(--landing-hov); }
  .tile--ads:hover        { background: var(--ads-hov); }
  .tile--apps:hover       { background: var(--apps-hov); }
  .tile--store:hover      { background: var(--store-hov); }
  .tile--restaurant:hover { background: var(--restaurant-hov); }
  .tile--salon:hover      { background: var(--salon-hov); }
  .tile--furniture:hover  { background: var(--furniture-hov); }
  .tile--trade:hover      { background: var(--trade-hov); }

  /* ---- Per-tile SVG internal animations ---- */

  /* Website: dots blink across the address bar */
  .tile--website .tile-icon svg circle { transition: opacity 250ms var(--ease), transform 400ms var(--ease-spring); transform-origin: center; transform-box: fill-box; }
  .tile--website:hover .tile-icon svg circle:nth-of-type(1) { transform: scale(1.6); opacity: 1; }
  .tile--website:hover .tile-icon svg circle:nth-of-type(2) { transform: scale(1.6); opacity: 1; transition-delay: 100ms; }

  /* Landing: the 3 stacked blocks slide in */
  .tile--landing .tile-icon svg path { transition: transform 400ms var(--ease-spring), opacity 250ms var(--ease); transform-origin: left center; transform-box: fill-box; }
  .tile--landing:hover .tile-icon svg path:nth-of-type(1) { transform: translateX(2px); }
  .tile--landing:hover .tile-icon svg path:nth-of-type(2) { transform: translateX(-2px) translateY(1px); transition-delay: 80ms; }
  .tile--landing:hover .tile-icon svg path:nth-of-type(3) { transform: translateX(2px) translateY(1px); transition-delay: 160ms; }

  /* Ads: sound wave pulses */
  .tile--ads .tile-icon svg path:nth-of-type(2) { transform-origin: left center; transform-box: fill-box; transition: transform 500ms var(--ease-spring); }
  .tile--ads:hover .tile-icon svg path:nth-of-type(2) { animation: wave 900ms var(--ease) infinite; }
  @keyframes wave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.7; }
  }

  /* Store: cart wheels spin, body gently bobs */
  .tile--store .tile-icon svg circle { transform-origin: center; transform-box: fill-box; transition: transform 600ms var(--ease); }
  .tile--store:hover .tile-icon svg circle { animation: spin 1.4s linear infinite; }
  .tile--store:hover .tile-icon svg path { animation: bob 1.2s var(--ease) infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes bob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

  /* Restaurant: utensils wiggle */
  .tile--restaurant .tile-icon svg { transform-origin: center; }
  .tile--restaurant:hover .tile-icon svg { animation: wiggle 900ms var(--ease) infinite; }
  @keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-6deg); }
    75%      { transform: rotate(6deg); }
  }

  /* Salon: whole icon snips (rotate pulse) */
  .tile--salon .tile-icon svg { transform-origin: center; }
  .tile--salon:hover .tile-icon svg { animation: snip 700ms var(--ease) infinite; }
  @keyframes snip {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-12deg); }
  }

  /* Furniture: top lifts slightly */
  .tile--furniture .tile-icon svg path:nth-of-type(4) { transform-origin: center bottom; transform-box: fill-box; transition: transform 500ms var(--ease-spring); }
  .tile--furniture:hover .tile-icon svg path:nth-of-type(4) { transform: translateY(-2px) scaleY(1.05); }

  /* Custom Apps: brackets slide apart, diagonal pipe pulses */
  .tile--apps .tile-icon svg path { transform-origin: center; transform-box: fill-box; transition: transform 400ms var(--ease-spring); }
  .tile--apps:hover .tile-icon svg path:nth-of-type(1) { transform: translateX(-2px); }
  .tile--apps:hover .tile-icon svg path:nth-of-type(2) { transform: translateX(2px); }
  .tile--apps:hover .tile-icon svg path:nth-of-type(3) { animation: codePulse 1s var(--ease) infinite; }
  @keyframes codePulse {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%      { opacity: 0.65; transform: translateY(-1px); }
  }

  /* Trade: bolt flash */
  .tile--trade .tile-icon svg { transform-origin: center; }
  .tile--trade:hover .tile-icon svg { animation: flash 1s var(--ease) infinite; }
  @keyframes flash {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(181,134,0,0)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 8px rgba(181,134,0,0.6)); transform: scale(1.1); }
  }
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1023px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    grid-template-areas:
      "website  website"
      "website  website"
      "landing  landing"
      "ads      store"
      "restaur  restaur"
      "salon    furnit"
      "trade    trade";
  }
  .tile--website .tile-title { font-size: 26px; }
  .tile--landing .tile-title { font-size: 22px; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 639px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
      "website"
      "landing"
      "ads"
      "store"
      "restaur"
      "salon"
      "furnit"
      "trade";
    gap: 16px;
  }
  .tile { min-height: 150px; }
  .tile--website { min-height: 200px; }
  .tile-title { font-size: 20px; }
  .tile--website .tile-title { font-size: 24px; }
  .tile--landing .tile-title { font-size: 20px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #EDEDED;
  padding: 56px clamp(20px, 5vw, 48px) 28px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #D4317A, #6D3BF0, #2563EB, var(--accent));
  background-size: 200% 100%;
  animation: slide 14s linear infinite;
}
@keyframes slide { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 36px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-nap { flex: 1 1 auto; text-align: center; padding: 0 16px; }
.footer-col--brand { align-items: flex-start; }
.footer-col--brand .brand-mark { margin-bottom: 6px; }
.footer-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}
.footer-col a, .footer-text {
  color: rgba(255,255,255,0.8); font-size: 15px;
  transition: color 150ms var(--ease);
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .footer-col { align-items: center; }
  .footer-col--brand { align-items: center; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; align-items: center; }
}

@keyframes matchIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cta-pill--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.cta-pill--ghost:hover {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}

.tile.is-pulsing { animation: tilePulse 1.2s var(--ease); }
@keyframes tilePulse {
  0%   { box-shadow: var(--shadow-sm); transform: translateY(0); }
  30%  { box-shadow: 0 0 0 6px rgba(255,122,26,0.25), var(--shadow-md); transform: translateY(-4px); }
  100% { box-shadow: var(--shadow-sm); transform: translateY(0); }
}

/* ---------- Mobile polish (shared) ---------- */
html, body { overflow-x: hidden; }
.cap, .tile, .cta-pill, .fit-chip, .topbar-back, .modal-cta, .modal-demo, .modal-close, .svc-group-toggle {
  -webkit-tap-highlight-color: transparent;
}
.topbar { padding-top: max(14px, env(safe-area-inset-top)); }
.site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

@media (max-width: 720px) {
  :root { --pad-section: 48px; }
  .hero { padding-top: 36px; padding-bottom: 16px; }
  .hero-text { text-align: left; }
  .hero h1, .hero .hero-title { font-size: clamp(32px, 8.4vw, 44px); line-height: 1.05; max-width: none; letter-spacing: -0.025em; }
  .hero .hero-sub { font-size: 15.5px; line-height: 1.5; margin-top: 14px; max-width: 42ch; }
  .hero-eyebrow { font-size: 10.5px; gap: 8px; margin-bottom: 16px; letter-spacing: 0.08em; }
  .hero-eyebrow .he-sep { width: 2px; height: 2px; }
  .hero::before, .hero::after { opacity: 0.5; }

  .section { padding-bottom: 40px; }
  .section-title { font-size: clamp(22px, 5.4vw, 28px); }

  .services-grid .tile { min-height: 180px; padding: 22px; }
  .services-grid .tile-title { font-size: 22px; }
  .tile-sub { font-size: 14px; }

  .cta-pill { padding: 11px 16px; font-size: 14px; min-height: 44px; }
  .cta-pill--lg { padding: 13px 20px; font-size: 14px; }
}

@media (max-width: 420px) {
  .topbar { padding: 12px 14px; }
  .cta-pill { padding: 9px 13px; font-size: 13px; }
  .brand-name { font-size: 16px; }
}

/* ---------- Topbar back button (service pages) ---------- */
.topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: transform 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.topbar-back svg { width: 14px; height: 14px; stroke: currentColor; transition: transform 160ms var(--ease); }
.topbar-back:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.topbar-back:hover svg { transform: translateX(-2px); }
@media (max-width: 720px) {
  .topbar-back {
    padding: 0;
    width: 42px;
    height: 42px;
    gap: 0;
    border-radius: 12px;
    background: rgba(10,10,10,0.06);
    border-color: transparent;
  }
  .topbar-back:hover { background: var(--ink); color: #fff; }
  .topbar-back .label { display: none; }
  .topbar-back svg { width: 18px; height: 18px; }
}

/* ---------- Nav drawer (mobile menu) ---------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav-drawer.is-open { display: flex; animation: navFade 180ms var(--ease); }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
.nav-panel {
  margin-left: auto;
  width: min(390px, 90%);
  height: 100%;
  background: #0A0A0A;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  animation: navSlide 320ms var(--ease-spring);
  /* The mounted view owns the scroll, so a drill always starts at the top. */
  overflow: hidden;
}
@keyframes navSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  min-height: 58px;
  flex: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-body { padding: 6px 10px max(22px, env(safe-area-inset-bottom)); }
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 17px;
}
.nav-brand .brand-mark { width: 30px; height: 30px; }
.nav-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.nav-close svg { width: 15px; height: 15px; stroke: currentColor; }
.nav-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }

.nav-section {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 15px 10px 5px;
  margin: 0;
}
/* A row carries a glyph tile, a name and a one-line descriptor; the same row is a link
   for a destination and a button for the group that drills. */
.nav-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 10px;
  border-radius: 12px;
  color: #fff;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: background 170ms var(--ease);
}
.nav-row:hover { background: rgba(255,255,255,0.055); }
.nav-ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex: none;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
  transition: transform 300ms var(--ease-spring);
}
.nav-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.nav-row:hover .nav-ic { transform: scale(1.07); }
/* Glyph tints are the service pages' own colours, lightened to carry on black. */
.nav-ic--web  { background: rgba(37,99,235,0.18);  color: #7DA6FF; }
.nav-ic--ads  { background: rgba(109,59,240,0.20); color: #A78BFA; }
.nav-ic--apps { background: rgba(13,138,138,0.22); color: #2DD4BF; }
.nav-tt { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; display: block; }
.nav-ts { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 2px; display: block; line-height: 1.35; }
.nav-chev {
  width: 16px; height: 16px; flex: none; margin-left: auto;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.3; transition: opacity 170ms var(--ease);
}
.nav-row:hover .nav-chev { opacity: 0.65; }
.nav-return {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit;
}
.nav-return svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Only one view is mounted at a time, so the panel never scrolls past six rows. */
.nav-view { display: none; flex-direction: column; height: 100%; overflow-y: auto; }
.nav-view.is-on { display: flex; animation: navViewIn 260ms var(--ease); }
.nav-view.is-back { animation: navViewBack 260ms var(--ease); }
@keyframes navViewIn { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes navViewBack { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.nav-contact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px 0;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-contact a {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  padding: 6px 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-contact a:hover { color: #fff; }
.nav-contact svg { width: 14px; height: 14px; stroke: currentColor; opacity: 0.7; }
.nav-contact .nav-section { padding: 0 0 2px; }

.nav-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 10px 0;
  padding: 14px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.nav-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.nav-cta:hover { background: var(--accent-2); transform: translateY(-1px); }

html.nav-open { overflow: hidden; }

/* ---------- Hero offer band ---------- */
.offer-band {
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.offer-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.offer-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,0.12), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  transition: transform 420ms var(--ease), opacity 220ms var(--ease);
}
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(10,10,10,0.18);
}
.offer-card:hover::before { transform: scale(1.25); opacity: 1; }
.offer-card .ob-value {
  display: block;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 4px;
}
.offer-card .ob-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer-card.is-highlight {
  background: var(--ink);
  border-color: var(--ink);
}
.offer-card.is-highlight::before {
  background: radial-gradient(circle, rgba(255,122,26,0.45), transparent 60%);
  opacity: 0.8;
}
.offer-card.is-highlight .ob-value {
  background: linear-gradient(135deg, #fff 0%, #FFB26B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.offer-card.is-highlight .ob-label { color: rgba(255,255,255,0.6); }

@media (max-width: 720px) {
  .offer-band { gap: 8px; margin-top: 20px; }
  .offer-card { padding: 14px 14px; border-radius: 14px; }
  .offer-card .ob-value { font-size: 18px; }
  .offer-card .ob-label { font-size: 10px; letter-spacing: 0.08em; }
}
@media (max-width: 420px) { .offer-band { grid-template-columns: 1fr; } }

/* ---------- Hero actions + meta (refined) ---------- */
.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-actions .cta-pill { padding: 14px 22px; font-size: 15px; min-height: 50px; }
.hero-actions .cta-pill--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.hero-actions .cta-pill--ghost:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

/* ---------- Trust marquee ---------- */
.trust {
  width: 100%;
  max-width: 1500px;
  margin: 8px auto 0;
  padding: 56px clamp(20px, 5vw, 48px) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.trust-separator { display: none; }
.trust-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 30px;
  opacity: 0.7;
}
.trust-marquee {
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.trust-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: trustScroll 50s linear infinite;
  will-change: transform;
}
.trust-track:hover { animation-play-state: paused; }
.trust-track img {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.42;
  transition: opacity 0.4s ease;
}
.trust-track img:hover { opacity: 0.85; }

/* Dark variant: trust bar that continues directly under the dark hero canvas */
.trust--dark {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px clamp(20px, 5vw, 48px) 38px;
  background: #030303;
  color: #fff;
}
.trust--dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #D4317A, #6D3BF0, #2563EB, var(--accent));
  background-size: 200% 100%;
  animation: slide 14s linear infinite;
  pointer-events: none;
}
.trust--dark .trust-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.trust--dark .trust-separator {
  display: block;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  margin-bottom: 14px;
}
.trust--dark .trust-label {
  color: rgba(255,255,255,0.42);
  opacity: 1;
  margin: 0 0 18px;
}
.trust--dark .trust-track img {
  filter: grayscale(100%) brightness(1.25);
  opacity: 0.55;
}
.trust--dark .trust-track img:hover { opacity: 1; filter: none; }
@keyframes trustScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 40px)); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}
@media (max-width: 768px) {
  .trust { padding: 16px clamp(20px, 5vw, 48px) 36px; }
  .trust-track { gap: 50px; }
  .trust-track img { width: 100px; }
  .trust-separator { width: 140px; }
}

/* ---------- Hero booking feed ---------- */
.hero-feed {
  width: 100%;
  max-width: 380px;
  justify-self: end;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Stat cards (price + delivery), sit in left column above CTAs */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.stat-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(10,10,10,0.04);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10,10,10,0.08);
  border-color: rgba(10,10,10,0.12);
}
.stat-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 28px; height: 28px; overflow: visible; }
.stat-icon--price { background: rgba(255,122,26,0.12); color: var(--accent); }
.stat-icon--time  { background: rgba(37,99,235,0.10);  color: #2563EB; }
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.stat-body strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
}
.stat-body span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* Outcome typer line under headline */
.hero-typer-line {
  display: block;
  margin-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.005em;
  line-height: 1.4;
  min-height: 1.5em;
}
.hero-typer { white-space: pre; }
.hero-typer-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -0.16em;
  border-radius: 1px;
  animation: typerBlink 1s step-end infinite;
}
@keyframes typerBlink {
  50% { opacity: 0; }
}

/* Animated price icon: breathing aura behind the coin */
.coin-aura {
  transform-origin: 50% 50%;
  transform-box: view-box;
  animation: coinPulse 2.6s ease-in-out infinite;
}
@keyframes coinPulse {
  0%, 100% { opacity: 0;    transform: scale(0.78); }
  50%      { opacity: 0.22; transform: scale(1.18); }
}

/* Animated time icon: clock hand sweeping */
.clock-hand {
  transform-origin: 50% 50%;
  transform-box: view-box;
  animation: clockSweep 4.5s linear infinite;
}
@keyframes clockSweep {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .coin-aura, .clock-hand { animation: none; }
}
.feed-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(10,10,10,0.08), 0 6px 14px rgba(10,10,10,0.04);
  overflow: hidden;
  transform: rotate(-1.2deg);
  transition: transform 360ms var(--ease);
}
.feed-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,122,26,0.08), rgba(109,59,240,0.06));
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.feed-card:hover { transform: rotate(0deg) translateY(-2px); }

.feed-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.feed-head-text { display: flex; flex-direction: column; gap: 2px; }
.feed-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.feed-sub {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.feed-bell {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,122,26,0.1);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: bellRing 4s var(--ease) infinite;
}
.feed-bell svg { width: 16px; height: 16px; }

.feed-track {
  position: relative;
  z-index: 1;
  height: 360px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.feed-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  animation: feedScroll 36s linear infinite;
}
.feed-card:hover .feed-list { animation-play-state: paused; }

.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(10,10,10,0.04);
}
.feed-row:last-child { border-bottom: 0; }
.feed-time {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 5px 9px;
  border-radius: 8px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.feed-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.feed-body strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-body span {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-tag {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #0F7A36;
  background: #EAF7EE;
  padding: 5px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.feed-tag--ghost {
  color: var(--muted);
  background: rgba(10,10,10,0.05);
}

@keyframes feedScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes bellRing {
  0%, 88%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(14deg); }
  96%           { transform: rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .feed-list, .feed-bell { animation: none; }
  .feed-card { transform: none; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "feed";
    row-gap: 22px;
  }
  .hero-feed {
    justify-self: center;
    max-width: 360px;
  }
  .feed-card { transform: none; }
  .feed-card:hover { transform: translateY(-2px); }
  .feed-track { height: 300px; }
}

@media (max-width: 480px) {
  .hero-feed { max-width: 100%; }
  .feed-track { height: 260px; }
  .feed-row { padding: 12px 16px; gap: 10px; }
  .feed-head { padding: 16px 16px 12px; }
  .feed-body strong { font-size: 13px; }
  .feed-body span { font-size: 11px; }
}

@media (max-width: 520px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .cta-pill { justify-content: center; width: 100%; }
}

/* ---------- Floating price bubble (person, not advert) ---------- */
.fab-quiz {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 11px;
  /* the wrapper spans the hidden bubble too, so only its children may take a click */
  pointer-events: none;
}
.fab-quiz > * { pointer-events: auto; }
/* display:flex above outranks the UA [hidden] rule, so parking the avatar needs this. */
.fab-quiz[hidden] { display: none; }

.fab-av {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #FFF3E6;
  box-shadow: 0 0 0 3px #fff, 0 14px 30px rgba(10,10,10,0.2);
  display: grid;
  place-items: center;
  border: 0; padding: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 240ms var(--ease);
  animation: fabIn 700ms var(--ease-spring) 700ms backwards;
}
@keyframes fabIn {
  from { transform: scale(0.4) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.fab-av:hover { transform: translateY(-2px); }
.fab-av::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 2.5px #fff;
}
.fab-art {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* the global reset caps svg at max-width:100%, which silently undoes any zoom set here */
.fab-art svg {
  width: 250% !important;
  height: auto !important;
  max-width: none !important;
  /* the figure sits right of and above the canvas centre, so it is pulled back in */
  transform: translate(-11.5%, 6.5%);
}

/* the bubble arrives after the avatar and leaves on its own; the avatar stays */
.fab-bubble {
  position: relative;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(10,10,10,0.15), 0 2px 6px rgba(10,10,10,0.05);
  opacity: 0;
  transform: translateX(10px) scale(0.94);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease-spring);
  pointer-events: none;
}
.fab-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab-bubble::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  margin-top: -5px;
  width: 10px; height: 10px;
  background: #fff;
  transform: rotate(45deg);
}
.fab-bubble__go {
  display: block;
  padding: 10px 15px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font-family: inherit;
  font-size: 13.4px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.fab-bubble__go em { font-style: normal; color: var(--accent); }
.fab-x {
  position: absolute;
  /* the bubble sits left of the avatar, so the corner nearest the avatar is the far one from
     the text: at the bubble's top the avatar's circle has already curved away */
  top: -7px; right: -7px;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #fff;
  color: #6B7280;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(10,10,10,0.2);
  transition: color 150ms var(--ease), background 150ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fab-x:hover { background: var(--ink); color: #fff; }
.fab-x svg {
  width: 10px; height: 10px;
  stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round;
}

@media (max-width: 420px) {
  .fab-quiz { bottom: 16px; right: 14px; gap: 9px; }
  .fab-bubble__go { white-space: normal; max-width: min(56vw, 200px); font-size: 12.6px; }
  .fab-av { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-av { animation: none; transition: none; }
  .fab-bubble { transition: opacity 200ms linear; transform: none; }
  .fab-bubble.is-on { transform: none; }
}

/* ---------- Pricing section ---------- */
.pricing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px) 56px;
}
.pricing-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.pricing-card::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(255,122,26,0.4), transparent 60%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.pricing-card::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -20%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(109,59,240,0.28), transparent 60%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.pricing-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pricing-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 14px;
  max-width: 20ch;
  color: #fff;
}
.pricing-sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
  max-width: 44ch;
}
.pricing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.pricing-badges span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pricing-badges svg { width: 13px; height: 13px; stroke: #ffb26b; }
.pricing-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pricing-cta .cta-pill { background: var(--accent); color: #fff; padding: 14px 22px; font-size: 15px; }
.pricing-cta .cta-pill:hover { background: var(--accent-2); }
.pricing-cta .cta-pill--ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: none;
}
.pricing-cta .cta-pill--ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }

.pricing-right {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pricing-from {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
  display: block;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.pricing-price .amount {
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #FFB26B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pricing-price .unit {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.pricing-list li svg {
  width: 18px; height: 18px;
  stroke: #22c55e;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 840px) {
  .pricing-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .pricing-right { padding: 22px; }
  .pricing-title { font-size: clamp(24px, 6.5vw, 34px); }
}

/* ---------- Areas section ---------- */
.areas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px) 72px;
}
.areas-head {
  text-align: center;
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.areas-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.areas-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 22ch;
}
.areas-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 50ch;
}
.areas-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.area-chip {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.area-chip:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.area-chip.is-featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.area-chip.is-featured::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,122,26,0.5);
  animation: pulse 1.8s var(--ease) infinite;
}
.area-chip.is-wide {
  background: linear-gradient(135deg, rgba(255,122,26,0.12), rgba(109,59,240,0.1));
  border-color: transparent;
  color: var(--ink);
  font-weight: 700;
}
.area-chip.is-wide:hover {
  background: var(--accent);
  color: #fff;
}

.hsr {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 84vh, 760px);
  padding-top: 125px;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030303;
  isolation: isolate;
  color: #fff;
}
.hsr-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,122,26,0.08), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(212,49,122,0.07), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hsr-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(3,3,3,0.7) 0%,
    transparent 18%,
    transparent 82%,
    rgba(3,3,3,0.85) 100%
  );
  pointer-events: none;
  z-index: 3;
}
.hsr-field {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Each shape: outer = entrance + final rotation, inner = perpetual float */
.es {
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.23, 0.86, 0.39, 0.96);
  animation-duration: 2.4s;
  will-change: transform, opacity;
}
.es-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(255,255,255,0.13);
  box-shadow: 0 8px 32px rgba(255,255,255,0.06);
  animation: hsrFloat 12s ease-in-out infinite;
}
.es-inner::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.20), transparent 70%);
}

@keyframes hsrFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(15px); }
}

/* --- Shape 1: orange, top-left, large --- */
.es-1 {
  width: clamp(320px, 42vw, 600px);
  height: clamp(80px, 11vw, 140px);
  left: -10%; top: 18%;
  animation-name: hsrEnter1;
  animation-delay: 0.3s;
}
.es-1 .es-inner { background: linear-gradient(to right, rgba(255,122,26,0.20), transparent); }
@keyframes hsrEnter1 {
  from { opacity: 0; transform: translateY(-150px) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(0)      rotate(12deg); }
}

/* --- Shape 2: pink, mid-right, medium-large --- */
.es-2 {
  width: clamp(280px, 36vw, 500px);
  height: clamp(72px, 9vw, 120px);
  right: -5%; top: 70%;
  animation-name: hsrEnter2;
  animation-delay: 0.5s;
}
.es-2 .es-inner { background: linear-gradient(to right, rgba(212,49,122,0.22), transparent); }
@keyframes hsrEnter2 {
  from { opacity: 0; transform: translateY(-150px) rotate(-30deg); }
  to   { opacity: 1; transform: translateY(0)      rotate(-15deg); }
}

/* --- Shape 3: purple, bottom-left, medium --- */
.es-3 {
  width: clamp(200px, 24vw, 300px);
  height: clamp(54px, 6.5vw, 80px);
  left: 5%; bottom: 8%;
  animation-name: hsrEnter3;
  animation-delay: 0.4s;
}
.es-3 .es-inner { background: linear-gradient(to right, rgba(109,59,240,0.22), transparent); }
@keyframes hsrEnter3 {
  from { opacity: 0; transform: translateY(-150px) rotate(-23deg); }
  to   { opacity: 1; transform: translateY(0)      rotate(-8deg); }
}

/* --- Shape 4: blue, top-right, small --- */
.es-4 {
  width: clamp(140px, 17vw, 200px);
  height: clamp(44px, 5vw, 60px);
  right: 16%; top: 12%;
  animation-name: hsrEnter4;
  animation-delay: 0.6s;
}
.es-4 .es-inner { background: linear-gradient(to right, rgba(37,99,235,0.22), transparent); }
@keyframes hsrEnter4 {
  from { opacity: 0; transform: translateY(-150px) rotate(5deg); }
  to   { opacity: 1; transform: translateY(0)      rotate(20deg); }
}

/* --- Shape 5: peach, top-left tiny --- */
.es-5 {
  width: clamp(100px, 12vw, 150px);
  height: clamp(30px, 3.5vw, 40px);
  left: 22%; top: 7%;
  animation-name: hsrEnter5;
  animation-delay: 0.7s;
}
.es-5 .es-inner { background: linear-gradient(to right, rgba(255,178,107,0.24), transparent); }
@keyframes hsrEnter5 {
  from { opacity: 0; transform: translateY(-150px) rotate(-40deg); }
  to   { opacity: 1; transform: translateY(0)      rotate(-25deg); }
}

/* Content */
.hsr-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  text-align: center;
}
.hsr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: clamp(14px, 2vw, 22px);
  opacity: 0;
  animation: hsrFadeUp 1s cubic-bezier(0.25,0.4,0.25,1) 0.5s forwards;
}
.hsr-badge-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #FF7A1A;
  box-shadow: 0 0 10px rgba(255,122,26,0.6);
}
.hsr-title {
  font-size: clamp(40px, 7.5vw, 88px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.hsr-title-1, .hsr-title-2 {
  display: inline-block;
  padding-bottom: 0.08em;
  opacity: 0;
  animation: hsrFadeUp 1s cubic-bezier(0.25,0.4,0.25,1) 0.7s forwards;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hsr-title-1 {
  background-image: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.78) 100%);
}
.hsr-title-2 {
  background-image: linear-gradient(90deg, #FFB37A 0%, #fff 50%, #F3A1C0 100%);
}
.hsr-sub {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 56ch;
  margin: 0 auto clamp(28px, 4vw, 40px);
  opacity: 0;
  animation: hsrFadeUp 1s cubic-bezier(0.25,0.4,0.25,1) 0.9s forwards;
}
.hsr-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  animation: hsrFadeUp 1s cubic-bezier(0.25,0.4,0.25,1) 1.1s forwards;
}
.hsr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 200ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.hsr-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255,122,26,0.32);
}
.hsr-btn--primary:hover {
  background: var(--accent-2);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(255,122,26,0.4);
}
.hsr-btn--ghost {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}
.hsr-btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}

@keyframes hsrFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .es, .es-inner, .hsr-badge, .hsr-title-1, .hsr-title-2, .hsr-sub, .hsr-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .hsr { min-height: 78vh; }
  .hsr-title { font-size: clamp(36px, 11vw, 56px); letter-spacing: -0.03em; }

  /* Every shape's clamp floor sits above its vw term at phone widths, so the floor wins and a
     600px-class pill lands on a 390px screen. These floors are low enough for vw to govern, and
     the shapes move out to the edges so none of them crosses the centred copy. */
  .es-1 { width: clamp(150px, 52vw, 280px); height: clamp(40px, 13vw, 70px); left: -16%; top: 12%; }
  .es-2 { width: clamp(130px, 44vw, 240px); height: clamp(36px, 11vw, 60px); right: -18%; top: 76%; }
  .es-3 { width: clamp(100px, 32vw, 180px); height: clamp(28px, 8vw, 48px);  left: -8%;  bottom: 9%; }
  .es-4 { width: clamp(72px, 22vw, 130px);  height: clamp(22px, 6.5vw, 40px); right: 5%;  top: 5%; }
  .es-5 { width: clamp(56px, 17vw, 100px);  height: clamp(18px, 5vw, 30px);  left: 12%;  top: 2%; }
  /* 2px reads as a hard outline once the pill is this small. */
  .es-inner { border-width: 1.5px; }
}

/* ============================================================
   CARD VARIATIONS V1–V5 (alternatives to Mockup B)
   ============================================================ */
.v-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  justify-items: center;
}
.v-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 20px;
  position: relative;
}
.v-icon svg { width: 32px; height: 32px; overflow: visible; }
/* Ported from the arapiev.com 62px glyphs; anything under 48px starves the detail */
.n3-card .v-icon { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 18px; }
.n3-card .v-icon svg { width: 48px; height: 48px; }

/* Glyph timing is arapiev's --ka-ease, which differs from this vault's --ease */
.ic {
  --ic-ease: cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic * { transform-box: fill-box; }

/* Browser: frame draws, content blocks land, cursor arrives and clicks. */
.ic--browser .ic-frame {
  stroke-dasharray: 200;
  animation: icDraw 8s var(--ic-ease) infinite;
}
@keyframes icDraw {
  0% { stroke-dashoffset: 200; }
  34%, 100% { stroke-dashoffset: 0; }
}
.ic--browser .ic-rule {
  stroke-dasharray: 52;
  stroke-width: 1.5;
  opacity: 0.55;
  animation: icRule 8s var(--ic-ease) infinite;
}
@keyframes icRule {
  0%, 18% { stroke-dashoffset: 52; }
  40%, 100% { stroke-dashoffset: 0; }
}
.ic--browser .ic-dot {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: icFade 8s var(--ic-ease) infinite;
}
@keyframes icFade {
  0%, 22% { opacity: 0; }
  36%, 100% { opacity: 0.5; }
}
.ic--browser .ic-block {
  fill: currentColor;
  fill-opacity: 0.32;
  stroke: none;
  opacity: 0;
  transform-origin: left center;
  animation: icBlock 8s var(--ic-ease) infinite;
  animation-delay: calc(var(--n) * 0.4s);
}
@keyframes icBlock {
  0%, 42% { opacity: 0; transform: translateX(-7px) scaleX(0.55); }
  56%, 100% { opacity: 1; transform: none; }
}
.ic--browser .ic-block:first-of-type { fill-opacity: 0.6; }
.ic--browser .ic-cursor {
  fill: var(--ink);
  stroke: none;
  opacity: 0;
  transform-origin: 20% 10%;
  animation: icCursor 8s var(--ic-ease) infinite;
}
@keyframes icCursor {
  0%, 58% { opacity: 0; transform: translate(8px, 12px); }
  68% { opacity: 1; transform: translate(2px, 4px); }
  80% { opacity: 1; transform: translate(-8px, -6px); }
  85% { opacity: 1; transform: translate(-8px, -6px) scale(0.78); }
  90% { opacity: 1; transform: translate(-8px, -6px); }
  100% { opacity: 0; transform: translate(-8px, -6px); }
}

/* Magnet: three customer profiles get pulled into the poles. */
.ic--mag .mag-arm {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
.ic--mag .mag-pole {
  fill: currentColor;
  stroke: none;
}
.ic--mag .mag-arm,
.ic--mag .mag-pole {
  transform-box: view-box;
  transform-origin: 32px 40px;
  animation: magTug 3.8s var(--ic-ease) infinite;
}
@keyframes magTug {
  0%, 50%, 100% { transform: scale(1); }
  60% { transform: scale(1.05); }
  74% { transform: scale(1); }
}
/* Origin 0 0 keeps the scale local to each profile, not to the view box centre. */
.pf {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(var(--ex), var(--ey));
  animation: pfPull 3.8s var(--ic-ease) infinite;
  animation-delay: calc(var(--n) * 0.32s);
}
@keyframes pfPull {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.72); }
  18% { opacity: 1; }
  60%, 72% { opacity: 1; transform: translate(var(--ex), var(--ey)) scale(1); }
  88%, 100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0.9); }
}
/* Three solid ink figures dominated the glyph; the card's own colour keeps it tonal */
.pf-head {
  fill: currentColor;
  stroke: none;
}
.pf-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* Clock and bolt: hands sweep, the bolt cuts the dial and strikes. */
.ic--bt .ct-face {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
.ic--bt .ct-mark {
  stroke: currentColor;
  stroke-opacity: 0.5;
  stroke-width: 2;
}
.ic--bt .ct-hour,
.ic--bt .ct-min {
  stroke: var(--ink);
  stroke-width: 2.4;
  transform-box: view-box;
  transform-origin: 28px 30px;
}
.ic--bt .ct-hour {
  stroke-opacity: 0.55;
  animation: ctSpin 24s linear infinite;
}
.ic--bt .ct-min { animation: ctSpin 4s linear infinite; }
@keyframes ctSpin {
  to { transform: rotate(360deg); }
}
.ic--bt .ct-pin {
  fill: currentColor;
  stroke: none;
}
.bo-fill {
  fill: currentColor;
  stroke: none;
  transform-origin: center;
  animation: boStrike 3.2s var(--ic-ease) infinite;
}
@keyframes boStrike {
  0%, 56% { fill: currentColor; transform: scale(1); }
  63% { fill: var(--ink); transform: scale(1.09); }
  76%, 100% { fill: currentColor; transform: scale(1); }
}
/* Ground-coloured underlay so the dial reads as cut; width divided by the group scale. */
.bo-knock {
  fill: var(--n3-tile, #fff);
  stroke: var(--n3-tile, #fff);
  stroke-width: 2.8;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .ic * { animation: none !important; }
  .ic--browser .ic-frame,
  .ic--browser .ic-rule { stroke-dashoffset: 0; }
  .ic--browser .ic-dot,
  .ic--browser .ic-block,
  .pf { opacity: 1; }
  .ic--browser .ic-cursor { opacity: 1; transform: translate(-8px, -6px); }
}
@media (max-width: 900px) {
  .v-grid { grid-template-columns: 1fr 1fr; }
  .v-grid > article:nth-child(3),
  .v-grid > .n3-col:nth-child(3) { grid-column: span 2; max-width: 360px; justify-self: center; }
}
@media (max-width: 600px) {
  .v-grid { grid-template-columns: 1fr; }
  .v-grid > article:nth-child(3),
  .v-grid > .n3-col:nth-child(3) { grid-column: span 1; }
}

/* ----- N3 · Glowing halo (no border) ----- */
.n3-col {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.n3-beat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(27px, 2.8vw, 32.5px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
/* The dot carries the card's colour up into the beat so the pair reads as one unit */
.n3-beat::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beat-c, var(--accent));
  flex-shrink: 0;
}
.n3-col:nth-child(1) { --beat-c: var(--accent); }
.n3-col:nth-child(2) { --beat-c: #6D3BF0; }
.n3-col:nth-child(3) { --beat-c: #16A34A; }
.n3-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 22px;
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
.n3-card--orange { box-shadow: 0 0 0 1px rgba(255,122,26,0.10), 0 28px 60px -10px rgba(255,122,26,0.50); }
.n3-card--violet { box-shadow: 0 0 0 1px rgba(109,59,240,0.10), 0 28px 60px -10px rgba(109,59,240,0.45); }
.n3-card--green  { box-shadow: 0 0 0 1px rgba(22,163,74,0.10),  0 28px 60px -10px rgba(22,163,74,0.40); }
.n3-card:hover { transform: translateY(-6px); }
.n3-card--orange:hover { box-shadow: 0 0 0 1px rgba(255,122,26,0.18), 0 34px 80px -8px rgba(255,122,26,0.65); }
.n3-card--violet:hover { box-shadow: 0 0 0 1px rgba(109,59,240,0.18), 0 34px 80px -8px rgba(109,59,240,0.60); }
.n3-card--green:hover  { box-shadow: 0 0 0 1px rgba(22,163,74,0.18),  0 34px 80px -8px rgba(22,163,74,0.55); }
.n3-col .n3-card { flex: 1; }
/* The eyebrow stands alone here, so it does not need a full title's clearance */
.n3-section .section-head { margin-bottom: 30px; }
.n3-section .section-eyebrow { background: rgba(255,122,26,0.14); color: var(--accent); }
/* Opaque tile tints (the 12% wash flattened over --surface) so SVG knockout strokes can match them */
.n3-card--orange { --n3-tile: #FFEFE4; }
.n3-card--violet { --n3-tile: #EDE7FD; }
.n3-card--green  { --n3-tile: #E3F4E9; }
.n3-card--orange .v-icon { background: var(--n3-tile); color: var(--accent); }
.n3-card--violet .v-icon { background: var(--n3-tile); color: #6D3BF0; }
.n3-card--green  .v-icon { background: var(--n3-tile); color: #16A34A; }
/* The reset covers h1-h3 only, so h4 needs its own zero */
.n3-card h4 {
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--ink);
}
.n3-card p {
  font-size: 14.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.55;
}
.n3-dots { display: flex; gap: 8px; margin-top: auto; }
.n3-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  animation: n3Bounce 1.4s ease-in-out infinite;
}
.n3-dots span:nth-child(2) { animation-delay: 0.15s; }
.n3-dots span:nth-child(3) { animation-delay: 0.30s; }
.n3-card--orange .n3-dots span { background: var(--accent); }
.n3-card--violet .n3-dots span { background: #6D3BF0; }
.n3-card--green  .n3-dots span { background: #16A34A; }
@keyframes n3Bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .n3-dots span { animation: none; }
}

/* ============================================================
   To get · the payoff beat that closes the three jobs
   ============================================================ */
.tg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-top: 140px;
  padding-bottom: 96px;
  overflow: hidden;
}
.tg::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(760px, 92%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,122,26,0.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.tg > *:not(.tg-field) { position: relative; z-index: 1; }

/* Drifting glass panels; the wrapper floats, the svg inside sways on its own cycle */
.tg-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.tg-panel {
  position: absolute;
  width: var(--s);
  animation: tgFloat var(--dur) ease-in-out infinite;
  animation-delay: var(--dl);
}
.tg-panel > svg {
  width: 100%;
  height: auto;
  overflow: visible;
  animation: tgSway var(--spin) ease-in-out infinite;
  animation-delay: var(--dl);
}
@keyframes tgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes tgSway {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* One glass language shared by every panel: tinted body, soft stroke, detail at two weights */
.gp-body  { fill: var(--c); fill-opacity: 0.1; stroke: var(--c); stroke-opacity: 0.38; stroke-width: 1.5; }
.gp-line  { fill: none; stroke: var(--c); stroke-opacity: 0.55; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-thin  { fill: none; stroke: var(--c); stroke-opacity: 0.38; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-area  { fill: var(--c); fill-opacity: 0.2; }
.gp-dot   { fill: var(--c); fill-opacity: 0.6; }
.gp-solid { fill: var(--c); fill-opacity: 0.85; }
.gp-mid   { fill: var(--c); fill-opacity: 0.42; }
.gp-faint { fill: var(--c); fill-opacity: 0.18; }
/* Knocked out in the page ground so the toggle reads as a hole, not a dot */
.gp-knob  { fill: var(--bg); }
.gp-ring  { fill: none; stroke: var(--c); stroke-opacity: 0.22; stroke-width: 7; }
.gp-ring--on { stroke-opacity: 0.75; stroke-dasharray: 46 69; stroke-linecap: round; }

.tg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.tg-eyebrow {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,122,26,0.14);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tg-head {
  margin: 0;
  font-size: clamp(34px, 6.4vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 16ch;
}
.tg-line { display: block; }
.tg-w { display: inline-block; }
.tg-w--ink { color: var(--accent); }
.tg-sub {
  margin: 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .tg-panel { animation: none; }
  .tg-panel > svg { animation: none; transform: rotate(-5deg); }
}

/* Scroll-driven word reveal; browsers without view() timelines just show the text */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tg-w {
      opacity: 0;
      transform: translateY(0.32em);
      animation: tgWord linear both;
      animation-timeline: view();
      animation-range: entry calc(12% + var(--w) * 7%) entry calc(52% + var(--w) * 7%);
    }
    @keyframes tgWord {
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Below this the centred column reaches the margins the cubes live in */
@media (max-width: 860px) {
  .tg-field { display: none; }
}
@media (max-width: 600px) {
  .tg { padding-bottom: 72px; gap: 16px; }
}

/* ============================================================
   Testimonials (vanilla port of sshahaider/testimonials-columns-1)
   ============================================================ */
.testimonials { padding-bottom: 80px; }
.t-columns {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  height: 600px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  overflow: hidden;
}
.t-col { display: flex; flex-direction: column; }
.t-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: tScroll 28s linear infinite;
  will-change: transform;
}
.t-col-1 .t-track { animation-duration: 28s; }
.t-col-2 .t-track { animation-duration: 36s; animation-direction: reverse; }
.t-col-3 .t-track { animation-duration: 32s; }
.t-track:hover { animation-play-state: paused; }
@keyframes tScroll {
  to { transform: translateY(-50%); }
}
.t-card {
  padding: 28px 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(255,122,26,0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.t-text {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}
/* the card is a flex column with an 18px gap, so the note pulls back against the quote */
.t-note {
  margin: -10px 0 0;
  font-size: 12px; line-height: 1.4;
  color: var(--muted);
}
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--av, var(--accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.t-meta { line-height: 1.3; min-width: 0; }
.t-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.t-role { font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .t-track { animation: none; }
}
@media (max-width: 880px) {
  .t-columns { grid-template-columns: 1fr 1fr; height: 540px; }
  .t-col-3 { display: none; }
}
@media (max-width: 640px) {
  .testimonials { padding-bottom: 56px; }
  .t-columns {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    height: auto;
    gap: 12px;
    padding: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .t-col { width: 100%; overflow: hidden; }
  .t-col-3 { display: none; }
  .t-track {
    flex-direction: row;
    width: max-content;
    gap: 12px;
    padding: 0 16px;
    animation-name: tScrollX;
  }
  .t-col-1 .t-track { animation-duration: 42s; animation-direction: normal; }
  .t-col-2 .t-track { animation-duration: 48s; animation-direction: reverse; }
  .t-card {
    width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    padding: 18px 18px 16px;
    gap: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(255,122,26,0.05);
  }
  .t-text { font-size: 13.5px; line-height: 1.5; }
  .t-author { gap: 10px; }
  .t-avatar { width: 34px; height: 34px; font-size: 12px; }
  .t-name { font-size: 13px; }
  .t-role { font-size: 12px; }
}
@keyframes tScrollX {
  to { transform: translateX(-50%); }
}

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta {
  padding-top: 40px;
  padding-bottom: 80px;
}
.fc-card {
  /* the heading sizes off this box, not the viewport, so it fits on one line
     whatever the card is actually given */
  container-type: inline-size;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) clamp(28px, 5vw, 64px);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--ink) 0%, #1a1a1a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fc-card::before {
  content: "";
  position: absolute;
  top: -120px; left: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,122,26,0.22), transparent 70%);
  pointer-events: none;
}
.fc-card::after {
  content: "";
  position: absolute;
  bottom: -120px; right: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(109,59,240,0.18), transparent 70%);
  pointer-events: none;
}
.fc-card h2 {
  position: relative; z-index: 1;
  /* 7cqi holds the longest of these headings, "Ready to stop guessing?", on one
     line; the card clips rather than scrolling if a longer one is ever written */
  font-size: clamp(24px, 7cqi, 52px);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 20px;
  color: #fff;
}
/* Under 430px one line would mean an unreadable heading, so it wraps instead. */
@media (max-width: 430px) {
  .fc-card h2 { white-space: normal; font-size: 28px; }
}
.fc-card p {
  position: relative; z-index: 1;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255,255,255,0.72);
  margin: 0 auto 32px;
  max-width: 56ch;
  line-height: 1.55;
}
.fc-actions {
  position: relative; z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.fc-actions .cta-pill {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 999px;
}
.fc-actions .cta-pill--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255,122,26,0.32);
}
.fc-actions .cta-pill--primary:hover {
  background: var(--accent-2);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(255,122,26,0.4);
}
.fc-actions .cta-pill--ghost-dark {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
}
.fc-actions .cta-pill--ghost-dark:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-2px);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 280ms var(--ease);
  font-family: inherit;
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: color 280ms var(--ease), transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-q:hover .faq-icon { color: var(--accent); }
.faq-item.is-open .faq-icon {
  color: var(--accent);
  transform: rotate(180deg);
}
.faq-icon svg { width: 22px; height: 22px; overflow: visible; }
.faq-icon-v {
  transform-origin: 12px 12px;
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
}
.faq-item.is-open .faq-icon-v {
  transform: scaleY(0);
  opacity: 0;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a p {
  margin: 0;
  padding: 0 0 32px;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--muted);
  line-height: 1.65;
  max-width: 68ch;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 420ms ease 120ms, transform 420ms cubic-bezier(0.4, 0, 0.2, 1) 120ms;
}
.faq-item.is-open .faq-a p {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon, .faq-icon-v, .faq-a, .faq-a p, .faq-q {
    transition: none !important;
  }
}

/* ============================================================
   DEMO CARD VARIANTS · D1–D5
   ============================================================ */
.dm-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 18px;
}
@media (max-width: 900px) { .dm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dm-grid { grid-template-columns: 1fr; } }

/* ----- D6 · Browser frame + live iframe (hybrid) ----- */
.d6-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 320ms var(--ease);
}
.d6-card:hover { transform: translateY(-4px); }
.d6-frame {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(10,10,10,0.08);
  transition: box-shadow 320ms var(--ease);
}
.d6-card:hover .d6-frame { box-shadow: 0 26px 56px rgba(10,10,10,0.16); }
.d6-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: #F1EEE9;
  border-bottom: 1px solid var(--line);
}
.d6-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.d6-url {
  margin-left: 10px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.7);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.d6-screen {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #fff;
}
.d6-screen iframe {
  position: absolute;
  top: 0; left: 0;
  width: 333.333%;
  height: 333.333%;
  transform: scale(0.3);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
  background: #fff;
}
.d6-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.d6-card:hover .d6-overlay { opacity: 1; }
.d6-launch {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(255,122,26,0.50), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: scale(0.72) rotate(-12deg);
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.d6-card:hover .d6-launch { transform: scale(1) rotate(0); }
.d6-launch svg { width: 22px; height: 22px; }
.d6-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  text-align: center;
}

/* ============================================================
   Demo info modal
   ============================================================ */
html.dmod-open { overflow: hidden; }
.dmod {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.dmod.is-open { display: flex; animation: dmodFade 240ms ease; }
@keyframes dmodFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dmod-card {
  position: relative;
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 48px) clamp(28px, 4vw, 44px) clamp(28px, 4vw, 40px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.40);
  animation: dmodPop 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dmodPop {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
.dmod-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 240ms var(--ease);
}
.dmod-close:hover {
  background: var(--ink);
  color: #fff;
  transform: rotate(90deg);
}
.dmod-close svg { width: 16px; height: 16px; }
/* Wears the capability modal's theme (assets/css/service.css), so a demo and a
   service card do not read as two different products. */
.dmod-card {
  --svc-ink: var(--accent);
  --svc-ink-2: #FFB26B;
  --svc-rgb: 255,122,26;
}
.dmod-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-ink);
  margin-bottom: 10px;
}
.dmod-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--svc-ink);
  box-shadow: 0 0 8px rgba(var(--svc-rgb), 0.6);
}
.dmod-title {
  font-size: clamp(25px, 3.3vw, 31px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 14px;
  color: #131210;
  /* Balance evens the lines, so no title orphans its last word. */
  text-wrap: balance;
}
.dmod-desc {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.62;
  color: #56514A;
  text-wrap: pretty;
}
/* The label rides a hairline, so it reads as a divider and not a stray grey line. */
.dmod-how {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8B857C;
}
.dmod-how::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.09);
}
.dmod-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.dmod-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3A3630;
  min-width: 0;
}
.dmod-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--svc-rgb), 0.12);
  color: var(--svc-ink);
}
.dmod-check svg { width: 13px; height: 13px; }
.dmod-try {
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(var(--svc-rgb), 0.07);
  border: 1px solid rgba(var(--svc-rgb), 0.16);
  font-size: 13.5px;
  line-height: 1.55;
  color: #4A4640;
}
.dmod-try strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-ink);
  margin-bottom: 4px;
}
.dmod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.dmod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 190px;
  padding: 13px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  text-align: center;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), box-shadow 220ms var(--ease);
}
.dmod-btn svg { width: 14px; height: 14px; }
.dmod-btn--primary {
  background: linear-gradient(180deg, var(--svc-ink-2), var(--svc-ink));
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(var(--svc-rgb), 0.55);
}
.dmod-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(var(--svc-rgb), 0.7);
}
.dmod-btn--ghost {
  background: #fff;
  color: #17150F;
  border: 1.5px solid rgba(0, 0, 0, 0.16);
}
.dmod-btn--ghost:hover { border-color: rgba(0, 0, 0, 0.34); }

/* ============================================================
   We help · answers WHO, sits between the trust bar and What you get
   ============================================================ */
.wh {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--pad-section) clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.wh-copy { min-width: 0; }
.wh-copy .section-eyebrow { align-self: start; margin-bottom: 22px; }
/* accent eyebrow, same values as .tg-eyebrow so any section can opt in without an inline style */
.section-eyebrow--accent {
  background: rgba(255,122,26,0.14);
  color: var(--accent);
}
.wh-title {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  max-width: 14ch;
}
.wh-title .accent { color: var(--accent); }
/* aspect-ratio drives the height so the player never lays out at zero before load */
.wh-art {
  min-width: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 660 / 716;
  margin-inline-start: auto;
}
.wh-art svg { width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
  .wh { grid-template-columns: minmax(0, 1fr); }
  .wh-copy { text-align: center; }
  .wh-title { max-width: none; }
  .wh-art { margin-inline: auto; max-width: 300px; }
}

/* ============================================================
   Mobile pass
   ============================================================ */

/* Stacked "TO ...": a beat must bind to ITS card. v-grid and n3-col gaps were
   both 20px, so every header sat equidistant between two cards. */
@media (max-width: 900px) {
  .v-grid { gap: 44px 20px; }
  .n3-col { gap: 12px; }
}
@media (max-width: 600px) {
  .n3-beat { font-size: 25px; }
}

/* Floating panels return on mobile, scaled so they frame the column */
@media (max-width: 860px) {
  .tg-field { display: block; }
  .tg-panel { width: calc(var(--s) * 0.52); }
}
@media (max-width: 600px) {
  .tg-panel { width: calc(var(--s) * 0.42); }
}

/* "To get" headline holds two lines; max-width:16ch was forcing the third */
@media (max-width: 700px) {
  .tg-head { font-size: clamp(24px, 7vw, 34px); max-width: none; }
}

/* Light hero centres, and the typed line wraps instead of clipping off-screen */
@media (max-width: 900px) {
  .hero, .hero-text { text-align: center; }
  .hero h1, .hero .hero-title { max-width: none; }
  .hero-typer-line { text-align: center; }
  .hero-typer { white-space: pre-wrap; }
}

/* Demo cards: caption above its own frame, below it reads as a label for the next card */
@media (max-width: 900px) {
  .d6-card { flex-direction: column-reverse; }
  .d6-card h3 {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
}

/* Final CTA keeps both actions on one row */
@media (max-width: 600px) {
  .fc-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }
  .fc-actions .cta-pill {
    padding: 13px 16px;
    font-size: 14px;
    white-space: nowrap;
    min-height: 46px;
  }
}

/* Stacked demos: a hairline that fades out at both ends, centred in the gap,
   so each demo reads as its own block without a hard rule across the page */
@media (max-width: 600px) {
  .dm-grid { row-gap: 46px; }
  .d6-card { position: relative; }
  .d6-card + .d6-card::after {
    content: "";
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: min(240px, 62%);
    height: 1px;
    background: linear-gradient(90deg, rgba(10,10,10,0), rgba(10,10,10,0.16), rgba(10,10,10,0));
  }
}

/* ------------------------------------------------------------
   "To get" on a phone.
   The inline panel coordinates assume a wide section with empty margins
   either side of a centred text column. On a phone there is no beside:
   the column is the full width, so those percentages land the panels on
   the text. Below, all six are re-placed into the empty bands above the
   eyebrow and below the buttons, and the bands are widened to hold them.
   !important is required: the positions are inline style attributes.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .tg { padding-top: 152px; padding-bottom: 138px; }

  /* top band */
  .tg-panel:nth-child(1) { width: 64px; left: 3% !important;  right: auto !important; top: 46px !important; bottom: auto !important; }
  .tg-panel:nth-child(6) { width: 46px; left: 38% !important; right: auto !important; top: 8px  !important; bottom: auto !important; }
  .tg-panel:nth-child(2) { width: 54px; left: auto !important; right: 4% !important;  top: 40px !important; bottom: auto !important; }

  /* bottom band */
  .tg-panel:nth-child(3) { width: 58px; left: 4% !important;  right: auto !important; bottom: 36px !important; top: auto !important; }
  .tg-panel:nth-child(5) { width: 44px; left: 43% !important; right: auto !important; bottom: 6px  !important; top: auto !important; }
  .tg-panel:nth-child(4) { width: 64px; left: auto !important; right: 3% !important;  bottom: 50px !important; top: auto !important; }

  /* +10% on the headline, still two lines */
  .tg-head { font-size: clamp(25px, 7.6vw, 37px); max-width: none; }
}

/* Cards say they are clickable. Three bouncing dots read as loading, not "more". */
.n3-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.n3-more svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 320ms var(--ease); }
.n3-card:hover .n3-more svg { transform: translateX(3px); }
.n3-card--orange .n3-more { color: var(--accent); }
.n3-card--violet .n3-more { color: #6D3BF0; }
.n3-card--green  .n3-more { color: #16A34A; }

/* ------------------------------------------------------------
   "To get" on a phone, rebuilt.
   Six panels at six sizes scattered round a 375px column reads as
   clutter, and pushing them into wide bands only opened voids between
   them and the content. Four panels, one size, one inset, cropped
   evenly by the section edge: a frame instead of a scatter.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .tg { padding-top: 104px; padding-bottom: 100px; gap: 18px; }

  /* four is the ceiling at this width */
  .tg-panel:nth-child(5),
  .tg-panel:nth-child(6) { display: none; }

  /* one size, one inset, so the four read as a set */
  .tg-panel:nth-child(1),
  .tg-panel:nth-child(2),
  .tg-panel:nth-child(3),
  .tg-panel:nth-child(4) { width: 58px; }

  .tg-panel:nth-child(1) { left: -14px !important; right: auto !important; top: 30px !important;    bottom: auto !important; }
  .tg-panel:nth-child(2) { left: auto !important;  right: -14px !important; top: 30px !important;   bottom: auto !important; }
  .tg-panel:nth-child(3) { left: -14px !important; right: auto !important; bottom: 30px !important; top: auto !important; }
  .tg-panel:nth-child(4) { left: auto !important;  right: -14px !important; bottom: 30px !important; top: auto !important; }

  /* the float lifts 18px; halve it so a cropped panel does not bob out of frame */
  .tg-panel { animation-name: tgFloatSm; }
}
@keyframes tgFloatSm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ------------------------------------------------------------
   "To get" mobile, round 2: panels fully on screen, headline +12%.
   The string "Smaller working week." runs about 10.2x its font-size, so
   at +12% it needs ~347px at 375w. Side padding comes down to 14px to
   buy that, or the line breaks into a third row again.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .tg { padding-left: 14px; padding-right: 14px; }
  .tg-head { font-size: clamp(26px, 8.5vw, 41px); }

  /* fully inside the viewport, nothing cropped by the section edge */
  .tg-panel:nth-child(1),
  .tg-panel:nth-child(2),
  .tg-panel:nth-child(3),
  .tg-panel:nth-child(4) { width: 50px; }

  .tg-panel:nth-child(1) { left: 12px !important; right: auto !important; top: 28px !important;    bottom: auto !important; }
  .tg-panel:nth-child(2) { left: auto !important; right: 12px !important; top: 28px !important;    bottom: auto !important; }
  .tg-panel:nth-child(3) { left: 12px !important; right: auto !important; bottom: 28px !important; top: auto !important; }
  .tg-panel:nth-child(4) { left: auto !important; right: 12px !important; bottom: 28px !important; top: auto !important; }
}

/* ------------------------------------------------------------
   Hero actions stay on one row on a phone.
   At 15px with 22px padding the pair needs ~369px against 335px
   available at 375w, hence the wrap. Type and padding come down and
   the row is pinned nowrap.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .hsr-content { padding: 0 14px; }
  .hsr-actions { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .hsr-btn {
    padding: 13px 14px;
    font-size: clamp(12.5px, 3.5vw, 14px);
    gap: 6px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
  }
  .hsr-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
}

/* beats +15% on mobile; the bullet scales with them so the pair stays in proportion */
@media (max-width: 600px) {
  .n3-beat { font-size: 28.75px; }
  .n3-beat::before { width: 9px; height: 9px; }
}

/* All six panels on mobile: four corners plus two centre accents, sat higher
   and lower than the corners so they clear the pill and the buttons.
   Centred with calc(), never transform, because the float owns transform. */
@media (max-width: 700px) {
  .tg-panel:nth-child(5),
  .tg-panel:nth-child(6) { display: block; width: 42px; }

  .tg-panel:nth-child(6) { left: calc(50% - 21px) !important; right: auto !important; top: 2px !important;    bottom: auto !important; }
  .tg-panel:nth-child(5) { left: calc(50% - 21px) !important; right: auto !important; bottom: 2px !important; top: auto !important; }
}

/* ------------------------------------------------------------
   Scatter, not grid.
   The previous pass made all six one size at one inset, mirrored top to
   bottom and aligned in rows. Uniformity is right for a grid and wrong
   for a scatter: it reads mechanical. Sizes 40-60, insets 8-16, heights
   staggered, no mirrored pair. All six still wholly on screen.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .tg-panel:nth-child(1) { width: 56px; left: 8px  !important; right: auto !important; top: 38px !important;    bottom: auto !important; }
  .tg-panel:nth-child(6) { width: 44px; left: 44%  !important; right: auto !important; top: 6px  !important;    bottom: auto !important; }
  .tg-panel:nth-child(2) { width: 50px; left: auto !important; right: 14px !important; top: 26px !important;    bottom: auto !important; }

  .tg-panel:nth-child(3) { width: 52px; left: 16px !important; right: auto !important; bottom: 46px !important; top: auto !important; }
  .tg-panel:nth-child(5) { width: 40px; left: 40%  !important; right: auto !important; bottom: 8px  !important; top: auto !important; }
  .tg-panel:nth-child(4) { width: 60px; left: auto !important; right: 8px  !important; bottom: 22px !important; top: auto !important; }
}

/* Panel placement per Khasan's marked-up screenshot: browser right, toggle
   down and right, calendar down, pink up and right, stars up beside the
   buttons. Chart stays where it was, it was the one with no arrow. */
@media (max-width: 700px) {
  .tg-panel:nth-child(1) { width: 56px; left: 34px !important; right: auto !important; top: 38px !important;    bottom: auto !important; }
  .tg-panel:nth-child(6) { width: 44px; left: 50%  !important; right: auto !important; top: 36px !important;    bottom: auto !important; }
  .tg-panel:nth-child(2) { width: 50px; left: auto !important; right: 14px !important; top: 58px !important;    bottom: auto !important; }

  .tg-panel:nth-child(3) { width: 52px; left: 16px !important; right: auto !important; bottom: 46px !important; top: auto !important; }
  .tg-panel:nth-child(5) { width: 40px; left: 57%  !important; right: auto !important; bottom: 49px !important; top: auto !important; }
  .tg-panel:nth-child(4) { width: 60px; left: auto !important; right: 8px  !important; bottom: 88px !important; top: auto !important; }
}

/* Push the whole To get block away from the section above it.
   margin, not padding: the panels are absolutely positioned against the
   section box, so padding would move the content down and leave them behind. */
@media (max-width: 700px) {
  .tg { margin-top: 48px; }
}

/* and the same clearance below it, off the light hero */
@media (max-width: 700px) {
  .tg { margin-bottom: 48px; }
}

/* Too busy at phone width: drop the two centre accents, they sit in the
   reading path above the pill and below the buttons. Corners stay. */
@media (max-width: 700px) {
  .tg-panel:nth-child(5),
  .tg-panel:nth-child(6) { display: none; }
}

/* Cards down ~10% on mobile: box, padding, icon and type together so the
   proportions hold rather than just squeezing the frame */
@media (max-width: 600px) {
  .n3-card { max-width: 90%; padding: 29px 23px 25px; }
  .n3-card h4 { font-size: 19px; margin-bottom: 7px; }
  .n3-card p { font-size: 13px; margin-bottom: 16px; }
  .n3-card .v-icon { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 18px; }
  .n3-card .v-icon svg { width: 43px; height: 43px; }
  .n3-more { font-size: 12px; }
  .n3-more svg { width: 13px; height: 13px; }
}

/* The pink card below "Get in touch" comes back; only the top-centre toggle
   stays hidden on mobile */
@media (max-width: 700px) {
  .tg-panel:nth-child(5) { display: block; }
}

/* pink panel down 20px */
@media (max-width: 700px) {
  .tg-panel:nth-child(5) { bottom: 29px !important; }
}

/* ---------- Legal pages (privacy, terms, 404) ---------- */
/* These pages load no page script, so nothing ever adds .is-scrolled and the fixed bar would
   stay off screen: on a legal page the bar sits in flow instead. */
.legal-doc .topbar { position: sticky; transform: none; opacity: 1; }
.legal-doc main { overflow: visible; }

.legal-wrap {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.legal-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.legal-title { font-size: clamp(30px, 7vw, 46px); line-height: 1.06; letter-spacing: -0.02em; }
.legal-date { margin-top: 12px; font-size: 14px; color: var(--muted); }
.legal-lead { margin-top: 18px; font-size: 18px; color: var(--ink); }

.legal-body { margin-top: 32px; }
.legal-body h2 { margin: 34px 0 10px; font-size: 20px; }
.legal-body h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.legal-body p { margin: 0 0 14px; font-size: 16px; }
.legal-body ul { list-style: disc; margin: 0 0 16px; padding-left: 20px; }
.legal-body li { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.legal-body li strong, .legal-body p strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--accent); }

.legal-note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin: 0 0 22px;
}
.legal-note p:last-child { margin-bottom: 0; }

.legal-404 { max-width: 620px; margin: 0 auto; padding: 72px 20px 88px; text-align: center; }
.legal-404-code { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.legal-404 .legal-title { margin-top: 12px; }
.legal-404 p { margin-top: 16px; }
.legal-404-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.legal-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600; font-size: 14px;
  transition: border-color 200ms var(--ease), transform 150ms var(--ease);
}
.legal-btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

.legal-footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.legal-footer-links a { color: rgba(255,255,255,0.62); transition: color 150ms var(--ease); }
.legal-footer-links a:hover { color: #fff; }
.legal-nap {
  max-width: 1200px;
  margin: 14px auto 0;
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,0.42);
  text-align: center;
}

@media (min-width: 720px) {
  .legal-wrap { padding: 64px 24px 88px; }
  .legal-nap { text-align: left; }
}