/* ========== TOKENS ========== */
:root {
  --bg: #ffffff;
  --bg-soft: #fafaf9;
  --bg-card: #ffffff;
  --bg-tint: #f4f4f3;
  --ink: #0a0a0a;
  --ink-2: rgba(10, 10, 10, 0.62);
  --ink-3: rgba(10, 10, 10, 0.42);
  --ink-4: rgba(10, 10, 10, 0.22);
  --line: rgba(10, 10, 10, 0.08);
  --line-2: rgba(10, 10, 10, 0.14);
  --accent: #00b341;          /* live green for type on white */
  --accent-hi: #39ff14;       /* neon ring/dot */
  --accent-soft: rgba(0, 179, 65, 0.08);
  --warn: #ff9500;
  --danger: #ff3b30;

  --fh: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;

  --shadow-1: 0 1px 2px rgba(10,10,10,.04), 0 2px 8px rgba(10,10,10,.04);
  --shadow-2: 0 4px 16px rgba(10,10,10,.06), 0 16px 40px rgba(10,10,10,.06);
  --shadow-3: 0 12px 32px rgba(10,10,10,.08), 0 40px 80px rgba(10,10,10,.10);
  --shadow-phone: 0 30px 60px -20px rgba(10,10,10,.25), 0 60px 120px -40px rgba(10,10,10,.20);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  /* Subtle warmth */
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(0,179,65,.025), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(10,10,10,.02), transparent 60%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ========== TYPE ========== */
.mono { font-family: var(--fm); font-weight: 500; letter-spacing: .04em; }
.mono-up { font-family: var(--fm); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

.h-display {
  font-family: var(--fh);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-size: clamp(44px, 9vw, 116px);
}
.h-section {
  font-family: var(--fh);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 0.95;
  font-size: clamp(36px, 6vw, 80px);
}
.h-card {
  font-family: var(--fh);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2.6vw, 32px);
}
.lead {
  font-family: var(--fh);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
}
.kicker {
  font-family: var(--fm);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ========== LAYOUT ========== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 24px;
}
@media (max-width: 640px) {
  .container { padding-inline: 18px; }
}
section { position: relative; }

/* ========== NAV ========== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fh); font-weight: 800; letter-spacing: -.02em;
  font-size: 18px;
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 0 4px rgba(57,255,20,.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px; color: var(--ink-2); font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding-inline: 22px;
  border-radius: 999px;
  font-family: var(--fh); font-weight: 600; font-size: 15px;
  letter-spacing: -.005em;
  border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 18px rgba(10,10,10,.18), inset 0 -1px 0 rgba(255,255,255,.1);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(10,10,10,.28); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--bg-tint); }
.btn-sm { height: 40px; font-size: 13px; padding-inline: 16px; }

/* ========== CHIPS ========== */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding-inline: 12px; border-radius: 999px;
  background: var(--bg-tint);
  font-family: var(--fm); font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.chip.live {
  background: var(--accent-soft);
  color: #066d2b;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 0 3px rgba(57,255,20,.25);
  animation: pulse 2s ease-in-out infinite;
}

/* ========== HERO ========== */
/* Cinematic hero (ref: Fluxora/AgentAI) — dark full-bleed with rim-lit photo */
.hero-cine { background: #0a0a0a; border-radius: 0 0 36px 36px; overflow: hidden; }
.hero-cine::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 140px; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg) 92%); }
html[data-theme="dark"] .hero-cine::after { background: linear-gradient(180deg, transparent, #0b0b0b 92%); }
/* WOW transition: statement rises into view under hero */
.statement { position: relative; margin-block-start: -40px; z-index: 5; }
.statement .st-rule { animation: st-rule-grow 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes st-rule-grow { from { width: 0; opacity: 0; } to { width: 64px; opacity: 1; } }
.hero-cine-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-cine-bg .hcb-img { position: absolute; inset: 0; inset-inline-start: 42%; background-size: cover; background-position: center 20%; filter: grayscale(.15) contrast(1.05); }
.hero-cosmos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 1; pointer-events: none; }
.hero-cine-bg .hcb-img { z-index: 1; }
.hero-cine-bg .hcb-glow, .hero-cine-bg .hcb-scan, .hero-cine-bg .hcb-fade, .hero-cine-bg .hcb-grid { z-index: 2; }
.hero-cine-bg .hcb-glow { position: absolute; inset: 0; background: radial-gradient(60% 70% at 72% 42%, rgba(57,255,20,.28), transparent 60%), radial-gradient(40% 50% at 90% 10%, rgba(57,255,20,.14), transparent 60%); mix-blend-mode: screen; }
.hero-cine-bg .hcb-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0a 30%, rgba(10,10,10,.75) 48%, rgba(10,10,10,.15) 72%, rgba(10,10,10,.5) 100%); }
.hero-cine-bg .hcb-scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; opacity: .5; }
.hero-cine-bg .hcb-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,255,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(60% 60% at 75% 40%, #000, transparent 70%); mask: radial-gradient(60% 60% at 75% 40%, #000, transparent 70%); opacity: .6; }
html[dir="rtl"] .hero-cine-bg .hcb-img { inset-inline-start: auto; inset-inline-end: 42%; background-position: center 20%; }
html[dir="rtl"] .hero-cine-bg .hcb-fade { background: linear-gradient(-90deg, #0a0a0a 30%, rgba(10,10,10,.75) 48%, rgba(10,10,10,.15) 72%, rgba(10,10,10,.5) 100%); }
.hero-cine::before { display: none; }
.hero-scrollcue { position: absolute; inset-block-end: 20px; inset-inline: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.hero-scrollcue .hsc-txt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hero-scrollcue .hsc-line { width: 1px; height: 40px; background: linear-gradient(180deg, var(--accent-hi), transparent); position: relative; overflow: hidden; }
.hero-scrollcue .hsc-line::after { content: ""; position: absolute; inset-inline: 0; height: 14px; background: var(--accent-hi); box-shadow: 0 0 8px rgba(57,255,20,.7); animation: hsc-run 1.8s ease-in-out infinite; }
@keyframes hsc-run { 0% { inset-block-start: -14px; } 100% { inset-block-start: 40px; } }
@media (max-width: 900px) { .hero-scrollcue { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-scrollcue .hsc-line::after { animation: none; } }
.hero-cine .hero-grid { grid-template-columns: 1.15fr .85fr; }
.hero-cine .ribbon { background: rgba(255,255,255,.08); color: #fff; }
.hero-cine .hero-title { color: #fff; animation: hero-title-in 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-title-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .hero-cine .hero-title { animation: none; } }
.hero-cine .hero-title .ht-w { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero-title { font-size: clamp(48px, 9.5vw, 132px); }
.hero-title .ht-line:nth-child(2) .ht-w { font-size: 1.08em; }
.hero-cine .lead { color: rgba(255,255,255,.72); }
.hero-cine .lead b { color: #fff !important; }
.hero-cine .name-forge { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-cine .name-forge-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.hero-cine .name-forge-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.hero-cine .name-forge-card .nfc-name { color: #fff; }
.hero-cine .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.hero-cine .btn-ghost:hover { background: rgba(255,255,255,.08); }
.hero-cine .hero-proof { color: rgba(255,255,255,.6); }
.hero-cine .hero-proof b { color: #fff; }
.hero-cine .hero-ticker { color: rgba(255,255,255,.6); }
.hero-cine .hero-title .ht-green { background: linear-gradient(180deg,#5bff42,#39ff14 60%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-cine .hero-title .ht-dot-accent { background: linear-gradient(180deg,#5bff42,#39ff14 60%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-cine .phone-stage { min-height: 560px; }
@media (max-width: 980px) {
  .hero-cine .hero-grid { grid-template-columns: 1fr; }
  .hero-cine-bg .hcb-img { inset-inline: 0; opacity: .22; }
  html[dir="rtl"] .hero-cine-bg .hcb-img { inset-inline: 0; }
  .hero-cine-bg .hcb-fade { background: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.15) 45%, #0a0a0a 88%); }
  .hero-cosmos { opacity: 1; height: 100%; }
  .hero-cine .phone-stage { position: relative; }
  .hero-cine .phone { box-shadow: var(--shadow-phone), 0 0 60px -18px rgba(57,255,20,.5); }
}

.hero {
  padding-block: 64px 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -15%;
  width: 55vw; height: 55vw; max-width: 720px; max-height: 720px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  filter: blur(8px); animation: hero-aura 16s ease-in-out infinite;
}
@keyframes hero-aura { 0%,100% { transform: translate(0,0) scale(1); opacity: .8; } 50% { transform: translate(-3%,4%) scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
@media (max-width: 720px) {
  .hero { padding-block: 32px 56px; }
  .hero::before { inset-block-start: -12%; width: 90vw; height: 90vw; opacity: .6; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.hero h1 .strike {
  display: inline-block;
  color: var(--accent);
}
.hero h1 .glow {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 60%, #2a2a2a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-block-start: 28px;
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-block-start: 32px;
}

.hero-proof {
  display: flex; align-items: center; gap: 14px;
  margin-block-start: 28px;
  color: var(--ink-2); font-size: 13px;
}
.hero-proof .avatars { display: flex; }
.hero-proof .avatars > div {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff;
  background-size: cover; background-position: center;
}
.hero-proof .avatars > div + div { margin-inline-start: -10px; }

/* HERO V2 — transformation title + live profile forge + ticker */
.hero-v2 .h-display { letter-spacing: -.04em; line-height: 1.08; }

/* Premium word-by-word cut-reveal title */
.hero-v2 .h-display.hero-title { line-height: 1.16; }
.hero-title { line-height: 1.16; font-size: clamp(46px, 8.7vw, 124px); font-weight: 900; letter-spacing: -.05em; }
.hero-eyebrow-brand { display: inline-flex; align-items: center; gap: 7px; }
.hero-title .ht-line { display: block; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.hero-title .ht-w {
  display: inline-block;
  clip-path: inset(-8% 0 -12% 0);
  transform: translateY(114%) rotate(2.5deg);
  opacity: 0;
  animation: ht-rise 1s cubic-bezier(.16,1,.3,1) forwards;
  will-change: transform;
}
/* failsafe: if animations never run, words rest visible (no permanent overlap) */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .ht-w { animation-fill-mode: both; }
}
.no-anim .hero-title .ht-w { animation: none !important; transform: none !important; opacity: 1 !important; }
.hero-title .ht-line:nth-child(1) .ht-w:nth-child(1) { animation-delay: .08s; }
.hero-title .ht-line:nth-child(1) .ht-w:nth-child(2) { animation-delay: .18s; }
.hero-title .ht-accent-line .ht-w { animation-delay: .30s; }
.hero-title .ht-line:nth-child(3) .ht-w:nth-child(1) { animation-delay: .46s; }
.hero-title .ht-line:nth-child(3) .ht-w:nth-child(2) { animation-delay: .56s; }
@keyframes ht-rise { to { transform: none; opacity: 1; } }

/* Accent word treatment — green ink (brand: rare green, no heavy block) */
.hero-title .ht-green {
  background: linear-gradient(180deg, var(--accent) 0%, #059b3b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title .ht-dot-accent { background: linear-gradient(180deg, var(--accent) 0%, #059b3b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; opacity: 0; animation: ht-dot-pop .5s cubic-bezier(.34,1.56,.64,1) 1s forwards; }
@keyframes ht-dot-pop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 720px) {
  .hero-title { font-size: clamp(42px, 13vw, 68px); }
}
.hero-v2 .h-display .strike { position: relative; display: inline-block; }
.hero-v2 .h-display .strike::after {
  content: ""; position: absolute; inset-inline: -2%; inset-block-end: 12%;
  height: 10%; background: var(--accent-hi); opacity: .9; z-index: -1;
  transform: scaleX(0); transform-origin: 100% 50%;
  animation: cut-underline 1s cubic-bezier(.7,0,.3,1) .5s forwards;
}
@keyframes cut-underline { to { transform: scaleX(1); } }

.name-forge { margin-block-start: 26px; max-width: 460px; }
.name-forge label { display: block; margin-block-end: 8px; }
.name-forge-input {
  width: 100%; height: 48px; padding-inline: 16px;
  background: var(--bg-tint); border: 1px solid var(--line-2); border-radius: 12px;
  font-family: var(--fh); font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  color: var(--ink); outline: none; caret-color: var(--accent);
  transition: border-color .2s, background .2s;
}
.name-forge-input:focus { border-color: var(--accent); background: #fff; }
.name-forge-input::placeholder { color: var(--ink-3); font-weight: 500; }
.name-forge-card {
  margin-block-start: 10px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-1); opacity: .6; transform: translateY(4px) scale(.99);
  transition: opacity .3s, transform .3s, box-shadow .3s, border-color .3s;
}
.name-forge-card.live { opacity: 1; transform: none; box-shadow: var(--shadow-2); border-color: var(--accent-mid, rgba(0,179,65,.22)); }
.name-forge-card .nfc-av { position: relative; width: 46px; height: 46px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--bg-tint); flex-shrink: 0; }
.name-forge-card .nfc-live-dot { position: absolute; inset-inline-end: -3px; inset-block-end: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent-soft); animation: pulse 1.6s ease-in-out infinite; } box-shadow: 0 0 0 2px rgba(57,255,20,.25); animation: pulse 1.6s ease-in-out infinite; }
.name-forge-card .nfc-meta { flex: 1; min-width: 0; }
.name-forge-card .nfc-name { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.name-forge-card .nfc-url { font-family: var(--fm); font-size: 11px; color: var(--ink-3); direction: ltr; margin-block-start: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-forge-card .nfc-slug { color: var(--accent); font-weight: 600; }
.name-forge-card .nfc-cta { flex-shrink: 0; background: var(--ink); color: #fff; font-family: var(--fh); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; }

.hero-ticker-wrap { line-height: 1.5; }
.hero-ticker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fm); font-size: 11px; color: var(--ink-2); letter-spacing: .02em; animation: ticker-in .5s ease; }
.hero-ticker .ht-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes ticker-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .hero-v2 .h-display { font-size: clamp(40px, 12vw, 60px); }
  .hero-v2 .h-display.hero-title { font-size: clamp(40px, 12.5vw, 62px); line-height: 1.18; }
  .name-forge, .name-forge-card { max-width: none; }
}

/* editorial glass stat chips (inspired by ref decks) */
.hero-stat-chip { position: absolute; z-index: 4; padding: 16px 20px 14px; border-radius: 18px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 40px -18px rgba(10,10,10,.28); min-width: 120px;
  animation: floaty 5.5s ease-in-out infinite; }
html[data-theme="dark"] .hero-stat-chip { background: rgba(30,30,30,.6); border-color: rgba(255,255,255,.12); }
.hero-stat-chip.hsc-a { inset-inline-end: 8px; top: 16%; }
.hero-stat-chip.hsc-b { inset-inline-start: 6px; inset-block-end: 20%; animation-delay: 1.6s; }
.hsc-star { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; color: var(--accent); font-size: 12px; }
.hsc-n { font-family: var(--fm); font-weight: 800; font-size: 34px; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.hsc-n .hsc-dn { color: var(--accent); font-size: 20px; margin-inline-start: 2px; }
.hsc-l { margin-block-start: 6px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 560px) { .hero-stat-chip { transform: scale(.85); } .hero-stat-chip.hsc-a { inset-inline-end: 4px; } .hero-stat-chip.hsc-b { inset-inline-start: 2px; } }
@media (prefers-reduced-motion: reduce) { .hero-stat-chip { animation: none; } }

/* editorial statement band */
.partners { overflow: hidden; padding-block: 34px; border-block: 1px solid var(--line); position: relative; margin-block-end: 8px; }
.partners::before, .partners::after { content: ""; position: absolute; inset-block: 0; width: 140px; z-index: 2; pointer-events: none; }
.partners::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.partners::after { inset-inline-end: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.partners-lbl { text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 18px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; }
.partners-lbl::before, .partners-lbl::after { content: ""; width: 30px; height: 1px; background: var(--accent); opacity: .5; }
.partners-track { display: flex; flex-wrap: nowrap; gap: 44px; padding-inline-end: 44px; white-space: nowrap; width: max-content; animation: partners-scroll 120s linear infinite; will-change: transform; }
.partners:hover .partners-track { animation-play-state: paused; }
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .partners-track { animation-name: partners-scroll-rtl; }
@keyframes partners-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.partners-item { flex: none; display: inline-flex; align-items: center; gap: 44px; font-family: var(--fh); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink-3); transition: color .3s; }
.partners-item:hover { color: var(--ink); }
.partners-dot { color: var(--accent); font-size: 12px; }
html[data-theme="dark"] .partners-dot { color: var(--accent-hi); }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }
.statement { padding-block: clamp(72px, 12vw, 140px); text-align: center; position: relative; overflow: hidden; }
.statement .st-in { max-width: 1000px; margin-inline: auto; position: relative; z-index: 1; }
.statement .st-eyebrow { display: block; color: var(--accent); margin-block-end: 18px; letter-spacing: .16em; }
html[data-theme="dark"] .statement .st-eyebrow { color: var(--accent-hi); }
.statement h2 { font-size: clamp(34px, 6.5vw, 82px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.statement h2 .st-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; color: var(--accent); }
html[data-theme="dark"] .statement h2 .st-serif { color: var(--accent-hi); }
.statement .st-sub { margin-block-start: 22px; font-size: clamp(16px, 2vw, 20px); color: var(--ink-2); max-width: 560px; margin-inline: auto; line-height: 1.5; }
.statement .st-rule { width: 64px; height: 3px; background: var(--accent); border-radius: 2px; margin: 0 auto 28px; }
html[data-theme="dark"] .statement .st-rule { background: var(--accent-hi); box-shadow: 0 0 16px rgba(57,255,20,.5); }
.statement .st-glow { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%); width: 70%; height: 120%; background: radial-gradient(circle, var(--accent-soft), transparent 60%); pointer-events: none; z-index: 0; animation: club-breathe 10s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .statement .st-glow { animation: none; } }
  /* Hero: single column, text-first, comfortable */
  .hero { padding-block: 28px 52px; }
  .hero-grid { gap: 40px; }
  .hero .lead { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .name-forge-input { height: 52px; font-size: 17px; }
  .hero-proof { flex-wrap: wrap; }
  .phone-stage { min-height: 560px; }
  /* Float cards would overflow narrow screens — tame them */
  .hero .float-card { transform: scale(.82); }
  .hero .float-card[style*="insetInlineStart"] { inset-inline-start: 0 !important; }
}
@media (max-width: 480px) {
  .hero-v2 .h-display.hero-title { font-size: clamp(34px, 13vw, 52px); }
  .hero .float-card { display: none; }
  .name-forge-card .nfc-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2 .h-display .strike::after { animation: none; transform: scaleX(1); }
  .hero-ticker, .name-forge-card .nfc-live-dot { animation: none; }
  .hero-title .ht-w { animation: none; transform: none; opacity: 1; clip-path: none; }
  .hero-title .ht-dot-accent { animation: none; opacity: 1; }
}
/* prevent any horizontal overflow site-wide on mobile */
body { overflow-x: clip; }

/* ==========================================================================
   MOBILE 390 — FINAL POLISH
   ========================================================================== */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .section-pad { padding-block: 56px; }
  .h-section { font-size: clamp(30px, 9vw, 40px); }
  .lead { font-size: 16px; }

  /* Hero cinematic — image sits behind, text first */
  .hero-cine { border-radius: 0 0 24px 24px; }
  .hero-cine .hero-title { font-size: clamp(38px, 13vw, 52px); }
  .hero-stat-chip { transform: scale(.78); }
  .hero-stat-chip.hsc-a { inset-inline-end: -6px; top: 10%; }
  /* hsc-b sits mid-mockup on a 390px phone — no room to escape without covering
     the CRMMock list text (verified via screenshot); hide, same as .float-card above.
     (.hnotif-2's mobile hide lives near its other rules below — .hnotif{display:flex}
     is declared later in this file and would win a display fight placed here.) */
  .hero-stat-chip.hsc-b { display: none; }

  /* Statement band */
  .statement h2 { font-size: clamp(30px, 10vw, 44px); }

  /* Pains — comfy single column */
  .pain-b-cine { padding: 32px 22px; padding-block-start: 36px; }
  .pain-b-rank { font-size: 36px; inset-block-start: 16px; inset-inline-end: 18px; }
  .pain-b-stat { font-size: 40px !important; }
  .pain-b-fix { margin: 18px -22px -32px; padding: 14px 22px; }

  /* Solutions */
  .sol-card { padding: 24px; }
  .sol-feat h3 { font-size: 22px; }
  .sol-arrow { inset-block-end: 18px; inset-inline-start: 22px; }
  .offer-card { padding: 24px 20px; }
  .offer-price { font-size: clamp(56px, 20vw, 80px); }
  .offer-head { gap: 16px; }
  .offer-head .btn { width: 100%; }

  /* Club */
  .club-b { padding: 26px 20px; }
  .club-bank { max-width: none; }
  .club-b-payouts { grid-template-columns: 1fr; }

  /* מה הקאץ' */
  .katch3-coin { width: min(200px, 62vw); }
  .katch3-proof { grid-template-columns: 1fr; }
  .katch3-cards { grid-template-columns: 1fr; }

  /* Cost of inaction */
  .cost-grid { grid-template-columns: 1fr; }
  .cost-total { font-size: 26px; }

  /* Testimonials / FAQ */
  .t-card { padding: 24px; }
  .faq-item summary { font-size: 16px; }
  .faq-item { padding-inline: 18px; }

  /* Final CTA */
  .final-cta { padding: 32px 22px; border-radius: 24px; }
  .final-mega { font-size: clamp(40px, 15vw, 64px); }
  .final-form { flex-direction: column; }
  .final-form .btn-primary { width: 100%; }

  /* Founding banner */
  .founding-banner { padding: 24px 20px; }

  /* Nav pill — keep clear of thumbs */
  .fx-navpill { inset-block-end: 14px; }
  .fx-navpill a { padding: 8px 9px; font-size: 12px; }

  /* Hide desktop-only heavy cursor on touch (already gated) */
  .fx-grain { opacity: .05; }
}

/* HERO RIGHT — phone stack */
.phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 700px;
}
.phone-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(0,179,65,.10), transparent 60%),
    radial-gradient(40% 30% at 70% 20%, rgba(57,255,20,.08), transparent 60%);
  filter: blur(4px);
  pointer-events: none;
}
.float-card {
  position: absolute;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  z-index: 3;
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-card.delay-1 { animation-delay: 1s; }
.float-card.delay-2 { animation-delay: 2s; }

/* ========== PHONE ========== */
.phone {
  --ph-w: 320px;
  width: var(--ph-w);
  aspect-ratio: 9 / 19.5;
  background: #0a0a0a;
  border-radius: 44px;
  padding: 8px;
  box-shadow: var(--shadow-phone);
  position: relative;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  background: #fff;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute; top: 10px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 90px; height: 26px; background: #0a0a0a; border-radius: 999px;
  z-index: 10;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px 0;
  font-family: var(--fm); font-weight: 600; font-size: 11px;
}
.phone-status .icons { display: flex; gap: 4px; opacity: .8; }
.phone-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ========== SECTION TITLES ========== */
.section-pad {
  padding-block: 100px;
  position: relative;
}
.section-pad::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  opacity: .6; pointer-events: none;
}
@media (max-width: 720px) {
  .section-pad { padding-block: 72px; }
}
.section-head {
  max-width: 760px;
  margin-block-end: 56px;
}
.section-head .kicker { margin-block-end: 16px; display: inline-block; }
/* Section title polish — gradient ink, tighter tracking, signature dot glow */
.h-section { text-wrap: balance; }
.section-head .h-section, .center .h-section { position: relative; }
.h-section .tx-w { transition-timing-function: cubic-bezier(.2,1,.3,1); }
.h-section .ht-green-static { background: linear-gradient(180deg, var(--accent) 0%, #059b3b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
html[data-theme="dark"] .h-section .ht-green-static { background: linear-gradient(180deg, #5bff42 0%, var(--accent-hi) 100%); -webkit-background-clip: text; background-clip: text; }
.section-head .lead { margin-block-start: 20px; }

/* ========== CARDS / FEATURES ========== */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s;
  position: relative;
  overflow: hidden;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.feat-card .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-tint);
  display: grid; place-items: center;
  margin-block-end: 18px;
}
.feat-card h3 {
  margin: 0 0 8px;
  font-size: 20px; font-weight: 700; letter-spacing: -.015em;
}
.feat-card p {
  margin: 0;
  color: var(--ink-2); font-size: 15px; line-height: 1.5;
}

/* ========== SPLIT (text + mockup) ========== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split.flip { grid-template-columns: 1fr 1fr; }
.split.flip .split-mock { order: -1; }
@media (max-width: 980px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 48px; }
  .split.flip .split-mock { order: 0; }
}

.split-mock {
  display: flex; justify-content: center;
  position: relative;
}

.split h2 { margin: 16px 0 18px; }
.split .lead { margin-block-end: 24px; }
.split .bullets {
  display: grid; gap: 12px;
  padding: 0; margin: 24px 0 0;
}
.split .bullets li {
  list-style: none;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16px; color: var(--ink);
}
.split .bullets li .tick {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  margin-top: 2px;
}

/* ========== STATS BAR ========== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
  padding-block: 36px;
}
.stats .stat {
  text-align: start;
  padding-inline: 24px;
  border-inline-end: 1px solid var(--line);
}
.stats .stat:last-child { border-inline-end: none; }
.stats .num {
  font-family: var(--fh); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1; color: var(--ink);
}
.stats .lbl {
  font-family: var(--fm); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  margin-block-start: 8px;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat { padding: 18px 16px; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); }
  .stats .stat:nth-child(even) { border-inline-end: none; }
  .stats .stat:nth-last-child(-n+2) { border-block-end: none; }
}

/* ========== TESTIMONIALS ========== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .testimonials { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .testimonials { grid-template-columns: 1fr; } }
.t-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
html[data-theme="dark"] .t-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); }
.t-card:hover { transform: translateY(-5px); border-color: var(--accent-mid, rgba(0,179,65,.3)); box-shadow: var(--shadow-2); }
.t-verified { position: absolute; inset-block-start: 18px; inset-inline-end: 20px; font-size: 10px; letter-spacing: .1em; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="dark"] .t-verified { color: var(--accent-hi); }
.t-stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; }
html[data-theme="dark"] .t-stars { color: var(--accent-hi); }
.t-quotemark { position: absolute; inset-block-start: 8px; inset-inline-start: 20px; font-family: Georgia, serif; font-size: 72px; line-height: 1; color: var(--accent); opacity: .12; pointer-events: none; }
html[data-theme="dark"] .t-quotemark { color: var(--accent-hi); }
.testi-cine { position: relative; overflow: hidden; }
.testi-cine::before { content: ""; position: absolute; inset-block-start: 15%; inset-inline: 50%; transform: translateX(50%); width: 60%; height: 55%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events: none; }
.testi-cine .container, .testi-cine .testimonials { position: relative; z-index: 1; }
.t-card .quote { position: relative; z-index: 1; }
.t-card .quote {
  font-size: 17px; line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.005em;
}
.t-card .who {
  display: flex; align-items: center; gap: 12px;
}
.t-card .who .av {
  width: 40px; height: 40px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--bg-tint);
}
.t-card .who .meta .nm { font-weight: 600; font-size: 14px; }
.t-card .who .meta .role { font-family: var(--fm); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }

/* ========== FAQ ========== */
.faq-cine { position: relative; overflow: hidden; }
.faq-glow { position: absolute; inset-block-start: 10%; inset-inline: 50%; transform: translateX(50%); width: 60%; height: 60%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events: none; }
.faq { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; position: relative; }
.faq-q-txt { display: inline-flex; align-items: center; gap: 12px; }
.faq-q-n { font-size: 12px; color: var(--accent); opacity: .7; }
html[data-theme="dark"] .faq-q-n { color: var(--accent-hi); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 24px;
  transition: border-color .25s, background .25s;
}
html[data-theme="dark"] .faq-item { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); }
.faq-item[open] { border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.faq-item summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-weight: 700; font-size: 18px;
  letter-spacing: -.01em;
  padding-block: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .ans {
  padding-block-end: 20px;
  color: var(--ink-2); font-size: 16px; line-height: 1.6;
}
.faq-item .plus {
  font-family: var(--fm); font-size: 24px; color: var(--accent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] .faq-item .plus { color: var(--accent-hi); }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item[open] { background: var(--accent-soft); }
html[data-theme="dark"] .faq-item[open] { background: linear-gradient(180deg, rgba(57,255,20,.05), rgba(255,255,255,.012)); }
.faq-item summary:hover { color: var(--accent); }
html[data-theme="dark"] .faq-item summary:hover { color: var(--accent-hi); }
.faq-item summary:hover .plus { transform: scale(1.15); }
.faq-item[open] summary:hover .plus { transform: rotate(45deg) scale(1.15); }
.faq-item .ans { animation: faq-ans-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes faq-ans-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item .ans { animation: none; } }

/* ========== FINAL CTA ========== */
.final-cta {
  background: radial-gradient(120% 120% at 80% 0%, #14210f, #0a0a0a 60%);
  color: #fff;
  border-radius: 36px;
  padding: clamp(40px, 6vw, 88px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(57,255,20,.22);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 55% at 82% 18%, rgba(57,255,20,.22), transparent 55%),
    radial-gradient(40% 40% at 8% 92%, rgba(57,255,20,.08), transparent 60%);
  pointer-events: none;
  animation: club-breathe 10s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .final-cta::before { animation: none; } }
.final-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(57,255,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(60% 60% at 80% 20%, #000, transparent 70%); mask: radial-gradient(60% 60% at 80% 20%, #000, transparent 70%);
  opacity: .5;
}
.final-cta .inner { position: relative; z-index: 1; max-width: 760px; }
.final-cta h2 {
  margin: 0 0 18px;
  font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(40px, 6vw, 80px); line-height: .95;
}
.final-cta .lead { color: rgba(255,255,255,.62); }
.final-cta .btn-primary { background: #fff; color: #0a0a0a; }
.final-cta .btn-primary:hover { background: var(--accent-hi); }
.final-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.final-cta .btn-ghost:hover { background: rgba(255,255,255,.08); }
.final-cta .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }

/* Final CTA — mega wordmark + form */
.final-mega { display: inline-flex; align-items: center; gap: .06em; font-family: var(--fm); font-weight: 900; font-size: clamp(40px, 8vw, 92px); letter-spacing: .02em; line-height: 1; color: #fff; animation: fm-float 5s ease-in-out infinite; }
@keyframes fm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.final-mega .fm-sciss { color: var(--accent-hi); flex-shrink: 0; filter: drop-shadow(0 0 22px rgba(57,255,20,.5)); animation: fm-sciss-glow 2.6s ease-in-out infinite; }
@keyframes fm-sciss-glow { 0%,100% { filter: drop-shadow(0 0 18px rgba(57,255,20,.45)); } 50% { filter: drop-shadow(0 0 34px rgba(57,255,20,.8)); } }
@media (prefers-reduced-motion: reduce) { .final-mega, .final-mega .fm-sciss { animation: none; } }rgin-block-end: 22px; }
.final-mega .fm-sciss { color: var(--accent-hi); flex-shrink: 0; filter: drop-shadow(0 0 22px rgba(57,255,20,.5)); }
.final-mega .fm-dot { color: var(--accent-hi); }
.final-form { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; max-width: 540px; }
.final-form input { flex: 1; min-width: 200px; height: 56px; padding-inline: 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-family: var(--fm); font-size: 16px; direction: ltr; outline: none; transition: border-color .2s; }
.final-form input::placeholder { color: rgba(255,255,255,.4); }
.final-form input:focus { border-color: var(--accent-hi); }
.final-form .btn-primary { height: 56px; }
.final-ok { margin-block-start: 18px; color: var(--accent-hi); font-weight: 700; }
.final-cta-btn { margin-block-start: 32px; height: 56px; }
@media (max-width: 560px) { .final-cta-btn { width: 100%; } }

/* ========== FOOTER ========== */
.footer {
  padding-block: 60px 40px;
  border-block-start: 1px solid var(--line);
  margin-block-start: 80px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  margin-block-end: 40px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer h4 { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 500; }
.footer ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.footer ul a { color: var(--ink-2); font-size: 14px; }
.footer ul a:hover { color: var(--ink); }
.footer-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--line);
  color: var(--ink-3); font-family: var(--fm); font-size: 11px; letter-spacing: .06em;
}

.footer-disclaimer { font-family: var(--fm); font-size: 10px; font-weight: 400; color: rgba(255,255,255,.2); line-height: 1.6; margin-block-start: 18px; padding-block-start: 14px; border-block-start: 1px solid rgba(255,255,255,.05); letter-spacing: .01em; }

/* ========== SCROLL REVEAL ========== */
/* Premium animation layer */
.anim-rail { position: fixed; inset-block: 0; inset-inline-end: 6px; width: 3px; z-index: 90; background: var(--line); border-radius: 999px; pointer-events: none; }
.anim-rail span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border-radius: 999px; box-shadow: 0 0 10px rgba(57,255,20,.5); }
@media (max-width: 720px) { .anim-rail { display: none; } }
.anim-rise { opacity: 0; transform: translateY(48px) scale(.978); filter: blur(9px); transition: opacity .9s cubic-bezier(.16,.84,.24,1), transform .9s cubic-bezier(.16,.84,.24,1), filter .9s cubic-bezier(.16,.84,.24,1); will-change: opacity, transform, filter; }
.anim-rise.in { opacity: 1; transform: none; filter: blur(0); }
.h-section .aw { display: inline-block; opacity: 0; transform: translateY(28px) rotate(2deg); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.h-section.words-in .aw { opacity: 1; transform: none; }
.anim-ripple { position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0); background: rgba(57,255,20,.4); pointer-events: none; mix-blend-mode: screen; animation: anim-rip .65s ease-out forwards; }
@keyframes anim-rip { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.hero-title { will-change: transform, opacity; }
/* Clipper "passe de tondeuse" sweep */
.anim-clipper { position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); box-shadow: 0 0 14px rgba(57,255,20,.7); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; z-index: 3; pointer-events: none; }
.swept > .anim-clipper { animation: clipper-sweep 1s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes clipper-sweep { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .anim-clipper { display: none; } }
@media (prefers-reduced-motion: reduce) { .anim-rise { opacity: 1; transform: none; filter: none; } .h-section .aw { opacity: 1; transform: none; } }

/* ========== SCROLL REVEAL ========== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
/* stagger spring + rotation on cards */
.sol-card.reveal, .pain-b.reveal, .testi.reveal, .katch-card.reveal, .cost-col.reveal, .step3.reveal, .feat3.reveal { transform: translateY(38px) scale(.96) rotate(-1.2deg); transition: opacity .7s cubic-bezier(.34,1.3,.5,1), transform .7s cubic-bezier(.34,1.3,.5,1); }
.sol-card.reveal.in, .pain-b.reveal.in, .testi.reveal.in, .katch-card.reveal.in, .cost-col.reveal.in, .step3.reveal.in, .feat3.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .sol-card.reveal, .pain-b.reveal, .testi.reveal, .katch-card.reveal, .cost-col.reveal, .step3.reveal, .feat3.reveal { transform: none !important; } }
.reveal.d4 { transition-delay: .32s; }

/* ========== MARQUEE (LOGOS) ========== */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 22px;
  position: relative;
}
.marquee-track {
  display: flex; gap: 60px; width: max-content;
  animation: scroll 38s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee .city {
  font-family: var(--fh); font-weight: 700; font-size: 24px;
  color: var(--ink-3); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 60px;
}
.marquee .city::after {
  content: "·"; font-family: var(--fm); color: var(--ink-4);
}

/* ========== APP MOCK INTERNALS ========== */
/* shared phone content styles */
.mk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(10,10,10,.04);
}
.mk-header .title { font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.mk-header .actions { display: flex; gap: 8px; }
.mk-iconbtn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-tint); display: grid; place-items: center;
  font-family: var(--fm); font-size: 13px;
}

/* feed */
.mk-feed { overflow-y: auto; height: 100%; padding-bottom: 60px; }
.mk-feed::-webkit-scrollbar { display: none; }
.mk-post { padding: 0 0 16px; border-bottom: 1px solid rgba(10,10,10,.05); }
.mk-post-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.mk-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #e9e9e8;
  position: relative;
}
.mk-avatar.live::after {
  content: ""; position: absolute; inset-inline-end: -2px; inset-block-end: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-hi); border: 2px solid #fff;
}
.mk-name { font-weight: 700; font-size: 13px; }
.mk-sub { font-family: var(--fm); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.mk-media {
  width: 100%; aspect-ratio: 1;
  background: #ddd;
  background-size: cover; background-position: center;
  position: relative;
}
.mk-media .book-pill {
  position: absolute; inset-inline-start: 12px; inset-block-end: 12px;
  background: rgba(255,255,255,.96);
  padding: 8px 12px; border-radius: 999px;
  font-family: var(--fm); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.mk-actions { display: flex; gap: 18px; padding: 10px 14px 0; font-family: var(--fm); font-size: 12px; color: var(--ink); }
.mk-actions .a-it { display: flex; align-items: center; gap: 5px; }
.mk-caption { padding: 6px 14px 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.mk-caption .who { font-weight: 700; margin-inline-end: 4px; }

/* map mock */
.mk-map { position: relative; height: 100%; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 40%, #f3f4ef, #e8e9e3);
}
.mk-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mk-road {
  position: absolute; background: rgba(10,10,10,.06);
}
.mk-pin {
  position: absolute; transform: translate(-50%, -50%);
  background: #fff; border: 2px solid #0a0a0a;
  border-radius: 999px;
  padding: 5px 9px 5px 7px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  white-space: nowrap;
}
.mk-pin .dot { width: 6px; height: 6px; border-radius: 50%; }
.mk-pin .dot.live { background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(57,255,20,.25); }
.mk-pin .dot.off { background: #b8b8b6; }
.mk-pin.sel { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.mk-mapcard {
  position: absolute; inset-inline: 14px; inset-block-end: 14px;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
}
.mk-mapcard .av { width: 44px; height: 44px; border-radius: 12px; background: #e9e9e8 center/cover; }
.mk-mapcard .nm { font-weight: 800; font-size: 14px; }
.mk-mapcard .lb { font-family: var(--fm); font-size: 10px; color: var(--ink-2); letter-spacing: .04em; }
.mk-mapcard .cta { margin-inline-start: auto; background: var(--accent-hi); color: #052915; border-radius: 999px; padding: 6px 12px; font-family: var(--fm); font-size: 11px; font-weight: 700; }

/* CRM mock */
.mk-crm { padding: 14px 16px; overflow-y: auto; height: 100%; padding-bottom: 60px; }
.mk-crm::-webkit-scrollbar { display: none; }
.mk-greet { font-family: var(--fm); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }
.mk-bigh { font-weight: 800; letter-spacing: -.02em; font-size: 22px; margin-block-start: 2px; }
.mk-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-block-start: 14px; }
.mk-kpi { background: var(--bg-tint); border-radius: 14px; padding: 12px; }
.mk-kpi .kn { font-family: var(--fm); font-size: 10px; color: var(--ink-2); letter-spacing: .08em; }
.mk-kpi .kv { font-weight: 800; font-size: 22px; margin-block-start: 2px; letter-spacing: -.02em; }
.mk-kpi .kd { font-family: var(--fm); font-size: 10px; color: var(--accent); margin-block-start: 2px; }

.mk-section-t {
  font-family: var(--fm); font-size: 11px; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 18px 0 10px;
}

.mk-appt {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px;
}
.mk-appt + .mk-appt { margin-block-start: 8px; }
.mk-appt .when { font-family: var(--fm); font-size: 11px; color: var(--ink-2); width: 44px; }
.mk-appt .who { font-weight: 600; font-size: 13px; flex: 1; }
.mk-appt .svc { font-family: var(--fm); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.mk-appt .price { font-family: var(--fm); font-size: 12px; font-weight: 600; }
.mk-appt.now { border-color: var(--accent); background: var(--accent-soft); }
.mk-appt.now .when { color: var(--accent); font-weight: 700; }

/* WhatsApp mock */
.mk-wa {
  background: #ece5dd;
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}
.mk-wa-hdr {
  background: #075E54; color: #fff;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
}
.mk-wa-hdr .av { width: 36px; height: 36px; border-radius: 50%; background: #25D366; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #052915; }
.mk-wa-body { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.mk-wa-body::-webkit-scrollbar { display: none; }
.mk-wa-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.4;
  position: relative;
}
.mk-wa-msg.in { align-self: flex-start; background: #fff; }
.mk-wa-msg.out { align-self: flex-end; background: #DCF8C6; }
.mk-wa-msg .t { font-family: var(--fm); font-size: 9px; color: var(--ink-3); margin-block-start: 4px; text-align: end; letter-spacing: .04em; }

/* shimmer/typing */
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: #999; animation: bob 1.2s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ribbon */
.ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .12em;
  font-weight: 500;
}
.ribbon .accent-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}
.ribbon .accent-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,59,48,.2); }
.ribbon-fomo { border: 1px solid rgba(255,59,48,.3); }
.ribbon-fomo b { color: var(--danger); font-weight: 800; }
html[data-theme="dark"] .ribbon-fomo b { color: #ff6a60; }

/* growth pill chart */
.chart-card {
  background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 24px;
  box-shadow: var(--shadow-1);
}
.chart-bars { display: flex; align-items: end; gap: 10px; height: 140px; margin-block-start: 16px; }
.chart-bar {
  flex: 1; background: var(--bg-tint);
  border-radius: 8px 8px 0 0;
  position: relative;
  transition: height .8s cubic-bezier(.2,.7,.2,1);
}
.chart-bar.hi { background: var(--ink); }
.chart-bar .lbl { position: absolute; inset-block-end: -22px; inset-inline-start: 0; inset-inline-end: 0; text-align: center; font-family: var(--fm); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }

/* sticky CTA on mobile */
.mobile-cta {
  display: none;
}
@media (max-width: 720px) {
  .mobile-cta {
    display: flex;
    position: fixed; inset-inline: 0; inset-block-end: 16px;
    z-index: 60; justify-content: center; padding-inline: 16px;
    pointer-events: none;
  }
  .mobile-cta .btn {
    pointer-events: auto;
    width: 100%;
    box-shadow: 0 16px 32px rgba(10,10,10,.30);
  }
}

/* utility */
.center { text-align: center; }
.gap-12 { gap: 12px; }

/* ==========================================================================
   DARK CINEMATIC AMBIENCE (ref: Fluxora/AgentAI/Securify)
   ========================================================================== */
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 600px at 85% 4%, rgba(57,255,20,.05), transparent 60%),
    radial-gradient(700px 500px at 5% 40%, rgba(57,255,20,.035), transparent 60%),
    radial-gradient(800px 700px at 90% 88%, rgba(57,255,20,.04), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .hero-cine { border-radius: 0 0 40px 40px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
html[data-theme="dark"] .statement h2 .st-serif { color: var(--accent-hi); }
html[data-theme="dark"] .sol-card:not(.sol-feat) { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); }
html[data-theme="dark"] .pain-b:not(.pain-b-dark) { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); }
html[data-theme="dark"] .katch3-card, html[data-theme="dark"] .k3-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); }
html[data-theme="dark"] .section-head .kicker, html[data-theme="dark"] .kicker { color: var(--accent-hi); }

/* Section dividers */
.divider-soft {
  height: 1px; background: var(--line); margin-block: 0;
}

/* ==========================================================================
   LIVING HERO DASHBOARD + NOTIF BUBBLES
   ========================================================================== */
.dash { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; height: 100%; background: var(--bg); }
.dash-hd { display: flex; align-items: center; justify-content: space-between; padding-block-end: 4px; }
.dash-brand { display: inline-flex; align-items: center; gap: 2px; font-family: var(--fm); font-weight: 900; font-size: 13px; letter-spacing: .04em; color: var(--ink); }
.dash-brand svg { filter: drop-shadow(0 0 3px rgba(57,255,20,.5)); }
.dash-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fm); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--accent); }
html[data-theme="dark"] .dash-live { color: var(--accent-hi); }
.dash-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(57,255,20,.22); animation: pulse 1.6s ease-in-out infinite; }
.dash-money { padding: 12px 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .dash-money { background: rgba(255,255,255,.04); }
.dash-money-l { font-family: var(--fm); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dash-money-v { font-family: var(--fm); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink); margin-block-start: 4px; }
.dash-up { color: var(--accent); font-size: 14px; margin-inline-start: 4px; }
html[data-theme="dark"] .dash-up { color: var(--accent-hi); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dash-kpi { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 4px; text-align: center; }
html[data-theme="dark"] .dash-kpi { background: rgba(255,255,255,.04); }
.dk-v { font-family: var(--fm); font-weight: 800; font-size: 15px; color: var(--ink); }
.dk-v.acc { color: var(--accent); }
html[data-theme="dark"] .dk-v.acc { color: var(--accent-hi); }
.dk-l { font-family: var(--fm); font-size: 8px; letter-spacing: .06em; color: var(--ink-3); margin-block-start: 3px; }
.dash-next { padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-mid, rgba(0,179,65,.22)); border-radius: 12px; }
.dn-l { font-family: var(--fm); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
html[data-theme="dark"] .dn-l { color: var(--accent-hi); }
.dn-row { display: flex; align-items: center; gap: 10px; margin-block-start: 8px; }
.dn-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #475569, #0f172a); flex-shrink: 0; overflow: hidden; }
.dn-av image-slot { width: 100%; height: 100%; display: block; border-radius: 50%; }
.dn-meta { flex: 1; }
.dn-nm { font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.dn-svc { font-size: 11px; color: var(--ink-2); }
.dn-timer { font-family: var(--fm); font-weight: 700; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .dn-timer { color: var(--accent-hi); }
.dash-sched { display: flex; flex-direction: column; gap: 4px; }
.ds-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 12px; transition: background .5s, border-color .5s; }
html[data-theme="dark"] .ds-row { background: rgba(255,255,255,.04); }
.ds-row .ds-t { font-family: var(--fm); font-size: 10px; color: var(--ink-3); }
.ds-row .ds-nm { font-weight: 600; }
.ds-row .ds-ic { font-family: var(--fm); font-weight: 700; font-size: 12px; color: var(--accent); }
html[data-theme="dark"] .ds-row .ds-ic { color: var(--accent-hi); }
.ds-row.empty { border-style: dashed; }
.ds-row.empty .ds-nm { color: var(--ink-3); font-style: italic; }
.ds-row.empty .ds-ic { color: var(--ink-3); }
.ds-row.fill { border-color: var(--accent-mid, rgba(0,179,65,.4)); background: var(--accent-soft); animation: ds-flash .8s ease; }
@keyframes ds-flash { 0% { background: var(--accent-hi); } 100% {} }

/* Notification bubbles */
.phone-shot { width: 100%; height: 100%; position: relative; background: radial-gradient(circle at 60% 30%, rgba(57,255,20,.14), transparent 55%), #060a06; overflow: hidden; }
.phone-shot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 70% 60%, rgba(57,255,20,.8), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 55% 45%, rgba(57,255,20,.6), transparent), radial-gradient(1.5px 1.5px at 15% 70%, rgba(255,255,255,.6), transparent); background-size: 100% 100%; animation: phone-stars 6s ease-in-out infinite; }
@keyframes phone-stars { 0%,100% { opacity: .5; transform: translateY(0) scale(1); } 50% { opacity: 1; transform: translateY(-6px) scale(1.05); } }
.phone-shot image-slot { position: relative; width: 100%; height: 100%; display: block; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .phone-shot::before { animation: none; } }
.hnotif { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2), 0 0 24px -8px rgba(57,255,20,.3); backdrop-filter: blur(8px); }r(--shadow-2); opacity: 0; }
html[data-theme="dark"] .hnotif { background: #1a1a1a; }
.hnotif .hn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(57,255,20,.2); flex-shrink: 0; }
.hnotif .hn-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
html[data-theme="dark"] .hnotif .hn-ic { color: var(--accent-hi); }
.hnotif .hn-ic.star { color: #e9c84a; background: rgba(233,200,74,.12); }
.hnotif .hn-k { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--ink-3); }
.hnotif .hn-v { font-weight: 700; font-size: 13px; }
.hnotif-1 { inset-inline-end: 6px; top: 10%; animation: hn-cycle 9s ease-in-out infinite; }
.hnotif-2 { inset-inline-start: 4px; top: 46%; animation: hn-cycle 9s ease-in-out 3s infinite; }
.hnotif-3 { inset-inline-end: 10px; inset-block-end: 12%; animation: hn-cycle 9s ease-in-out 6s infinite; }
@keyframes hn-cycle {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  6% { opacity: 1; transform: translateY(0) scale(1); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  38% { opacity: 0; transform: translateY(-8px) scale(.95); }
  100% { opacity: 0; }
}
@media (max-width: 560px) { .hnotif { transform: scale(.8); } .hnotif-2 { inset-inline-start: 2px; } .hnotif-1, .hnotif-3 { inset-inline-end: 2px; } }
/* hnotif-2 cycles mid-mockup on a 390px phone — no room to escape without covering
   the CRMMock list text (verified via screenshot); hide, same as .float-card / hsc-b. */
@media (max-width: 480px) { .hnotif-2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .hnotif { animation: none; opacity: 1; } .hnotif-2, .hnotif-3 { display: none; } }

/* ==========================================================================
   GLOBAL BRAND / FX LAYER
   ========================================================================== */

/* Grain + vignette */
.fx-grain { position: fixed; inset: 0; z-index: 190; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grain-shift .6s steps(2) infinite; }
@keyframes fx-grain-shift { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-3%)} }
.fx-vignette { position: fixed; inset: 0; z-index: 191; pointer-events: none; box-shadow: inset 0 0 200px rgba(10,10,10,.10), inset 0 0 60px rgba(10,10,10,.05); }
html[data-theme="dark"] .fx-vignette { box-shadow: inset 0 0 240px rgba(0,0,0,.6), inset 0 0 80px rgba(0,0,0,.4); }
html[data-theme="dark"] .fx-grain { opacity: .06; }

/* Cursor: native (custom cursor removed) */
.fx-cursor { display: none !important; }

/* Card scissors watermark */
.pain-b, .sol-card, .katch3-card, .k3-card, .offer-card, .club-b, .t-card, .feat-card { position: relative; }
.fx-wm { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; width: 46px; height: 46px; color: var(--ink); opacity: .05; transform: rotate(-16deg); pointer-events: none; z-index: 0; }
.fx-wm svg { width: 100%; height: 100%; }
.offer-card .fx-wm, .club-b .fx-wm { color: var(--accent); opacity: .08; width: 60px; height: 60px; }

/* Glass sticky nav pill */
/* Sticky mobile CTA bar with countdown */
.fx-mbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 125; display: none; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(11,11,11,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block-start: 1px solid rgba(57,255,20,.25); transform: translateY(120%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
html[data-theme="light"] .fx-mbar { background: rgba(255,255,255,.94); border-block-start-color: var(--accent-mid, rgba(0,179,65,.3)); }
.fx-mbar.show { transform: translateY(0); }
.fx-mbar-cd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-mbar-lbl { font-family: var(--fh); font-size: 10px; color: var(--ink-2); }
.fx-mbar-t { font-family: var(--fm); font-weight: 700; font-size: 16px; color: var(--danger); font-variant-numeric: tabular-nums; }
.fx-mbar-cta { flex-shrink: 0; background: linear-gradient(180deg,#5bff42,#39ff14 58%); color: #021004; font-family: var(--fh); font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 999px; box-shadow: 0 0 20px rgba(57,255,20,.3); }
@media (max-width: 720px) { .fx-mbar { display: flex; } .fx-navpill { display: none !important; } }
.fx-navpill { position: fixed; inset-block-end: 20px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); z-index: 120;
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: rgba(11,11,11,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.fx-navpill::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent, rgba(57,255,20,.4), transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; }
html[data-theme="light"] .fx-navpill { background: rgba(255,255,255,.8); border-color: var(--line); box-shadow: 0 16px 40px rgba(10,10,10,.16); }
.fx-navpill.show { transform: translateY(0); opacity: 1; }
.fx-navpill .fxnp-brand { display: inline-flex; align-items: center; gap: 5px; padding-inline: 8px 6px; font-family: var(--fm); font-weight: 900; font-size: 13px; color: #fff; }
html[data-theme="light"] .fx-navpill .fxnp-brand { color: var(--ink); }
.fx-navpill .fxnp-brand svg { width: 14px; height: 14px; color: var(--accent-hi); filter: drop-shadow(0 0 4px rgba(57,255,20,.5)); }
.fx-navpill .fxnp-brand .dot { color: var(--accent-hi); }
.fx-navpill .fxnp-sep { width: 1px; height: 20px; background: rgba(255,255,255,.14); margin-inline: 2px; }
html[data-theme="light"] .fx-navpill .fxnp-sep { background: var(--line-2); }
.fx-navpill a:not(.fx-navpill-cta) { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62); padding: 8px 11px; border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; }
html[data-theme="light"] .fx-navpill a:not(.fx-navpill-cta) { color: var(--ink-2); }
.fx-navpill a:not(.fx-navpill-cta):hover { color: #fff; background: rgba(255,255,255,.08); }
html[data-theme="light"] .fx-navpill a:not(.fx-navpill-cta):hover { color: var(--ink); background: var(--bg-tint); }
.fx-navpill-cta { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg,#5bff42,#39ff14 58%) !important; color: #021004 !important; font-family: var(--fh); font-weight: 700; font-size: 13px; padding: 9px 15px !important; border-radius: 999px; box-shadow: 0 0 20px rgba(57,255,20,.3); }
.fx-navpill-cta:hover { box-shadow: 0 0 30px rgba(57,255,20,.5); }
@media (max-width: 520px) { .fx-navpill .fxnp-brand span:not(.dot):first-of-type { display: none; } .fx-navpill a:not(.fx-navpill-cta) { padding: 8px 8px; font-size: 12px; } }

/* Confetti */
.dop-toast { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 118; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 999px; background: rgba(11,11,11,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(57,255,20,.28); box-shadow: 0 12px 30px rgba(0,0,0,.5); transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; pointer-events: none; }
html[data-theme="light"] .dop-toast { background: rgba(255,255,255,.94); border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.dop-toast.show { transform: translateY(0); opacity: 1; }
.dop-toast .dop-t-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
html[data-theme="dark"] .dop-toast .dop-t-ic { color: var(--accent-hi); }
.dop-toast .dop-t-x { font-family: var(--fm); font-size: 12px; color: var(--ink); }
@media (max-width: 720px) { .dop-toast { inset-block-end: 84px; inset-inline-start: 12px; } }
.dop-watch { position: fixed; inset-block-start: 76px; inset-inline-end: 16px; z-index: 118; display: none; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(11,11,11,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-2); font-family: var(--fm); font-size: 11px; color: var(--ink-2); box-shadow: var(--shadow-1); }
html[data-theme="light"] .dop-watch { background: rgba(255,255,255,.9); }
.dop-watch.show { display: inline-flex; animation: dop-w-in .4s ease; }
@keyframes dop-w-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dop-watch .dop-w-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(255,59,48,.18); animation: pulse 1.6s infinite; }
@media (max-width: 720px) { .dop-watch { inset-block-start: 70px; } }
@media (prefers-reduced-motion: reduce) { .dop-toast, .dop-watch { display: none !important; } }
/* Confetti */
.fx-confetti { position: fixed; inset: 0; z-index: 380; pointer-events: none; }
.fx-trail { position: fixed; inset: 0; z-index: 395; pointer-events: none; mix-blend-mode: screen; }
/* TEXT FX — split word reveal + signature dot */
.h-section .tx-w { display: inline-block; opacity: 0; transform: translateY(90%) rotate(2deg); transition: opacity .55s cubic-bezier(.2,1,.3,1), transform .7s cubic-bezier(.2,1,.3,1); will-change: transform; transform-origin: 0 100%; }
.h-section.tx-in .tx-w { opacity: 1; transform: none; }
/* title-word-shine removed 2026-07-28: animating `filter` on a
   `-webkit-background-clip: text` element is a known WebKit/Safari
   compositing-glitch risk (can paint stray seam/line artifacts through the
   text during the animation) -- not worth it for a subtle brightness pulse. */
/* a11y: skip link + focus states */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 14px; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; outline: 2px solid var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }
.h-section.tx-in .tx-w { opacity: 1; transform: none; }
.kicker, .mono-up.eyebrow { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .h-section .tx-w { opacity: 1 !important; transform: none !important; } .h-section.tx-in .ht-green-static { animation: none; } }
.fx-aurora { position: absolute; z-index: 0; pointer-events: none; width: 60vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; inset-block-start: -12%; inset-inline-end: -10%; background: radial-gradient(circle, rgba(57,255,20,.10), transparent 62%); filter: blur(16px); animation: fx-aurora-float 16s ease-in-out infinite; }
.fx-aurora.alt { inset-block-start: auto; inset-block-end: -14%; inset-inline-end: auto; inset-inline-start: -12%; background: radial-gradient(circle, rgba(57,255,20,.08), transparent 60%); animation-duration: 20s; animation-direction: reverse; }
.sol-card.sol-lit { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), 0 0 34px -6px rgba(57,255,20,.5) !important; transition: border-color .3s, box-shadow .3s; }

/* STICKY PHONE MORPHING */
.sph { position: relative; }
.sph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sph-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.sph-phone { width: min(300px, 74vw); aspect-ratio: 9/19.3; background: linear-gradient(155deg,#1a1a1a,#050505); border-radius: 42px; padding: 8px; position: relative; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,.08), 0 0 70px -20px rgba(57,255,20,.5); animation: sph-float 7s ease-in-out infinite; transition: box-shadow .5s; }
.sph-phone[data-scene="map"] { box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,.08), 0 0 90px -18px rgba(57,255,20,.7); }
.sph-glare { position: absolute; inset: 8px; border-radius: 34px; pointer-events: none; z-index: 6; background: linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%); mix-blend-mode: screen; }
@keyframes sph-float { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-12px) rotate(.4deg); } }
.sph-notch { position: absolute; top: 12px; inset-inline-start: 50%; transform: translateX(-50%); width: 88px; height: 24px; background: #050505; border-radius: 999px; z-index: 7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.sph-screens { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #060a06; perspective: 1000px; }
.sph-screen { position: absolute; inset: 0; display: block; opacity: 0; transform: translateX(14%) scale(.96); filter: blur(3px); transition: opacity .55s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1), filter .5s; will-change: transform, opacity; }
.sph-screen.on { opacity: 1; transform: none; filter: none; z-index: 2; }
.sph-screen .sviz { width: 100%; height: 200px; }
/* rich full-app mockups inside sticky phone */
.spv { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); text-align: start; }
.spv-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 6px; font-family: var(--fm); font-weight: 700; font-size: 11px; }
.spv-net { color: var(--accent); }
html[data-theme="dark"] .spv-net { color: var(--accent-hi); }
/* feed extras */
.spv-stories { display: flex; gap: 8px; padding: 4px 14px 8px; }
.spv-story { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#2a2a2a,#444); border: 2px solid var(--accent); flex-shrink: 0; }
.spv-story.me { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-style: dashed; font-weight: 700; }
html[data-theme="dark"] .spv-story.me { color: var(--accent-hi); }
.spv-follow { margin-inline-start: auto; font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent-mid, rgba(0,179,65,.4)); border-radius: 999px; padding: 3px 10px; }
html[data-theme="dark"] .spv-follow { color: var(--accent-hi); }
.spv-imgtag { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: rgba(0,0,0,.6); color: #fff; font-family: var(--fm); font-size: 9px; padding: 4px 9px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.spv-acts .liked { color: var(--danger); }
.spv-acts .spv-save { margin-inline-start: auto; }
/* map extras */
.spv-maptop { position: absolute; inset-block-start: 40px; inset-inline: 12px; display: flex; gap: 8px; align-items: center; z-index: 3; }
.spv-search { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 10px; color: var(--ink-3); box-shadow: var(--shadow-1); }
.spv-livecount { font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--accent); background: var(--card); border: 1px solid var(--accent-mid, rgba(0,179,65,.4)); border-radius: 999px; padding: 8px 10px; }
html[data-theme="dark"] .spv-livecount { color: var(--accent-hi); }
.spv-pin i { position: absolute; inset-block-start: -20px; inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--fm); font-size: 9px; font-weight: 700; color: #fff; background: rgba(0,0,0,.7); padding: 2px 6px; border-radius: 6px; white-space: nowrap; font-style: normal; }
/* whatsapp extras */
.spv-wahd i.spv-online { font-size: 9px; color: #8fe; font-style: normal; }
.spv-waback { font-size: 20px; line-height: 1; color: #fff; margin-inline-end: -2px; }
.spv-wahd-t { display: flex; flex-direction: column; }
.spv-verif { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #34b7f1; color: #fff; font-size: 8px; font-weight: 900; vertical-align: middle; margin-inline-start: 3px; }
.spv-waicons { margin-inline-start: auto; display: flex; gap: 12px; font-size: 13px; }
.spv-waenc { align-self: center; text-align: center; max-width: 90%; background: rgba(255,236,180,.18); color: #d8c789; font-size: 8.5px; line-height: 1.4; padding: 5px 10px; border-radius: 8px; margin-block-end: 4px; }
html[data-theme="light"] .spv-waenc { background: #fdf4c8; color: #7d6a2e; }
.spv-wacall { margin-inline-start: auto; }
.spv-waday { align-self: center; background: rgba(255,255,255,.1); color: var(--ink-3); font-family: var(--fm); font-size: 9px; padding: 3px 10px; border-radius: 999px; margin-block-end: 2px; }
html[data-theme="light"] .spv-waday { background: rgba(0,0,0,.06); }
.spv-bub em { display: block; font-family: var(--fm); font-size: 8px; opacity: .55; text-align: end; font-style: normal; margin-block-start: 3px; }
.spv-rd { color: #53bdeb; font-style: normal; }
.spv-waze { display: block; margin-block-start: 6px; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.14); color: #d7fbe8; font-family: var(--fm); font-size: 9px; font-weight: 700; text-align: center; }
html[data-theme="light"] .spv-waze { background: rgba(0,0,0,.06); color: #0a7d54; }
.spv-wainput { display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom,0)); }
.spv-wafield { flex: 1; background: #202c33; color: var(--ink-3); border-radius: 999px; padding: 9px 14px; font-size: 10px; }
html[data-theme="light"] .spv-wafield { background: #fff; }
.spv-wasend { width: 30px; height: 30px; border-radius: 50%; background: #00a884; color: #fff; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.spv-typing { align-self: flex-start; display: inline-flex; gap: 3px; background: #202c33; padding: 9px 12px; border-radius: 11px; }
html[data-theme="light"] .spv-typing { background: #fff; }
.spv-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; animation: wa-bob 1.2s ease-in-out infinite; }
.spv-typing i:nth-child(2) { animation-delay: .15s; } .spv-typing i:nth-child(3) { animation-delay: .3s; }
/* crm extras */
.spv-crmstats { display: flex; gap: 6px; padding: 8px 12px 12px; }
.spv-crmstats span { flex: 1; text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; }
html[data-theme="light"] .spv-crmstats span { background: var(--bg-tint); }
.spv-crmstats b { display: block; font-family: var(--fm); font-weight: 700; font-size: 14px; color: var(--accent); }
html[data-theme="dark"] .spv-crmstats b { color: var(--accent-hi); }
.spv-crmstats i { font-family: var(--fm); font-size: 8px; color: var(--ink-3); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .spv-typing i { animation: none; } }
.spv-hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; }
.spv-hd b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.spv-live { font-family: var(--fm); font-size: 10px; color: var(--accent); font-weight: 700; }
html[data-theme="dark"] .spv-live { color: var(--accent-hi); }
.spv-cnt, .spv-tag { font-family: var(--fm); font-size: 11px; }
.spv-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#2a2a2a,#444); flex-shrink: 0; }
.spv-av.sm { width: 30px; height: 30px; } .spv-av.xs { width: 26px; height: 26px; } .spv-av.sm, .spv-av.xs { background: linear-gradient(135deg, var(--accent), #059b3b); }
/* feed */
.spv-post { padding: 0 12px; }
.spv-prow { display: flex; align-items: center; gap: 9px; padding: 6px 2px; }
.spv-prow b { font-size: 12px; font-weight: 700; display: block; } .spv-prow i { font-family: var(--fm); font-size: 9px; color: var(--ink-3); font-style: normal; }
.spv-img { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, rgba(57,255,20,.16), rgba(255,255,255,.05)); position: relative; margin-block: 6px; }
.spv-book { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; background: var(--card); padding: 6px 11px; border-radius: 999px; font-family: var(--fm); font-size: 10px; font-weight: 700; box-shadow: var(--shadow-1); }
.spv-acts { display: flex; gap: 16px; padding: 6px 2px; font-family: var(--fm); font-size: 12px; color: var(--ink-2); }
/* map */
.spv-map { background: #0b100b; }
.spv-mapgrid { position: absolute; inset: 40px 0 0; background-image: linear-gradient(rgba(57,255,20,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.07) 1px, transparent 1px); background-size: 26px 26px; }
.spv-radar { position: absolute; inset: 40px 0 0; background: conic-gradient(from 0deg at 46% 46%, rgba(57,255,20,.22), transparent 26%); -webkit-mask: radial-gradient(circle at 46% 46%, #000 0, #000 52%, transparent 58%); mask: radial-gradient(circle at 46% 46%, #000 0, #000 52%, transparent 58%); animation: sviz-radar 3s linear infinite; }
.spv-pin { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 8px rgba(57,255,20,.7); }
.spv-pin.p1 { top: 34%; inset-inline-start: 30%; } .spv-pin.p2 { top: 62%; inset-inline-start: 66%; } .spv-pin.p3.you { top: 48%; inset-inline-start: 46%; width: 15px; height: 15px; box-shadow: 0 0 0 4px rgba(57,255,20,.22), 0 0 12px rgba(57,255,20,.9); }
.spv-mapcard { position: absolute; inset-block-end: 16px; inset-inline: 14px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: rgba(22,22,22,.94); border: 1px solid var(--accent-mid, rgba(0,179,65,.4)); border-radius: 14px; }
.spv-mapcard b { font-size: 12px; color: #fff; display: block; } .spv-mapcard i { font-family: var(--fm); font-size: 9px; color: rgba(255,255,255,.55); font-style: normal; }
.spv-go { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-hi); color: #021004; display: grid; place-items: center; font-weight: 800; }
/* whatsapp */
.spv-wa { background: #0b141a; } html[data-theme="light"] .spv-wa { background: #ece5dd; }
.spv-wahd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #075E54; color: #fff; }
.spv-wahd b { font-size: 12px; }
.spv-wabody { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 14px 12px; }
.spv-bub { max-width: 84%; font-size: 11px; line-height: 1.35; padding: 7px 10px; border-radius: 11px; }
.spv-bub.out { align-self: flex-end; background: #005c4b; color: #e9edef; } .spv-bub.out.g { background: #128C7E; }
.spv-bub.in { align-self: flex-start; background: #202c33; color: #e9edef; }
html[data-theme="light"] .spv-bub.out { background: #d9fdd3; color: #111; } html[data-theme="light"] .spv-bub.in { background: #fff; color: #111; }
/* crm */
.spv-crow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--line); }
.spv-crow b { font-size: 13px; display: block; } .spv-crow i { font-family: var(--fm); font-size: 9px; color: var(--ink-3); font-style: normal; }
.spv-tag { margin-inline-start: auto; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; }
.spv-tag.vip { background: linear-gradient(135deg,#fde047,#facc15); color: #1a1100; } .spv-tag.new { background: var(--accent-soft); color: var(--accent); } .spv-tag.idle { background: rgba(255,159,10,.18); color: var(--warn); }
/* waitlist */
.spv-waitcancel { display: flex; align-items: center; gap: 10px; margin: 2px 12px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,59,48,.1); border: 1px solid rgba(255,59,48,.3); }
.spv-wc-x { width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.spv-waitcancel b { font-size: 12px; display: block; } .spv-waitcancel i { font-family: var(--fm); font-size: 9px; color: var(--danger); font-style: normal; }
.spv-wlist { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.spv-wrow { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
html[data-theme="light"] .spv-wrow { background: var(--bg-tint); }
.spv-wrow.filled { border-color: var(--accent-mid, rgba(0,179,65,.5)); background: var(--accent-soft); }
.spv-wn { width: 20px; height: 20px; border-radius: 50%; background: var(--card-2, rgba(0,0,0,.06)); color: var(--ink-2); display: grid; place-items: center; font-family: var(--fm); font-size: 10px; font-weight: 700; flex-shrink: 0; }
html[data-theme="dark"] .spv-wn { background: rgba(255,255,255,.08); }
.spv-wrow.filled .spv-wn { background: var(--accent); color: #fff; }
.spv-wrow b { font-size: 12px; display: block; } .spv-wrow i { font-family: var(--fm); font-size: 9px; color: var(--ink-3); font-style: normal; }
.spv-wtime { margin-inline-start: auto; font-family: var(--fm); font-size: 9px; color: var(--ink-3); }
.spv-wtoast { margin: 12px 12px 14px; padding: 9px; border-radius: 10px; text-align: center; font-family: var(--fm); font-size: 11px; font-weight: 700; background: var(--accent); color: #021004; }
html[data-theme="dark"] .spv-wtoast { background: linear-gradient(180deg,#5bff42,#39ff14); }
@media (prefers-reduced-motion: reduce) { .spv-radar { animation: none; } }
/* ===== per-screen entrance animations (replay when screen goes .on) ===== */
.sph-screen.on .spv-stories .spv-story { opacity: 0; animation: spv-pop .5s cubic-bezier(.34,1.5,.5,1) forwards; }
.sph-screen.on .spv-stories .spv-story:nth-child(1) { animation-delay: .05s; }
.sph-screen.on .spv-stories .spv-story:nth-child(2) { animation-delay: .12s; }
.sph-screen.on .spv-stories .spv-story:nth-child(3) { animation-delay: .19s; }
.sph-screen.on .spv-stories .spv-story:nth-child(4) { animation-delay: .26s; }
.sph-screen.on .spv-stories .spv-story:nth-child(5) { animation-delay: .33s; }
.sph-screen.on .spv-post { opacity: 0; animation: spv-rise .55s ease .25s forwards; }
.sph-screen.on .spv-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: spv-shine 1.4s ease .5s; }
.sph-screen.on .spv-acts .liked { animation: spv-heart 1.8s ease .6s infinite; }
.sph-screen.on .spv-maptop { opacity: 0; animation: spv-drop .5s ease .15s forwards; }
.sph-screen.on .spv-pin { opacity: 0; animation: spv-pindrop .5s cubic-bezier(.34,1.5,.5,1) forwards; }
.sph-screen.on .spv-pin.p1 { animation-delay: .3s; } .sph-screen.on .spv-pin.p2 { animation-delay: .45s; } .sph-screen.on .spv-pin.p3 { animation-delay: .6s; }
.sph-screen.on .spv-pin.p3.you { animation: spv-pindrop .5s cubic-bezier(.34,1.5,.5,1) .6s forwards, spv-youpulse 2s ease 1.1s infinite; }
.sph-screen.on .spv-mapcard { opacity: 0; animation: spv-rise .55s ease .75s forwards; }
.sph-screen.on .spv-wabody .spv-bub, .sph-screen.on .spv-wabody .spv-typing { opacity: 0; animation: spv-bubin .45s cubic-bezier(.2,.9,.3,1) forwards; }
.sph-screen.on .spv-wabody > *:nth-child(3) { animation-delay: .2s; } .sph-screen.on .spv-wabody > *:nth-child(4) { animation-delay: .5s; }
.sph-screen.on .spv-wabody > *:nth-child(5) { animation-delay: .9s; } .sph-screen.on .spv-wabody > *:nth-child(6) { animation-delay: 1.2s; }
.sph-screen.on .spv-wabody > *:nth-child(7) { animation-delay: 1.6s; }
.sph-screen.on .spv-crmstats span { opacity: 0; animation: spv-pop .5s cubic-bezier(.34,1.5,.5,1) forwards; }
.sph-screen.on .spv-crmstats span:nth-child(1) { animation-delay: .2s; } .sph-screen.on .spv-crmstats span:nth-child(2) { animation-delay: .3s; } .sph-screen.on .spv-crmstats span:nth-child(3) { animation-delay: .4s; }
.sph-screen.on .spv-crow { opacity: 0; animation: spv-slidein .5s cubic-bezier(.2,.9,.3,1) forwards; }
.sph-screen.on .spv-crow:nth-child(4) { animation-delay: .5s; } .sph-screen.on .spv-crow:nth-child(5) { animation-delay: .65s; } .sph-screen.on .spv-crow:nth-child(6) { animation-delay: .8s; }
.sph-screen.on .spv-waitcancel { opacity: 0; animation: spv-drop .5s cubic-bezier(.34,1.4,.5,1) .15s forwards; }
.sph-screen.on .spv-wrow { opacity: 0; animation: spv-slidein .5s cubic-bezier(.2,.9,.3,1) forwards; }
.sph-screen.on .spv-wrow:nth-child(1) { animation-delay: .4s; } .sph-screen.on .spv-wrow:nth-child(2) { animation-delay: .55s; } .sph-screen.on .spv-wrow:nth-child(3) { animation-delay: .7s; }
.sph-screen.on .spv-wrow.filled { animation: spv-slidein .5s cubic-bezier(.2,.9,.3,1) .4s forwards, spv-wfill 1.2s ease 1s; }
.sph-screen.on .spv-wtoast { opacity: 0; animation: spv-pop .5s cubic-bezier(.34,1.5,.5,1) 1.1s forwards; }
@keyframes spv-wfill { 0%,100% { box-shadow: 0 0 0 0 rgba(57,255,20,0); } 40% { box-shadow: 0 0 0 3px rgba(57,255,20,.4); } }
@keyframes spv-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes spv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes spv-slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes spv-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes spv-bubin { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spv-pindrop { from { opacity: 0; transform: translateY(-18px) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes spv-youpulse { 0%,100% { box-shadow: 0 0 0 4px rgba(57,255,20,.22), 0 0 12px rgba(57,255,20,.9); } 50% { box-shadow: 0 0 0 9px rgba(57,255,20,.08), 0 0 20px rgba(57,255,20,1); } }
@keyframes spv-shine { to { transform: translateX(120%); } }
@keyframes spv-heart { 0%,100% { transform: scale(1); } 12% { transform: scale(1.28); } 24% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sph-screen.on .spv-stories .spv-story, .sph-screen.on .spv-post, .sph-screen.on .spv-maptop, .sph-screen.on .spv-pin, .sph-screen.on .spv-mapcard, .sph-screen.on .spv-wabody .spv-bub, .sph-screen.on .spv-wabody .spv-typing, .sph-screen.on .spv-crmstats span, .sph-screen.on .spv-crow, .sph-screen.on .spv-waitcancel, .sph-screen.on .spv-wrow, .sph-screen.on .spv-wtoast { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sph-screen.on .spv-img::after, .sph-screen.on .spv-acts .liked { animation: none !important; }
  .sph-phone { animation: none; }
}
.sph-dots { display: flex; gap: 10px; }
.sph-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line-2); transition: all .35s cubic-bezier(.2,.9,.3,1); border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sph-dot:hover { background: var(--ink-3); }
.sph-dot.on { width: 30px; background: var(--accent); box-shadow: 0 0 12px rgba(0,179,65,.5); }
html[data-theme="dark"] .sph-dot.on { background: var(--accent-hi); box-shadow: 0 0 14px rgba(57,255,20,.7); }
.sph-panels { display: flex; flex-direction: column; }
.sph-panel { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transform: translateY(24px); transition: opacity .55s, transform .55s; }
.sph-panel.on { opacity: 1; transform: none; }
.sph-t { font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em; margin-block: 14px 0; }
.sph-d { font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); line-height: 1.5; margin-block-start: 16px; max-width: 440px; }
.sph-panel-i { margin-block-start: 22px; font-family: var(--fm); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }
/* ===== PREMIUM SECTION CTA BAND ===== */
.seccta { position: relative; margin-block: 12px 4px; padding: clamp(40px,6vw,68px) clamp(24px,5vw,72px); border-radius: 28px; overflow: hidden; text-align: center; isolation: isolate; background: radial-gradient(130% 130% at 15% 0%, #17230f 0%, #0b0b0b 52%, #060606 100%); border: 1px solid rgba(57,255,20,.22); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 80px -40px rgba(57,255,20,.35), inset 0 1px 0 rgba(255,255,255,.05); }
.seccta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 44px 44px; mask: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 78%); -webkit-mask: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 78%); }
.seccta-rule { position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); background-size: 220% 100%; animation: seccta-rule 4s linear infinite; }
@keyframes seccta-rule { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.seccta-sweep { position: absolute; inset: -60% -20%; z-index: -1; background: linear-gradient(115deg, transparent 42%, rgba(57,255,20,.1) 50%, transparent 58%); animation: seccta-sweep 6s ease-in-out infinite; }
@keyframes seccta-sweep { 0%,100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.seccta-orb { position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 50%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(57,255,20,.25), transparent 62%); filter: blur(10px); animation: club-breathe 7s ease-in-out infinite; }
.seccta-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.seccta-fomo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.32); font-family: var(--fm); font-weight: 700; font-size: 12px; letter-spacing: .03em; color: var(--accent-hi); margin-block-end: 20px; }
.seccta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(57,255,20,.18); animation: pulse 1.6s ease-in-out infinite; }
.seccta-t { color: #fff; font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 16ch; text-wrap: balance; }
.seccta-sub { color: rgba(255,255,255,.62); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; margin-block-start: 14px; max-width: 46ch; text-wrap: pretty; }
.seccta-btn { position: relative; overflow: hidden; margin-block-start: 30px; font-size: 17px; padding: 17px 34px; background: linear-gradient(180deg,#5bff42,#39ff14 58%) !important; color: #021004 !important; box-shadow: 0 0 0 1px rgba(57,255,20,.5), 0 18px 50px -18px rgba(57,255,20,.7); transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .3s; will-change: transform; }
.seccta-btn:hover { box-shadow: 0 0 0 1px rgba(57,255,20,.7), 0 24px 60px -14px rgba(57,255,20,.9); }
.seccta-btn-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-130%); display: none; }
.seccta-btn-ring { position: absolute; inset: 0; border-radius: inherit; display: none; }
.seccta-arrow { font-family: var(--fm); font-weight: 700; transition: transform .25s; }
.seccta-btn:hover .seccta-arrow { transform: translateX(-5px); }
/* variant A — diagonal shine + glow (default) */
.seccta-fx-shine { animation: seccta-btn-glow 3.2s ease-in-out infinite; }
.seccta-fx-shine .seccta-btn-shine { display: block; animation: seccta-shine 3.4s ease-in-out infinite; }
@keyframes seccta-btn-glow { 0%,100% { box-shadow: 0 0 0 1px rgba(57,255,20,.5), 0 18px 50px -18px rgba(57,255,20,.55); } 50% { box-shadow: 0 0 0 1px rgba(57,255,20,.7), 0 20px 56px -16px rgba(57,255,20,.9); } }
@keyframes seccta-shine { 0%,72%,100% { transform: translateX(-130%); } 86% { transform: translateX(130%); } }
/* variant B — breathing scale pulse */
.seccta-fx-pulse { animation: seccta-fx-pulse 2.4s ease-in-out infinite; }
@keyframes seccta-fx-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(250,204,21,.5), 0 16px 44px -18px rgba(250,204,21,.6); } 50% { transform: scale(1.045); box-shadow: 0 0 0 1px rgba(250,204,21,.8), 0 22px 60px -14px rgba(250,204,21,.95); } }
/* variant C — urgent expanding ring */
.seccta-fx-ring .seccta-btn-ring { display: block; overflow: visible; }
.seccta-fx-ring .seccta-btn-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; color: #ff453a; opacity: 0; animation: seccta-fx-ring 2s ease-out infinite; }
@keyframes seccta-fx-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.28); opacity: 0; } }
/* variant D — animated gradient shift */
.seccta-fx-hue { background: linear-gradient(120deg,#39ff14,#5bff42,#00d68a,#39ff14) !important; background-size: 300% 100% !important; animation: seccta-fx-hue 4s linear infinite; }
@keyframes seccta-fx-hue { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
/* variant E — bob + arrow bounce */
.seccta-fx-bob { animation: seccta-fx-bob 2.6s ease-in-out infinite; }
.seccta-fx-bob .seccta-arrow { animation: seccta-fx-arrow 1.3s ease-in-out infinite; }
@keyframes seccta-fx-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes seccta-fx-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
/* variant F — vertical glossy sheen */
.seccta-fx-sheen .seccta-btn-shine { display: block; background: linear-gradient(0deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateY(120%); animation: seccta-fx-sheen 3s ease-in-out infinite; }
@keyframes seccta-fx-sheen { 0%,68%,100% { transform: translateY(120%); } 84% { transform: translateY(-120%); } }
.seccta-trust { margin-block-start: 16px; font-family: var(--fm); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.42); }
/* live spots countdown */
.seccta-spots { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-block-start: 24px; width: min(340px, 82%); }
.seccta-spots-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.seccta-spots-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#5bff42,#39ff14); box-shadow: 0 0 12px rgba(57,255,20,.7); transition: width 1s cubic-bezier(.2,.9,.3,1); }
.seccta-spots-txt { font-family: var(--fm); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.seccta-spots-txt b { color: var(--accent-hi); font-size: 15px; font-weight: 800; }
.seccta-club .seccta-spots-fill { background: linear-gradient(90deg,#fde047,#facc15); box-shadow: 0 0 12px rgba(250,204,21,.6); }
.seccta-club .seccta-spots-txt b { color: #fde047; }
.seccta-danger .seccta-spots-fill { background: linear-gradient(90deg,#ff8a80,#ff453a); box-shadow: 0 0 12px rgba(255,59,48,.6); }
.seccta-danger .seccta-spots-txt b { color: #ff8a80; }
/* urgency spot toast */
.spot-toast { position: fixed; inset-block-start: 76px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); z-index: 130; display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: rgba(11,11,11,.92); border: 1px solid rgba(57,255,20,.4); color: #fff; font-family: var(--fh); font-weight: 700; font-size: 14px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 40px -18px rgba(57,255,20,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .35s, transform .35s cubic-bezier(.34,1.4,.5,1); pointer-events: none; }
.spot-toast.show { opacity: 1; transform: none; }
.spot-toast .spot-toast-ic { color: var(--accent-hi); }
.spot-toast-club { border-color: rgba(250,204,21,.45); box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 40px -18px rgba(250,204,21,.6); }
.spot-toast-club .spot-toast-ic { color: #fde047; }
.spot-toast-danger { border-color: rgba(255,59,48,.45); box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 40px -18px rgba(255,59,48,.6); }
.spot-toast-danger .spot-toast-ic { color: #ff6b60; }
@media (max-width: 720px) { .spot-toast { inset-block-start: 68px; font-size: 13px; padding: 10px 15px; } }
.seccta-club { background: radial-gradient(130% 130% at 15% 0%, #241d05 0%, #0b0b0b 54%, #060606 100%); border-color: rgba(250,204,21,.28); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 80px -40px rgba(250,204,21,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.seccta-club .seccta-rule { background: linear-gradient(90deg, transparent, #facc15, transparent); background-size: 220% 100%; }
.seccta-club .seccta-fomo { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.35); color: #fde047; }
.seccta-club .seccta-dot { background: #fde047; box-shadow: 0 0 0 4px rgba(250,204,21,.2); }
.seccta-club .seccta-orb { background: radial-gradient(circle, rgba(250,204,21,.22), transparent 62%); }
.seccta-danger { background: radial-gradient(130% 130% at 15% 0%, #2a1010 0%, #0b0b0b 54%, #060606 100%); border-color: rgba(255,59,48,.26); }
.seccta-danger .seccta-rule { background: linear-gradient(90deg, transparent, #ff453a, transparent); background-size: 220% 100%; }
.seccta-danger .seccta-fomo { background: rgba(255,59,48,.12); border-color: rgba(255,59,48,.34); color: #ff8a80; }
.seccta-danger .seccta-dot { background: #ff453a; box-shadow: 0 0 0 4px rgba(255,59,48,.2); }
.seccta-danger .seccta-orb { background: radial-gradient(circle, rgba(255,59,48,.2), transparent 62%); }
@media (max-width: 600px) { .seccta { border-radius: 22px; } .seccta-t { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .seccta-rule, .seccta-sweep, .seccta-orb, .seccta-btn, .seccta-btn-shine, .seccta-btn-ring, .seccta-btn-ring::after, .seccta-arrow, .seccta-dot { animation: none !important; } .seccta-sweep, .seccta-btn-shine, .seccta-btn-ring { display: none !important; } }
.sph-panel.on .sph-panel-i { color: var(--accent); }
/* mobile caption card under the phone, synced to active screen */
.sph-caption { display: none; }
.sph-swipe-hint { display: none; font-family: var(--fm); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); transition: opacity .5s, transform .5s; }
.sph-swipe-hint.gone { opacity: 0 !important; transform: translateY(4px); pointer-events: none; animation: none !important; }
html[data-theme="dark"] .sph-panel.on .sph-panel-i { color: var(--accent-hi); }
@media (max-width: 860px) {
  .sph-grid { grid-template-columns: 1fr; gap: 0; }
  .sph-sticky { height: auto; top: 56px; order: -1; padding-block: 14px 6px; z-index: 20; background: linear-gradient(180deg, var(--bg) 72%, transparent); }
  .sph-phone { width: min(258px, 66vw); animation: none; }
  .sph-glare { display: none; }
  .sph-screen .sviz { height: 150px; }
  .sph-panels { margin-block-start: 8px; }
  .sph-panel { min-height: 78svh; text-align: center; align-items: center; }
  .sph-d { margin-inline: auto; }
  .sph-dots { margin-block-start: 4px; }
  .sph-dot { width: 11px; height: 11px; } .sph-dot.on { width: 34px; }
  .sph-swipe-hint { display: block; margin-block-start: 2px; animation: sph-hint-pulse 1.6s ease-in-out infinite; }
  .sph-caption { display: block; text-align: center; max-width: 340px; margin: 10px auto 0; animation: sph-cap-in .45s cubic-bezier(.2,.9,.3,1); }
  .sph-caption .kicker { margin-block-end: 6px; }
  .sph-cap-t { font-size: clamp(24px, 6.5vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
  .sph-cap-d { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin-block-start: 8px; text-wrap: pretty; }
  .sph-panels { display: none; }
}
@keyframes sph-cap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sph-hint-pulse { 0%,100% { opacity: .3; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .sph-swipe-hint { animation: none; } }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .sph-phone { transition: transform .5s cubic-bezier(.2,.9,.3,1); }
  .sph-phone[data-scene="map"] { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .sph-screen, .sph-panel { transition: none; } }
@keyframes fx-aurora-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6%,5%) scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .fx-aurora { display: none; } }

/* Exit-intent modal */
.fx-exit { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10,10,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-exit.show { display: flex; animation: fx-fade .3s ease; }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
.fx-exit-card { position: relative; max-width: 460px; width: 100%; background: radial-gradient(120% 100% at 100% 0%, #14210f, #0b0b0b 62%); border: 1px solid rgba(57,255,20,.3); border-radius: 28px; padding: 44px 36px; text-align: center; box-shadow: var(--shadow-3), 0 0 60px -20px rgba(57,255,20,.4); animation: fx-pop .4s cubic-bezier(.34,1.56,.64,1); overflow: hidden; color: #fff; }
.fx-exit-glow { position: absolute; inset-block-start: -40%; inset-inline-end: -20%; width: 70%; height: 100%; background: radial-gradient(circle, rgba(57,255,20,.2), transparent 60%); pointer-events: none; animation: club-breathe 6s ease-in-out infinite; }
.fx-exit-badge { position: relative; display: inline-block; margin-block-end: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(57,255,20,.12); border: 1px solid rgba(57,255,20,.3); font-family: var(--fm); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--accent-hi); }
.fx-exit-card h3 { color: #fff; }
.fx-exit-card p { color: rgba(255,255,255,.66); }
.fx-exit-card p b { color: #fff; }
.fx-exit-card .fx-exit-x { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
.fx-exit-card .fx-exit-x:hover { background: rgba(255,255,255,.1); }
.fx-exit-perks { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block: 4px 22px; }
.fx-exit-perks span { font-family: var(--fm); font-size: 11px; color: var(--accent-hi); background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.18); padding: 5px 10px; border-radius: 999px; }
.fx-exit-mark { animation: fb-pulse 2.4s ease-in-out infinite; }
.fx-exit-mark { color: var(--accent-hi); background: rgba(57,255,20,.14); }
.fx-exit-eyebrow { color: var(--accent-hi) !important; }
@keyframes fx-pop { from { transform: scale(.9) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-exit-card::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -20%; width: 60%; height: 80%; background: radial-gradient(circle, var(--accent-soft), transparent 65%); pointer-events: none; }
.fx-exit-x { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 15px; cursor: pointer; z-index: 2; }
.fx-exit-x:hover { background: var(--bg-tint); }
.fx-exit-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); position: relative; }
.fx-exit-mark svg { width: 34px; height: 34px; }
.fx-exit-eyebrow { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-block-end: 12px; position: relative; }
.fx-exit-card h3 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; position: relative; }
.fx-exit-card h3 span { color: var(--accent); }
.fx-exit-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 24px; position: relative; }
.fx-exit-cta { position: relative; }
.fx-exit-note { font-family: var(--fm); font-size: 12px; color: var(--ink-3); margin-block-start: 14px; position: relative; }

/* ==========================================================================
   V3 BLOCKS — Pains · Solutions · Club · HaKatch · CostInaction
   ========================================================================== */

/* 4 PAINS */
.pains-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 768px) { .pains-grid { grid-template-columns: 1fr; } }
.pain-b { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; overflow: hidden; box-shadow: var(--shadow-1); transition: transform .3s, border-color .3s, box-shadow .3s; }
html[data-theme="dark"] .pain-b { background: var(--bg-card); }
.pain-b::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--danger); opacity: 0; transition: opacity .3s; }
.pain-b:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.pain-b:hover::after { opacity: 1; }
.pain-b-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pain-b-tag { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.pain-b-stat { font-family: var(--fm); font-weight: 700; font-size: 46px; letter-spacing: -.04em; color: var(--danger); line-height: 1; }
.pain-b-stat.warn { color: var(--warn); }
.pain-b-cap { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pain-b h3 { margin: 20px 0 10px; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.pain-b-emo { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; }
.pain-b-fix { margin: 20px -32px -32px; padding: 15px 32px; background: var(--accent-soft); border-block-start: 1px solid var(--accent-mid, rgba(0,179,65,.22)); font-size: 14px; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; color: var(--ink); }
.pain-b-fix .pb-g { color: var(--accent); font-weight: 800; flex-shrink: 0; font-family: var(--fm); }
.pain-b-permo { font-family: var(--fm); font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pain-b-note { font-family: var(--fm); font-size: 10px; font-weight: 400; color: rgba(255,255,255,.22); margin: 12px 0 0; padding-block-start: 10px; border-block-start: 1px solid rgba(255,255,255,.07); letter-spacing: .01em; line-height: 1.5; }

/* 4 Pains — cinematic dark refonte */
.pain-b-cine { background: linear-gradient(180deg, #121212, #0b0b0b) !important; border-color: rgba(255,255,255,.1) !important; padding-block-start: 40px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.pain-b-cine::after { background: var(--danger); }
.pain-b-cine::before { content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(255,59,48,.16), transparent 65%); pointer-events: none; opacity: .7; transition: opacity .3s; }
.pain-b-cine:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(255,255,255,.2) !important; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,59,48,.2); }
.pain-b-cine:hover::before { opacity: 1; }
.pain-b-cine .pain-b-stat { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pain-b-cine:hover .pain-b-stat { transform: scale(1.06); }
.pain-b-rank { position: absolute; inset-block-start: 20px; inset-inline-end: 24px; font-size: 44px; font-weight: 700; color: rgba(255,255,255,.08); letter-spacing: -.04em; line-height: 1; transition: color .3s; }
.pain-b-cine:hover .pain-b-rank { color: rgba(255,59,48,.22); }
.pain-b-cine .pain-b-cap { color: rgba(255,255,255,.4); }
.pain-b-cine h3 { color: #fff; }
.pain-b-cine .pain-b-emo { color: rgba(255,255,255,.62); }
.pain-b-cine .pain-b-stat { color: #ff5b52; }
.pain-b-cine .pain-b-stat.warn { color: var(--warn); }
.pain-b-cine .fx-wm { color: #fff; opacity: .04; }
.pain-b-cine .pain-b-fix { background: rgba(57,255,20,.08); border-block-start-color: rgba(57,255,20,.2); color: #fff; opacity: .55; transition: opacity .3s; }
.pain-b-cine:hover .pain-b-fix { opacity: 1; }
.pain-b-cine .pain-b-fix .pb-g { color: var(--accent-hi); }

/* SOLUTIONS */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }
.sol-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; box-shadow: var(--shadow-1); transition: transform .25s, border-color .25s, box-shadow .25s; }
html[data-theme="dark"] .sol-card { background: var(--bg-card); }
.sol-card:hover { transform: translateY(-4px); border-color: var(--accent-mid, rgba(0,179,65,.3)); box-shadow: var(--shadow-2); }
.sol-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 20px; font-weight: 700; margin-block-end: 16px; }
/* colored feature-tile accents (brief: warm/cool on tiles only, never vs brand green) */
.sol-card[data-ac="blue"] .sol-ico { background: rgba(10,132,255,.10); color: #0a84ff; }
.sol-card[data-ac="violet"] .sol-ico { background: rgba(122,90,224,.10); color: #7a5ae0; }
.sol-card[data-ac="amber"] .sol-ico { background: rgba(232,137,12,.10); color: #e8890c; }
/* featured ₪0 tile — spans + dark editorial */
.sol-feat { grid-column: span 1; background: #0b0b0b !important; border-color: rgba(255,255,255,.12) !important; position: relative; overflow: hidden; }
@media (min-width: 561px) { .sol-feat { grid-column: span 2; } }
@media (min-width: 981px) { .sol-feat { grid-row: span 1; } }
.sol-feat::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 90%; background: radial-gradient(circle, rgba(57,255,20,.16), transparent 65%); pointer-events: none; }
.sol-feat .sol-ico { background: rgba(57,255,20,.14); color: var(--accent-hi); font-size: 26px; width: 56px; height: 56px; }
.sol-feat h3 { color: #fff; font-size: 26px; }
.sol-feat p { color: rgba(255,255,255,.62); font-size: 16px; }
.sol-feat .fx-wm { color: #fff; }
.sol-feat-tag { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; color: var(--accent-hi); font-size: 11px; letter-spacing: .12em; }

/* Solutions — cinematic refonte */
.sol-cine { position: relative; overflow: hidden; }
html[data-theme="dark"] .sol-cine { background: transparent; }
.sol-cine::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.ht-green-static { background: linear-gradient(180deg,#5bff42,#00b341 62%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sol-card { position: relative; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; overflow: hidden; }
.sol-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(140px 120px at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sol-card:hover { transform: translateY(-6px); }
.sol-card:hover::after { opacity: 1; }
.sol-arrow { position: absolute; inset-block-end: 22px; inset-inline-start: 26px; font-family: var(--fm); font-size: 18px; color: var(--ink-3); opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s, color .3s; }

/* Solutions — hero 3 + compact 6 */
.sol-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .sol-hero-grid { grid-template-columns: 1fr; } }
.sol-hero-grid .sol-card { min-height: 220px; }
.sol-cine .sol-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.sol-cine .sol-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-2), 0 0 0 1px var(--accent-mid, rgba(0,179,65,.3)); }
.sol-cine .sol-feat:hover { box-shadow: 0 30px 70px -30px rgba(57,255,20,.4), 0 0 0 1px rgba(57,255,20,.4); }
.sol-cine::after { content: ""; position: absolute; inset-block-start: 20%; inset-inline-start: 50%; transform: translateX(-50%); width: 60%; height: 60%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events: none; z-index: 0; }
.sol-cine .container { position: relative; z-index: 1; }
.sol-inf-badge { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-mid, rgba(0,179,65,.3)); color: var(--accent); font-size: 14px; font-weight: 700; z-index: 2; }
/* living solution mini-mockups */
.sviz { position: relative; height: 96px; margin-block-start: 16px; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.3); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: box-shadow .3s, border-color .3s; }
html[data-theme="light"] .sviz { background: var(--bg-tint); }
.sol-card:hover .sviz { border-color: var(--accent-mid, rgba(0,179,65,.3)); box-shadow: inset 0 0 20px rgba(57,255,20,.08); }
.sviz-free { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(57,255,20,.12), transparent 70%); }
.sviz-free .sviz-coin { font-family: var(--fm); font-weight: 900; font-size: 38px; color: var(--accent-hi); text-shadow: 0 0 30px rgba(57,255,20,.6); animation: sviz-coinpulse 2.4s ease-in-out infinite; }
@keyframes sviz-coinpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
html[data-theme="light"] .sviz-free .sviz-coin { color: var(--accent); }
.sviz-free .sviz-inf { position: absolute; inset-inline-end: 14px; inset-block-end: 8px; font-size: 22px; color: var(--accent); opacity: .4; animation: sviz-coinpulse 2.4s ease-in-out .6s infinite; }
.sviz-map { background-image: linear-gradient(rgba(57,255,20,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.06) 1px, transparent 1px); background-size: 18px 18px; }
.sviz-map::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg at 44% 44%, rgba(57,255,20,.18), transparent 25%); -webkit-mask: radial-gradient(circle at 44% 44%, #000 0, #000 55%, transparent 60%); mask: radial-gradient(circle at 44% 44%, #000 0, #000 55%, transparent 60%); animation: sviz-radar 3s linear infinite; }
@keyframes sviz-radar { to { transform: rotate(360deg); } }
.sviz-pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 8px rgba(57,255,20,.6); }
.sviz-pin.p1 { top: 26%; inset-inline-start: 24%; animation: sviz-blink 1.8s ease-in-out infinite; }
.sviz-pin.p2 { top: 60%; inset-inline-start: 64%; animation: sviz-blink 1.8s ease-in-out .6s infinite; }
.sviz-pin.p3.you { top: 44%; inset-inline-start: 44%; width: 13px; height: 13px; box-shadow: 0 0 0 4px rgba(57,255,20,.2), 0 0 12px rgba(57,255,20,.8); }
@keyframes sviz-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.sviz-wa { display: flex; flex-direction: column; gap: 5px; padding: 10px; justify-content: center; }
.sviz-bub { align-self: flex-end; max-width: 82%; font-size: 10px; padding: 5px 9px; border-radius: 9px; background: #005c4b; color: #e9edef; opacity: 0; animation: sviz-wa-in .5s ease forwards; }
.sviz-bub.b2 { align-self: flex-start; background: #202c33; animation-delay: 1s; }
.sviz-bub.b3 { background: #005c4b; animation-delay: 1.8s; }
@keyframes sviz-wa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sviz-pin, .sviz-bub { animation: none !important; opacity: 1 !important; } }
html[data-theme="dark"] .sol-inf-badge { color: var(--accent-hi); }
.sol-row { position: relative; }
.sol-row .sol-inf-badge { position: static; flex-shrink: 0; align-self: center; }
.sol-infinity { position: relative; width: min(300px, 72vw); height: 150px; margin: 0 auto 30px; display: grid; place-items: center; }
.sol-infinity::before { content: ""; position: absolute; width: 240px; height: 130px; border-radius: 50%; background: radial-gradient(ellipse, rgba(57,255,20,.22), transparent 68%); filter: blur(10px); animation: sol-inf-halo 4s ease-in-out infinite; }
@keyframes sol-inf-halo { 0%,100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.18); opacity: 1; } }
.sol-infinity svg { position: relative; width: 100%; height: 100%; color: var(--accent-hi); filter: drop-shadow(0 0 18px rgba(57,255,20,.6)); }
.sol-infinity svg .inf-base { fill: none; stroke: rgba(57,255,20,.14); stroke-width: 7; }
.sol-infinity svg .inf-draw { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 90 400; stroke-dashoffset: 0; animation: sol-inf-run 3.2s linear infinite; }
@keyframes sol-inf-run { to { stroke-dashoffset: -490; } }
.sol-infinity .sol-inf-core { display: none; }
@media (prefers-reduced-motion: reduce) { .sol-infinity svg .inf-draw { animation: none; stroke-dasharray: none; } .sol-infinity::before { animation: none; } }
.sol-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-start: 18px; }
.sol-more-card { min-height: 240px; }
.sviz-cal { display: flex; flex-direction: column; gap: 5px; padding: 10px; justify-content: center; }
.svc-row { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; font-size: 10px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
html[data-theme="light"] .svc-row { background: #fff; }
.svc-row i { font-family: var(--fm); font-style: normal; color: var(--ink-3); }
.svc-row b { color: var(--ink); }
.svc-row.fill { border-color: var(--accent-mid, rgba(0,179,65,.4)); background: var(--accent-soft); animation: svc-flash 3s ease-in-out infinite; }
@keyframes svc-flash { 0%,80%,100% { background: var(--accent-soft); } 85% { background: rgba(57,255,20,.25); } }
.sviz-url { display: grid; place-items: center; padding: 12px; }
.svu-bar { font-family: var(--fm); font-size: 11px; color: var(--ink-2); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.svu-bar b { color: var(--accent); }
html[data-theme="dark"] .svu-bar b { color: var(--accent-hi); }
.svu-caret { display: inline-block; width: 1px; height: 12px; background: var(--accent); margin-inline-start: 2px; vertical-align: middle; animation: svu-blink 1s step-end infinite; }
@keyframes svu-blink { 50% { opacity: 0; } }
.sviz-ai { display: flex; flex-direction: column; gap: 6px; padding: 12px; justify-content: center; }
.sva-l { font-family: var(--fm); font-size: 10px; color: var(--accent); }
html[data-theme="dark"] .sva-l { color: var(--accent-hi); }
.sva-type { font-size: 12px; color: var(--ink); overflow: hidden; white-space: nowrap; border-inline-end: 2px solid var(--accent); width: 0; animation: sva-typing 4s steps(20) infinite; }
@keyframes sva-typing { 0% { width: 0; } 50%,100% { width: 100%; } }
.sviz-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; position: relative; }
.svf-cell { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, rgba(57,255,20,.14), rgba(255,255,255,.04)); position: relative; overflow: hidden; }
.svf-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%); transform: translateX(-120%); animation: svf-shine 3.4s ease-in-out infinite; }
.svf-cell:nth-child(2)::after { animation-delay: .4s; }
.svf-cell:nth-child(3)::after { animation-delay: .8s; }
@keyframes svf-shine { 0%,50% { transform: translateX(-120%); } 75%,100% { transform: translateX(120%); } }
.svf-like { grid-column: 1 / -1; text-align: center; font-family: var(--fm); font-size: 11px; color: var(--accent); animation: svf-heart 2.6s ease-in-out infinite; }
html[data-theme="dark"] .svf-like { color: var(--accent-hi); }
@keyframes svf-heart { 0%,70%,100% { transform: scale(1); } 80% { transform: scale(1.12); } }
.sviz-chiko { display: flex; align-items: center; gap: 10px; padding: 14px; }
.svk-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; animation: svk-bob 2s ease-in-out infinite; }
html[data-theme="dark"] .svk-av { color: var(--accent-hi); }
@keyframes svk-bob { 50% { transform: translateY(-4px); } }
.svk-msg { font-size: 12px; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.sviz-wait { display: flex; flex-direction: column; gap: 5px; padding: 10px; justify-content: center; }
.svw-row { font-size: 11px; padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); }
.svw-note { font-size: 11px; color: var(--accent); font-weight: 700; padding: 5px 9px; border-radius: 7px; background: var(--accent-soft); animation: svw-pop 3s ease-in-out infinite; }
html[data-theme="dark"] .svw-note { color: var(--accent-hi); }
@keyframes svw-pop { 0%,70%,100% { opacity: .6; } 80% { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .svc-row.fill, .sva-type, .svk-av, .svw-note, .svu-caret { animation: none !important; } .sva-type { width: 100%; } .sviz-map::after, .sviz-free .sviz-coin, .sviz-free .sviz-inf { animation: none !important; } .svf-cell::after, .svf-like { animation: none !important; } }
@media (max-width: 860px) { .sol-more { grid-template-columns: 1fr; } }
.sol-row { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); transition: transform .25s, border-color .25s, background .25s; position: relative; }
html[data-theme="light"] .sol-row { background: #fff; box-shadow: var(--shadow-1); }
.sol-row:hover { transform: translateY(-3px); border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.sol-row-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; font-weight: 700; }
html[data-theme="dark"] .sol-row-ico { color: var(--accent-hi); }
.sol-row[data-ac="blue"] .sol-row-ico { background: rgba(10,132,255,.12); color: #4dd0ff; }
.sol-row[data-ac="violet"] .sol-row-ico { background: rgba(122,90,224,.12); color: #a78bfa; }
.sol-row[data-ac="amber"] .sol-row-ico { background: rgba(232,137,12,.12); color: #ff9f0a; }
.sol-row-txt { flex: 1; }
.sol-row-txt h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.sol-row-txt p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.sol-row-tick { flex-shrink: 0; color: var(--accent); font-weight: 700; opacity: .5; }
html[data-theme="dark"] .sol-row-tick { color: var(--accent-hi); }
.sol-roi { display: inline-block; margin-block-start: 12px; font-size: 11px; letter-spacing: .04em; color: var(--accent); padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); }
html[data-theme="dark"] .sol-roi { color: var(--accent-hi); }
.sol-row .sol-roi { margin-block-start: 8px; }
.sol-card:hover .sol-arrow { opacity: 1; transform: none; color: var(--accent); }
html[data-theme="dark"] .sol-card:hover .sol-arrow { color: var(--accent-hi); }
.sol-card .sol-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.sol-card:hover .sol-ico { transform: scale(1.08) rotate(-4deg); }
.sol-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.sol-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* ₪0 OFFER */
.offer-card { margin-block-start: 40px; background: #fff; border: 2px solid var(--accent); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
html[data-theme="dark"] .offer-card { background: var(--bg-card); }
.offer-card::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 90%; background: radial-gradient(circle, var(--accent-soft), transparent 65%); pointer-events: none; }
.offer-head { position: relative; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-block-end: 28px; border-block-end: 1px solid var(--line); }
.offer-price { font-family: var(--fm); font-weight: 900; font-size: clamp(64px, 10vw, 110px); letter-spacing: -.05em; line-height: .9; color: var(--accent); }
.offer-price .cur { font-size: .4em; vertical-align: super; }
.offer-price .per { font-family: var(--fh); font-weight: 500; font-size: 15px; color: var(--ink-2); margin-inline-start: 10px; letter-spacing: 0; }
.offer-sub { margin-block-start: 10px; color: var(--ink-2); font-size: 15px; max-width: 460px; }
.offer-feats { position: relative; margin-block-start: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
@media (max-width: 900px) { .offer-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .offer-feats { grid-template-columns: 1fr; } }
.offer-feat { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.offer-feat .of-tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.offer-feat .of-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
html[data-theme="dark"] .offer-feat .of-ico { color: var(--accent-hi); }
.offer-vs { margin-block-start: 24px; padding-block-start: 22px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; font-size: 13px; }
/* offer — coming soon sub-section */
.offer-soon { position: relative; margin-block-start: 26px; padding: 20px 22px; border-radius: var(--r-md); border: 1px dashed var(--accent-mid, rgba(0,179,65,.35)); background: var(--accent-soft); }
.offer-soon-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.offer-soon-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #021004); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.offer-soon-sub { font-size: 13px; color: var(--ink-2); }
.offer-soon-sub b { color: var(--accent); }
html[data-theme="dark"] .offer-soon-sub b { color: var(--accent-hi); }
.offer-soon-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .offer-soon-items { grid-template-columns: 1fr; } }
.offer-soon-item { position: relative; padding: 12px 14px 12px 34px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
html[data-theme="dark"] .offer-soon-item { background: rgba(255,255,255,.04); }
.offer-soon-item::before { content: "🕓"; position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); font-size: 13px; filter: grayscale(1) opacity(.6); }
.offer-vs-them { color: var(--ink-3); }
.offer-vs-them s { text-decoration-color: var(--danger); }
.offer-vs-us { color: var(--accent); }
html[data-theme="dark"] .offer-vs-us { color: var(--accent-hi); }
.offer-vs-us b { font-size: 16px; }

/* ₪0 offer — cinematic */
.offer-cine { position: relative; overflow: hidden; }
html[data-theme="dark"] .offer-cine { background: radial-gradient(100% 120% at 100% 0%, #14210f, #0b0b0b 62%) !important; border-color: rgba(57,255,20,.32) !important; }
.offer-glow { position: absolute; inset-block-start: -50%; inset-inline-end: -10%; width: 60%; height: 130%; background: radial-gradient(circle, rgba(57,255,20,.18), transparent 60%); pointer-events: none; animation: club-breathe 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .offer-glow { animation: none; } }
.offer-price { position: relative; }
html[data-theme="dark"] .offer-price { color: var(--accent-hi); text-shadow: 0 0 40px rgba(57,255,20,.35); animation: offer-price-glow 3s ease-in-out infinite; }
@keyframes offer-price-glow { 0%,100% { text-shadow: 0 0 40px rgba(57,255,20,.3); } 50% { text-shadow: 0 0 60px rgba(57,255,20,.55); } }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .offer-price { animation: none; } }
.offer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 16px; }
.offer-badge { font-family: var(--fm); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-mid, rgba(0,179,65,.22)); }
html[data-theme="dark"] .offer-badge { color: var(--accent-hi); }
.offer-feat { position: relative; transition: transform .2s; }
.offer-feat:hover { transform: translateX(-4px); }
html[dir="ltr"] .offer-feat:hover { transform: translateX(4px); }

/* offer ₪0 — comparison strip */
.offer-compare { position: relative; margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .offer-compare { grid-template-columns: 1fr; } }
.ocmp { padding: 16px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; }
.ocmp-them { background: var(--card-2); border: 1px solid var(--line); }
html[data-theme="dark"] .ocmp-them { background: rgba(255,255,255,.03); }
.ocmp-us { background: var(--accent-soft); border: 1px solid var(--accent-mid, rgba(0,179,65,.3)); }
.ocmp-k { font-size: 10px; letter-spacing: .12em; color: var(--ink-3); }
.ocmp-us .ocmp-k { color: var(--accent); }
html[data-theme="dark"] .ocmp-us .ocmp-k { color: var(--accent-hi); }
.ocmp-v { font-family: var(--fm); font-weight: 700; font-size: 16px; color: var(--ink); }
.ocmp-them .ocmp-v { color: var(--ink-3); }
.ocmp-them .ocmp-v s { text-decoration-color: var(--danger); }
.ocmp-us .ocmp-v { color: var(--accent); font-size: 18px; }
html[data-theme="dark"] .ocmp-us .ocmp-v { color: var(--accent-hi); }

/* CLUB ₪100 */
.club-b { position: relative; background: #fff; border: 1px solid var(--accent); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow-2); overflow: hidden; }
html[data-theme="dark"] .club-b { background: var(--bg-card); }
.club-b::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 90%; background: radial-gradient(circle, var(--accent-soft), transparent 65%); pointer-events: none; }
.club-b-top { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.club-b-badge { background: var(--accent); color: var(--accent-ink, #021004); padding: 8px 15px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(57,255,20,.25); }
.club-b h2 { position: relative; margin-block-start: 20px; }
.club-b .lead { position: relative; }
.club-hero { position: relative; text-align: center; margin-block: 32px 8px; }
.club-hero-n { font-family: var(--fm); font-weight: 900; font-size: clamp(72px, 16vw, 170px); letter-spacing: -.05em; line-height: .9; color: var(--accent-hi); text-shadow: 0 0 60px rgba(57,255,20,.4); }
html[data-theme="light"] .club-hero-n { color: var(--accent); }
.club-hero-sub { margin-block-start: 4px; font-size: 12px; letter-spacing: .2em; color: var(--ink-3); }
.club-earn { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-block: 24px; }
@media (max-width: 600px) { .club-earn { grid-template-columns: 1fr; } }
.club-earn-item { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; text-align: center; }
html[data-theme="light"] .club-earn-item { background: var(--bg-tint); }
.club-earn-item.hi { background: var(--accent-soft); border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.club-earn-item .cei-n { font-family: var(--fm); font-weight: 700; font-size: 30px; letter-spacing: -.03em; color: var(--ink); }
.club-earn-item.hi .cei-n { color: var(--accent); }
html[data-theme="dark"] .club-earn-item.hi .cei-n { color: var(--accent-hi); }
.club-earn-item .cei-l { margin-block-start: 6px; font-size: 13px; color: var(--ink-2); }

/* Club — cinematic refonte */
.club-cine { position: relative; overflow: hidden; }
html[data-theme="dark"] .club-b.club-cine { background: linear-gradient(180deg, #101210, #0b0b0b); border-color: rgba(57,255,20,.28); }
.club-glow { position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 120%; background: radial-gradient(circle, rgba(57,255,20,.18), transparent 62%); pointer-events: none; animation: club-breathe 8s ease-in-out infinite; }
@keyframes club-breathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .club-glow { animation: none; } }
.club-b-fill { position: relative; }
.club-coin { position: absolute; inset-inline-end: -13px; inset-block-start: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #e9c84a 60%, #b8942e); color: #6b4e12; font-family: var(--fm); font-weight: 900; font-size: 13px; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
html[dir="rtl"] .club-coin { inset-inline-end: auto; inset-inline-start: -13px; }
.club-bank { position: relative; margin-block-start: 26px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; max-width: 400px; background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.22); overflow: hidden; }
.club-bank::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(57,255,20,.12), transparent); transform: translateX(-100%); animation: club-sheen 3.6s ease-in-out infinite; }
@keyframes club-sheen { 0%,55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .club-bank::before { animation: none; } }
.club-bank .cbk-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--fm); font-weight: 900; font-size: 18px; flex-shrink: 0; }
html[data-theme="dark"] .club-bank .cbk-ico { color: var(--accent-hi); }
.club-bank .cbk-txt { flex: 1; }
.club-bank .cbk-h { font-weight: 700; font-size: 13px; }
.club-bank .cbk-s { font-family: var(--fm); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; margin-block-start: 2px; }
.club-bank .cbk-amt { font-family: var(--fm); font-weight: 700; font-size: 20px; color: var(--accent); }
html[data-theme="dark"] .club-bank .cbk-amt { color: var(--accent-hi); }
.club-b-bar { position: relative; margin-block-start: 30px; height: 14px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.club-b-fill { height: 100%; width: 0; background: linear-gradient(180deg,#5bff42,#00b341 62%); border-radius: 999px; box-shadow: 0 0 20px rgba(57,255,20,.5); transition: width 1.4s cubic-bezier(.22,1,.36,1); }
.club-b-ticks { display: flex; justify-content: space-between; margin-block-start: 10px; font-size: 12px; color: var(--ink-3); }
.club-paidout { text-align: center; margin-block-start: 16px; font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.club-paidout b { color: var(--accent); font-size: 15px; }
html[data-theme="dark"] .club-paidout b { color: var(--accent-hi); }
.club-b-payouts { position: relative; margin-block-start: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .club-b-payouts { grid-template-columns: 1fr; } }
.club-b-p { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.cbp-n { font-family: var(--fm); font-weight: 700; font-size: 28px; letter-spacing: -.03em; color: var(--accent); }
.cbp-d { margin-block-start: 6px; font-size: 13px; color: var(--ink-2); }

/* HA-KATCH */
.katch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .katch-grid { grid-template-columns: 1fr; } }
.katch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .katch-card { background: var(--bg-card); }
.katch-card:first-child { border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.katch-coin { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #e9c84a 60%, #b8942e); color: #6b4e12; font-family: var(--fm); font-weight: 900; font-size: 24px; display: grid; place-items: center; box-shadow: var(--shadow-1); margin-block-end: 18px; }
.katch-big { font-family: var(--fm); font-weight: 700; font-size: 48px; letter-spacing: -.04em; color: var(--accent); line-height: 1; margin-block-end: 14px; }
.katch-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.katch-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.katch-card p b { color: var(--ink); }
.katch-byline { margin-block-start: 32px; text-align: center; font-style: italic; font-size: 20px; color: var(--ink-2); }

/* COST OF INACTION */
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .cost-grid { grid-template-columns: 1fr; } }
.cost-col { border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--line); }
.cost-col.without { background: linear-gradient(180deg, rgba(255,59,48,.05), transparent); border-color: rgba(255,59,48,.25); }
.cost-col.with { background: linear-gradient(180deg, var(--accent-soft), transparent); border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.cost-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--danger); margin-block-end: 20px; }
.cost-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cost-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.cost-list li span { font-family: var(--fm); font-weight: 700; font-size: 18px; letter-spacing: -.02em; flex-shrink: 0; }
.cost-col.without .cost-list li span { color: var(--danger); }
.cost-col.with .cost-list li span { color: var(--accent); }
.cost-list li em { font-style: normal; font-size: 13px; color: var(--ink-2); text-align: start; }
.cost-total { margin-block-start: 20px; font-family: var(--fm); font-weight: 700; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.04em; }
.cost-total.danger { color: var(--danger); }
.cost-total.ok { color: var(--accent); }
.cost-foot { margin-block-start: 28px; text-align: center; font-size: 17px; color: var(--ink); }

/* Cost of inaction — cinematic refonte */
.cost-cine { position: relative; overflow: hidden; }

/* 3 steps to start */
.wa-cine { position: relative; overflow: hidden; }
.wa-cine::after { content: ""; position: absolute; inset-block-start: 20%; inset-inline-end: 8%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(37,211,102,.10), transparent 62%); pointer-events: none; }
.wa-phone { width: 300px; max-width: 84vw; margin-inline: auto; background: #0a0a0a; border-radius: 34px; padding: 8px; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px -20px rgba(37,211,102,.4); position: relative; z-index: 1; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wa-phone:hover { transform: translateY(-6px) rotate(-1deg); }
.wa-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #075E54; color: #fff; border-radius: 26px 26px 0 0; }
.wa-av { width: 34px; height: 34px; border-radius: 50%; background: #25D366; display: grid; place-items: center; color: #052915; font-weight: 800; flex-shrink: 0; }
.wa-nm { font-weight: 700; font-size: 13px; }
.wa-st { font-size: 10px; opacity: .85; }
.wa-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: #0b141a; border-radius: 0 0 26px 26px; min-height: 320px; }
.wa-day { align-self: center; margin-block: 2px 6px; }
.wa-day span { background: rgba(255,255,255,.08); color: #8696a0; font-family: var(--fm); font-size: 9px; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.wa-msg { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; position: relative; color: #e9edef; }
.wa-msg.in { align-self: flex-start; background: #202c33; }
.wa-msg.out { align-self: flex-end; background: #005c4b; }
.wa-msg .wa-t { display: block; margin-block-start: 4px; font-family: var(--fm); font-size: 9px; opacity: .6; text-align: end; }
.wa-msg.typing { display: inline-flex; gap: 4px; align-items: center; padding: 11px; }
.wa-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: wa-bob 1.2s ease-in-out infinite; }
.wa-msg.typing span:nth-child(2) { animation-delay: .15s; }
.wa-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wa-bob { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
.wa-body.play .rm { opacity: 0; transform: translateY(8px); animation: wa-in .4s cubic-bezier(.2,.8,.2,1) forwards; }
.wa-body.play .rm:nth-child(2) { animation-delay: .2s; }
.wa-body.play .rm:nth-child(3) { animation-delay: .8s; }
.wa-body.play .rm:nth-child(4) { animation-delay: 1.5s; }
.wa-body.play .rm:nth-child(5) { animation-delay: 2.1s; }
.wa-body.play .rm:nth-child(6) { animation-delay: 2.8s; }
@keyframes wa-in { to { opacity: 1; transform: none; } }
.wa-stats { display: flex; gap: 10px; margin-block-start: 26px; flex-wrap: wrap; }
.wa-stats .was { flex: 1; min-width: 90px; text-align: center; padding: 16px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); }
html[data-theme="light"] .wa-stats .was { background: #fff; box-shadow: var(--shadow-1); }
.wa-stats .was b { display: block; font-family: var(--fm); font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: var(--accent); }
html[data-theme="dark"] .wa-stats .was b { color: var(--accent-hi); }
.wa-stats .was span { font-size: 12px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .wa-body.play .rm { animation: none; opacity: 1; transform: none; } .wa-msg.typing span { animation: none; } }

/* 3 steps to start */
.onlyb-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px,5vw,60px); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
html[data-theme="light"] .onlyb-card { background: #fff; box-shadow: var(--shadow-2); }
.onlyb-glow { position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 120%; background: radial-gradient(circle, var(--accent-soft), transparent 60%); pointer-events: none; }
.onlyb-in { position: relative; }
.onlyb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-block-start: 32px; }
@media (max-width: 760px) { .onlyb-grid { grid-template-columns: 1fr; } }
.onlyb-item { display: flex; gap: 12px; align-items: flex-start; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card-2); }
html[data-theme="dark"] .onlyb-item { background: rgba(255,255,255,.03); }
.onlyb-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 16px; }
html[data-theme="dark"] .onlyb-ico { color: var(--accent-hi); }
.onlyb-item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.onlyb-item p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.appshots { position: relative; overflow: hidden; }
.appshots::after { content: ""; position: absolute; inset-block-start: 20%; inset-inline: 50%; transform: translateX(50%); width: 70%; height: 60%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events: none; }
.appshots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; justify-items: center; position: relative; z-index: 1; }
@media (max-width: 860px) { .appshots-grid { grid-template-columns: 1fr; } }
.appshot { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.appshot:hover { transform: translateY(-8px); }
.appshot:nth-child(2) { transform: translateY(-20px); }
.appshot:nth-child(2):hover { transform: translateY(-28px); }
.appshot-phone { width: 260px; max-width: 78vw; aspect-ratio: 9/19; background: #0a0a0a; border-radius: 34px; padding: 8px; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,.06), 0 0 50px -20px rgba(57,255,20,.35); position: relative; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.appshot:hover .appshot-phone { box-shadow: var(--shadow-3), 0 0 0 1px rgba(57,255,20,.3), 0 0 70px -20px rgba(57,255,20,.6); }
.appshot-phone::after { content: ""; position: absolute; inset: 8px; border-radius: 26px; background: linear-gradient(160deg, rgba(57,255,20,.06), transparent 50%); pointer-events: none; z-index: 4; }
.appshot-phone::before { content: ""; position: absolute; inset-block-start: 12px; inset-inline-start: 50%; transform: translateX(-50%); width: 70px; height: 18px; background: #000; border-radius: 999px; z-index: 3; }
.appshot-phone image-slot { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; display: block; }
.appshot-lbl { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.steps3 { position: relative; }
.steps3 { position: relative; overflow: hidden; }
.steps3::before { content: ""; position: absolute; inset-block-start: 30%; inset-inline: 50%; transform: translateX(50%); width: 70%; height: 60%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); pointer-events: none; }
.steps3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
@media (min-width: 861px) { .steps3-grid::before { content: ""; position: absolute; inset-block-start: 84px; inset-inline: 16%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-mid, rgba(0,179,65,.3)), transparent); z-index: 0; } }
@media (max-width: 860px) { .steps3-grid { grid-template-columns: 1fr; } }
.step3 { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: transform .3s, border-color .3s, box-shadow .3s; }
html[data-theme="light"] .step3 { background: #fff; box-shadow: var(--shadow-1); }
.step3:hover { transform: translateY(-6px); border-color: var(--accent-mid, rgba(0,179,65,.3)); box-shadow: var(--shadow-2); }
.step3-n { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-mid, rgba(0,179,65,.3)); font-family: var(--fm); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: var(--accent); line-height: 1; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
html[data-theme="dark"] .step3-n { color: var(--accent-hi); box-shadow: 0 0 24px rgba(57,255,20,.25); }
.step3:hover .step3-n { transform: scale(1.12) rotate(-6deg); box-shadow: 0 0 34px rgba(57,255,20,.5); }
.step3::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(180px 140px at 50% 0%, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.step3:hover::after { opacity: 1; }
.step3 h3 { margin: 18px 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.step3 p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.step3-arrow { position: absolute; inset-block-start: 52px; inset-inline-start: -14px; transform: translateY(-50%); font-family: var(--fm); font-size: 22px; color: var(--accent); z-index: 2; }
html[data-theme="dark"] .step3-arrow { color: var(--accent-hi); }
@media (max-width: 860px) { .step3-arrow { display: none; } }

/* מה הקאץ' — cinematic */
.katch3-cine { position: relative; overflow: hidden; }
.katch3-coin-halo { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(230,178,58,.28), transparent 62%); pointer-events: none; filter: blur(8px); animation: club-breathe 5s ease-in-out infinite; }
html[data-theme="dark"] .katch3-cine { background: radial-gradient(90% 80% at 70% 30%, #101210, #0a0a0a 70%); }
.katch3-vglow { position: absolute; inset-block-start: 20%; inset-inline-end: 8%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(57,255,20,.14), transparent 62%); pointer-events: none; animation: club-breathe 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .katch3-vglow { animation: none; } }
.katch3-coin-wrap { position: relative; }
.katch3-coin-halo { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 260px; height: 260px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(57,255,20,.22), transparent 62%); pointer-events: none; filter: blur(6px); }
html[dir="rtl"] .katch3-coin-halo { inset-inline-start: auto; inset-inline-end: 50%; transform: translate(50%,-50%); }

/* Live Map — Israel with pins */
.lm-cine { position: relative; overflow: hidden; }
.lm-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lm-bullets li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.lm-bullets .lm-tk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--fm); font-size: 12px; }
html[data-theme="dark"] .lm-bullets .lm-tk { color: var(--accent-hi); }
.lm-frame { position: relative; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(80% 70% at 60% 40%, #0f130e, #0a0a0a); box-shadow: var(--shadow-2); }
html[data-theme="light"] .lm-frame { background: radial-gradient(80% 70% at 60% 40%, #f4f6f2, #eceee9); }
.lm-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,255,20,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.06) 1px, transparent 1px); background-size: 30px 30px; }
.lm-scan-line { position: absolute; inset-inline: 0; inset-block-start: 0; height: 40%; background: linear-gradient(180deg, rgba(57,255,20,.12), transparent); animation: lm-scan 4s ease-in-out infinite; pointer-events: none; }
@keyframes lm-scan { 0%,100% { transform: translateY(-20%); opacity: .5; } 50% { transform: translateY(180%); opacity: 1; } }
.lm-israel { position: absolute; inset: 0; height: 84%; margin: auto; display: block; }
.lm-land { fill: rgba(57,255,20,.06); stroke: var(--accent); stroke-width: 1; opacity: .7; }
html[data-theme="light"] .lm-land { fill: rgba(0,179,65,.06); }
.lm-counter { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 3; background: rgba(11,11,11,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(57,255,20,.25); border-radius: 12px; padding: 10px 14px; }
html[data-theme="light"] .lm-counter { background: rgba(255,255,255,.85); border-color: var(--line); }
.lm-c-n { font-family: var(--fm); font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: var(--accent-hi); }
html[data-theme="light"] .lm-c-n { color: var(--accent); }
.lm-c-l { font-family: var(--fm); font-size: 10px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; margin-block-start: 2px; }
.lm-c-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(57,255,20,.2); animation: pulse 1.6s infinite; }
.lm-pin { position: absolute; transform: translate(-50%, -100%); z-index: 2; opacity: 0; }
.lm-pin.drop { animation: lm-drop .7s cubic-bezier(.34,1.7,.5,1) forwards; }
@keyframes lm-drop { 0% { opacity: 0; transform: translate(-50%, -240%) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.lm-pin-head { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: #8b909b; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.lm-pin.live .lm-pin-head { background: var(--accent-hi); }
.lm-pin.big .lm-pin-head { width: 28px; height: 28px; }
.lm-pin-ring { position: absolute; inset-block-start: 11px; inset-inline-start: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 50%; background: rgba(57,255,20,.4); }
.lm-pin.live .lm-pin-ring { animation: lm-ring 1.8s ease-out infinite; }
@keyframes lm-ring { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
.lm-pin-tag { position: absolute; inset-block-start: -32px; inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(11,11,11,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 4px 10px; font-family: var(--fm); font-size: 10px; opacity: 0; transition: opacity .3s; }
html[data-theme="light"] .lm-pin-tag { background: rgba(255,255,255,.92); border-color: var(--line-2); color: var(--ink); }
.lm-pin.big .lm-pin-tag, .lm-pin:hover .lm-pin-tag { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lm-scan-line, .lm-pin.live .lm-pin-ring { animation: none; } .lm-pin { opacity: 1 !important; transform: translate(-50%,-100%) !important; } }
.cost-glow { position: absolute; inset-block-start: 10%; inset-inline: 50%; transform: translateX(50%); width: 60%; height: 50%; background: radial-gradient(circle, rgba(255,59,48,.14), transparent 62%); pointer-events: none; animation: club-breathe 9s ease-in-out infinite; }
.cost-hero { position: relative; text-align: center; margin-block-end: 40px; }
.cost-hero-lbl { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); }
.cost-hero-n { font-family: var(--fm); font-weight: 700; font-size: clamp(52px, 12vw, 110px); letter-spacing: -.05em; line-height: 1; color: var(--danger); font-variant-numeric: tabular-nums; margin-block: 10px; text-shadow: 0 0 50px rgba(255,59,48,.25); animation: cost-throb 2.6s ease-in-out infinite; }
@keyframes cost-throb { 0%,100% { text-shadow: 0 0 50px rgba(255,59,48,.22); } 50% { text-shadow: 0 0 70px rgba(255,59,48,.4); } }
@media (prefers-reduced-motion: reduce) { .cost-hero-n { animation: none; } }
.cost-hero-sub { font-size: 15px; color: var(--ink-2); }

/* Cost — interactive calculator */
.cost-calc { max-width: 520px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 22px; background: radial-gradient(120% 100% at 100% 0%, rgba(255,59,48,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,59,48,.2); border-radius: var(--r-lg); padding: 28px; position: relative; overflow: hidden; }
html[data-theme="light"] .cost-calc { background: #fff; box-shadow: var(--shadow-1); border-color: rgba(255,59,48,.2); }
.cost-calc::before { content: ""; position: absolute; inset-block-start: -50%; inset-inline-end: -10%; width: 55%; height: 120%; background: radial-gradient(circle, rgba(255,59,48,.12), transparent 60%); pointer-events: none; }
.cost-slider { position: relative; }
.cost-slider .cs-lb { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 10px; font-size: 15px; }
.cost-slider .cs-v { font-family: var(--fm); font-weight: 700; font-size: 20px; color: var(--danger); }
.cost-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line-2); outline: none; }
.cost-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg,#ff6a60,#ff3b30); cursor: pointer; box-shadow: 0 0 0 6px rgba(255,59,48,.14), 0 2px 8px rgba(0,0,0,.4); }
.cost-slider input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--danger); cursor: pointer; }
.cost-calc-note { text-align: center; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }

/* ==========================================================================
   מה הקאץ' (v3) — real ₪1 coin + tight proof band
   ========================================================================== */
.katch3 { position: relative; overflow: hidden; }
.katch3-rays { position: absolute; inset-block-start: -10%; inset-inline-end: 8%; width: 460px; height: 460px; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%); opacity: .8; filter: blur(6px);
  animation: k3-breathe 9s ease-in-out infinite; }
@keyframes k3-breathe { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.14); opacity: 1; } }
.katch3-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "left coin" "winwin winwin" "proof proof" "cards cards" "by by"; gap: 40px 48px; align-items: center; }
@media (max-width: 860px) { .katch3-grid { grid-template-columns: 1fr; grid-template-areas: "coin" "left" "winwin" "proof" "cards" "by"; gap: 32px; text-align: center; } }
.katch3-left { grid-area: left; }
.katch3-left .h-section { margin-block-start: 14px; }
.katch3-left .lead { max-width: 520px; }
@media (max-width: 860px) { .katch3-left .lead { margin-inline: auto; } }
.katch3-stamp { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 20px; padding: 9px 18px; border: 2.5px solid var(--accent); color: var(--accent); border-radius: 8px; font-family: var(--fm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-5deg); opacity: 0; box-shadow: 0 4px 16px rgba(0,179,65,.15); }
.katch3-stamp.hit { animation: k3-stamp .5s cubic-bezier(.34,1.7,.5,1) forwards; }
@keyframes k3-stamp { 0% { opacity: 0; transform: rotate(-5deg) scale(2.6); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(-5deg) scale(1); } }

/* coin */
.katch3-coin-wrap { grid-area: coin; perspective: 1100px; display: grid; place-items: center; }
.katch3-coin { width: min(230px, 56vw); aspect-ratio: 1; position: relative; transform-style: preserve-3d; animation: k3-idle 7s ease-in-out infinite; }
.katch3-coin.flip { animation: k3-flip 2.6s cubic-bezier(.2,.7,.15,1) both, k3-spin 6s linear 2.6s infinite; }
@keyframes k3-flip { 0% { transform: rotateY(0) scale(.7); } 100% { transform: rotateY(1440deg) scale(1); } }
@keyframes k3-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes k3-idle { 0%,100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(14deg) translateY(-8px); } }
.k3-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; box-shadow: 0 28px 56px -10px rgba(0,0,0,.55), 0 10px 22px -6px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 12px -3px rgba(0,0,0,.4); }
.k3-front { }
.k3-back { transform: rotateY(180deg); background: radial-gradient(circle at 36% 30%, #ffffff, #c3c8d1 55%, #6d7280); }
.k3-back .logo { font-family: var(--fm); font-weight: 900; font-size: clamp(20px, 5vw, 30px); color: #4a4e5a; display: inline-flex; align-items: center; gap: 3px; }
.k2-coin-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.k2-legend { font-family: var(--fh); font-weight: 700; font-size: 15px; fill: #4a4e5a; letter-spacing: .04em; }
.k2-one { font-family: var(--fm); font-weight: 900; font-size: 30px; fill: #383b45; }

/* proof band */
.katch3-proof { grid-area: proof; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-block-start: 8px; }
@media (max-width: 860px) { .katch3-proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .katch3-proof { grid-template-columns: 1fr; } }
.k3-metric { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 20px; box-shadow: var(--shadow-1); transition: transform .25s, border-color .25s; }
html[data-theme="dark"] .k3-metric { background: var(--bg-card); }
.k3-metric:hover { transform: translateY(-4px); border-color: var(--accent-mid, rgba(0,179,65,.3)); }
.k3-m-n { font-family: var(--fm); font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: var(--ink-3); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.k3-m-n b { color: var(--accent); font-size: 30px; }
.k3-arr, .k3-minus, .k3-m-n .k3-minus { color: var(--ink-3); font-size: 20px; }
.k3-metric-money .k3-m-n b { font-size: 30px; }
.k3-m-l { margin-block-start: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

.katch3-byline { grid-area: by; text-align: center; font-style: italic; font-size: clamp(20px, 3vw, 26px); color: var(--ink); }
.katch3-cards { grid-area: cards; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: start; }
@media (max-width: 860px) { .katch3-cards { grid-template-columns: 1fr; } }
.k3-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .25s, border-color .25s, box-shadow .25s; }
html[data-theme="dark"] .k3-card { background: var(--bg-card); }
.k3-card:hover { transform: translateY(-4px); border-color: var(--accent-mid, rgba(0,179,65,.3)); box-shadow: var(--shadow-2); }
.k3-cnum { font-size: 11px; color: var(--ink-3); letter-spacing: .12em; }
.k3-card h3 { margin: 12px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.k3-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.k3-clist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.k3-clist li { font-size: 14px; color: var(--ink); padding-inline-start: 16px; position: relative; }
.k3-clist li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }
.k3-cfoot { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.k3-cfoot b { font-family: var(--fm); color: var(--accent); }
.katch3-byline .k3-by-sub { display: block; font-style: normal; font-family: var(--fm); font-size: 12px; color: var(--ink-3); margin-block-start: 8px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .katch3-coin, .katch3-coin.flip, .katch3-rays { animation: none; }
  .katch3-stamp.hit { animation: none; opacity: 1; }
}

/* ==========================================================================
   THEME VARIANTS (switchable via [data-theme] on <html>)
   ========================================================================== */

/* DARK — noir profond + blanc + néon vert prominent */
html[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --bg-card: #161616;
  --bg-tint: #1c1c1c;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.62);
  --ink-3: rgba(255, 255, 255, 0.56);
  --ink-4: rgba(255, 255, 255, 0.22);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --accent: #39ff14;
  --accent-hi: #39ff14;
  --accent-soft: rgba(57, 255, 20, 0.10);
  --shadow-1: 0 1px 2px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.5);
  --shadow-phone: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(57,255,20,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(57,255,20,.03), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .nav {
  background: rgba(10,10,10,.78);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .t-card,
html[data-theme="dark"] .chart-card {
  background: var(--bg-card);
}
html[data-theme="dark"] .btn-primary {
  background: var(--accent-hi);
  color: #052915;
  box-shadow: 0 6px 18px rgba(57,255,20,.25);
}
html[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(57,255,20,.4), 0 0 0 1px rgba(57,255,20,.4);
}
html[data-theme="dark"] .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
html[data-theme="dark"] .final-cta {
  background: #1c1c1c;
  border: 1px solid rgba(57,255,20,.18);
}
html[data-theme="dark"] .stats .num,
html[data-theme="dark"] .h-display .glow {
  background: linear-gradient(180deg, #fff 0%, #fff 60%, #c8c8c8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .marquee .city { color: rgba(255,255,255,.32); }
html[data-theme="dark"] .marquee .city::after { color: rgba(255,255,255,.15); }
/* mockup phones stay light inside dark theme — that's the device chrome */
html[data-theme="dark"] .float-card { background: #1c1c1c; color: #fff; }
html[data-theme="dark"] .ribbon { background: rgba(57,255,20,.12); color: #39ff14; }

/* MONO — pure B&W, no green */
html[data-theme="mono"] {
  --accent: #0a0a0a;
  --accent-hi: #0a0a0a;
  --accent-soft: rgba(10, 10, 10, 0.06);
}
html[data-theme="mono"] .brand-dot,
html[data-theme="mono"] .chip .dot,
html[data-theme="mono"] .ribbon .accent-dot {
  background: #0a0a0a !important;
  box-shadow: 0 0 0 4px rgba(10,10,10,.08) !important;
}
html[data-theme="mono"] .mk-avatar.live::after,
html[data-theme="mono"] .mk-pin .dot.live {
  background: #0a0a0a !important;
  box-shadow: none !important;
}
html[data-theme="mono"] .chip.live { background: var(--bg-tint); color: var(--ink); }
html[data-theme="mono"] .final-cta .btn-primary:hover { background: #fff; color: #0a0a0a; }
html[data-theme="mono"] .mk-mapcard .cta { background: #0a0a0a; color: #fff; }
html[data-theme="mono"] .h-display .strike { color: var(--ink); text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 4px; }

/* ELECTRIC — light bg + much more glow / neon halos */
html[data-theme="electric"] {
  --accent: #00b341;
  --accent-hi: #39ff14;
  --accent-soft: rgba(57, 255, 20, 0.12);
  --shadow-2: 0 4px 16px rgba(57,255,20,.06), 0 16px 40px rgba(10,10,10,.06);
}
html[data-theme="electric"] body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(57,255,20,.10), transparent 50%),
    radial-gradient(900px 600px at -10% 50%, rgba(57,255,20,.06), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(57,255,20,.05), transparent 60%),
    var(--bg);
}
html[data-theme="electric"] .feat-card:hover,
html[data-theme="electric"] .t-card:hover {
  box-shadow: 0 12px 30px rgba(57,255,20,.12), 0 0 0 1px rgba(57,255,20,.18);
  border-color: rgba(57,255,20,.3);
}
html[data-theme="electric"] .btn-primary {
  background: #0a0a0a;
  box-shadow: 0 8px 24px rgba(57,255,20,.18), 0 0 0 0 rgba(57,255,20,.4);
  animation: electric-glow 3s ease-in-out infinite;
}
@keyframes electric-glow {
  0%,100% { box-shadow: 0 8px 24px rgba(57,255,20,.18), 0 0 0 0 rgba(57,255,20,.4); }
  50%     { box-shadow: 0 12px 36px rgba(57,255,20,.28), 0 0 0 8px rgba(57,255,20,.06); }
}
html[data-theme="electric"] .chip.live { box-shadow: 0 0 0 4px rgba(57,255,20,.10); }
html[data-theme="electric"] .ribbon .accent-dot { box-shadow: 0 0 0 5px rgba(57,255,20,.3); }
html[data-theme="electric"] .stats .num { color: #0a0a0a; }
html[data-theme="electric"] .stats .num::after {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-hi); margin-inline-start: 6px; vertical-align: super;
  box-shadow: 0 0 0 4px rgba(57,255,20,.2);
}

/* ==========================================================================
   CTA STYLES (switchable via [data-cta] on <body>)
   ========================================================================== */
body[data-cta="neon"] .btn-primary {
  background: var(--accent-hi);
  color: #052915;
  box-shadow: 0 6px 20px rgba(57,255,20,.28), 0 0 0 0 rgba(57,255,20,.5);
  animation: neon-pulse 2.4s ease-in-out infinite;
}
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(57,255,20,.28), 0 0 0 0 rgba(57,255,20,.5); }
  50%      { box-shadow: 0 10px 30px rgba(57,255,20,.4), 0 0 0 8px rgba(57,255,20,.10); }
}
body[data-cta="neon"] .btn-primary:hover { background: #4dff2a; }
body[data-cta="neon"] .final-cta .btn-primary { background: var(--accent-hi); color: #052915; }

body[data-cta="outline"] .btn-primary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: none;
}
body[data-cta="outline"] .btn-primary:hover {
  background: var(--ink); color: var(--bg);
}
body[data-cta="outline"] .final-cta .btn-primary {
  background: transparent; color: #fff; border-color: #fff;
}
body[data-cta="outline"] .final-cta .btn-primary:hover { background: #fff; color: #0a0a0a; }

body[data-cta="gradient"] .btn-primary {
  background: linear-gradient(105deg, #0a0a0a 0%, #0a0a0a 55%, #00b341 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,179,65,.20);
  position: relative; overflow: hidden;
}
body[data-cta="gradient"] .btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(57,255,20,.4) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s;
}
body[data-cta="gradient"] .btn-primary:hover::after { transform: translateX(100%); }

/* ==========================================================================
   HERO VARIANTS
   ========================================================================== */
.hero-editorial .hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 56px;
}
.hero-editorial .hero h1 { text-align: center; }
.hero-editorial .lead { margin-inline: auto; }
.hero-editorial .hero-ctas,
.hero-editorial .hero-proof { justify-content: center; }
.hero-editorial .hero-proof { display: inline-flex; }
.hero-editorial .phone-stage { min-height: 660px; }

.hero-split .hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero-split .hero-ctas, .hero-split .hero-proof { justify-content: center; }
.hero-split .twin-phones {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-block-start: 48px;
  position: relative;
}
.hero-split .twin-phones .phone { transform: rotate(-3deg); }
.hero-split .twin-phones .phone:nth-child(2) { transform: rotate(3deg) translateY(-20px); }
@media (max-width: 720px) {
  .hero-split .twin-phones { gap: 12px; transform: scale(.85); }
}

.hero-video {
  position: relative;
  padding-block: 100px;
  min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-video .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(20%) contrast(1.05);
}
.hero-video .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.85) 100%);
}
.hero-video .container { position: relative; z-index: 1; }
.hero-video h1, .hero-video .lead, .hero-video .ribbon { color: #fff !important; }
.hero-video .lead { color: rgba(255,255,255,.78) !important; }
.hero-video .ribbon { background: rgba(255,255,255,.12); backdrop-filter: blur(20px); }
.hero-video .glass-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 24px;
  color: #fff;
}
.hero-video .h-display .glow {
  background: linear-gradient(180deg, #fff, #ccc);
  -webkit-background-clip: text; background-clip: text;
}
.hero-video .h-display .strike { color: var(--accent-hi); }

/* ==========================================================================
   CAROUSEL HERO
   ========================================================================== */
.hero-carousel-stage {
  position: relative;
  min-height: 700px;
  display: grid; place-items: center;
}
.hero-carousel-stage .car-phone {
  position: absolute;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  opacity: 0;
  transform: scale(.92) translateY(20px);
  pointer-events: none;
}
.hero-carousel-stage .car-phone.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.hero-carousel-tabs {
  position: absolute; inset-block-end: -8px; inset-inline: 0;
  display: flex; gap: 6px; justify-content: center;
  font-family: var(--fm); font-size: 10px; letter-spacing: .12em;
}
.hero-carousel-tabs .tab {
  padding: 6px 10px; border-radius: 999px;
  background: var(--bg-tint); color: var(--ink-3);
  cursor: pointer; transition: all .25s;
}
.hero-carousel-tabs .tab.on {
  background: var(--ink); color: var(--bg);
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare {
  background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .compare { background: var(--bg-card); }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 18px 20px;
  text-align: start;
  border-block-end: 1px solid var(--line);
  font-size: 15px;
}
.compare th {
  font-family: var(--fm); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  font-weight: 500;
  border-block-end: 1px solid var(--line-2);
  background: var(--bg-soft);
}
.compare th.us { color: var(--accent); background: var(--accent-soft); }
.compare tr:last-child td { border-block-end: none; }
.compare td.cell-us { background: var(--accent-soft); font-weight: 600; color: var(--ink); }
.compare td.cell-yes::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.compare td.cell-no::before { content: "✕ "; color: var(--ink-4); font-weight: 700; }
.compare td.cell-meh::before { content: "~ "; color: var(--warn); font-weight: 700; }
.compare td.cell-no, .compare td.cell-meh { color: var(--ink-3); }
@media (max-width: 720px) {
  .compare th, .compare td { padding: 12px 12px; font-size: 13px; }
}

/* ==========================================================================
   PRICING (forever free)
   ========================================================================== */
.pricing-card {
  background: #fff;
  border-radius: 28px;
  border: 1px solid var(--line);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .pricing-card { background: var(--bg-card); }
.pricing-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 100% 0%, rgba(57,255,20,.10), transparent 70%);
  pointer-events: none;
}
.pricing-card .inner { position: relative; z-index: 1; }
.pricing-card .price-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-block: 16px 8px;
}
.pricing-card .price-num {
  font-family: var(--fh); font-weight: 800;
  letter-spacing: -.05em; line-height: 0.9;
  font-size: clamp(80px, 12vw, 160px);
}
.pricing-card .price-cur { font-family: var(--fh); font-weight: 700; font-size: 32px; color: var(--ink-2); }
.pricing-card .price-strike { font-family: var(--fm); font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.pricing-card .price-features {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 24px;
  margin-block-start: 32px; padding-block-start: 28px;
  border-block-start: 1px solid var(--line);
}
@media (max-width: 640px) { .pricing-card .price-features { grid-template-columns: 1fr; } }
.pricing-card .price-features li {
  list-style: none; display: flex; align-items: center; gap: 10px;
  font-size: 15px;
}
.pricing-card .price-features li::before {
  content: "✓"; color: var(--accent);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft);
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.forever-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-hi); color: #052915;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--fm); font-weight: 700; font-size: 12px;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(57,255,20,.25);
}

/* ==========================================================================
   ROADMAP (Now / Next / Later)
   ========================================================================== */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .roadmap { grid-template-columns: 1fr; } }
.road-col {
  background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
html[data-theme="dark"] .road-col { background: var(--bg-card); }
.road-col h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  font-weight: 500;
}
.road-col.now h3 { color: var(--accent); }
.road-col.now h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px rgba(57,255,20,.22); animation: pulse 2s ease-in-out infinite; }
.road-col.next h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.road-col.later h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }

.road-item {
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  transition: border-color .2s;
}
.road-item:hover { border-color: var(--line-2); }
.road-item .ri-title { font-weight: 600; font-size: 15px; }
.road-item .ri-desc { color: var(--ink-2); font-size: 13px; margin-block-start: 4px; line-height: 1.45; }
.road-item .ri-meta { display: flex; gap: 8px; margin-block-start: 10px; font-family: var(--fm); font-size: 10px; color: var(--ink-3); letter-spacing: .06em; }

/* ==========================================================================
   VIDEO TESTIMONIALS
   ========================================================================== */
.vt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 980px) { .vt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vt-grid { grid-template-columns: 1fr; } }
.vt-card {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover; background-position: center;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform .3s ease;
}
.vt-card:hover { transform: translateY(-6px); }
.vt-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
}
.vt-card .play {
  position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  font-size: 18px; color: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 2;
  transition: transform .25s;
}
.vt-card:hover .play { transform: translate(-50%, -50%) scale(1.1); }
.vt-card .meta {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 18px;
  color: #fff;
  z-index: 2;
}
.vt-card .meta .nm { font-weight: 700; font-size: 16px; }
.vt-card .meta .role { font-family: var(--fm); font-size: 11px; letter-spacing: .06em; opacity: .8; }
.vt-card .meta .quote { font-size: 14px; line-height: 1.4; margin-block-end: 8px; }
.vt-card .badge {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  color: #fff; font-family: var(--fm); font-size: 10px;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .04em;
  z-index: 2;
}

/* ==========================================================================
   BRAND ASSETS GALLERY
   ========================================================================== */
.brand-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 980px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .brand-tile { background: var(--bg-card); }
.brand-tile.dark { background: #0a0a0a; color: #fff; border-color: rgba(57,255,20,.15); }
.brand-tile .meta {
  font-family: var(--fm); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.brand-tile.dark .meta { color: rgba(255,255,255,.4); }
.brand-tile .download {
  font-family: var(--fm); font-size: 11px; color: var(--ink-2);
  cursor: pointer; padding: 4px 0;
}
.brand-tile.dark .download { color: rgba(255,255,255,.55); }

/* ==========================================================================
   MID-PAGE FULL-WIDTH CTA BANNER
   ========================================================================== */
.cta-banner {
  background: #0a0a0a;
  color: #fff;
  padding: 56px clamp(24px, 5vw, 80px);
  border-radius: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 80% at 100% 50%, rgba(57,255,20,.18), transparent 60%),
    radial-gradient(40% 60% at 20% 100%, rgba(57,255,20,.08), transparent 60%);
}
.cta-banner .text { position: relative; z-index: 1; }
.cta-banner h3 {
  font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.025em; line-height: 1.05;
  margin: 0 0 6px;
}
.cta-banner .lead { color: rgba(255,255,255,.62); margin: 0; font-size: 17px; }
.cta-banner .ctas { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-banner .btn-primary { background: #fff; color: #0a0a0a; }
.cta-banner .btn-primary:hover { background: var(--accent-hi); }
.cta-banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }

/* INLINE FEATURE CTA — after each split section */
.founding-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: radial-gradient(120% 140% at 100% 0%, #14210f, #0b0b0b 60%); color: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; border: 1px solid rgba(57,255,20,.22); box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.founding-banner .fb-scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px); opacity: .4; pointer-events: none; }
.founding-banner::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -8%; width: 45%; height: 100%; background: radial-gradient(circle, rgba(57,255,20,.16), transparent 62%); pointer-events: none; }
.founding-banner .fb-mark { width: 60px; height: 60px; border-radius: 16px; background: rgba(57,255,20,.14); color: var(--accent-hi); display: grid; place-items: center; position: relative; }
.founding-banner .fb-text { position: relative; }
.founding-banner .fb-text h3 { color: #fff; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 0; }
.founding-banner .fb-sub { color: rgba(255,255,255,.6); font-size: 15px; margin: 10px 0 0; max-width: 420px; }
.founding-banner .fb-side { position: relative; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fb-clock { display: flex; align-items: flex-start; gap: 6px; }
.fb-clock .fb-seg { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px; padding: 10px 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.fb-clock .fb-seg b { font-family: var(--fm); font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.founding-banner .fb-mark { animation: fb-pulse 2.4s ease-in-out infinite; }
@keyframes fb-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(57,255,20,.3); } 50% { box-shadow: 0 0 0 10px rgba(57,255,20,0); } }
@media (prefers-reduced-motion: reduce) { .founding-banner .fb-mark { animation: none; } }
.fb-clock .fb-seg i { font-family: var(--fm); font-size: 9px; letter-spacing: .08em; color: rgba(255,255,255,.5); font-style: normal; }
.fb-clock .fb-col { font-family: var(--fm); font-weight: 700; font-size: 22px; color: var(--accent-hi); align-self: center; padding-block-start: 4px; }
@media (max-width: 860px) { .founding-banner { grid-template-columns: 1fr; gap: 20px; } .founding-banner .fb-mark { display: none; } .founding-banner .fb-side { align-items: stretch; } .founding-banner .fb-side .btn { width: 100%; } }
@media (max-width: 480px) { .fb-clock .fb-seg { min-width: 0; flex: 1; } }
.inline-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 24px;
  padding: 10px 16px 10px 20px;
  background: var(--bg-tint);
  border-radius: 999px;
  font-family: var(--fh); font-weight: 600; font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: all .2s;
  text-decoration: none;
}
.inline-cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.inline-cta .arrow { font-family: var(--fm); font-size: 12px; }

/* ==========================================================================
   CALLBACK FAB — premium HASAPAR branded
   ========================================================================== */

/* ── FAB — pill flottante icon + label ── */
.cb-fab {
  position: fixed;
  inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 16px;
  z-index: 820;
  height: 48px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 0 10px;
  border-radius: 50px;
  cursor: pointer; border: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
    rgba(8,8,8,.97);
  border: 1.5px solid rgba(57,255,20,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(57,255,20,.07),
    0 0 20px rgba(57,255,20,.13),
    0 14px 38px rgba(0,0,0,.82),
    0 4px 10px rgba(0,0,0,.5);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  color: rgba(255,255,255,.9);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), border-color .18s, box-shadow .18s;
}
.cb-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(57,255,20,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 28px rgba(57,255,20,.2), 0 18px 44px rgba(0,0,0,.85);
}
.cb-fab:active { transform: scale(0.96); }
.cb-fab--open {
  border-color: rgba(57,255,20,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(57,255,20,.18), 0 10px 28px rgba(0,0,0,.8);
}

/* Icon circle inside pill */
.cb-fab-icon-wrap {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(57,255,20,.1);
  border: 1px solid rgba(57,255,20,.28);
  display: flex; align-items: center; justify-content: center;
  color: #39ff14;
  box-shadow: 0 0 12px rgba(57,255,20,.15);
}

/* Label */
.cb-fab-label {
  font-size: 13px; font-weight: 800; letter-spacing: -.25px;
  color: rgba(255,255,255,.9); white-space: nowrap;
  font-family: var(--fh);
}
.cb-fab-tip { display: none; }

/* ── Dim overlay ── */
.cb-dim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 821;
  animation: cbIn .2s ease forwards;
}
@keyframes cbIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Popup ── */
.cb-popup {
  position: fixed;
  inset-block-end: calc(152px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  max-width: 380px;
  background: linear-gradient(170deg, rgba(18,18,18,.98) 0%, rgba(12,12,12,.98) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  padding: 0;
  z-index: 822; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(255,255,255,.035),
    0 56px 140px rgba(0,0,0,.98),
    0 0 60px rgba(0,0,0,.4);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  animation: cbUp .24s cubic-bezier(.22,.68,0,1.18) forwards;
}
@keyframes cbUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* neon accent top line */
.cb-popup::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,.5) 40%, rgba(57,255,20,.5) 60%, transparent);
  z-index: 1;
}
/* top ambient glow */
.cb-popup::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 70px;
  background: radial-gradient(ellipse 80% 100% at 50% -10%, rgba(57,255,20,.04) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}

/* ── Close button ── */
.cb-x {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.cb-x:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }

/* ── Popup inner ── */
.cb-popup-inner-pad { padding: 22px 20px 20px; position: relative; z-index: 1; }

/* ── Brand header ── */
.cb-popup-brand {
  display: flex; align-items: center; gap: 3px;
  margin-bottom: 14px;
  direction: ltr; justify-content: flex-start;
}
.cb-popup-logo {
  font-size: 11px; font-weight: 900; letter-spacing: .5px;
  color: rgba(255,255,255,.55);
  font-family: var(--fh);
  display: flex; align-items: center; gap: 2px;
}
.cb-popup-scissors { color: rgba(57,255,20,.7); flex-shrink: 0; }
.cb-popup-brand-dot {
  font-size: 11px; font-weight: 900; color: #39ff14;
  text-shadow: 0 0 10px rgba(57,255,20,.5);
  font-family: var(--fh);
}

/* ── Title ── */
.cb-popup-title {
  font-size: 22px; font-weight: 900; letter-spacing: -.6px;
  color: #fff; line-height: 1.1; margin-bottom: 6px;
  font-family: var(--fh);
}
.cb-popup-title em {
  font-style: normal; color: #39ff14;
  text-shadow: 0 0 18px rgba(57,255,20,.45);
}
.cb-popup-desc {
  font-size: 12px; color: rgba(255,255,255,.35);
  font-family: var(--fh); letter-spacing: -.1px;
  margin-bottom: 16px;
}

/* ── Input ── */
.cb-iw {
  display: flex; align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 10px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cb-iw:focus-within {
  border-color: rgba(57,255,20,.42);
  background: rgba(57,255,20,.03);
  box-shadow: 0 0 0 3px rgba(57,255,20,.09);
}
.cb-iw--solo .cb-input { padding: 0 16px; text-align: center; }
.cb-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 0 12px 0 4px;
  font-size: 17px; font-weight: 700; font-family: var(--fm);
  color: #fff; direction: ltr; text-align: left; letter-spacing: .3px;
  height: 52px; -webkit-text-size-adjust: none;
}
.cb-input::placeholder { color: rgba(255,255,255,.18); font-weight: 400; letter-spacing: 0; }

/* ── CTA ── */
.cb-cta {
  width: 100%; border: none; cursor: pointer;
  border-radius: 13px; padding: 14px 0;
  font-size: 15px; font-weight: 900; font-family: var(--fh);
  color: #021004; letter-spacing: -.3px;
  background: linear-gradient(180deg, #6dff4c 0%, #39ff14 58%);
  box-shadow:
    0 8px 28px rgba(57,255,20,.42),
    0 2px 6px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.08);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .12s;
}
.cb-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(57,255,20,.5), inset 0 1px 0 rgba(255,255,255,.55); }
.cb-cta:active { transform: scale(0.97); }
.cb-cta:disabled { opacity: .6; cursor: default; transform: none; }

/* loading dots */
.cb-cta-dots { display: inline-flex; align-items: center; gap: 5px; }
.cb-cta-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(2,16,4,.6);
  animation: cbDot 1.2s ease-in-out infinite;
}
.cb-cta-dots span:nth-child(2) { animation-delay: .2s; }
.cb-cta-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cbDot { 0%,80%,100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ── Security line ── */
.cb-secure {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 10px;
  font-size: 10px; color: rgba(255,255,255,.22);
  font-family: var(--fh); letter-spacing: -.1px;
}

/* ── SUCCESS state ── */
.cb-success-wrap {
  position: fixed;
  inset-block-end: calc(152px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 12px; inset-inline-end: 12px;
  max-width: 380px;
  z-index: 822;
  animation: cbUp .28s cubic-bezier(.22,.68,0,1.18) forwards;
}
.cb-success {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(14,14,14,.98) 0%, rgba(10,10,10,.98) 100%);
  border: 1px solid rgba(57,255,20,.2);
  border-radius: 22px;
  padding: 16px 20px;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.07),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 32px 80px rgba(0,0,0,.9),
    0 0 50px rgba(57,255,20,.07);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  overflow: hidden;
  position: relative;
}
.cb-success::before {
  content: '';
  position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,.5) 40%, rgba(57,255,20,.5) 60%, transparent);
}
.cb-success-check {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: rgba(57,255,20,.09);
  border: 1.5px solid rgba(57,255,20,.38);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(57,255,20,.04), 0 0 20px rgba(57,255,20,.18);
}
.cb-success-body { display: flex; flex-direction: column; gap: 2px; }
.cb-success-brand {
  font-size: 10px; font-weight: 900; letter-spacing: .5px;
  color: rgba(255,255,255,.45); font-family: var(--fh);
  display: flex; align-items: center; gap: 2px;
}
.cb-success-scissors { color: rgba(57,255,20,.65); }
.cb-success-msg {
  font-size: 14px; font-weight: 800; letter-spacing: -.25px;
  color: #fff; font-family: var(--fh);
}
.cb-success-phone {
  font-size: 11px; color: rgba(255,255,255,.4);
  font-family: var(--fm); letter-spacing: .2px;
}

@media (max-width: 720px) {
  .cb-fab { inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-fab, .cb-dim, .cb-popup, .cb-success-wrap, .cb-cta-dots span {
    animation: none !important; transition: none !important;
  }
}

/* ==========================================================================
   DESKTOP STICKY CTA STRIP
   ========================================================================== */
.sticky-cta-desktop {
  position: sticky;
  inset-block-end: 16px;
  margin-block: 0 16px;
  z-index: 40;
  display: none;
  justify-content: center;
}
.sticky-cta-desktop.show { display: flex; }
@media (max-width: 720px) { .sticky-cta-desktop { display: none !important; } }
.sticky-cta-desktop .pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  font-size: 14px;
}
.sticky-cta-desktop .pill .left { font-weight: 500; }
.sticky-cta-desktop .pill .left b { font-weight: 700; }
.sticky-cta-desktop .pill .accent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(57,255,20,.18); animation: pulse 2s ease-in-out infinite; }
.sticky-cta-desktop .btn { height: 40px; padding-inline: 16px; background: #fff; color: #0a0a0a; }
.sticky-cta-desktop .btn:hover { background: var(--accent-hi); }

/* ==========================================================================
   LIVE COUNTER — ticker styling
   ========================================================================== */
.live-counter {
  font-family: var(--fh);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.live-counter .digit {
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
}

/* ==========================================================================
   LOOPING NOTIFICATIONS (in hero/elsewhere)
   ========================================================================== */
.notif-loop {
  position: absolute;
  inset-inline-end: -10%;
  inset-block-start: 50%;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  z-index: 4;
}
@media (max-width: 720px) { .notif-loop { display: none; } }
.notif-pop {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10,10,10,.12);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  min-width: 220px;
  animation: notif-slide 9s ease-in-out infinite;
  opacity: 0;
}
html[data-theme="dark"] .notif-pop { background: #1c1c1c; color: #fff; }
.notif-pop.d1 { animation-delay: 0s; }
.notif-pop.d2 { animation-delay: 3s; }
.notif-pop.d3 { animation-delay: 6s; }
@keyframes notif-slide {
  0%   { transform: translateX(-20px); opacity: 0; }
  6%   { transform: translateX(0); opacity: 1; }
  30%  { transform: translateX(0); opacity: 1; }
  36%  { transform: translateX(-20px); opacity: 0; }
  100% { opacity: 0; }
}

/* parallax helper */
.parallax-up { will-change: transform; }

/* ==========================================================================
   TWEAKS PANEL OVERRIDES (theme-aware)
   ========================================================================== */
html[data-theme="dark"] .twk-panel {
  background: rgba(20,20,20,.82) !important;
  color: #fff !important;
}

/* Brand name color helper used in many places */
.brand-name { font-family: var(--fm); font-weight: 900; letter-spacing: .04em; }

/* ==========================================================================
   WOW ANIMATIONS LAYER
   ========================================================================== */

/* ---- 1. HERO PHONE BOOT-UP CASCADE ---- */
/* Screen powers on: black flash → brighten */
.hero .phone.boot .phone-screen {
  animation: screen-power 0.9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes screen-power {
  0%   { filter: brightness(0) saturate(0); }
  22%  { filter: brightness(0) saturate(0); }
  40%  { filter: brightness(2.2) saturate(1.4); }
  100% { filter: brightness(1) saturate(1); }
}
/* Inner content cascades in after the screen lights up */
.hero .phone.boot .phone-body > *,
.hero .phone.boot .mk-feed > *,
.hero .phone.boot .mk-header,
.hero .phone.boot .mk-post {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  animation: boot-rise 0.6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes boot-rise {
  to { opacity: 1; transform: none; }
}
.hero .phone.boot .phone-body > *:nth-child(1),
.hero .phone.boot .mk-feed > *:nth-child(1) { animation-delay: .42s; }
.hero .phone.boot .phone-body > *:nth-child(2),
.hero .phone.boot .mk-feed > *:nth-child(2) { animation-delay: .50s; }
.hero .phone.boot .phone-body > *:nth-child(3),
.hero .phone.boot .mk-feed > *:nth-child(3) { animation-delay: .58s; }
.hero .phone.boot .phone-body > *:nth-child(4),
.hero .phone.boot .mk-feed > *:nth-child(4) { animation-delay: .66s; }
.hero .phone.boot .phone-body > *:nth-child(n+5),
.hero .phone.boot .mk-feed > *:nth-child(n+5) { animation-delay: .74s; }
/* Float cards pop after the screen is alive */
.hero .float-card {
  opacity: 0;
  animation: float-pop 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.hero .float-card { animation-delay: 1.0s; }
.hero .float-card.delay-1 { animation-delay: 1.2s; }
.hero .float-card.delay-2 { animation-delay: 1.4s; }
@keyframes float-pop {
  0%   { opacity: 0; transform: scale(.7) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* After boot, float cards return to their gentle floaty loop */
.hero .float-card.floaty-on {
  animation: floaty 5s ease-in-out infinite;
  opacity: 1;
}
.hero .float-card.floaty-on.delay-1 { animation-delay: 1s; }
.hero .float-card.floaty-on.delay-2 { animation-delay: 2s; }

/* ---- 2. MAP RADAR SWEEP + SEQUENTIAL PINS ---- */
.mk-map .radar-sweep {
  position: absolute;
  inset-block-start: 54%;
  inset-inline-start: 32%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.mk-map.radar-on .radar-sweep {
  opacity: 1;
}
.mk-map.radar-on .radar-sweep::before {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  width: 360px; height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(57,255,20,.35), transparent 30%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0, transparent 6px, #000 7px);
  mask: radial-gradient(circle, transparent 0, transparent 6px, #000 7px);
  animation: radar-spin 2.4s linear 3;
}
.mk-map.radar-on .radar-sweep::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 12px rgba(57,255,20,.8), 0 0 0 4px rgba(57,255,20,.2);
}
@keyframes radar-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Pins light up one by one when the section is revealed */
.mk-map.radar-on .mk-pin {
  animation: pin-drop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.mk-map.radar-on .mk-pin:nth-child(5)  { animation-delay: .30s; } /* pins are after roads */
.mk-map.radar-on .mk-pin:nth-child(6)  { animation-delay: .55s; }
.mk-map.radar-on .mk-pin:nth-child(7)  { animation-delay: .80s; }
.mk-map.radar-on .mk-pin:nth-child(8)  { animation-delay: 1.05s; }
.mk-map.radar-on .mk-pin:nth-child(9)  { animation-delay: 1.30s; }
@keyframes pin-drop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) translateY(-12px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}

/* ---- 3. COUNT-UP (numbers animate + subtle shimmer while counting) ---- */
.counting { color: var(--ink); }

/* ---- 4. MAGNETIC + RIPPLE CTAs ---- */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(57,255,20,.5);
  pointer-events: none;
  animation: ripple-out 0.6s ease-out forwards;
  mix-blend-mode: screen;
}
.btn-primary .ripple { background: rgba(255,255,255,.45); }
@keyframes ripple-out {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---- 5. SCROLL-PROGRESS BAR (top neon line) ---- */
.scroll-progress {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  height: 3px;
  z-index: 100;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(57,255,20,.5);
  pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }

/* ---- 6. HERO CURSOR SPOTLIGHT ---- */
.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(57,255,20,.10), transparent 70%);
}
.hero:hover .hero-spotlight { opacity: 1; }
@media (pointer: coarse) { .hero-spotlight { display: none; } }

/* ---- 7. TILT on hover for feature/testimonial cards ---- */
.feat-card, .t-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s; transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero .phone.boot .phone-screen,
  .hero .phone.boot .phone-body > *,
  .hero .phone.boot .mk-feed > *,
  .hero .float-card,
  .mk-map.radar-on .radar-sweep::before,
  .mk-map.radar-on .mk-pin { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
}



/* ============================================================
   Dark mockups — match the REAL HASAPAR app (dark neon), not a light SaaS.
   Scope token overrides to .phone-screen so var-based mock colors flip;
   override the hardcoded-white cards. WhatsApp mock stays authentically light.
   ============================================================ */
.phone-screen{
  --ink:#f2f4f2; --ink-2:rgba(255,255,255,.60); --ink-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --bg-tint:#181818; --accent:#39ff14; --accent-soft:rgba(57,255,20,.12);
  background:#0b0b0b !important; color:#f2f4f2;
}
.phone-status{ color:#f2f4f2 !important; }
.phone-screen .mk-post,
.phone-screen .mk-appt,
.phone-screen .mk-mapcard{ background:#141414 !important; color:#f2f4f2; border-color:rgba(255,255,255,.08) !important; }
.phone-screen .mk-appt.now{ background:rgba(57,255,20,.10) !important; border-color:rgba(57,255,20,.35) !important; }
.phone-screen .mk-post .btn-sm{ background:#1f1f1f !important; color:#f2f4f2 !important; border-color:rgba(255,255,255,.14) !important; }
.phone-screen .book-pill{ background:rgba(10,10,10,.72) !important; color:#f2f4f2 !important; }
.phone-screen .mk-caption .who{ color:#f2f4f2 !important; }
/* WhatsApp mock: leave WhatsApp-authentic (light) — belt: reset its bg */
.phone-screen .mk-wa{ background:#0b141a !important; }

/* ============================================================
   Premium phone — green bloom halo, frame edge, subtle float + life
   ============================================================ */
.phone{ position:relative; }
.phone::after{
  content:""; position:absolute; inset:-14% -18%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%, rgba(57,255,20,.20), rgba(57,255,20,.05) 55%, transparent 74%);
  filter:blur(30px);
}
.phone{
  border-radius:44px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.10), 0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(57,255,20,.25);
  animation:phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.phone-notch{
  position:absolute; inset-block-start:9px; inset-inline-start:50%; transform:translateX(-50%);
  width:96px; height:22px; background:#000; border-radius:999px; z-index:5; margin:0; padding:0;
}
/* life — the current appointment breathes, LIVE dots pulse */
.phone-screen .mk-appt.now{ animation:apptNow 2.6s ease-in-out infinite; }
@keyframes apptNow{ 0%,100%{ box-shadow:0 0 0 0 rgba(57,255,20,0); } 50%{ box-shadow:0 0 22px -4px rgba(57,255,20,.4); } }
.phone-screen .dot.live, .phone-screen .chip.live .dot{ animation:liveDot 1.8s ease-in-out infinite; }
@keyframes liveDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(57,255,20,.5); } 50%{ box-shadow:0 0 0 4px rgba(57,255,20,0); } }
@media (prefers-reduced-motion:reduce){
  .phone{ animation:none; } .phone-screen .mk-appt.now, .phone-screen .dot.live, .phone-screen .chip.live .dot{ animation:none; }
}

/* ============================================================
   Green RARE (brand rule) — loud green stays on CTA / key numbers / LIVE dots
   only. Tone the pervasive ambient green wash: per-section aurora + hero glow.
   ============================================================ */
.fx-aurora, .fx-aurora.alt{
  background:radial-gradient(circle, rgba(57,255,20,.05), transparent 62%) !important;
  filter:blur(34px) !important; opacity:.5 !important;
}
.hero-cine-bg .hcb-glow{
  background:radial-gradient(60% 70% at 72% 42%, rgba(57,255,20,.16), transparent 60%), radial-gradient(40% 50% at 90% 10%, rgba(57,255,20,.08), transparent 60%) !important;
}
.faq-glow, .statement .st-glow{ opacity:.55; }

/* ============================================================
   SIZE + AIR — premium breathing room (the #1 premium lever).
   ============================================================ */
.section-pad{ padding-block:88px !important; }
@media (max-width:720px){ .section-pad{ padding-block:52px !important; } }
.section-head{ margin-block-end:44px; }
.section-head .lead, .lead{ max-width:600px; margin-inline:auto; }
.split .lead{ margin-inline:0; }

/* Declutter — hide the dev "Tweaks / הגדרות עיצוב" design panel (dev tool, not for barbers). */
.twk-panel, .twk-panel *{ display:none !important; }

/* Hide the sticky nav during the cinematic intro (cleaner cinematic moment) */
.nav { transition: opacity .35s ease; }
body.cine-pinned .nav { opacity: 0; pointer-events: none; }

/* ============================================================
   Cinematic dashboard — ALIVE (only inside the pinned cinematic Phone).
   Revenue ticks up, a booking pings in, the fresh row slides in.
   All motion reduced-motion gated (the JS loop also bails on reduce).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .mk-crm .kv-live{ transition:color .3s ease, text-shadow .3s ease; }
  .mk-crm .kpi-hot .kv-live{ color:var(--accent); text-shadow:0 0 16px rgba(57,255,20,.5); }
  .mk-crm .kpi-hot{ box-shadow:inset 0 0 0 1px rgba(57,255,20,.35), 0 0 22px rgba(57,255,20,.12); transition:box-shadow .35s ease; }

  .mk-appt.fresh{ animation:mkFreshIn .55s cubic-bezier(.2,.9,.25,1) both; }
  @keyframes mkFreshIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

  .mk-ping{ animation:mkPingIn .4s cubic-bezier(.2,.9,.25,1) both; }
  @keyframes mkPingIn{ from{ opacity:0; transform:translateY(-8px) scale(.94); } to{ opacity:1; transform:none; } }
}
.mk-crm .mk-ping{
  position:absolute; inset-block-start:-6px; inset-inline-start:50%; transform:translateX(-50%);
  z-index:6; display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(20,32,22,.96), rgba(10,16,11,.96));
  box-shadow:0 0 0 1px rgba(57,255,20,.28), 0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  white-space:nowrap;
}
.mk-crm .mk-ping-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(57,255,20,.8); flex:none; }
.mk-crm .mk-ping-t{ font-family:var(--fh); font-size:11px; font-weight:700; color:#eaffea; }
.mk-crm .mk-ping-amt{ font-family:var(--fm); font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.02em; }

/* Rising +₪ delta on the income KPI when a booking pings in (cinematic-alive). */
.mk-crm .mk-rise{
  position:absolute; inset-block-start:4px; inset-inline-end:8px;
  font-family:var(--fm); font-size:12px; font-weight:700; color:var(--accent);
  text-shadow:0 0 10px rgba(57,255,20,.6); pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .mk-crm .mk-rise{ animation:mkRise 1.55s ease-out forwards; }
  @keyframes mkRise{ 0%{opacity:0;transform:translateY(6px);} 16%{opacity:1;} 100%{opacity:0;transform:translateY(-22px);} }
}

/* ============================================================
   PREMIUM COHERENCE — material (grain + vignette) + unified card
   depth + visible interaction states. Appended → wins by cascade.
   Sits UNDER the fixed CTAs (z 60/59) so it textures content only.
   ============================================================ */
body::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="ng"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23ng)"/></svg>');
}
body::before{
  content:''; position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* Unified card depth — same soft shadow recipe on every card (coherence). */
.card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 20px 46px rgba(0,0,0,.46) !important;
}

/* Visible interaction states everywhere (UX: hover / tap / focus). */
.btn{ transition:transform .18s cubic-bezier(.25,1,.5,1), box-shadow .3s ease, filter .3s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
a:focus-visible, .btn:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* Cran 2 — "עכשיו" appointment progress bar (haircut in progress) in the alive dash. */
.mk-crm .mk-appt.now{ position:relative; }
.mk-crm .mk-now-prog{ position:absolute; inset-inline:12px; inset-block-end:5px; height:2px; border-radius:2px; background:rgba(57,255,20,.14); overflow:hidden; }
.mk-crm .mk-now-prog span{ position:absolute; inset-block:0; inset-inline-start:0; width:62%; border-radius:2px; background:linear-gradient(90deg, rgba(57,255,20,.4), var(--accent)); box-shadow:0 0 8px rgba(57,255,20,.6); }
@media (prefers-reduced-motion: no-preference){
  .mk-crm .mk-now-prog span{ animation:mkNowProg 12s ease-in-out infinite; }
  @keyframes mkNowProg{ 0%{ width:28%; } 90%{ width:92%; } 100%{ width:28%; } }
}

/* ============================================================
   PAIN SECTION — premium mobile-first redesign (2026-07-24).
   Card story: red kicker → pain title → GIANT glowing stat → short
   emo → green relief strip. Danger bar pulses. Appended → wins.
   ============================================================ */
.pains-grid .pain-b-cine { display:flex; flex-direction:column; padding:28px 24px 0; }
.pains-grid .pain-b-cine .pain-b-cap { display:block; margin:2px 44px 0 0; color:rgba(255,91,82,.9); font-size:11px; letter-spacing:.14em; }
.pains-grid .pain-b-cine h3 { margin:10px 0 0; font-size:clamp(21px,5.4vw,27px); line-height:1.14; color:#fff; letter-spacing:-.02em; font-weight:800; }
.pains-grid .pain-b-cine .pain-b-statrow { display:flex; align-items:baseline; gap:8px; margin-block-start:18px; }
.pains-grid .pain-b-cine .pain-b-stat { font-size:clamp(50px,15vw,64px); line-height:.86; letter-spacing:-.05em; text-shadow:0 0 30px rgba(255,91,82,.4); }
.pains-grid .pain-b-cine .pain-b-stat.warn { text-shadow:0 0 30px rgba(255,159,10,.4); }
.pains-grid .pain-b-cine .pain-b-permo { font-family:var(--fm); font-size:14px; color:rgba(255,255,255,.42); }
.pains-grid .pain-b-cine .pain-b-emo { margin-block-start:14px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.62); }
.pains-grid .pain-b-cine .pain-b-fix { margin:18px -24px 0; padding:15px 24px; background:linear-gradient(180deg, rgba(57,255,20,.12), rgba(57,255,20,.05)); border-block-start:1px solid rgba(57,255,20,.25); color:#eafff0; font-size:14px; font-weight:600; line-height:1.45; opacity:1; display:flex; gap:9px; align-items:center; }
.pains-grid .pain-b-cine .pain-b-fix .pb-g { color:#39ff14; font-size:17px; font-weight:800; filter:drop-shadow(0 0 6px rgba(57,255,20,.75)); flex-shrink:0; }
.pains-grid .pain-b-cine::after { opacity:1; height:3px; background:linear-gradient(90deg, transparent, #ff5b52, transparent); }
@media (prefers-reduced-motion: no-preference){
  .pains-grid .pain-b-cine::after { animation:painPulse 3.2s ease-in-out infinite; }
  @keyframes painPulse { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
}
@media (max-width:768px){
  .pains-grid { gap:16px; }
  .pains-grid .pain-b-cine { padding:26px 22px 0; }
  .pains-grid .pain-b-cine .pain-b-stat { font-size:clamp(56px,17vw,74px) !important; }
  .pains-grid .pain-b-cine h3 { font-size:clamp(22px,6vw,27px); }
  .pains-grid .pain-b-cine .pain-b-rank { font-size:54px; inset-block-start:12px; inset-inline-end:18px; }
  .pains-grid .pain-b-cine .pain-b-fix { margin:18px -22px 0; padding:15px 22px; }
  #pains { padding-block-end:96px; }
}


/* ============================================================
   PAIN MOCKUPS v2 — premium WOW / dopamine / FOMO scenes (2026-07-24).
   One bespoke animated scene per pain. Motion gated; static reads.
   ============================================================ */
.pviz { position:relative; margin-block-start:16px; height:126px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2)); border:1px solid rgba(255,255,255,.07); }
@media (max-width:768px){ .pviz { height:120px; } }

/* 01 — realistic phone flooded with demands + typing + buzz + red overwhelm */
.pviz-phone { display:flex; align-items:center; justify-content:center; }
.pviz-phone::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:4; background:radial-gradient(78% 60% at 50% 108%, rgba(255,59,48,.22), transparent 68%); }
.pviz-ph { position:relative; width:158px; height:112px; border-radius:16px; background:linear-gradient(180deg,#0e1710,#080d09); border:2px solid rgba(255,255,255,.15); overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04); }
.pviz-ph-notch { position:absolute; inset-block-start:5px; inset-inline-start:50%; transform:translateX(-50%); width:36px; height:5px; border-radius:3px; background:rgba(0,0,0,.65); z-index:3; }
.pviz-ph-hdr { position:relative; z-index:2; display:flex; align-items:center; gap:7px; padding:8px 9px 7px; background:rgba(255,255,255,.045); border-block-end:1px solid rgba(255,255,255,.06); }
.pviz-ph-av { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#2ee6a0,#0a7a52); flex:none; }
.pviz-ph-who { flex:1; display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.pviz-ph-who b { font-size:9.5px; color:#fff; }
.pviz-ph-typ { font-size:7.5px; color:#2ee6a0; font-family:var(--fm); }
.pviz-ph-badge { flex:none; font-size:9px; font-weight:800; color:#fff; background:#ff3b30; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 0 10px rgba(255,59,48,.8); }
.pviz-ph-body { position:relative; padding:6px 8px; display:flex; flex-direction:column; gap:4px; }
.pviz-b { position:relative; align-self:flex-start; max-width:84%; font-size:8px; color:#eaf5ec; background:rgba(255,255,255,.09); padding:4px 22px 4px 7px; border-radius:8px 8px 8px 2px; opacity:1; }
.pviz-b i { position:absolute; inset-block-end:2px; inset-inline-end:5px; font-size:6px; color:rgba(255,255,255,.32); font-style:normal; font-family:var(--fm); }
.pviz-typing { align-self:flex-start; display:inline-flex; gap:3px; padding:5px 8px; background:rgba(255,255,255,.06); border-radius:8px; }
.pviz-typing i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference){
  .pviz-ph { animation:pvizBuzz 3s ease-in-out infinite; }
  @keyframes pvizBuzz { 0%,80%,100%{transform:translate(0,0) rotate(0);} 82%{transform:translate(-2px,1px) rotate(-.8deg);} 84%{transform:translate(2px,-1px) rotate(.8deg);} 86%{transform:translate(-2px,0);} 88%{transform:translate(1px,0);} }
  .pviz-b { opacity:0; animation:pvizB 3.2s ease-in-out infinite; }
  .pviz-ph-body .pviz-b:nth-child(2){animation-delay:.5s;}
  .pviz-ph-body .pviz-b:nth-child(3){animation-delay:1s;}
  .pviz-ph-body .pviz-b:nth-child(4){animation-delay:1.5s;}
  @keyframes pvizB { 0%{opacity:0; transform:translateY(9px) scale(.9);} 6%{opacity:1; transform:none;} 82%{opacity:1;} 92%{opacity:0;} 100%{opacity:0;} }
  .pviz-typing { animation:pvizTypShow 3.2s ease-in-out infinite; }
  @keyframes pvizTypShow { 0%,58%{opacity:0;} 64%,90%{opacity:1;} 100%{opacity:0;} }
  .pviz-typing i { animation:pvizTyp 1s ease-in-out infinite; }
  .pviz-typing i:nth-child(2){animation-delay:.15s;}
  .pviz-typing i:nth-child(3){animation-delay:.3s;}
  @keyframes pvizTyp { 0%,100%{opacity:.3; transform:translateY(0);} 50%{opacity:1; transform:translateY(-2px);} }
  .pviz-ph-badge { animation:pvizBadge 3.2s ease-in-out infinite; }
  @keyframes pvizBadge { 0%,100%{transform:scale(1);} 8%,52%{transform:scale(1.22); box-shadow:0 0 16px rgba(255,59,48,1);} }
}

/* 02 — confirmed slot CANCELS: stamp slams + shockwave + money burns off */
.pviz-noshow { display:flex; align-items:center; justify-content:center; padding:0 14px; }
.pviz-shock { position:absolute; inset-block-start:50%; inset-inline-start:50%; z-index:0; width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,59,48,.6); transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; }
.pviz-slot { position:relative; z-index:1; width:100%; max-width:252px; display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; background:rgba(255,59,48,.09); border:1px solid rgba(255,59,48,.34); }
.pviz-av { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#4a4a4a,#222); flex:none; }
.pviz-slot-txt { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pviz-slot-txt b { font-size:12px; color:rgba(255,255,255,.5); }
.pviz-slot-txt span { font-size:9px; color:rgba(255,255,255,.45); font-family:var(--fm); }
.pviz-price { font-family:var(--fm); font-size:12px; font-weight:700; color:var(--warn); flex:none; }
.pviz-stamp { position:absolute; inset-inline-end:12px; inset-block-start:50%; z-index:2; font-size:12px; font-weight:800; color:#ff3b30; border:2.5px solid #ff3b30; padding:2px 8px; border-radius:6px; transform:translateY(-50%) rotate(-10deg); background:rgba(8,8,8,.7); }
.pviz-ember { position:absolute; inset-block-start:48%; inset-inline-start:58%; z-index:3; font-family:var(--fm); font-size:12px; font-weight:700; color:var(--warn); opacity:0; pointer-events:none; text-shadow:0 0 8px rgba(255,159,10,.7); }
@media (prefers-reduced-motion: no-preference){
  .pviz-slot { animation:pvizSlot 4.8s ease-in-out infinite; }
  @keyframes pvizSlot { 0%,30%{background:rgba(57,255,20,.07); border-color:rgba(57,255,20,.3);} 40%,100%{background:rgba(255,59,48,.09); border-color:rgba(255,59,48,.34);} }
  .pviz-slot-txt b { animation:pvizName 4.8s ease-in-out infinite; }
  @keyframes pvizName { 0%,36%{color:#fff;} 46%,100%{color:rgba(255,255,255,.5);} }
  .pviz-stamp { animation:pvizStamp 4.8s ease-in-out infinite; }
  @keyframes pvizStamp { 0%,32%{opacity:0; transform:translateY(-50%) rotate(-10deg) scale(2);} 40%{opacity:1; transform:translateY(-50%) rotate(-10deg) scale(1);} 94%{opacity:1;} 100%{opacity:0;} }
  .pviz-shock { animation:pvizShock 4.8s ease-out infinite; }
  @keyframes pvizShock { 0%,36%{opacity:0; transform:translate(-50%,-50%) scale(0);} 40%{opacity:.85;} 52%{opacity:0; transform:translate(-50%,-50%) scale(7);} 100%{opacity:0;} }
  .pviz-ember { animation:pvizEmber 4.8s ease-in infinite; }
  .pviz-ember.e2{ inset-inline-start:50%; animation-delay:.16s; }
  .pviz-ember.e3{ inset-inline-start:66%; animation-delay:.32s; }
  @keyframes pvizEmber { 0%,42%{opacity:0; transform:translateY(0) scale(1);} 50%{opacity:1;} 82%{opacity:0; transform:translateY(-44px) scale(.55) rotate(24deg);} 100%{opacity:0;} }
}

/* 03 — coins leak from your pocket into the app fee (-2000/yr pulses) */
.pviz-drain { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 14px; }
.pviz-pocket, .pviz-fee { flex:none; padding:9px 10px; border-radius:11px; text-align:center; }
.pviz-pocket { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.pviz-pocket-l { font-size:9px; font-family:var(--fm); color:rgba(255,255,255,.6); }
.pviz-leak { position:relative; flex:1; height:28px; align-self:center; }
.pviz-leak i { position:absolute; inset-block-start:5px; inset-inline-start:0; font-size:14px; color:var(--warn); font-style:normal; font-family:var(--fm); font-weight:700; opacity:0; text-shadow:0 0 8px rgba(255,159,10,.7); }
.pviz-fee { display:flex; flex-direction:column; gap:3px; align-items:center; background:rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.34); }
.pviz-fee-l { font-size:8px; font-family:var(--fm); color:rgba(255,143,136,.95); }
.pviz-fee-amt { font-size:13px; font-weight:800; color:#ff5b52; font-family:var(--fm); }
.pviz-meter { display:block; width:56px; height:5px; border-radius:3px; background:rgba(255,59,48,.16); overflow:hidden; }
.pviz-meter b { display:block; height:100%; width:66%; background:linear-gradient(90deg,#ff9f0a,#ff5b52); border-radius:3px; }
@media (prefers-reduced-motion: no-preference){
  .pviz-leak i { animation:pvizFlow 2.2s linear infinite; }
  .pviz-leak i:nth-child(2){animation-delay:.55s;}
  .pviz-leak i:nth-child(3){animation-delay:1.1s;}
  .pviz-leak i:nth-child(4){animation-delay:1.65s;}
  @keyframes pvizFlow { 0%{opacity:0; inset-inline-start:2%; transform:translateY(0) rotate(0);} 12%{opacity:1;} 88%{opacity:1;} 100%{opacity:0; inset-inline-start:94%; transform:translateY(9px) rotate(40deg);} }
  .pviz-fee-amt { animation:pvizFeePulse 1.8s ease-in-out infinite; }
  @keyframes pvizFeePulse { 0%,100%{opacity:.82; transform:scale(1); text-shadow:none;} 50%{opacity:1; transform:scale(1.09); text-shadow:0 0 13px rgba(255,59,48,.75);} }
  .pviz-meter b { width:0; animation:pvizMeter 5s ease-in-out infinite; }
  @keyframes pvizMeter { 0%{width:6%;} 80%,100%{width:100%;} }
}

/* 04 — story stuck at 3 views + heartbeat flatlines (ghost = what could be) */
.pviz-silent { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:9px; padding:0 14px; }
.pviz-post { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.pviz-post-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#333,#1a1a1a); border:2px solid rgba(255,255,255,.14); flex:none; }
.pviz-post-meta { flex:1; display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.pviz-post-meta b { font-size:10px; color:#fff; }
.pviz-post-meta span { font-size:8px; color:rgba(255,255,255,.45); font-family:var(--fm); }
.pviz-post-views { flex:none; font-family:var(--fm); font-size:14px; font-weight:800; color:#ff5b52; }
.pviz-ekg { width:100%; height:32px; }
.pviz-ekg-ghost { fill:none; stroke:rgba(57,255,20,.2); stroke-width:1.4; stroke-dasharray:2 3; }
.pviz-ekg-line { fill:none; stroke:#ff5b52; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(255,59,48,.6)); }
.pviz-ekg-dot { fill:#fff; filter:drop-shadow(0 0 5px rgba(255,59,48,.95)); }
@media (prefers-reduced-motion: no-preference){
  .pviz-ekg-line { stroke-dasharray:270; stroke-dashoffset:270; animation:pvizDraw 3.8s ease-in-out infinite; }
  @keyframes pvizDraw { 0%{stroke-dashoffset:270;} 55%,100%{stroke-dashoffset:0;} }
  .pviz-ekg-dot { animation:pvizDot 3.8s ease-in-out infinite; }
  @keyframes pvizDot { 0%{transform:translateX(0); opacity:0;} 6%{opacity:1;} 100%{transform:translateX(158px); opacity:1;} }
  .pviz-post-views { animation:pvizViews 2.2s ease-in-out infinite; }
  @keyframes pvizViews { 0%,100%{opacity:.55;} 50%{opacity:1;} }
}

/* Pain mockups — always animate (robust). The observer still adds .in-view for
   the count-ups, but animation/visibility is NOT gated on it: a stale-cached
   blocks.jsx without the observer would otherwise freeze every scene. */
/* 02 — the whole scene jolts when the "לא הגיע" stamp slams */
@media (prefers-reduced-motion: no-preference){
  .pviz-noshow { animation:pvizShake 4.8s ease-in-out infinite; }
  @keyframes pvizShake { 0%,37%{transform:translateX(0);} 38.5%{transform:translateX(-3px);} 40%{transform:translateX(3px);} 41.5%{transform:translateX(-2px);} 43%{transform:translateX(1px);} 45%,100%{transform:translateX(0);} }
}

/* ============================================================
   PAIN — crans v3: smoke, section loss-climax, tap-to-replay,
   faster message flood. (2026-07-24)
   ============================================================ */

/* 02 — smoke/ash puffs as the money burns */
.pviz-smoke { position:absolute; inset-block-start:46%; inset-inline-start:60%; z-index:2; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, rgba(200,200,200,.5), transparent 70%); opacity:0; pointer-events:none; filter:blur(2px); }
@media (prefers-reduced-motion: no-preference){
  .pviz-smoke { animation:pvizSmoke 4.8s ease-out infinite; }
  .pviz-smoke.s2{ inset-inline-start:52%; animation-delay:.2s; }
  .pviz-smoke.s3{ inset-inline-start:68%; animation-delay:.4s; }
  @keyframes pvizSmoke { 0%,44%{opacity:0; transform:translateY(0) scale(.5);} 52%{opacity:.5;} 84%{opacity:0; transform:translateY(-34px) scale(2.2);} 100%{opacity:0;} }
}

/* 01 — flood escalates (later demands arrive faster) */
.pviz-ph-body .pviz-b:nth-child(2){ animation-delay:.4s; }
.pviz-ph-body .pviz-b:nth-child(3){ animation-delay:.72s; }
.pviz-ph-body .pviz-b:nth-child(4){ animation-delay:.98s; }

/* tap-to-replay affordance */
.pain-b-cine { cursor:pointer; }
.pain-b-cine:active { transform:scale(.994); }

/* section loss-climax — one FOMO odometer that sums the losses above */
.pain-climax { position:relative; overflow:hidden; margin-block-start:22px; padding:34px 24px 30px; border-radius:20px; text-align:center; background:linear-gradient(180deg, rgba(255,59,48,.09), rgba(10,10,10,.42)); border:1px solid rgba(255,59,48,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 24px 60px rgba(0,0,0,.42); }
.pain-climax::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 50% 122%, rgba(255,59,48,.24), transparent 70%); }
.pclx-kicker { position:relative; z-index:2; display:block; color:rgba(255,143,136,.92); font-size:11px; letter-spacing:.14em; margin-block-end:8px; }
.pclx-total { position:relative; z-index:2; font-family:var(--fm); font-weight:800; font-size:clamp(52px,15vw,92px); line-height:.9; letter-spacing:-.04em; color:#ff5b52; text-shadow:0 0 42px rgba(255,59,48,.5); }
.pclx-sub { position:relative; z-index:2; margin:10px 0 0; color:rgba(255,255,255,.6); font-size:14px; }
.pclx-resolve { position:relative; z-index:2; margin-block-start:18px; display:inline-flex; gap:8px; align-items:center; padding:11px 18px; border-radius:999px; background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.3); color:#eafff0; font-size:14px; }
.pclx-resolve .pb-g { color:#39ff14; font-weight:800; filter:drop-shadow(0 0 6px rgba(57,255,20,.7)); }
.pclx-resolve b { color:#39ff14; }
.pclx-flames { position:absolute; inset-block-end:0; inset-inline:0; height:64px; z-index:1; pointer-events:none; }
.pclx-flames i { position:absolute; inset-block-end:-6px; width:9px; height:26px; border-radius:50% 50% 42% 42%; background:linear-gradient(0deg, #ff5b52, rgba(255,159,10,.25) 68%, transparent); opacity:.5; filter:blur(1px); }
.pclx-flames i:nth-child(1){ inset-inline-start:20%; }
.pclx-flames i:nth-child(2){ inset-inline-start:34%; height:34px; }
.pclx-flames i:nth-child(3){ inset-inline-start:46%; height:22px; }
.pclx-flames i:nth-child(4){ inset-inline-start:58%; height:30px; }
.pclx-flames i:nth-child(5){ inset-inline-start:70%; height:24px; }
.pclx-flames i:nth-child(6){ inset-inline-start:80%; height:32px; }
@media (prefers-reduced-motion: no-preference){
  .pclx-flames i { animation:pclxFlame 1.8s ease-in-out infinite; }
  .pclx-flames i:nth-child(2){ animation-delay:.2s; }
  .pclx-flames i:nth-child(3){ animation-delay:.4s; }
  .pclx-flames i:nth-child(4){ animation-delay:.15s; }
  .pclx-flames i:nth-child(5){ animation-delay:.5s; }
  .pclx-flames i:nth-child(6){ animation-delay:.3s; }
  @keyframes pclxFlame { 0%,100%{ transform:scaleY(1) translateY(0); opacity:.4; } 50%{ transform:scaleY(1.45) translateY(-4px); opacity:.72; } }
}
@media (max-width:768px){ .pain-climax { margin-block-start:16px; padding:28px 18px 26px; } }

/* ============================================================
   REVIEWS — verified two-column auto-scroll (ported from /join).
   Barber reviews (ספר מאומת), honest, premium dark. (2026-07-24)
   ============================================================ */
.reviews-cine .reviews-head { text-align:center; max-width:760px; margin-inline:auto; margin-block-end:44px; }
.reviews-cine .rvh-mark { width:44px; height:44px; margin:0 auto 16px; display:grid; place-items:center; border-radius:12px; background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.22); }
.reviews-cine .rvh-mark svg { width:24px; height:24px; filter:drop-shadow(0 0 8px rgba(57,255,20,.6)); }
.reviews-cine .rvh-trust { display:inline-flex; gap:10px; align-items:center; margin-block-start:22px; padding:12px 18px; border-radius:14px; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.22); font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); text-align:start; max-width:600px; }
.reviews-cine .rvh-trust-ic { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#021004; font-weight:800; font-size:13px; box-shadow:0 0 12px rgba(57,255,20,.6); }
.reviews-cine .rvh-trust .acc { color:var(--accent); }
.reviews-cine .rvh-rating { display:inline-flex; align-items:center; gap:18px; margin-block-start:24px; }
.reviews-cine .rvh-stars { color:#ffcf5a; font-size:26px; letter-spacing:3px; text-shadow:0 0 18px rgba(255,207,90,.4); }
.reviews-cine .rvh-div { width:1px; height:34px; background:rgba(255,255,255,.14); }
.reviews-cine .rvh-label { font-size:13px; line-height:1.25; text-align:start; color:rgba(255,255,255,.55); }
.reviews-cine .rvh-label .acc { color:var(--accent); }

.reviews-cine .reviews-cols { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:840px; margin-inline:auto; height:460px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); }
.reviews-cine .reviews-col { overflow:hidden; }
.reviews-cine .reviews-col-track { display:flex; flex-direction:column; gap:14px; }
@media (prefers-reduced-motion: no-preference){
  .reviews-cine .reviews-col-track { animation:revScroll 34s linear infinite; }
  .reviews-cine .reviews-col.slow .reviews-col-track { animation-duration:46s; animation-direction:reverse; }
  @keyframes revScroll { from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
}
.reviews-cine .reviews-cols:hover .reviews-col-track { animation-play-state:paused; }
.reviews-cine .review-card { background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 12px 30px rgba(0,0,0,.36); }
.reviews-cine .rc-stars { color:#ffcf5a; font-size:14px; letter-spacing:2px; margin-block-end:9px; }
.reviews-cine .rc-comment { color:rgba(238,248,239,.9); font-size:14px; line-height:1.55; }
.reviews-cine .rc-meta { margin-block-start:13px; display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.42); font-family:var(--fm); }
.reviews-cine .rc-badge { color:var(--accent); font-weight:700; }
@media (max-width:768px){
  .reviews-cine .reviews-cols { grid-template-columns:1fr; height:420px; max-width:420px; }
  .reviews-cine .reviews-col.slow { display:none; }
  .reviews-cine .rvh-trust { font-size:13px; }
}

/* ============================================================
   SOLUTION MOCKUPS v2 + PAIN POLISH — premium tier (2026-07-24).
   Elevates every SolViz to the pain-mockup level; adds a light
   shine sweep to both. Motion gated; static fallback reads.
   ============================================================ */
@keyframes svizShine { 0%,100%{ transform:translateX(-120%); } 24%,44%{ transform:translateX(120%); } }

/* shared: taller + richer material + shine on every solution mockup */
.sol-card .sviz { height:120px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.28)); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.3); }
.sol-card .sviz::before { content:""; position:absolute; inset:0; z-index:6; pointer-events:none; background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,.09) 50%, transparent 56%); transform:translateX(-120%); }
@media (prefers-reduced-motion: no-preference){ .sol-card .sviz::before { animation:svizShine 5s ease-in-out infinite; } }

/* pain mockups — light shine sweep (×10 polish) + deeper material */
.pviz { box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.36); }
.pviz::before { content:""; position:absolute; inset:0; z-index:6; pointer-events:none; background:linear-gradient(115deg, transparent 45%, rgba(255,255,255,.07) 50%, transparent 55%); transform:translateX(-120%); }
@media (prefers-reduced-motion: no-preference){ .pviz::before { animation:svizShine 5.4s ease-in-out infinite; } }

/* 1 — FREE: pulsing ₪0 + ∞ + floating 0-cost chips + forever */
.sviz-free { display:grid; place-items:center; background:radial-gradient(circle at 50% 44%, rgba(57,255,20,.16), transparent 68%) !important; }
.sviz-free .sviz-coin { font-family:var(--fm); font-weight:900; font-size:44px; color:#5bff42; text-shadow:0 0 34px rgba(57,255,20,.7); }
.sviz-free .sviz-inf { position:absolute; inset-inline-end:14px; inset-block-end:8px; font-size:24px; color:var(--accent); opacity:.5; }
.svf2-chip { position:absolute; z-index:3; font-family:var(--fm); font-size:8.5px; color:#eafff0; background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.28); border-radius:999px; padding:3px 8px; opacity:0; }
.svf2-chip.c1 { inset-block-start:13px; inset-inline-start:13px; }
.svf2-chip.c2 { inset-block-start:13px; inset-inline-end:13px; }
.svf2-forever { position:absolute; inset-block-end:9px; inset-inline-start:14px; font-size:8px; letter-spacing:.22em; color:var(--accent); opacity:.55; }
@media (prefers-reduced-motion: no-preference){
  .sviz-free .sviz-coin { animation:sfCoin 2.6s ease-in-out infinite; }
  @keyframes sfCoin { 0%,100%{ transform:scale(1); text-shadow:0 0 24px rgba(57,255,20,.5);} 50%{ transform:scale(1.06); text-shadow:0 0 42px rgba(57,255,20,.85);} }
  .svf2-chip { animation:sfChip 3.2s ease-in-out infinite; }
  .svf2-chip.c2 { animation-delay:.4s; }
  @keyframes sfChip { 0%,12%{opacity:0; transform:translateY(6px);} 24%,80%{opacity:1; transform:none;} 92%,100%{opacity:0;} }
}

/* 2 — MAP: your live pin pings, client pins blink, "new client" tag pops */
.sviz-map .sviz-pin.p4 { position:absolute; width:9px; height:9px; border-radius:50%; background:#5bff42; box-shadow:0 0 8px rgba(57,255,20,.6); top:70%; inset-inline-start:30%; animation:sviz-blink 1.8s ease-in-out 1.1s infinite; }
.sviz-map .sviz-pin.p3.you::after { content:""; position:absolute; inset-block-start:50%; inset-inline-start:50%; width:13px; height:13px; margin:-6.5px; border-radius:50%; border:1.5px solid rgba(57,255,20,.6); }
.sviz-maptag { position:absolute; z-index:3; inset-block-start:28%; inset-inline-start:54%; font-family:var(--fm); font-size:8px; color:#021004; background:var(--accent); border-radius:999px; padding:2px 7px; font-weight:700; opacity:0; box-shadow:0 0 12px rgba(57,255,20,.6); }
@media (prefers-reduced-motion: no-preference){
  .sviz-map .sviz-pin.p3.you::after { animation:smPing 2.2s ease-out infinite; }
  @keyframes smPing { 0%{ transform:scale(1); opacity:.8;} 100%{ transform:scale(3.6); opacity:0;} }
  .sviz-maptag { animation:smTag 3.6s ease-in-out infinite; }
  @keyframes smTag { 0%,32%{opacity:0; transform:scale(.6);} 44%,80%{opacity:1; transform:scale(1);} 92%,100%{opacity:0;} }
}

/* 3 — WHATSAPP: mini chat frame, reminder -> confirm -> approved */
.sviz-wa { display:flex; flex-direction:column; padding:0 !important; background:#0b141a !important; }
.svwa-hdr { display:flex; align-items:center; gap:6px; padding:6px 8px; background:#1f2c33; }
.svwa-av { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#25d366,#0a7a52); flex:none; }
.svwa-nm { font-size:8px; color:#e9edef; font-family:var(--fm); flex:1; }
.svwa-live { width:6px; height:6px; border-radius:50%; background:#25d366; box-shadow:0 0 6px #25d366; }
.svwa-body { flex:1; display:flex; flex-direction:column; gap:4px; padding:8px; justify-content:center; }
.sviz-wa .sviz-bub { align-self:flex-end; max-width:82%; font-size:9px; padding:5px 8px; border-radius:8px; background:#005c4b; color:#e9edef; opacity:0; }
.sviz-wa .sviz-bub.b2 { align-self:flex-start; background:#202c33; }
.sviz-wa .sviz-bub.b3 { background:#005c4b; }
.sviz-wa .sviz-bub.b3 b { color:#53bdeb; }
@media (prefers-reduced-motion: no-preference){
  .sviz-wa .sviz-bub { animation:swBub 4.6s ease-in-out infinite; }
  .sviz-wa .sviz-bub.b2 { animation-delay:1.3s; }
  .sviz-wa .sviz-bub.b3 { animation-delay:2.5s; }
  @keyframes swBub { 0%{opacity:0; transform:translateY(6px) scale(.92);} 8%{opacity:1; transform:none;} 86%{opacity:1;} 95%{opacity:0;} }
}

/* 4 — CALENDAR: slots book themselves one by one, auto-close tick */
.sviz-cal { display:flex; flex-direction:column; gap:5px; padding:9px; justify-content:center; }
.sviz-cal .svc-row { position:relative; display:grid; grid-template-columns:38px 1fr auto; gap:8px; align-items:center; font-size:9.5px; padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.sviz-cal .svc-row i { font-family:var(--fm); font-style:normal; color:rgba(255,255,255,.5); }
.sviz-cal .svc-row b { color:#fff; }
.sviz-cal .svc-row em { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); }
.sviz-cal .svc-auto { font-family:var(--fm); font-size:8.5px; color:var(--accent); text-align:center; opacity:0; }
.sviz-cal .svc-auto b { color:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .sviz-cal .svc-row { animation:scFill 4.6s ease-in-out infinite; }
  .sviz-cal .svc-row.f2 { animation-delay:.5s; }
  .sviz-cal .svc-row.f3 { animation-delay:1s; }
  @keyframes scFill { 0%,10%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08);} 22%,100%{ background:rgba(57,255,20,.1); border-color:rgba(57,255,20,.3);} }
  .sviz-cal .svc-row em { animation:scDot 4.6s ease-in-out infinite; }
  .sviz-cal .svc-row.f2 em { animation-delay:.5s; }
  .sviz-cal .svc-row.f3 em { animation-delay:1s; }
  @keyframes scDot { 0%,10%{ background:rgba(255,255,255,.2); box-shadow:none;} 22%,100%{ background:var(--accent); box-shadow:0 0 6px rgba(57,255,20,.7);} }
  .sviz-cal .svc-auto { animation:scAuto 4.6s ease-in-out infinite; }
  @keyframes scAuto { 0%,42%{opacity:0;} 56%,90%{opacity:1;} 100%{opacity:0;} }
}

/* 5 — URL: browser chrome types your address, profile card slides up */
.sviz-url { display:flex; flex-direction:column; gap:8px; padding:10px; justify-content:center; }
.svu-chrome { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.svu-dots { display:flex; gap:3px; }
.svu-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); }
.sviz-url .svu-bar { font-family:var(--fm); font-size:9.5px; color:rgba(255,255,255,.72); background:none; border:0; padding:0; }
.sviz-url .svu-bar b { color:var(--accent); }
.svu-caret { display:inline-block; width:1px; height:10px; background:var(--accent); margin-inline-start:1px; vertical-align:middle; }
.svu-card { display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.18); opacity:0; }
.svu-cav { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#2ee6a0,#0a7a52); flex:none; }
.svu-cl { flex:1; display:flex; flex-direction:column; gap:4px; }
.svu-cl b { height:6px; width:60%; border-radius:3px; background:rgba(255,255,255,.4); }
.svu-cl i { height:5px; width:40%; border-radius:3px; background:rgba(255,255,255,.2); }
@media (prefers-reduced-motion: no-preference){
  .svu-caret { animation:svu-blink 1s step-end infinite; }
  .svu-card { animation:suCard 4.2s ease-in-out infinite; }
  @keyframes suCard { 0%,46%{opacity:0; transform:translateY(8px);} 60%,90%{opacity:1; transform:none;} 100%{opacity:0;} }
}

/* 6 — AI: label + typing caption + generated post preview */
.sviz-ai { display:flex; flex-direction:column; gap:6px; padding:11px; justify-content:center; }
.sviz-ai .sva-l { font-family:var(--fm); font-size:9.5px; color:var(--accent); }
.sviz-ai .sva-type { font-size:11px; color:#fff; overflow:hidden; white-space:nowrap; border-inline-end:2px solid var(--accent); width:0; }
.sva-post { display:flex; align-items:center; gap:7px; padding:6px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); opacity:0; }
.sva-post-img { width:24px; height:24px; border-radius:6px; background:linear-gradient(135deg, rgba(57,255,20,.32), rgba(255,255,255,.06)); flex:none; }
.sva-post-tx { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.25); }
@media (prefers-reduced-motion: no-preference){
  .sviz-ai .sva-type { animation:sva-typing 5s steps(24) infinite; }
  .sva-post { animation:saPost 5s ease-in-out infinite; }
  @keyframes saPost { 0%,55%{opacity:0; transform:translateY(6px);} 68%,92%{opacity:1; transform:none;} 100%{opacity:0;} }
}

/* 7 — FEED: shine cells + "ספר השבוע" badge + climbing likes */
.sviz-feed { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:8px; position:relative; align-content:center; }
.sviz-feed .svf-cell { aspect-ratio:1; border-radius:6px; background:linear-gradient(135deg, rgba(57,255,20,.16), rgba(255,255,255,.05)); position:relative; overflow:hidden; }
.svf-badge { position:absolute; z-index:3; inset-block-start:8px; inset-inline-end:8px; font-family:var(--fm); font-size:7.5px; color:#021004; background:var(--accent); border-radius:999px; padding:2px 7px; font-weight:700; box-shadow:0 0 10px rgba(57,255,20,.6); opacity:0; }
.sviz-feed .svf-like { grid-column:1 / -1; text-align:center; font-family:var(--fm); font-size:12px; color:var(--accent); font-weight:700; }
@media (prefers-reduced-motion: no-preference){
  .svf-badge { animation:sfBadge 3.6s ease-in-out infinite; }
  @keyframes sfBadge { 0%,20%{opacity:0; transform:scale(.6);} 32%,82%{opacity:1; transform:scale(1);} 94%,100%{opacity:0;} }
  .sviz-feed .svf-like { animation:svf-heart 2.6s ease-in-out infinite; }
}

/* 8 — CHIKO: avatar orb, typing then a done message */
.sviz-chiko { display:flex; align-items:center; gap:10px; padding:13px; }
.sviz-chiko .svk-av { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #5bff42, #0a7a52); color:#021004; display:grid; place-items:center; font-size:16px; flex:none; box-shadow:0 0 16px rgba(57,255,20,.5); }
.svk-col { flex:1; display:flex; flex-direction:column; gap:5px; }
.svk-typing { display:inline-flex; gap:3px; padding:5px 8px; background:rgba(255,255,255,.06); border-radius:8px; align-self:flex-start; }
.svk-typing i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
.sviz-chiko .svk-msg { font-size:11px; color:#fff; background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.2); border-radius:10px; padding:7px 10px; opacity:0; }
.sviz-chiko .svk-msg b { color:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .sviz-chiko .svk-av { animation:svk-bob 2.4s ease-in-out infinite; }
  .svk-typing { animation:skTyp 4s ease-in-out infinite; }
  @keyframes skTyp { 0%,45%{opacity:1;} 58%,100%{opacity:0;} }
  .svk-typing i { animation:pvizTyp 1s ease-in-out infinite; }
  .svk-typing i:nth-child(2){ animation-delay:.15s; }
  .svk-typing i:nth-child(3){ animation-delay:.3s; }
  .sviz-chiko .svk-msg { animation:skMsg 4s ease-in-out infinite; }
  @keyframes skMsg { 0%,48%{opacity:0; transform:translateY(6px);} 60%,92%{opacity:1; transform:none;} 100%{opacity:0;} }
}

/* 9 — WAITLIST: a slot frees, #1 lights up, notified */
.sviz-wait { display:flex; flex-direction:column; gap:5px; padding:10px; justify-content:center; }
.sviz-wait .svw-row { display:flex; gap:7px; align-items:center; font-size:10px; padding:5px 9px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.72); }
.sviz-wait .svw-row b { font-family:var(--fm); color:rgba(255,255,255,.4); }
.sviz-wait .svw-note { font-size:9px; color:var(--accent); font-weight:700; padding:6px 9px; border-radius:7px; background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.25); opacity:0; }
.sviz-wait .svw-note b { color:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .sviz-wait .svw-row.a { animation:swRowA 4.6s ease-in-out infinite; }
  @keyframes swRowA { 0%,42%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08);} 52%,100%{ background:rgba(57,255,20,.09); border-color:rgba(57,255,20,.3);} }
  .sviz-wait .svw-row.a b { animation:swRowAb 4.6s ease-in-out infinite; }
  @keyframes swRowAb { 0%,42%{ color:rgba(255,255,255,.4);} 52%,100%{ color:var(--accent);} }
  .sviz-wait .svw-note { animation:swNote 4.6s ease-in-out infinite; }
  @keyframes swNote { 0%,44%{opacity:0; transform:translateY(6px);} 56%,92%{opacity:1; transform:none;} 100%{opacity:0;} }
}

/* 04 silent — brutal footer metric under the flatline */
.pviz-silent { gap:8px; }
.pviz-silent .pviz-silent-foot { text-align:center; font-family:var(--fm); font-size:9px; font-weight:600; color:rgba(255,91,82,.82); letter-spacing:.02em; }

/* ============================================================
   PAIN MOCKUPS v4 content scenes + REVIEWS 3/2-col (2026-07-24)
   ============================================================ */

/* 01 — WhatsApp HOME: chat list of nagging clients + missed calls */
.pviz-phone .pviz-ph { width:158px; height:120px; }
.wal-hdr { display:flex; align-items:center; justify-content:space-between; padding:6px 9px; background:#1f2c33; }
.wal-hdr b { font-size:10px; color:#fff; }
.wal-count { font-size:7.5px; color:#ff8f88; font-family:var(--fm); }
.wal-list { display:flex; flex-direction:column; }
.wal-row { display:flex; align-items:center; gap:7px; padding:4px 8px; border-block-end:1px solid rgba(255,255,255,.045); }
.wal-av { width:19px; height:19px; border-radius:50%; flex:none; background:linear-gradient(135deg,#3a4a52,#222); }
.wal-av.a1 { background:linear-gradient(135deg,#cc8866,#884433); }
.wal-av.a2 { background:linear-gradient(135deg,#6688cc,#334488); }
.wal-av.a3 { background:linear-gradient(135deg,#88cc66,#448844); }
.wal-av.call { background:rgba(255,59,48,.15); position:relative; }
.wal-av.call::after { content:"✆"; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:#ff5b52; }
.wal-mid { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.wal-mid b { font-size:9px; color:#eaf5ec; }
.wal-mid i { font-size:8px; color:rgba(255,255,255,.45); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wal-row.miss .wal-mid i { color:#ff8f88; }
.wal-end { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; }
.wal-time { font-size:7px; color:rgba(255,255,255,.4); font-family:var(--fm); }
.wal-badge { min-width:14px; height:14px; border-radius:8px; background:#25d366; color:#04210f; font-size:8px; font-weight:800; display:grid; place-items:center; padding:0 3px; }
@media (prefers-reduced-motion: no-preference){
  .wal-badge { animation:pvizBadge 3s ease-in-out infinite; }
  .wal-row.miss .wal-av.call { animation:walMiss 1.6s ease-in-out infinite; }
  @keyframes walMiss { 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.55);} 60%{ box-shadow:0 0 0 5px rgba(255,59,48,0);} }
  .wal-row { animation:walIn .5s ease both; }
  .wal-list .wal-row:nth-child(2){ animation-delay:.1s; }
  .wal-list .wal-row:nth-child(3){ animation-delay:.2s; }
  .wal-list .wal-row:nth-child(4){ animation-delay:.3s; }
  .wal-list .wal-row:nth-child(5){ animation-delay:.4s; }
  @keyframes walIn { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
}

/* 02 — client cancel excuses 5 min before, each a money loss */
.pviz-noshow { animation:none !important; display:block !important; padding:11px 13px !important; align-items:initial !important; justify-content:initial !important; }
.cnc { display:flex; flex-direction:column; gap:5px; height:100%; justify-content:center; }
.cnc-lbl { font-family:var(--fm); font-size:8px; color:#ff8f88; }
.cnc-bub { position:relative; align-self:flex-start; max-width:96%; font-size:9px; line-height:1.32; color:#eaf5ec; background:#202c33; padding:5px 46px 5px 9px; border-radius:9px 9px 9px 2px; opacity:0; }
.cnc-bub em { position:absolute; inset-inline-end:7px; inset-block-start:50%; transform:translateY(-50%); font-style:normal; font-family:var(--fm); font-size:10px; font-weight:800; color:#ff5b52; }
.cnc-loss { display:flex; align-items:center; justify-content:space-between; margin-block-start:1px; padding:6px 10px; border-radius:9px; background:rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.3); }
.cnc-loss span { font-size:9px; color:rgba(255,255,255,.62); }
.cnc-amt { font-family:var(--fm); font-size:14px; font-weight:800; color:#ff5b52; }
@media (prefers-reduced-motion: no-preference){
  .cnc-bub { animation:cncBub 5s ease-in-out infinite; }
  .cnc-bub.b2 { animation-delay:1.2s; }
  @keyframes cncBub { 0%{ opacity:0; transform:translateX(-8px);} 9%{ opacity:1; transform:none;} 90%{ opacity:1;} 97%{ opacity:0;} }
  .cnc-amt { animation:pvizFeePulse 1.8s ease-in-out infinite; }
}

/* 03 — monthly bills ledger; the app subscription is the avoidable villain */
.pviz-drain { display:block !important; padding:11px 13px !important; align-items:initial !important; justify-content:initial !important; }
.exp { display:flex; flex-direction:column; gap:5px; }
.exp-row { display:flex; align-items:center; justify-content:space-between; font-size:10px; padding:5px 9px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.7); }
.exp-row > span { display:flex; align-items:center; gap:6px; }
.exp-row b { font-family:var(--fm); color:#fff; font-weight:700; }
.exp-row.bad { background:rgba(255,59,48,.1); border-color:rgba(255,59,48,.32); color:#ff8f88; }
.exp-row.bad b { color:#ff5b52; }
.exp-row.bad b i { font-size:8px; font-style:normal; color:rgba(255,143,136,.8); }
.exp-row.bad em { font-style:normal; font-family:var(--fm); font-size:7px; color:#021004; background:#ff5b52; border-radius:999px; padding:1px 5px; }
@media (prefers-reduced-motion: no-preference){
  .exp-row.bad { animation:expBad 2.4s ease-in-out infinite; }
  @keyframes expBad { 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,0);} 50%{ box-shadow:0 0 16px rgba(255,59,48,.32);} }
}

/* 04 — story viewers list: only family & friends, zero new clients */
.pviz-silent { display:block !important; padding:10px 12px !important; align-items:initial !important; justify-content:initial !important; gap:0 !important; }
.viw { display:flex; flex-direction:column; gap:5px; }
.viw-hdr { display:flex; align-items:center; justify-content:space-between; padding-block-end:4px; border-block-end:1px solid rgba(255,255,255,.08); }
.viw-hdr b { font-size:10px; color:#fff; }
.viw-hint { font-size:8px; color:#ff8f88; font-family:var(--fm); }
.viw-list { display:flex; flex-direction:column; gap:4px; }
.viw-row { display:flex; align-items:center; gap:8px; }
.viw-av { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#4a4a4a,#222); flex:none; }
.viw-row b { font-size:9.5px; color:#eaf5ec; flex:1; }
.viw-rel { font-size:8px; color:rgba(255,255,255,.4); font-family:var(--fm); }
.viw-foot { text-align:center; font-family:var(--fm); font-size:9px; font-weight:600; color:rgba(255,91,82,.82); margin-block-start:3px; }
@media (prefers-reduced-motion: no-preference){
  .viw-row { animation:walIn .5s ease both; }
  .viw-list .viw-row:nth-child(2){ animation-delay:.12s; }
  .viw-list .viw-row:nth-child(3){ animation-delay:.24s; }
  .viw-list .viw-row:nth-child(4){ animation-delay:.36s; }
}

/* ── REVIEWS — 3 columns desktop / 2 mobile, faster, 4.7 rating ── */
.reviews-cine .reviews-cols { grid-template-columns:repeat(3,1fr); max-width:1020px; height:440px; }
.reviews-cine .reviews-col.c0 .reviews-col-track { animation-duration:24s; animation-direction:normal; }
.reviews-cine .reviews-col.c1 .reviews-col-track { animation-duration:30s; animation-direction:reverse; }
.reviews-cine .reviews-col.c2 .reviews-col-track { animation-duration:27s; animation-direction:normal; }
.reviews-cine .rc-stars .on { color:#ffcf5a; }
.reviews-cine .rc-stars .off { color:rgba(255,255,255,.2); }
.reviews-cine .rvh-score { font-family:var(--fm); font-weight:800; font-size:40px; color:#ffcf5a; line-height:1; text-shadow:0 0 24px rgba(255,207,90,.35); }
.reviews-cine .rvh-starbar { position:relative; display:inline-block; direction:ltr; font-size:16px; letter-spacing:2px; }
.reviews-cine .rvh-star-bg { color:rgba(255,255,255,.2); }
.reviews-cine .rvh-star-fg { position:absolute; inset-block-start:0; inset-inline-start:0; color:#ffcf5a; overflow:hidden; white-space:nowrap; text-shadow:0 0 14px rgba(255,207,90,.5); }
@media (max-width:768px){
  .reviews-cine .reviews-cols { grid-template-columns:repeat(2,1fr); max-width:460px; height:420px; }
  .reviews-cine .reviews-col.c2 { display:none; }
}

/* ============================================================
   PAIN MOCKUPS — LIVE animation pass (2026-07-24). Each scene
   plays a sequenced, looping, dramatic beat. Motion gated.
   ============================================================ */

/* 01 — the chat list feels alive: top row keeps "just arrived",
   badges pop, missed calls ring, header count pulses */
@media (prefers-reduced-motion: no-preference){
  .wal-list .wal-row:first-child { animation:walIn .5s ease both, walNewRow 4s ease-in-out .5s infinite; }
  @keyframes walNewRow { 0%,90%,100%{ background:transparent;} 3%{ background:rgba(37,211,102,.2);} 16%{ background:rgba(37,211,102,.05);} }
  .wal-list .wal-row:first-child .wal-badge { animation:walBadgePop 4s ease-in-out .5s infinite; }
  @keyframes walBadgePop { 0%,90%,100%{ transform:scale(1);} 4%{ transform:scale(1.45);} 16%{ transform:scale(1);} }
  .wal-badge { animation:pvizBadge 3s ease-in-out infinite; }
  .wal-count { animation:walCount 2s ease-in-out infinite; }
  @keyframes walCount { 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
}

/* 02 — cancellations play out: bubbles arrive, amounts flash,
   the loss box jolts, someone is always typing another excuse */
.cnc-typing { display:inline-flex; gap:3px; padding:4px 8px; background:rgba(255,255,255,.06); border-radius:8px; align-self:flex-start; }
.cnc-typing i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference){
  .cnc-bub.b1 { animation:cncBub 6s ease-in-out infinite; }
  .cnc-bub.b2 { animation:cncBub 6s ease-in-out 1.4s infinite; }
  @keyframes cncBub { 0%{ opacity:0; transform:translateX(-9px) scale(.96);} 8%{ opacity:1; transform:none;} 90%{ opacity:1;} 97%{ opacity:0;} }
  .cnc-bub.b1 em { animation:cncEm 6s ease-in-out .3s infinite; }
  .cnc-bub.b2 em { animation:cncEm 6s ease-in-out 1.7s infinite; }
  @keyframes cncEm { 0%,3%{ opacity:0; transform:translateY(-50%) scale(1.7);} 8%{ opacity:1; transform:translateY(-50%) scale(1);} 90%{ opacity:1;} 97%{ opacity:0;} }
  .cnc-typing i { animation:pvizTyp 1s ease-in-out infinite; }
  .cnc-typing i:nth-child(2){ animation-delay:.15s; }
  .cnc-typing i:nth-child(3){ animation-delay:.3s; }
  .cnc-loss { animation:cncShake 6s ease-in-out infinite; }
  @keyframes cncShake { 0%,7%,30%,100%{ transform:translateX(0);} 9%{ transform:translateX(-3px);} 11%{ transform:translateX(3px);} 13%{ transform:translateX(0);} 24%{ transform:translateX(-3px);} 26%{ transform:translateX(3px);} 28%{ transform:translateX(0);} }
  .cnc-amt { animation:pvizFeePulse 1.8s ease-in-out infinite; }
}

/* 03 — the ledger re-prints row by row, then the app-fee row slams
   in red with its "wasteful" tag */
@media (prefers-reduced-motion: no-preference){
  .exp .exp-row { animation:expIn 5s ease-in-out infinite; opacity:0; }
  .exp .exp-row:nth-child(2){ animation-delay:.35s; }
  .exp .exp-row:nth-child(3){ animation-delay:.7s; }
  @keyframes expIn { 0%{ opacity:0; transform:translateX(-10px);} 6%{ opacity:1; transform:none;} 92%{ opacity:1;} 98%{ opacity:0;} }
  .exp .exp-row.bad { animation:expSlam 5s ease-in-out 1.1s infinite; opacity:0; }
  @keyframes expSlam { 0%,18%{ opacity:0; transform:scale(1.35);} 25%{ opacity:1; transform:scale(1); box-shadow:0 0 22px rgba(255,59,48,.5);} 30%{ transform:scale(1.02);} 36%{ transform:scale(1); box-shadow:0 0 10px rgba(255,59,48,.2);} 92%{ opacity:1;} 98%{ opacity:0;} }
  .exp-row.bad em { animation:expTag 5s ease-in-out 1.1s infinite; opacity:0; }
  @keyframes expTag { 0%,20%{ opacity:0; transform:scale(.4);} 30%,90%{ opacity:1; transform:scale(1);} 98%{ opacity:0;} }
}

/* 04 — story views load one by one; nobody new, then the red verdict */
@media (prefers-reduced-motion: no-preference){
  .viw-list .viw-row { animation:viwIn 5s ease-in-out infinite; opacity:0; }
  .viw-list .viw-row:nth-child(1){ animation-delay:.1s; }
  .viw-list .viw-row:nth-child(2){ animation-delay:.4s; }
  .viw-list .viw-row:nth-child(3){ animation-delay:.7s; }
  .viw-list .viw-row:nth-child(4){ animation-delay:1s; }
  @keyframes viwIn { 0%{ opacity:0; transform:translateX(-8px);} 6%{ opacity:1; transform:none;} 92%{ opacity:1;} 98%{ opacity:0;} }
  .viw-foot { animation:viwFoot 5s ease-in-out infinite; }
  @keyframes viwFoot { 0%,28%{ opacity:.35; transform:scale(.98);} 38%{ opacity:1; transform:scale(1); color:#ff5b52;} 70%{ opacity:.7;} 100%{ opacity:.35;} }
  .viw-hint { animation:pvizFeePulse 2.2s ease-in-out infinite; }
}

/* ============================================================
   PAIN MOCKUPS — v5 (2026-07-24): stacking WA feed + incoming
   call, premium cancel chat (80nis), visible calendar-app bill,
   richer story-views verdict. Motion gated.
   ============================================================ */

/* 01 — WhatsApp: an endless stack of chats scrolls + an incoming call jumps in */
.pviz-phone .pviz-ph { width:160px; height:122px; }
.wal-hdr { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:6px 9px; background:#1f2c33; }
.wal-hdr b { font-size:11px; color:#fff; font-weight:700; }
.wal-count { font-size:8px; color:#ff5b52; font-family:var(--fm); font-weight:700; }
.wal-scroll { position:absolute; inset-block-start:25px; inset-block-end:0; inset-inline:0; overflow:hidden; -webkit-mask:linear-gradient(180deg,#000 84%,transparent); mask:linear-gradient(180deg,#000 84%,transparent); }
.wal-track { display:flex; flex-direction:column; }
.wal-row { display:flex; align-items:center; gap:7px; padding:5px 8px; border-block-end:1px solid rgba(255,255,255,.05); }
.wal-av { width:20px; height:20px; border-radius:50%; flex:none; background:linear-gradient(135deg,#3a4a52,#222); }
.wal-av.a1 { background:linear-gradient(135deg,#cc8866,#884433); }
.wal-av.a2 { background:linear-gradient(135deg,#6688cc,#334488); }
.wal-av.a3 { background:linear-gradient(135deg,#88cc66,#448844); }
.wal-av.call { background:rgba(255,59,48,.16); position:relative; }
.wal-av.call::after { content:"\2706"; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:#ff5b52; }
.wal-mid { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.18; }
.wal-mid b { font-size:9.5px; color:#eaf5ec; }
.wal-mid i { font-size:8.5px; color:rgba(255,255,255,.5); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wal-row.miss .wal-mid i { color:#ff8f88; }
.wal-end { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; }
.wal-time { font-size:8px; color:rgba(255,255,255,.55); font-family:var(--fm); font-weight:600; }
.wal-badge { min-width:15px; height:15px; border-radius:8px; background:#25d366; color:#04210f; font-size:8.5px; font-weight:800; display:grid; place-items:center; padding:0 3px; }
.wal-call { position:absolute; z-index:6; inset-block-start:6px; inset-inline:7px; display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:12px; background:linear-gradient(180deg,#1f3a2a,#0c1c12); box-shadow:0 12px 26px rgba(0,0,0,.65), 0 0 0 1px rgba(37,211,102,.45); opacity:0; transform:translateY(-150%); }
.wal-call-av { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#25d366,#0a7a52); flex:none; }
.wal-call-mid { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.wal-call-mid b { font-size:9.5px; color:#fff; }
.wal-call-mid span { font-size:8px; color:#8fecc0; font-family:var(--fm); }
.wal-call-actions { display:flex; gap:5px; }
.wal-call-actions i { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; position:relative; }
.wal-call-actions i.acc { background:#25d366; }
.wal-call-actions i.dec { background:#ff3b30; }
.wal-call-actions i::after { content:"\2706"; font-size:9px; color:#fff; }
.wal-call-actions i.dec::after { transform:rotate(135deg); }
@media (prefers-reduced-motion: no-preference){
  .wal-track { animation:walScroll 10s linear infinite; }
  @keyframes walScroll { from{ transform:translateY(0);} to{ transform:translateY(-50%);} }
  .wal-badge { animation:pvizBadge 3s ease-in-out infinite; }
  .wal-count { animation:walCount 1.6s ease-in-out infinite; }
  @keyframes walCount { 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
  .wal-row.miss .wal-av.call { animation:walMiss 1.5s ease-in-out infinite; }
  @keyframes walMiss { 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.55);} 60%{ box-shadow:0 0 0 5px rgba(255,59,48,0);} }
  .wal-call { animation:walCallIn 5s ease-in-out infinite; }
  @keyframes walCallIn { 0%{ opacity:0; transform:translateY(-150%);} 5%{ opacity:1; transform:translateY(0);} 9%{ transform:translateY(-4px) rotate(-1deg);} 13%{ transform:translateY(0) rotate(1deg);} 17%{ transform:translateY(-3px);} 21%{ transform:translateY(0);} 58%{ opacity:1; transform:translateY(0);} 66%{ opacity:0; transform:translateY(-150%);} 100%{ opacity:0; transform:translateY(-150%);} }
  .wal-call-av { animation:walCallRing 1s ease-in-out infinite; }
  @keyframes walCallRing { 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.55);} 60%{ box-shadow:0 0 0 6px rgba(37,211,102,0);} }
  .wal-call-actions i.acc { animation:walAcc 1s ease-in-out infinite; }
  @keyframes walAcc { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }
}

/* 02 — premium cancel chat, 80nis each */
.pviz-noshow { animation:none !important; display:block !important; padding:10px 12px !important; align-items:initial !important; justify-content:initial !important; }
.cnc { display:flex; flex-direction:column; gap:5px; height:100%; justify-content:center; }
.cnc-hdr { display:flex; align-items:center; gap:7px; padding-block-end:5px; border-block-end:1px solid rgba(255,255,255,.08); }
.cnc-hdr-av { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#4a4a4a,#222); flex:none; }
.cnc-hdr-nm { flex:1; display:flex; flex-direction:column; line-height:1.15; }
.cnc-hdr-nm b { font-size:10px; color:#fff; }
.cnc-hdr-nm span { font-size:8px; color:#ff8f88; font-family:var(--fm); }
.cnc-hdr-live { width:7px; height:7px; border-radius:50%; background:#ff3b30; box-shadow:0 0 8px rgba(255,59,48,.8); }
.cnc-bub { position:relative; align-self:flex-start; max-width:96%; font-size:9px; line-height:1.32; color:#eaf5ec; background:#202c33; padding:5px 46px 5px 9px; border-radius:9px 9px 9px 2px; opacity:0; }
.cnc-bub em { position:absolute; inset-inline-end:7px; inset-block-start:50%; transform:translateY(-50%); font-style:normal; font-family:var(--fm); font-size:10px; font-weight:800; color:#ff5b52; }
.cnc-loss { display:flex; align-items:center; justify-content:space-between; margin-block-start:2px; padding:6px 10px; border-radius:9px; background:rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.32); }
.cnc-loss span { font-size:9px; color:rgba(255,255,255,.62); }
.cnc-amt { font-family:var(--fm); font-size:15px; font-weight:800; color:#ff5b52; }
@media (prefers-reduced-motion: no-preference){
  .cnc-hdr-live { animation:pvizPing 1.2s ease-in-out infinite; }
  .cnc-bub.b1 { animation:cncBub 6s ease-in-out infinite; }
  .cnc-bub.b2 { animation:cncBub 6s ease-in-out 1.4s infinite; }
  @keyframes cncBub { 0%{ opacity:0; transform:translateX(-9px) scale(.96);} 8%{ opacity:1; transform:none;} 90%{ opacity:1;} 97%{ opacity:0;} }
  .cnc-bub.b1 em { animation:cncEm 6s ease-in-out .3s infinite; }
  .cnc-bub.b2 em { animation:cncEm 6s ease-in-out 1.7s infinite; }
  @keyframes cncEm { 0%,3%{ opacity:0; transform:translateY(-50%) scale(1.7);} 8%{ opacity:1; transform:translateY(-50%) scale(1);} 90%{ opacity:1;} 97%{ opacity:0;} }
  .cnc-loss { animation:cncShake 6s ease-in-out infinite; }
  @keyframes cncShake { 0%,7%,30%,100%{ transform:translateX(0);} 9%{ transform:translateX(-3px);} 11%{ transform:translateX(3px);} 13%{ transform:translateX(0);} 24%{ transform:translateX(-3px);} 26%{ transform:translateX(3px);} 28%{ transform:translateX(0);} }
  .cnc-amt { animation:pvizFeePulse 1.8s ease-in-out infinite; }
}

/* 03 — the calendar-app bill is now a big, unmistakable red card */
.pviz-drain { display:block !important; padding:11px 12px !important; align-items:initial !important; justify-content:initial !important; }
.exp { display:flex; flex-direction:column; gap:5px; }
.exp-row { display:flex; align-items:center; justify-content:space-between; font-size:10px; padding:5px 9px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.65); }
.exp-row b { font-family:var(--fm); color:#fff; font-weight:700; }
.exp-bill { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px; background:linear-gradient(180deg, rgba(255,59,48,.16), rgba(255,59,48,.05)); border:1px solid rgba(255,59,48,.42); margin-block-start:3px; }
.exp-bill-ic { width:26px; height:26px; border-radius:8px; background:rgba(255,59,48,.2); color:#ff5b52; display:grid; place-items:center; font-size:14px; flex:none; }
.exp-bill-mid { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.exp-bill-mid b { font-size:11px; color:#fff; }
.exp-bill-mid span { font-size:8.5px; color:rgba(255,143,136,.92); font-family:var(--fm); }
.exp-bill-end { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.exp-bill-end b { font-family:var(--fm); font-size:16px; font-weight:800; color:#ff5b52; }
.exp-bill-end em { font-style:normal; font-family:var(--fm); font-size:7px; color:#021004; background:#ff5b52; border-radius:999px; padding:1px 6px; }
@media (prefers-reduced-motion: no-preference){
  .exp .exp-row { animation:expIn 5s ease-in-out infinite; opacity:0; }
  .exp .exp-row:nth-child(2){ animation-delay:.35s; }
  @keyframes expIn { 0%{ opacity:0; transform:translateX(-10px);} 6%{ opacity:1; transform:none;} 92%{ opacity:1;} 98%{ opacity:0;} }
  .exp-bill { animation:expBillPulse 2.2s ease-in-out infinite, expBillSlam 5s ease-in-out 1s infinite; opacity:0; }
  @keyframes expBillPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,0);} 50%{ box-shadow:0 0 22px rgba(255,59,48,.4);} }
  @keyframes expBillSlam { 0%,18%{ opacity:0; transform:scale(1.3);} 25%{ opacity:1; transform:scale(1);} 30%{ transform:scale(1.02);} 35%{ transform:scale(1);} 92%{ opacity:1;} 98%{ opacity:0;} }
}

/* 04 — story preview + viewers + red verdict */
.pviz-silent { display:block !important; padding:9px 11px !important; align-items:initial !important; justify-content:initial !important; gap:0 !important; }
.viw { display:flex; flex-direction:column; gap:5px; }
.viw-story { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.viw-story-img { width:24px; height:32px; border-radius:6px; background:linear-gradient(135deg,#3a3a3a,#111); border:1px solid rgba(255,255,255,.12); flex:none; }
.viw-story-meta { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.viw-story-meta b { font-size:10px; color:#fff; }
.viw-story-meta span { font-size:8px; color:rgba(255,255,255,.45); font-family:var(--fm); }
.viw-story-eye { font-family:var(--fm); font-size:10px; color:rgba(255,255,255,.55); white-space:nowrap; }
.viw-story-eye b { color:#fff; }
.viw-list { display:flex; flex-direction:column; gap:3px; }
.viw-row { display:flex; align-items:center; gap:7px; }
.viw-av { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#4a4a4a,#222); flex:none; }
.viw-row b { font-size:9px; color:#eaf5ec; flex:1; }
.viw-rel { font-size:7.5px; color:rgba(255,255,255,.4); font-family:var(--fm); }
.viw-verdict { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 9px; border-radius:9px; background:rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.3); font-size:9px; color:#ff8f88; }
.viw-verdict b { font-family:var(--fm); font-size:14px; font-weight:800; color:#ff5b52; }
.viw-verdict span { color:rgba(255,255,255,.55); }
@media (prefers-reduced-motion: no-preference){
  .viw-list .viw-row { animation:viwIn 5s ease-in-out infinite; opacity:0; }
  .viw-list .viw-row:nth-child(1){ animation-delay:.2s; }
  .viw-list .viw-row:nth-child(2){ animation-delay:.5s; }
  .viw-list .viw-row:nth-child(3){ animation-delay:.8s; }
  @keyframes viwIn { 0%{ opacity:0; transform:translateX(-8px);} 8%{ opacity:1; transform:none;} 92%{ opacity:1;} 98%{ opacity:0;} }
  .viw-verdict { animation:viwVerd 5s ease-in-out infinite; }
  @keyframes viwVerd { 0%,30%{ opacity:.45; transform:scale(.98);} 40%{ opacity:1; transform:scale(1);} 100%{ opacity:.6;} }
}

/* In-view gating — pause offscreen mockup animations (perf, robust) */
.anim-paused, .anim-paused *, .anim-paused::before, .anim-paused::after { animation-play-state: paused !important; }

/* ============================================================
   BRANDING refonte (2026-07-24) — signature scissors cut-line
   between sections, brand signature block, agenda cancel toggle.
   ============================================================ */

/* signature "cut here" scissors line — the recurring brand motif */
.brand-cut2 { display:flex; align-items:center; justify-content:center; gap:16px; max-width:880px; margin:10px auto; padding:14px 24px; }
.brand-cut2 .bc2-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16)); }
.brand-cut2 .bc2-line:last-child { background:linear-gradient(90deg, rgba(255,255,255,.16), transparent); }
.brand-cut2.dashed .bc2-line { height:0; border-top:1px dashed rgba(255,255,255,.18); background:none; }
.brand-cut2 .bc2-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.24); box-shadow:0 0 20px rgba(57,255,20,.14); }
@media (prefers-reduced-motion: no-preference){
  .brand-cut2 .bc2-mark { animation:bcMark 4s ease-in-out infinite; }
  @keyframes bcMark { 0%,100%{ box-shadow:0 0 14px rgba(57,255,20,.1); transform:rotate(0);} 50%{ box-shadow:0 0 26px rgba(57,255,20,.28); transform:rotate(-8deg);} }
}

/* brand signature — full lockup + both official slogans, before the final CTA */
.brand-sig { text-align:center; max-width:640px; margin:0 auto; padding:48px 24px 10px; }
.brand-sig-mark { display:inline-flex; margin-block-end:16px; filter:drop-shadow(0 0 22px rgba(57,255,20,.18)); }
.brand-sig-main { font-family:var(--fh); font-size:clamp(20px,4.4vw,30px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.15; margin:0; }
.brand-sig-sub { font-family:var(--fm); font-size:11px; letter-spacing:.16em; color:var(--accent); opacity:.72; margin:10px 0 0; }

/* 03 — cancel toggle: the fee is a tap away from 0 with hasapar */
.exp-save { display:flex; align-items:center; gap:8px; margin-block-start:4px; padding:4px 9px; }
.exp-tog { position:relative; width:26px; height:15px; border-radius:999px; background:rgba(255,255,255,.15); flex:none; }
.exp-tog::after { content:""; position:absolute; inset-block-start:2px; inset-inline-start:2px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.exp-save-tx { font-size:9px; color:rgba(255,255,255,.6); font-family:var(--fh); }
.exp-save-tx b { color:var(--accent); font-family:var(--fm); }
@media (prefers-reduced-motion: no-preference){
  .exp-tog { animation:expTog 4s ease-in-out infinite; }
  @keyframes expTog { 0%,42%{ background:rgba(255,255,255,.15);} 56%,100%{ background:var(--accent);} }
  .exp-tog::after { animation:expTogKnob 4s ease-in-out infinite; }
  @keyframes expTogKnob { 0%,42%{ inset-inline-start:2px;} 56%,100%{ inset-inline-start:13px;} }
  .exp-save-tx { animation:expSaveTx 4s ease-in-out infinite; }
  @keyframes expSaveTx { 0%,42%{ color:rgba(255,255,255,.5);} 56%,100%{ color:#eafff0;} }
}
/* keep 03 compact so the toggle fits */
.pviz-drain .exp-bill { padding:7px 10px; }
.pviz-drain .exp-row { padding:4px 9px; }

/* reviews head scissors mark — a touch more brand presence */
.reviews-cine .rvh-mark { box-shadow:0 0 22px rgba(57,255,20,.16); }

/* ============================================================
   BRANDING crans (2026-07-24): faint scissors watermark on premium
   cards, nav founder chip, dashboard brand mark, pain->solution echo.
   ============================================================ */

/* giant faint scissors watermark behind premium cards */
.pain-climax, .reviews-cine .reviews-head { position:relative; }
.pain-climax::after, .reviews-cine .reviews-head::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-end:-24px; inset-inline-start:-14px; width:190px; height:190px; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339ff14' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cline x1='8.6' y1='6' x2='19' y2='18' stroke-linecap='round'/%3E%3Cline x1='8.6' y1='18' x2='19' y2='6' stroke-linecap='round'/%3E%3Ccircle cx='14.5' cy='12' r='2' fill='%2339ff14' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain;
}
.reviews-cine .reviews-head::after { inset-block-end:auto; inset-block-start:-10px; inset-inline-end:-10px; inset-inline-start:auto; width:150px; height:150px; opacity:.04; }

/* nav founder chip */
.nav-founder { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--accent); background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.24); border-radius:999px; padding:4px 10px; letter-spacing:.02em; white-space:nowrap; }
.nav-founder-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(57,255,20,.8); }
@media (prefers-reduced-motion: no-preference){ .nav-founder-dot { animation:pvizPing 1.4s ease-in-out infinite; } }
@media (max-width:860px){ .nav-founder { display:none; } }

/* dashboard mockup brand mark (replaces the old placeholder) */
.mk-brand { margin-block-end:3px; opacity:.92; }

/* pain -> solution echo: a green "heal" accent atop each relief strip */
.pains-grid .pain-b-cine .pain-b-fix { position:relative; }
.pains-grid .pain-b-cine .pain-b-fix::before { content:""; position:absolute; inset-block-start:-1px; inset-inline:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.9; }
@media (prefers-reduced-motion: no-preference){
  .pains-grid .pain-b-cine .pain-b-fix::before { animation:healLine 3.4s ease-in-out infinite; }
  @keyframes healLine { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
}

/* ============================================================
   PAIN -> SOLUTION echo (2026-07-24): the red pain card
   transforms into its green solution on hover (desktop) / tap.
   ============================================================ */
.pains-grid .pain-b-cine { cursor:pointer; }
.pains-grid .pain-b-cine .pain-solved {
  position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:11px; padding:24px; border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 0%, rgba(57,255,20,.12), transparent 60%), linear-gradient(165deg, #0c2414, #06130a);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.99);
  transition:opacity .45s cubic-bezier(.2,.9,.25,1), transform .45s cubic-bezier(.2,.9,.25,1), visibility .45s;
}
.pains-grid .pain-b-cine .pain-solved::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.pains-grid .pain-b-cine:hover .pain-solved,
.pains-grid .pain-b-cine.healed .pain-solved { opacity:1; visibility:visible; transform:none; }
.pain-solved .ps-mark { width:52px; height:52px; border-radius:50%; background:linear-gradient(180deg,#5bff42,var(--accent)); display:grid; place-items:center; box-shadow:0 0 34px rgba(57,255,20,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.pain-solved .ps-metric { font-family:var(--fm); font-weight:800; font-size:clamp(32px,8.5vw,46px); color:#5bff42; letter-spacing:-.03em; text-shadow:0 0 34px rgba(57,255,20,.5); line-height:1; }
.pain-solved .ps-label { font-family:var(--fh); font-size:13.5px; color:rgba(232,255,238,.86); line-height:1.45; max-width:280px; }
.pain-solved .ps-tag { font-size:10px; letter-spacing:.14em; color:var(--accent); background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.32); border-radius:999px; padding:4px 12px; }
.pain-solved .ps-hint { position:absolute; inset-block-start:14px; inset-inline-start:16px; font-size:9px; color:rgba(255,255,255,.42); }
@media (prefers-reduced-motion: no-preference){
  .pains-grid .pain-b-cine.healed .ps-metric { animation:psPop .6s cubic-bezier(.2,1.4,.5,1) both; }
  @keyframes psPop { 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.08);} 100%{ transform:scale(1); opacity:1;} }
}

/* Echo discoverability — invite chip on each pain card + section hint */
.pains-grid .pain-b-cine .pain-solve-chip { position:absolute; z-index:15; inset-block-start:14px; inset-inline-start:14px; font-size:9px; color:var(--accent); background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.3); border-radius:999px; padding:3px 9px; pointer-events:none; transition:opacity .3s; box-shadow:0 0 12px rgba(57,255,20,.12); }
.pains-grid .pain-b-cine:hover .pain-solve-chip, .pains-grid .pain-b-cine.healed .pain-solve-chip { opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .pains-grid .pain-b-cine .pain-solve-chip { animation:solveChip 2.4s ease-in-out infinite; }
  @keyframes solveChip { 0%,100%{ transform:translateX(0); opacity:.85; } 50%{ transform:translateX(-3px); opacity:1; } }
}
.pain-hint { margin:14px 0 0; font-size:11px; letter-spacing:.06em; color:var(--accent); opacity:.72; }

/* ============================================================
   SOLUTION MOCKUPS v3 (2026-07-24) — rebuilt to the pain-mockup
   tier: device frames, sequenced beats, premium material, green
   benefit emphasis. Motion gated; static fallback reads.
   ============================================================ */

/* 1 — FREE: 149/mo struck out -> 0 forever + feature chips */
.sviz-free2 { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:radial-gradient(circle at 50% 40%, rgba(57,255,20,.12), transparent 66%) !important; }
.svf3-price { display:flex; align-items:center; gap:9px; }
.svf3-old { position:relative; font-family:var(--fm); font-weight:700; font-size:16px; color:rgba(255,255,255,.42); }
.svf3-old span { font-size:8px; }
.svf3-old::after { content:""; position:absolute; inset-inline:-3px; inset-block-start:52%; height:2.5px; border-radius:2px; background:linear-gradient(90deg,#ff9f0a,#ff5b52); box-shadow:0 0 8px rgba(255,90,60,.6); transform:scaleX(0); transform-origin:right; }
.svf3-arrow { font-size:14px; color:var(--accent); opacity:0; transform:translateX(6px); }
.svf3-new { font-family:var(--fm); font-weight:900; font-size:42px; color:#5bff42; text-shadow:0 0 34px rgba(57,255,20,.65); line-height:1; opacity:0; transform:scale(.7); }
.svf3-forever { font-family:var(--fm); font-size:9.5px; font-weight:800; letter-spacing:.06em; color:#021004; background:linear-gradient(180deg,#7fff5a,var(--accent)); border-radius:999px; padding:2px 12px; box-shadow:0 0 16px rgba(57,255,20,.4); opacity:0; }
.svf3-checks { display:flex; gap:5px; opacity:0; }
.svf3-chk { font-family:var(--fm); font-size:7.5px; font-weight:700; color:#eafff0; background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.3); border-radius:999px; padding:2px 7px; }
@media (prefers-reduced-motion: no-preference){
  .svf3-old::after { animation:sf3Strike 4.2s ease-in-out infinite; }
  @keyframes sf3Strike { 0%,20%{ transform:scaleX(0);} 30%,100%{ transform:scaleX(1);} }
  .svf3-arrow { animation:sf3Arrow 4.2s ease-in-out infinite; }
  @keyframes sf3Arrow { 0%,26%{ opacity:0; transform:translateX(6px);} 38%,100%{ opacity:1; transform:none;} }
  .svf3-new { animation:sf3New 4.2s ease-in-out infinite; }
  @keyframes sf3New { 0%,30%{ opacity:0; transform:scale(.7);} 44%{ opacity:1; transform:scale(1.06);} 52%,100%{ opacity:1; transform:scale(1);} }
  .svf3-forever { animation:sf3For 4.2s ease-in-out infinite; }
  @keyframes sf3For { 0%,44%{ opacity:0; transform:translateY(5px);} 56%,100%{ opacity:1; transform:none;} }
  .svf3-checks { animation:sf3Chk 4.2s ease-in-out infinite; }
  @keyframes sf3Chk { 0%,56%{ opacity:0; transform:translateY(6px);} 68%,100%{ opacity:1; transform:none;} }
}
@media (prefers-reduced-motion: reduce){ .svf3-new,.svf3-forever,.svf3-checks,.svf3-arrow{ opacity:1; transform:none; } .svf3-old::after{ transform:scaleX(1);} }

/* 2 — MAP: live radar, your pin, client pins blink in, new-client toast */
.sviz-map2 { background-image:linear-gradient(rgba(57,255,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.05) 1px, transparent 1px); background-size:18px 18px; }
.sviz-map2::after { content:""; position:absolute; inset:0; z-index:1; background:conic-gradient(from 0deg at 46% 52%, rgba(57,255,20,.16), transparent 22%); -webkit-mask:radial-gradient(circle at 46% 52%, #000 0, #000 52%, transparent 58%); mask:radial-gradient(circle at 46% 52%, #000 0, #000 52%, transparent 58%); }
.svm-pin { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:#5bff42; box-shadow:0 0 8px rgba(57,255,20,.6); }
.svm-pin.you { top:50%; inset-inline-start:44%; width:13px; height:13px; box-shadow:0 0 0 4px rgba(57,255,20,.2), 0 0 12px rgba(57,255,20,.85); }
.svm-pin.c1 { top:26%; inset-inline-start:24%; opacity:0; }
.svm-pin.c2 { top:64%; inset-inline-start:66%; opacity:0; }
.svm-pin.c3 { top:72%; inset-inline-start:30%; opacity:0; }
.svm-toast { position:absolute; z-index:3; inset-block-start:11px; inset-inline-end:10px; display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:9px; background:linear-gradient(180deg, rgba(20,32,22,.96), rgba(10,16,11,.96)); box-shadow:0 0 0 1px rgba(57,255,20,.28), 0 10px 22px rgba(0,0,0,.5); opacity:0; }
.svm-toast-t { font-family:var(--fh); font-size:8px; color:#eafff0; }
.svm-toast b { font-family:var(--fm); font-size:9px; color:var(--accent); }
.svm-count { position:absolute; z-index:3; inset-block-end:10px; inset-inline-start:12px; font-family:var(--fm); font-size:9px; color:var(--accent); font-weight:700; }
@media (prefers-reduced-motion: no-preference){
  .sviz-map2::after { animation:svmRadar 3s linear infinite; }
  @keyframes svmRadar { to{ transform:rotate(360deg);} }
  .svm-pin.you { animation:svmYou 2.2s ease-in-out infinite; }
  @keyframes svmYou { 0%,100%{ box-shadow:0 0 0 4px rgba(57,255,20,.2), 0 0 12px rgba(57,255,20,.85);} 50%{ box-shadow:0 0 0 8px rgba(57,255,20,0), 0 0 16px rgba(57,255,20,1);} }
  .svm-pin.c1 { animation:svmBlink 4s ease-in-out infinite; }
  .svm-pin.c2 { animation:svmBlink 4s ease-in-out .5s infinite; }
  .svm-pin.c3 { animation:svmBlink 4s ease-in-out 1s infinite; }
  @keyframes svmBlink { 0%,15%{ opacity:0; transform:scale(.4);} 25%,92%{ opacity:1; transform:scale(1);} 100%{ opacity:0;} }
  .svm-toast { animation:svmToast 4s ease-in-out infinite; }
  @keyframes svmToast { 0%,40%{ opacity:0; transform:translateY(-6px);} 52%,88%{ opacity:1; transform:none;} 100%{ opacity:0;} }
}

/* 3 — WHATSAPP: mini phone chat, reminder -> confirm -> 0 no-shows */
.sviz-wa2 { display:flex; flex-direction:column; padding:8px 10px !important; gap:6px; }
.swa2-fr { flex:1; border-radius:10px; overflow:hidden; background:#0b141a; border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.swa2-hdr { display:flex; align-items:center; gap:6px; padding:5px 7px; background:#1f2c33; }
.swa2-av { width:15px; height:15px; border-radius:50%; background:linear-gradient(135deg,#25d366,#0a7a52); flex:none; }
.swa2-hdr b { flex:1; font-size:8px; color:#e9edef; }
.swa2-live { width:6px; height:6px; border-radius:50%; background:#25d366; box-shadow:0 0 6px #25d366; }
.swa2-body { flex:1; display:flex; flex-direction:column; gap:3px; padding:6px; justify-content:center; }
.swa2-bub { max-width:88%; font-size:8px; padding:4px 7px; border-radius:8px; opacity:0; }
.swa2-bub.out { align-self:flex-end; background:#005c4b; color:#e9edef; }
.swa2-bub.in { align-self:flex-start; background:#202c33; color:#e9edef; }
.swa2-bub.in b { color:#39ff14; }
.swa2-res { text-align:center; font-family:var(--fm); font-size:9px; font-weight:700; color:var(--accent); opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .swa2-bub.b1 { animation:swa2Bub 5s ease-in-out infinite; }
  .swa2-bub.b2 { animation:swa2Bub 5s ease-in-out .9s infinite; }
  .swa2-bub.b3 { animation:swa2Bub 5s ease-in-out 1.9s infinite; }
  @keyframes swa2Bub { 0%{ opacity:0; transform:translateY(5px);} 8%{ opacity:1; transform:none;} 90%{ opacity:1;} 97%{ opacity:0;} }
  .swa2-res { animation:swa2Res 5s ease-in-out infinite; }
  @keyframes swa2Res { 0%,52%{ opacity:0;} 64%,92%{ opacity:1;} 100%{ opacity:0;} }
}

/* 4 — CALENDAR: day fills itself, occupancy climbs, auto-close */
.sviz-cal2 { display:flex; flex-direction:column; padding:10px !important; gap:6px; }
.svcal-hdr { display:flex; align-items:center; justify-content:space-between; }
.svcal-hdr b { font-size:9.5px; color:#fff; letter-spacing:-.1px; }
.svcal-live { font-family:var(--fm); font-size:7.5px; font-weight:800; color:var(--accent); display:inline-flex; align-items:center; gap:3px; letter-spacing:.02em; }
.svcal-bar { position:relative; height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.svcal-bar-fill { position:absolute; inset-block:0; inset-inline-start:0; width:92%; border-radius:999px; background:linear-gradient(90deg,#0a7a52,var(--accent)); box-shadow:0 0 10px rgba(57,255,20,.5); }
.svcal-bar-pct { position:absolute; inset-block-start:-1px; inset-inline-end:4px; font-size:7px; font-weight:800; color:#021004; }
.svcal-rows { display:flex; flex-direction:column; gap:4px; }
.svcal-row { display:flex; align-items:center; gap:6px; font-size:8.5px; padding:4px 7px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.svcal-row i { font-family:var(--fm); font-style:normal; color:rgba(255,255,255,.5); }
.svcal-row .svcal-av { width:14px; height:14px; border-radius:50%; flex:none; }
.svcal-row .svcal-av.a1 { background:linear-gradient(135deg,#4a9eff,#1a5); }
.svcal-row .svcal-av.a2 { background:linear-gradient(135deg,#a479ff,#5a2e9e); }
.svcal-row .svcal-av.a3 { background:linear-gradient(135deg,#ffb020,#e8600c); }
.svcal-row b { color:#fff; flex:1; }
.svcal-row em { font-family:var(--fm); font-style:normal; font-size:7px; color:rgba(255,255,255,.42); }
.svcal-new { display:inline-flex; align-items:center; gap:5px; align-self:stretch; justify-content:center; margin-block-start:1px; padding:4px 8px; border-radius:7px; font-family:var(--fm); font-size:8px; font-weight:700; color:var(--accent); background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.28); opacity:0; }
.svcal-new i { font-style:normal; color:#fff; }
.svcal-new-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); flex:none; }
@media (prefers-reduced-motion: no-preference){
  .svcal-bar-fill { width:0; animation:svcalBar 5s ease-in-out infinite; }
  @keyframes svcalBar { 0%,6%{ width:0;} 40%,90%{ width:92%;} 100%{ width:0;} }
  .svcal-row { animation:svcalFill 5s ease-in-out infinite; }
  .svcal-row.f2 { animation-delay:.5s; }
  .svcal-row.f3 { animation-delay:1s; }
  @keyframes svcalFill { 0%,8%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); } 20%,100%{ background:rgba(57,255,20,.1); border-color:rgba(57,255,20,.3); } }
  .svcal-row .svcal-av, .svcal-row b, .svcal-row em { animation:svcalName 5s ease-in-out infinite; opacity:0; }
  .svcal-row.f2 .svcal-av, .svcal-row.f2 b, .svcal-row.f2 em { animation-delay:.5s; }
  .svcal-row.f3 .svcal-av, .svcal-row.f3 b, .svcal-row.f3 em { animation-delay:1s; }
  @keyframes svcalName { 0%,8%{ opacity:0; transform:translateX(-4px);} 20%,100%{ opacity:1; transform:none;} }
  .svcal-live { animation:svcalBlink 1.6s ease-in-out infinite; }
  @keyframes svcalBlink { 0%,100%{ opacity:1;} 50%{ opacity:.45;} }
  .svcal-new { animation:svcalNew 5s ease-in-out infinite; }
  @keyframes svcalNew { 0%,52%{ opacity:0; transform:translateY(5px);} 62%,92%{ opacity:1; transform:none;} 100%{ opacity:0;} }
}

/* 5 — URL: browser types your address, profile card loads */
.sviz-url2 { display:flex; flex-direction:column; padding:9px 10px !important; gap:7px; justify-content:center; }
.svu2-bar { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.svu2-dots { display:flex; gap:3px; }
.svu2-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); }
.svu2-url { font-family:var(--fm); font-size:9px; color:rgba(255,255,255,.72); }
.svu2-url b { color:var(--accent); }
.svu2-caret { display:inline-block; width:1px; height:9px; background:var(--accent); margin-inline-start:1px; vertical-align:middle; }
.svu2-profile { position:relative; display:flex; flex-direction:column; gap:7px; padding:8px; padding-block-start:22px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(57,255,20,.18); overflow:hidden; opacity:0; }
.svu2-cover { position:absolute; inset-block-start:0; inset-inline:0; height:18px; background:linear-gradient(90deg, rgba(57,255,20,.3), rgba(57,255,20,.08)); }
.svu2-badge { position:absolute; inset-block-start:4px; inset-inline-start:7px; z-index:2; font-family:var(--fm); font-size:7px; font-weight:800; color:#021004; background:#eafff0; border-radius:999px; padding:1px 6px; }
.svu2-head { display:flex; align-items:center; gap:8px; z-index:1; }
.svu2-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#2ee6a0,#0a7a52); border:2px solid #0e1710; flex:none; }
.svu2-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.svu2-info b { font-size:9.5px; color:#fff; }
.svu2-stars { font-size:8px; color:#ffcf5a; letter-spacing:.5px; }
.svu2-book { font-family:var(--fm); font-size:8px; font-weight:700; color:#021004; background:var(--accent); border-radius:999px; padding:3px 10px; flex:none; }
.svu2-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.svu2-th { height:22px; border-radius:6px; background:linear-gradient(135deg, rgba(57,255,20,.16), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.06); }
.svu2-th.t2 { background:linear-gradient(135deg, rgba(74,158,255,.16), rgba(255,255,255,.05)); }
.svu2-th.t3 { background:linear-gradient(135deg, rgba(164,121,255,.16), rgba(255,255,255,.05)); }
.svu2-th.t4 { background:linear-gradient(135deg, rgba(255,176,32,.16), rgba(255,255,255,.05)); }
@media (prefers-reduced-motion: no-preference){
  .svu2-caret { animation:svu-blink 1s step-end infinite; }
  .svu2-profile { animation:svu2Card 4.4s ease-in-out infinite; }
  @keyframes svu2Card { 0%,42%{ opacity:0; transform:translateY(8px);} 56%,100%{ opacity:1; transform:none;} }
  .svu2-book { animation:svu2Book 4.4s ease-in-out infinite; }
  @keyframes svu2Book { 0%,60%{ box-shadow:0 0 0 0 rgba(57,255,20,0);} 70%{ box-shadow:0 0 14px rgba(57,255,20,.6);} 82%,100%{ box-shadow:0 0 0 0 rgba(57,255,20,0);} }
}
@media (prefers-reduced-motion: reduce){ .svu2-profile{ opacity:1; } }

/* 6 — AI: composer types a caption, a post is generated */
.sviz-ai2 { display:flex; flex-direction:column; padding:9px 10px !important; gap:6px; justify-content:center; }
.svai-bar { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:8px; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.18); }
.svai-spark { color:var(--accent); font-size:11px; }
.svai-type { font-size:9px; color:#fff; overflow:hidden; white-space:nowrap; border-inline-end:2px solid var(--accent); width:0; }
.svai-post { display:flex; align-items:center; gap:7px; padding:6px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); opacity:0; }
.svai-img { width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg, rgba(57,255,20,.34), rgba(255,255,255,.06)); flex:none; }
.svai-cap { flex:1; display:flex; flex-direction:column; gap:4px; }
.svai-cap b { height:6px; width:70%; border-radius:3px; background:rgba(255,255,255,.35); }
.svai-cap i { height:5px; width:45%; border-radius:3px; background:rgba(255,255,255,.2); }
.svai-pub { font-family:var(--fm); font-size:8px; font-weight:700; color:#021004; background:var(--accent); border-radius:999px; padding:3px 8px; }
@media (prefers-reduced-motion: no-preference){
  .svai-type { animation:sva-typing 5s steps(22) infinite; }
  .svai-post { animation:svaiPost 5s ease-in-out infinite; }
  @keyframes svaiPost { 0%,50%{ opacity:0; transform:translateY(6px);} 64%,92%{ opacity:1; transform:none;} 100%{ opacity:0;} }
}

/* 7 — FEED: a real post, likes climbing, weekly-barber crown */
.sviz-feed2 { display:flex; flex-direction:column; gap:6px; padding:8px !important; }
/* story ring row */
.svfd-stories { display:flex; gap:6px; padding-inline:2px; }
.svfd-st { width:20px; height:20px; border-radius:50%; flex:none; padding:2px; background:conic-gradient(from 0deg,#39ff14,#4a9eff,#a479ff,#39ff14); }
.svfd-st::after { content:""; display:block; width:100%; height:100%; border-radius:50%; background:#161616; border:1.5px solid #161616; }
.svfd-st.s1::after { background:linear-gradient(135deg,#2ee6a0,#0a7a52); }
.svfd-st.s2::after { background:linear-gradient(135deg,#4a9eff,#1a5); }
.svfd-st.s3::after { background:linear-gradient(135deg,#ffb020,#e8600c); }
.svfd-st.s4::after { background:linear-gradient(135deg,#a479ff,#5a2e9e); }
.svfd-post { width:100%; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.svfd-hdr { display:flex; align-items:center; gap:6px; padding:6px 8px; }
.svfd-av { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#2ee6a0,#0a7a52); flex:none; }
.svfd-hdr b { flex:1; font-size:9px; color:#fff; display:inline-flex; align-items:center; gap:3px; }
.svfd-verif { width:11px; height:11px; border-radius:50%; background:var(--accent); color:#021004; font-size:7px; font-weight:900; display:inline-grid; place-items:center; }
.svfd-crown { font-family:var(--fm); font-size:7px; color:#021004; background:linear-gradient(135deg,#ffe08a,#ffb020); border-radius:999px; padding:2px 6px; box-shadow:0 0 10px rgba(255,176,32,.4); opacity:0; white-space:nowrap; }
.svfd-img { display:block; height:52px; background:linear-gradient(135deg, rgba(57,255,20,.2), rgba(74,158,255,.12), rgba(255,255,255,.05)); position:relative; overflow:hidden; }
.svfd-img::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.24) 50%, transparent 60%); transform:translateX(-120%); }
.svfd-burst { position:absolute; inset-block-start:50%; inset-inline-start:50%; transform:translate(-50%,-50%) scale(0); font-size:20px; color:#ff5b7a; text-shadow:0 0 14px rgba(255,91,122,.7); opacity:0; }
.svfd-act { display:flex; align-items:center; gap:8px; padding:5px 8px; }
.svfd-like { font-family:var(--fm); font-size:10px; color:#ff5b7a; font-weight:800; }
.svfd-cmt { font-family:var(--fm); font-size:8px; color:rgba(255,255,255,.5); }
.svfd-rev { display:flex; align-items:center; gap:5px; padding:0 8px 7px; }
.svfd-rev-st { color:#ffb020; font-size:8px; letter-spacing:1px; text-shadow:0 0 8px rgba(255,176,32,.4); }
.svfd-rev em { font-family:var(--fm); font-style:normal; font-size:7.5px; color:rgba(255,255,255,.55); }
@media (prefers-reduced-motion: no-preference){
  .svfd-crown { animation:svfdCrown 4s ease-in-out infinite; }
  @keyframes svfdCrown { 0%,24%{ opacity:0; transform:scale(.5);} 34%,86%{ opacity:1; transform:scale(1);} 96%,100%{ opacity:0;} }
  .svfd-img::after { animation:svf-shine 3.4s ease-in-out infinite; }
  .svfd-like { animation:svf-heart 2.6s ease-in-out infinite; }
  .svfd-burst { animation:svfdBurst 4s ease-in-out infinite; }
  @keyframes svfdBurst { 0%,40%{ opacity:0; transform:translate(-50%,-50%) scale(0);} 48%{ opacity:1; transform:translate(-50%,-50%) scale(1.15);} 60%,100%{ opacity:0; transform:translate(-50%,-50%) scale(1.4);} }
  .svfd-st { animation:svfdStory 5s ease-in-out infinite; }
  .svfd-st.s2 { animation-delay:.3s; } .svfd-st.s3 { animation-delay:.6s; } .svfd-st.s4 { animation-delay:.9s; }
  @keyframes svfdStory { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
}

/* 8 — CHIKO: assistant typing then a rich done reply + action chips */
.sviz-chiko2 { display:flex; flex-direction:column; padding:10px !important; gap:7px; justify-content:center; }
.svk2-row { display:flex; align-items:flex-start; gap:8px; }
.svk2-av { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #5bff42, #0a7a52); color:#021004; display:grid; place-items:center; font-size:15px; flex:none; box-shadow:0 0 14px rgba(57,255,20,.5); }
.svk2-msg { flex:1; display:flex; flex-direction:column; }
.svk2-typing { align-self:flex-start; display:inline-flex; gap:3px; padding:5px 8px; background:rgba(255,255,255,.06); border-radius:8px; }
.svk2-typing i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
.svk2-txt { font-size:10px; color:#fff; background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.2); border-radius:10px; padding:6px 9px; opacity:0; }
.svk2-txt b { color:var(--accent); }
.svk2-chips { display:flex; gap:6px; opacity:0; }
.svk2-chips span { font-family:var(--fm); font-size:8px; color:var(--accent); background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.28); border-radius:999px; padding:3px 8px; }
@media (prefers-reduced-motion: no-preference){
  .svk2-av { animation:svk-bob 2.4s ease-in-out infinite; }
  .svk2-typing { animation:svk2Typ 4.5s ease-in-out infinite; }
  @keyframes svk2Typ { 0%,40%{ opacity:1;} 52%,100%{ opacity:0;} }
  .svk2-typing i { animation:pvizTyp 1s ease-in-out infinite; }
  .svk2-typing i:nth-child(2){ animation-delay:.15s; }
  .svk2-typing i:nth-child(3){ animation-delay:.3s; }
  .svk2-txt { animation:svk2Txt 4.5s ease-in-out infinite; }
  @keyframes svk2Txt { 0%,44%{ opacity:0; transform:translateY(5px);} 56%,92%{ opacity:1; transform:none;} 100%{ opacity:0;} }
  .svk2-chips { animation:svk2Chips 4.5s ease-in-out infinite; }
  @keyframes svk2Chips { 0%,62%{ opacity:0; transform:translateY(5px);} 74%,92%{ opacity:1; transform:none;} 100%{ opacity:0;} }
}

/* 9 — WAITLIST: a cancel frees a slot, #1 is pinged, the gap fills */
.sviz-wait2 { display:flex; flex-direction:column; padding:10px !important; gap:6px; justify-content:center; }
.svw2-flow { display:flex; flex-direction:column; gap:5px; position:relative; }
/* connecting rail down the right (RTL) edge of the steps */
.svw2-step { position:relative; display:flex; align-items:center; gap:7px; font-size:9.5px; padding:6px 9px; border-radius:9px; border:1px solid; }
.svw2-step i { font-family:var(--fm); font-style:normal; }
.svw2-step b { flex:1; }
.svw2-ic { width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:900; flex:none; }
.svw2-step.s1 { background:rgba(255,59,48,.1); border-color:rgba(255,59,48,.3); color:#ff8f88; }
.svw2-step.s1 b { text-decoration:line-through; }
.svw2-ic.bad { background:rgba(255,59,48,.2); color:#ff8f88; }
.svw2-step.s2 { background:rgba(57,255,20,.07); border-color:rgba(57,255,20,.24); color:#eafff0; opacity:0; }
.svw2-step.s2 em { font-family:var(--fm); font-style:normal; font-size:7.5px; color:var(--accent); }
.svw2-ic.ping { background:var(--accent); box-shadow:0 0 0 0 rgba(57,255,20,.6); }
.svw2-step.s3 { background:rgba(57,255,20,.13); border-color:rgba(57,255,20,.4); color:#eafff0; opacity:0; }
.svw2-ic.ok { background:var(--accent); color:#021004; }
.svw2-tag { font-family:var(--fm); font-size:7px; font-weight:800; color:#021004; background:var(--accent); border-radius:999px; padding:1px 7px; flex:none; }
@media (prefers-reduced-motion: no-preference){
  .svw2-ic.ping { animation:svw2PingDot 1.4s ease-out infinite; }
  @keyframes svw2PingDot { 0%{ box-shadow:0 0 0 0 rgba(57,255,20,.6);} 100%{ box-shadow:0 0 0 7px rgba(57,255,20,0);} }
  .svw2-step.s2 { animation:svw2S2 4.6s ease-in-out infinite; }
  @keyframes svw2S2 { 0%,26%{ opacity:0; transform:translateX(-5px);} 38%,100%{ opacity:1; transform:none;} }
  .svw2-step.s3 { animation:svw2S3 4.6s ease-in-out infinite; }
  @keyframes svw2S3 { 0%,56%{ opacity:0; transform:translateY(6px) scale(.96);} 68%,100%{ opacity:1; transform:none;} }
}
@media (prefers-reduced-motion: reduce){ .svw2-step.s2,.svw2-step.s3{ opacity:1; } }

/* ============================================================
   FAQ — premium accordion (2026-07-24): glass items, rotating
   +/x, accent number chip, hover/open glow.
   ============================================================ */
.faq { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq .faq-item { position:relative; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.24); overflow:hidden; transition:border-color .3s, box-shadow .3s, background .3s; }
.faq .faq-item:hover { border-color:rgba(57,255,20,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(57,255,20,.1); }
.faq .faq-item[open] { border-color:rgba(57,255,20,.3); background:linear-gradient(180deg, rgba(57,255,20,.05), rgba(255,255,255,.015)); }
.faq .faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; font-family:var(--fh); }
.faq .faq-item summary::-webkit-details-marker { display:none; }
.faq .faq-q-txt { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink); }
.faq .faq-q-n { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:11px; color:var(--accent); background:rgba(57,255,20,.1); border:1px solid rgba(57,255,20,.24); }
.faq .faq-item .plus { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:18px; line-height:1; color:var(--accent); background:rgba(57,255,20,.08); border:1px solid rgba(57,255,20,.22); transition:transform .3s cubic-bezier(.2,.9,.25,1), background .3s, color .3s; }
.faq .faq-item[open] .plus { transform:rotate(135deg); background:var(--accent); color:#021004; }
.faq .faq-item .ans { padding:0 58px 18px 20px; color:rgba(255,255,255,.62); font-size:14px; line-height:1.62; }
@media (prefers-reduced-motion: no-preference){
  .faq .faq-item[open] .ans { animation:faqAns .4s ease both; }
  @keyframes faqAns { from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
}

/* ============================================================
   STEPS3 — premium step cards (2026-07-24): glass, gradient
   number tiles, accent connectors, hover lift.
   ============================================================ */
.steps3 .steps3-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:900px; margin-inline:auto; }
@media (max-width:768px){ .steps3 .steps3-grid { grid-template-columns:1fr; gap:22px; } }
.steps3 .step3 { position:relative; text-align:center; padding:32px 22px 26px; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.3); transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; overflow:visible; }
.steps3 .step3::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; border-radius:20px 20px 0 0; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.steps3 .step3:hover { transform:translateY(-6px); border-color:rgba(57,255,20,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(57,255,20,.12); }
.steps3 .step3-n { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; border-radius:16px; font-family:var(--fm); font-weight:800; font-size:26px; color:#021004; background:linear-gradient(180deg,#5bff42,var(--accent)); box-shadow:0 0 26px rgba(57,255,20,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.steps3 .step3 h3 { font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin:0 0 8px; }
.steps3 .step3 p { font-size:14px; color:rgba(255,255,255,.6); line-height:1.55; margin:0; }
.steps3 .step3-arrow { position:absolute; inset-block-start:44px; inset-inline-start:-16px; z-index:3; font-family:var(--fm); font-size:22px; color:var(--accent); opacity:.55; }
@media (max-width:768px){ .steps3 .step3-arrow { inset-block-start:auto; inset-block-end:-18px; inset-inline-start:50%; transform:translateX(-50%) rotate(-90deg); } }
@media (prefers-reduced-motion: no-preference){
  .steps3 .step3-arrow { animation:step3Arrow 2.4s ease-in-out infinite; }
  @keyframes step3Arrow { 0%,100%{ transform:translateX(0); opacity:.45; } 50%{ transform:translateX(-4px); opacity:.85; } }
  @media (max-width:768px){ .steps3 .step3-arrow { animation:none; } }
}

/* ============================================================
   PAIN + CHIPS refinements (2026-07-24): full-width WA home,
   client "לקוח" tags, sharper 02/03/04 losses, sales chips,
   premium relief line. Echo removed.
   ============================================================ */

/* 01 — WhatsApp home now fills the FULL width of the mockup (no phone bezel) */
.pviz-phone { display:block !important; align-items:initial !important; justify-content:initial !important; }
.pviz-phone .pviz-ph { width:100% !important; height:100% !important; border:none; border-radius:14px; box-shadow:none; }
.wal-mid b .wal-tag { display:inline-block; font-family:var(--fm); font-size:6.5px; font-weight:600; font-style:normal; color:rgba(255,255,255,.42); background:rgba(255,255,255,.09); border-radius:4px; padding:0 4px; margin-inline-start:4px; vertical-align:middle; }

/* 02 — loss shows the day total + the monthly projection */
.cnc-loss { display:flex; align-items:center; justify-content:space-between; padding:7px 11px; }
.cnc-loss-l { display:flex; flex-direction:column; }
.cnc-loss-l .cnc-amt { font-size:17px; line-height:1; }
.cnc-loss-l span { font-size:8px; color:rgba(255,255,255,.55); margin-block-start:2px; }
.cnc-loss-mo { font-family:var(--fm); font-size:10.5px; color:#ff8f88; font-weight:700; }

/* 03 — no toggle; a loud red 2000/yr loss banner (bill = 170/mo) */
.exp-bill-end em { color:rgba(255,143,136,.85) !important; background:none !important; padding:0 !important; }
.exp-loss { display:flex; align-items:center; justify-content:space-between; margin-block-start:3px; padding:8px 11px; border-radius:10px; background:rgba(255,59,48,.12); border:1px solid rgba(255,59,48,.36); }
.exp-loss > span { font-size:9px; color:rgba(255,255,255,.62); }
.exp-loss b { font-family:var(--fm); font-size:16px; font-weight:800; color:#ff5b52; }
@media (prefers-reduced-motion: no-preference){ .exp-loss { animation:expBillPulse 2.2s ease-in-out infinite; } }

/* 04 — brutal ratio: 4 family · 0 clients */
.viw-verdict { display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.viw-v { display:flex; align-items:baseline; gap:5px; font-size:9px; color:rgba(255,255,255,.55); }
.viw-v b { font-family:var(--fm); font-size:16px; font-weight:800; }
.viw-v.fam b { color:#fff; }
.viw-v.cli { color:#ff8f88; }
.viw-v.cli b { color:#ff5b52; }
.viw-v-sep { color:rgba(255,255,255,.28); }

/* premium relief line — the short solution teaser on each pain card */
.pains-grid .pain-b-cine .pain-b-fix { font-weight:700; }
.pains-grid .pain-b-cine .pain-b-fix .pb-g { color:#021004; background:var(--accent); width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:900; box-shadow:0 0 10px rgba(57,255,20,.5); flex:none; }

/* ── the 3 sales-argument chips (premium glass, reused across the page) ── */
.sell-chips { display:flex; flex-wrap:wrap; gap:10px; margin-block-start:22px; }
.sell-chips.compact { margin-block-start:0; }
.sell-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-family:var(--fh); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.sell-chip .sc-ico { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(57,255,20,.12); border:1px solid rgba(57,255,20,.3); color:var(--accent); font-family:var(--fm); font-weight:800; font-size:13px; flex:none; }
.sell-chip .sc-tx b { color:var(--accent); font-family:var(--fm); }
.sell-chip.hot { position:relative; overflow:hidden; border-color:rgba(57,255,20,.4); background:linear-gradient(180deg, rgba(57,255,20,.14), rgba(57,255,20,.05)); color:#eafff0; }
.sell-chip.hot .sc-tx b { color:#5bff42; }
.sell-chip.hot .sc-ico { background:var(--accent); border-color:var(--accent); color:#021004; box-shadow:0 0 14px rgba(57,255,20,.5); }
.sc-ico-sciss { background:var(--accent) !important; border-color:var(--accent) !important; }
.sc-shine { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform:translateX(-120%); }
@media (prefers-reduced-motion: no-preference){
  .sell-chip.hot .sc-shine { animation:svizShine 3.6s ease-in-out infinite; }
  .sell-chip.hot { animation:chipPulse 2.6s ease-in-out infinite; }
  @keyframes chipPulse { 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(57,255,20,.16), 0 0 0 1px rgba(57,255,20,.14); } 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(57,255,20,.3), 0 0 0 1px rgba(57,255,20,.28); } }
}
@media (max-width:768px){ .sell-chip { font-size:12px; padding:7px 12px; } }

/* 04 — compact the story-views so the "4 family / 0 clients" verdict fits */
.pviz-silent .viw { gap:4px; }
.pviz-silent .viw-story { padding:4px 7px; }
.pviz-silent .viw-story-img { width:22px; height:28px; }
.pviz-silent .viw-list { gap:2px; }
.pviz-silent .viw-row { gap:6px; }
.pviz-silent .viw-av { width:15px; height:15px; }
.pviz-silent .viw-row b { font-size:8.5px; }
.pviz-silent .viw-rel { font-size:7px; }
.pviz-silent .viw-verdict { padding:4px 9px; }
.pviz-silent .viw-verdict .viw-v b { font-size:14px; }

/* ============================================================
   SOLVE BRIDGE (2026-07-24) — the pain->solution pivot. The burned
   money flips to money-BACK + the grant; the 4 pains echo as green
   gains that light up on scroll. Premium, branded, reduced-motion safe.
   ============================================================ */
.solve-bridge { max-width:780px; margin:0 auto; padding:26px 24px 10px; text-align:center; }
.solve-bridge .sb-cut { display:flex; align-items:center; justify-content:center; gap:16px; margin-block-end:26px; }
.solve-bridge .sb-cut-line { flex:1; height:0; border-top:1px dashed rgba(255,255,255,.16); }
.solve-bridge .sb-cut-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.24); box-shadow:0 0 20px rgba(57,255,20,.14); }
.solve-bridge .sb-kicker { display:block; margin-block-end:12px; color:var(--accent); }
.solve-bridge .sb-flip { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.solve-bridge .sb-old { font-family:var(--fm); font-weight:800; font-size:clamp(22px,5.5vw,36px); color:rgba(255,91,82,.5); text-decoration:line-through; text-decoration-color:rgba(255,59,48,.7); }
.solve-bridge .sb-into { font-family:var(--fm); font-size:24px; color:rgba(255,255,255,.28); }
.solve-bridge .sb-new { font-family:var(--fm); font-weight:800; font-size:clamp(40px,10vw,72px); color:#5bff42; letter-spacing:-.03em; text-shadow:0 0 42px rgba(57,255,20,.5); line-height:1; }
.solve-bridge .sb-sub { margin:14px 0 0; font-size:clamp(15px,3.4vw,20px); color:var(--ink-2); }
.solve-bridge .sb-sub b { color:var(--ink); }
.solve-bridge .sb-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-block-start:26px; }
.solve-bridge .sb-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(57,255,20,.08), rgba(57,255,20,.02)); border:1px solid rgba(57,255,20,.24); font-family:var(--fh); font-size:13px; color:#eafff0; opacity:0; transform:translateY(10px); }
.solve-bridge .sb-pill b { color:var(--accent); font-family:var(--fm); }
.solve-bridge .sb-ic { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#021004; font-size:11px; font-weight:900; flex:none; }
.solve-bridge .sb-pill.hot { border-color:rgba(57,255,20,.5); background:linear-gradient(180deg, rgba(57,255,20,.18), rgba(57,255,20,.05)); box-shadow:0 0 0 1px rgba(57,255,20,.2), 0 10px 26px rgba(57,255,20,.16); color:#fff; }
.solve-bridge .sb-lead { margin:24px 0 0; font-size:clamp(14px,3vw,17px); color:var(--ink-3); }
.solve-bridge .sb-lead b { color:var(--accent); }

/* static fallback — pills visible without motion */
.solve-bridge.go .sb-pill { opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .solve-bridge .sb-pill { transition:opacity .5s cubic-bezier(.2,.9,.25,1), transform .5s cubic-bezier(.2,.9,.25,1); }
  .solve-bridge.go .sb-pill.p1 { transition-delay:.15s; }
  .solve-bridge.go .sb-pill.p2 { transition-delay:.3s; }
  .solve-bridge.go .sb-pill.p3 { transition-delay:.45s; }
  .solve-bridge.go .sb-pill.p4 { transition-delay:.6s; }
  .solve-bridge.go .sb-pill.p5 { transition-delay:.8s; }
  .solve-bridge.go .sb-new { animation:sbNew .7s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes sbNew { 0%{ transform:scale(.7); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
  .solve-bridge.go .sb-cut-mark { animation:sbCut .8s cubic-bezier(.2,.9,.25,1) both; }
  @keyframes sbCut { 0%{ transform:rotate(-90deg) scale(.6); box-shadow:0 0 8px rgba(57,255,20,.1); } 60%{ transform:rotate(6deg) scale(1.08); box-shadow:0 0 30px rgba(57,255,20,.4); } 100%{ transform:rotate(0) scale(1); } }
  .solve-bridge.go .sb-pill.hot { animation:sbHot 2.6s ease-in-out .9s infinite; }
  @keyframes sbHot { 0%,100%{ box-shadow:0 0 0 1px rgba(57,255,20,.2), 0 10px 26px rgba(57,255,20,.16); } 50%{ box-shadow:0 0 0 1px rgba(57,255,20,.32), 0 12px 32px rgba(57,255,20,.3); } }
}
@media (max-width:768px){ .solve-bridge { padding:20px 18px 6px; } .solve-bridge .sb-pill { font-size:12px; padding:7px 12px; } }

/* ============================================================
   SolveBridge scissors-cut flip + pill spark-pop, and a MASSIVE
   SellChips upgrade (2026-07-24).
   ============================================================ */

/* #2 — the scissors blade CUTS the red loss into the green gain */
.solve-bridge .sb-flip { position:relative; }
.solve-bridge .sb-blade { display:grid; place-items:center; width:40px; height:40px; opacity:.55; }
.solve-bridge .sb-cutline { position:absolute; inset-inline:0; inset-block-start:50%; height:2px; transform:translateY(-50%) scaleX(0); background:linear-gradient(90deg, transparent, #39ff14, #eaffea, #39ff14, transparent); box-shadow:0 0 18px rgba(57,255,20,.75); opacity:0; pointer-events:none; }
.solve-bridge .sb-new { opacity:0; }
.solve-bridge.go .sb-new { opacity:1; }
.solve-bridge .sb-old { transition:opacity .5s ease; }
.solve-bridge.go .sb-old { opacity:.3; }
@media (prefers-reduced-motion: no-preference){
  .solve-bridge.go .sb-cutline { animation:sbCutline .6s ease-out both; }
  @keyframes sbCutline { 0%{ transform:translateY(-50%) scaleX(0); opacity:0; } 30%{ opacity:1; } 60%{ transform:translateY(-50%) scaleX(1); opacity:1; } 100%{ transform:translateY(-50%) scaleX(1); opacity:0; } }
  .solve-bridge.go .sb-blade { animation:sbBlade .6s ease-out both; }
  @keyframes sbBlade { 0%{ transform:scale(1) rotate(0); } 38%{ transform:scale(1.25) rotate(-15deg); } 60%{ transform:scale(1.25) rotate(15deg); } 100%{ transform:scale(1) rotate(0); } }
  .solve-bridge.go .sb-new { animation:sbNewPop .6s cubic-bezier(.2,1.3,.4,1) .5s both; }
  @keyframes sbNewPop { 0%{ opacity:0; transform:scale(.7); } 100%{ opacity:1; transform:scale(1); } }
}

/* #3 — each gain pill pops in with a spark ring */
.solve-bridge .sb-pill { position:relative; opacity:0; }
.solve-bridge.go .sb-pill { opacity:1; }
.solve-bridge .sb-pill::after { content:""; position:absolute; inset:-1px; border-radius:999px; border:1.5px solid rgba(57,255,20,.6); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .solve-bridge.go .sb-pill { animation:sbPillPop .5s cubic-bezier(.2,1.5,.4,1) both; }
  @keyframes sbPillPop { 0%{ opacity:0; transform:translateY(10px) scale(.88); } 62%{ opacity:1; transform:translateY(0) scale(1.07); } 100%{ transform:scale(1); } }
  .solve-bridge.go .sb-pill::after { animation:sbPillRing .55s ease-out both; }
  @keyframes sbPillRing { 0%{ opacity:.75; transform:scale(1); } 100%{ opacity:0; transform:scale(1.28); } }
  .solve-bridge.go .sb-pill.p1, .solve-bridge.go .sb-pill.p1::after { animation-delay:.15s; }
  .solve-bridge.go .sb-pill.p2, .solve-bridge.go .sb-pill.p2::after { animation-delay:.32s; }
  .solve-bridge.go .sb-pill.p3, .solve-bridge.go .sb-pill.p3::after { animation-delay:.49s; }
  .solve-bridge.go .sb-pill.p4, .solve-bridge.go .sb-pill.p4::after { animation-delay:.66s; }
  .solve-bridge.go .sb-pill.p5, .solve-bridge.go .sb-pill.p5::after { animation-delay:.86s; }
}

/* #4 — SellChips MASSIVE upgrade: bigger, tactile, animated, the grant chip dominant */
.sell-chips { gap:12px; }
.sell-chip { padding:11px 18px; font-size:14.5px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(0,0,0,.36); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.sell-chip:hover { transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 38px rgba(0,0,0,.46); }
.sell-chip .sc-ico { width:28px; height:28px; font-size:15px; background:linear-gradient(180deg, rgba(57,255,20,.18), rgba(57,255,20,.06)); border:1px solid rgba(57,255,20,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 14px rgba(57,255,20,.18); }
.sell-chip.hot { padding:12px 20px; font-size:15px; border-color:rgba(57,255,20,.55); background:linear-gradient(180deg, rgba(57,255,20,.2), rgba(57,255,20,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(57,255,20,.28), 0 14px 34px rgba(57,255,20,.22); transform:scale(1.05); }
.sell-chip.hot .sc-tx b { color:#7fff5a; }
.sell-chip.hot .sc-ico { background:linear-gradient(180deg,#7fff5a,var(--accent)); border-color:var(--accent); color:#021004; box-shadow:0 0 18px rgba(57,255,20,.6), inset 0 1px 0 rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference){
  .sell-chip .sc-ico { animation:scIco 2.6s ease-in-out infinite; }
  @keyframes scIco { 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 12px rgba(57,255,20,.16); } 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 20px rgba(57,255,20,.36); } }
  .sell-chip.hot { animation:scHot 2.8s ease-in-out infinite; }
  @keyframes scHot { 0%,100%{ transform:scale(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(57,255,20,.28), 0 14px 34px rgba(57,255,20,.22); } 50%{ transform:scale(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px rgba(57,255,20,.46), 0 18px 44px rgba(57,255,20,.38); } }
  .sell-chip.hot .sc-ico { animation:scCoin 3.4s ease-in-out infinite; }
  @keyframes scCoin { 0%,84%,100%{ transform:rotateY(0); } 92%{ transform:rotateY(180deg); } }
}
@media (max-width:768px){ .sell-chip.hot { transform:scale(1.02); } }

/* ============================================================
   SOLUTION MOCKUPS v4 (2026-07-24): a green result/payoff badge
   on each scene, client "First L." names, live/rating/slot bits.
   ============================================================ */
.sviz .sv-res { display:block; text-align:center; margin-block-start:5px; font-family:var(--fm); font-size:8.5px; font-weight:700; color:var(--accent); letter-spacing:.01em; opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .sviz .sv-res { animation:svRes 4.6s ease-in-out infinite; }
  @keyframes svRes { 0%,55%{ opacity:0; transform:translateY(3px); } 66%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
}
.sviz-map2 .svm-live { position:absolute; z-index:4; inset-block-start:9px; inset-inline-start:11px; font-family:var(--fm); font-size:8px; font-weight:800; color:#5bff42; text-shadow:0 0 8px rgba(57,255,20,.7); }
.sviz-url2 .svu2-stars em { color:#fff; font-family:var(--fm); font-size:8px; font-style:normal; margin-inline-start:3px; }
.sviz-feed2 .svfd-slot { font-family:var(--fm); font-size:8px; color:var(--accent); font-weight:700; }
.sviz-chiko2 .svk2-247 { color:#021004 !important; background:var(--accent) !important; border-color:var(--accent) !important; }

/* compact the scenes that now carry a result badge so it fits the 120px box */
.sol-card .sviz-free2 { gap:5px; }
.sol-card .sviz-wa2 { padding:6px 9px !important; gap:4px; }
.sol-card .sviz-wa2 .swa2-body { gap:2px; padding:5px; }
.sol-card .sviz-wa2 .swa2-bub { font-size:7.5px; padding:3px 6px; }
.sol-card .sviz-url2 { padding:7px 10px !important; gap:5px; }
.sol-card .sviz-url2 .svu2-profile { padding:7px; padding-block-start:14px; }
.sol-card .sviz-ai2 { padding:8px 10px !important; gap:5px; }
.sol-card .sviz-wait2 { padding:8px 10px !important; gap:4px; }
.sol-card .sviz-wait2 .svw2-step { padding:5px 8px; font-size:8.5px; }
.sol-card .sviz-url2 .svu2-gallery .svu2-th { height:18px; }

/* ============================================================
   BRANDING layer (2026-07-24): the HASAPAR scissors mark on EVERY
   section eyebrow + a scrolling brand ribbon of the official slogans.
   Green stays rare (the scissors IS the signature).
   ============================================================ */

/* scissors mark before every section kicker — page-wide brand presence */
.kicker::before {
  content:""; display:inline-block; width:12px; height:12px; margin-inline-end:7px; vertical-align:-1px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cline x1='8.6' y1='6' x2='19' y2='18' stroke-linecap='round'/%3E%3Cline x1='8.6' y1='18' x2='19' y2='6' stroke-linecap='round'/%3E%3Ccircle cx='14.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cline x1='8.6' y1='6' x2='19' y2='18' stroke-linecap='round'/%3E%3Cline x1='8.6' y1='18' x2='19' y2='6' stroke-linecap='round'/%3E%3Ccircle cx='14.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85; filter:drop-shadow(0 0 4px rgba(57,255,20,.4));
}

/* scrolling brand ribbon — official slogans + scissors separators */
.brand-ribbon { position:relative; overflow:hidden; padding-block:15px; margin-block:6px; border-block:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(57,255,20,.03), transparent 40%, transparent 60%, rgba(57,255,20,.03)); -webkit-mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.brand-ribbon .br-track { display:flex; align-items:center; gap:34px; width:max-content; }
.brand-ribbon .br-item { display:inline-flex; align-items:center; gap:14px; font-family:var(--fh); font-size:clamp(14px,3vw,16px); font-weight:600; color:rgba(255,255,255,.5); white-space:nowrap; letter-spacing:.01em; }
.brand-ribbon .br-sciss { display:inline-grid; place-items:center; opacity:.9; filter:drop-shadow(0 0 5px rgba(57,255,20,.4)); }
@media (prefers-reduced-motion: no-preference){
  .brand-ribbon .br-track { animation:brScroll 34s linear infinite; }
  @keyframes brScroll { from{ transform:translateX(0); } to{ transform:translateX(-33.33%); } }
}

/* ============================================================
   APPLE-CALM pass (2026-07-24) — restraint, not more. Big air,
   quiet motion (kill the decorative infinite loops), green rarer.
   Story mockups keep animating (they're the content); only the
   loud chrome loops are silenced.
   ============================================================ */

/* 1 — AIR: more whitespace, confident headlines, tight reading width */
.section-pad { padding-block:142px; }
@media (max-width:768px){ .section-pad { padding-block:90px; } }
.section-head { margin-block-end:66px; }
.h-section { letter-spacing:-.035em; line-height:1.04; }
.lead { max-width:560px; }

/* 2 — CALM MOTION: silence the loud decorative loops (Apple = animate once, then rest) */
.sell-chip.hot { animation:none !important; }
.sell-chip .sc-ico, .sell-chip.hot .sc-ico { animation:none !important; }
.solve-bridge.go .sb-pill.hot { animation:none !important; }
.pains-grid .pain-b-cine::after { animation:none !important; opacity:.6 !important; }
.pains-grid .pain-b-cine .pain-b-fix::before { animation:none !important; }
.brand-cut2 .bc2-mark { animation:none !important; }
.brand-ribbon .br-track { animation-duration:74s !important; }
.pviz::before, .sol-card .sviz::before { animation-duration:9s !important; }
.nav-founder-dot { animation:none !important; }
.reviews-cine .reviews-cols:hover .reviews-col-track { animation-play-state:paused; }

/* 3 — GREEN DISCIPLINE: soften the loudest blooms (one quiet accent) */
.ht-green-static { text-shadow:0 0 20px rgba(57,255,20,.26) !important; }
.solve-bridge .sb-new { text-shadow:0 0 30px rgba(57,255,20,.34) !important; }

/* ============================================================
   APPLE-CALM pass 2 (2026-07-24): a single clean scroll-reveal
   (fade-up, no rotate/scale bounce) + quiet, confident CTAs.
   ============================================================ */

/* one clean reveal — Apple fade-up, no rotate/scale jank, smooth ease-out.
   (only transform + timing overridden; transition-DELAY kept so the d1/d2 stagger survives) */
.sol-card.reveal, .pain-b.reveal, .testi.reveal, .katch-card.reveal, .cost-col.reveal, .step3.reveal, .feat3.reveal {
  transform: translateY(24px);
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  transition-duration: .85s;
}
.reveal { transition-timing-function: cubic-bezier(.22,.61,.36,1); }

/* quiet, confident CTAs — kill the infinite shine / ring / sheen flashing */
.seccta-btn-shine { animation:none !important; display:none !important; }
.seccta-fx-ring .seccta-btn-ring::after { animation:none !important; opacity:0 !important; }
.seccta-sweep { animation-duration:9s !important; }
.breathe { animation:none !important; }

/* ============================================================
   REVIEWS + FAQ — premium upgrade (2026-07-24): review cards get
   an avatar + verified seal, a featured hero testimonial, and the
   FAQ gets a closing CTA + a green open-accent.
   ============================================================ */

/* review card — avatar header + verified seal */
.reviews-cine .rc-top { display:flex; align-items:center; gap:9px; margin-block-end:10px; }
.reviews-cine .rc-av { width:30px; height:30px; border-radius:50%; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.3); }
.reviews-cine .rc-who { flex:1; display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.reviews-cine .rc-who b { font-size:11px; color:#fff; }
.reviews-cine .rc-who span { font-size:9px; color:rgba(255,255,255,.45); font-family:var(--fm); }
.reviews-cine .rc-top .rc-stars { flex:none; font-size:11px; letter-spacing:1px; margin:0; }
.reviews-cine .rc-comment { color:rgba(238,248,239,.9); font-size:13.5px; line-height:1.55; }
.reviews-cine .rc-verified { display:inline-flex; align-items:center; gap:5px; margin-block-start:11px; font-family:var(--fm); font-size:9px; color:var(--accent); font-weight:600; }
.reviews-cine .rc-v-ic { display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:rgba(57,255,20,.14); border:1px solid rgba(57,255,20,.3); font-size:8px; }

/* featured hero testimonial above the columns */
.reviews-cine .reviews-featured { position:relative; max-width:680px; margin:0 auto 28px; padding:30px 28px; border-radius:22px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 52px rgba(0,0,0,.42); overflow:hidden; }
.reviews-cine .reviews-featured::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.reviews-cine .rf-stars { color:#ffcf5a; font-size:20px; letter-spacing:3px; text-shadow:0 0 16px rgba(255,207,90,.4); }
.reviews-cine .rf-quote { margin:14px 0 18px; font-family:var(--fh); font-size:clamp(17px,3.6vw,22px); font-weight:600; color:#fff; line-height:1.45; letter-spacing:-.01em; }
.reviews-cine .rf-who { display:inline-flex; align-items:center; gap:10px; }
.reviews-cine .rf-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(140deg,#2b7a4a,#0e2a1a); flex:none; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(57,255,20,.18); }
.reviews-cine .rf-nm { text-align:start; display:flex; flex-direction:column; line-height:1.25; }
.reviews-cine .rf-nm b { font-size:12px; color:#fff; }
.reviews-cine .rf-ver { display:inline-flex; align-items:center; gap:4px; font-family:var(--fm); font-size:9px; color:var(--accent); }

/* FAQ — closing CTA + green open-accent bar */
.faq-cine .faq-close { max-width:760px; margin:34px auto 0; padding:26px 24px; text-align:center; border-radius:18px; background:linear-gradient(180deg, rgba(57,255,20,.05), rgba(255,255,255,.01)); border:1px solid rgba(57,255,20,.18); }
.faq-cine .faq-close-tx { margin:0 0 16px; font-size:15px; color:var(--ink-2); }
.faq-cine .faq-close-tx b { color:var(--accent); }
.faq .faq-item[open]::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--accent); box-shadow:0 0 12px rgba(57,255,20,.5); z-index:1; }

/* ===== Solutions — premium 2-per-row grid on mobile (2026-07-24) =====
   The 3 HERO cards stay 1-col big (they carry the live demo mockups);
   the 6 secondary cards become a dense 2-col compact grid (mockup hidden,
   icon+title+desc+roi) so the section reads as a tight feature grid,
   not an endless one-per-line scroll. */
@media (max-width: 680px) {
  /* 6 secondary cards → 2 per row */
  .sol-more { grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 12px; }

  .sol-more-card {
    padding: 15px 13px !important;
    min-height: 0;
    border-radius: 16px;
    display: flex; flex-direction: column;
  }
  .sol-more-card h3 { font-size: 15px; line-height: 1.18; margin-block: 9px 4px; letter-spacing: -.2px; }
  .sol-more-card > p { font-size: 11.5px; line-height: 1.36; color: var(--ink-2); }
  .sol-more-card .sol-ico { width: 38px; height: 38px; border-radius: 11px; }
  .sol-more-card .sol-ico svg { width: 19px; height: 19px; }
  /* the demo mockup is desktop-only on the tight 2-col grid — keep cards scannable */
  .sol-more-card .sviz { display: none !important; }
  .sol-more-card .sol-roi { align-self: flex-start; margin-block-start: auto; padding-block-start: 10px; font-size: 10px; }
  .sol-more-card .sol-arrow { display: none; }
  .sol-more-card .sol-inf-badge { inset-block-start: 11px; inset-inline-end: 12px; font-size: 12px; }

  /* the 3 hero cards keep their demo — just a touch tighter */
  .sol-hero-grid { gap: 12px; }
  .sol-hero-grid .sol-card { padding: 20px 18px; }
}
/* very small phones (<=380px) — shrink the 2-col a bit more so text never clips */
@media (max-width: 380px) {
  .sol-more { gap: 8px; }
  .sol-more-card { padding: 13px 11px !important; }
  .sol-more-card h3 { font-size: 14px; }
  .sol-more-card > p { font-size: 11px; }
}

/* ===== Solutions cards — premium polish + result chip + tap-to-demo sheet (2026-07-24) ===== */
/* every card is now tappable → opens its live demo */
.sol-cine .sol-card[role="button"] { cursor: pointer; }
.sol-cine .sol-card[role="button"]:active { transform: translateY(-2px) scale(.99); }
.sol-cine .sol-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* accent hairline at the top of each card — colored by data-ac (adds rhythm to the grid) */
.sol-cine .sol-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac-c, var(--accent)), transparent);
  opacity: .55; border-radius: 2px 2px 0 0; pointer-events: none; z-index: 2;
}
.sol-card[data-ac="blue"]   { --ac-c: #4a9eff; }
.sol-card[data-ac="violet"] { --ac-c: #a479ff; }
.sol-card[data-ac="amber"]  { --ac-c: #ffb020; }
.sol-card[data-ac="green"]  { --ac-c: var(--accent); }

/* result / proof chip (the mini-demo payoff — green ✓) */
.sol-res-chip {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-block-start: 10px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--fm); font-size: 10.5px; font-weight: 700; letter-spacing: -.1px;
  color: var(--accent); background: rgba(57,255,20,.09);
  border: 1px solid rgba(57,255,20,.24); box-shadow: 0 0 14px rgba(57,255,20,.08) inset;
}

/* "peek" affordance on the compact 2-col cards — only shows on mobile */
.sol-more-open { display: none; }

/* ---- the tap-to-demo bottom sheet ---- */
.sol-sheet-ov {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2,6,3,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: sol-ov-in .25s ease;
}
.sol-sheet {
  position: relative; width: 100%; max-width: 520px;
  background: linear-gradient(180deg, #131313, #0c0c0c);
  border: 1px solid rgba(255,255,255,.09); border-block-end: 0;
  border-radius: 24px 24px 0 0; padding: 26px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: sol-sheet-up .34s cubic-bezier(.2,.9,.25,1);
}
.sol-sheet::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac-c, var(--accent)), transparent); opacity: .7;
}
.sol-sheet[data-ac="blue"]   { --ac-c: #4a9eff; }
.sol-sheet[data-ac="violet"] { --ac-c: #a479ff; }
.sol-sheet[data-ac="amber"]  { --ac-c: #ffb020; }
.sol-sheet-grab { position: absolute; inset-block-start: 10px; inset-inline-start: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.18); }
.sol-sheet-x {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: var(--ink-2); font-size: 14px; cursor: pointer;
}
.sol-sheet-x:active { transform: scale(.92); }
.sol-sheet-head { display: flex; align-items: center; gap: 13px; margin-block: 8px 12px; }
.sol-sheet-head .sol-ico { width: 46px; height: 46px; flex: none; }
.sol-sheet-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 6px; color: var(--ink); }
.sol-sheet-d { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 16px; }
.sol-sheet-viz { border-radius: 16px; overflow: hidden; margin-block-end: 16px; }
.sol-sheet-viz .sviz { min-height: 168px; }
.sol-sheet .sol-roi { display: inline-block; margin-block-end: 16px; }
.sol-sheet-cta {
  display: block; text-align: center; padding: 15px; border-radius: 14px;
  font-family: var(--fh); font-weight: 800; font-size: 15px; color: #021004; text-decoration: none;
  background: linear-gradient(180deg, #5bff42, var(--accent) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px rgba(57,255,20,.28);
}
.sol-sheet-cta:active { transform: scale(.985); }
@keyframes sol-ov-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sol-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .sol-sheet-ov, .sol-sheet { animation: none !important; }
}
/* desktop: center the sheet as a dialog instead of a bottom sheet */
@media (min-width: 700px) {
  .sol-sheet-ov { align-items: center; }
  .sol-sheet { border-radius: 24px; border-block-end: 1px solid rgba(255,255,255,.09); margin-inline: 16px; }
  .sol-sheet-grab { display: none; }
}
/* mobile compact cards: show the result chip + peek hint, drop the roi to keep them clean */
@media (max-width: 680px) {
  .sol-more-card .sol-roi { display: none; }
  .sol-more-card .sol-res-chip { margin-block-start: 8px; font-size: 10px; padding: 3px 9px; }
  .sol-more-open {
    display: inline-flex; align-items: center; align-self: flex-start; margin-block-start: 9px;
    font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--ac-c, var(--accent)); opacity: .9;
  }
}

/* ===== Solutions — summary bar (the whole toolkit in one glance) 2026-07-24 ===== */
.sol-summary {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 4px;
  margin-block-start: 20px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(57,255,20,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(57,255,20,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.28);
  position: relative; overflow: hidden;
}
.sol-summary::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6;
}
.sol-sum-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 74px; text-align: center; padding-inline: 6px; }
.sol-sum-stat b {
  font-family: var(--fm); font-size: clamp(20px, 6vw, 30px); font-weight: 800; color: var(--accent);
  line-height: 1; letter-spacing: -.5px; text-shadow: 0 0 22px rgba(57,255,20,.35);
}
.sol-sum-stat em { font-style: normal; font-size: 10.5px; color: var(--ink-2); line-height: 1.25; }
.sol-sum-sep { width: 1px; align-self: center; height: 34px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent); flex: none; }
@media (max-width: 560px) {
  .sol-summary { padding: 16px 12px; gap: 10px 4px; }
  .sol-sum-stat { flex-basis: 40%; min-width: 0; }
  .sol-sum-sep { display: none; }
  .sol-sum-stat em { font-size: 10px; }
}

/* ===== App showcase — real app views in iPhone frames (2026-07-24) ===== */
.appshow { position: relative; overflow: hidden; }
.appshow-glow {
  position: absolute; inset-block-start: 34%; inset-inline-start: 50%; transform: translate(-50%,-50%);
  width: min(760px, 92vw); height: 520px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(57,255,20,.14), transparent 62%); filter: blur(10px);
}
.appshow .container { position: relative; z-index: 1; }
.phone-trio {
  display: flex; align-items: flex-end; justify-content: center; gap: 30px;
  margin-block-start: 46px; padding-block-end: 10px;
}
.phone-cell { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; }
.appshow .phone {
  border-radius: 34px;
  box-shadow: 0 30px 68px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* clip every mock to a fixed device viewport so all 3 phones share one height
   (the mocks have very different natural heights — feed is tall) + fade the cut edge */
/* fix the SCREEN height (the body is flex:1 in an otherwise auto-height screen, so it must
   be constrained here, not on the body) → body fills it, overflow clips, all phones align */
.appshow .phone-screen { height: 560px; }
.pc-side .phone-screen { height: 505px; }
.appshow .phone-body { overflow: hidden !important; -webkit-mask-image: linear-gradient(180deg,#000 90%,transparent); mask-image: linear-gradient(180deg,#000 90%,transparent); }
.pc-main { z-index: 3; transform: translateY(-14px); }
.pc-side { z-index: 2; opacity: .96; }
.pc-left .phone  { transform: rotate(-5deg) translateY(24px) scale(.98); }
.pc-right .phone { transform: rotate(5deg) translateY(24px) scale(.98); }
.pc-main:hover .phone { transform: translateY(-20px) scale(1.015); }
.pc-left:hover .phone  { transform: rotate(0) translateY(14px); }
.pc-right:hover .phone { transform: rotate(0) translateY(14px); }
/* label pill under each phone */
.pc-lbl {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font-family: var(--fh); font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap;
}
.pc-lbl-hero { color: var(--ink); font-weight: 800; border-color: rgba(57,255,20,.25); background: rgba(57,255,20,.06); box-shadow: 0 0 20px rgba(57,255,20,.1); }
.pc-lbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.pc-badge {
  position: absolute; inset-block-start: -14px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
  font-family: var(--fm); font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #021004; background: linear-gradient(180deg,#5bff42,var(--accent));
  box-shadow: 0 6px 18px rgba(57,255,20,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (prefers-reduced-motion: no-preference){
  .pc-badge { animation: pcBadge 1.8s ease-in-out infinite; }
  @keyframes pcBadge { 0%,100%{ box-shadow: 0 6px 18px rgba(57,255,20,.4), inset 0 1px 0 rgba(255,255,255,.45);} 50%{ box-shadow: 0 6px 26px rgba(57,255,20,.7), inset 0 1px 0 rgba(255,255,255,.45);} }
}
/* tablet: shrink gaps */
@media (max-width: 1080px) { .phone-trio { gap: 14px; } }
/* mobile: horizontal scroll-snap carousel, dashboard first, no tilt */
@media (max-width: 860px) {
  .phone-trio {
    align-items: flex-start; justify-content: flex-start; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-inline: max(16px, calc((100vw - 266px)/2)); padding-block-end: 8px;
    scrollbar-width: none;
  }
  .phone-trio::-webkit-scrollbar { display: none; }
  .phone-cell { scroll-snap-align: center; flex: none; }
  .pc-main { order: -1; transform: none; }
  .pc-left .phone, .pc-right .phone { transform: none; }
}

/* ===== SellChips — massive UI/UX + animation upgrade + live infinity (2026-07-24) ===== */
.sell-chips { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
.sell-chip {
  position:relative; display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  font-family:var(--fh); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.sell-chip .sc-em { color:var(--accent); font-weight:800; }
.sell-chip:hover { transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 20px 40px rgba(0,0,0,.48); border-color:rgba(57,255,20,.3); }
.sell-chip:active { transform:translateY(-1px) scale(.98); }
/* stagger entrance (container gets .in from the reveal observer) */
.sell-chips .sell-chip { opacity:0; transform:translateY(14px) scale(.9); transition:opacity .55s ease, transform .55s cubic-bezier(.34,1.45,.5,1), box-shadow .35s, border-color .35s; }
.sell-chips.in .sell-chip { opacity:1; transform:none; }
.sell-chips.in .sc-1 { transition-delay:.04s; } .sell-chips.in .sc-2 { transition-delay:.15s; } .sell-chips.in .sc-3 { transition-delay:.26s; }

/* icon base */
.sell-chip .sc-ico { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; flex:none; font-family:var(--fm); font-weight:800; font-size:14px; color:var(--accent); background:linear-gradient(180deg, rgba(57,255,20,.16), rgba(57,255,20,.05)); border:1px solid rgba(57,255,20,.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px rgba(57,255,20,.15); }

/* --- chip 1: LIVE infinity (the lemniscate that flows endlessly) --- */
.sc-ico-inf { width:38px !important; height:24px !important; border-radius:999px !important; padding:0 4px; }
.sc-ico-inf svg { width:100%; height:100%; overflow:visible; color:var(--accent); }
.sc-ico-inf .sci-base { fill:none; stroke:rgba(57,255,20,.2); stroke-width:13; }
.sc-ico-inf .sci-draw { fill:none; stroke:currentColor; stroke-width:13; stroke-linecap:round; stroke-dasharray:28 72; stroke-dashoffset:0; filter:drop-shadow(0 0 4px rgba(57,255,20,.75)); }

/* --- chip 2: HOT ₪100 grant --- */
.sell-chip.hot { overflow:hidden; padding:12px 20px; font-size:15px; color:#eafff0; border-color:rgba(57,255,20,.5); background:linear-gradient(180deg, rgba(57,255,20,.2), rgba(57,255,20,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(57,255,20,.3), 0 14px 34px rgba(57,255,20,.24); transform:scale(1.06); }
.sell-chips.in .sell-chip.hot { transform:scale(1.06); }
.sell-chip.hot:hover { transform:translateY(-4px) scale(1.08); }
.sell-chip.hot .sc-tx b { color:#7fff5a; font-family:var(--fm); }
.sc-ico-coin { background:linear-gradient(180deg,#7fff5a,var(--accent)) !important; border-color:var(--accent) !important; color:#021004 !important; box-shadow:0 0 18px rgba(57,255,20,.6), inset 0 1px 0 rgba(255,255,255,.5) !important; perspective:120px; }
.sc-coin-face { display:block; }
.sc-shine { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%); transform:translateX(-120%); }
.sc-glow { position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:0 0 0 0 rgba(57,255,20,.4); }

/* --- chip 3: scissors (barbers only) --- */
.sc-ico-sciss { background:linear-gradient(180deg,#eafff0,#c7ffd0) !important; border-color:rgba(57,255,20,.5) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 12px rgba(57,255,20,.2) !important; }
.sc-ico-sciss svg { transform-origin:52% 50%; }

@media (max-width:768px){ .sell-chip { font-size:12.5px; padding:9px 14px; } .sell-chip.hot { font-size:13px; padding:10px 16px; transform:scale(1.03); } .sell-chips.in .sell-chip.hot { transform:scale(1.03); } }

@keyframes inf-draw { to { stroke-dashoffset:-100; } }
@media (prefers-reduced-motion: reduce){ .sci-draw { animation:none !important; } }
@media (prefers-reduced-motion: no-preference){
  .sc-ico-inf .sci-draw { animation:sciInfRun 2.6s linear infinite; }
  @keyframes sciInfRun { to { stroke-dashoffset:-100; } }
  .sell-chip.hot .sc-shine { animation:scShineSweep 3.8s ease-in-out infinite; }
  @keyframes scShineSweep { 0%,55%{ transform:translateX(-120%);} 78%,100%{ transform:translateX(120%);} }
  .sell-chip.hot .sc-glow { animation:scGlowPulse 2.8s ease-in-out infinite; }
  @keyframes scGlowPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(57,255,20,.0);} 50%{ box-shadow:0 0 22px 2px rgba(57,255,20,.4);} }
  .sc-ico-coin .sc-coin-face { animation:scCoinFlip 4.4s ease-in-out infinite; transform-style:preserve-3d; }
  @keyframes scCoinFlip { 0%,70%,100%{ transform:rotateY(0) scale(1);} 80%{ transform:rotateY(-26deg) scale(1.14);} 90%{ transform:rotateY(16deg) scale(1.06);} 96%{ transform:rotateY(0) scale(1);} }
  .sc-ico-sciss svg { animation:scSnip 4.2s ease-in-out infinite; }
  @keyframes scSnip { 0%,84%,100%{ transform:rotate(0);} 89%{ transform:rotate(-16deg);} 94%{ transform:rotate(2deg);} 97%{ transform:rotate(0);} }
}
@media (prefers-reduced-motion: reduce){
  .sell-chips .sell-chip { opacity:1 !important; transform:none !important; }
  .sell-chips.in .sell-chip.hot, .sell-chip.hot { transform:scale(1.06) !important; }
}

/* ===== Pain title — cascade line 1 + typewriter line 2 + spotlight (2026-07-24) ===== */
.barber-title { line-height: 1.12; position: relative; padding-inline-end: .06em; }
.barber-title .bt-fixed { display: block; position: relative; z-index: 1; }
.barber-title .bt-rot { display: block; position: relative; z-index: 1; min-height: 1.26em; padding-block-end: .1em; }

/* line 1 — per-letter cascade */
.barber-title .bt-ch { display: inline-block; }
.bt-ch-id { color: var(--accent); text-shadow: 0 0 26px rgba(57,255,20,.42); }
/* grow-underline under the whole "ספרים" */
.bt-id { position: relative; display: inline-block; }
.bt-id::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -.05em; height: .07em; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transform-origin: center;
  box-shadow: 0 0 12px rgba(57,255,20,.5);
}

/* line 2 — typewriter */
.bt-item { display: inline-block; }
.bt-no { color: var(--ink-3); font-weight: 700; }
.bt-word { color: var(--ink-2); }
.bt-are-lead { color: var(--ink); }
.bt-are { color: var(--accent); text-shadow: 0 0 30px rgba(57,255,20,.5), 0 0 12px rgba(57,255,20,.35); }
.bt-dot { color: var(--accent); }
/* blinking accent caret at the typing head */
.bt-caret {
  display: inline-block; width: .08em; height: .82em; margin-inline-start: .06em; vertical-align: -.04em;
  background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px rgba(57,255,20,.7);
}

/* spotlight sweep across the whole title */
.bt-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(108deg, transparent 42%, rgba(160,255,180,.14) 50%, transparent 58%);
  transform: translateX(-130%); mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  .section-head.in .barber-title .bt-ch { animation: btChUp .5s cubic-bezier(.2,.95,.3,1) calc(var(--d,0) * .045s) both; }
  @keyframes btChUp { 0% { opacity: 0; transform: translateY(.65em) rotate(4deg); filter: blur(5px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
  .section-head.in .bt-id::after { animation: btIdLine .7s ease .62s forwards; }
  @keyframes btIdLine { to { transform: scaleX(1); } }
  .bt-caret { animation: btCaret 1s steps(1) infinite; }
  @keyframes btCaret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
  .bt-are { animation: btFinGlow 1.7s ease-in-out infinite; }
  @keyframes btFinGlow { 0%,100% { text-shadow: 0 0 30px rgba(57,255,20,.5), 0 0 12px rgba(57,255,20,.35); } 50% { text-shadow: 0 0 50px rgba(57,255,20,.85), 0 0 22px rgba(57,255,20,.55); } }
  .bt-spot { animation: btSpot 7.5s ease-in-out 1.2s infinite; }
  @keyframes btSpot { 0% { transform: translateX(-130%); } 42%,100% { transform: translateX(130%); } }
}
@media (prefers-reduced-motion: reduce) { .bt-id::after { transform: scaleX(1); } .bt-spot { display: none; } }

/* ===== Solutions — mockups + display top-level polish (2026-07-24) ===== */
/* declutter: the green result-chip is REDUNDANT with the mockup's own ✓ badge on
   desktop/hero (both visible) — so show it ONLY on the mobile compact cards where
   the mockup is hidden. Desktop keeps mockup(✓ result) + roi(₪ money) = two distinct msgs. */
.sol-res-chip { display: none; }
@media (max-width: 680px) { .sol-more-card .sol-res-chip { display: inline-flex; } }

/* premium mockup frame — deeper glass, accent inner ring, lift on hover */
.sol-card .sviz {
  height: 130px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.36));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.34);
}
.sol-card:hover .sviz {
  border-color: rgba(57,255,20,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 18px 40px rgba(0,0,0,.42), 0 0 26px rgba(57,255,20,.12);
}
.sol-feat .sviz { border-color: rgba(57,255,20,.2); }

/* premium result badge — a green "proven" stamp pill, centered at the mockup base */
.sviz .sv-res {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: max-content; max-width: 92%; margin: 7px auto 0; padding: 3px 11px; border-radius: 999px;
  font-family: var(--fm); font-size: 8.5px; font-weight: 800; letter-spacing: 0; line-height: 1.3;
  color: var(--accent); background: rgba(57,255,20,.12);
  border: 1px solid rgba(57,255,20,.32); box-shadow: 0 0 16px rgba(57,255,20,.15), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Animated infinity mark (reusable) 2026-07-24 ===== */
.inf-mark { display:inline-flex; align-items:center; justify-content:center; flex:none; vertical-align:middle; }
.inf-mark svg { width:100%; height:100%; overflow:visible; color:var(--accent); }
.inf-mark .im-base { fill:none; stroke:rgba(57,255,20,.2); stroke-width:13; }
.inf-mark .im-draw { fill:none; stroke:currentColor; stroke-width:13; stroke-linecap:round; stroke-dasharray:26 74; stroke-dashoffset:0; filter:drop-shadow(0 0 4px rgba(57,255,20,.7)); }
@media (prefers-reduced-motion: no-preference){ .inf-mark .im-draw { animation:imRun 2.4s linear infinite; } @keyframes imRun { to { stroke-dashoffset:-100; } } }

/* ===== Offer card — categorized, Apple-premium (2026-07-24) ===== */
.offer-cats {
  position: relative; margin-block-start: 30px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 720px) { .offer-cats { grid-template-columns: 1fr; gap: 12px; } }
.offer-cat {
  padding: 18px 18px 8px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.offer-cat-hd { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; padding-block-end: 12px; border-block-end: 1px solid rgba(255,255,255,.07); }
.offer-cat-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 15px; color: var(--accent);
  background: linear-gradient(180deg, rgba(57,255,20,.16), rgba(57,255,20,.05));
  border: 1px solid rgba(57,255,20,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.offer-cat-t { font-family: var(--fh); font-size: 14.5px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.offer-cat-list { display: flex; flex-direction: column; }
.offer-feat {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px; color: var(--ink-2);
  border-block-end: 1px solid rgba(255,255,255,.045);
}
.offer-cat-list .offer-feat:last-child { border-block-end: 0; }
.offer-feat .of-ico {
  width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-size: 12px; color: var(--ink-3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  transition: color .25s, background .25s, border-color .25s;
}
.offer-cat:hover .of-ico { color: var(--accent); }
.offer-feat .of-tx { flex: 1; line-height: 1.3; }
.offer-feat .of-check { flex: none; color: var(--accent); font-size: 12px; opacity: .7; }
/* infinity rows — the star treatment */
.offer-feat.is-inf { color: var(--ink); font-weight: 700; }
.offer-feat.is-inf .of-ico { color: var(--accent); background: linear-gradient(180deg, rgba(57,255,20,.14), rgba(57,255,20,.04)); border-color: rgba(57,255,20,.3); }
.offer-feat.is-inf .of-nolimit { color: var(--accent); font-weight: 800; }
.offer-feat.is-inf .inf-mark { margin-inline-start: 2px; }

/* ===== Nav — scroll progress + shrink on scroll (2026-07-25) ===== */
.nav { transition: opacity .35s ease, height .3s ease, box-shadow .3s ease, background .3s ease; }
.nav-progress {
  position: absolute; inset-block-end: -1px; inset-inline-start: 0; width: 100%; height: 2px; transform-origin: right;
  background: linear-gradient(90deg, var(--accent), #7fff5a); box-shadow: 0 0 10px rgba(57,255,20,.6);
  transform: scaleX(0); z-index: 2;
}
html[data-theme="dark"] .nav-scrolled { background: rgba(10,10,10,.72); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.nav-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.nav-scrolled .nav-inner { height: 50px; }
.nav-inner { transition: height .3s cubic-bezier(.2,.8,.2,1); }
.nav-scrolled .nav-founder { opacity: 0; width: 0; overflow: hidden; padding: 0; margin: 0; border: 0; }
.nav-founder { transition: opacity .25s, width .25s; white-space: nowrap; }

/* ===== WhatsApp real-icon touches (2026-07-25) ===== */
.wa-av-icon { display: grid !important; place-items: center; background: #25D366 !important; box-shadow: 0 0 14px rgba(37,211,102,.5); }
.wa-kicker { display: inline-flex; align-items: center; gap: 6px; }

/* infinity mark alignment inside display containers (2026-07-25) */
.cei-n, .cbp-n, .k3-m-n, .sol-sum-inf { display:inline-flex !important; align-items:center; justify-content:center; }
.offer-badge .inf-mark, .sb-pill .inf-mark { vertical-align:middle; }
.sb-pill .sb-ic { display:inline-flex; align-items:center; justify-content:center; }

/* ===== Pains — premium mockup frame (match solutions, danger-red accent) 2026-07-25 ===== */
.pain-b-cine .pviz {
  height: 132px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.34));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.34);
  transition: box-shadow .3s, border-color .3s;
}
.pain-b-cine:hover .pviz {
  border-color: rgba(255,59,48,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.42), 0 0 26px rgba(255,59,48,.12);
}
@media (max-width:768px){ .pain-b-cine .pviz { height: 126px; } }

/* ===== AppShowcase swipe dots (mobile) + FinalCTA recap (2026-07-25) ===== */
.phone-swipe { display: none; }
@media (max-width: 860px) {
  .phone-swipe { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 16px; }
  .phone-dots { display: inline-flex; gap: 6px; }
  .phone-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .3s; }
  .phone-dots i.on { width: 18px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px rgba(57,255,20,.5); }
  .phone-swipe-hint { font-family: var(--fh); font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
  .phone-swipe-hint .mono { font-family: var(--fm); color: var(--accent); }
}
.final-recap { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-block: 20px 8px; }
.fr-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fh); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); }
.fr-chip b { font-family: var(--fm); color: var(--accent); font-weight: 900; }
.fr-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.25); }
@media (max-width: 480px) { .fr-chip { font-size: 12.5px; } .fr-sep { display: none; } }

/* ==========================================================================
   TYPE SYSTEM v2 — massive sitewide text upgrade (2026-07-25)
   titles · leads · kickers · paragraphs · color · shadow · effects
   ========================================================================== */

/* readability: brighten the dark-theme ink ramp (a11y + presence) */
html[data-theme="dark"] {
  --ink-2: rgba(255,255,255,0.72);
  --ink-3: rgba(255,255,255,0.52);
  --ink-4: rgba(255,255,255,0.30);
}

/* crisper global rendering */
html, body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; }
::selection { background: rgba(57,255,20,.24); color: #fff; }

/* ---- SECTION TITLES — bigger, tighter, depth ---- */
.h-section {
  font-family: var(--fh);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.97;
  font-size: clamp(38px, 6.4vw, 88px);
  text-shadow: 0 2px 26px rgba(0,0,0,.4);
  text-wrap: balance;
}
@media (max-width: 600px) { .h-section { font-size: clamp(33px, 9.2vw, 46px); line-height: 1.02; letter-spacing: -0.03em; } }
/* accent word — brighter gradient + neon bloom (green stays rare = premium) */
.h-section .ht-green-static {
  background: linear-gradient(180deg, #8dff6a 0%, var(--accent) 55%, #14c94a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(57,255,20,.4));
}
/* any bold inside a heading gets a hair more weight */
.h-section b, .h-section strong { font-weight: 900; }

/* ---- CARD / SUB TITLES ---- */
.h-card { font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }
.sol-card h3, .offer-cat-t, .pain-b-cine h3 { letter-spacing: -0.02em; }

/* ---- LEAD PARAGRAPHS — more presence + readable ---- */
.lead {
  font-family: var(--fh);
  font-weight: 500;
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 62ch;
}
.section-head.center .lead, .center .lead { margin-inline: auto; }
.lead b, .lead strong { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) { .lead { font-size: 16.5px; line-height: 1.52; } }

/* ---- KICKER (// eyebrow) — refined, accent, premium ---- */
.kicker {
  font-family: var(--fm);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .92;
}
html[data-theme="dark"] .section-head .kicker, html[data-theme="dark"] .kicker { color: var(--accent-hi); }

/* ---- BODY PARAGRAPHS everywhere — readability floor ---- */
p { text-wrap: pretty; }

/* ---- reveal: soft rise + de-blur for text blocks (gated) ---- */
@media (prefers-reduced-motion: no-preference) {
  .section-head.reveal .lead { transition: opacity .7s ease .12s, transform .7s cubic-bezier(.2,.9,.3,1) .12s, filter .7s ease .12s; }
  .section-head.reveal:not(.in) .lead { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  .section-head.reveal.in .lead { opacity: 1; transform: none; filter: blur(0); }
}

/* ===== Steps3 chrono + LiveMap live ticker (2026-07-25) ===== */
.steps3-timer {
  display: inline-flex; align-items: center; gap: 7px; margin-block-start: 16px; padding: 7px 15px; border-radius: 999px;
  font-family: var(--fm); font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: rgba(57,255,20,.06); border: 1px solid rgba(57,255,20,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.steps3-timer b { color: var(--accent); font-weight: 900; }
.steps3-timer .s3t-live { color: var(--accent); letter-spacing: .05em; }
.steps3-timer .s3t-ic { color: var(--accent); font-size: 13px; }
@media (prefers-reduced-motion: no-preference){ .steps3-timer .s3t-ic { display:inline-block; animation: s3tSpin 3s linear infinite; } @keyframes s3tSpin { to { transform: rotate(360deg); } } }

.lm-ticker {
  position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  padding: 7px 12px; border-radius: 999px; overflow: hidden;
  font-family: var(--fh); font-size: 11.5px; font-weight: 600; color: #eafff0; white-space: nowrap;
  background: rgba(8,14,9,.82); border: 1px solid rgba(57,255,20,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.lm-ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference){
  .lm-ticker-dot { animation: lmTickDot 1.4s ease-in-out infinite; }
  @keyframes lmTickDot { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
  .lm-ticker-tx { display: inline-block; animation: lmTickIn .5s cubic-bezier(.2,.9,.3,1); }
  @keyframes lmTickIn { 0%{ opacity:0; transform: translateY(8px); } 100%{ opacity:1; transform:none; } }
}

/* ===== FAQ — objection filter + category dots (2026-07-25) ===== */
.faq-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 22px; }
.faq-chip {
  font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); transition: all .25s;
}
.faq-chip:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.faq-chip.on {
  color: #021004; background: linear-gradient(180deg,#7fff5a,var(--accent)); border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(57,255,20,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.faq-q-cat { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-inline-end: 12px; display: inline-block; vertical-align: middle; }
.faq-q-cat.money { background: var(--accent); box-shadow: 0 0 8px rgba(57,255,20,.5); }
.faq-q-cat.time { background: #4a9eff; box-shadow: 0 0 8px rgba(74,158,255,.5); }
.faq-q-cat.trust { background: #a479ff; box-shadow: 0 0 8px rgba(164,121,255,.5); }

/* ===== Manifeste — kinetic statement (2026-07-25) ===== */
.st-h2 {
  font-family: var(--fh); font-weight: 900; letter-spacing: -0.045em; line-height: 0.95;
  font-size: clamp(40px, 7vw, 100px); text-wrap: balance; margin-block: 8px 0;
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.st-h2 .st-em { color: var(--ink); }
.st-h2 .ht-green-static { filter: drop-shadow(0 0 30px rgba(57,255,20,.45)); }
.statement .st-sub { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin-block-start: 20px; }
.statement .st-sub b { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) { .st-h2 { font-size: clamp(34px, 10vw, 52px); line-height: 1.0; } }
@media (prefers-reduced-motion: no-preference) {
  .statement.reveal:not(.in) .st-h2 { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  .statement.reveal.in .st-h2 { opacity: 1; transform: none; filter: blur(0); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1), filter .8s ease; }
}

/* ===== SolveBridge — cinematic scissor cut (old number splits in two) 2026-07-25 ===== */
.solve-bridge .sb-old2 { position: relative; display: inline-block; font-family: var(--fm); font-weight: 800; font-size: clamp(22px,5.5vw,36px); line-height: 1; }
.solve-bridge .sb-old2-base { visibility: hidden; }
.solve-bridge .sb-old2-h { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: rgba(255,91,82,.8); text-decoration: line-through; text-decoration-color: rgba(255,59,48,.7); }
.solve-bridge .sb-old2-h.top { clip-path: inset(0 0 50% 0); }
.solve-bridge .sb-old2-h.bot { clip-path: inset(50% 0 0 0); }
/* the cut flash on the number */
.solve-bridge .sb-spark { position: absolute; inset-block-start: 50%; inset-inline: -6px; height: 2px; transform: translateY(-50%) scaleX(0); background: linear-gradient(90deg, transparent, #eaffea, #39ff14, #eaffea, transparent); box-shadow: 0 0 16px rgba(57,255,20,.9); opacity: 0; }
/* the blade sits centered; glides across the number on cut */
.solve-bridge .sb-blade { display: grid; place-items: center; width: 40px; height: 40px; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  /* 1. blade travels across the old number, 2. spark flashes, 3. halves split apart + fade */
  .solve-bridge.go .sb-blade { animation: sbBlade2 .9s cubic-bezier(.4,.1,.2,1) both; }
  @keyframes sbBlade2 { 0%{ transform: translateX(0) scale(1) rotate(0); opacity:.6; } 15%{ transform: translateX(0) scale(1.3) rotate(-18deg); } 30%{ opacity:1; } 55%{ transform: translateX(-70px) scale(1.15) rotate(14deg); } 80%{ transform: translateX(-70px) scale(1) rotate(0); opacity:.8; } 100%{ transform: translateX(0) scale(1) rotate(0); opacity:.6; } }
  .solve-bridge.go .sb-spark { animation: sbSpark .5s ease-out .28s both; }
  @keyframes sbSpark { 0%{ transform: translateY(-50%) scaleX(0); opacity:0; } 40%{ transform: translateY(-50%) scaleX(1); opacity:1; } 100%{ transform: translateY(-50%) scaleX(1); opacity:0; } }
  .solve-bridge.go .sb-old2-h.top { animation: sbSplitTop .7s cubic-bezier(.3,.9,.3,1) .34s both; }
  @keyframes sbSplitTop { 0%{ transform: translateY(0) rotate(0); opacity:1; } 100%{ transform: translateY(-.55em) translateX(.08em) rotate(-4deg); opacity:0; } }
  .solve-bridge.go .sb-old2-h.bot { animation: sbSplitBot .7s cubic-bezier(.3,.9,.3,1) .34s both; }
  @keyframes sbSplitBot { 0%{ transform: translateY(0) rotate(0); opacity:1; } 100%{ transform: translateY(.55em) translateX(-.08em) rotate(4deg); opacity:0; } }
}
@media (prefers-reduced-motion: reduce) { .solve-bridge .sb-old2-h { opacity: .35; } }

/* SolveBridge — sequence the +₪ to appear AFTER the cut/split (2026-07-25) */
@media (prefers-reduced-motion: no-preference) {
  .solve-bridge.go .sb-new { animation: sbNewSeq .6s cubic-bezier(.2,1.4,.4,1) 1.02s both !important; }
  @keyframes sbNewSeq { 0%{ opacity:0; transform: translateY(.28em) scale(.72); } 60%{ opacity:1; transform: scale(1.06); } 100%{ opacity:1; transform: none; } }
  .solve-bridge.go .sb-cutline { animation: sbCutline .55s ease-out .34s both; }
}

/* ==========================================================================
   CIRCULAR GALLERY — scroll-rotated 3D ring of the 7 solution mockups (2026-07-25)
   ========================================================================== */
.cgal-scroll { position: relative; height: 250vh; }
.cgal-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.cgal-head { position: absolute; inset-block-start: clamp(38px, 9vh, 92px); z-index: 6; text-align: center; padding-inline: 20px; }
.cgal-head .kicker { display: block; margin-block-end: 10px; }

.cgal-3d { perspective: 1500px; width: 100%; height: 400px; display: grid; place-items: center; }
.cgal-ring { position: relative; width: 250px; height: 376px; transform-style: preserve-3d; will-change: transform; }
.cgal-card { position: absolute; inset: 0; backface-visibility: hidden; opacity: .32; filter: blur(1.6px) saturate(.75); transition: opacity .45s ease, filter .45s ease; }
.cgal-card.on { opacity: 1; filter: none; }
.cgal-card-in {
  width: 250px; height: 376px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: linear-gradient(180deg,#161616,#0b0b0b); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.cgal-card.on .cgal-card-in { border-color: rgba(57,255,20,.3); box-shadow: 0 34px 74px rgba(0,0,0,.6), 0 0 42px rgba(57,255,20,.15), inset 0 1px 0 rgba(255,255,255,.08); }
.cgal-card-in .sviz { flex: 1; height: auto !important; margin: 0 !important; border-radius: 14px; min-height: 0; }
/* title + description under the mockup */
.cgal-foot { display: flex; align-items: center; gap: 10px; flex: none; }
.cgal-lbl-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; color: var(--accent); background: rgba(57,255,20,.12); border: 1px solid rgba(57,255,20,.3); }
.cgal-foot-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.cgal-foot-tx b { font-family: var(--fh); font-size: 14.5px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); line-height: 1.15; }
.cgal-foot-tx span { font-family: var(--fh); font-size: 11px; line-height: 1.3; color: var(--ink-3); }
.cgal-card.on .cgal-foot-tx span { color: var(--ink-2); }
.cgal-card[data-ac="blue"] .cgal-lbl-ic { color:#4a9eff; background:rgba(74,158,255,.12); border-color:rgba(74,158,255,.32); }
.cgal-card[data-ac="violet"] .cgal-lbl-ic { color:#a479ff; background:rgba(164,121,255,.12); border-color:rgba(164,121,255,.32); }
.cgal-card[data-ac="amber"] .cgal-lbl-ic { color:#ffb020; background:rgba(255,176,32,.12); border-color:rgba(255,176,32,.32); }
/* perf: freeze the mockups that aren't front-facing */
.cgal-card:not(.on) .sviz * { animation-play-state: paused !important; }

.cgal-hint { position: absolute; inset-block-end: clamp(22px, 6vh, 58px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cgal-hint-tx { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.cgal-dots { display: flex; gap: 6px; }
.cgal-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .35s; }
.cgal-dots i.on { width: 18px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px rgba(57,255,20,.5); }

/* mobile — smaller ring */
@media (max-width: 560px) {
  .cgal-scroll { height: 220vh; }
  .cgal-ring { width: 222px; height: 358px; }
  .cgal-card-in { width: 222px; height: 358px; }
  .cgal-ring[style] { --r: 260px; }
}

/* reduced-motion — flat static grid, no scroll-jack */
.cgal-static { height: auto !important; }
.cgal-static .cgal-stage { position: static !important; height: auto; padding-block: 60px; gap: 24px; }
.cgal-static .cgal-head { position: static; }
.cgal-static .cgal-3d { perspective: none; height: auto; }
.cgal-static .cgal-ring { transform: none !important; width: 100%; max-width: 780px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; height: auto; }
.cgal-static .cgal-card { position: static; inset: auto; opacity: 1 !important; filter: none !important; transform: none !important; }
.cgal-static .cgal-hint { display: none; }

/* ===== Circular gallery — emotional head + tag + bottom CTA (2026-07-25) ===== */
.cgal-sub { margin: 12px auto 0; font-family: var(--fh); font-weight: 500; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.45; color: var(--ink-2); max-width: 42ch; }
.cgal-card-in { position: relative; }
.cgal-tag { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; z-index: 4; font-family: var(--fm); font-size: 9px; font-weight: 800; letter-spacing: .03em; color: #021004; background: linear-gradient(180deg,#7fff5a,var(--accent)); border-radius: 999px; padding: 3px 10px; box-shadow: 0 4px 12px rgba(57,255,20,.4); }
.cgal-card[data-ac="blue"] .cgal-tag { background: linear-gradient(180deg,#8fc7ff,#4a9eff); box-shadow: 0 4px 12px rgba(74,158,255,.4); }
.cgal-card[data-ac="violet"] .cgal-tag { background: linear-gradient(180deg,#c8adff,#a479ff); box-shadow: 0 4px 12px rgba(164,121,255,.4); }
.cgal-card[data-ac="amber"] .cgal-tag { background: linear-gradient(180deg,#ffdd93,#ffb020); box-shadow: 0 4px 12px rgba(255,176,32,.4); }
.cgal-bottom { position: absolute; inset-block-end: clamp(18px, 5vh, 46px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cgal-bottom .cgal-hint { position: static; inset: auto; }
.cgal-cta { box-shadow: 0 14px 34px rgba(57,255,20,.32); }
/* Mobile solutions — ID selector (specificity 1,0,x) beats all class rules */
@media (max-width: 800px) {
  #solutions { height: auto !important; }
  #solutions .cgal-stage { position: static !important; height: auto !important; display: block !important; padding: 32px 0 48px; overflow: visible; }
  #solutions .cgal-head { position: static !important; padding-inline: 20px; }
  #solutions .cgal-3d { display: block !important; height: auto !important; perspective: none !important; width: 100%; }
  #solutions .cgal-ring { display: block !important; transform: none !important; width: 100% !important; height: auto !important; max-width: none !important; padding: 0 16px; box-sizing: border-box; }
  #solutions .cgal-card { display: block !important; position: static !important; inset: auto !important; width: 100% !important; opacity: 1 !important; filter: none !important; transform: none !important; margin-block-end: 20px; }
  #solutions .cgal-card-in { width: 100% !important; box-sizing: border-box !important; height: auto !important; min-height: 320px; }
  #solutions .cgal-vizwin { min-height: 200px; }
  #solutions .cgal-halo, #solutions .cgal-mirror, #solutions .cgal-floor, #solutions .cgal-hint { display: none !important; }
  #solutions .cgal-bottom { position: static !important; inset: auto !important; margin-block-start: 8px; display: flex !important; }
}
@media (max-width: 560px) { .cgal-sub { font-size: 13.5px; max-width: 32ch; } .cgal-tag { inset-block-start: 18px; inset-inline-end: 18px; } }
/* static (reduced-motion) — tag stays in corner, sub visible */
.cgal-static .cgal-bottom { position: static; margin-block-start: 8px; }

/* ===== Circular gallery — reflection + ambient halo + drag/click + scale-pop (2026-07-25) ===== */
.cgal-stage { cursor: grab; touch-action: pan-y; }
.cgal-stage:active { cursor: grabbing; }
.cgal-card { cursor: pointer; }
.cgal-3d { position: relative; }

/* ambient halo behind the ring — colour follows the active card */
.cgal-halo {
  position: absolute; inset-block-start: 52%; inset-inline-start: 50%; transform: translate(-50%,-50%);
  width: 540px; height: 440px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(57,255,20,.16), transparent 62%); filter: blur(34px);
  transition: background .7s ease;
}
.cgal-stage[data-active-ac="blue"] .cgal-halo { background: radial-gradient(circle, rgba(74,158,255,.19), transparent 62%); }
.cgal-stage[data-active-ac="violet"] .cgal-halo { background: radial-gradient(circle, rgba(164,121,255,.19), transparent 62%); }
.cgal-stage[data-active-ac="amber"] .cgal-halo { background: radial-gradient(circle, rgba(255,176,32,.19), transparent 62%); }

/* floor contact shadow + faint neon reflection — grounds the ring */
.cgal-floor {
  position: absolute; inset-block-end: 2px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 320px; height: 46px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 72%);
  box-shadow: 0 0 50px 14px rgba(0,0,0,.5);
}
.cgal-floor::after { content: ""; position: absolute; inset-block-start: -3px; inset-inline: 24%; height: 3px; border-radius: 3px; background: var(--accent); opacity: .35; filter: blur(3px); transition: background .7s ease; }
.cgal-stage[data-active-ac="blue"] .cgal-floor::after { background: #4a9eff; }
.cgal-stage[data-active-ac="violet"] .cgal-floor::after { background: #a479ff; }
.cgal-stage[data-active-ac="amber"] .cgal-floor::after { background: #ffb020; }

/* scale-pop + cursor tilt on the active (front) card (tilt eased in JS → no transform transition) */
.cgal-card-in { transition: box-shadow .4s ease, border-color .4s ease; }
.cgal-card.on .cgal-card-in { transform: perspective(760px) scale(1.05) rotateY(var(--tiltx, 0deg)) rotateX(var(--tilty, 0deg)); transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) { .cgal-card.on .cgal-card-in { animation: cgalPop .5s cubic-bezier(.2,1.5,.4,1); } @keyframes cgalPop { 0% { scale: .9; } 60% { scale: 1.08; } 100% { scale: 1; } } }

.cgal-static .cgal-halo, .cgal-static .cgal-floor { display: none; }
.cgal-static .cgal-card.on .cgal-card-in { transform: none; }

/* ===== Circular gallery — real mirror reflection of the active card (2026-07-25) ===== */
.cgal-mirror {
  position: absolute; inset-block-end: -46px; inset-inline-start: 50%; width: 250px; z-index: 0; pointer-events: none;
  transform: translateX(-50%) scaleY(-1); opacity: .2; filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 96%);
  mask-image: linear-gradient(to bottom, transparent 38%, #000 96%);
}
.cgal-mirror .cgal-card-in { transform: none !important; animation: none !important; box-shadow: none; border-color: rgba(255,255,255,.05); background: linear-gradient(180deg,#141414,#0a0a0a); }
.cgal-mirror .cgal-tag { display: none; }
.cgal-static .cgal-mirror { display: none; }

/* ===== Ring card — title ABOVE the mockup + desc-only footer (2026-07-25) ===== */
.cgal-top { display: flex; align-items: center; gap: 9px; flex: none; }
.cgal-top-t { font-family: var(--fh); font-size: 14px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); line-height: 1.14; }
.cgal-foot { display: block; flex: none; padding-block-start: 2px; }
.cgal-foot > span { font-family: var(--fh); font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.cgal-card.on .cgal-foot > span { color: var(--ink-2); }

/* ===== Solution cubes — full toolkit as a clean icon grid (no mockups) ===== */
.solcubes-sec { padding-block: clamp(48px, 7vh, 88px) 16px; position: relative; }
.solcubes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-block-start: 36px; }
@media (max-width: 960px) { .solcubes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .solcubes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.solcube {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 18px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.solcube[data-ac="blue"] { --ac-c: #4a9eff; } .solcube[data-ac="violet"] { --ac-c: #a479ff; } .solcube[data-ac="amber"] { --ac-c: #ffb020; } .solcube[data-ac="green"] { --ac-c: var(--accent); }
.solcube::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ac-c, var(--accent)), transparent); opacity: .55; }
.solcube:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac-c, var(--accent)) 34%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.34); }
.solcube-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex: none; color: var(--ac-c, var(--accent)); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .3s, border-color .3s; }
.solcube:hover .solcube-ic { background: color-mix(in srgb, var(--ac-c, var(--accent)) 14%, transparent); border-color: color-mix(in srgb, var(--ac-c, var(--accent)) 34%, transparent); }
.solcube-t { font-family: var(--fh); font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); line-height: 1.2; }
.solcube-d { font-family: var(--fh); font-size: 12px; line-height: 1.42; color: var(--ink-3); }

/* ===== Solution cubes — old sol-card style, no mockup, 4-col (2026-07-25) ===== */
.sol-cubes-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .sol-cubes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sol-cubes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.sol-cube-card { min-height: 0 !important; }
.sol-cube-card h3 { margin-block: 10px 5px; }
@media (max-width: 640px) { .sol-cube-card { padding: 16px 14px !important; } .sol-cube-card h3 { font-size: 15px; } .sol-cube-card p { font-size: 12.5px; } }

/* ===== Solution cubes — count chip + connect-to-ring hint (2026-07-25) ===== */
.cubes-count {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 16px auto 0; padding: 8px 16px; border-radius: 999px;
  font-family: var(--fh); font-weight: 600; font-size: 13.5px; color: var(--ink-2);
  background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.2);
}
.cubes-count b { font-family: var(--fm); font-weight: 900; color: var(--accent); font-size: 15px; }
.cubes-count .cc-nolimit { color: var(--accent); font-weight: 800; }
.sol-cube-card.has-demo { cursor: pointer; }
.sol-cube-card.has-demo:hover { border-color: color-mix(in srgb, var(--ac-c, var(--accent)) 40%, transparent) !important; }
.sol-cube-card[data-ac="blue"] { --ac-c: #4a9eff; } .sol-cube-card[data-ac="violet"] { --ac-c: #a479ff; } .sol-cube-card[data-ac="amber"] { --ac-c: #ffb020; } .sol-cube-card[data-ac="green"] { --ac-c: var(--accent); }
.cube-demo-hint {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 3px; margin-block-start: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--ac-c, var(--accent)); opacity: .85;
  transition: opacity .25s, transform .25s;
}
.sol-cube-card.has-demo:hover .cube-demo-hint { opacity: 1; transform: translateY(-1px); }

/* ===== Manifesto — "we're with you" beliefs + signature (2026-07-25) ===== */
.statement .mf-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block-start: 34px; max-width: 900px; }
@media (max-width: 760px) { .statement .mf-beliefs { grid-template-columns: 1fr; gap: 10px; } }
.mf-belief {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center;
  padding: 16px 16px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.mf-belief:hover { transform: translateY(-3px); border-color: rgba(57,255,20,.28); }
.mf-b-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--fm); font-weight: 900; font-size: 18px; color: var(--accent); background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.mf-belief b { font-family: var(--fh); font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); align-self: end; }
.mf-belief > span:last-child { font-family: var(--fh); font-size: 12px; line-height: 1.35; color: var(--ink-3); align-self: start; }
.mf-belief:hover > span:last-child { color: var(--ink-2); }
/* signature */
.mf-sign { display: inline-flex; align-items: center; gap: 9px; margin-block-start: 26px; padding: 9px 18px; border-radius: 999px; font-family: var(--fm); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.2); }
.mf-sign-sciss { display: inline-flex; color: var(--accent); filter: drop-shadow(0 0 6px rgba(57,255,20,.5)); }
@media (max-width: 600px) { .mf-belief b { font-size: 14.5px; } .mf-sign { font-size: 11.5px; } }

/* ===== Ring card header — icon + title + proof stat (2026-07-26) ===== */
.cgal-top { align-items: center !important; gap: 10px; }
.cgal-top-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cgal-top-t { font-size: 14px; }
.cgal-stat {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 4px;
  font-family: var(--fm); font-size: 9px; font-weight: 800; letter-spacing: -.1px; color: var(--accent);
  background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.28); border-radius: 999px; padding: 1px 8px;
}
.cgal-card[data-ac="blue"] .cgal-stat { color: #4a9eff; background: rgba(74,158,255,.1); border-color: rgba(74,158,255,.28); }
.cgal-card[data-ac="violet"] .cgal-stat { color: #a479ff; background: rgba(164,121,255,.1); border-color: rgba(164,121,255,.28); }
.cgal-card[data-ac="amber"] .cgal-stat { color: #ffb020; background: rgba(255,176,32,.1); border-color: rgba(255,176,32,.28); }

/* ===== Solution cubes — premium polish (2026-07-26) ===== */
.sol-cube-card .sol-ico { transition: transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s; }
.sol-cube-card:hover .sol-ico { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 20px color-mix(in srgb, var(--ac-c, var(--accent)) 30%, transparent); }
.sol-cube-card .sol-inf-badge { color: var(--ac-c, var(--accent)); opacity: .55; transition: opacity .3s, text-shadow .3s; }
.sol-cube-card:hover .sol-inf-badge { opacity: 1; text-shadow: 0 0 10px color-mix(in srgb, var(--ac-c, var(--accent)) 60%, transparent); }
.sol-cube-card h3 { transition: color .25s; }
.sol-cube-card:hover h3 { color: #fff; }
.sol-cube-card .sol-roi { transition: background .3s, color .3s; }
.sol-cube-card:hover .sol-roi { background: color-mix(in srgb, var(--ac-c, var(--accent)) 16%, transparent); }

/* ============================================================
   RING MOCKUPS → credible iPhone screenshots (2026-07-26)
   Shared device chrome (status bar + notch) around each app
   screen + a money/result payoff bar. Ring-only (SvShot).
   Delivers: real-screenshot fidelity, per-mockup money payoff,
   and one coherent visual language across all 7.
   ============================================================ */
.cgal-card-in .svshot {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #0c0f0c, #060806);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.4);
}
.cgal-card.on .cgal-card-in .svshot { border-color: rgba(57,255,20,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.5); }
/* iOS status bar */
.svshot-status { flex: none; position: relative; z-index: 6; height: 19px; display: flex; align-items: center; justify-content: space-between; padding: 3px 13px 0; }
.svshot-status > span:first-child { font-family: var(--fm); font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,.82); }
.svshot-notch { position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 46px; height: 12px; border-radius: 0 0 9px 9px; background: #000; }
.svshot-sig { display: flex; align-items: center; gap: 4px; }
.svshot-sig b { font-family: var(--fm); font-size: 7.5px; font-weight: 700; color: rgba(255,255,255,.8); }
.svshot-bars { width: 13px; height: 8px; -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); background:
  linear-gradient(rgba(255,255,255,.85) 0 0) 0 100%/2.4px 3px no-repeat,
  linear-gradient(rgba(255,255,255,.85) 0 0) 3.6px 100%/2.4px 5px no-repeat,
  linear-gradient(rgba(255,255,255,.85) 0 0) 7.2px 100%/2.4px 7px no-repeat,
  linear-gradient(rgba(255,255,255,.85) 0 0) 10.8px 100%/2.4px 8px no-repeat; }
.svshot-batt { width: 16px; height: 8px; border-radius: 2.5px; border: 1px solid rgba(255,255,255,.5); position: relative; background: linear-gradient(90deg, #5bff42 62%, transparent 62%); }
.svshot-batt::after { content: ""; position: absolute; inset-inline-end: -3px; inset-block-start: 2px; width: 1.6px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.5); }
/* the app screen fills the gap between chrome and payoff */
.cgal-card-in .svshot .sviz { flex: 1; min-height: 0; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* money / result payoff bar */
.svshot-pay { flex: none; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; background: linear-gradient(180deg, rgba(57,255,20,.15), rgba(57,255,20,.05)); border-block-start: 1px solid rgba(57,255,20,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.svshot-pay b { font-family: var(--fh); font-size: 11.5px; font-weight: 700; color: #cfe9d2; letter-spacing: -.2px; }
.svshot-pay em { font-family: var(--fm); font-style: normal; font-weight: 800; color: #5bff42; text-shadow: 0 0 14px rgba(57,255,20,.5); }
.svshot-pay-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .svshot-pay-dot { animation: svshotPulse 2s ease-in-out infinite; }
  @keyframes svshotPulse { 0%,100% { box-shadow: 0 0 6px var(--accent); } 50% { box-shadow: 0 0 12px var(--accent), 0 0 0 3px rgba(57,255,20,.14); } }
}
/* per-screen inner padding now that chrome owns the edges */
.cgal-card-in .svshot .sviz-free2 { gap: 8px; }
.cgal-card-in .svshot .sviz-map2 { min-height: 0; }
/* MAP — search bar + live chip + toast avatar */
.svm-topbar { position: absolute; z-index: 4; inset-block-start: 8px; inset-inline: 9px; }
.svm-search { display: block; padding: 6px 9px; border-radius: 8px; font-family: var(--fh); font-size: 8.5px; color: rgba(255,255,255,.6); background: rgba(14,18,14,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.svm-chip { position: absolute; z-index: 4; inset-block-start: 34px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: 7.5px; font-weight: 700; color: #021004; background: linear-gradient(180deg,#7fff5a,var(--accent)); border-radius: 999px; padding: 3px 8px; box-shadow: 0 3px 10px rgba(57,255,20,.35); }
.svm-chip-dot { width: 4px; height: 4px; border-radius: 50%; background: #021004; }
.svm-toast-av { width: 15px; height: 15px; border-radius: 50%; flex: none; background: linear-gradient(135deg,#4a9eff,#0a7a52); }
.cgal-card-in .svshot .svm-toast { inset-block-start: auto; inset-block-end: 9px; inset-inline: 9px; z-index: 5; }
/* CAL — price cells in mono accent-neutral */
.cgal-card-in .svshot .svcal-row em { color: rgba(255,255,255,.55); }

/* Ring mockups — reduced-motion: freeze every animate-in element in its
   FINISHED state so the static accessibility view is fully populated. */
@media (prefers-reduced-motion: reduce) {
  .svshot .svm-pin.c1, .svshot .svm-pin.c2, .svshot .svm-pin.c3 { opacity: 1 !important; transform: none !important; }
  .svshot .svm-toast { opacity: 1 !important; transform: none !important; }
  .svshot .swa2-bub { opacity: 1 !important; transform: none !important; }
  .svshot .svcal-bar-fill { width: 92% !important; animation: none !important; }
  .svshot .svcal-row, .svshot .svcal-row .svcal-av, .svshot .svcal-row b, .svshot .svcal-row em { opacity: 1 !important; transform: none !important; }
  .svshot .svcal-new { opacity: 1 !important; transform: none !important; }
  .svshot .svfd-crown { opacity: 1 !important; transform: none !important; }
  .svshot .svai-type { width: 100% !important; border-inline-end: 0 !important; }
  .svshot .svai-post { opacity: 1 !important; transform: none !important; }
  .svshot .svk2-txt, .svshot .svk2-chips { opacity: 1 !important; transform: none !important; }
  .svshot .svk2-typing { display: none !important; }
}

/* ============================================================
   VISUAL AUDIT FIXES (2026-07-26)
   ============================================================ */
/* Steps3 number tile: the legacy dark-theme rule (l.2092) forced the
   digit to accent-green → invisible on the green tile. Restore dark ink. */
html[data-theme="dark"] .steps3 .step3-n { color: #021004; }

/* ============================================================
   APPLE RESTRAINT PASS (2026-07-26) — green becomes RARE.
   De-green decorative chrome (kickers, haze, glows); keep green
   ONLY on CTA / money / LIVE / hero accent word / payoff.
   Airier typography + more breathing room. Brand whisper kept
   via the tiny scissors mark (glow removed).
   ============================================================ */

/* 1 — cleaner near-black canvas: kill the green haze */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 820px at 82% -12%, rgba(57,255,20,.03), transparent 60%),
    radial-gradient(1000px 700px at -12% 32%, rgba(255,255,255,.014), transparent 58%),
    #080808;
}

/* 2 — eyebrows/kickers go quiet grey (were neon-green on EVERY header) */
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .section-head .kicker,
html[data-theme="dark"] .st-eyebrow,
html[data-theme="dark"] .mono-up.eyebrow {
  color: rgba(255,255,255,.42) !important;
  text-shadow: none !important;
  letter-spacing: .2em;
  font-weight: 500;
}
/* keep the brand scissors — but calm, no neon halo */
.kicker::before { filter: none !important; opacity: .68; }

/* 3 — typography: airier body, tighter heads (Apple cadence) */
.lead { line-height: 1.6; font-weight: 400; }
html[data-theme="dark"] .lead { color: rgba(255,255,255,.66); }
.h-display, .h-section { text-wrap: balance; }
.h-section { letter-spacing: -.038em; }
.h-display { letter-spacing: -.04em; }
.st-sub, .cgal-sub, .feat-card p, .sol-card p, .step3 p { line-height: 1.6; }

/* 4 — more breathing room under section headers */
.section-head { margin-block-end: clamp(52px, 7vw, 78px); }

/* 5 — de-neon the ambient ring halo (was a strong green wash) */
.cgal-halo { opacity: .5 !important; }

/* ===== Offer density — fit ~1 screen, mobile-first (fix fx_ms35009h) ===== */
.offer-card { padding: clamp(16px, 3vw, 32px) !important; margin-block-start: 24px; }
.offer-head { padding-block-end: 14px; gap: 12px; }
.offer-cats { margin-block-start: 16px; gap: 10px; }
.offer-cat { padding: 12px 14px 4px; }
.offer-cat-hd { margin-block-end: 8px; padding-block-end: 8px; }
.offer-cat-t { font-size: 13.5px; }
.offer-feat { padding: 6px 2px; font-size: 12.5px; gap: 8px; }
.offer-feat .of-tx { line-height: 1.25; }
.offer-feat .of-ico { width: 21px; height: 21px; font-size: 11px; }
.offer-soon { margin-block-start: 14px; padding: 13px 15px; }
.offer-soon-hd { margin-block-end: 8px; }
.offer-soon-items { gap: 7px; }
.offer-soon-item { padding: 9px 12px 9px 30px; font-size: 12px; }
@media (max-width: 720px) {
  .offer-cat { padding: 11px 13px 3px; }
  .offer-cat-hd { margin-block-end: 7px; padding-block-end: 7px; }
  .offer-feat { padding: 5px 1px; font-size: 12px; gap: 7px; }
  .offer-feat .of-ico { width: 20px; height: 20px; }
  .offer-cats { gap: 9px; }
}

/* ============================================================
   v78 — MASSIVE APPLE-RESTRAINT + POLISH PASS
   Founder rule: green is RARE = premium. Keep green ONLY on:
   primary CTA · money (₪ figures) · LIVE · verified mark.
   Everything decorative → neutral ink / near-black surfaces.
   All CSS-only (no bundle rebuild). Cascade-order overrides.
   ============================================================ */

/* 1 · Hero grant pill — calm the loud green fill → elegant glass.
      Green survives only on the coin icon + the ₪ number. */
.sell-chip.hot {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.42) !important;
  transform: none !important;
  color: var(--ink) !important;
}
.sell-chip.hot .sc-tx b { color: var(--accent) !important; }
.sell-chip.hot .sc-ico {
  background: linear-gradient(180deg, rgba(57,255,20,.16), rgba(57,255,20,.05)) !important;
  border-color: rgba(57,255,20,.34) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* 2 · Solution-ring payoff bars — neutral surface, green only on ₪ figure */
.svshot-pay {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  border-block-start: 1px solid rgba(255,255,255,.09) !important;
}
.svshot-pay b { color: rgba(255,255,255,.74) !important; }
.svshot-pay em { color: var(--accent) !important; text-shadow: 0 0 11px rgba(57,255,20,.32) !important; }
.svshot-pay-dot { background: rgba(255,255,255,.52) !important; box-shadow: none !important; }

/* 3 · Proof stat band — numbers to white (proof, not money) */
.sol-sum-stat b { color: rgba(255,255,255,.94) !important; text-shadow: none !important; }

/* 4 · Map chip / dots inside mockups — kill the neon fill */
.svm-chip {
  background: rgba(14,20,15,.92) !important;
  color: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.42) !important;
}
.svm-chip-dot { background: var(--accent) !important; }
.svm-pin { box-shadow: 0 0 6px rgba(57,255,20,.4) !important; }

/* 5 · Club money headline + ticks — keep green ink, drop the heavy glow */
.h-section .ht-green-static { text-shadow: none !important; }
.club-b-ticks span { color: rgba(255,255,255,.42); }
/* fix the muddled fraction: force the "N / 400" middle tick LTR so it reads correctly in RTL */
.club-b-ticks span:nth-child(2) { direction: ltr; unicode-bidi: isolate; }

/* 6 · Pain "relief" reveal bar — soften (green stays, calmer) */
.pain-b-fix { border-color: rgba(57,255,20,.16) !important; }

/* 7 · Reduced-motion: kill the frozen typewriter carets (stray "|" artifact) */
@media (prefers-reduced-motion: reduce) {
  .bt-caret, .svu2-caret { display: none !important; }
}

/* ============================================================
   v78b — De-halo pass: kill the "radioactive" green blooms.
   Green stays as INK/FILL for meaning; the wide glowing shadows go.
   ============================================================ */

/* Pain "relief" metric — keep the green number, drop the heavy bloom */
.pain-solved .ps-metric { text-shadow: 0 0 12px rgba(57,255,20,.28) !important; }
.pain-solved .ps-mark { box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3) !important; }

/* Section CTA blocks — remove the 80px green outer bloom, keep a hairline edge */
.seccta {
  border-color: rgba(57,255,20,.16) !important;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Accent "premium" cards — soften green borders to near-neutral (money card keeps more) */
.founding-banner { border-color: rgba(255,255,255,.1) !important; }
html[data-theme="dark"] .offer-cine { border-color: rgba(255,255,255,.1) !important; }
.fx-exit-card { box-shadow: var(--shadow-3) !important; border-color: rgba(255,255,255,.12) !important; }

/* Active solution-ring card — calm the green focus glow */
.cgal-card.on .cgal-card-in {
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 34px 74px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Sticky nav CTA — keep it green (primary) but calm its persistent glow ring */
.nav .btn-primary.btn-sm { box-shadow: 0 8px 22px -10px rgba(57,255,20,.4) !important; }

/* ============================================================
   v80 — Mockup polish + club seam fix (founder: fix all mockups)
   ============================================================ */

/* --- CLUB card: kill the one-sided green radials that made a hard
       vertical seam; uniform dark surface, neutral border, calm badge --- */
.club-glow, .club-b::before { display: none !important; }
html[data-theme="dark"] .club-b.club-cine {
  background: radial-gradient(120% 80% at 50% -10%, #12160f, #0b0b0b 60%) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.club-b-badge {
  background: rgba(57,255,20,.12) !important; color: var(--accent) !important;
  border: 1px solid rgba(57,255,20,.3); box-shadow: none !important;
}

/* --- FEED mockup: real barber photos instead of empty placeholders --- */
.spv-feed .spv-img {
  background-image: linear-gradient(180deg, rgba(0,0,0,.02) 40%, rgba(0,0,0,.5)),
    url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=70') !important;
  background-size: cover !important; background-position: center !important;
}
.spv-av, .spv-mapcard .spv-av, .spv-crow .spv-av {
  background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=70') !important;
  background-size: cover !important; background-position: center !important;
}
.spv-story:not(.me) {
  background-size: cover !important; background-position: center !important;
}
.spv-stories .spv-story:not(.me):nth-of-type(2) { background-image: url('https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=200&q=70') !important; }
.spv-stories .spv-story:not(.me):nth-of-type(3) { background-image: url('https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=200&q=70') !important; }
.spv-stories .spv-story:not(.me):nth-of-type(4) { background-image: url('https://images.unsplash.com/photo-1605497788044-5a32c7078486?auto=format&fit=crop&w=200&q=70') !important; }
.spv-stories .spv-story:not(.me):nth-of-type(5) { background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=70') !important; }

/* ===== HASAPAR premium brand animations (2026-07) ===== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hspBrandGlow { 0%,100%{ opacity:.32; transform:scale(1); } 50%{ opacity:.6; transform:scale(1.06); } }
  @keyframes hspSnip { 0%,86%,100%{ transform:rotate(0deg); } 90%{ transform:rotate(-9deg); } 95%{ transform:rotate(5deg); } }
  @keyframes hspSheen { 0%,60%{ transform:translateX(-140%); } 100%{ transform:translateX(240%); } }
  .hsp-brand-glow { animation: hspBrandGlow 3.4s ease-in-out infinite; }
  .hsp-snip { animation: hspSnip 4.6s ease-in-out infinite; transform-origin: 30% 50%; }
  .hsp-sheen { animation: hspSheen 4.2s ease-in-out infinite; }
}
.hsp-wordmark-wrap { position: relative; overflow: hidden; display: inline-flex; }
.hsp-wordmark-wrap .hsp-sheen { position: absolute; inset: 0; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent); pointer-events: none; z-index: 2; }

/* FinalCTA mega — animated brand glow + scissors snip */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hspMegaGlow { 0%,100%{ text-shadow: 0 0 46px rgba(57,255,20,.14); } 50%{ text-shadow: 0 0 74px rgba(57,255,20,.30); } }
  .final-mega { animation: hspMegaGlow 3.6s ease-in-out infinite; }
  .final-mega .fm-sciss { animation: hspSnip 4.6s ease-in-out infinite; transform-origin: 30% 50%; }
}

/* ============================================================
   v81 — Solution ring cards: fix kicker-tag overlapping the headline
   The JSX renders .cgal-tag as an in-flow block (marginBlockEnd) but the
   legacy CSS pinned it position:absolute top-corner → it floated ON TOP of
   the title on every solution card. Return it to normal flow (a clean
   kicker pill above the icon+title). Add breathing room under the header.
   ============================================================ */
.cgal-tag {
  position: static !important;
  inset: auto !important;
  align-self: flex-start;
  margin-block-end: 10px !important;
  box-shadow: none !important;
}
.cgal-card-in { display: flex; flex-direction: column; }
.cgal-static .cgal-3d { margin-block-start: 8px; }

/* v81b — Solution section header bleed: the head has inline position:relative
   (beats the static override) + a legacy inset-block-start:76px → it drops 76px
   onto the first card. Force it back into normal flow. */
.cgal-static .cgal-head { position: static !important; inset-block-start: auto !important; margin-block-end: 20px; }

/* ============================================================
   v82 — Premium polish pass: fill every mockup avatar + typography rhythm
   ============================================================ */

/* --- All small mockup avatars → real photos (were green/grey blobs) --- */
.spv-av, .spv-av.sm, .spv-av.xs, .spv-mapcard .spv-av, .spv-crow .spv-av {
  background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=70') !important;
  background-size: cover !important; background-position: center !important;
}
/* vary the CRM rows so they are not identical people */
.spv-crm .spv-crow:nth-of-type(2) .spv-av { background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=70') !important; }
.spv-crm .spv-crow:nth-of-type(3) .spv-av { background-image: url('https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?auto=format&fit=crop&w=200&q=70') !important; }
.spv-crm .spv-crow:nth-of-type(4) .spv-av { background-image: url('https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=200&q=70') !important; }
.spv-map .spv-mapcard .spv-av { background-image: url('https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=200&q=70') !important; }

/* --- Typography rhythm: tighter premium display, airy leads, balanced wrap --- */
.h-display, .hero-title { letter-spacing: -.045em; text-wrap: balance; }
.h-section { letter-spacing: -.04em; text-wrap: balance; }
.lead, .cgal-sub, .st-sub, .sph-cap-d, .sph-d { line-height: 1.62; }
/* kicker eyebrows: consistent quiet mono, never neon */
.kicker { color: rgba(255,255,255,.4) !important; letter-spacing: .14em; font-weight: 600; }
.kicker::before { opacity: .55 !important; filter: none !important; }

/* v82b — Step number tiles: bright-green fill → calm dark green-tinted tile
   (green stays as the number ink, consistent restraint) */
.steps3 .step3-n {
  background: linear-gradient(180deg, rgba(57,255,20,.14), rgba(57,255,20,.04)) !important;
  color: var(--accent-hi) !important;
  border: 1px solid rgba(57,255,20,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] .steps3 .step3-n { color: var(--accent-hi) !important; }

/* ============================================================
   v83 — Kill one-sided glow SEAMS on all cards (same bug as club).
   Re-center the ambient radials to top-center so they fade
   symmetrically (no vertical two-tone edge).
   ============================================================ */
.offer-glow {
  inset-block-start: -25% !important; inset-inline: 0 !important; transform: none !important;
  width: 100% !important; height: 120% !important;
  background: radial-gradient(55% 55% at 50% 0%, rgba(57,255,20,.1), transparent 70%) !important;
}
.offer-card::before { display: none !important; }
.cost-glow {
  inset-block-start: 0 !important; inset-inline: 0 !important; transform: none !important;
  width: 100% !important; height: 70% !important;
  background: radial-gradient(48% 60% at 50% 26%, rgba(255,59,48,.12), transparent 72%) !important;
}
.sol-feat::before {
  inset-block-start: -30% !important; inset-inline: 0 !important;
  width: 100% !important;
  background: radial-gradient(50% 50% at 50% 0%, rgba(57,255,20,.12), transparent 68%) !important;
}


/* ============================================================
   v85 — Solution GRID (founder): 3 tiles/row desktop · 2/row mobile.
   Original, non-boring: staggered columns + per-category accent +
   phone mockups that peek & scale-to-fit (container queries) + hover lift.
   ============================================================ */
.cgal-grid .cgal-stage { padding-block: 44px 48px !important; gap: 0 !important; }
.cgal-grid .cgal-3d { height: auto !important; }
.cgal-grid .cgal-ring {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important; max-width: 1200px !important; margin-inline: auto !important;
  padding-inline: 16px !important;
  flex-wrap: initial !important; transform: none !important;
  align-items: start;
}
@media (min-width: 900px) {
  .cgal-grid .cgal-ring { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; padding-inline: 32px !important; }
}
.cgal-grid .cgal-card {
  position: relative !important; inset: auto !important;
  width: auto !important; opacity: 1 !important; filter: none !important; transform: none !important;
  container-type: inline-size;
}
/* staggered columns — dynamic, not a rigid grid */
.cgal-grid .cgal-card:nth-child(even) { margin-block-start: 30px; }
@media (max-width: 560px) { .cgal-grid .cgal-card:nth-child(even) { margin-block-start: 20px; } }

.cgal-grid .cgal-card-in {
  width: 100% !important; height: auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column;
  padding: 14px 14px 0 !important; overflow: hidden;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s, border-color .38s;
}
.cgal-grid .cgal-card[data-ac="blue"]   .cgal-card-in { border-color: rgba(74,158,255,.26) !important; }
.cgal-grid .cgal-card[data-ac="violet"] .cgal-card-in { border-color: rgba(164,121,255,.26) !important; }
.cgal-grid .cgal-card[data-ac="amber"]  .cgal-card-in { border-color: rgba(255,176,32,.26) !important; }
@media (hover: hover) {
  .cgal-grid .cgal-card:hover .cgal-card-in {
    transform: translateY(-8px);
    border-color: rgba(57,255,20,.42) !important;
    box-shadow: 0 30px 72px rgba(0,0,0,.6), 0 0 44px -14px rgba(57,255,20,.45) !important;
  }
  .cgal-grid .cgal-card:hover .cgal-vizscale { transform: translateY(-10px) scale(calc(100cqw / 210)); }
}
/* the mockup peeks: fixed design width scaled to the tile, clipped + masked */
.cgal-vizwin {
  position: relative; width: 100%; aspect-ratio: 1 / 1.02; overflow: hidden;
  container-type: inline-size; margin-block-start: 12px; border-radius: 14px 14px 0 0;
  -webkit-mask: linear-gradient(#000 76%, transparent); mask: linear-gradient(#000 76%, transparent);
}
.cgal-vizscale {
  width: 210px; margin-inline: auto; transform-origin: top center;
  transform: scale(calc(100cqw / 210));
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.cgal-vizfade { display: none; }
/* compact desc + no 3D chrome in grid mode */
.cgal-grid .cgal-foot {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; padding: 0 2px 14px !important; margin-block-start: 8px !important; font-size: 12px !important;
}
.cgal-grid .cgal-bottom, .cgal-grid .cgal-hint, .cgal-grid .cgal-halo, .cgal-grid .cgal-floor, .cgal-grid .cgal-mirror { display: none !important; }
@media (min-width: 900px) { .cgal-grid .cgal-top-t { font-size: 17px !important; } .cgal-grid .cgal-foot { font-size: 13px !important; } }

/* v85b — grid tiles: bigger mockup peek + force-populate mockups (so nothing
   looks empty even under reduced-motion) + tighter proportions */
.cgal-vizwin { aspect-ratio: 1 / 0.62; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.cgal-vizscale { width: 214px; transform: scale(calc(100cqw / 214)); }
@media (hover: hover) { .cgal-grid .cgal-card:hover .cgal-vizscale { transform: translateY(-10px) scale(calc(100cqw / 214)); } }
/* end-state population of animated mockup bits inside the grid */
.cgal-grid .svm-pin { opacity: .92 !important; }
.cgal-grid .svm-toast, .cgal-grid .svm-chip, .cgal-grid .svf2-chip, .cgal-grid .svu-card { opacity: 1 !important; transform: none !important; }
/* section header (tête) — premium eyebrow + tighter rhythm */
.cgal-head .sol-kick { display: inline-block; margin-block-end: 14px; font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.42); }
.cgal-head .sol-kick b { color: var(--accent); font-weight: 700; }
.cgal-grid .cgal-head { margin-block-end: 30px; }

/* v85c — clean mockup-focused tiles: drop the long desc (headline + payoff + mockup
   carry the message), force map fully populated so no tile reads empty */
.cgal-grid .cgal-foot { display: none !important; }
.cgal-grid .cgal-vizwin { margin-block-end: 14px; }
.cgal-grid .svm-pin, .cgal-grid .svm-pin.you, .cgal-grid .svm-pin.c1, .cgal-grid .svm-pin.c2, .cgal-grid .svm-pin.c3 { opacity: 1 !important; }
.cgal-grid .svm-radar, .cgal-grid .spv-pin, .cgal-grid .spv-mapcard, .cgal-grid .spv-maptop { opacity: 1 !important; transform: none !important; }

/* v85d — map mockup: real map-grid + glow + visible pins (was reading empty) */
.cgal-grid .sviz-map2 {
  position: relative; min-height: 150px; border-radius: 10px; overflow: hidden;
  background-image:
    radial-gradient(120% 90% at 50% 42%, rgba(57,255,20,.1), transparent 68%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}
.cgal-grid .svm-pin { width: 11px !important; height: 11px !important; }
.cgal-grid .svm-pin.you { width: 15px !important; height: 15px !important; }

/* v85e — force the map mockup body to a real height (it collapsed to 0 in the
   scaled grid tile) so the map reads full, not empty */
.cgal-grid .svshot-map .sviz-map2 {
  height: 158px !important; min-height: 158px !important; margin-block-start: 10px !important;
}

/* ============================================================
   v86 — Solution grid: massive UI/UX + animation pass
   Per-category accent (variety) · scroll-reveal stagger ·
   premium hover (accent glow + mockup parallax) · mobile tap · chrome
   ============================================================ */
/* per-card accent — blue / violet / amber / green (kills the mono-green boredom) */
.cgal-grid .cgal-card { --ca: var(--accent); --caR: 57,255,20; }
.cgal-grid .cgal-card[data-ac="blue"]   { --ca:#4a9eff; --caR:74,158,255; }
.cgal-grid .cgal-card[data-ac="violet"] { --ca:#a479ff; --caR:164,121,255; }
.cgal-grid .cgal-card[data-ac="amber"]  { --ca:#ffb020; --caR:255,176,32; }
.cgal-grid .cgal-tag { color: var(--ca) !important; background: rgba(var(--caR),.1) !important; border-color: rgba(var(--caR),.32) !important; transition: background .3s, box-shadow .3s; }
.cgal-grid .cgal-lbl-ic { color: var(--ca) !important; transition: transform .3s cubic-bezier(.34,1.5,.5,1); }
.cgal-grid .cgal-card-in { border-color: rgba(var(--caR),.22) !important; background: linear-gradient(180deg, rgba(var(--caR),.04), transparent 40%), rgba(11,16,11,.96) !important; }
.cgal-grid .cgal-card-in > div[aria-hidden="true"] { background: linear-gradient(90deg, transparent, rgba(var(--caR),.7), transparent) !important; }

/* scroll-reveal entrance, staggered by column (d1..d3 delays already defined) */
.cgal-grid .cgal-card.reveal { opacity: 0; transform: translateY(36px) scale(.975) !important; transition: opacity .66s cubic-bezier(.34,1.25,.5,1), transform .66s cubic-bezier(.34,1.25,.5,1); }
.cgal-grid .cgal-card.reveal.in { opacity: 1; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .cgal-grid .cgal-card.reveal { opacity: 1; transform: none !important; } }

/* premium hover (desktop): accent glow + mockup parallax rise + kicker/glyph pop */
@media (hover: hover) {
  .cgal-grid .cgal-card:hover .cgal-card-in {
    transform: translateY(-9px);
    border-color: rgba(var(--caR),.5) !important;
    box-shadow: 0 34px 76px rgba(0,0,0,.62), 0 0 48px -14px rgba(var(--caR),.55) !important;
  }
  .cgal-grid .cgal-card:hover .cgal-vizscale { transform: translateY(-12px) scale(calc(100cqw / 214)); }
  .cgal-grid .cgal-card:hover .cgal-tag { background: rgba(var(--caR),.18) !important; box-shadow: 0 4px 16px rgba(var(--caR),.32); }
  .cgal-grid .cgal-card:hover .cgal-lbl-ic { transform: scale(1.14) rotate(-4deg); }
}
/* mobile tap feedback */
@media (hover: none) { .cgal-grid .cgal-card:active .cgal-card-in { transform: scale(.98); transition: transform .12s; } }

/* ============================================================
   v87 — grid tiles: sharper title + visible improved text
   ============================================================ */
/* order: kicker → title+chip → text → mockup */
.cgal-grid .cgal-tag { order: 0; }
.cgal-grid .cgal-top { order: 1; }
.cgal-grid .cgal-foot { order: 2; }
.cgal-grid .cgal-vizwin { order: 3; }
/* sharper, bigger title */
.cgal-grid .cgal-top-t { font-size: 18px !important; letter-spacing: -.04em !important; line-height: 1.16 !important; font-weight: 900 !important; }
@media (min-width: 900px) { .cgal-grid .cgal-top-t { font-size: 21px !important; } }
/* bring the text back — clean, readable, 2-line clamp */
.cgal-grid .cgal-foot {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px !important; line-height: 1.5 !important; font-weight: 500 !important;
  color: rgba(255,255,255,.6) !important; letter-spacing: -.1px;
  padding: 0 2px !important; margin-block: 7px 2px !important;
}
@media (min-width: 900px) { .cgal-grid .cgal-foot { font-size: 13.5px !important; margin-block: 9px 4px !important; } }

/* ============================================================
   v88 — per-tile EFFECT line: [tool] → [result] (cause → effect)
   e.g. "תזכורות WhatsApp → −60% הברזות". Per-category accent.
   ============================================================ */
.cgal-grid .cgal-fx {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: 8px; padding: 3px 10px; border-radius: 8px;
  background: rgba(var(--caR),.09); border: 1px solid rgba(var(--caR),.26);
  font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  max-width: 100%; box-sizing: border-box;
}
.cgal-grid .cgal-fx-tool { color: rgba(255,255,255,.56); white-space: nowrap; }
.cgal-grid .cgal-fx-arr { color: var(--ca); flex: none; }
.cgal-grid .cgal-fx-res { color: var(--ca); font-weight: 800; white-space: nowrap; }
@media (min-width: 900px) { .cgal-grid .cgal-fx { font-size: 11px; padding: 4px 11px; margin-block-start: 9px; } }

/* ============================================================
   v89 — mockups ALWAYS 100% visible (no clip / no fade), any screen.
   Reserve the exact scaled height (via JS-measured --vizH) so the full
   phone shows; scale-to-fit width via container queries. Masonry heights.
   ============================================================ */
.cgal-vizwin {
  aspect-ratio: auto !important;
  height: calc(var(--vizH, 340px) * 100cqw / 214) !important;
  overflow: visible !important;
  -webkit-mask: none !important; mask: none !important;
  margin-block-start: 12px !important; margin-block-end: 4px;
  border-radius: 0;
}
.cgal-vizscale { width: 214px !important; transform-origin: top center; transform: scale(calc(100cqw / 214)); }
/* hover: whole card lifts (mockup no longer detaches / overflows) */
@media (hover: hover) {
  .cgal-grid .cgal-card:hover .cgal-vizscale { transform: scale(calc(100cqw / 214)); }
}
/* tiles size to content -> masonry; keep them top-aligned */
.cgal-grid .cgal-ring { align-items: start !important; }

/* v89b — polish: bottom framing so the mockup isn't flush to the border,
   soft depth on the floating mockup */
.cgal-grid .cgal-card-in { padding-block-end: 16px !important; }
.cgal-grid .cgal-vizscale { filter: drop-shadow(0 14px 30px rgba(0,0,0,.42)); }

/* ============================================================
   v90 — global reduced-motion killswitch (IS 5568 / WCAG).
   Guarantees NO infinite/long motion for users who ask for less —
   forces every animation & transition to complete instantly.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* v91 — kill the double sticky (header CTA + bottom bar = green sandwich).
   Keep the sticky header as the ONE sticky; drop the bottom mobile bar. */
.fx-mbar, .mobile-cta { display: none !important; }

/* v91b — instant skeleton: show a brand placeholder while #root is empty
   (before React renders) so the first paint is never a blank screen. */
#root:empty {
  min-height: 100svh; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 28%, #10160f, #0b0b0b 70%);
}
#root:empty::before {
  content: "HASAPAR";
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 900; font-size: 34px;
  letter-spacing: .04em; color: rgba(255,255,255,.16);
  animation: rootPulse 1.5s ease-in-out infinite;
}
@keyframes rootPulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* ============================================================
   v94 — SolveBridge pivot: TOP-PREMIUM upgrade
   ============================================================ */
/* premium Hebrew eyebrow (killed the mono "// הפתרון") */
.solve-bridge .sb-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-block-end: 16px;
  font-family: var(--fh); font-size: clamp(15px, 3.4vw, 19px); font-weight: 800;
  letter-spacing: -.02em; color: rgba(255,255,255,.9);
}
.solve-bridge .sb-eyebrow b { color: var(--accent); text-shadow: 0 0 22px rgba(57,255,20,.4); }
.solve-bridge .sb-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .solve-bridge .sb-eyebrow-dot { animation: sbDot 2s ease-in-out infinite; }
  @keyframes sbDot { 0%,100% { box-shadow: 0 0 8px var(--accent); } 50% { box-shadow: 0 0 18px var(--accent), 0 0 34px rgba(57,255,20,.5); } }
}
/* the money-back hero — bigger, cleaner, stronger bloom */
.solve-bridge .sb-new {
  font-size: clamp(46px, 12vw, 88px) !important;
  text-shadow: 0 0 40px rgba(57,255,20,.55), 0 0 90px rgba(57,255,20,.25) !important;
}
.solve-bridge .sb-sub { margin-block-start: 18px; font-weight: 600; }
/* gains grid — tighter, the ₪100 grant pill dominates */
.solve-bridge .sb-pills { gap: 10px; margin-block-start: 30px; max-width: 560px; margin-inline: auto; }
.solve-bridge .sb-pill { font-weight: 600; letter-spacing: -.1px; padding: 9px 15px; }
.solve-bridge .sb-pill.hot {
  font-size: 14px; padding: 11px 18px; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(57,255,20,.34), 0 14px 34px -8px rgba(57,255,20,.4) !important;
}
.solve-bridge .sb-pill.hot b { text-shadow: 0 0 16px rgba(57,255,20,.5); }
.solve-bridge .sb-lead { margin-block-start: 26px; font-weight: 500; }
.solve-bridge { padding-block-end: 22px; }

/* ═══ PREMIUM PILL UPGRADE ═══ */
.solve-bridge .sb-pill {
  position: relative; overflow: hidden;
  padding: 10px 18px 10px 14px; gap: 9px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.15px; color: #dffce7;
  background: linear-gradient(145deg, rgba(57,255,20,.12) 0%, rgba(57,255,20,.03) 60%, rgba(0,0,0,.1) 100%);
  border: 1px solid rgba(57,255,20,.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 -1px 0 rgba(0,0,0,.15) inset, 0 3px 18px rgba(0,0,0,.32);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease;
}
.solve-bridge .sb-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  opacity: 0; transition: opacity .45s ease, transform .5s ease;
  transform: translateX(-70%); pointer-events: none;
}
.solve-bridge .sb-pill:hover { transform: translateY(-2px) scale(1.03); border-color: rgba(57,255,20,.5); background: linear-gradient(145deg, rgba(57,255,20,.17) 0%, rgba(57,255,20,.06) 60%, rgba(0,0,0,.08) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 24px rgba(0,0,0,.4), 0 0 20px rgba(57,255,20,.22); }
.solve-bridge .sb-pill:hover::before { opacity: 1; transform: translateX(70%); }
.solve-bridge .sb-ic { width: 20px; height: 20px; box-shadow: 0 0 8px rgba(57,255,20,.45), inset 0 1px 0 rgba(255,255,255,.22); background: linear-gradient(155deg, #5dff42, #39ff14 62%); }
.solve-bridge .sb-pill b { font-size: 14.5px; }
.solve-bridge .sb-pill.hot {
  padding: 11px 20px 11px 16px; font-size: 14px;
  background: linear-gradient(140deg, rgba(57,255,20,.24) 0%, rgba(57,255,20,.10) 55%, rgba(57,255,20,.04) 100%);
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 22px rgba(0,0,0,.38), 0 0 32px rgba(57,255,20,.28), 0 0 0 1px rgba(57,255,20,.16) !important;
  color: #fff;
}
.solve-bridge .sb-pill.hot b { font-size: 15px; text-shadow: 0 0 20px rgba(57,255,20,.65) !important; }
.solve-bridge .sb-pill.hot:hover { transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 32px rgba(0,0,0,.45), 0 0 48px rgba(57,255,20,.4), 0 0 0 1px rgba(57,255,20,.28) !important; }
@media (max-width: 560px) {
  .solve-bridge .sb-pill { font-size: 12.5px; padding: 9px 15px 9px 12px; }
  .solve-bridge .sb-pill.hot { padding: 10px 17px 10px 13px; font-size: 13px; }
}

/* ============================================================
   v95 — Solution section header: Apple-level premium + HASAPAR branding
   ============================================================ */
.cgal-grid .cgal-head { max-width: 860px; margin-inline: auto; padding-inline: 16px; }
/* branded eyebrow — glass pill, scissors mark + live pulse dot */
.cgal-grid .sol-kick {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-family: var(--fm) !important; font-size: 11px !important; font-weight: 700;
  letter-spacing: .06em !important; color: rgba(255,255,255,.6) !important;
  margin-block-end: 22px !important;
}
.cgal-grid .sol-kick b { color: var(--accent); font-weight: 700; }
.cgal-grid .sol-kick-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .cgal-grid .sol-kick-dot { animation: solKickDot 2.2s ease-in-out infinite; }
  @keyframes solKickDot { 0%,100% { box-shadow: 0 0 7px var(--accent); } 50% { box-shadow: 0 0 16px var(--accent), 0 0 30px rgba(57,255,20,.45); } }
}
/* Apple-level display title — bigger, tighter, one green accent line */
.cgal-grid .cgal-head .h-section {
  font-size: clamp(40px, 8.4vw, 78px) !important;
  letter-spacing: -.055em !important; line-height: 1.0 !important; font-weight: 900 !important;
  margin-block: 0 0 !important; text-wrap: balance;
}
.cgal-grid .cgal-head .ht-green-static { text-shadow: 0 0 40px rgba(57,255,20,.28) !important; }
.cgal-grid .cgal-sub {
  font-size: clamp(16px, 2.5vw, 21px) !important; line-height: 1.5 !important;
  color: rgba(255,255,255,.5) !important; margin-block-start: 20px !important; max-width: 46ch;
}
.cgal-grid .cgal-sub b { color: rgba(255,255,255,.82) !important; font-weight: 700; }

/* ============================================================
   v96 — מועדון ₪200: Apple-level MONEY hero (the strongest hook)
   ============================================================ */
.club-hero-money { position: relative; z-index: 1; text-align: center; margin-block: 4px 32px; }
.club-badge2 {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.28);
  font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); margin-block-end: 20px;
}
.club-badge2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.club-eq { display: block; font-family: var(--fh); font-size: clamp(15px, 2.5vw, 20px); font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: -.02em; }
.club-eq b { color: var(--accent); font-family: var(--fm); }
.club-eq-arr { color: rgba(255,255,255,.3); margin-inline: 5px; font-family: var(--fm); }
.club-big { font-family: var(--fm); font-weight: 900; font-size: clamp(80px, 17vw, 152px); line-height: .86; letter-spacing: -.055em; margin-block: 10px 2px; }
.club-big .ht-green-static { text-shadow: 0 0 60px rgba(57,255,20,.42), 0 0 130px rgba(57,255,20,.2); }
.club-big-sub { font-family: var(--fh); font-size: clamp(24px, 5vw, 40px); font-weight: 900; letter-spacing: -.035em; line-height: 1; color: rgba(255,255,255,.92); }
@media (prefers-reduced-motion: no-preference) {
  .club-badge2-dot { animation: solKickDot 2.2s ease-in-out infinite; }
  .club-hero-money .club-big { animation: clubBigIn .7s cubic-bezier(.2,1.2,.4,1) both; }
  @keyframes clubBigIn { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: none; } }
}
/* center the rest of the club card under the hero */
.club-b .club-earn, .club-b .club-b-bar, .club-b .club-b-ticks, .club-b .club-bank { max-width: 640px; margin-inline: auto; }

/* ============================================================
   v100 — KATCH redesign: centered vertical flow.
   Lead with the ₪1 REVEAL (barber doesn't know it exists),
   then the psychology equation → numbers → the one objection.
   ============================================================ */
.katch-flow { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(20px, 3.4vw, 30px); max-width: 720px; }
.katch-flow .katch-h { margin: 0; }
.katch-flow .ht-green-static { color: var(--accent); }

/* coin — recentre it out of the old grid area */
.katch-flow .katch3-coin-wrap { grid-area: auto; margin: 0; }

/* THE REVEAL — quick, unmissable ₪0/₪1 explainer */
.katch-reveal { display: flex; flex-direction: column; gap: 6px; }
.katch-reveal .kr-1 { margin: 0; font-family: var(--fh); font-weight: 700; font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-2); letter-spacing: -.01em; }
.katch-reveal .kr-2 { margin: 0; font-family: var(--fh); font-weight: 800; font-size: clamp(19px, 3.2vw, 27px); line-height: 1.28; letter-spacing: -.02em; color: var(--ink); }
.katch-reveal b { font-weight: 900; }
.katch-reveal b.acc { color: var(--accent); text-shadow: 0 0 22px rgba(57,255,20,.34); }

/* THE EQUATION — client ₪1 → committed → shows up */
.katch-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 15px); }
.katch-eq .ke-node { font-family: var(--fh); font-weight: 900; letter-spacing: -.03em; font-size: clamp(18px, 3vw, 27px); color: var(--ink); padding: 8px 15px; border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.katch-eq .ke-p { font-family: var(--fm); color: var(--ink); border-color: rgba(255,255,255,.14); }
.katch-eq .ke-g { color: var(--accent); border-color: rgba(57,255,20,.32); background: radial-gradient(120% 130% at 50% 0%, rgba(57,255,20,.12), transparent 70%); text-shadow: 0 0 26px rgba(57,255,20,.4); }
.katch-eq .ke-arr { color: rgba(255,255,255,.28); flex: 0 0 auto; }
.katch-eq-sub { margin: 0; max-width: 560px; font-family: var(--fh); font-weight: 600; font-size: clamp(14px, 2vw, 16.5px); line-height: 1.55; color: var(--ink-2); }
.katch-eq-sub b { color: var(--ink); font-weight: 800; }

/* NUMBERS — 3 tight proof figures */
.katch-stats { display: flex; align-items: stretch; justify-content: center; gap: 0; width: 100%; max-width: 500px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.02); }
.katch-stats .ks { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: clamp(16px, 2.6vw, 22px) 8px; }
.katch-stats .ks-sep { border-inline: 1px solid rgba(255,255,255,.08); }
.katch-stats .ks b { font-family: var(--fm); font-weight: 800; font-size: clamp(26px, 5vw, 38px); line-height: 1; color: var(--accent); text-shadow: 0 0 24px rgba(57,255,20,.3); }
.katch-stats .ks .ks-u { font-size: .62em; }
.katch-stats .ks i { font-style: normal; font-family: var(--fh); font-weight: 600; font-size: clamp(11.5px, 1.7vw, 13.5px); color: var(--ink-3); letter-spacing: -.1px; }

/* THE ONE OBJECTION — pre-empt & flip it */
.katch-obj { max-width: 560px; padding: clamp(15px, 2.4vw, 20px) clamp(17px, 2.8vw, 24px); border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09); border-inline-start: 3px solid var(--accent); text-align: start; }
.katch-obj .ko-tag { display: block; font-family: var(--fh); font-weight: 800; font-size: clamp(15px, 2.2vw, 17px); color: var(--ink); letter-spacing: -.02em; margin-block-end: 6px; }
.katch-obj p { margin: 0; font-family: var(--fh); font-weight: 600; font-size: clamp(13.5px, 2vw, 15.5px); line-height: 1.55; color: var(--ink-2); }
.katch-obj b { color: var(--accent); font-weight: 800; }

/* quote — recentre out of old grid area */
.katch-flow .katch3-byline { grid-area: auto; margin: 0; opacity: .92; }

@media (max-width: 560px) {
  .katch-eq .ke-node { font-size: 17px; padding: 7px 12px; }
}

/* ============================================================
   v101 — FIX: .ht-green-static gradient-clip text disappears
   under the word-split reveal animation (fx.js wraps each word
   in <span class="tx-w">, but `background`/`background-clip`
   are NOT inherited CSS properties — only -webkit-text-fill-color
   is — so every word-span rendered fully transparent with no
   gradient behind it). Force-inherit onto every split word.
   Site-wide fix (hits all .h-section headings using .ht-green-static,
   not just #katch).
   ============================================================ */
.ht-green-static .tx-w {
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  -webkit-text-fill-color: inherit;
}

/* ============================================================
   v106 — TEXT DESIGN PASS (founder): every big white headline sat
   perfectly flat against the near-black bg — only the green accent
   words had any depth (glow via filter:drop-shadow). Give the white
   ink the same "lifted off the surface" quality site-wide, and add
   a touch of cinematic blur-settle to the word-by-word title reveal
   (anim.js already splits every .h-section into .aw word-spans and
   flips on .words-in — this only adds a material, no new JS).
   ============================================================ */
.h-section, .h-display {
  text-shadow: 0 3px 26px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.2);
}
html[data-theme="dark"] .h-section .ht-green-static,
.h-section .ht-green-static {
  text-shadow: none; /* keeps the gradient-clip crisp — its own glow is a filter, not a text-shadow */
}
.h-card {
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.h-section .aw {
  filter: blur(5px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), filter .5s cubic-bezier(.2,.8,.2,1);
}
.h-section.words-in .aw { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .h-section .aw { filter: none !important; }
}

/* ============================================================
   v108 — KATCH REAL-CHECKOUT PROOF (founder): show the actual /book
   checkout card (not a claim, not an illustration) inside the מה הקאץ׳
   section, so a barber sees exactly what makes the ₪1 mechanism real.
   Mirrors the real component (docs/arch/payments.md — the 3-row
   payment card) by hand, same convention as every other mockup on
   this page (coded, not screenshotted).
   ============================================================ */
.katch-proof {
  max-width: 480px; margin-inline: auto; margin-block-start: 40px; text-align: center;
  opacity: 0; transform: translateY(34px) scale(.97);
  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
}
.katch-proof.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .katch-proof { opacity: 1; transform: none; } }
.kp-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fm); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); margin-block-end: 14px; }
.kp-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .kp-tag-dot { animation: pulse-dot 1.8s ease-in-out infinite; } }

/* phone frame — the proof card as a real screenshot, not a bare block */
.kp-phone {
  position: relative;
  max-width: 340px; margin-inline: auto;
  background: linear-gradient(165deg, #232323, #0a0a0a);
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--shadow-phone), 0 0 0 1px rgba(255,255,255,.06);
}
.kp-phone-shine {
  position: absolute; inset: 9px; z-index: 3; border-radius: 26px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 30%, transparent 78%, rgba(255,255,255,.05) 100%);
}
.kp-phone-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 6px;
  font-family: var(--fm); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.92);
}
.kp-phone-icons { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.92); }
.kp-phone-screen {
  border-radius: 26px;
  padding: 6px 14px 16px;
  background: radial-gradient(120% 90% at 50% -10%, #141c14, #0a0a0a 60%);
}
.kp-phone-screen .kp-card { margin-block-end: 14px; }
.kp-phone-screen .kp-cta { margin-block-start: 4px; }

.kp-card {
  position: relative;
  text-align: start;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 4px 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.kp-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
}
.kp-row { display: flex; align-items: center; gap: 12px; padding-block: 16px; }
.kp-row-t { flex: 1; min-width: 0; }
.kp-row-l { font-family: var(--fh); font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-row-s { font-family: var(--fh); font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-block-start: 3px; display: flex; align-items: center; gap: 6px; }
.kp-row-s b { color: var(--ink-2); }
.kp-blue-dot { width: 6px; height: 6px; border-radius: 50%; background: #4a9eff; box-shadow: 0 0 6px rgba(74,158,255,.7); flex-shrink: 0; }
.kp-pill { font-family: var(--fh); font-size: 10.5px; font-weight: 700; color: var(--ink-3); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 2px 9px; }
.kp-row-v { font-family: var(--fm); font-weight: 900; font-size: 19px; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.kp-row-v.alt { color: var(--ink-2); font-size: 22px; flex-direction: column; align-items: flex-end; gap: 1px; }
.kp-ic-info { cursor: pointer; border: 1.4px solid var(--accent-hi); background: none; padding: 0; }
.kp-ic-info:hover, .kp-ic-info[aria-expanded="true"] { background: var(--accent-hi); color: #021004; }
.kp-info-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20;
  width: min(260px, 84vw);
  background: #101410; border: 1px solid rgba(57,255,20,.28); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 20px 44px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  animation: kp-pop-in .22s cubic-bezier(.2,.8,.2,1) both;
}
.kp-info-title { font-family: var(--fh); font-size: 13px; font-weight: 900; color: var(--ink); margin: 0 0 8px; padding-inline-end: 22px; }
.kp-info-pop p { font-family: var(--fh); font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink-2); margin: 0 0 8px; padding-inline-end: 22px; }
.kp-info-pop p:last-of-type { margin-block-end: 0; }
.kp-info-pop p b { color: var(--accent-hi); }
.kp-info-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: var(--ink-3); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@keyframes kp-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kp-info-pop { animation: none; } }
.kp-vat { font-family: var(--fh); font-size: 10px; font-weight: 600; color: var(--ink-4); letter-spacing: 0; }
.kp-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-3); }
.kp-ic-lock, .kp-ic-card { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hi); }
.kp-ic-info { width: 16px; height: 16px; border-radius: 50%; border: 1.4px solid var(--accent-hi); color: var(--accent-hi); font-family: var(--fm); font-size: 10px; font-weight: 700; font-style: italic; }
.kp-div { height: 1px; background: rgba(255,255,255,.08); }
.kp-check { display: flex; align-items: flex-start; gap: 10px; padding-block: 14px; font-family: var(--fh); font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.45; }
.kp-check-ic {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent-hi); color: #021004;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex-shrink: 0; margin-block-start: 1px;
  transform: scale(0);
}
.katch-proof.reveal.in .kp-check-ic {
  animation: kp-check-pop .5s cubic-bezier(.34,1.4,.5,1) .55s both;
}
@keyframes kp-check-pop {
  0% { transform: scale(0); box-shadow: 0 0 0 rgba(57,255,20,0); }
  60% { transform: scale(1.25); box-shadow: 0 0 18px rgba(57,255,20,.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(57,255,20,0); }
}
@media (prefers-reduced-motion: reduce) { .kp-check-ic { animation: none !important; transform: none; } }
.kp-check u { color: var(--ink-2); text-decoration-color: rgba(255,255,255,.3); }

.kp-quote { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--ink-2); margin-block: 20px 14px; letter-spacing: -.01em; }
.kp-quote b { color: var(--ink); }

.kp-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border-radius: 16px;
  background: linear-gradient(180deg, #5bff42, var(--accent-hi) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 26px rgba(57,255,20,.32);
  font-family: var(--fh); font-weight: 900; font-size: 15px; color: #021004; letter-spacing: -.01em;
}
.kp-cta-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(2,16,4,.16); border-radius: 10px; padding: 5px 10px; font-family: var(--fm); font-weight: 900; font-size: 13px; }

.kp-caption { font-family: var(--fh); font-size: 13px; font-weight: 600; color: var(--ink-3); line-height: 1.5; margin-block-start: 18px; text-align: center; }
.kp-caption b { color: var(--ink); }

@media (max-width: 480px) {
  .kp-card { padding: 3px 14px; }
  .kp-row { gap: 10px; padding-block: 13px; }
  .kp-row-v { font-size: 17px; }
  .kp-row-v.alt { font-size: 19px; }
  .kp-info-pop { inset-inline-end: -14px; }
}

/* ============================================================
   v113 — /fix queue (founder): hero live-proof ticker elevated
   into a real chip (was bare text hanging under the avatars) + a
   "LIVE" badge instead of a lone pulsing dot, matching the rest of
   the page's chip language.
   ============================================================ */
.hero-ticker-wrap { display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.hero-ticker-chip {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-ticker-live { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-weight: 800; font-size: 9.5px; letter-spacing: .06em; color: var(--accent-hi); flex-shrink: 0; }
.hero-ticker-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 6px rgba(57,255,20,.8); }
@media (prefers-reduced-motion: no-preference) { .hero-ticker-live-dot { animation: pulse-dot 1.6s ease-in-out infinite; } }
.hero-ticker-chip .hero-ticker {
  display: inline-flex; align-items: center; font-family: var(--fh); font-weight: 700; font-size: 12.5px;
  letter-spacing: -.1px; color: rgba(255,255,255,.78); animation: fadeUp .4s ease-out;
}
@media (prefers-reduced-motion: reduce) { .hero-ticker-chip .hero-ticker { animation: none; } }
@media (max-width: 560px) { .hero-ticker-chip { padding: 4px 10px 4px 8px; } .hero-ticker-chip .hero-ticker { font-size: 12px; } }

/* Hero feature-set tags — replaces the flat "·"-separated wall of text with
   scannable neutral tags (quiet, distinct from SellChips' loud accent chips
   right above them — this row is the toolkit list, not the money pitch). */
.hero-feat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-feat-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fh); font-size: 12px; font-weight: 700; letter-spacing: -.1px;
  color: rgba(255,255,255,.68); background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 5px 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.hero-feat-tag svg { color: var(--accent-hi); flex-shrink: 0; opacity: .85; }
.reveal.in .hero-feat-tag { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-feat-tag { opacity: 1; transform: none; transition: none; } }

/* Hero brand mark — mark + wordmark lockup, the FIRST thing in hero content.
   Punches the brand name in immediately, above the FOMO ribbon, for recall. */
/* ═══ HERO LOGO — big animated premium lockup ═══ */
.hero-logo-hero {
  position: relative; display: inline-flex; align-items: center;
  margin-block-end: 22px;
  opacity: 0; transform: translateY(-14px) scale(.92); filter: blur(8px);
  animation: hlhIn 1s .08s cubic-bezier(.16,.84,.24,1) forwards;
}
.hlh-inner { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 14px; }
.hlh-mark { display: inline-flex; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.hlh-halo {
  position: absolute; inset: -60% -18%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 130% at 32% 50%, rgba(57,255,20,.26), rgba(57,255,20,.06) 45%, transparent 72%);
  filter: blur(26px);
}
@keyframes hlhIn { to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hlh-inner { animation: hlhFloat 5s 1.1s ease-in-out infinite; }
  @keyframes hlhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .hlh-halo { animation: hlhPulse 4.2s ease-in-out infinite; }
  @keyframes hlhPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
  /* one-shot shine sweep across the wordmark after entrance */
  .hlh-inner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
    transform: translateX(-120%); animation: hlhShine 3.4s 1.3s ease-in-out infinite;
  }
  @keyframes hlhShine { 0% { transform: translateX(-120%); } 26%,100% { transform: translateX(120%); } }
}
@media (prefers-reduced-motion: reduce) { .hero-logo-hero { animation: none; opacity: 1; transform: none; filter: none; } .hlh-halo { animation: none; } .hlh-inner::after { display: none; } }
/* mobile — keep it BIG + dominant, tighten gap so it fits 390px */
@media (max-width: 560px) { .hlh-inner { gap: 11px; } .hero-logo-hero { margin-block-end: 10px; display: flex; justify-content: flex-end; } }
@media (max-width: 380px) { .hlh-inner { gap: 9px; } }

/* Nav collision fix — bigger logo (2026-07-29 branding pass) + the CTA button
   were wrapping into each other on narrow mobile. Keep CTA on one line, shrink
   it slightly on very narrow screens instead of letting anything wrap. */
.nav-inner .btn-sm { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) {
  .nav-inner { gap: 8px; }
  .nav-inner .btn-sm { font-size: 12px; padding-inline: 11px; height: 36px; }
  .brand span span { font-size: 22px !important; }
}

/* Pain-card resolve row — real HASAPAR logo mark instead of a generic checkmark
   (2026-07-29). .pb-g used to be forced into a plain circular checkmark badge by
   earlier layers; it now wraps a <LogoMark>, so undo the circle/checkmark styling
   and let the tile render itself. */
.pains-grid .pain-b-cine .pain-b-fix .pb-g { background: none; box-shadow: none; border-radius: 0; width: auto; height: auto; display: inline-flex; filter: drop-shadow(0 0 8px rgba(57,255,20,.35)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pains-grid .pain-b-cine:hover .pain-b-fix .pb-g { transform: scale(1.08) rotate(-4deg); }
.pain-b-fix-tx { flex: 1; min-width: 0; }
.pbf-brand { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-end: 4px; }


/* ═══ CATCH v2 — engine flywheel + ₪100 reward + win-win-win + FOMO + CTA ═══ */
.kf-engine { width: 100%; max-width: 620px; padding: clamp(18px,2.6vw,24px) clamp(16px,2.4vw,22px); border-radius: 20px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(57,255,20,.09), transparent 58%), rgba(255,255,255,.02);
  border: 1px solid rgba(57,255,20,.24); box-shadow: 0 8px 32px -12px rgba(57,255,20,.3), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative; overflow: hidden; }
.kf-engine::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.kf-label { font-family: var(--fh); font-weight: 900; font-size: clamp(15px,2.2vw,17px); color: var(--ink); margin-block-end: 16px; letter-spacing: -.02em; }
.kf-track { display: flex; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.kf-node { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.kf-node-hi { background: linear-gradient(160deg, rgba(57,255,20,.14), rgba(57,255,20,.04)); border-color: rgba(57,255,20,.4); box-shadow: 0 0 20px -6px rgba(57,255,20,.5); }
.kf-ic { font-family: var(--fm); font-weight: 900; font-size: clamp(15px,2.4vw,18px); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; min-height: 26px; letter-spacing: -.02em; }
.kf-node-c .kf-ic, .kf-node-hi .kf-ic { color: var(--accent); text-shadow: 0 0 14px rgba(57,255,20,.5); }
.kf-tx { font-family: var(--fh); font-weight: 700; font-size: clamp(10.5px,1.6vw,12px); color: var(--ink-2); text-align: center; line-height: 1.25; }
.kf-arr { align-self: center; font-family: var(--fm); font-weight: 900; font-size: 20px; color: var(--accent); opacity: .55; flex-shrink: 0; }
.kf-desc { margin: 16px 0 0; font-family: var(--fh); font-size: clamp(12.5px,1.9vw,14px); line-height: 1.6; color: var(--ink-2); text-align: center; }
.kf-desc b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .kf-engine.in .kf-node { animation: kf-pop .5s cubic-bezier(.32,.72,0,1) backwards; }
  .kf-engine.in .kf-node:nth-child(1) { animation-delay: .05s; }
  .kf-engine.in .kf-node:nth-child(3) { animation-delay: .15s; }
  .kf-engine.in .kf-node:nth-child(5) { animation-delay: .25s; }
  .kf-engine.in .kf-node:nth-child(7) { animation-delay: .35s; }
  @keyframes kf-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
  .kf-node-hi { animation: kf-glow 2.8s ease-in-out infinite; }
  @keyframes kf-glow { 0%,100% { box-shadow: 0 0 20px -6px rgba(57,255,20,.5); } 50% { box-shadow: 0 0 32px -4px rgba(57,255,20,.78); } }
  .kf-arr { animation: kf-flow 2.4s ease-in-out infinite; }
  @keyframes kf-flow { 0%,100% { opacity: .35; transform: translateX(0); } 50% { opacity: .9; transform: translateX(3px); } }
}
@media (max-width: 560px) { .kf-track { flex-wrap: wrap; gap: 8px; } .kf-node { flex: 1 1 40%; } .kf-arr { display: none; } }

/* ₪100 reward strip */
.kf-reward { width: 100%; max-width: 620px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(57,255,20,.12), rgba(57,255,20,.03) 70%); border: 1.5px solid rgba(57,255,20,.34);
  box-shadow: 0 8px 26px -10px rgba(57,255,20,.4); text-align: start; }
.kf-reward-coin { flex-shrink: 0; font-family: var(--fm); font-weight: 900; font-size: clamp(20px,3.4vw,26px); color: #021004;
  padding: 10px 14px; border-radius: 14px; background: linear-gradient(160deg,#5bff42,var(--accent) 60%);
  box-shadow: 0 0 22px rgba(57,255,20,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.kf-reward-tx { display: flex; flex-direction: column; gap: 4px; }
.kf-reward-tx b { font-family: var(--fh); font-weight: 900; font-size: clamp(14px,2.1vw,16px); color: var(--ink); letter-spacing: -.02em; }
.kf-reward-tx span { font-family: var(--fh); font-weight: 600; font-size: clamp(12.5px,1.9vw,13.5px); color: var(--ink-2); line-height: 1.5; }
.kf-reward-tx .acc, .kf-reward-tx span b { color: var(--accent); }
.kf-reward-tx span b[dir="ltr"] { font-family: var(--fm); }

/* win-win-win */
.kf-www { width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.kf-www-col { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px 10px; border-radius: 15px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: center; }
.kf-www-hi { background: linear-gradient(160deg, rgba(57,255,20,.1), rgba(57,255,20,.02)); border-color: rgba(57,255,20,.32); }
.kf-www-who { font-family: var(--fh); font-weight: 800; font-size: 12px; color: var(--ink-3); }
.kf-www-col b { font-family: var(--fm); font-weight: 900; font-size: clamp(20px,3.4vw,26px); color: var(--ink); line-height: 1; }
.kf-www-col b.acc { color: var(--accent); text-shadow: 0 0 18px rgba(57,255,20,.4); }
.kf-www-get { font-family: var(--fh); font-weight: 600; font-size: 11px; color: var(--ink-3); line-height: 1.35; }
@media (max-width: 480px) { .kf-www-get { font-size: 10px; } }

/* FOMO strip */
.kf-fomo { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,159,10,.14), rgba(255,159,10,.04) 70%); border: 1px solid rgba(255,159,10,.4);
  font-family: var(--fh); font-weight: 700; font-size: clamp(12px,1.9vw,13.5px); color: #ffce7a; line-height: 1.45; text-align: center; }
.kf-fomo b { color: #fff; font-weight: 900; }
.kf-fomo-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 10px #ff9f0a; }
@media (prefers-reduced-motion: no-preference) { .kf-fomo-dot { animation: kf-fomo-pulse 1.6s ease-in-out infinite; } @keyframes kf-fomo-pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } }
.kf-cta { margin-block-start: 2px; }


/* ═══ LIVE MAP v2 — premium value cards + upgraded pins (radar, Waze, glossy) ═══ */
.lm-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
  background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.28);
  font-family: var(--fm); font-weight: 800; font-size: 11px; letter-spacing: .04em; color: var(--accent-hi); text-transform: uppercase; }
.lm-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@media (prefers-reduced-motion: no-preference) { .lm-eyebrow-dot { animation: lmTickDot 1.4s ease-in-out infinite; } }

.lm-cards { display: flex; flex-direction: column; gap: 10px; margin-block-start: 22px; }
.lm-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 15px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: border-color .2s, transform .2s, box-shadow .2s; }
.lm-card:hover { border-color: rgba(57,255,20,.3); transform: translateX(-3px); box-shadow: 0 8px 22px -12px rgba(0,0,0,.5); }
.lm-card-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.22); color: var(--accent-hi); }
.lm-card-ic-live { position: relative; }
.lm-card-livedot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .lm-card-ic-live::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); animation: lm-card-ring 1.8s ease-out infinite; }
  @keyframes lm-card-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
}
.lm-card-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lm-card-tx b { font-family: var(--fh); font-weight: 900; font-size: 14.5px; color: var(--ink); letter-spacing: -.02em; }
.lm-card-tx span { font-family: var(--fh); font-weight: 600; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

.lm-cta-note { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; font-family: var(--fh); font-weight: 700; font-size: 12px; color: var(--ink-3); }
.lm-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .lm-cta-dot { animation: lmTickDot 1.4s ease-in-out infinite; } }

/* ── upgraded pins ── */
.lm-pin-head { background: linear-gradient(160deg, #b0b5c0, #6d7280) !important; position: relative; }
.lm-pin.live .lm-pin-head { background: linear-gradient(160deg, #7fff5a, var(--accent-hi) 62%) !important; box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 16px rgba(57,255,20,.5) !important; }
.lm-pin-head::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-45deg); }
/* proximity radar on the big "you" pin */
.lm-pin-radar { position: absolute; inset-block-start: 11px; inset-inline-start: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(57,255,20,.5); background: radial-gradient(circle, rgba(57,255,20,.12), transparent 70%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .lm-pin-radar { animation: lm-radar 2.6s ease-out infinite; } @keyframes lm-radar { 0% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(6); opacity: 0; } } }
/* Waze nav chip on the nav pin */
.lm-pin-nav { position: absolute; inset-block-start: 6px; inset-inline-start: calc(100% + 6px); transform: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: linear-gradient(160deg, #5bff42, var(--accent-hi) 62%); color: #021004;
  font-family: var(--fh); font-weight: 900; font-size: 10px; box-shadow: 0 3px 12px rgba(57,255,20,.5), inset 0 1px 0 rgba(255,255,255,.5); z-index: 4; }
@media (prefers-reduced-motion: no-preference) { .lm-pin.nav .lm-pin-nav { animation: lm-nav-bob 2.2s ease-in-out infinite; } @keyframes lm-nav-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } }
@media (max-width: 480px) { .lm-pin-nav { font-size: 9px; padding: 2px 7px 2px 5px; } }

/* ============================================================
   OFFER SECTION — premium rebuild (2026-07-30)
   Appended at the END on purpose: single-class selectors win by
   cascade order, so this overrides the earlier .offer-* rules
   without hunting through the file (see CLAUDE.md landing notes).
   ============================================================ */

/* ── ∞ mark: im-solid is the always-legible stroke, im-draw only a
      travelling highlight. Without im-solid the glyph reads as two ticks. ── */
.inf-mark .im-base  { fill: none; stroke: rgba(57,255,20,.16); stroke-width: 15; }
.inf-mark .im-solid { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; opacity: .95; }
.inf-mark .im-draw  { fill: none; stroke: #eaffe4; stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 22 78; filter: drop-shadow(0 0 5px rgba(57,255,20,.9)); }
@media (prefers-reduced-motion: reduce) { .inf-mark .im-draw { display: none; } }

/* ── ∞ BAND — "everything uncapped" as a real design element ── */
.inf-band {
  position: relative; margin-block-start: 26px; padding: 20px 22px; border-radius: 20px;
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(57,255,20,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(57,255,20,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 40px rgba(0,0,0,.30), 0 0 34px rgba(57,255,20,.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden;
}
.inf-band::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -40%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .inf-band.in::before { animation: infBandSheen 1.5s .35s cubic-bezier(.22,.8,.2,1) forwards; }
  @keyframes infBandSheen { to { inset-inline-start: 120%; } }
}
.inf-band-hd { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.inf-band-t { font-family: var(--fh); font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.inf-band-t b { color: var(--accent-hi, var(--accent)); font-weight: 900; }
.inf-band-sub {
  font-family: var(--fh); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.44);
  letter-spacing: -.05px; margin-inline-start: auto;
}
.inf-band-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 15px; }
.inf-pill2 {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(57,255,20,.055); border: 1px solid rgba(57,255,20,.26);
  font-family: var(--fh); font-size: 13px; font-weight: 800; letter-spacing: -.1px;
  color: rgba(255,255,255,.88);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, background .22s, box-shadow .22s;
}
.inf-pill2:hover {
  transform: translateY(-2px);
  border-color: rgba(57,255,20,.5); background: rgba(57,255,20,.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 18px rgba(57,255,20,.14);
}
@media (prefers-reduced-motion: no-preference) {
  .inf-band.in .inf-pill2 { animation: infPillIn .5s var(--d, 0ms) cubic-bezier(.2,.9,.25,1) both; }
  @keyframes infPillIn { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  .inf-band { padding: 16px; }
  .inf-band-t { font-size: 18px; }
  .inf-band-sub { margin-inline-start: 0; flex-basis: 100%; }
  .inf-pill2 { font-size: 12px; padding: 7px 12px; }
}

/* ── category cards: equal heights, lift on hover, brand-strip on top ── */
.offer-cats { margin-block-start: 18px; gap: 14px; align-items: stretch; }
.offer-cat {
  position: relative; display: flex; flex-direction: column;
  padding: 18px 18px 10px; border-radius: 20px; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s;
}
.offer-cat::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .35; transition: opacity .28s;
}
.offer-cat:hover {
  transform: translateY(-4px);
  border-color: rgba(57,255,20,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 48px rgba(0,0,0,.4), 0 0 30px rgba(57,255,20,.08);
}
.offer-cat:hover::after { opacity: 1; }
.offer-cat-hd { align-items: flex-start; gap: 11px; }
.offer-cat-ico { width: 34px; height: 34px; border-radius: 11px; }
.offer-cat-t { font-size: 16px; }
.offer-cat-sub {
  display: block; font-family: var(--fh); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.42); margin-block-start: 3px; letter-spacing: -.05px; line-height: 1.35;
}
.offer-cat-list { flex: 1; }

/* ── rows: one axis for the icon, one for the tick, staggered reveal ── */
.offer-feat { gap: 11px; padding: 10px 2px; font-size: 14px; line-height: 1.35; }
.offer-feat .of-ico { width: 26px; height: 26px; border-radius: 8px; }
.offer-feat .of-check {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.26);
  color: var(--accent); opacity: 1;
}
.offer-feat.is-inf { color: var(--ink); font-weight: 800; }
.offer-feat.is-inf .of-nolimit { color: var(--accent-hi, var(--accent)); font-weight: 900; white-space: nowrap; }
.offer-feat.is-inf .of-ico {
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(57,255,20,.14);
}
@media (prefers-reduced-motion: no-preference) {
  .offer-cat.in .offer-feat { animation: ofRowIn .5s calc(var(--i, 0) * 70ms + 120ms) cubic-bezier(.2,.9,.25,1) both; }
  @keyframes ofRowIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
  html[dir="ltr"] @keyframes ofRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  .offer-feat { font-size: 13px; gap: 9px; padding: 9px 0; }
  .offer-cat-t { font-size: 15px; }
}

/* ── בקרוב strip: the emoji clock was absolutely positioned at inset-inline-start
      while the padding reserving its space was physical `padding-left: 34px` —
      wrong side in RTL, so the glyph sat ON TOP of the first word. Logical
      padding + a stroke icon (rule 22: no emoji in UI). ── */
.offer-soon-item { padding: 12px 14px; padding-inline-start: 36px; }
.offer-soon-item::before {
  content: ''; inset-inline-start: 13px; width: 14px; height: 14px; filter: none; opacity: .55;
  background: currentColor; color: var(--accent);
  -webkit-mask: var(--soon-clock) center/contain no-repeat;
  mask: var(--soon-clock) center/contain no-repeat;
}
:root {
  --soon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3.5 2'/%3E%3C/svg%3E");
}
/* the first item shipped its own inline card SVG too — hide the duplicate */
.offer-soon-item > svg { display: none; }

/* ── ₪0 hero: was laid out as one very wide row, so the price sat off-centre and
      the sell-chips drifted to the far edge. One centred column instead. ── */
.offer-card .offer-head.club-hero-money {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.offer-card .club-hero-money .club-big { line-height: .92; }
.offer-card .club-hero-money .club-big-sub { font-size: clamp(24px, 3.4vw, 38px); }
.offer-card .club-hero-money .offer-badges { width: 100%; }
.offer-card .club-hero-money .sell-chips { justify-content: center; margin-block-start: 14px; }

/* ── ∞ band: keep the qualifier under the title instead of pushed to the edge ── */
.inf-band-hd { flex-direction: column; align-items: flex-start; gap: 4px; }
.inf-band-hd > .inf-mark { position: absolute; inset-inline-end: 22px; inset-block-start: 20px; }
.inf-band-sub { margin-inline-start: 0; }
@media (max-width: 560px) { .inf-band-hd > .inf-mark { display: none; } }

/* ── benefit chips — compact pills (replaces old cards) ── */
.offer-chips {
  margin-block-start: 14px;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.offer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 50px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  font-family: var(--fh); font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.78); letter-spacing: -.15px;
  transition: border-color .15s, background .15s;
}
.offer-chips.in .offer-chip { animation: chipIn .38s var(--d, 0ms) cubic-bezier(.2,.9,.25,1) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.offer-chip:hover { border-color: rgba(57,255,20,.28); background: rgba(57,255,20,.06); color: rgba(255,255,255,.9); }
.offer-chip--gold { color: #ffd542; border-color: rgba(255,213,66,.32); background: rgba(255,213,66,.07); }
.offer-chip--gold:hover { background: rgba(255,213,66,.12); }
.offer-chip--accent { border-color: rgba(57,255,20,.26); background: rgba(57,255,20,.06); }
.offer-chip-ic { display: flex; align-items: center; flex-shrink: 0; color: var(--accent); opacity: .85; }
.offer-chip--gold .offer-chip-ic { color: #ffd542; }
.offer-chip-tx { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .offer-chip { animation: none !important; } }

/* ══════════════════════════════════════════════
   WHATSAPP SUPPORT FAB
══════════════════════════════════════════════ */
@keyframes waBreath {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.45), 0 8px 28px rgba(0,0,0,.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 9px rgba(37,211,102,0),  0 10px 34px rgba(0,0,0,.6); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { @keyframes waBreath { 0%,100% { transform: none; } } }

.wa-fab {
  position: fixed;
  inset-block-end: 28px;
  inset-inline-start: 22px;
  z-index: 8500;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2de070, #25d366 55%, #1db954);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45), 0 8px 28px rgba(0,0,0,.55);
  animation: waBreath 3.2s ease-in-out infinite;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.wa-fab::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.28) 0%, transparent 55%);
  pointer-events: none;
}
.wa-fab-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(37,211,102,.4);
  pointer-events: none;
}
.wa-fab-hover { transform: scale(1.1) !important; animation-play-state: paused !important; }
.wa-fab-tip {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 0;
  background: rgba(14,14,14,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(37,211,102,.3);
  border-radius: 10px;
  padding: 7px 13px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.1px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.wa-fab-tip::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 18px;
  border: 6px solid transparent;
  border-block-start-color: rgba(37,211,102,.3);
}
.wa-fab-tip-show { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) {
  .wa-fab { inset-block-end: 92px; inset-inline-start: 16px; width: 52px; height: 52px; }
  .wa-fab svg { width: 24px; height: 24px; }
}

/* ── Map pins: sm variant (offline, secondary cities) ────────────────── */
.lm-pin.sm .lm-pin-head {
  width: 8px; height: 8px;
  background: rgba(255,255,255,.25);
  box-shadow: none;
}
.lm-pin.sm .lm-pin-ring { width: 14px; height: 14px; opacity: .3; }
.lm-pin.sm .lm-pin-tag  { font-size: 9px; opacity: .6; }
/* big pin: stronger glow + larger head for the main city */
.lm-pin.big .lm-pin-head {
  width: 16px; height: 16px;
  box-shadow: 0 0 0 3px rgba(57,255,20,.25), 0 0 22px rgba(57,255,20,.6), 0 0 44px rgba(57,255,20,.25);
}
.lm-pin.big .lm-pin-ring { width: 26px; height: 26px; border-width: 1.5px; }
/* live + big: extra outer bloom */
.lm-pin.live.big .lm-pin-head {
  box-shadow: 0 0 0 4px rgba(57,255,20,.3), 0 0 28px rgba(57,255,20,.7), 0 0 60px rgba(57,255,20,.3);
}

/* ── Timing chip "2 דקות" — above every main CTA ────────────────────── */
@keyframes chipSheen {
  0%   { transform: translateX(-160%) skewX(-12deg); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .7; }
  100% { transform: translateX(260%)  skewX(-12deg); opacity: 0; }
}
.timing-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px 5px 11px;
  background: linear-gradient(135deg, rgba(57,255,20,.09) 0%, rgba(57,255,20,.04) 100%);
  border: 1px solid rgba(57,255,20,.28);
  border-radius: 100px;
  font-family: var(--fh);
  font-size: 11.5px;
  font-weight: 800;
  color: #39ff14;
  direction: rtl;
  letter-spacing: .01em;
  cursor: default;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 14px rgba(57,255,20,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
.timing-chip::before {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: chipSheen 3.4s 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .timing-chip::before { animation: none; } }
.timing-chip svg { flex-shrink: 0; opacity: .9; }
.timing-chip-num  { font-size: 14px; line-height: 1; font-weight: 900; letter-spacing: -.03em; }
.timing-chip-label{ font-size: 11px; font-weight: 700; opacity: .85; }

/* ── Accessibility widget panel animation ────────────────────────────── */
@keyframes a11yPanelIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #a11y-widget { animation: none !important; } }

/* ── IS 5568 / Regulation 35 — html preference classes (same as app) ── */
html.a11y-contrast-high  { filter: contrast(1.5); }
html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-invert #a11y-widget,
html.a11y-contrast-invert #a11y-trigger { filter: invert(1) hue-rotate(180deg); }
html.a11y-text-115 { font-size: 115% !important; }
html.a11y-text-130 { font-size: 130% !important; }
html.a11y-text-150 { font-size: 150% !important; }
html.a11y-lines-16 * { line-height: 1.6 !important; }
html.a11y-lines-20 * { line-height: 2.0 !important; }
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

/* ==========================================================================
   PHONE SHOWCASE — premium 3-phone coverflow (reflection, status bar,
   progress ring, pointer parallax, feature chip, fan-out, CTA)
   ========================================================================== */
.psc-wrap { padding: 60px 16px 52px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }

/* Header */
.psc-header { text-align: center; margin-bottom: 30px; }
.psc-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: rgba(57,255,20,.75); text-shadow: 0 0 14px rgba(57,255,20,.4); margin-bottom: 10px; }
.psc-scissors { color: rgba(57,255,20,.7); flex-shrink: 0; }
.psc-title { font-size: clamp(28px, 7vw, 34px); font-weight: 900; letter-spacing: -.8px; line-height: 1.1; color: #fff; margin-bottom: 10px; font-family: var(--fh); }
.psc-title em { font-style: normal; color: #39ff14; text-shadow: 0 0 24px rgba(57,255,20,.4); }
.psc-sub { font-size: 14px; color: rgba(255,255,255,.42); font-family: var(--fh); }

/* Stage */
.psc-stage { position: relative; width: 100%; max-width: 560px; height: 600px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.psc-ambient { position: absolute; top: 46%; left: 50%; width: 300px; height: 300px; border-radius: 50%; transform: translate(-50%,-50%); filter: blur(80px); opacity: .45; z-index: 0; pointer-events: none; transition: background .7s ease; }

/* floating feature chip */
.psc-chip {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  z-index: 40; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 50px;
  background: rgba(12,12,12,.9); border: 1px solid rgba(57,255,20,.28);
  font-family: var(--fh); font-size: 11.5px; font-weight: 800; color: #fff;
  letter-spacing: -.2px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 18px rgba(57,255,20,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: pscChip .45s cubic-bezier(.2,.9,.25,1) both;
}
.psc-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,.7); flex-shrink: 0; }
@keyframes pscChip { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

/* Phone */
.psc-phone { position: absolute; top: 46%; left: 50%; width: 244px; height: 528px; border-radius: 46px; background: #0a0a0a; border: 2px solid rgba(255,255,255,.13); overflow: hidden; transform-origin: center; }
.psc-phone .psc-screen, .psc-phone .psc-veil, .psc-phone .psc-notch { border-radius: 44px; }
.psc-phone--center { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 0 rgba(255,255,255,.14), 0 50px 130px rgba(0,0,0,.9), 0 0 60px rgba(57,255,20,.06); border-color: rgba(255,255,255,.16); }
.psc-phone--side { box-shadow: 0 40px 90px rgba(0,0,0,.7); cursor: pointer; }

/* iPhone status bar */
.psc-status { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 21; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 0; color: #fff; pointer-events: none; }
.psc-status-time { font-family: var(--fh); font-size: 13px; font-weight: 700; letter-spacing: .2px; }
.psc-status-ic { display: inline-flex; align-items: center; gap: 5px; color: #fff; }

/* dynamic island */
.psc-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; background: #000; border-radius: 13px; z-index: 22; }
.psc-btn-vol { position: absolute; inset-block-start: 80px; inset-inline-end: -3px; width: 3px; height: 54px; background: rgba(255,255,255,.12); border-radius: 2px; z-index: 2; }
.psc-btn-side { position: absolute; inset-block-start: 106px; inset-inline-start: -3px; width: 3px; height: 36px; background: rgba(255,255,255,.1); border-radius: 2px; z-index: 2; }
.psc-screen { position: absolute; inset: 0; overflow: hidden; background: #111; }
.psc-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #0a0a0a; }
.psc-veil { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .5s ease; }
.psc-phone--side .psc-veil { opacity: 1; }

/* reflection under center phone */
.psc-reflect { position: absolute; top: calc(100% + 6px); left: 0; right: 0; height: 130px; border-radius: 46px; overflow: hidden; opacity: .28; transform: scaleY(-1); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%); }
.psc-reflect-img { width: 100%; height: 516px; object-fit: cover; object-position: top; display: block; }

/* Label */
.psc-info { text-align: center; min-height: 46px; margin-bottom: 16px; }
.psc-screen-label { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: #fff; margin-bottom: 4px; font-family: var(--fh); }
.psc-screen-desc { font-size: 12.5px; color: rgba(255,255,255,.42); max-width: 290px; margin: 0 auto; line-height: 1.5; letter-spacing: -.1px; font-family: var(--fh); }
.psc-fade { animation: pscFade .35s ease both; }
@keyframes pscFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Control row */
.psc-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.psc-ctrl { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); cursor: pointer; transition: background .15s, color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.psc-ctrl:hover { background: rgba(255,255,255,.1); color: #fff; transform: scale(1.06); }
.psc-ctrl:active { transform: scale(.94); }
.psc-ctrl--main { position: relative; width: 52px; height: 52px; background: rgba(57,255,20,.1); border-color: rgba(57,255,20,.3); color: #39ff14; box-shadow: 0 0 16px rgba(57,255,20,.15); }
.psc-ctrl--main:hover { background: rgba(57,255,20,.16); color: #39ff14; }

/* progress ring */
.psc-ring { position: absolute; inset: -2px; width: 52px; height: 52px; pointer-events: none; }
.psc-ring-fg { animation: pscRing 3800ms linear forwards; }
@keyframes pscRing { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -138.2; } }

/* Dots */
.psc-dots { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.psc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); border: none; cursor: pointer; padding: 0; transition: background .2s, width .2s; }
.psc-dot--on { background: #39ff14; width: 18px; border-radius: 3px; box-shadow: 0 0 8px rgba(57,255,20,.5); }

/* CTA */
.psc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 50px;
  background: linear-gradient(180deg, #68ff48 0%, #39ff14 60%);
  color: #021004; font-family: var(--fh); font-size: 14.5px; font-weight: 900; letter-spacing: -.3px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(57,255,20,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.psc-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(57,255,20,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.psc-cta:active { transform: scale(.97); }

@media (max-width: 480px) {
  .psc-stage { height: 540px; }
  .psc-phone { width: 214px; height: 463px; border-radius: 40px; }
  .psc-reflect-img { height: 452px; }
  .psc-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .psc-phone, .psc-fade, .psc-ambient, .psc-chip, .psc-ring-fg { transition: none !important; animation: none !important; }
  .psc-ring { display: none; }
}

/* ── premium extras: depth-of-field, auto-pan, live overlay ── */
/* Depth-of-field: side phones softly blurred → cinematic focus on center */
.psc-phone--side .psc-screen { filter: brightness(.7); }
.psc-phone--center .psc-screen { filter: none; }

/* (auto-pan removed — images are static + contained for clean full display) */

/* Live overlay notification card (center phone only) */
.psc-ov {
  position: absolute; top: 52px; left: 12px; right: 12px; z-index: 15;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 13px;
  background: rgba(14,14,14,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: pscOv 3800ms cubic-bezier(.22,.9,.25,1) both;
}
@keyframes pscOv {
  0%   { opacity: 0; transform: translateY(-14px) scale(.94); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.97); }
}
.psc-ov-ic { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid; }
.psc-ov-tx { display: flex; flex-direction: column; line-height: 1.25; }
.psc-ov-tx b { font-family: var(--fh); font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.psc-ov-tx i { font-family: var(--fh); font-size: 10px; font-style: normal; color: rgba(255,255,255,.5); letter-spacing: -.1px; }

@media (prefers-reduced-motion: reduce) {
  .psc-img--pan, .psc-ov { animation: none !important; }
  .psc-phone--side .psc-screen { filter: brightness(.82); }
}

/* ── benefit copy block + cinematic header reveal ── */
.psc-copy { text-align: center; min-height: 78px; margin-bottom: 18px; padding: 0 8px; }
.psc-copy-title { font-family: var(--fh); font-size: clamp(19px, 5vw, 23px); font-weight: 900; letter-spacing: -.5px; color: #fff; line-height: 1.15; margin-bottom: 6px; }
.psc-copy-title em { font-style: normal; color: #39ff14; text-shadow: 0 0 20px rgba(57,255,20,.4); }
.psc-copy-sub { font-family: var(--fh); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.5); line-height: 1.5; letter-spacing: -.1px; max-width: 320px; margin: 0 auto; }

/* cinematic header: blur + rise in on reveal */
.psc-header { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity .7s ease, filter .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.psc-header--in { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) { .psc-header { opacity: 1; filter: none; transform: none; transition: none; } }

/* ==========================================================================
   INTERACTIVE BOOKING DEMO (inside the coverflow center phone)
   ========================================================================== */
.bd { position: absolute; inset: 0; background: linear-gradient(180deg, #0d0d0d, #0a0a0a); padding: 46px 14px 14px; display: flex; flex-direction: column; overflow: hidden; font-family: var(--fh); }
.bd::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(57,255,20,.06), transparent 70%); pointer-events: none; }

/* header */
.bd-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.bd-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: rgba(57,255,20,.09); border: 1px solid rgba(57,255,20,.3); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px rgba(57,255,20,.12); }
.bd-name { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.bd-sub { font-size: 10.5px; color: rgba(255,255,255,.45); margin-top: 1px; }
.bd-star { color: #ffd542; }

/* step label */
.bd-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.75); margin: 4px 0 7px; transition: opacity .25s; }
.bd-label--off { opacity: .35; }
.bd-num { width: 15px; height: 15px; border-radius: 50%; background: rgba(57,255,20,.14); border: 1px solid rgba(57,255,20,.35); color: #39ff14; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* services */
.bd-svcs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bd-svc { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.bd-svc:active { transform: scale(.98); }
.bd-svc--on { border-color: rgba(57,255,20,.5); background: rgba(57,255,20,.06); box-shadow: 0 0 0 2px rgba(57,255,20,.08); }
.bd-svc-n { font-size: 12.5px; font-weight: 700; color: #fff; }
.bd-svc-meta { display: flex; align-items: center; gap: 8px; }
.bd-svc-d { font-size: 10px; color: rgba(255,255,255,.35); font-family: var(--fm); }
.bd-svc-p { font-size: 13px; font-weight: 900; color: #39ff14; font-family: var(--fm); }

/* slots */
.bd-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.bd-slot { padding: 8px 0; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-family: var(--fm); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.bd-slot:disabled { opacity: .3; cursor: default; }
.bd-slot:not(:disabled):active { transform: scale(.95); }
.bd-slot--on { border-color: rgba(57,255,20,.5); background: rgba(57,255,20,.1); color: #39ff14; box-shadow: 0 0 0 2px rgba(57,255,20,.08); }

/* CTA */
.bd-cta { margin-top: auto; width: 100%; border: none; border-radius: 12px; padding: 13px 0; font-size: 13.5px; font-weight: 900; font-family: var(--fh); cursor: pointer; transition: all .18s; -webkit-tap-highlight-color: transparent; background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); }
.bd-cta--on { background: linear-gradient(180deg, #68ff48, #39ff14 60%); color: #021004; box-shadow: 0 8px 24px rgba(57,255,20,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.bd-cta--on:active { transform: scale(.97); }

/* success state */
.bd--done { align-items: center; justify-content: center; text-align: center; gap: 0; }
.bd-check { width: 66px; height: 66px; border-radius: 50%; background: rgba(57,255,20,.1); border: 1.5px solid rgba(57,255,20,.4); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(57,255,20,.04), 0 0 32px rgba(57,255,20,.25); margin-bottom: 16px; animation: bdPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bdPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bd-done-t { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.5px; margin-bottom: 6px; }
.bd-done-s { font-size: 12.5px; color: rgba(255,255,255,.5); font-family: var(--fm); margin-bottom: 16px; }
.bd-done-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 50px; background: rgba(0,168,132,.1); border: 1px solid rgba(0,168,132,.3); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); }
.bd-dot { width: 6px; height: 6px; border-radius: 50%; background: #00a884; box-shadow: 0 0 8px rgba(0,168,132,.6); }
.bd-reset { margin-top: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; font-family: var(--fh); padding: 8px 16px; border-radius: 50px; cursor: pointer; }

/* confetti */
.bd-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bd-cf { position: absolute; top: 30%; left: 50%; width: 5px; height: 5px; border-radius: 1px; opacity: 0; animation: bdCf 1.1s ease-out forwards; }
.bd-cf-0 { background: #39ff14; animation-delay: .1s; --tx: -70px; --ty: -50px; }
.bd-cf-1 { background: #fff; animation-delay: .05s; --tx: 60px; --ty: -60px; }
.bd-cf-2 { background: #ffd542; animation-delay: .15s; --tx: -90px; --ty: 30px; }
.bd-cf-3 { background: #39ff14; animation-delay: .2s; --tx: 90px; --ty: 20px; }
.bd-cf-4 { background: #4a9eff; animation-delay: .08s; --tx: -40px; --ty: 70px; }
.bd-cf-5 { background: #39ff14; animation-delay: .18s; --tx: 45px; --ty: 75px; }
.bd-cf-6 { background: #fff; animation-delay: .12s; --tx: -110px; --ty: -20px; }
.bd-cf-7 { background: #ffd542; animation-delay: .22s; --tx: 110px; --ty: -15px; }
@keyframes bdCf { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.4) rotate(180deg); } }

@media (max-width: 480px) { .bd { padding: 42px 12px 12px; } .bd-slots { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .bd-check, .bd-cf { animation: none !important; } .bd-cf { display: none; } }

/* fee note under booking demo CTA */
.bd-fee { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 7px; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.32); letter-spacing: -.1px; }
.bd-fee svg { color: rgba(57,255,20,.4); flex-shrink: 0; }
.bd-fee span { color: rgba(255,255,255,.5); font-weight: 800; font-family: var(--fm); }

/* trust microcopy under showcase CTA */
.psc-trust { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4); font-family: var(--fh); }
.psc-trust i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); }

/* swipe hint (replaces the removed control row) */
.psc-hint { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.32); letter-spacing: -.1px; font-family: var(--fh); }
.psc-hint svg { color: rgba(57,255,20,.4); opacity: .7; }