/* =========================================================
   Paradox Media — dark premium / cinematic
   ========================================================= */
:root {
  --bg-deep: #06080a;
  --bg: #090c0f;
  --bg-elev: #0e1216;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --fg: #eef2ef;
  --fg-muted: #b4bcb8;
  --fg-dim: #8c948f;
  --lime: #a6e22e;
  --lime-bright: #c4f53d;
  --lime-deep: #7bb315;
  --lime-glow: rgba(166, 226, 46, 0.24);
  --accent-rgb: 166,226,46;
  --accent-bright-rgb: 196,245,61;
  --accent-deep-rgb: 123,179,21;
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Clash Display", "General Sans", sans-serif;
  --font-body: "General Sans", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--fg);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--lime); color: #06080a; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- atmosphere ---------- */
.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
  radial-gradient(1200px 700px at 70% -10%, rgba(var(--accent-rgb),0.06), transparent 60%),
  linear-gradient(180deg, #070a0c 0%, #06080a 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.blob-1 { width: 520px; height: 520px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.18), transparent 70%); animation: drift1 22s var(--ease) infinite alternate; }
.blob-2 { width: 460px; height: 460px; top: 40%; right: -140px; background: radial-gradient(circle, rgba(var(--accent-deep-rgb),0.16), transparent 70%); animation: drift2 26s var(--ease) infinite alternate; }
.blob-3 { width: 380px; height: 380px; bottom: -120px; left: 30%; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),0.10), transparent 70%); animation: drift1 30s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(80px, 60px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-90px, -50px) scale(1.1); } }
.grid-lines { position: absolute; inset: 0; opacity: 0.4;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%); }
.grain { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--lime); color: #06080a; box-shadow: 0 0 0 0 var(--lime-glow); }
.btn-primary:hover { background: var(--lime-bright); box-shadow: 0 10px 40px -6px var(--lime-glow); transform: translateY(-2px); }
.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.play-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.play-ico.lg { border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #06080a; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(8,11,13,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand-logo { height: 30px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { color: var(--fg-muted); font-size: 15px; font-weight: 500; transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--fg); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--lime); transition: width .25s var(--ease); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--fg); transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 22px; background: rgba(8,11,13,0.96); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.nav-mobile a { padding: 12px 6px; color: var(--fg-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.nav-mobile a.btn { color: #06080a; margin-top: 10px; border-bottom: 0; }
.nav-mobile.open { display: flex; }

/* ---------- shared section ---------- */
.section { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow.center { justify-content: center; width: 100%; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.accent { color: var(--lime-bright); }
.section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin-top: 16px; }
.section-title.center { text-align: center; }
.section-lead { color: var(--fg-muted); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 620px; margin-top: 18px; }
.center .section-lead, .section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- hero ---------- */
.hero { padding: 150px 0 60px; }
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { padding: 8px 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); font-size: 14px; color: var(--fg); }
.hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.05rem, 7vw, 5.6rem); line-height: 1.04; letter-spacing: -0.03em; margin-top: 26px; }
.hero-sub { color: var(--fg-muted); font-size: clamp(1.05rem, 1.7vw, 1.32rem); max-width: 640px; margin-top: 24px; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.trust-row { list-style: none; display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; justify-content: center; color: var(--fg-muted); font-size: 15px; }
.trust-row strong { color: var(--fg); font-weight: 600; }
.trust-row strong:first-child { color: var(--lime); letter-spacing: 1px; }
.trust-row .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-dim); display: inline-block; }

/* VSL frame */
.vsl { margin-top: 64px; }
.vsl-glass { position: relative; aspect-ratio: 16 / 9; cursor: pointer; border-radius: 22px; border: 1px solid var(--border); overflow: hidden; background:
  radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb),0.10), transparent 55%), linear-gradient(180deg, #0d1115, #090c0f);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05); transition: border-color .3s, transform .4s var(--ease); }
.vsl:hover .vsl-glass { border-color: var(--border-strong); transform: translateY(-4px); }
.vsl-faux { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; opacity: 0.5; }
.faux-chip { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--lime); border: 1px solid rgba(var(--accent-rgb),0.3); padding: 5px 11px; border-radius: 999px; }
.faux-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.faux-bars i { flex: 1; background: linear-gradient(180deg, var(--lime), transparent); border-radius: 4px 4px 0 0; opacity: 0.5; }
.faux-bars i:nth-child(1){height:38%}.faux-bars i:nth-child(2){height:62%}.faux-bars i:nth-child(3){height:50%}.faux-bars i:nth-child(4){height:80%}.faux-bars i:nth-child(5){height:66%}.faux-bars i:nth-child(6){height:92%}.faux-bars i:nth-child(7){height:74%}
.vsl-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--lime); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 0 var(--lime-glow); animation: pulse 2.6s ease-out infinite; transition: transform .3s var(--ease); }
.vsl:hover .vsl-play { transform: translate(-50%,-50%) scale(1.08); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--lime-glow); } 70% { box-shadow: 0 0 0 26px rgba(var(--accent-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } }
.vsl-meta { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 18px 24px; font-size: 14px; color: var(--fg-muted); background: linear-gradient(0deg, rgba(6,8,10,0.85), transparent); }

/* ---------- proof / marquee ---------- */
.proof { padding: 8px 0 36px; }
.proof-label { text-align: center; color: var(--fg-dim); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 30px; }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: scroll 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 52px; width: auto; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.55; transition: opacity .3s; }
.marquee-track img:hover { opacity: 0.85; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- cards (3) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; transition: transform .35s var(--ease), border-color .3s, background .3s; }
.card:hover { transform: translateY(-5px); border-color: var(--border-strong); background: var(--surface-2); }
.card-x { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 14px 0 10px; letter-spacing: -0.01em; }
.card p { color: var(--fg-muted); font-size: 0.98rem; }

/* ---------- system steps ---------- */
.system .section-title.center, .system .eyebrow.center { margin-bottom: 4px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 58px; }
.step { position: relative; padding: 30px 24px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), transparent); transition: transform .35s var(--ease), border-color .3s; overflow: hidden; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lime), transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.step:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.step:hover::before { transform: scaleX(1); }
.step-no { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; color: var(--lime); opacity: 0.85; letter-spacing: -0.02em; }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 14px 0 10px; }
.step p { color: var(--fg-muted); font-size: 0.95rem; }

/* ---------- results / stats ---------- */
.results { padding-top: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 44px 32px; border-radius: 24px; border: 1px solid var(--border);
  background: radial-gradient(120% 160% at 50% -20%, rgba(var(--accent-rgb),0.08), transparent 60%), var(--surface); }
.stat { text-align: center; }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1; color: var(--fg); letter-spacing: -0.02em; display: block; }
.stat-label { color: var(--fg-muted); font-size: 0.92rem; margin-top: 8px; display: block; }
.stats-note { text-align: center; color: var(--fg-dim); font-size: 0.9rem; margin-top: 22px; }

/* ---------- why ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.why-head .btn { margin-top: 30px; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-item { padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: transform .3s var(--ease), border-color .3s; }
.why-item:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.why-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 8px; }
.why-item h3::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); margin-right: 9px; vertical-align: middle; }
.why-item p { color: var(--fg-muted); font-size: 0.94rem; }

/* ---------- testimonials ---------- */
.quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 22px; transition: transform .3s var(--ease), border-color .3s; }
.quote:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: 1.16rem; line-height: 1.4; letter-spacing: -0.01em; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.q-name { font-weight: 600; }
.q-role { color: var(--fg-dim); font-size: 0.88rem; }

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--fg); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .chev { width: 11px; height: 11px; border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); transform: rotate(45deg); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-list details[open] .chev { transform: rotate(-135deg); border-color: var(--lime); }
.faq-list details p { color: var(--fg-muted); font-size: 0.98rem; padding: 0 4px 24px; max-width: 60ch; }
.faq-list summary:hover { color: var(--lime); }

/* ---------- booking ---------- */
.book { padding-bottom: clamp(80px, 12vw, 150px); }
.book-inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 28px; border: 1px solid var(--border);
  background: radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 55%), var(--bg-elev); position: relative; overflow: hidden; }
.book-list { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.book-list li { display: flex; gap: 11px; color: var(--fg-muted); font-size: 1rem; }
.book-list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--lime-glow); position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237da837' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.book-trust { font-size: 0.95rem; color: var(--fg-muted); }
.book-trust strong { color: var(--lime); letter-spacing: 1px; margin-right: 8px; }
.book-form { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.85rem; font-weight: 500; color: var(--fg-muted); }
.field .opt { color: var(--fg-dim); font-weight: 400; }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.98rem; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; transition: border-color .2s, background .2s; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); background: var(--bg-elev); }
.field input.invalid, .field select.invalid { border-color: #ff6b6b; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2397a0a0' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.book-form .btn { margin-top: 6px; }
.form-fine { text-align: center; font-size: 0.82rem; color: var(--fg-dim); }
.form-success { text-align: center; font-size: 0.95rem; color: var(--lime); padding: 8px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 64px 0 40px; margin-top: 20px; }
.footer-inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 960px) and (min-width: 721px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-logo { height: 28px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--fg-muted); font-size: 0.95rem; max-width: 320px; }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); margin-bottom: 16px; }
.footer-col a, .footer-col span { display: block; color: var(--fg-muted); font-size: 0.95rem; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--lime); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 0.88rem; }
.footer-social { display: flex; gap: 22px; }
.footer-social a:hover { color: var(--lime); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,6,8,0.82); backdrop-filter: blur(8px); }
.modal-box { position: relative; width: min(900px, 100%); aspect-ratio: 16/9; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9); }
.modal-close { position: absolute; top: -42px; right: 0; background: none; border: 0; color: var(--fg-muted); font-size: 30px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--fg); }
.modal-video { display: grid; place-items: center; height: 100%; text-align: center; color: var(--fg-muted); }
.modal-video p { font-family: var(--font-display); font-size: 1.3rem; color: var(--fg); }
.modal-video span { font-family: var(--font-body); font-size: 0.95rem; color: var(--fg-dim); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .why-grid, .faq-grid, .book-inner { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .cards-3 { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .hero { padding-top: 120px; }
  .trust-row { gap: 12px; }
}
@media (max-width: 460px) {
  .steps, .stats { grid-template-columns: 1fr; }
  .vsl-play { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- animated equalizer bars in the VSL frame ---- */
@keyframes eq { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.faux-bars i { transform-origin: bottom; animation: eq 1.9s var(--ease) infinite; }
.faux-bars i:nth-child(1){animation-delay:0s}.faux-bars i:nth-child(2){animation-delay:.18s}.faux-bars i:nth-child(3){animation-delay:.36s}.faux-bars i:nth-child(4){animation-delay:.12s}.faux-bars i:nth-child(5){animation-delay:.30s}.faux-bars i:nth-child(6){animation-delay:.06s}.faux-bars i:nth-child(7){animation-delay:.24s}

/* ---- hero cursor spotlight ---- */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }
.hero-spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(420px 420px at var(--mx,50%) var(--my,28%), rgba(var(--accent-bright-rgb),0.12), transparent 68%); }
.hero:hover .hero-spotlight { opacity: 1; }

/* ---- compare toggle (DEV — remove before go-live) ---- */
.theme-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 90; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--fg-muted); background: rgba(10,13,15,0.8); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, border-color .2s; }
.theme-toggle::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); }

/* ---- compare variant: neon green ---- */
body.theme-neon { --lime: #a6e22e; --lime-bright: #c4f53d; --lime-deep: #7bb315; --lime-glow: rgba(166,226,46,0.22); --accent-rgb: 166,226,46; --accent-bright-rgb: 196,245,61; --accent-deep-rgb: 123,179,21; }

/* ---- hero video background ---- */
.hero { overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .92; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,10,.42), rgba(6,8,10,.72) 58%, var(--bg-deep) 100%); }
.hero-spotlight { z-index: 2; }
.hero > .container { z-index: 3; }

/* ---- animated pipeline (The System) ---- */
.pipeline { display: flex; align-items: center; gap: 8px; margin: 54px auto 0; max-width: 900px; padding: 24px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(120% 180% at 100% 50%, rgba(var(--accent-rgb),0.06), transparent 60%), var(--surface); }
.pipe-node { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 96px; }
.pipe-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--lime-bright); background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .28); }
.pipe-ico svg { width: 24px; height: 24px; }
.pipe-name { font-size: 12.5px; font-weight: 500; color: var(--fg-muted); text-align: center; }
.pipe-node-end .pipe-ico { background: var(--lime); color: #06080a; border-color: var(--lime); box-shadow: 0 0 26px var(--lime-glow); }
.pipe-node-end .pipe-name { color: var(--fg); }
.pipe-conn { position: relative; flex: 1; height: 2px; min-width: 28px; background: var(--border); border-radius: 2px; }
.pipe-dot { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); transform: translate(-50%, -50%); animation: travel 2.6s linear infinite; opacity: 0; }
.pipe-dot:nth-child(2) { animation-delay: .87s; }
.pipe-dot:nth-child(3) { animation-delay: 1.74s; }
@keyframes travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pipe-meter { display: flex; align-items: center; gap: 14px; max-width: 900px; margin: 16px auto 0; padding: 0 8px; }
.pipe-meter-label { font-size: 13px; color: var(--fg-muted); white-space: nowrap; }
.pipe-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.pipe-fill { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); box-shadow: 0 0 12px var(--lime-glow); transition: width 1.8s var(--ease); }
.pipe-count { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--lime-bright); min-width: 52px; text-align: right; }
@media (max-width: 660px) {
  .pipeline { flex-direction: column; align-items: stretch; gap: 16px; max-width: 340px; padding: 24px 20px; position: relative; }
  .pipeline::before { content: ""; position: absolute; left: 46px; top: 38px; bottom: 38px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .6), rgba(var(--accent-rgb), .15)); }
  .pipe-node { flex-direction: row; width: auto; gap: 16px; justify-content: flex-start; align-items: center; position: relative; z-index: 1; }
  .pipe-ico { flex-shrink: 0; }
  .pipe-name { font-size: 14px; text-align: left; }
  .pipe-conn { display: none; }
}
@keyframes travelV { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ---- NB2 flow texture behind the stats ---- */
.results .stats { position: relative; overflow: hidden; }
.stats-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; z-index: 0; }
.results .stat { position: relative; z-index: 1; }

/* ---- hero VSL frame as a live-campaign dashboard ---- */
.vsl-faux { display: block; opacity: .62; }
.faux-top { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; align-items: flex-start; justify-content: space-between; }
.faux-chip { display: inline-flex; align-items: center; }
.faux-live { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); margin-right: 7px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.faux-metric { text-align: right; }
.faux-metric-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--lime-bright); line-height: 1; }
.faux-metric-label { font-size: 11px; color: var(--fg-muted); }
.faux-spark { position: absolute; left: 0; right: 0; bottom: 54px; height: 96px; padding: 0 24px; }
.spark-line { stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.7s var(--ease) .3s; filter: drop-shadow(0 0 5px var(--lime-glow)); }
@keyframes draw { from { stroke-dashoffset: 1; } }
.faux-bars { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 60px; }

/* ---- testimonials masonry ---- */
.tmasonry { columns: 3 300px; column-gap: 18px; margin-top: 48px; }
.tmasonry .quote { break-inside: avoid; margin: 0 0 18px; display: block; }
.tmasonry .quote blockquote { font-size: 1.05rem; }
@media (max-width: 980px) { .tmasonry { columns: 2 280px; } }
@media (max-width: 600px) { .tmasonry { columns: 1; } }

/* ---- sticky mobile CTA ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: rgba(8,11,13,.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-top: 1px solid var(--border); transform: translateY(135%); transition: transform .35s var(--ease); }
.sticky-cta .btn { width: 100%; }
.sticky-cta.show { transform: none; }
@media (min-width: 721px) { .sticky-cta { display: none; } }

/* ---- Google review wall ---- */
.rev-trust { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; color: var(--fg-muted); font-size: 1rem; flex-wrap: wrap; }
.rev-trust strong { color: var(--fg); font-size: 1.15rem; }
.rev-trust img.rev-google { width: 20px; height: 20px; }
.rev-trust-sub { color: var(--fg-dim); }
.revwall { margin-top: 40px; overflow: hidden; display: flex; flex-direction: column; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rev-row { display: flex; gap: 18px; width: max-content; will-change: transform; }
.rev-row.r1 { animation: revscroll 55s linear infinite; }
.rev-row.r2 { animation: revscroll 70s linear infinite reverse; }
.revwall:hover .rev-row { animation-play-state: paused; }
@keyframes revscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rev { width: 348px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, transform .3s var(--ease); }
.rev:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.rev-top { display: flex; align-items: center; justify-content: space-between; }
.rev-stars { color: #ffc83d; letter-spacing: 2px; font-size: 14px; line-height: 1; white-space: nowrap; }
img.rev-google { width: 18px; height: 18px; display: block; }
.rev blockquote { font-size: 1.02rem; line-height: 1.5; color: var(--fg); }
.rev figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: #06080a; background: linear-gradient(135deg, var(--lime-bright), var(--lime-deep)); flex-shrink: 0; }
.rev-who { display: flex; flex-direction: column; }
.rev-name { font-weight: 600; font-size: .95rem; }
.rev-role { font-size: .82rem; color: var(--fg-dim); }
@media (max-width: 600px) { .rev { width: 290px; padding: 20px; } }

/* ---- guarantee + scarcity badges (booking) ---- */
.book-badges { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.book-badge { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 13px; background: rgba(var(--accent-rgb),.06); }
.book-badge svg { width: 22px; height: 22px; color: var(--lime); flex-shrink: 0; margin-top: 1px; }
.book-badge strong { display: block; font-size: .95rem; }
.book-badge span { font-size: .85rem; color: var(--fg-muted); }

/* ---- hero video crossfade loop (no hard cut at the seam) ---- */
.hero-video { opacity: 0; transition: opacity 1s linear; }
.hero-video.is-active { opacity: .92; }

/* ---- readability: balanced title wrapping + subtle in-text emphasis ---- */
.section-title, .hero-title, .hero-sub, .section-lead { text-wrap: balance; }
.hero-sub strong, .section-lead strong, .card p strong, .step p strong, .why-item p strong { color: var(--fg); font-weight: 600; }

/* ---- hero trust-row money-back guarantee badge ---- */
.trust-guarantee { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(var(--accent-rgb),.42); border-radius: 999px; background: rgba(var(--accent-rgb),.08); color: var(--fg); font-weight: 500; }
.trust-guarantee svg { width: 15px; height: 15px; color: var(--lime); flex-shrink: 0; }

/* ===== service pages ===== */
/* animated Google SERP visual */
.serp { position: relative; max-width: 580px; margin: 56px auto 0; padding: 22px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, #0d1115, #090c0f); box-shadow: 0 40px 120px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.serp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.serp-bar img { width: 18px; height: 18px; }
.serp-query { font-size: 15px; color: var(--fg); }
.serp-caret { width: 2px; height: 17px; background: var(--lime); animation: blink 1.05s steps(1) infinite; }
.serp-results { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.serp-ad { position: relative; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.06); animation: adpulse 3.6s ease-out infinite; }
@keyframes adpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(166,226,46,0); } 45% { box-shadow: 0 0 34px -8px var(--lime-glow); } }
.serp-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--lime); border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 5px; padding: 1px 7px; margin-bottom: 7px; }
.serp-url { font-size: 12.5px; color: #9cc77a; }
.serp-url.muted { color: var(--fg-dim); }
.serp-title { font-size: 16px; color: var(--fg); margin-top: 3px; font-weight: 500; }
.serp-desc { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.serp-org { padding: 2px 15px; opacity: .5; }
.serp-org .serp-title { font-size: 15px; color: #a9c7ff; }
.serp-cursor { position: absolute; width: 22px; height: 22px; left: 0; top: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white' stroke='black' stroke-width='0.8'%3E%3Cpath d='M4 2 L4 18 L8.5 13.5 L11.5 20 L14 19 L11 12.5 L17 12.5 Z'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0; animation: serpclick 5.2s var(--ease) infinite; }
@keyframes serpclick { 0% { left: 80%; top: 86%; opacity: 0; transform: scale(1); } 12% { opacity: 1; } 44% { left: 40%; top: 34%; transform: scale(1); } 50% { transform: scale(.78); } 56% { transform: scale(1); } 86% { left: 40%; top: 34%; opacity: 1; } 100% { left: 40%; top: 34%; opacity: 0; } }
.serp-lead { position: absolute; top: 64px; right: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--lime); color: #06080a; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px) scale(.9); animation: leadpop 5.2s var(--ease) infinite; }
.serp-lead::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain; }
@keyframes leadpop { 0%,52% { opacity: 0; transform: translateY(6px) scale(.9); } 60% { opacity: 1; transform: translateY(0) scale(1); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0) scale(1); } }

/* services grid (homepage) */
.service-card { text-decoration: none; }
.service-card h3 { display: flex; align-items: center; gap: 9px; }
.svc-more { color: var(--lime); font-size: .9rem; font-weight: 600; margin-top: 14px; display: inline-flex; align-items: center; gap: 5px; }
.service-card.soon { opacity: .62; pointer-events: none; }
.svc-soon { font-size: .72rem; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; margin-left: auto; }

/* 3-up steps + value-stack box */
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
.included { margin-top: 44px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); max-width: 720px; }
.included p.included-intro { color: var(--fg-muted); margin-bottom: 18px; }
.included .book-list { margin: 0; }
@media (max-width: 760px) { .steps.steps-3 { grid-template-columns: 1fr; } }

/* ===== service page v2 components ===== */
/* compact feature cards with lime check */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.feat { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.feat:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-2); }
.feat h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.feat h3::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: rgba(var(--accent-rgb),.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6e22e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; }
.feat p { color: var(--fg-muted); font-size: .92rem; }

/* checklist (what's included) — redesigned */
.checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; max-width: 880px; margin-left: auto; margin-right: auto; }
.checklist li { display: flex; align-items: center; gap: 13px; color: var(--fg); font-size: 1rem; font-weight: 500; padding: 16px 18px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); transition: border-color .3s, transform .3s var(--ease); }
.checklist li:hover { border-color: rgba(var(--accent-rgb),.4); transform: translateY(-2px); }
.checklist li::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; box-shadow: 0 0 14px var(--lime-glow); }

/* process connector animation */
.steps-line { position: relative; max-width: 720px; height: 2px; margin: 44px auto 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.4), transparent); }
.steps-line span { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); transform: translate(-50%,-50%); animation: steptravel 4.6s var(--ease) infinite; }
@keyframes steptravel { 0% { left: 3%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 97%; opacity: 0; } }

/* tighter rhythm between stacked sections + section divider */
.section.tight { padding-top: clamp(48px, 7vw, 90px); }
@media (max-width: 760px) { .feat-grid { grid-template-columns: 1fr; } .checklist { grid-template-columns: 1fr; } }

/* centered full-width FAQ (under the form) */
.faq-center { max-width: 780px; margin: 40px auto 0; }
.faq-center .faq-list summary { font-size: 1.12rem; }

/* ===== full-bleed result strip (pattern interrupt between card grids) ===== */
.resultstrip { position: relative; padding: clamp(42px, 6vw, 66px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #0b0f0c, #080b09); overflow: hidden; }
.resultstrip-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .15; z-index: 0; }
.resultstrip::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 220px at 50% 50%, rgba(var(--accent-rgb), .08), transparent 70%); z-index: 0; pointer-events: none; }
.resultstrip .container { position: relative; z-index: 1; }
.result-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.result-cell { text-align: center; position: relative; }
.result-cell + .result-cell::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.result-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1; color: var(--lime-bright); letter-spacing: -.02em; display: block; }
.result-label { color: var(--fg-muted); font-size: .92rem; margin-top: 11px; display: block; }
.result-cap { text-align: center; color: var(--fg-dim); font-size: .92rem; margin-top: 28px; }
@media (max-width: 760px) {
  .result-row { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .result-cell::before { display: none !important; }
}

/* ===== full-bleed showcase — "everything included", different style ===== */
.showcase { position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1100px 620px at 16% 18%, rgba(var(--accent-rgb), .11), transparent 60%),
    linear-gradient(180deg, #0c1310, #0a0f0c); }
.showcase-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .11; z-index: 0; mix-blend-mode: screen; }
.showcase .container { position: relative; z-index: 1; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(36px, 5vw, 74px); align-items: center; }
.showcase-copy .eyebrow { margin-bottom: 14px; }
.showcase-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; margin: 28px 0 34px; }
.showcase-list li { display: flex; align-items: center; gap: 11px; color: var(--fg); font-size: .98rem; font-weight: 500; }
.showcase-list li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; box-shadow: 0 0 12px var(--lime-glow); }

/* framed "live campaign" visual (hosts the generated image) */
.shot { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-strong); background: #0a0e0c; box-shadow: 0 50px 120px -42px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .5s var(--ease); }
.showcase-visual:hover .shot { transform: translateY(-4px); }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); display: block; }
.shot-bar i:first-child { background: rgba(var(--accent-rgb), .55); }
.shot-bar .shot-url { margin-left: 10px; font-size: 12px; color: var(--fg-dim); }
.shot-screen { position: relative; }
.shot-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.shot-chip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(8,11,13,.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--fg); }
.shot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: blink 1.6s ease-in-out infinite; }
.shot-metric { position: absolute; right: 14px; bottom: 14px; padding: 11px 15px; border-radius: 13px; background: rgba(8,11,13,.68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); text-align: right; }
.shot-metric-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--lime-bright); line-height: 1; }
.shot-metric-sub { font-size: 11px; color: var(--fg-muted); }
@media (max-width: 960px) {
  .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
  .showcase-visual { max-width: 560px; }
}
@media (max-width: 560px) { .showcase-list { grid-template-columns: 1fr; } }

/* ============================================================= */
/* per-service animated hero devices (signature visual per page) */
/* ============================================================= */
.heromock { position: relative; max-width: 600px; margin: 54px auto 0; }
.heromock-frame { position: relative; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, #0d1115, #090c0f); box-shadow: 0 40px 120px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); padding: 20px; overflow: hidden; }
@keyframes popin { 0%,18% { opacity: 0; transform: translateY(8px) scale(.92); } 30%,82% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes slidein { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }

/* 1 — Meta: Facebook/Instagram ad card */
.fbad { position: relative; border-radius: 16px; border: 1px solid var(--border); background: #0c1014; padding: 14px 16px 12px; max-width: 460px; margin: 0 auto; }
.fbad-head { display: flex; align-items: center; gap: 11px; }
.fbad-av { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 210deg, var(--lime-deep), var(--lime), var(--lime-bright)); flex-shrink: 0; }
.fbad-id { display: flex; flex-direction: column; line-height: 1.25; }
.fbad-id b { font-size: 14px; color: var(--fg); }
.fbad-id i { font-style: normal; font-size: 11.5px; color: var(--fg-dim); }
.fbad-dots { margin-left: auto; color: var(--fg-dim); letter-spacing: 1px; }
.fbad-copy { font-size: 13px; color: var(--fg-muted); margin: 11px 0; }
.fbad-media { position: relative; height: 150px; border-radius: 11px; background: radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb),.18), transparent 60%), linear-gradient(145deg, #12331a, #0a1410); border: 1px solid var(--border); overflow: hidden; }
.fbad-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(var(--accent-rgb),.14) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 4.2s var(--ease) infinite; }
@keyframes sheen { 0%,100% { transform: translateX(-120%); } 50% { transform: translateX(120%); } }
.fbad-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(8,11,13,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid var(--border-strong); }
.fbad-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-left: 15px solid var(--lime); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.fbad-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; color: var(--fg-muted); }
.fbad-btn { padding: 6px 13px; border-radius: 8px; background: var(--lime); color: #06080a; font-weight: 600; }
.fbad-react { display: flex; gap: 16px; margin-top: 11px; font-size: 12px; color: var(--fg-dim); }
.fbad-react .heart { color: var(--lime); }
.fbad-pop { position: absolute; top: 60px; right: -6px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--lime); color: #06080a; font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 30px -8px var(--lime-glow); opacity: 0; animation: popin 5s var(--ease) infinite; }
.fbad-pop::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain; }

/* 2 — Landing: browser window with a converting form */
.lpwin { position: relative; border-radius: 14px; border: 1px solid var(--border-strong); background: #0a0e0c; overflow: hidden; max-width: 480px; margin: 0 auto; }
.lpwin-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border); }
.lpwin-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.lpwin-bar i:first-child { background: rgba(var(--accent-rgb),.55); }
.lpwin-url { margin-left: 10px; font-size: 12px; color: var(--fg-dim); }
.lpwin-body { padding: 22px 24px 26px; position: relative; }
.lp-h { height: 16px; width: 62%; border-radius: 5px; background: linear-gradient(90deg, var(--fg), var(--fg-dim)); opacity: .85; }
.lp-t { height: 9px; border-radius: 4px; background: var(--surface-2); margin-top: 12px; }
.lp-t.short { width: 45%; }
.lp-form { margin-top: 20px; display: grid; gap: 10px; }
.lp-field { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.lp-submit { height: 38px; border-radius: 8px; background: var(--lime); color: #06080a; font-weight: 600; font-size: 13px; display: grid; place-items: center; animation: lppress 5s var(--ease) infinite; }
@keyframes lppress { 0%,44%,60%,100% { transform: scale(1); filter: brightness(1); } 52% { transform: scale(.96); filter: brightness(1.15); } }
.lp-cursor { position: absolute; width: 20px; height: 20px; right: 60px; bottom: 40px; z-index: 4; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='black' stroke-width='1'%3E%3Cpath d='M5 3l15 9-6 1-3 6z'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation: lpcursor 5s var(--ease) infinite; }
@keyframes lpcursor { 0% { right: 140px; bottom: 120px; opacity: 0; } 20% { opacity: 1; } 48% { right: 60px; bottom: 40px; } 56% { right: 58px; bottom: 38px; } 100% { right: 60px; bottom: 40px; opacity: 1; } }
.lp-toast { position: absolute; top: 18px; right: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; background: var(--lime); color: #06080a; font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 30px -8px var(--lime-glow); opacity: 0; animation: popin 5s var(--ease) infinite; animation-delay: .3s; }
.lp-toast::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain; }

/* 3 — Nurturing: message sequence thread */
.seq { position: relative; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-left: 8px; }
.seq::before { content: ""; position: absolute; left: 26px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, rgba(var(--accent-rgb),.5), rgba(var(--accent-rgb),.15)); }
.seq-msg { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--border); background: #0c1014; opacity: 0; animation: slidein .6s var(--ease) forwards; }
.seq-msg:nth-child(1) { animation-delay: .2s; }
.seq-msg:nth-child(2) { animation-delay: 1.1s; }
.seq-msg:nth-child(3) { animation-delay: 2.0s; }
.seq-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--lime); }
.seq-msg div { line-height: 1.3; }
.seq-msg b { font-size: 13.5px; color: var(--fg); }
.seq-msg i { font-style: normal; display: block; font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.seq-done { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.07); }
.seq-done .seq-ico { background: var(--lime); color: #06080a; border-color: transparent; box-shadow: 0 0 14px var(--lime-glow); }

/* 4 — Social: phone profile with post grid */
.ph { position: relative; max-width: 320px; margin: 0 auto; border-radius: 26px; border: 1px solid var(--border-strong); background: #0a0e0c; padding: 16px 14px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.ph-top { display: flex; align-items: center; gap: 13px; padding: 4px 4px 14px; }
.ph-av { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(from 200deg, var(--lime-deep), var(--lime), var(--lime-bright)); padding: 2px; }
.ph-av::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #0a0e0c; }
.ph-meta b { font-size: 14px; color: var(--fg); }
.ph-stats { display: flex; gap: 14px; margin-top: 5px; }
.ph-stats i { font-style: normal; font-size: 11.5px; color: var(--fg-dim); }
.ph-stats i b { color: var(--lime-bright); font-size: 13px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ph-grid span { aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--border); opacity: 0; animation: slidein .5s var(--ease) forwards; }
.ph-grid span:nth-child(1) { background: linear-gradient(140deg, #133a1d, #0a1813); animation-delay: .15s; }
.ph-grid span:nth-child(2) { background: linear-gradient(140deg, #0f2a18, #0a1410); animation-delay: .3s; }
.ph-grid span:nth-child(3) { background: radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb),.25), transparent 60%), #0c1810; animation-delay: .45s; }
.ph-grid span:nth-child(4) { background: linear-gradient(140deg, #102e1a, #0a1410); animation-delay: .6s; }
.ph-grid span:nth-child(5) { background: radial-gradient(120% 120% at 70% 30%, rgba(var(--accent-rgb),.22), transparent 60%), #0b1610; animation-delay: .75s; }
.ph-grid span:nth-child(6) { background: linear-gradient(140deg, #123418, #0a1813); animation-delay: .9s; }
.ph-pop { position: absolute; top: 18px; right: -8px; z-index: 4; padding: 7px 12px; border-radius: 999px; background: var(--lime); color: #06080a; font-size: 12px; font-weight: 600; box-shadow: 0 12px 30px -8px var(--lime-glow); opacity: 0; animation: popin 5s var(--ease) infinite; animation-delay: 1.1s; }

/* 5 — Kreativa: rotating creative reel stack */
.reel { position: relative; height: 300px; max-width: 460px; margin: 0 auto; display: grid; place-items: center; }
.reel-card { position: absolute; width: 210px; height: 250px; border-radius: 18px; border: 1px solid var(--border); }
.reel-card.c3 { transform: rotate(-11deg) translateX(-30px) scale(.92); background: linear-gradient(160deg, #0f2418, #0a1210); opacity: .55; animation: reel3 6s var(--ease) infinite; }
.reel-card.c2 { transform: rotate(7deg) translateX(26px) scale(.96); background: linear-gradient(160deg, #11331c, #0a1410); opacity: .8; animation: reel2 6s var(--ease) infinite; }
.reel-card.c1 { position: relative; background: radial-gradient(130% 110% at 40% 20%, rgba(var(--accent-rgb),.2), transparent 55%), linear-gradient(160deg, #14401f, #0b1813); border-color: var(--border-strong); box-shadow: 0 30px 70px -24px rgba(0,0,0,.8); display: grid; place-items: center; }
@keyframes reel2 { 0%,100% { transform: rotate(7deg) translateX(26px) scale(.96); } 50% { transform: rotate(9deg) translateX(32px) scale(.95); } }
@keyframes reel3 { 0%,100% { transform: rotate(-11deg) translateX(-30px) scale(.92); } 50% { transform: rotate(-13deg) translateX(-36px) scale(.91); } }
.reel-play { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; box-shadow: 0 0 0 0 var(--lime-glow); animation: pulse 2.6s ease-out infinite; }
.reel-play::before { content: ""; border-left: 20px solid #06080a; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.reel-streak { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; pointer-events: none; }
.reel-pop { position: absolute; bottom: 20px; right: 4px; z-index: 5; padding: 7px 13px; border-radius: 999px; background: var(--lime); color: #06080a; font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 30px -8px var(--lime-glow); opacity: 0; animation: popin 5.4s var(--ease) infinite; }

@media (max-width: 540px) {
  .heromock { margin-top: 40px; }
  .fbad-pop, .ph-pop, .reel-pop, .lp-toast { right: 6px; }
}

/* ============================================================= */
/* case study page                                               */
/* ============================================================= */
.cs-meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.cs-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--fg-muted); }
.cs-meta span b { color: var(--fg); font-weight: 600; }
.cs-meta .dot-g { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* result metrics */
.cs-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-metric { padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.cs-metric:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),.4); }
.cs-metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--lime), var(--lime-deep)); }
.cs-metric .m-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1; color: var(--lime-bright); letter-spacing: -.02em; }
.cs-metric .m-label { color: var(--fg-muted); font-size: .92rem; margin-top: 10px; }
.cs-metric .m-delta { display: inline-block; margin-top: 13px; font-size: 12px; font-weight: 600; color: var(--lime); padding: 3px 9px; border-radius: 6px; background: rgba(var(--accent-rgb),.1); }

/* what we did */
.cs-did { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.cs-did .card h3 { display: flex; align-items: center; gap: 10px; }
.cs-did .card h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); flex-shrink: 0; }

/* challenge / result split */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.cs-panel { padding: 30px 28px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.cs-panel .cs-tag { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-dim); }
.cs-panel.is-result { border-color: rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.05); }
.cs-panel.is-result .cs-tag { color: var(--lime); }
.cs-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 10px 0 10px; }
.cs-panel p { color: var(--fg-muted); }

/* mockup stage: phone ad + browser lander */
.cs-stage { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 40px; align-items: center; margin-top: 46px; }
.phone { position: relative; width: 254px; margin: 0 auto; border-radius: 36px; border: 1px solid var(--border-strong); background: #0a0e0c; padding: 11px; box-shadow: 0 44px 100px -34px rgba(0,0,0,.85); transition: transform .5s var(--ease); }
.cs-stage:hover .phone { transform: translateY(-5px) rotate(-1deg); }
.phone-notch { width: 96px; height: 6px; border-radius: 99px; background: var(--surface-2); margin: 3px auto 11px; }
.pad { border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: #0c1014; }
.pad-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.pad-av { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 210deg, var(--lime-deep), var(--lime-bright)); flex-shrink: 0; }
.pad-id b { font-size: 12.5px; color: var(--fg); display: block; line-height: 1.2; }
.pad-id i { font-style: normal; font-size: 10.5px; color: var(--fg-dim); }
.pad-img { position: relative; aspect-ratio: 4 / 4.4; }
.pad-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pad-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,8,10,.72)); }
.pad-tagline { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.pad-cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; font-size: 11.5px; color: var(--fg-dim); }
.pad-btn { padding: 6px 12px; border-radius: 8px; background: var(--lime); color: #06080a; font-weight: 600; font-size: 12px; }

.browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); background: #0a0e0c; box-shadow: 0 44px 110px -38px rgba(0,0,0,.85); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.browser-bar i:first-child { background: rgba(var(--accent-rgb),.55); }
.browser-url { margin-left: 10px; font-size: 12px; color: var(--fg-dim); }
.lander-hero { position: relative; height: 248px; }
.lander-hero img { width: 100%; height: 100%; object-fit: cover; }
.lander-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,10,.15), rgba(6,8,10,.88)); }
.lander-copy { position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 1; }
.lander-copy h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.55rem); color: #fff; }
.lander-copy p { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 6px; }
.lander-form { padding: 20px 28px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.lander-form .lf { height: 40px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); }
.lander-form .lf-btn { grid-column: 1 / -1; height: 44px; border-radius: 9px; background: var(--lime); color: #06080a; font-weight: 600; display: grid; place-items: center; font-size: 14px; }

/* before / after compare slider */
.compare { position: relative; max-width: 880px; margin: 44px auto 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-strong); user-select: none; touch-action: pan-y; cursor: ew-resize; box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.compare-pane { position: absolute; inset: 0; overflow: hidden; }
.compare-after { z-index: 1; }
.compare-before { z-index: 2; clip-path: inset(0 50% 0 0); }
.pane-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* "after" = clean Paradox lander */
.pane-after-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,10,.25), rgba(6,8,10,.86)); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(20px, 4vw, 42px); }
.pane-after-ov h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 2rem); color: #fff; max-width: 60%; }
.pane-after-ov .pa-cta { margin-top: 16px; display: inline-flex; align-self: flex-start; padding: 10px 18px; border-radius: 10px; background: var(--lime); color: #06080a; font-weight: 600; font-size: 13px; }
/* "before" = dull old site */
.pane-before-bg { position: absolute; inset: 0; background: #15171a; }
.pane-before-bg .ob-top { height: 38px; background: #1d2024; display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.pane-before-bg .ob-logo { width: 64px; height: 12px; border-radius: 3px; background: #3a3f45; }
.pane-before-bg .ob-nav { margin-left: auto; display: flex; gap: 10px; }
.pane-before-bg .ob-nav span { width: 34px; height: 8px; border-radius: 3px; background: #2c3036; }
.pane-before-bg .ob-body { padding: 26px 24px; }
.pane-before-bg .ob-line { height: 9px; border-radius: 3px; background: #25292e; margin-bottom: 10px; }
.pane-before-bg .ob-line.w1 { width: 80%; } .pane-before-bg .ob-line.w2 { width: 92%; } .pane-before-bg .ob-line.w3 { width: 70%; } .pane-before-bg .ob-line.w4 { width: 85%; }
.pane-before-bg .ob-btn { margin-top: 16px; width: 96px; height: 26px; border-radius: 5px; background: #303338; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--lime); z-index: 4; transform: translateX(-1px); box-shadow: 0 0 18px var(--lime-glow); }
.compare-handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--lime); box-shadow: 0 6px 22px -4px var(--lime-glow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px; }
.compare-tag { position: absolute; top: 14px; z-index: 5; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag-before { left: 14px; background: rgba(8,11,13,.72); color: var(--fg-muted); border: 1px solid var(--border); }
.tag-after { right: 14px; background: var(--lime); color: #06080a; }

/* featured testimonial */
.cs-quote { max-width: 840px; margin: 0 auto; text-align: center; }
.cs-quote .q-stars { color: var(--lime); font-size: 22px; letter-spacing: 4px; }
.cs-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.32; color: var(--fg); margin: 22px 0 26px; }
.cs-quote .q-author { display: inline-flex; align-items: center; gap: 13px; }
.cs-quote .q-av { width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(from 210deg, var(--lime-deep), var(--lime-bright)); display: grid; place-items: center; font-weight: 700; color: #06080a; font-size: 15px; }
.cs-quote .q-who { text-align: left; }
.cs-quote .q-who b { display: block; color: var(--fg); font-size: 15px; }
.cs-quote .q-who span { font-size: 13px; color: var(--fg-muted); }
.cs-quote .q-google { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13px; color: var(--fg-dim); }
.cs-quote .q-google img { width: 15px; height: 15px; }

/* cta band */
.cs-cta { text-align: center; }
.cs-cta .section-title { max-width: 760px; margin-left: auto; margin-right: auto; }
.cs-cta .cs-cta-actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .cs-metrics { grid-template-columns: 1fr 1fr; }
  .cs-did { grid-template-columns: 1fr; }
  .cs-split { grid-template-columns: 1fr; }
  .cs-stage { grid-template-columns: 1fr; gap: 30px; }
  .phone { width: 230px; }
}
@media (max-width: 480px) { .cs-metrics { grid-template-columns: 1fr; } }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps.steps-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps.steps-4 { grid-template-columns: 1fr; } }

/* ============================================================= */
/* mobile polish — tighter rhythm, visible logos, swipeable reviews */
/* ============================================================= */
@media (max-width: 760px) {
  /* kill the excess empty space between stacked sections on phones */
  .section { padding: 52px 0; }
  .section.tight { padding-top: 38px; }
  .showcase { padding: 48px 0; }
  .cs-metrics { gap: 12px; }
  .cs-split, .cs-did, .cs-stage { margin-top: 30px; }
  .section-lead { margin-top: 14px; }

  /* client logos: actually visible on a phone */
  .marquee-track { gap: 40px; }
  .marquee-track img { opacity: 0.78; height: 40px; }

  /* reviews: stop the auto-scroll, let the thumb swipe (scroll-snap carousel) */
  .revwall { -webkit-mask-image: none; mask-image: none; overflow: visible; gap: 14px; margin-top: 28px; }
  .rev-row { width: auto; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 20px 12px; scrollbar-width: none; animation: none !important; transform: none !important; }
  .rev-row::-webkit-scrollbar { display: none; }
  .rev { scroll-snap-align: center; width: 80vw; max-width: 330px; }
}

/* ============================================================= */
/* header: services mega-dropdown (desktop) + accordion (mobile) */
/* ============================================================= */
.nav-links { align-items: center; }
.nav-item { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--fg-muted); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav-item:hover .nav-trigger, .nav-trigger:focus-visible { color: var(--fg); }
.nav-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .25s var(--ease); }
.nav-item:hover .nav-caret { transform: rotate(-135deg); margin-top: 2px; }
.mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); margin-top: 12px; min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: rgba(12,16,18,0.97); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 36px 90px -24px rgba(0,0,0,.72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item:hover .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega a { display: block; padding: 13px 15px; border-radius: 12px; transition: background .2s; }
.mega a::after { content: none; }
.mega a:hover { background: var(--surface-2); }
.mega a b { display: block; color: var(--fg); font-size: 14.5px; font-weight: 600; }
.mega a span { display: block; color: var(--fg-muted); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }

/* mobile accordion (inside .nav-mobile) */
.m-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 6px; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--fg-muted); font-weight: 500; font-size: 16px; font-family: inherit; cursor: pointer; }
.m-acc-trigger .nav-caret { transition: transform .25s var(--ease); }
.m-acc.open .m-acc-trigger { color: var(--fg); }
.m-acc.open .m-acc-trigger .nav-caret { transform: rotate(-135deg); margin-top: 2px; }
.m-acc-panel { display: none; flex-direction: column; padding: 2px 0 6px 12px; }
.m-acc.open .m-acc-panel { display: flex; }
.m-acc-panel a { padding: 11px 6px; color: var(--fg-muted); font-size: 14.5px; border-bottom: 0; }
.m-acc-panel a:hover { color: var(--fg); }
@media (max-width: 760px) {
  .mega { min-width: 0; }
}

/* ===== case-studies hub ===== */
.cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.cs-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-2), rgba(255,255,255,.02)); transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.cs-card:hover { transform: translateY(-7px); border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 44px 100px -44px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--accent-rgb), .22); }
.cs-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cs-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.cs-card:hover .cs-card-img img { transform: scale(1.06); }
.cs-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(6,8,10,.55)); }
.cs-card-ind { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 13px; border-radius: 999px; background: rgba(8,11,13,.7); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 500; color: var(--fg); }
.cs-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.cs-card-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.cs-card-tag { color: var(--fg-muted); font-size: .95rem; margin-top: 9px; line-height: 1.45; }
.cs-card-metrics { display: flex; gap: 24px; margin-top: auto; padding-top: 20px; margin-bottom: 20px; border-top: 1px solid var(--border); }
.cs-card-metrics div b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--lime-bright); line-height: 1; }
.cs-card-metrics div span { font-size: 11.5px; color: var(--fg-muted); margin-top: 4px; display: block; }
.cs-card-more { color: var(--lime); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; transition: gap .25s var(--ease); }
.cs-card:hover .cs-card-more { gap: 11px; }
.cs-card.soon { pointer-events: none; opacity: .55; }
.cs-card.soon .cs-card-img { aspect-ratio: 16 / 10; background: linear-gradient(150deg, #11211a, #0a0f0c); display: grid; place-items: center; }
.cs-card.soon .cs-card-img span { color: var(--fg-dim); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1040px) { .cs-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cs-cards { grid-template-columns: 1fr; gap: 20px; } }

/* ===== smartivo case study extras ===== */
.browser-shot { max-width: 900px; margin: 44px auto 0; }
.browser-shot .shot-screen img { width: 100%; display: block; }
.smartivo-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 42px auto 0; justify-items: center; align-items: start; }
@media (max-width: 760px) { .smartivo-ads { grid-template-columns: 1fr; max-width: 360px; } }
/* real ad screenshot frame — capped so screenshots are never upscaled (stays sharp) + matte border */
.realad { width: 100%; max-width: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); background: #0c1014; padding: 8px; box-shadow: 0 28px 64px -32px rgba(0,0,0,.85); transition: transform .4s var(--ease), border-color .3s; }
.realad:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .4); }
.realad img { width: 100%; display: block; border-radius: 9px; }

/* GHL booking calendar embed (replaces the custom form) */
.book-cal { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 30px 70px -38px rgba(0,0,0,.6); }
.book-cal iframe { width: 100%; min-height: 600px; border: 0; display: block; transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }


/* ============================================================= */
/* Legal / prose pages (privacy policy)                          */
/* ============================================================= */
.legal { padding: 150px 0 84px; position: relative; z-index: 1; }
.legal .container { max-width: 820px; }
.legal h1 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin-bottom: 10px; }
.legal .legal-meta { color: var(--fg-dim); font-size: 14px; margin-bottom: 8px; }
.legal .legal-intro { color: var(--fg-muted); font-size: 17px; line-height: 1.7; margin: 22px 0 6px; }
.legal h2 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.45rem; margin: 40px 0 12px; color: var(--fg); }
.legal h2 .num { color: var(--lime); margin-right: 10px; }
.legal h3 { font-weight: 600; font-size: 1.02rem; margin: 22px 0 6px; color: var(--fg); }
.legal p, .legal li { color: var(--fg-muted); font-size: 16px; line-height: 1.72; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal li { margin-bottom: 9px; padding-left: 22px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.legal a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal .legal-box { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; margin: 20px 0; }
.legal .legal-box p { margin-bottom: 6px; }
.footer-legal { color: var(--fg-dim); text-decoration: none; transition: color .2s var(--ease); margin-right: auto; }
.footer-legal:hover { color: var(--lime); }
@media (max-width: 720px) { .legal { padding: 110px 0 56px; } .legal p, .legal li { font-size: 15.5px; } .footer-legal { margin-right: 0; } }

/* mobile: smaller hero eyebrow pill (like the pills below) + tighter top so the title sits higher / above the fold */
@media (max-width: 720px) {
  .hero { padding-top: 90px; }
  .hero .eyebrow { font-size: 10.5px; padding: 6px 13px; gap: 7px; letter-spacing: 0.03em; }
}


/* problem section — coral accent icon per card (signals "where the money leaks") */
.problem .card-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,107,90,.12); border: 1px solid rgba(255,107,90,.22); margin-bottom: 16px; transition: background .3s, transform .35s var(--ease); }
.problem .card-ic svg { width: 20px; height: 20px; stroke: #ff6f5e; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.problem .card:hover .card-ic { background: rgba(255,107,90,.2); transform: translateY(-2px); }

/* inline VSL — Vidalytics fills the hero frame on click; the animation + green play button are the poster */
.vsl-vida { position: absolute; inset: 0; z-index: 4; display: none; background: #000; }
.vsl-vida > div, .vsl-vida iframe, .vsl-vida video { width: 100% !important; height: 100% !important; border: 0; }
.vsl.playing .vsl-vida { display: block; }
.vsl.playing .vsl-faux, .vsl.playing .vsl-play, .vsl.playing .vsl-meta { display: none; }
.vsl.playing { cursor: default; }
.vsl.playing:hover .vsl-glass { transform: none; }

/* VSL poster (light, shown up front; Vidalytics covers it on interaction) */
.vsl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vsl-pp { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0; border: 0; border-radius: 50%; background: var(--lime); z-index: 5; box-shadow: 0 12px 38px rgba(0,0,0,.5); cursor: pointer; transition: transform .25s var(--ease); }
.vsl:hover .vsl-pp { transform: scale(1.08); }
.vsl-pp::after { content: ""; position: absolute; top: 50%; left: 54%; margin: -11px 0 0 -9px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #06080a; }
.vsl.playing .vsl-pp, .vsl.playing .vsl-poster { display: none; }


/* ── utility pages: thank-you (confirm) + book-a-call ─────────────── */
.nav.nav-solid { background: rgba(8,11,13,0.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--border); }
.nav-inner .nav-back { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); transition: color .2s; }
.nav-inner .nav-back:hover { color: var(--fg); }
.subpage { padding-top: 128px; padding-bottom: clamp(40px,6vw,80px); }
.confirm-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.confirm-inner .section-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.confirm-badge { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 30px; border-radius: 50%; background: rgba(var(--accent-rgb),0.13); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--lime); box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0.05); }
.confirm-badge svg { width: 42px; height: 42px; }
.confirm-steps { margin-top: 54px; text-align: left; }
.confirm-steps .card { display: block; }
.snum { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.22); color: var(--lime); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 18px; }
.confirm-cta { margin-top: 50px; }
.svc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); margin-bottom: 16px; }
.svc-ic svg { width: 20px; height: 20px; stroke: var(--lime); fill: none; }
@media (max-width: 720px){ .subpage { padding-top: 100px; } .confirm-steps { margin-top: 36px; } }

/* thank-you page: embedded Loom message */
.ty-video { max-width: 760px; margin: 44px auto 8px; }
.ty-video-frame { position: relative; padding-bottom: 53.854%; height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px -42px rgba(0,0,0,.85); background: #0a0d10; }
.ty-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px){ .ty-video { margin-top: 30px; } }

/* hero VSL: faded founder shot BEHIND the animated dashboard facade */
.vsl-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; z-index: 0; opacity: .5; filter: saturate(.92); }
.vsl-shot-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8,11,13,.52) 0%, rgba(8,11,13,.28) 34%, rgba(8,11,13,.7) 58%, rgba(8,11,13,.98) 86%); }
.vsl-glass .vsl-faux { z-index: 1; opacity: .92; }
.vsl-glass .vsl-play { z-index: 2; }
.vsl-glass .vsl-meta { z-index: 2; }
.vsl.playing .vsl-shot, .vsl.playing .vsl-shot-veil { display: none; }

/* ============================================================= */
/* LANDER EXTRAS — direct-response components (Paradox self-promo) */
/* ============================================================= */

/* slim DR header: logo + single CTA, no nav links */
.lp-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.lp-head.scrolled { background: rgba(8,11,13,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--border); }
.lp-head-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.lp-head .brand-logo { height: 28px; width: auto; }
.lp-head .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 520px) { .lp-head .btn { padding: 9px 14px; font-size: 13px; } .lp-head .brand-logo { height: 24px; } }

/* pain wall — owner's-own-words cards */
.painwall { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.pain { display: flex; gap: 15px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .3s var(--ease), border-color .3s; }
.pain:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.pain-x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.22); color: #ff7a7a; font-size: 17px; line-height: 1; }
.pain p { color: var(--fg-muted); font-size: 1rem; line-height: 1.5; }
.pain p em { font-style: italic; color: var(--fg); }
.pain-foot { text-align: center; color: var(--fg-dim); margin-top: 30px; font-size: 1.02rem; }
@media (max-width: 720px) { .painwall { grid-template-columns: 1fr; } }

/* two engines — Google + Meta, each hosting an animated device */
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; }
.engine { position: relative; padding: 32px 30px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), transparent); overflow: hidden; }
.engine-no { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.engine h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 12px 0 8px; letter-spacing: -.01em; }
.engine-lead { color: var(--fg-muted); font-size: 1rem; margin-bottom: 20px; }
.engine-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.engine-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--fg-muted); font-size: .96rem; }
.engine-list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; }
@media (max-width: 880px) { .engines { grid-template-columns: 1fr; } }

/* comparison table — generic vs Paradox */
.vtable-wrap { margin-top: 52px; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.vtable { width: 100%; border-collapse: collapse; font-size: .98rem; }
.vtable th, .vtable td { padding: 17px 22px; text-align: left; border-bottom: 1px solid var(--border); }
.vtable thead th { font-family: var(--font-display); font-weight: 600; font-size: 1rem; background: var(--surface); }
.vtable thead th:last-child { color: var(--lime-bright); background: rgba(var(--accent-rgb),.07); }
.vtable td:first-child { color: var(--fg-dim); font-weight: 500; }
.vtable td:nth-child(2) { color: var(--fg-muted); }
.vtable td:last-child { color: var(--fg); font-weight: 500; background: rgba(var(--accent-rgb),.04); border-left: 1px solid rgba(var(--accent-rgb),.14); }
.vtable tbody tr:last-child td { border-bottom: 0; }
.vtable td:last-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6e22e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain; }
@media (max-width: 680px) { .vtable th, .vtable td { padding: 13px 13px; font-size: .85rem; } .vtable td:last-child::before { display: none; } }

/* guarantee block */
.guarantee-box { display: grid; grid-template-columns: auto 1fr; gap: 38px; align-items: center; padding: clamp(30px, 4vw, 50px); border-radius: 28px; border: 1px solid rgba(var(--accent-rgb),.3); background: radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb),.12), transparent 55%), var(--bg-elev); }
.guarantee-seal { width: 148px; height: 148px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex-shrink: 0; color: #06080a; background: radial-gradient(circle at 50% 30%, var(--lime-bright), var(--lime-deep)); box-shadow: 0 0 0 9px rgba(var(--accent-rgb),.08), 0 24px 60px -20px var(--lime-glow); }
.guarantee-seal b { font-family: var(--font-display); font-weight: 700; font-size: 3.05rem; line-height: .78; letter-spacing: -.02em; }
.guarantee-seal span { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.guarantee-seal em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(6,8,10,.3); }
.guarantee-box h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.guarantee-box p { color: var(--fg-muted); margin-top: 14px; max-width: 60ch; }
.guarantee-box .fine { font-size: .82rem; color: var(--fg-dim); margin-top: 16px; }
@media (max-width: 640px) { .guarantee-box { grid-template-columns: 1fr; gap: 22px; text-align: center; justify-items: center; } }

/* urgency strip */
.urgency { text-align: center; max-width: 720px; margin: 0 auto; padding: 20px 26px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),.24); background: rgba(var(--accent-rgb),.05); color: var(--fg-muted); font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 11px; }
.urgency::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); flex-shrink: 0; animation: blink 1.6s ease-in-out infinite; }

/* case-study split tweaks for landers */
.cs-panel ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 9px; }
.cs-panel ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-muted); font-size: .97rem; }
.cs-panel.is-result ul li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain; background-size: 11px; }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
@media (max-width: 820px) { .cs-grid2 { grid-template-columns: 1fr; } }

/* booking note */
.book-note { font-size: .82rem; color: var(--fg-dim); margin-top: 12px; text-align: center; }

/* ============================================================= */
/* VERTICAL TIMELINE — "Growth System" (IA Outreach style)        */
/* numbered nodes on a left rail + connecting line, card on right */
/* ============================================================= */
.vtimeline { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.vstep { display: grid; grid-template-columns: 66px 1fr; gap: 26px; align-items: stretch; }
.vstep-rail { position: relative; display: flex; justify-content: center; }
.vstep-no { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: #06080a; background: radial-gradient(circle at 50% 28%, var(--lime-bright), var(--lime-deep)); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.06), 0 16px 36px -14px var(--lime-glow); }
.vstep:not(:last-child) .vstep-rail::after { content: ""; position: absolute; top: 60px; bottom: -16px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--lime), rgba(var(--accent-rgb),.12)); }
.vstep-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 30px; transition: transform .35s var(--ease), border-color .3s, background .3s; }
.vstep-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--surface-2); }
.vstep-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 9px; }
.vstep-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.vstep-week { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lime); padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.07); white-space: nowrap; }
.vstep-card p { color: var(--fg-muted); font-size: .98rem; }
.vstep-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vstep-tags span { font-size: 12px; color: var(--fg-muted); padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); }
@media (max-width: 560px) {
  .vtimeline { margin-top: 40px; gap: 12px; }
  .vstep { grid-template-columns: 46px 1fr; gap: 15px; }
  .vstep-no { width: 44px; height: 44px; border-radius: 13px; font-size: 1.18rem; }
  .vstep:not(:last-child) .vstep-rail::after { top: 44px; bottom: -12px; }
  .vstep-card { padding: 18px 18px; }
  .vstep-head { gap: 9px; margin-bottom: 7px; }
  .vstep-head h3 { font-size: 1.08rem; }
  .vstep-card p { font-size: .94rem; }
}

/* ============================================================= */
/* MOBILE FINE-TUNE — comparison table → stacked cards + polish   */
/* ============================================================= */
@media (max-width: 560px) {
  /* comparison table becomes one card per row (3 cramped columns → readable) */
  .vtable-wrap { border: 0; border-radius: 0; overflow: visible; margin-top: 36px; }
  .vtable, .vtable tbody, .vtable tr, .vtable td { display: block; width: 100%; }
  .vtable thead { display: none; }
  .vtable tr { border: 1px solid var(--border); border-radius: 15px; background: var(--surface); padding: 4px 18px 16px; margin-bottom: 12px; }
  .vtable td { border: 0 !important; padding: 12px 0 0; font-size: .96rem; background: transparent !important; }
  .vtable td:first-child { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--fg); padding-top: 15px; }
  .vtable td:nth-child(2)::before,
  .vtable td:last-child::before {
    display: block; content: ""; width: auto; height: auto; margin: 0 0 3px; background: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  }
  .vtable td:nth-child(2) { color: var(--fg-dim); }
  .vtable td:nth-child(2)::before { content: "Generička agencija"; color: #ff8585; }
  .vtable td:last-child { color: var(--fg); font-weight: 500; padding-left: 0; }
  .vtable td:last-child::before { content: "Paradox Media"; color: var(--lime); }

  /* tighten the big stacked-section rhythm a touch on phones */
  .section { padding: clamp(56px, 13vw, 88px) 0; }
  .hero { padding-top: 104px; }
  .guarantee-box { padding: 26px 22px; }
  /* engine animated devices: a hair more breathing room */
  .engine { padding: 26px 20px; }
  .serp, .heromock { margin-top: 4px; }
  /* result strip: 2x2 stays, slightly tighter gap */
  .result-row { gap: 26px 14px; }
}

/* founder VSL — self-hosted pitch video */
.founder-vsl { max-width: 880px; margin: 36px auto 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: #000; box-shadow: 0 40px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.14); }
.founder-vsl.square { max-width: 540px; }
.founder-video { width: 100%; height: auto; display: block; background: #000; }
@media (max-width: 560px) { .founder-vsl { margin-top: 26px; border-radius: 16px; } }

/* ---- landing-edit 2026-06-24: tighter video/pipeline spacing + clean connectors ---- */
.section:has(.founder-vsl) { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(24px, 3.5vw, 40px); }
.section:has(#pipeline) { padding-bottom: clamp(30px, 4.5vw, 48px); }
/* pipeline connectors: clean continuous lime line, no floating dots */
.pipeline { gap: 7px; }
.pipe-conn { margin: 0 -3px; height: 2px; border-radius: 2px; background: rgba(var(--accent-rgb), .42); box-shadow: 0 0 7px rgba(var(--accent-rgb), .16); }
.pipe-dot { display: none !important; }

/* ---- mobile overflow + header + calendar fixes (2026-06-24) ---- */
html, body { overflow-x: clip; }
.container { max-width: 100%; }
/* header: the CTA must never push out of the layout */
@media (max-width: 720px) {
  .lp-head .lp-head-inner { gap: 10px; }
  .lp-head .brand { min-width: 0; overflow: hidden; }
  .lp-head .brand-logo { height: 24px; width: auto; max-width: 42vw; }
  .lp-head .btn { flex-shrink: 0; white-space: nowrap; }
}
/* booking calendar: give it room on phones so the GHL widget isn't squeezed/scrollable */
@media (max-width: 560px) {
  .book .container { padding: 0 12px; }
  .book-inner { padding: 18px 12px; }
  .book-cal, .book-cal iframe { width: 100%; max-width: 100%; }
  .book-cal iframe { min-height: 720px; }
}