/* SEORAPID — main stylesheet */
:root {
  --ink: #15123a;
  --ink-soft: #55527a;
  --muted: #8a87a8;
  --line: #e7e5f3;
  --bg: #ffffff;
  --bg-soft: #f6f5fc;
  --surface: #ffffff;

  --purple-900: #1f0a5c;
  --purple-800: #2a0f6b;
  --purple-700: #3b1fa8;
  --blue-600: #2563eb;
  --teal: #22b8c9;
  --green: #5fd3a0;
  --orange: #ff6a1a;
  --amber: #ffa41b;
  --pink: #ff5a7a;

  --grad-hero: linear-gradient(115deg, #24096b 0%, #3b1fa8 48%, #2563eb 100%);
  --grad-orange: linear-gradient(90deg, #ff8a1a 0%, #ff5a1f 100%);
  --grad-brand: linear-gradient(135deg, #1fa3d6 0%, #6fd6a0 100%);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -18px rgba(42, 15, 107, .28);
  --shadow-sm: 0 8px 24px -12px rgba(42, 15, 107, .25);
  --container: 1200px;

  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Palette v1 (Seorapid Style Guide, 7 Nov 2026) */
  --purple-50:#f5f2fe; --purple-100:#e3e0ff; --purple-200:#c0bcfe; --purple-300:#a096fc; --purple-400:#836ef7; --purple-500:#6a3df0; --purple-600:#522ecb; --purple-950:#140743;
  --blue-50:#eff5ff; --blue-100:#dbe9ff; --blue-500:#3b82f6; --blue-700:#204fbe;
  --orange-50:#fff4ec; --orange-100:#ffe0c9; --orange-300:#ff8a1a; --orange-400:#ff6a1a; --orange-500:#ff5a1f; --orange-600:#d0440f; --orange-700:#ad3b0b;
  --teal-50:#ebfafb; --teal-400:#22b8c9; --teal-700:#116773;
  --mint-50:#ebfaf3; --mint-100:#d9f5e7; --mint-400:#5fd3a0; --mint-500:#20b386; --mint-700:#0f7a50;
  --amber-50:#fff6e5; --amber-100:#ffebce; --amber-400:#ffa41b; --amber-500:#f28c00; --amber-700:#9a5a00;
  --pink-50:#fff0f3; --pink-100:#ffd9e1; --pink-500:#ff4d6d; --pink-600:#d6334f; --pink-700:#ab263f;
  --ink-50:#f6f5fc; --ink-200:#e7e5f3; --ink-400:#8a87a8; --ink-500:#6f6c91; --ink-600:#55527a; --ink-900:#15123a;
  --grad-action: linear-gradient(90deg, var(--orange-600), var(--orange-700));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--purple-700); }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  padding: 16px 30px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: var(--grad-orange); color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 90, 31, .7); }
.btn-orange:hover { box-shadow: 0 18px 36px -12px rgba(255, 90, 31, .85); }
.btn-purple { background: var(--purple-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-purple:hover { background: var(--purple-800); }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--purple-700); color: var(--purple-700); }
.btn-block { width: 100%; }

.eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px;
}
.eyebrow-dark { color: var(--orange); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 18px 0; transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); box-shadow: 0 6px 24px -14px rgba(21, 18, 58, .35); padding: 10px 0; }
.header-inner { display: flex; align-items: center; gap: 32px; }
.brand { flex-shrink: 0; display: block; }
.brand-logo { height: 40px; width: auto; }
.brand-logo--dark { display: none; }
.is-scrolled .brand-logo--light { display: none; }
.is-scrolled .brand-logo--dark { display: block; }
.header-contact { display: flex; flex-direction: column; line-height: 1.25; color: #fff; text-decoration: none; font-size: 13px; }
.header-contact strong { font-family: var(--font-head); font-size: 15px; }
.is-scrolled .header-contact { color: var(--ink); }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 30px; }
.main-nav a { color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 16px; transition: color .2s; }
.main-nav a:hover { color: var(--amber); }
.is-scrolled .main-nav a { color: var(--ink); }
.is-scrolled .main-nav a:hover { color: var(--orange); }
.main-nav .nav-cta { background: var(--grad-orange); color: #fff !important; padding: 11px 22px; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(255, 90, 31, .7); }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14); cursor: pointer; padding: 12px; }
.nav-toggle span { display: block; height: 2.5px; background: #fff; border-radius: 2px; margin: 4.5px 0; transition: transform .25s, opacity .25s; }
.is-scrolled .nav-toggle { background: var(--bg-soft); }
.is-scrolled .nav-toggle span { background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--grad-hero);
  padding: 170px 0 250px;
}
.hero-bg .orb { position: absolute; border-radius: 50%; }
.orb-1 { width: 420px; height: 420px; right: 6%; top: 60px; background: radial-gradient(circle, rgba(95, 243, 255, .55) 0%, rgba(95, 243, 255, 0) 70%); filter: blur(10px); }
.orb-2 { width: 64px; height: 64px; left: 58%; top: 120px; background: radial-gradient(circle at 35% 35%, #8ff0c3, #22b8c9); box-shadow: 0 0 0 12px rgba(255, 255, 255, .08); animation: drift 9s ease-in-out infinite; }
.orb-3 { width: 120px; height: 120px; right: 4%; top: 320px; background: radial-gradient(circle at 35% 35%, #7fe7b4, #2a8fd8); box-shadow: 0 0 0 22px rgba(255, 255, 255, .07); animation: drift 12s ease-in-out infinite reverse; }
.spark { position: absolute; color: rgba(255, 255, 255, .45); font-size: 28px; font-weight: 300; animation: twinkle 4s ease-in-out infinite; }
.s1 { left: 8%; top: 22%; } .s2 { left: 46%; top: 70%; animation-delay: 1s; } .s3 { right: 22%; top: 18%; animation-delay: 2s; } .s4 { right: 12%; top: 58%; animation-delay: 3s; }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 800; margin-bottom: 22px; max-width: 620px; }
.hero-lead { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .85); max-width: 560px; margin-bottom: 32px; }

.audit-form {
  display: flex; gap: 8px; max-width: 560px; padding: 8px;
  background: var(--surface); border-radius: 999px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
}
.audit-form input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 20px; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border-radius: 999px; }
.audit-form input::placeholder { color: var(--muted); }
.audit-form .btn { padding: 14px 26px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f0a5c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat; flex-shrink: 0; }

.hero-art { position: relative; }
.rocket-scene { width: 100%; max-width: 520px; margin-left: auto; overflow: visible; }
.rocket { animation: hover 5s ease-in-out infinite; transform-origin: 260px 200px; }
.flame { animation: flicker .18s ease-in-out infinite alternate; transform-origin: 260px 318px; }
.float-card rect { filter: drop-shadow(0 14px 22px rgba(15, 5, 50, .35)); }
.card-a { animation: bob 6s ease-in-out infinite; }
.card-b { animation: bob 7s ease-in-out infinite .8s; }
.card-c { animation: bob 5.5s ease-in-out infinite 1.6s; }

.hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 260px; z-index: 1; }
.hero-waves svg { width: 100%; height: 100%; }

@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes flicker { from { transform: scaleY(.88); opacity: .9; } to { transform: scaleY(1.08); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -18px); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section-head { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 18px; }

/* Services */
.services { padding-top: 70px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 32px 32px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.service-card p { color: var(--ink-soft); font-size: 16px; }
.service-icon { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 24px; }
.service-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-teal { background: linear-gradient(135deg, #22b8c9, #1b8fd0); box-shadow: 0 12px 24px -12px #22b8c9; }
.ic-orange { background: var(--grad-orange); box-shadow: 0 12px 24px -12px #ff5a1f; }
.ic-purple { background: linear-gradient(135deg, #6a3df0, #3b1fa8); box-shadow: 0 12px 24px -12px #3b1fa8; }
.ic-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 12px 24px -12px #2563eb; }
.ic-green { background: linear-gradient(135deg, #5fd3a0, #20b386); box-shadow: 0 12px 24px -12px #20b386; }
.ic-pink { background: linear-gradient(135deg, #ff7a9a, #ff4d6d); box-shadow: 0 12px 24px -12px #ff4d6d; }
.text-link { font-family: var(--font-head); font-weight: 700; text-decoration: none; color: var(--purple-700); }
.text-link span { display: inline-block; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }

/* Why */
.why { background: var(--bg-soft); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-copy > p { color: var(--ink-soft); font-size: 18px; }
.check-list { margin: 28px 0 36px; display: grid; gap: 16px; }
.check-list li { position: relative; padding-left: 40px; color: var(--ink-soft); }
.check-list li strong { color: var(--ink); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand) ; }
.check-list li::after { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }

.why-art { position: relative; }
.dash { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.dash-top { display: flex; gap: 7px; padding: 14px 18px; background: var(--purple-800); }
.dash-top span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.dash-top span:first-child { background: var(--orange); }
.dash-top span:nth-child(2) { background: var(--amber); }
.dash-top span:nth-child(3) { background: var(--green); }
.dash-body { padding: 26px; }
.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.dash-kpis div { background: var(--bg-soft); border-radius: 14px; padding: 16px; }
.dash-kpis small { display: block; color: var(--muted); font-size: 13px; }
.dash-kpis strong { font-family: var(--font-head); font-size: 17px; }
.kpi-bar { display: block; height: 8px; margin-top: 12px; border-radius: 8px; background: linear-gradient(90deg, var(--teal) var(--w), #e4e2f2 var(--w)); }
.kpi-bar.k2 { background: linear-gradient(90deg, var(--orange) var(--w), #e4e2f2 var(--w)); }
.dash-chart { width: 100%; height: auto; }
.why-badge {
  position: absolute; left: -24px; bottom: -26px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); padding: 14px 20px; border-radius: 14px; box-shadow: var(--shadow); font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.why-badge svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--green); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; position: relative; }
.step { position: relative; padding: 34px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step p { color: var(--ink-soft); font-size: 16px; margin: 0; }
.step-num {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 20px;
  font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #fff; background: var(--grad-hero);
  box-shadow: 0 10px 22px -10px var(--purple-700);
}
.step:nth-child(2) .step-num { background: linear-gradient(135deg, #22b8c9, #1b8fd0); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, #5fd3a0, #20b386); }
.step:nth-child(4) .step-num { background: var(--grad-orange); }

/* Band */
.band { background: var(--grad-hero); color: #fff; padding: 56px 0; }
.band-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.band-item { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; border-left: 3px solid rgba(255, 255, 255, .22); }
.band-item:nth-child(1) { border-color: var(--green); }
.band-item:nth-child(2) { border-color: var(--teal); }
.band-item:nth-child(3) { border-color: var(--amber); }
.band-item:nth-child(4) { border-color: var(--orange); }
.band-k { font-family: var(--font-head); font-weight: 800; font-size: 28px; }
.band-v { color: rgba(255, 255, 255, .78); font-size: 15px; }

/* Packages */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.package { position: relative; display: flex; flex-direction: column; padding: 42px 34px 36px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.package h3 { font-size: 26px; margin-bottom: 4px; }
.package-sub { color: var(--ink-soft); margin-bottom: 26px; }
.package ul { display: grid; gap: 12px; margin-bottom: 34px; flex: 1; }
.package li { position: relative; padding-left: 30px; font-size: 16px; }
.package li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: rgba(34, 184, 201, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322b8c9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.package--featured { background: var(--grad-hero); color: #fff; border: 0; box-shadow: 0 30px 60px -24px rgba(42, 15, 107, .6); transform: translateY(-12px); }
.package--featured .package-sub { color: rgba(255, 255, 255, .78); }
.package--featured li::before { background-color: rgba(255, 255, 255, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd3a0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.package-tag { position: absolute; top: -14px; left: 34px; background: var(--grad-orange); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }

/* FAQ */
.faq { background: var(--bg-soft); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.faq-grid > div:first-child p { color: var(--ink-soft); }
.faq-list { display: grid; gap: 14px; }
.faq-list details { background: var(--surface); border-radius: 16px; border: 1px solid var(--line); transition: box-shadow .2s; }
.faq-list details[open] { box-shadow: var(--shadow-sm); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 60px 22px 26px; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b1fa8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .25s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: #ffe8da; }
.faq-list details p { padding: 0 26px 22px; margin: 0; color: var(--ink-soft); }

/* Contact */
.contact { position: relative; background: var(--grad-hero); color: #fff; padding: 150px 0 110px; overflow: hidden; }
.contact::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(95, 243, 255, .35), rgba(95, 243, 255, 0) 70%); pointer-events: none; }
.contact-waves { position: absolute; top: -1px; left: 0; right: 0; height: 120px; }
.contact-waves svg { width: 100%; height: 100%; }
.faq + .contact .contact-waves path { fill: var(--bg-soft); }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.contact-copy > p { color: rgba(255, 255, 255, .85); font-size: 18px; }
.contact-points { display: grid; gap: 14px; margin-top: 28px; }
.contact-points li { display: flex; align-items: center; gap: 12px; }
.contact-points a { color: #fff; font-weight: 600; }
.contact-points svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .12); fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.contact-form { background: var(--surface); color: var(--ink); border-radius: 24px; padding: 38px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg-soft);
  border: 2px solid transparent; border-radius: 12px; padding: 13px 15px; transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: var(--surface); }
.field .is-invalid, .consent.is-invalid span { border-color: var(--pink) !important; }
.consent.is-invalid span { color: #d6334f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); margin: 4px 0 22px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--purple-700); flex-shrink: 0; }
.form-status { margin: 14px 0 0; font-size: 15px; font-weight: 600; min-height: 1.4em; text-align: center; }
.form-status.ok { color: #128a5c; }
.form-status.err { color: #d6334f; }

/* Footer */
.site-footer { background: #140743; color: rgba(255, 255, 255, .7); padding: 80px 0 30px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-brand img { height: 42px; width: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 320px; }
.site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.site-footer ul { display: grid; gap: 10px; }
.site-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }

/* Legal / simple pages */
.page-hero { background: var(--grad-hero); color: #fff; padding: 160px 0 80px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; margin: 0; }
.legal { padding: 70px 0 100px; }
.legal .container { max-width: 820px; }
.legal h2 { font-size: 26px; margin-top: 2em; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.page-header-solid .site-header { background: transparent; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .header-contact { display: none; }
  .main-nav ul { gap: 22px; }
  .service-grid, .package-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .package--featured { transform: none; }
}

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--surface); padding: 100px 28px 28px;
    transform: translateX(100%); transition: transform .3s ease; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .4); z-index: 60;
  }
  .main-nav.is-open { transform: none; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .main-nav a { color: var(--ink); display: block; padding: 12px 6px; font-size: 18px; }
  .main-nav .nav-cta { text-align: center; margin-top: 12px; padding: 14px 22px; }
  .nav-toggle { position: relative; z-index: 70; }
  .nav-open .nav-toggle { background: var(--bg-soft); }
  .nav-open .nav-toggle span { background: var(--ink); }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 900px) {

  .hero { padding: 130px 0 200px; }
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-art { max-width: 400px; margin: 10px auto 0; }
  .rocket-scene { margin: 0 auto; }
  .why-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .why-art { order: 2; }
  .band-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 80px 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .brand-logo { height: 32px; }
  .audit-form { flex-direction: column; border-radius: 22px; padding: 10px; }
  .audit-form input { padding: 14px 14px; }
  .audit-form .btn { width: 100%; }
  .service-grid, .package-grid, .steps, .band-inner { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 26px 20px; }
  .why-badge { left: 12px; bottom: -22px; font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-waves { height: 140px; }
  .orb-2, .orb-3, .spark { display: none; }
  .orb-1 { width: 300px; height: 300px; right: -80px; top: auto; bottom: 120px; }
  .contact { padding-top: 120px; }
}

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

/* ===== Homepage: free SEO audit promo ===== */
.audit-promo { background: var(--ink-50, #f6f5fc); }
.ap-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.ap-copy > p { color: var(--ink-soft); font-size: 18px; }
.ap-list { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 14px; }
.ap-list li { position: relative; padding-left: 36px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.ap-list li strong { color: var(--ink); }
.ap-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.ap-small { margin: 14px 0 0; font-size: 14px !important; color: var(--ink-500) !important; }

.ap-art { position: relative; padding-bottom: 84px; }
.ap-card { position: relative; background: var(--surface); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.ap-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 22px 22px 0 0; background: var(--pink-500); }
.ap-tag { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; color: var(--ink-500); background: var(--ink-50, #f6f5fc); padding: 4px 10px; border-radius: 999px; }
.ap-head { display: flex; align-items: center; gap: 18px; margin: 6px 0 20px; padding-right: 90px; }
.ap-gauge { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.ap-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ap-gauge circle { fill: none; stroke-width: 9; }
.ap-gauge .tr { stroke: var(--ink-200, #e7e5f3); }
.ap-gauge .br { stroke: var(--pink-500); stroke-linecap: round; }
.ap-gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--pink-600); }
.ap-gauge i { position: absolute; right: -6px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: #fff; background: var(--pink-600); border: 3px solid var(--surface); }
.ap-dom { display: block; font-family: var(--font-head); font-size: 20px; color: var(--ink); }
.ap-verdict { display: block; margin-top: 4px; font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--pink-700); }

.ap-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 18px; }
.ap-areas div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink-600, #55527a); }
.ap-areas i { grid-column: 1 / -1; grid-row: 2; height: 7px; border-radius: 99px; background: var(--ink-200, #e7e5f3); position: relative; overflow: hidden; }
.ap-areas i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: var(--pink-500); }
.ap-areas i.ok::after { background: var(--amber-500); }
.ap-areas b { font-family: var(--font-head); font-size: 14px; }
.ap-areas b.bad { color: var(--pink-600); } .ap-areas b.ok { color: var(--amber-700); }

.ap-serp { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.ap-q { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #202124; border: 1px solid #dfe1e5; border-radius: 999px; padding: 7px 12px; margin-bottom: 10px; }
.ap-q .d { width: 7px; height: 7px; border-radius: 50%; } .ap-q .d:last-of-type { margin-right: 8px; }
.ap-q .b { background: #4285f4; } .ap-q .r { background: #ea4335; } .ap-q .y { background: #fbbc05; } .ap-q .g { background: #34a853; }
.ap-row { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #1a0dab; padding: 5px 0; }
.ap-row em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #e8f0fe; color: #1a56c4; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.ap-row i { height: 7px; width: var(--w); max-width: 100%; border-radius: 6px; background: var(--teal-400); }
.ap-you { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--pink-600); border: 2px dashed var(--pink-500); background: var(--pink-50); border-radius: 10px; padding: 8px 12px; }

.ap-loss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--pink-50); border: 1px solid var(--pink-100); border-radius: 14px; padding: 12px 16px; }
.ap-loss small { font-size: 13px; font-weight: 700; color: var(--pink-700); }
.ap-loss strong { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--pink-700); }
.ap-loss strong span { font-size: 13px; color: var(--ink-500); margin-left: 2px; }

.ap-fix { position: absolute; left: -34px; bottom: 0; width: min(330px, 80%); background: var(--grad-hero); color: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 24px 50px -20px rgba(42, 15, 107, .65); overflow: hidden; }
.ap-fix-lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-400); }
.ap-fix-lbl::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-400); color: #fff; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; }
.ap-fix p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }

@media (max-width: 1000px) {
  .ap-grid { grid-template-columns: 1fr; gap: 50px; }
  .ap-fix { left: 16px; }
}
@media (max-width: 560px) {
  .ap-card { padding: 20px 16px; }
  .ap-head { padding-right: 0; margin-top: 26px; }
  .ap-areas { grid-template-columns: 1fr; }
  .ap-fix { position: relative; left: auto; width: auto; margin-top: -18px; margin-left: 12px; margin-right: 12px; }
  .ap-art { padding-bottom: 0; }
}

/* ===== Chat button: AI assistant + WhatsApp ===== */
.sr-chat { position: fixed; right: 22px; bottom: 22px; z-index: 900; font-family: var(--font-body); }
.sr-fab { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--grad-hero); box-shadow: 0 16px 34px -12px rgba(37, 99, 235, .7), 0 0 0 4px rgba(255, 255, 255, .9); transition: transform .2s ease; position: relative; }
.sr-fab:hover { transform: translateY(-2px) scale(1.04); }
.sr-fab:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; }
.sr-fab svg { width: 34px; height: 34px; }
.sr-fab-open svg path:first-child { fill: var(--orange-400); }
.sr-fab-open svg .spk { fill: #fff; }
.sr-fab-close { display: none; }
.sr-fab-close svg { fill: none; stroke: var(--orange-400); stroke-width: 2.6; stroke-linecap: round; }
.sr-chat.is-open .sr-fab-open { display: none; }
.sr-chat.is-open .sr-fab-close { display: grid; }
.sr-fab::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--orange-400); opacity: 0; animation: srPulse 3.2s ease-out 2s 3; }
@keyframes srPulse { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sr-fab::after { animation: none; } }

.sr-menu { position: absolute; right: 0; bottom: 76px; width: 280px; background: var(--surface); border-radius: 18px; padding: 8px; box-shadow: 0 24px 60px -20px rgba(42, 15, 107, .45); border: 1px solid var(--line); }
.sr-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; background: none; border-radius: 12px; cursor: pointer; text-align: left; color: var(--ink); text-decoration: none; font: inherit; }
.sr-opt:hover, .sr-opt:focus-visible { background: var(--ink-50, #f6f5fc); outline: none; }
.sr-opt strong { display: block; font-family: var(--font-head); font-size: 15px; }
.sr-opt small { display: block; font-size: 13px; color: var(--ink-500); }
.sr-opt-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-hero); flex-shrink: 0; }
.sr-opt-ico svg { width: 22px; height: 22px; fill: var(--orange-400); }
.sr-opt-ico.wa svg { fill: none; stroke: var(--orange-400); stroke-width: 1.8; }
.sr-opt-ico.wa svg .fill { fill: var(--orange-400); stroke: none; }

.sr-panel { position: absolute; right: 0; bottom: 76px; width: 370px; height: min(560px, calc(100vh - 120px)); background: var(--surface); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(42, 15, 107, .5); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.sr-panel[hidden], .sr-menu[hidden] { display: none; }
.sr-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; background: var(--grad-hero); color: #fff; }
.sr-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex-shrink: 0; }
.sr-avatar svg { width: 22px; height: 22px; fill: var(--orange-400); }
.sr-head strong { display: block; font-family: var(--font-head); font-size: 16px; }
.sr-head small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.sr-head small i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400, #5fd3a0); }
.sr-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); cursor: pointer; display: grid; place-items: center; }
.sr-x svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.sr-x:hover { background: rgba(255, 255, 255, .22); }
.sr-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ink-50, #f6f5fc); }
.sr-msg { display: flex; }
.sr-msg > div { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.sr-msg.bot > div { background: var(--surface); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 2px 8px -4px rgba(42, 15, 107, .2); }
.sr-msg.me { justify-content: flex-end; }
.sr-msg.me > div { background: var(--grad-hero); color: #fff; border-bottom-right-radius: 6px; }
.sr-msg.sr-err > div { background: var(--pink-50); color: var(--pink-700); }
.sr-typing > div { display: inline-flex; gap: 5px; padding: 14px 16px; }
.sr-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400, #8a87a8); animation: srDot 1.2s infinite ease-in-out; }
.sr-typing span:nth-child(2) { animation-delay: .15s; } .sr-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes srDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sr-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--ink-50, #f6f5fc); }
.sr-quick:empty { display: none; }
.sr-quick button { border: 1px solid var(--purple-200, #c0bcfe); background: var(--surface); color: var(--purple-600, #522ecb); border-radius: 999px; padding: 6px 12px; font: 600 13px/1.3 var(--font-body); cursor: pointer; }
.sr-quick button:hover { background: var(--purple-50, #f5f2fe); }
.sr-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.sr-form textarea { flex: 1; resize: none; background: var(--surface); border: 2px solid var(--ink-200, #e7e5f3); border-radius: 14px; padding: 10px 12px; font: 400 15px/1.4 var(--font-body); color: var(--ink); max-height: 120px; outline: none; }
.sr-form textarea:focus { border-color: var(--teal-400); }
.sr-send { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--grad-orange); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 10px 20px -10px rgba(255, 90, 31, .8); }
.sr-send svg { width: 20px; height: 20px; fill: #fff; }
.sr-note { margin: 0; padding: 0 14px 12px; font-size: 12px; color: var(--ink-500); background: var(--surface); }
.sr-note a { color: var(--purple-600, #522ecb); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .sr-chat { right: 14px; bottom: 14px; }
  .sr-fab { width: 56px; height: 56px; }
  .sr-panel { position: fixed; left: 8px; right: 8px; bottom: 80px; width: auto; height: calc(100vh - 100px); height: calc(100dvh - 100px); }
  .sr-menu { width: calc(100vw - 28px); }
}
@media print { .sr-chat { display: none; } }

/* ===== Theme switch ===== */
.theme-toggle { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: background .2s, color .2s; }
.theme-toggle:hover { background: rgba(255, 255, 255, .24); }
.theme-toggle:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.is-scrolled .theme-toggle { background: var(--bg-soft); color: var(--ink); }

/* ===== Dark theme ===== */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #efedfb; --ink-soft: #b8b5d4; --muted: #8f8cb0; --line: #2c285a;
  --bg: #0d0a24; --bg-soft: #141133; --surface: #1b1743;
  --ink-900: #efedfb; --ink-600: #c3c0de; --ink-500: #a3a0c4; --ink-400: #8582a6; --ink-200: #2c285a; --ink-50: #141133;
  --purple-50: #221c55; --purple-100: #2c2470; --purple-200: #4a3fa3; --purple-600: #b2a6ff;
  --blue-50: #141f45; --orange-50: #2a1a1f; --orange-100: #44241a; --teal-50: #0f2a33; --teal-700: #6fe0ec;
  --mint-50: #0f2a2a; --mint-100: #143a33; --mint-700: #4fdcaa;
  --amber-50: #2a2014; --amber-100: #3d2c12; --amber-700: #ffb84d;
  --pink-50: #2c1530; --pink-100: #4a1d33; --pink-600: #ff7d92; --pink-700: #ff9aab;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .7); --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, .6);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(13, 10, 36, .92); box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .9); }
[data-theme="dark"] .is-scrolled .brand-logo--light { display: block; }
[data-theme="dark"] .is-scrolled .brand-logo--dark { display: none; }
[data-theme="dark"] .faq-list summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2a6ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
[data-theme="dark"] .ap-q { color: #e8eaed; border-color: #5f6368; }
[data-theme="dark"] .ap-row { color: #8ab4f8; }
[data-theme="dark"] .ap-row em { background: #303134; color: #8ab4f8; }
[data-theme="dark"] img.logo-on-light { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 1100px) {
  [data-theme="dark"] .main-nav { background: var(--surface); }
}

.sr-avatar img, .sr-opt-ico img { width: 26px; height: 26px; object-fit: contain; display: block; }
.sr-opt-ico img { width: 24px; height: 24px; }
@media (max-width: 1100px) { .theme-toggle { margin-left: auto; } .theme-toggle + .nav-toggle { margin-left: 8px; } }
[data-theme="dark"] .hero-waves path:last-child { fill: var(--bg); }
[data-theme="dark"] .audit-hero .hero-waves path:last-child { fill: var(--bg-soft); }
[data-theme="dark"] .contact-waves path { fill: var(--bg); }
[data-theme="dark"] .faq + .contact .contact-waves path { fill: var(--bg-soft); }
[data-theme="dark"] a:not(.btn):not(.nav-cta):not(.ba *) { color: var(--purple-600); }
[data-theme="dark"] .text-link { color: var(--purple-600); }
[data-theme="dark"] .btn-outline:hover { border-color: var(--purple-600); color: var(--purple-600); }
[data-theme="dark"] .consent input { accent-color: var(--purple-400); }

/* ===== Packages: prices and colour per package ===== */
.package-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: -10px 0 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.package-price small { font-size: 14px; font-weight: 600; opacity: .8; }
.package-price strong { font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.package-price span { font-size: 14px; opacity: .8; }
.package--launch, .package--scale { color: #fff; border: 0; }
.package--launch { background: linear-gradient(135deg, #0b5563 0%, #0f7a50 100%); box-shadow: 0 30px 60px -28px rgba(15, 122, 80, .65); }
.package--scale { background: linear-gradient(135deg, #8f1f45 0%, #ad3b0b 100%); box-shadow: 0 30px 60px -28px rgba(173, 59, 11, .6); }
.package--launch .package-sub, .package--scale .package-sub { color: rgba(255, 255, 255, .8); }
.package--launch li::before, .package--scale li::before { background-color: rgba(255, 255, 255, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.btn-light { background: #fff; color: #15123a; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }
.btn-light:hover { background: #f6f5fc; }
.package--launch .btn-light { color: #0b5563; }
.package--scale .btn-light { color: #8f1f45; }

/* ===== Before / after website comparison ===== */
.before-after { background: var(--bg); }
.ba { position: relative; max-width: 1040px; margin: 0 auto; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.ba-chrome { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.ba-dots { display: flex; gap: 6px; } .ba-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .ba-dots i:nth-child(2) { background: #febc2e; } .ba-dots i:nth-child(3) { background: #28c840; }
.ba-url { flex: 1; max-width: 420px; margin: 0 auto; text-align: center; font-size: 13px; color: var(--ink-500); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-screen { position: relative; }
.ba-view { position: relative; height: min(600px, 70vh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; container-type: inline-size; scrollbar-width: thin; }
.ba-view:focus-visible { outline: 3px solid var(--teal-400); outline-offset: -3px; }
.ba-stack { display: grid; }
.ba-stack[hidden] { display: none; }
.ba.is-switching .ba-stack:not([hidden]) { animation: baIn .45s ease; }
@keyframes baIn { from { opacity: 0; transform: translateX(18px); } }
.ba-page { grid-area: 1 / 1; min-width: 0; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; pointer-events: none; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(21, 18, 58, .25), 0 0 18px rgba(21, 18, 58, .35); }
.ba-knob { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--grad-orange); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(255, 90, 31, .8); pointer-events: auto; cursor: ew-resize; touch-action: none; }
.ba-knob svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ba-tag { position: absolute; bottom: 14px; z-index: 2; font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 12px; border-radius: 999px; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.ba-tag-before { left: 14px; background: #55527a; }
.ba-tag-after { right: 14px; background: var(--grad-hero); }
.ba-range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.ba-range:focus-visible ~ .ba-handle .ba-knob { box-shadow: 0 0 0 4px var(--teal-400); }
.ba-note { text-align: center; margin: 16px 0 0; font-size: 13px; color: var(--ink-500); }
.ba.is-dragging, .ba.is-dragging * { cursor: ew-resize; user-select: none; }

/* --- Before: an outdated site --- */
.ba-before { container-type: inline-size; }
.ba-before.is-zoomed { width: 1000px; }

/* --- After: a modern site --- */
.ba-after { --ex-ink: #0b1d33; --ex-navy: #0f2742; --ex-yellow: #ffc21a; --ex-muted: #52607a; --ex-line: #e3e8ef; background: #fff; color: var(--ex-ink); font-family: var(--font-body); font-size: max(12px, 1.4cqw); line-height: 1.55; }
.nw-nav { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3cqw; border-bottom: 1px solid var(--ex-line); }
.nw-logo { display: flex; align-items: center; gap: max(8px, 1cqw); }
.nw-mark { width: max(30px, 3.6cqw); height: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(11, 29, 51, .3)); }
.nw-word { display: grid; line-height: 1; }
.nw-word b { font-family: var(--font-head); font-weight: 800; font-size: max(15px, 2cqw); letter-spacing: -.02em; color: var(--ex-ink); }
.nw-word small { font-family: var(--font-head); font-weight: 700; font-size: max(8px, .95cqw); letter-spacing: .32em; text-transform: uppercase; color: #c48b00; margin-top: .35em; }

.nw-links { display: flex; gap: 2.2cqw; margin-left: auto; font-weight: 600; color: var(--ex-muted); }
.nw-btn { display: inline-block; background: var(--ex-yellow); color: var(--ex-ink); font-family: var(--font-head); font-weight: 800; font-size: max(11px, 1.3cqw); padding: .8cqw 1.8cqw; border-radius: 8px; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(255, 176, 0, .9); }
.nw-nav .nw-btn { background: var(--ex-navy); color: #fff; box-shadow: none; }
.nw-hero { position: relative; overflow: hidden; isolation: isolate; padding: 7cqw 5cqw 6.5cqw; min-height: 36cqw; background: var(--ex-navy); color: #fff; }
.nw-hero-media { position: absolute; inset: 0; z-index: -2; }
.nw-hero-media img, .nw-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.nw-hero-media video { opacity: 0; transition: opacity .6s ease; }
.nw-hero-media video.is-playing { opacity: 1; }
.nw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 22, 40, .95) 0%, rgba(11, 29, 51, .86) 34%, rgba(11, 29, 51, .35) 58%, rgba(11, 29, 51, 0) 78%), linear-gradient(0deg, rgba(8, 22, 40, .4), transparent 40%); }
.nw-hero-copy { max-width: 50%; }
.nw-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: max(10px, 1.1cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-yellow); }
.nw-hero h3 { font-family: var(--font-head); font-weight: 800; font-size: max(20px, 3.9cqw); line-height: 1.1; margin: 1cqw 0; color: #fff; }
.nw-hero p { margin: 0 0 2.2cqw; color: rgba(255, 255, 255, .9); max-width: 40ch; }
.nw-hero h3 { max-width: 15ch; text-wrap: balance; }
.nw-ctas { display: flex; flex-wrap: wrap; gap: 1cqw; }
.nw-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.nw-trust { display: flex; flex-wrap: wrap; gap: .6cqw 1.8cqw; margin-top: 2.4cqw; font-size: max(11px, 1.2cqw); font-weight: 600; }
.nw-trust span::before { content: "✓"; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 6px; border-radius: 50%; background: var(--ex-yellow); color: var(--ex-ink); font-weight: 900; font-size: .8em; }

.nw-section { padding: 4cqw 3cqw 1cqw; }
.nw-section h4 { font-family: var(--font-head); font-weight: 800; font-size: max(16px, 2.4cqw); margin: 0 0 2cqw; color: var(--ex-ink); }
.nw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.nw-cards div { border: 1px solid var(--ex-line); border-top: 3px solid var(--ex-yellow); border-radius: 10px; padding: 1.8cqw; background: #fff; box-shadow: 0 10px 24px -18px rgba(11, 29, 51, .35); }
.nw-cards i { display: grid; place-items: center; width: max(34px, 4.2cqw); height: max(34px, 4.2cqw); border-radius: 10px; margin-bottom: 1.2cqw; background: var(--ex-navy); box-shadow: 0 10px 18px -10px rgba(11, 29, 51, .5); }
.nw-cards i svg, .nw-step-row em svg { width: 56%; height: 56%; fill: none; stroke: var(--ex-yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nw-step-row em svg { stroke: var(--ex-ink); width: 50%; height: 50%; }
.nw-cards b, .nw-step-row b { display: block; font-family: var(--font-head); font-size: max(12px, 1.5cqw); color: var(--ex-ink); }
.nw-cards span, .nw-step-row span { color: var(--ex-muted); font-size: max(11px, 1.2cqw); }
.nw-step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.nw-step-row em { display: grid; place-items: center; width: max(34px, 4.2cqw); height: max(34px, 4.2cqw); border-radius: 50%; background: var(--ex-yellow); margin-bottom: 1cqw; }
.nw-cta { margin: 4cqw 3cqw 3cqw; padding: 3cqw; border-radius: 12px; background: radial-gradient(circle at 92% 50%, rgba(255, 194, 26, .22), transparent 45%), var(--ex-navy); border-left: 6px solid var(--ex-yellow); color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4cqw 2cqw; }
.nw-cta b { font-family: var(--font-head); font-size: max(16px, 2.4cqw); }
.nw-cta span:not(.nw-btn) { grid-column: 1; color: rgba(255, 255, 255, .85); }
.nw-cta .nw-btn { grid-column: 2; grid-row: 1 / span 2; }
.nw-foot { padding: 2cqw 3cqw 3cqw; color: rgba(255, 255, 255, .7); background: var(--ex-ink); font-size: max(10px, 1.1cqw); }

@media (max-width: 640px) {
  .ba-view { height: 520px; }
  .ba-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
/* the mock sites respond to the size of the preview screen, not the browser */
@container (max-width: 600px) {
  .nw-links { display: none; }
  .nw-cards { grid-template-columns: 1fr 1fr; }
  .nw-hero-copy { max-width: 100%; }
  .nw-nav .nw-btn { margin-left: auto; }
  .nw-hero { padding: 9cqw 6cqw; min-height: 0; }
  .nw-hero::before { background: linear-gradient(90deg, rgba(8, 22, 40, .92), rgba(11, 29, 51, .72)); }
  .nw-hero-media img, .nw-hero-media video { object-position: 78% 30%; }
  .nw-step-row { grid-template-columns: 1fr; gap: 3cqw; }
  .nw-cta { grid-template-columns: 1fr; }
  .nw-cta .nw-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 2cqw; }
}

/* --- Before/after: example picker and device switch --- */
.ba-toolbar { max-width: 1040px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ba-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ba-arrow { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-900); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.ba-arrow:hover { transform: translateY(-1px); border-color: var(--orange-400); }
.ba-arrow svg, .ba-tab svg, .ba-device svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tablist, .ba-device { display: flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.ba-tablist { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-width: 0; }
.ba-tablist::-webkit-scrollbar { display: none; }
.ba-tab, .ba-device button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink-500); font: 700 14px/1 var(--font-head); padding: 10px 16px; border-radius: 999px; white-space: nowrap; cursor: pointer; scroll-snap-align: center; transition: background .2s ease, color .2s ease; }
.ba-tab:hover, .ba-device button:hover { color: var(--ink-900); }
.ba-tab[aria-selected="true"] { background: var(--grad-hero); color: #fff; box-shadow: 0 8px 18px -10px rgba(42, 15, 107, .8); }
.ba-device button[aria-pressed="true"] { background: var(--grad-orange); color: #fff; box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .8); }
.ba-tab:focus-visible, .ba-device button:focus-visible, .ba-arrow:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
@media (max-width: 700px) {
  .ba-toolbar { justify-content: center; }
  .ba-device { display: none; }
  .ba-tab { padding: 10px 13px; font-size: 13px; }
  .ba-arrow { width: 38px; height: 38px; }
}

/* phone frame */
.ba { transition: max-width .45s ease, border-radius .45s ease, padding .45s ease, background-color .45s ease; }
.ba.is-mobile { max-width: 404px; border-radius: 52px; padding: 12px; background: #0e0b24; border-color: #0e0b24; box-shadow: var(--shadow), inset 0 0 0 2px #2c2752; }
.ba.is-mobile .ba-chrome { position: relative; height: 82px; align-items: flex-end; padding: 0 14px 10px; border-radius: 40px 40px 0 0; background: #f2f1f8; border-bottom-color: #e2e0ee; }
.ba.is-mobile .ba-chrome::before { content: ""; position: absolute; top: 9px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: #0e0b24; }
.ba.is-mobile .ba-dots { display: none; }
.ba.is-mobile .ba-chrome::after { content: "9:41"; position: absolute; top: 14px; left: 34px; font: 700 13px/1 var(--font-head); color: #0e0b24; }
.ba.is-mobile .ba-url { flex: 1; max-width: none; }
.ba.is-mobile .ba-url { font-size: 12px; background: #fff; color: #55527a; border-color: #e2e0ee; }
.ba.is-mobile .ba-screen { border-radius: 0 0 40px 40px; overflow: hidden; }
.ba.is-mobile .ba-view { height: min(700px, 76vh); }
.ba.is-mobile .ba-tag { font-size: 11px; padding: 5px 10px; bottom: 18px; }

/* --- Before (dental): purple Comic Sans practice site --- */

/* --- After (dental): light, rounded, calm --- */
.dn { --dn-ink: #12352e; --dn-green: #1f6f57; --dn-mint: #dff3ea; --dn-muted: #557069; background: #f6faf7; color: var(--dn-ink); font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: max(12px, 1.4cqw); line-height: 1.5; }
.dn-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 1.8cqw 4cqw; }
.dn-logo { display: flex; align-items: center; gap: 10px; }
.dn-logo b { display: block; font-size: max(15px, 1.9cqw); letter-spacing: -.02em; line-height: 1; }
.dn-logo small { display: block; color: var(--dn-green); font-size: max(10px, 1.1cqw); font-weight: 600; }
.dn-mark { display: grid; place-items: center; width: max(32px, 3.6cqw); height: max(32px, 3.6cqw); border-radius: 50%; background: var(--dn-green); }
.dn-mark svg { width: 55%; height: 55%; fill: #fff; stroke: none; }
.dn-links { display: flex; gap: 2.6cqw; margin-left: auto; color: var(--dn-muted); font-weight: 600; }
.dn-btn { display: inline-block; background: var(--dn-green); color: #fff; font-weight: 700; padding: .95cqw 2.3cqw; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(31, 111, 87, .9); }
.dn-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4cqw; align-items: center; padding: 2cqw 4cqw 5cqw; }
.dn-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #d3eadf; font-weight: 600; font-size: max(11px, 1.15cqw); color: var(--dn-green); }
.dn-badge i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .2); }
.dn-hero h3 { font-size: max(24px, 4.6cqw); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin: 1.8cqw 0 1.4cqw; color: var(--dn-ink); max-width: 13ch; }
.dn-hero p { color: var(--dn-muted); margin: 0 0 2.4cqw; max-width: 36ch; font-size: max(13px, 1.55cqw); }
.dn-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2cqw 2.4cqw; }
.dn-link { font-weight: 700; color: var(--dn-green); }
.dn-meta { display: flex; flex-wrap: wrap; gap: .4cqw 1.6cqw; margin-top: 2.6cqw; color: var(--dn-muted); font-size: max(11px, 1.15cqw); }
.dn-meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #9dd8bf; vertical-align: middle; }
.dn-photo { position: relative; }
.dn-photo-in { position: relative; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 32px 32px; overflow: hidden; background: var(--dn-mint); box-shadow: 0 30px 60px -30px rgba(18, 53, 46, .45); }
.dn-photo-in img, .dn-photo-in video, .rs-media img, .rs-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dn-photo-in img, .dn-photo-in video { object-position: 66% 40%; }
.dn-photo-in video, .rs-media video { opacity: 0; transition: opacity .6s ease; }
.dn-photo-in video.is-playing, .rs-media video.is-playing { opacity: 1; }
.dn-slot { position: absolute; left: -3cqw; bottom: 4cqw; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: #fff; border-radius: 18px; box-shadow: 0 18px 36px -16px rgba(18, 53, 46, .45); }
.dn-slot-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--dn-mint); }
.dn-slot-ic svg, .dn-ic svg, .dn-list i svg { width: 56%; height: 56%; fill: none; stroke: var(--dn-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dn-slot small { display: block; color: var(--dn-muted); font-size: 11px; line-height: 1.2; }
.dn-slot b { font-size: 14px; }
.dn-section { padding: 3.6cqw 4cqw 1cqw; }
.dn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; margin-bottom: 2cqw; }
.dn-head span { color: var(--dn-muted); }
.dn h4 { font-size: max(17px, 2.5cqw); letter-spacing: -.02em; margin: 0; font-weight: 800; color: var(--dn-ink); }
.dn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.dn-list > div { display: flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 1.8cqw; background: #fff; border: 1px solid #e0eee7; border-radius: 20px; }
.dn-ic { flex: none; display: grid; place-items: center; width: max(36px, 4.2cqw); height: max(36px, 4.2cqw); border-radius: 50%; background: var(--dn-mint); }
.dn-list b { display: block; font-size: max(13px, 1.5cqw); }
.dn-list small { color: var(--dn-muted); font-size: max(11px, 1.2cqw); }
.dn-list i { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f8f4; flex: none; }
.dn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding-bottom: 4cqw; }
.dn-card { background: #fff; border: 1px solid #e0eee7; border-radius: 26px; padding: 2.6cqw; }
.dn-card h4 { margin-bottom: 1.6cqw; }
.dn-price { display: flex; justify-content: space-between; gap: 12px; padding: 1.1cqw 0; border-bottom: 1px dashed #d6e7df; }
.dn-price b { color: var(--dn-green); white-space: nowrap; }
.dn-fine { display: block; margin-top: 1.4cqw; color: var(--dn-muted); font-size: max(11px, 1.1cqw); }
.dn-book { background: var(--dn-ink); color: #fff; border-color: var(--dn-ink); }
.dn-book h4 { color: #fff; }
.dn-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 1.4cqw; }
.dn-days span { display: grid; justify-items: center; padding: 8px 0; border-radius: 14px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: max(14px, 1.7cqw); }
.dn-days small { font-weight: 600; font-size: 11px; opacity: .7; }
.dn-days .on, .dn-times .on { background: #9be3c3; color: var(--dn-ink); }
.dn-times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.8cqw; }
.dn-times span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); font-weight: 600; font-size: max(11px, 1.2cqw); }
.dn-times .on { border-color: transparent; }
.dn-wide { display: block; text-align: center; background: #9be3c3; color: var(--dn-ink); box-shadow: none; }
.dn-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 2.2cqw 4cqw; background: var(--dn-mint); color: var(--dn-muted); font-size: max(11px, 1.15cqw); }
.dn-foot b { color: var(--dn-ink); }

/* --- Before (restaurant): black, gold and Flash-era --- */

/* --- After (restaurant): dark, cinematic, editorial --- */
.rs { --rs-ink: #1f1a16; --rs-dark: #15100c; --rs-cream: #f5efe6; --rs-gold: #d9b46b; --rs-red: #c4512f; --rs-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; background: var(--rs-cream); color: var(--rs-ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: max(12px, 1.35cqw); line-height: 1.55; }
.rs-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 50cqw; color: var(--rs-cream); background: var(--rs-dark); }
.rs-media { position: absolute; inset: 0; z-index: -2; }
.rs-media img, .rs-media video { object-position: 72% 50%; }
.rs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 9, 6, .78) 0%, rgba(14, 9, 6, .25) 32%, rgba(14, 9, 6, .45) 62%, rgba(14, 9, 6, .92) 100%), radial-gradient(ellipse at 50% 55%, rgba(14, 9, 6, .55), transparent 60%); }
.rs-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 2.2cqw 4cqw; }
.rs-links { display: flex; gap: 2.4cqw; text-transform: uppercase; letter-spacing: .18em; font-size: max(9px, 1cqw); color: rgba(245, 239, 230, .85); }
.rs-logo { display: grid; justify-items: center; text-align: center; line-height: 1.05; }
.rs-logo b { font-family: var(--rs-serif); font-weight: 400; font-size: max(16px, 2.3cqw); letter-spacing: .01em; }
.rs-logo small { margin-top: 4px; text-transform: uppercase; letter-spacing: .32em; font-size: max(7px, .8cqw); color: var(--rs-gold); }
.rs-navbtn { justify-self: end; border: 1px solid var(--rs-gold); color: var(--rs-gold); text-transform: uppercase; letter-spacing: .16em; font-size: max(9px, 1cqw); padding: .8cqw 1.8cqw; white-space: nowrap; }
.rs-copy { align-self: center; text-align: center; padding: 4cqw 8cqw 10cqw; }
.rs-kicker { display: inline-block; text-transform: uppercase; letter-spacing: .3em; font-size: max(9px, 1cqw); color: var(--rs-gold); }
.rs-hero h3 { font-family: var(--rs-serif); font-weight: 400; font-style: italic; font-size: max(30px, 6.2cqw); line-height: 1; margin: 1.6cqw auto 1.8cqw; max-width: 14ch; color: #fff; }
.rs-hero p { max-width: 44ch; margin: 0 auto 2.6cqw; color: rgba(245, 239, 230, .86); font-size: max(13px, 1.5cqw); }
.rs-ctas { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.4cqw 2.8cqw; }
.rs-btn { display: inline-block; background: var(--rs-red); color: #fff; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: max(10px, 1.05cqw); padding: 1.2cqw 2.6cqw; white-space: nowrap; }
.rs-textlink { color: var(--rs-cream); border-bottom: 1px solid var(--rs-gold); padding-bottom: 2px; font-size: max(12px, 1.3cqw); }
.rs-bookbar { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; width: 84%; margin: -5cqw auto 0; background: #fff; box-shadow: 0 30px 60px -30px rgba(21, 16, 12, .6); }
.rs-bookbar > span:not(.rs-btn) { display: grid; padding: 1.4cqw 2cqw; border-right: 1px solid #eee3d4; }
.rs-bookbar small { text-transform: uppercase; letter-spacing: .2em; font-size: max(8px, .85cqw); color: #9a8b78; }
.rs-bookbar b { font-family: var(--rs-serif); font-weight: 400; font-size: max(14px, 1.8cqw); }
.rs-bookbar .rs-btn { display: grid; place-items: center; }
.rs-menu { padding: 6cqw 7cqw 5cqw; }
.rs-menu-head { text-align: center; margin-bottom: 3.6cqw; }
.rs-menu-head .rs-kicker { color: var(--rs-red); }
.rs h4 { font-family: var(--rs-serif); font-weight: 400; font-size: max(22px, 3.6cqw); margin: .6cqw 0 0; color: var(--rs-ink); }
.rs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw 6cqw; }
.rs h5 { text-transform: uppercase; letter-spacing: .26em; font-size: max(10px, 1.05cqw); color: var(--rs-red); margin: 0 0 1.6cqw; padding-bottom: 1cqw; border-bottom: 1px solid #e2d6c4; }
.rs-item { display: flex; align-items: baseline; gap: 10px; margin-top: 1.4cqw; }
.rs-item b { font-family: var(--rs-serif); font-weight: 400; font-size: max(14px, 1.7cqw); }
.rs-item i { flex: 1; border-bottom: 1px dotted #b9a88f; transform: translateY(-4px); }
.rs-item span { font-family: var(--rs-serif); font-size: max(13px, 1.55cqw); }
.rs-menu small { display: block; color: #85766a; font-style: italic; font-size: max(11px, 1.15cqw); }
.rs-quote { background: var(--rs-dark); color: var(--rs-cream); text-align: center; padding: 6cqw 9cqw; }
.rs-quote p { font-family: var(--rs-serif); font-style: italic; font-size: max(18px, 2.8cqw); line-height: 1.3; margin: 0 auto 1.8cqw; max-width: 30ch; }
.rs-info { display: grid; grid-template-columns: repeat(3, 1fr); background: #efe5d6; }
.rs-info > div { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 3.4cqw 2cqw; border-right: 1px solid #e2d6c4; }
.rs-info b { text-transform: uppercase; letter-spacing: .2em; font-size: max(10px, 1cqw); }
.rs-info small { font-family: var(--rs-serif); font-size: max(13px, 1.5cqw); color: #5d5045; }
.rs-ic svg { width: max(22px, 2.6cqw); height: max(22px, 2.6cqw); fill: none; stroke: var(--rs-red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rs-foot { display: flex; justify-content: space-between; align-items: center; padding: 2.6cqw 5cqw; background: #0e0a07; color: rgba(245, 239, 230, .6); font-size: max(11px, 1.1cqw); }
.rs-foot b { font-family: var(--rs-serif); font-weight: 400; font-size: max(15px, 1.8cqw); color: var(--rs-cream); }
@container (max-width: 600px) {
  .dn-links { display: none; }
  .dn-nav .dn-btn { margin-left: auto; }
  .dn-hero { grid-template-columns: 1fr; padding-top: 2cqw; }
  .dn-photo { order: -1; }
  .dn-photo-in { aspect-ratio: 4 / 3.4; border-radius: 28px; }
  .dn-slot { left: 3cqw; bottom: -4cqw; }
  .dn-copy { padding-top: 5cqw; }
  .dn-list, .dn-split { grid-template-columns: 1fr; }
  .dn-head { display: block; }
  .rs-links { display: none; }
  .rs-nav { grid-template-columns: 1fr auto; }
  .rs-logo { justify-items: start; text-align: left; }
  .rs-copy { padding: 10cqw 6cqw 16cqw; }
  .rs-bookbar { grid-template-columns: 1fr 1fr 1fr; width: 92%; }
  .rs-bookbar .rs-btn { grid-column: 1 / -1; text-align: center; }
  .rs-cols, .rs-info { grid-template-columns: 1fr; }
  .rs-foot { flex-direction: column; gap: 2cqw; text-align: center; }
}
.dn h3, .dn h4 { font-family: inherit; }
@media (prefers-reduced-motion: reduce) { .ba.is-switching .ba-stack:not([hidden]) { animation: none; } .ba { transition: none; } }

/* --- Client journey: five steps above the free audit --- */
.jr-tabs { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 56px; --jr-p: 0%; }
.jr-tabs::before, .jr-tabs::after { content: ""; position: absolute; top: 23px; left: 10%; height: 3px; border-radius: 3px; }
.jr-tabs::before { right: 10%; background: var(--line); }
.jr-tabs::after { width: calc(80% * var(--jr-p) / 100%); background: var(--grad-orange); transition: width .45s ease; }
.jr-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 4px 6px; border: 0; background: none; cursor: pointer; color: var(--ink-500); font: 700 15px/1.25 var(--font-head); text-align: center; }
.jr-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); font: 800 17px/1 var(--font-head); color: var(--ink-500); transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.jr-lbl { display: inline-flex; align-items: center; gap: 7px; }
.jr-lbl svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jr-tab:hover { color: var(--ink); }
.jr-tab:hover .jr-num { border-color: var(--orange-400); }
.jr-tab.is-done .jr-num { background: var(--mint-500); border-color: var(--mint-500); color: #fff; }
.jr-tab[aria-selected="true"] { color: var(--ink); }
.jr-tab[aria-selected="true"] .jr-num { background: var(--grad-orange); border-color: transparent; color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px var(--orange-50), 0 12px 24px -10px rgba(255, 90, 31, .8); }
.jr-tab[aria-selected="true"] .jr-lbl svg { stroke: var(--orange-400); }
.jr-tab:focus-visible { outline: none; } .jr-tab:focus-visible .jr-num { outline: 3px solid var(--teal-400); outline-offset: 3px; }
.jr-panel[hidden] { display: none; }
.jr-panel:not([hidden]) { animation: jrIn .45s ease; }
@keyframes jrIn { from { opacity: 0; transform: translateY(12px); } }
.jr-next { display: block; margin: 18px 0 0; padding: 0; border: 0; background: none; cursor: pointer; font: 700 15px/1.4 var(--font-head); color: var(--purple-600); }
.jr-next:hover { color: var(--orange-500); }
.jr-c2::before { background: var(--purple-400); } .jr-c3::before { background: var(--amber-500); } .jr-c4::before { background: var(--teal-400); } .jr-c5::before { background: var(--mint-500); }
.jr-title { display: block; padding-right: 120px; margin-top: 4px; font: 800 21px/1.2 var(--font-head); color: var(--ink); }
.jr-sub { display: block; margin: 3px 0 18px; font-size: 13px; color: var(--ink-500); }
.jr-goals, .jr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.jr-goals > div, .jr-kpis > div { padding: 12px 12px 10px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.jr-goals small, .jr-kpis small { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-500); margin-bottom: 6px; }
.jr-goals b { font: 800 24px/1 var(--font-head); color: var(--mint-700); white-space: nowrap; }
.jr-goals s { font-size: 15px; font-weight: 700; color: var(--ink-400); text-decoration: none; }
.jr-goals i { font-style: normal; font-size: 14px; color: var(--ink-400); margin: 0 4px; }
.jr-timeline { list-style: none; margin: 0; padding: 0; }
.jr-timeline li { display: grid; grid-template-columns: 82px 1fr; column-gap: 14px; padding: 11px 0; border-top: 1px dashed var(--line); }
.jr-timeline li:first-child { border-top: 0; padding-top: 2px; }
.jr-timeline em { grid-row: span 2; align-self: start; font-style: normal; text-align: center; font: 700 12px/1 var(--font-head); color: #fff; background: var(--purple-500); border-radius: 999px; padding: 6px 8px; }
.jr-timeline b { font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.jr-timeline span { font-size: 13px; color: var(--ink-500); }
.jr-plans { display: grid; gap: 10px; margin-bottom: 16px; }
.jr-plans > div { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 12px; padding: 13px 14px; border: 2px solid var(--line); border-radius: 14px; }
.jr-plans > div.on { border-color: var(--orange-400); background: var(--orange-50); }
.jr-plans b { display: block; font: 700 15px/1.25 var(--font-head); color: var(--ink); }
.jr-plans small { display: block; font-size: 12px; color: var(--ink-500); }
.jr-plans em { grid-column: 3; font-style: normal; font: 700 11px/1 var(--font-head); color: #fff; background: var(--grad-orange); border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.jr-plans strong { grid-column: 4; font: 800 19px/1 var(--font-head); color: var(--ink); white-space: nowrap; text-align: right; }
.jr-plans strong small { display: inline; font-size: 12px; font-weight: 600; margin-left: 2px; }
.jr-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-200); background: var(--surface); }
.on .jr-radio { border: 6px solid var(--orange-400); }
.jr-plans > .jr-addon { border-style: dashed; }
.jr-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint-500); }
.jr-tick svg, .jr-st svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jr-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #15123a; color: rgba(255, 255, 255, .7); font-size: 12px; }
.jr-summary b { display: block; font: 700 16px/1.3 var(--font-head); color: #fff; }
.jr-cta { background: var(--grad-orange); color: #fff; font: 700 14px/1 var(--font-head); padding: 11px 16px; border-radius: 999px; white-space: nowrap; }
.jr-tasks { list-style: none; margin: 0; padding: 0; }
.jr-tasks li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.jr-tasks li:first-child { border-top: 0; }
.jr-tasks b { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.jr-tasks em { font-style: normal; font-size: 12px; font-weight: 700; }
.jr-st { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.done .jr-st { background: var(--mint-500); } .done em { color: var(--mint-700); }
.doing .jr-st { border: 3px solid var(--teal-400); border-right-color: transparent; animation: jrSpin 1.4s linear infinite; } .doing em { color: var(--teal-700); }
.next .jr-st { border: 2px dashed var(--ink-200); } .next em { color: var(--ink-500); } .next b { color: var(--ink-500); }
@keyframes jrSpin { to { transform: rotate(360deg); } }
.jr-tasks i { grid-column: 2 / -1; position: relative; height: 6px; border-radius: 6px; background: var(--ink-200); overflow: hidden; }
.jr-tasks i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--teal-400); }
.jr-dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.jr-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grad-hero); color: #fff; font: 800 14px/1 var(--font-head); flex: none; }
.jr-dash-head b { display: block; font: 800 17px/1.2 var(--font-head); color: var(--ink); }
.jr-dash-head small { display: block; font-size: 13px; color: var(--ink-500); }
.ap-tag.jr-live { position: static; margin-left: auto; background: var(--mint-50); color: var(--mint-700); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ap-tag.jr-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-500); }
.jr-kpis b { font: 800 26px/1 var(--font-head); color: var(--ink); }
.jr-kpis em { font-style: normal; display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--mint-700); background: var(--mint-50); vertical-align: middle; }
.jr-chart { padding: 12px 14px 8px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; }
.jr-chart small { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.jr-chart svg { display: block; width: 100%; height: 86px; margin-top: 6px; }
.jr-months { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-400); margin-top: 4px; }
.jr-reports > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.jr-reports > div:first-child { border-top: 0; }
.jr-doc { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 6px; background: var(--pink-50); color: var(--pink-600); font: 800 10px/1 var(--font-head); }
.jr-reports b { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.jr-reports em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--mint-500); border-radius: 999px; padding: 3px 9px; }
@media (max-width: 760px) {
  .jr-tabs { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 40px; padding: 0 16px 4px; }
  .jr-tabs::-webkit-scrollbar { display: none; }
  .jr-tabs::before { left: 70px; right: 70px; }
  .jr-tabs::after { left: 70px; width: calc((100% - 140px) * var(--jr-p) / 100%); }
  .jr-tab { scroll-snap-align: center; font-size: 13px; }
  .jr-lbl svg { display: none; }
}
@media (max-width: 560px) {
  .jr-title { padding-right: 0; margin-top: 26px; }
  .jr-goals, .jr-kpis { gap: 6px; }
  .jr-goals > div, .jr-kpis > div { padding: 10px 8px; }
  .jr-goals b { font-size: 19px; } .jr-kpis b { font-size: 21px; }
  .jr-kpis em { display: block; width: max-content; margin: 6px 0 0; }
  .jr-plans > div { grid-template-columns: 22px 1fr auto; }
  .jr-plans em { grid-column: 2; grid-row: 2; justify-self: start; }
  .jr-plans strong { grid-column: 3; grid-row: 1; }
  .jr-timeline li { grid-template-columns: 70px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .jr-panel:not([hidden]) { animation: none; } .doing .jr-st { animation: none; } .jr-tabs::after { transition: none; } }

/* --- Service flip cards --- */
.service-card.flip { padding: 0; background: none; border: 0; perspective: 1400px; transition: none; }
.service-card.flip:hover { transform: none; box-shadow: none; }
.flip-inner { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .75, .2, 1); }
.flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; border-radius: var(--radius); padding: 36px 32px 32px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-front { background: var(--surface); border: 1px solid var(--line); transition: box-shadow .25s ease; }
.flip-front p { flex: 1; }
.flip-back { position: relative; overflow: hidden; transform: rotateY(180deg); color: #fff; box-shadow: var(--shadow); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 16px/1.3 var(--font-head); color: var(--purple-700); }
.flip-toggle svg, .flip-back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s ease; }
.flip-toggle:hover svg { transform: rotate(180deg); }
.flip-label { font: 800 12px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.flip-back h4 { margin: 14px 0 12px; font: 800 24px/1.2 var(--font-head); letter-spacing: -.01em; color: #fff; max-width: 15ch; }
.flip-back p { position: relative; z-index: 1; flex: 1; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .93); }
.flip-cta { position: relative; z-index: 1; font: 700 16px/1.3 var(--font-head); color: #fff !important; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .5); padding-bottom: 2px; }
.flip-cta span { display: inline-block; transition: transform .2s; } .flip-cta:hover span { transform: translateX(4px); }
.flip-back-btn { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.flip-deco { position: absolute; right: -26px; bottom: -26px; width: 160px; height: 160px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .14; pointer-events: none; }
.flip-toggle:focus-visible, .flip-back-btn:focus-visible, .flip-cta:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; border-radius: 6px; }
.bk-teal { background: linear-gradient(150deg, #1aa3b8, #136fb0); }
.bk-orange { background: linear-gradient(150deg, #e2530f, #a8350a); }
.bk-purple { background: linear-gradient(150deg, #6a3df0, #2f1690); }
.bk-blue { background: linear-gradient(150deg, #2f6df0, #1a43c2); }
.bk-green { background: linear-gradient(150deg, #13a074, #0a6f51); }
.bk-pink { background: linear-gradient(150deg, #e63e62, #ac1f45); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-inner { transform: rotateY(180deg); }
  .flip-back-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-inner, .flip:hover .flip-inner, .flip.is-flipped .flip-inner { transform: none; transition: none; }
  .flip-face { transition: opacity .3s ease; }
  .flip-back { transform: none; opacity: 0; pointer-events: none; }
  .flip.is-flipped .flip-back { opacity: 1; pointer-events: auto; }
  .flip.is-flipped .flip-front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .flip:hover .flip-back { opacity: 1; pointer-events: auto; }
  .flip:hover .flip-front { opacity: 0; }
}
[data-theme="dark"] .flip-toggle { color: var(--purple-300); }

/* --- Add-on services --- */
.addon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.addon { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.addon:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.addon h3 { font-size: 19px; margin: 18px 0 8px; }
.addon p { flex: 1; margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.addon-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; }
.addon-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad-purple { background: linear-gradient(135deg, #8a63ff, #5a2fe0); box-shadow: 0 12px 22px -12px #5a2fe0; }
.ad-orange { background: var(--grad-orange); box-shadow: 0 12px 22px -12px #ff5a1f; }
.ad-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 12px 22px -12px #2563eb; }
.ad-teal { background: linear-gradient(135deg, #22b8c9, #1b8fd0); box-shadow: 0 12px 22px -12px #22b8c9; }
.ad-pink { background: linear-gradient(135deg, #ff7a9a, #ff4d6d); box-shadow: 0 12px 22px -12px #ff4d6d; }
.ad-green { background: linear-gradient(135deg, #5fd3a0, #20b386); box-shadow: 0 12px 22px -12px #20b386; }
.ad-indigo { background: var(--grad-hero); box-shadow: 0 12px 22px -12px #3b1fa8; }
.ad-amber { background: linear-gradient(135deg, #ffc23d, #f28c00); box-shadow: 0 12px 22px -12px #f28c00; }
.addon-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.addon-chips span { font-size: 12px; font-weight: 600; color: var(--ink-600); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.addon-strip { display: flex; align-items: center; gap: 20px; margin-top: 34px; padding: 22px 26px; border-radius: var(--radius); background: var(--grad-hero); color: rgba(255, 255, 255, .88); box-shadow: 0 24px 50px -24px rgba(42, 15, 107, .7); }
.addon-strip p { flex: 1; margin: 0; font-size: 16px; line-height: 1.55; }
.addon-strip strong { color: #fff; }
.addon-strip .btn { flex: none; }
.addon-strip-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.addon-strip-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--orange-400); stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 1100px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .addon-grid { grid-template-columns: 1fr; }
  .addon-strip { flex-direction: column; align-items: flex-start; }
}
.addon-group { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; font: 800 13px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.addon-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.addon-grid + .addon-group { margin-top: 44px; }

/* add-on cards as flip cards */
.addon.flip { padding: 0; background: none; border: 0; }
.addon.flip:hover { transform: none; box-shadow: none; }
.addon.flip .flip-face { padding: 28px 24px 24px; }
.addon.flip .flip-front h3 { font-size: 19px; margin: 18px 0 8px; }
.addon.flip .flip-front p { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.addon.flip .flip-toggle { font-size: 15px; margin-top: 0; }
.addon.flip .flip-back h4 { font-size: 20px; margin: 0 0 8px; max-width: none; }
.addon.flip .flip-back p { font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.addon.flip .flip-cta { font-size: 15px; }
.addon.flip .flip-deco { width: 120px; height: 120px; right: -20px; bottom: -20px; }
.addon.flip .flip-back-btn { top: 14px; right: 14px; width: 34px; height: 34px; }
.flip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; position: relative; z-index: 1; }
.flip-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 4px 10px; }
.flip-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .85; }
.bk-indigo { background: linear-gradient(150deg, #3b1fa8, #24096b 55%, #2563eb); }
.bk-amber { background: linear-gradient(150deg, #c97a00, #8f4f00); }
.addon.flip .flip-chips { gap: 5px; margin: 10px 0 12px; }
.addon.flip .flip-chips span { font-size: 11.5px; padding: 3px 9px; }
.addon.flip .flip-back h4 { font-size: 18px; }
.addon.flip .flip-back p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.addon.flip .flip-face { padding: 26px 22px 22px; }
.addon.flip .flip-back p { color: rgba(255, 255, 255, .93); }

/* tool icons inside the metrics band (same band height) */
.band-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.band-tools { display: flex; gap: 4px; }
.bt { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); cursor: default; outline: none; transition: transform .15s ease; }
.bt svg { width: 13px; height: 13px; fill: none; stroke: #3b1fa8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bt img { width: 16px; height: 16px; object-fit: contain; }
.bt:hover, .bt:focus-visible { transform: translateY(-2px); z-index: 5; }
.bt:focus-visible { box-shadow: 0 0 0 3px var(--teal-400); }
.bt::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 220px; padding: 8px 11px; border-radius: 10px; background: #fff; color: #15123a; font: 600 12.5px/1.4 var(--font-body); text-align: left; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
.bt::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s; }
.bt:hover::after, .bt:focus-visible::after, .bt:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bt:hover::before, .bt:focus-visible::before, .bt:focus::before { opacity: 1; visibility: visible; }
.band-tools .bt:first-child::after { left: 0; transform: translate(0, 4px); }
.band-tools .bt:first-child:hover::after, .band-tools .bt:first-child:focus::after { transform: translate(0, 0); }
.band-tools .bt:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.band-tools .bt:last-child:hover::after, .band-tools .bt:last-child:focus::after { transform: translate(0, 0); }
.band-row { flex-wrap: wrap; row-gap: 6px; }
.band { overflow-x: clip; }
.band-item:last-child .bt::after, .band-item:last-child .bt:first-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.band-item:last-child .bt:hover::after, .band-item:last-child .bt:focus::after { transform: translate(0, 0); }
@media (max-width: 1199px) and (min-width: 901px) {
  .bt { width: 18px; height: 18px; border-radius: 6px; }
  .bt svg { width: 11px; height: 11px; }
  .bt img { width: 13px; height: 13px; }
  .band-tools { gap: 3px; }
  .band-row { gap: 7px; }
}
@media (max-width: 1099px) and (min-width: 901px) {
  .band-tools .bt:nth-child(n+4) { display: none; }
}
@media (max-width: 999px) and (min-width: 901px) {
  .band-tools .bt:nth-child(n+3) { display: none; }
}
.bt.has-logo { background: transparent; overflow: visible; }
.bt.has-logo .bt-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

/* metrics band: title / big icons / text */
.band-item { gap: 0; }
.band-row { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.band-tools { gap: 8px; flex-wrap: wrap; }
.band-tools .bt:nth-child(n) { display: grid; }
.bt { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); }
.bt svg { width: 20px; height: 20px; }
.bt img { width: 24px; height: 24px; }
.bt.has-logo .bt-logo { border-radius: 11px; }
.bt:hover, .bt:focus-visible { transform: translateY(-3px) scale(1.06); }
@media (max-width: 1199px) and (min-width: 901px) {
  .bt { width: 32px; height: 32px; border-radius: 9px; }
  .bt.has-logo .bt-logo { border-radius: 9px; }
  .band-tools { gap: 6px; }
}

/* =========================================================
   Mobile polish (phones). Desktop is unaffected.
   ========================================================= */
@media (max-width: 1100px) {
  /* menu: dim the page behind the open menu and stop it scrolling */
  .main-nav.is-open { box-shadow: 0 0 0 100vmax rgba(10, 6, 30, .55), -20px 0 50px -20px rgba(0, 0, 0, .4); }
  body.nav-open { overflow: hidden; }
}
.swipe-dots { display: none; }
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: clamp(27px, 7.4vw, 34px); }

  /* swipe rows: services, add-ons and packages scroll sideways instead of one very long column */
  .service-grid, .addon-grid, .package-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -18px; padding: 6px 18px 8px; scroll-padding: 0 18px; scrollbar-width: none;
  }
  .service-grid::-webkit-scrollbar, .addon-grid::-webkit-scrollbar, .package-grid::-webkit-scrollbar { display: none; }
  .service-grid > *, .addon-grid > *, .package-grid > * { scroll-snap-align: start; }
  .package-grid { padding-top: 20px; align-items: stretch; }
  .swipe-dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 0; }
  .swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .25s ease, background .25s ease; }
  .swipe-dots button.is-on { width: 22px; background: var(--orange-400); }
  .swipe-dots button:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }

  /* flip cards: tighter on phones */
  .service-card.flip .flip-face { padding: 26px 22px 22px; }
  .service-card.flip .flip-front h3 { font-size: 20px; }
  .flip-back h4 { font-size: 21px; margin: 12px 0 10px; }
  .flip-back p { font-size: 15px; }
  .service-icon { width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px; }
  .addon-grid + .addon-group { margin-top: 34px; }
  .addon-strip { padding: 20px; gap: 14px; }
  .addon-strip .btn { width: 100%; text-align: center; }

  /* client journey */
  .jr-tabs { padding-top: 10px; margin-bottom: 30px; }
  .jr-panel .ap-copy h2 { font-size: clamp(26px, 7.2vw, 32px); }
  .jr-next { margin-top: 14px; }
  .ap-art { margin-top: 6px; }

  /* before / after */
  .ba-arrow { display: none; }
  .ba-tablist { width: 100%; justify-content: space-between; }
  .ba-tab { flex: 1 1 auto; justify-content: center; padding: 10px 8px; font-size: 13px; }
  .ba-tab svg { display: none; }
  .ba-tabs { width: 100%; }
  .ba-toolbar { margin-bottom: 14px; }
  .ba { border-radius: 16px; }
  .ba-chrome { height: 38px; padding: 0 10px; gap: 8px; }
  .ba-dots i { width: 8px; height: 8px; }
  .ba-url { font-size: 12px; padding: 4px 10px; }
  .ba-tag { font-size: 10.5px; padding: 5px 9px; bottom: 10px; }
  .ba-tag-before { left: 10px; } .ba-tag-after { right: 10px; }
  .ba-note { font-size: 12.5px; }

  /* metrics band */
  .band { padding: 44px 0; }
  .band-inner { gap: 22px; }

  /* packages */
  .package { padding: 30px 22px; }
  .package-price strong { font-size: 40px; }

  /* footer */
  .site-footer { padding: 56px 0 26px; }
  .footer-grid { gap: 28px; padding-bottom: 34px; }
  .footer-bottom { padding-top: 22px; flex-direction: column; gap: 10px; }

  /* chat button a little smaller so it covers less content */
  .sr-fab { width: 54px; height: 54px; }
}
@media (max-width: 380px) {
  .ba-tab { font-size: 12px; padding: 9px 6px; }
  .service-grid, .addon-grid, .package-grid { grid-auto-columns: 88%; }
}
@media (max-width: 640px) {
  .swipe-dots + .addon-group { margin-top: 34px; }
  .package-grid { padding-top: 22px; }
}
.swipe-dots + .addon-group { margin-top: 44px; }
@media (max-width: 640px) { .swipe-dots + .addon-group { margin-top: 34px; } }

/* client journey: step navigation at the bottom of each step (single-column layouts) */
.jr-pn { display: none; }
@media (max-width: 1000px) {
  .jr-pn { display: grid; gap: 12px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
  .jr-pn-step { font: 800 12px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); text-align: center; }
  .jr-pn-btns { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
  .jr-pn-prev, .jr-pn-next { border: 0; cursor: pointer; border-radius: 999px; font: 700 15px/1.2 var(--font-head); padding: 15px 18px; }
  .jr-pn-prev { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
  .jr-pn-next { background: var(--grad-orange); color: #fff; box-shadow: 0 12px 24px -12px rgba(255, 90, 31, .8); }
  .jr-pn-btns > span:empty + .jr-pn-next { grid-column: 1 / -1; }
  .jr-pn-prev:focus-visible, .jr-pn-next:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
  /* the in-text link duplicates the new bar on phones */
  .jr-panel .jr-next { display: none; }
}

/* client journey tabs on phones: all five steps visible, no sideways scrolling */
@media (max-width: 760px) {
  .jr-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0 0 30px; padding: 10px 0 0; gap: 4px; }
  .jr-tabs::before { top: 28px; left: 10%; right: 10%; }
  .jr-tabs::after { top: 28px; left: 10%; width: calc(80% * var(--jr-p) / 100%); }
  .jr-tab { gap: 8px; padding: 0 2px 4px; font-size: 12px; line-height: 1.2; }
  .jr-num { width: 38px; height: 38px; font-size: 15px; }
  .jr-tab[aria-selected="true"] .jr-num { box-shadow: 0 0 0 4px var(--orange-50), 0 10px 20px -10px rgba(255, 90, 31, .8); }
  .jr-lbl { display: block; max-width: 9ch; }
  .jr-lbl svg { display: none; }
}
@media (max-width: 360px) {
  .jr-tab { font-size: 11px; }
  .jr-num { width: 34px; height: 34px; font-size: 14px; }
  .jr-tabs::before, .jr-tabs::after { top: 26px; }
}

/* ===== Add-on card backs: live examples ===== */
.addon.flip .flip-back .flip-label { padding-right: 40px; }
.ax { position: relative; z-index: 1; width: 100%; height: 156px; margin: 12px 0 14px; overflow: hidden; border-radius: 12px; background: #fff; color: #101828; font: 500 11px/1.35 var(--font-body, system-ui, sans-serif); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .25); text-align: left; letter-spacing: 0; }
.ax * { box-sizing: border-box; }
.ax b { font-weight: 700; }
.ax svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ax img, .ax video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ax-av { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #0b1d33, #1f4b7a); color: #ffc21a; font: 800 8px/1 var(--font-head); font-style: normal; }
.ax-av-g { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.addon.flip .flip-back .ax p { margin: 0; flex: none; font-size: 11px; line-height: 1.4; color: inherit; }
.addon.flip .ax-chips { margin: 0 0 12px; }
.addon.flip .ax-chips span { font-size: 11px; padding: 2px 8px; }
.addon.flip .flip-back h4 { margin-bottom: 6px; }
.addon.flip .flip-back > p { margin-bottom: 10px; }

/* 1 Instagram post */
.ax-ig { display: flex; flex-direction: column; }
.ax-ig-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.ax-ig-top b { font-size: 10.5px; }
.ax-ig-top small { margin-left: auto; color: #667085; font-size: 9.5px; }
.ax-ig-img { position: relative; flex: 1; min-height: 0; }
.ax-ig-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 29, 51, .88) 0%, rgba(11, 29, 51, .35) 60%, transparent); }
.ax-ig-cap { position: absolute; left: 10px; top: 50%; z-index: 1; transform: translateY(-50%); color: #fff; font: 800 13px/1.15 var(--font-head); max-width: 60%; }
.ax-ig-cap small { display: block; margin-bottom: 3px; color: #ffc21a; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }
.ax-ig-cap b { color: #ffc21a; }
.ax-ig-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.ax-ig-bar svg:first-child { fill: #ef4444; stroke: #ef4444; }
.ax-ig-bar span { margin-left: auto; font-weight: 700; font-size: 10px; }

/* 2 Reel */
.ax-reel { display: flex; gap: 12px; padding: 10px; background: #0f0f14; color: #fff; }
.ax-reel-ph { position: relative; flex: none; width: 76px; height: 100%; overflow: hidden; border-radius: 10px; background: #222; box-shadow: 0 0 0 2px #2a2a33; }
.ax-reel-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .75)); }
.ax-reel-cap { position: absolute; left: 6px; right: 6px; bottom: 10px; z-index: 1; font: 700 9px/1.2 var(--font-head); }
.ax-reel-bar { position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ax-reel-bar i { display: block; width: 45%; height: 100%; background: #fff; animation: axbar 5s linear infinite; }
@keyframes axbar { from { width: 0; } to { width: 100%; } }
.ax-reel-st { display: grid; flex: 1; align-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ax-reel-st li { display: flex; align-items: baseline; gap: 5px; color: #a1a1aa; font-size: 10px; }
.ax-reel-st b { color: #fff; font: 800 15px/1 var(--font-head); }
.ax-reel-st li.up b { color: #34d399; }

/* 3 Presenter */
.ax-pres { background: #111; }
.ax-pres::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7)); }
.ax-pres-lang { position: absolute; top: 7px; right: 7px; z-index: 1; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 9px; font-weight: 700; }
.ax-pres-lang b, .ax-pres-lang i { padding: 2px 6px; border-radius: 999px; font-style: normal; }
.ax-pres-lang b { background: #fff; color: #111; }
.ax-pres-sub { position: absolute; left: 10px; right: 10px; bottom: 26px; z-index: 1; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; text-align: center; }
.ax-pres-ctl { position: absolute; left: 10px; right: 10px; bottom: 7px; z-index: 1; display: flex; align-items: center; gap: 6px; color: #fff; }
.ax-pres-ctl svg { width: 11px; height: 11px; fill: #fff; }
.ax-pres-ctl small { font-size: 9px; opacity: .85; }
.ax-pres-tl { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.ax-pres-tl i { display: block; width: 27%; height: 100%; border-radius: 3px; background: #ef4444; }

/* 4 Product photo */
.ax-photo { display: flex; align-items: center; background: #f4efe8; }
.ax-photo figure { position: relative; flex: 1; height: 100%; margin: 0; }
.ax-photo figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 9px; font-weight: 700; }
.ax-photo .is-after figcaption { left: auto; right: 6px; background: #fff; color: #101828; }
.ax-photo-go { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #0f766e; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.ax-photo .is-after { filter: saturate(1.05); }

/* 5 A/B ads */
.ax-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; background: #f2f4f7; }
.ax-ab-ad { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e4e7ec; }
.ax-ab-ad.is-win { box-shadow: 0 0 0 2px #10b981; }
.ax-ab-img { display: block; height: 66px; overflow: hidden; border-radius: 5px; }
.ax-ab-img.is-b img { object-position: 70% 30%; transform: scale(1.35); filter: saturate(1.25) brightness(1.05); }
.ax-ab-ad > b { font-size: 10px; line-height: 1.2; min-height: 24px; }
.ax-ab-res { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 10px; }
.ax-ab-res i { flex: 1; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #98a2b3 var(--w), #eaecf0 var(--w)); }
.is-win .ax-ab-res { color: #059669; }
.is-win .ax-ab-res i { background: linear-gradient(90deg, #10b981 var(--w), #eaecf0 var(--w)); }
.ax-ab-ad em { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font: 800 9px/1 var(--font-head); font-style: normal; }
.ax-ab-win { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: 999px; background: #10b981; color: #fff; font-size: 8.5px; font-weight: 800; }

/* 6 Search result */
.ax-serp { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; }
.ax-serp-q { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); color: #344054; font-size: 10.5px; }
.ax-serp-q svg { width: 12px; height: 12px; color: #667085; }
.ax-serp-r small { display: flex; align-items: center; gap: 5px; color: #344054; font-size: 9.5px; }
.ax-serp-r small i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #0b1d33; color: #ffc21a; font: 800 7px/1 var(--font-head); font-style: normal; }
.ax-serp-r > b { display: block; margin: 3px 0 2px; color: #1a0dab; font-size: 12px; font-weight: 600; line-height: 1.25; }
.addon.flip .flip-back .ax-serp-r p { color: #475467; font-size: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-serp-ft { display: flex; align-items: center; gap: 8px; margin-top: auto; color: #059669; font-size: 10px; font-weight: 700; }
.ax-pill { padding: 2px 7px; border-radius: 999px; background: #ecfdf3; color: #067647; font-weight: 800; }

/* 7 Chat */
.ax-chat { display: flex; flex-direction: column; background: #f7f7fb; }
.ax-chat-hd { display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: #fff; border-bottom: 1px solid #eaecf0; }
.ax-chat-hd .ax-av { background: linear-gradient(135deg, #7c2d12, #c2410c); color: #fff; }
.ax-chat-hd small { margin-left: auto; color: #12b76a; font-size: 9.5px; font-weight: 700; }
.ax-chat-hd small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #12b76a; }
.ax-chat-b { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; }
.addon.flip .flip-back .ax-chat-b p { max-width: 80%; padding: 5px 8px; border-radius: 10px 10px 10px 3px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-size: 10.5px; }
.addon.flip .flip-back .ax-chat-b p.me { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: #4f46e5; color: #fff; }
.ax-chat-b .dots { display: flex; gap: 3px; }
.ax-chat-b .dots i { width: 5px; height: 5px; border-radius: 50%; background: #98a2b3; animation: axdot 1.2s infinite ease-in-out; }
.ax-chat-b .dots i:nth-child(2) { animation-delay: .15s; }
.ax-chat-b .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes axdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* 8 Review */
.ax-rev { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; }
.ax-rev-hd { display: flex; align-items: center; gap: 7px; }
.ax-rev-hd .ax-av { width: 24px; height: 24px; font-size: 9px; }
.ax-rev-hd > span { display: grid; gap: 1px; font-size: 10.5px; }
.ax-stars { color: #f5a400; font-size: 10px; letter-spacing: 1px; }
.ax-rev-hd small { margin-left: auto; color: #667085; font-size: 9.5px; }
.addon.flip .flip-back .ax-rev > p { font-size: 10.5px; color: #344054; }
.ax-rev-reply { padding: 6px 8px; border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; background: #fffaeb; color: #475467; font-size: 10px; }
.ax-rev-reply b { display: block; margin-bottom: 1px; color: #101828; font-size: 9.5px; }

/* 9 Booking + 10 Quote shared */
.ax-book, .ax-quote { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; }
.ax-book-hd { display: flex; align-items: baseline; justify-content: space-between; }
.ax-book-hd b, .ax-quote-t { font: 800 12px/1.2 var(--font-head); }
.ax-book-hd small { color: #667085; font-size: 9.5px; }
.ax-book-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ax-book-days span { display: grid; justify-items: center; padding: 3px 0; border-radius: 7px; background: #f2f4f7; font: 800 12px/1.15 var(--font-head); }
.ax-book-days small { color: #667085; font: 600 8.5px/1.2 var(--font-body, sans-serif); }
.ax-book-days .on { background: #0d9488; color: #fff; }
.ax-book-days .on small { color: rgba(255, 255, 255, .85); }
.ax-book-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ax-book-times span { padding: 3px 0; border: 1px solid #d0d5dd; border-radius: 6px; text-align: center; font-size: 10px; font-weight: 700; }
.ax-book-times .on { border-color: #0d9488; background: #f0fdfa; color: #0f766e; }
.ax-book-times .off { color: #c0c5cf; text-decoration: line-through; }
.ax-book-btn { display: block; margin-top: auto; padding: 6px; border-radius: 7px; background: #101828; color: #fff; text-align: center; font-size: 10.5px; font-weight: 800; }
.ax-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-quote-row small { color: #475467; font-size: 10px; }
.ax-seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: #f2f4f7; }
.ax-seg i { padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; font-style: normal; color: #475467; }
.ax-seg i.on { background: #fff; color: #c2410c; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ax-quote-res { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 7px; background: #fff7ed; }
.ax-quote-res small { color: #9a3412; font-size: 9.5px; font-weight: 700; }
.ax-quote-res b { color: #c2410c; font: 800 13px/1 var(--font-head); }
.ax-quote .ax-book-btn { background: #ea580c; }

/* 11 Voucher + loyalty */
.ax-gift { display: flex; flex-direction: column; gap: 7px; padding: 9px; background: #fdf2f8; }
.ax-gift-v { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; flex: 1; padding: 8px 10px; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg, #7c2d12, #be123c); color: #fff; }
.ax-gift-v::before { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fdf2f8; transform: translateY(-50%); }
.ax-gift-v::after { content: ""; position: absolute; top: 50%; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fdf2f8; transform: translateY(-50%); }
.ax-gift-v small { grid-column: 1 / -1; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ax-gift-v b { font: 800 26px/1 var(--font-head); }
.ax-gift-v span { grid-column: 1; font-size: 9.5px; opacity: .9; }
.ax-gift-v code { position: relative; z-index: 1; margin-right: 6px; grid-column: 2; grid-row: 2 / 4; align-self: end; padding: 2px 6px; border: 1px dashed rgba(255, 255, 255, .6); border-radius: 4px; font: 700 9px/1.3 ui-monospace, monospace; }
.ax-gift-l { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: #fff; }
.ax-gift-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ax-gift-dots i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #f9a8d4; }
.ax-gift-dots i.on { border: 0; background: #db2777; }
.ax-gift-l small { color: #475467; font-size: 9.5px; }

/* 12 Web app */
.ax-app { display: flex; background: #f8f9fc; }
.ax-app-side { display: flex; flex-direction: column; gap: 7px; flex: none; width: 26px; padding: 9px 7px; background: #1e1b4b; }
.ax-app-side i { display: block; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.ax-app-side i.on { background: #818cf8; }
.ax-app-main { flex: 1; min-width: 0; padding: 8px 9px; }
.ax-app-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ax-app-hd b { font: 800 12px/1 var(--font-head); }
.ax-app-hd span { padding: 3px 7px; border-radius: 6px; background: #4f46e5; color: #fff; font-size: 9px; font-weight: 800; }
.ax-app ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ax-app li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #eaecf0; font-size: 10px; }
.ax-app li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ax-app em { flex: none; padding: 1px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 800; font-style: normal; }
.ax-app .s-prog { background: #fef3c7; color: #b45309; }
.ax-app .s-new { background: #e0e7ff; color: #4338ca; }
.ax-app .s-done { background: #dcfce7; color: #15803d; }

@media (prefers-reduced-motion: reduce) { .ax-reel-bar i, .ax-chat-b .dots i { animation: none; } }
@media (max-width: 640px) { .ax { height: 164px; } }
.addon.flip .ax-chips { display: block; margin: 0 0 12px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.addon.flip .ax-chips::before { content: "Works on: "; font-weight: 800; color: #fff; }
.addon.flip .ax-chips span { display: inline; padding: 0; border: 0; background: none; font-size: inherit; font-weight: 600; color: inherit; }
.addon.flip .ax-chips span::before { display: none; }
.addon.flip .ax-chips span + span::before { content: " · "; display: inline; width: auto; height: auto; border-radius: 0; background: none; opacity: .7; }
.addon-tools { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; }
.addon-tools small { margin-right: 4px; color: var(--ink-500); font-size: 12px; font-weight: 700; }
.addon-tools img { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
/* Before/after: compare left and right only, no scrolling inside the screen */
.ba-view { overflow: hidden; overscroll-behavior: auto; touch-action: pan-y; }
/* Rocket mark in front of every section label */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; flex: none; width: 1.75em; height: 1.75em; margin: -.3em 0; background: url("/rocket-icon.png?v=1") center / contain no-repeat; }

/* ===== Team ===== */
.team-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: stretch; }
.team-founder { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 34px 32px 32px; border-radius: var(--radius); background: var(--grad-hero); color: rgba(255, 255, 255, .88); box-shadow: 0 30px 60px -30px rgba(42, 15, 107, .75); }
.team-founder::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 61, .35), transparent 70%); pointer-events: none; }
.tf-top { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.tf-photo { position: relative; flex: none; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 28px; background: var(--grad-orange); box-shadow: 0 18px 34px -14px rgba(255, 90, 31, .8); }
.tf-photo b { font: 800 38px/1 var(--font-head); color: #fff; letter-spacing: -.02em; }
.tf-photo img, .tf-photo picture { position: absolute; }
.tf-photo img { right: -10px; bottom: -10px; width: 38px; height: 38px; padding: 5px; border-radius: 50%; background: #1b1145; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.tf-photo.has-photo { overflow: visible; background: none; }
.tf-photo.has-photo .tf-img { position: static; width: 100%; height: 100%; padding: 0; border-radius: 28px; object-fit: cover; background: none; box-shadow: none; }
.tf-badge { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 800 11px/1.4 var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.team-founder h3 { margin: 0; color: #fff; font-size: 26px; }
.tf-role { margin: 4px 0 0; color: var(--orange-400, #ff8a3d); font-weight: 700; font-size: 15px; }
.team-founder > p { position: relative; z-index: 1; margin: 0 0 20px; font-size: 16px; line-height: 1.65; }
.tf-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.tf-facts li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 600; }
.tf-cta { align-self: flex-start; margin-top: auto; }
.team-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.team-role { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.team-role:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.team-role img { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .6); }
.team-role h3 { margin: 0 0 6px; font-size: 18px; }
.team-role p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .team-founder { padding: 26px 22px 24px; }
  .tf-top { gap: 16px; }
  .tf-photo { width: 84px; height: 84px; border-radius: 24px; }
  .tf-photo b { font-size: 30px; }
  .team-founder h3 { font-size: 22px; }
  .team-founder > p { font-size: 15px; }
  .tf-cta { align-self: stretch; text-align: center; }
  .team-roles { gap: 12px; }
  .team-role { padding: 16px; gap: 12px; }
  .team-role img { width: 64px; height: 64px; border-radius: 18px; }
  .team-role h3 { font-size: 16px; }
  .team-role p { font-size: 13.5px; }
}
@media (max-width: 380px) { .team-roles { grid-template-columns: 1fr; } .team-role { flex-direction: row; align-items: center; } }
/* Header: no email block, fuller menu */
.header-contact { display: none !important; }
@media (min-width: 1101px) {
  .main-nav ul { gap: clamp(16px, 1.6vw, 26px); }
  .main-nav a { font-size: 15px; white-space: nowrap; }
  .main-nav .nav-cta { padding: 10px 18px; }
}
/* Team: 9 compact role cards beside the founder */
.team-roles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.team-role { gap: 12px; padding: 18px; }
.team-role img { width: 64px; height: 64px; border-radius: 18px; }
.team-role h3 { font-size: 16px; margin-bottom: 4px; }
.team-role p { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1000px) { .team-roles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .team-role { padding: 14px; } .team-role img { width: 56px; height: 56px; border-radius: 16px; } .team-role h3 { font-size: 15px; } .team-role p { font-size: 13px; } }
@media (max-width: 720px) {
  .team-roles .team-role:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* ===== Header menu polish ===== */
@media (min-width: 1101px) {
  :root .site-header .main-nav li a:not(.nav-cta) { position: relative; color: #fff; padding: 6px 0; }
  :root .site-header .main-nav li a:not(.nav-cta):hover { color: #fff; }
  :root .site-header .main-nav li a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  :root .site-header .main-nav li a:not(.nav-cta):hover::after, :root .site-header .main-nav li a.is-active::after { transform: scaleX(1); }
  :root .site-header .main-nav li a.is-active:not(.nav-cta) { color: #fff; }
  /* light theme, scrolled: white bar, dark links */
  :root .site-header.is-scrolled .main-nav li a:not(.nav-cta) { color: var(--ink); }
  :root .site-header.is-scrolled .main-nav li a:not(.nav-cta):hover, :root .site-header.is-scrolled .main-nav li a.is-active:not(.nav-cta) { color: var(--orange); }
  /* dark theme, scrolled: brand gradient bar so it stands out from the page */
  :root[data-theme="dark"] .site-header.is-scrolled .main-nav li a:not(.nav-cta) { color: #fff; }
  :root[data-theme="dark"] .site-header.is-scrolled .main-nav li a:not(.nav-cta):hover, :root[data-theme="dark"] .site-header.is-scrolled .main-nav li a.is-active:not(.nav-cta) { color: #fff; }
}
[data-theme="dark"] .site-header.is-scrolled { background: linear-gradient(115deg, rgba(36, 9, 107, .95) 0%, rgba(59, 31, 168, .95) 55%, rgba(37, 99, 235, .95) 100%); border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .9); }
[data-theme="dark"] .is-scrolled .theme-toggle, [data-theme="dark"] .is-scrolled .nav-toggle { background: rgba(255, 255, 255, .14); color: #fff; }
[data-theme="dark"] .is-scrolled .nav-toggle span { background: #fff; }
.site-header.is-scrolled { border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) {
  :root .site-header .main-nav li a:not(.nav-cta) { color: var(--ink); }
  :root .site-header .main-nav li a.is-active:not(.nav-cta) { color: var(--orange); }
}
/* Phones/tablets: the blur would trap the fixed menu panel inside the header, so use a solid bar instead */
@media (max-width: 1100px) {
  .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  [data-theme="dark"] .site-header.is-scrolled { background: linear-gradient(115deg, #24096b 0%, #3b1fa8 55%, #2563eb 100%); }
  .main-nav { height: 100dvh; overflow-y: auto; }
}
body.nav-open .sr-fab, body.nav-open .sr-launcher { opacity: 0; pointer-events: none; }

/* ===== Blog ===== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.post-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.post-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card-img img, .post-feature:hover .post-card-img img { transform: scale(1.04); }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.post-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-500); font-size: 13px; font-weight: 600; }
.post-cat { padding: 3px 10px; border-radius: 999px; background: var(--orange-50, #fff1e8); color: var(--orange); font: 800 11px/1.4 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
[data-theme="dark"] .post-cat { background: rgba(255, 106, 31, .16); color: #ff9a5c; }
.post-card h3, .post-card h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
:root .post-card h3 a, :root .post-card h2 a, :root .post-feature h2 a { color: var(--ink); text-decoration: none; }
:root .post-card h3 a:hover, :root .post-card h2 a:hover, :root .post-feature h2 a:hover { color: var(--orange); }
.post-card-body > p:not(.post-meta) { flex: 1; margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
:root .post-more { align-self: flex-start; color: var(--orange); font-family: var(--font-head); font-weight: 800; font-size: 15px; text-decoration: none; }
:root .post-more:hover span { margin-left: 4px; }
.post-more span { transition: margin .2s; }
.blog-home-more { margin-top: 34px; text-align: center; }
.blog-home-more .btn-light { border: 1px solid var(--line); }
[data-theme="dark"] .blog-home-more .btn-light { background: var(--surface); color: var(--ink); }

/* blog index */
.blog-hero p:not(.eyebrow) { max-width: 640px; margin: 16px 0 0; color: rgba(255, 255, 255, .85); font-size: 18px; }
.blog-list { padding-top: 70px; }
.post-feature { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; margin-bottom: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.post-feature .post-card-img { aspect-ratio: auto; min-height: 100%; }
.post-feature .post-card-body { justify-content: center; padding: 40px; }
.post-feature h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.post-feature .post-card-body > p:not(.post-meta) { flex: 0; font-size: 17px; margin-bottom: 24px; }
.post-feature .btn { align-self: flex-start; }
.blog-list .post-grid + .post-cta { margin-top: 48px; }

/* article */
.post-hero { background: var(--grad-hero); color: #fff; padding: 150px 0 120px; }
.post-hero .container, .post-wrap { max-width: 860px; }
.post-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.12; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, .7); }
:root .crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
:root .crumbs a:hover { color: #fff; text-decoration: underline; }
.post-byline { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 15px; }
.post-wrap { padding-bottom: 40px; }
.post-cover { margin: -80px 0 44px; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(21, 18, 58, .6); }
.post-cover img { display: block; width: 100%; height: auto; }
.post-body { font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.post-body .lead { font-size: 20px; line-height: 1.65; color: var(--ink); }
.post-body h2 { margin: 1.9em 0 .55em; color: var(--ink); font-size: 26px; line-height: 1.25; }
.post-body p { margin: 0 0 1.05em; }
.post-body strong { color: var(--ink); }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 24px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: .45em; }
.post-body li::marker { color: var(--orange); font-weight: 700; }
.post-cta { display: flex; align-items: center; gap: 22px; margin-top: 50px; padding: 28px 30px; border-radius: var(--radius); background: var(--grad-hero); color: rgba(255, 255, 255, .88); box-shadow: 0 24px 50px -24px rgba(42, 15, 107, .7); }
.post-cta img { flex: none; width: 56px; height: 56px; }
.post-cta div { flex: 1; }
.post-cta h2 { margin: 0 0 4px; color: #fff; font-size: 22px; }
.post-cta p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.post-cta .btn { flex: none; }
.post-more-sec { padding-top: 40px; background: var(--bg-soft); }
.post-more-title { margin: 0 0 28px; font-size: 28px; }

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-feature { grid-template-columns: 1fr; }
  .post-feature .post-card-img { aspect-ratio: 16 / 9; }
  .post-feature .post-card-body { padding: 28px; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-home .post-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scroll-padding-left: 18px; }
  .blog-home .post-grid::-webkit-scrollbar { display: none; }
  .blog-home .post-grid > * { scroll-snap-align: start; }
  .post-card-body { padding: 18px 18px 20px; }
  .post-card h3, .post-card h2 { font-size: 18px; }
  .post-hero { padding: 120px 0 90px; }
  .post-cover { margin: -60px 0 30px; border-radius: 16px; }
  .post-body { font-size: 16.5px; }
  .post-body .lead { font-size: 18px; }
  .post-body h2 { font-size: 22px; }
  .post-cta { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
  .post-cta .btn { width: 100%; text-align: center; }
  .post-feature .post-card-body { padding: 22px; }
  .post-feature .btn { align-self: stretch; text-align: center; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .main-nav ul { gap: 14px; }
  .main-nav a { font-size: 14.5px; }
  .main-nav .nav-cta { padding: 9px 15px; }
}
/* blog links: beat the global dark-mode link colour (selectors padded with :not(.z) for specificity) */
.post-card h3 a:not(.z):not(.z):not(.z), .post-card h2 a:not(.z):not(.z):not(.z), .post-feature h2 a:not(.z):not(.z):not(.z) { color: var(--ink); }
.post-card h3 a:not(.z):not(.z):not(.z):hover, .post-card h2 a:not(.z):not(.z):not(.z):hover, .post-feature h2 a:not(.z):not(.z):not(.z):hover { color: var(--orange); }
.post-more:not(.z):not(.z):not(.z) { color: var(--orange); }
[data-theme="dark"] .post-more:not(.z):not(.z):not(.z) { color: #ff9a5c; }
.crumbs a:not(.z):not(.z):not(.z) { color: rgba(255, 255, 255, .85); }
.crumbs a:not(.z):not(.z):not(.z):hover { color: #fff; }
/* footer links stay white in dark mode too */
.site-footer a:not(.z):not(.z):not(.z) { color: rgba(255, 255, 255, .75); }
.site-footer a:not(.z):not(.z):not(.z):hover { color: var(--green); }
/* contact: instant audit link */
.contact-instant:not(.z):not(.z):not(.z) { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s; }
.contact-instant:not(.z):not(.z):not(.z):hover { background: rgba(255, 255, 255, .18); }
.contact-instant span:first-child { color: rgba(255, 255, 255, .75); font-weight: 500; }
.contact-points a:not(.z):not(.z):not(.z) { color: #fff; }

/* ===== Menu tools: search, client area, language ===== */
.nav-tool { position: relative; }
.nav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 13px/1 var(--font-head); cursor: pointer; transition: background .2s, color .2s; }
.nav-icon:hover, .nav-icon[aria-expanded="true"] { background: rgba(255, 255, 255, .26); }
.nav-icon:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-ic-label { display: none; }
.nav-lang-btn { padding: 0 12px 0 10px; }
.is-scrolled .nav-icon { background: var(--bg-soft); color: var(--ink); }
.is-scrolled .nav-icon:hover, .is-scrolled .nav-icon[aria-expanded="true"] { background: var(--ink-200, #e7e5f3); }
[data-theme="dark"] .is-scrolled .nav-icon { background: rgba(255, 255, 255, .14); color: #fff; }
[data-theme="dark"] .is-scrolled .nav-icon:hover, [data-theme="dark"] .is-scrolled .nav-icon[aria-expanded="true"] { background: rgba(255, 255, 255, .26); }
.main-nav .nav-lang { margin-left: -4px; }

.nav-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 80; width: 290px; padding: 18px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 50px -18px rgba(21, 18, 58, .45); text-align: left; }
.nav-pop[hidden] { display: none; }
.nav-pop::before { content: ""; position: absolute; top: -7px; right: 16px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.nav-pop strong { display: block; margin-bottom: 6px; font: 800 16px/1.3 var(--font-head); color: var(--ink); }
.nav-pop p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.main-nav .nav-pop a.nav-pop-btn:not(.z):not(.z):not(.z) { display: block; padding: 10px 14px; border-radius: 999px; background: var(--grad-orange); color: #fff; text-align: center; font-size: 14px; }
.main-nav .nav-pop a.nav-pop-btn:not(.z):not(.z):not(.z)::after { display: none; }
.nav-pop-lang { width: 250px; padding: 14px; }
.nav-pop-lang strong { padding: 2px 6px 6px; }
.nav-pop-lang ul { display: grid !important; gap: 2px; margin: 0; padding: 0; list-style: none; flex-direction: column; }
.main-nav .lang-opt:not(.z):not(.z):not(.z) { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; color: var(--ink); font: 600 14px/1.2 var(--font-body); white-space: nowrap; }
.main-nav .lang-opt:not(.z):not(.z):not(.z)::after { display: none; }
.lang-opt b { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: var(--bg-soft); font: 800 11px/1 var(--font-head); color: var(--ink-600, #55527a); }
.lang-opt em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-500); }
.lang-opt.is-current { background: var(--orange-50, #fff4ec); }
.lang-opt.is-current b { background: var(--grad-orange); color: #fff; }
.lang-opt.is-current em { color: var(--orange); font-size: 15px; }
.lang-opt.is-soon { opacity: .6; cursor: default; }
[data-theme="dark"] .lang-opt.is-current { background: rgba(255, 106, 31, .14); }

@media (min-width: 1101px) {
  .main-nav li.nav-tool { display: flex; }
  .main-nav li.nav-tool + li:has(.nav-cta) { margin-left: 2px; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .nav-icon { min-width: 36px; height: 36px; padding: 0 8px; }
  .nav-icon svg { width: 17px; height: 17px; }
}

/* phones/tablets: tools become labelled rows in the slide-out menu */
@media (max-width: 1100px) {
  .main-nav li.nav-tool { order: 0; }
  .nav-icon, .is-scrolled .nav-icon, [data-theme="dark"] .is-scrolled .nav-icon { justify-content: flex-start; width: 100%; height: auto; padding: 12px 6px; border-radius: 10px; background: none; color: var(--ink); font: 700 18px/1.2 var(--font-head); gap: 12px; }
  .nav-icon:hover, .nav-icon[aria-expanded="true"] { background: var(--bg-soft); }
  .nav-icon svg { width: 20px; height: 20px; color: var(--orange); }
  .nav-ic-label { display: inline; }
  .nav-lang-code { display: none; }
  .main-nav .nav-lang { margin-left: 0; }
  .nav-pop { position: static; width: auto; margin: 4px 0 8px; box-shadow: none; background: var(--bg-soft); border: 0; }
  .nav-pop::before { display: none; }
  .nav-pop-lang { width: auto; }
  .main-nav li.nav-tool:first-of-type { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
}

/* search dialog */
.site-search { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.site-search[hidden] { display: none; }
.ss-backdrop { position: absolute; inset: 0; background: rgba(10, 6, 30, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ss-panel { position: relative; width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.ss-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ss-bar svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; }
.ss-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 600 18px/1.3 var(--font-body); }
.ss-bar input::placeholder { color: var(--ink-500); font-weight: 500; }
.ss-bar input::-webkit-search-cancel-button { display: none; }
.ss-x { flex: none; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink-500); font: 700 12px/1 var(--font-body); cursor: pointer; }
.ss-res { margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.ss-res a:not(.z):not(.z):not(.z) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.ss-res li[aria-selected="true"] a, .ss-res a:hover { background: var(--bg-soft); }
.ss-res li[aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--orange); }
.ss-k { grid-row: span 2; align-self: start; min-width: 64px; margin-top: 2px; padding: 3px 8px; border-radius: 999px; background: var(--orange-50, #fff4ec); color: var(--orange); font: 800 10.5px/1.4 var(--font-head); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
[data-theme="dark"] .ss-k { background: rgba(255, 106, 31, .16); color: #ff9a5c; }
.ss-t { font: 700 15.5px/1.35 var(--font-head); }
.ss-x2 { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.ss-empty { margin: 0; padding: 22px; color: var(--ink-soft); text-align: center; }
body.search-open { overflow: hidden; }
@media (max-width: 640px) {
  .site-search { padding: 12px; }
  .ss-panel { max-height: calc(100dvh - 24px); }
  .ss-bar input { font-size: 16px; }
  .ss-k { min-width: 0; }
}
/* Menu tools: sit close together as one group */
@media (min-width: 1101px) {
  .main-nav ul { --nav-gap: clamp(16px, 1.6vw, 26px); gap: var(--nav-gap); }
  .main-nav li.nav-tool + li.nav-tool,
  .main-nav li.nav-tool + li:has(.nav-cta),
  .main-nav li:has(.nav-cta) + li.nav-tool { margin-left: calc(8px - var(--nav-gap)); }

}
@media (min-width: 1101px) and (max-width: 1320px) {
  .main-nav ul { --nav-gap: 14px; }
}

/* ===== Services dropdown in the menu ===== */
.nav-has-sub { position: relative; }
.nav-sub-toggle { display: none; }
.main-nav ul.nav-sub { display: none; }
@media (min-width: 1101px) {
  .nav-has-sub { display: flex; align-items: center; gap: 2px; }
  .nav-sub-toggle { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; }
  .nav-sub-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .nav-sub-toggle:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
  .is-scrolled .nav-sub-toggle { color: var(--ink); }
  [data-theme="dark"] .is-scrolled .nav-sub-toggle { color: #fff; }
  .nav-has-sub:hover .nav-sub-toggle svg, .nav-has-sub.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
  .main-nav ul.nav-sub { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 80; display: none; flex-direction: column; align-items: stretch; gap: 2px; width: 310px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -18px rgba(21, 18, 58, .45); }
  .main-nav ul.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-has-sub:hover > ul.nav-sub, .nav-has-sub:focus-within > ul.nav-sub, .nav-has-sub.is-open > ul.nav-sub { display: flex; }
  .main-nav .nav-sub li a:not(.z):not(.z):not(.z):not(.z) { display: block; padding: 10px 12px; border-radius: 12px; color: var(--ink); white-space: normal; }
  .main-nav .nav-sub li a:not(.z):not(.z):not(.z):not(.z)::after { display: none; }
  .main-nav .nav-sub li a:not(.z):not(.z):not(.z):not(.z):hover { background: var(--bg-soft); color: var(--ink); }
  .nav-sub b { display: block; font: 800 15px/1.3 var(--font-head); }
  .nav-sub span { display: block; margin-top: 2px; color: var(--ink-soft); font: 500 13px/1.4 var(--font-body); }
  .main-nav .nav-sub li a.is-active:not(.z):not(.z):not(.z):not(.z) b { color: var(--orange); }
}
@media (max-width: 1100px) {
  .main-nav ul.nav-sub { display: flex; flex-direction: column; gap: 0; margin: -6px 0 4px; padding: 0 0 0 16px; border-left: 2px solid var(--line); margin-left: 8px; }
  .main-nav .nav-sub li a:not(.z):not(.z):not(.z):not(.z) { padding: 8px 6px; font-size: 16px; color: var(--ink-soft); }
  .nav-sub b { font-weight: 700; }
  .nav-sub span { display: none; }
}

/* theme switch now lives in the footer */
.footer-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.theme-toggle.footer-theme { width: auto; height: 38px; padding: 0 14px 0 11px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 600 14px/1 var(--font-body); }
.theme-toggle.footer-theme:hover { background: rgba(255, 255, 255, .2); }
.theme-toggle.footer-theme svg { width: 18px; height: 18px; }
.is-scrolled .theme-toggle.footer-theme { background: rgba(255, 255, 255, .1); color: #fff; }
/* Contact sits with the links; search, client area and language form a group a little to the right */
@media (min-width: 1101px) {
  .main-nav li:has(.nav-cta) + li.nav-tool { margin-left: 10px; }
}
/* dropdown: highlight the free audit item */
@media (min-width: 1101px) {
  .main-nav .nav-sub li a.nav-sub-feature:not(.z):not(.z):not(.z):not(.z) { position: relative; padding-left: 50px; margin-bottom: 4px; background: var(--orange-50, #fff4ec); }
  .main-nav .nav-sub li a.nav-sub-feature:not(.z):not(.z):not(.z):not(.z):hover { background: var(--orange-100, #ffe0c9); }
  [data-theme="dark"] .main-nav .nav-sub li a.nav-sub-feature:not(.z):not(.z):not(.z):not(.z) { background: rgba(255, 106, 31, .14); }
  [data-theme="dark"] .main-nav .nav-sub li a.nav-sub-feature:not(.z):not(.z):not(.z):not(.z):hover { background: rgba(255, 106, 31, .22); }
  .nav-sub-feature::before { content: ""; position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 9px; background: url("/rocket-icon.png?v=1") center / 22px no-repeat, #fff; box-shadow: 0 4px 10px -4px rgba(255, 90, 31, .6); }
  .nav-sub-feature b { color: var(--orange); }
}
/* dropdown icons for the other items */
.nav-sub-ic { display: none; }
@media (min-width: 1101px) {
  .main-nav .nav-sub li a.nav-sub-icon:not(.z):not(.z):not(.z):not(.z) { position: relative; padding-left: 50px; }
  .nav-sub-ic { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; box-shadow: 0 4px 10px -4px rgba(21, 18, 58, .45); }
  .nav-sub-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-sub-ic.ic-core { background: linear-gradient(135deg, #14b8a6, #0d9488); }
  .nav-sub-ic.ic-add { background: linear-gradient(135deg, #8b5cf6, #db2777); }
}

/* ===== Team: founders + people ===== */
.founders { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; margin-bottom: 24px; }
.founder { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.founder-photo { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 36px -18px rgba(21, 18, 58, .6); }
.founder-body h3 { margin: 6px 0 2px; font-size: 24px; }
.founder-body > p:not(.tf-role) { margin: 14px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.founder .tf-badge { background: var(--orange-50, #fff4ec); color: var(--orange); }
[data-theme="dark"] .founder .tf-badge { background: rgba(255, 106, 31, .16); color: #ff9a5c; }
.founder--main { grid-template-columns: 250px 1fr; background: var(--grad-hero); border: 0; color: rgba(255, 255, 255, .88); box-shadow: 0 30px 60px -30px rgba(42, 15, 107, .75); position: relative; overflow: hidden; }
.founder--main::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 61, .35), transparent 70%); pointer-events: none; }
.founder--main .founder-photo { box-shadow: 0 0 0 3px rgba(255, 255, 255, .18), 0 24px 40px -18px rgba(0, 0, 0, .6); }
.founder--main .tf-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.founder--main h3 { color: #fff; font-size: 28px; }
.founder--main .founder-body > p:not(.tf-role) { color: rgba(255, 255, 255, .88); font-size: 16px; }
.founder--main .tf-cta { margin-top: 22px; position: relative; z-index: 1; }
.founder-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.team-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.person { overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.person img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 50% 20%; }
.person > div { padding: 18px 20px 22px; }
.person h3 { margin: 0 0 2px; font-size: 19px; }
.person-role { margin: 0 0 8px; color: var(--orange); font: 700 14px/1.3 var(--font-head); }
.person p:not(.person-role) { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.team-roles-title { margin-top: 48px; }
.team .team-roles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .founders { grid-template-columns: 1fr; }
  .team .team-roles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .founder, .founder--main { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .founder-photo { max-width: 260px; }
  .team-people { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-people .person:last-child { grid-column: 1 / -1; }
  .team-people .person:last-child img { aspect-ratio: 16 / 10; }
  .person > div { padding: 14px 14px 16px; }
  .person h3 { font-size: 16px; }
  .person-role { font-size: 13px; }
  .person p:not(.person-role) { font-size: 13.5px; }
  .team-roles-title { margin-top: 34px; }
  .founder--main .tf-cta { align-self: stretch; text-align: center; }
}
@media (max-width: 720px) { .team .team-roles .team-role:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; } }
/* team photos are pre-cropped square with matching eye line */
.person img { object-position: 50% 50%; }
@media (max-width: 760px) { .team-people .person:last-child img { object-position: 50% 38%; } }
/* Tomas: direct phone and WhatsApp */
.founder-contact { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 15px; }
.fc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.fc-wa { background: #25d366; color: #fff; box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .8); }
.btn.fc-wa:hover { background: #1fbd5a; }
@media (max-width: 760px) { .founder-contact { align-self: stretch; flex-direction: column; } .fc-btn { justify-content: center; } }
/* founders: LinkedIn icon in the top-right corner */
.founder { position: relative; }
.founder-in { position: absolute; top: 18px; right: 18px; z-index: 2; display: block; width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: transform .2s ease, box-shadow .2s ease; }
.founder-in:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 20px -8px rgba(10, 102, 194, .7); }
.founder-in:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; }
.founder-in img { display: block; width: 100%; height: 100%; border-radius: 10px; }
.founder .founder-body { padding-right: 34px; }

/* ===== Team carousel (3D ring) ===== */
.team-ring { position: relative; margin: 0 -18px 10px; }
.tr-stage { display: flex; gap: 20px; overflow-x: auto; padding: 10px 18px 24px; scroll-snap-type: x mandatory; outline: none; }
.tr-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--teal-400); border-radius: 20px; }
.tr-card { flex: none; width: 280px; scroll-snap-align: center; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgba(21, 18, 58, .55); user-select: none; -webkit-user-select: none; }
.tr-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #24096b; }
.tr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease, transform .6s ease; -webkit-user-drag: none; }
.tr-badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--orange); font: 800 10.5px/1.4 var(--font-head); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.tr-in { position: absolute; right: 12px; top: 12px; display: block; width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); transition: transform .2s ease; }
.tr-in:hover { transform: scale(1.08); }
.tr-in img { display: block; width: 100%; height: 100%; border-radius: 9px; }
.tr-body { display: flex; flex-direction: column; height: 168px; padding: 16px 18px 18px; }
.tr-body h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.tr-role { margin: 3px 0 8px; color: var(--orange); font: 700 13.5px/1.3 var(--font-head); }
.tr-text { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-card:has(.tr-actions) .tr-text { -webkit-line-clamp: 2; }
.tr-actions { display: flex; gap: 8px; margin-top: auto; }
.tr-act:not(.z):not(.z):not(.z) { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: #fff; font: 700 13px/1 var(--font-head); text-decoration: none; }
.tr-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-call { background: var(--grad-orange); }
.tr-wa { background: #25d366; }
.tr-ctrl { display: none; }

/* 3D mode (added by script) */
.team-ring.is-3d .tr-stage { position: relative; display: block; height: 560px; overflow: visible; padding: 0; perspective: 1500px; perspective-origin: 50% 40%; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; }
.team-ring.is-3d .tr-stage.is-dragging { cursor: grabbing; }
.team-ring.is-3d { overflow: hidden; margin: 0 calc(50% - 50vw) 10px; padding: 10px 0 0; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.team-ring.is-3d .tr-card { position: absolute; left: 50%; top: 10px; will-change: transform, opacity; backface-visibility: hidden; }
.team-ring.is-3d .tr-card:not(.is-center) .tr-photo img { filter: saturate(.8) brightness(.8); }
.team-ring.is-3d .tr-card.is-center { box-shadow: 0 34px 70px -30px rgba(42, 15, 107, .85), 0 0 0 2px rgba(255, 138, 61, .55); }
.team-ring.is-3d .tr-ctrl { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.tr-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .2s, transform .2s; }
.tr-btn:hover { transform: translateY(-2px); background: var(--bg-soft); }
.tr-btn:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
.tr-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .tr-card { width: 236px; }
  .tr-body { height: 160px; padding: 14px 15px 16px; }
  .tr-body h3 { font-size: 17px; }
  .team-ring.is-3d .tr-stage { height: 490px; perspective: 900px; }
  .team-ring.is-3d { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
}
/* carousel action buttons: always white text, stronger colours */
.tr-act:not(.z):not(.z):not(.z):not(.z) { color: #fff; font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.tr-act.tr-call:not(.z) { background: linear-gradient(90deg, #ff7a00, #f04e16); box-shadow: 0 8px 18px -8px rgba(240, 78, 22, .8); }
.tr-act.tr-wa:not(.z) { background: #1da851; box-shadow: 0 8px 18px -8px rgba(29, 168, 81, .8); }
.tr-act:not(.z):hover { filter: brightness(1.08); }
/* team carousel: country flag after the name */
[data-theme="light"] 

/* FAQ: keep the intro in view while the longer list scrolls */
@media (min-width: 901px) { .faq-grid > div:first-child { position: sticky; top: 110px; } }

/* FAQ: show the first 3 questions, reveal the rest on demand */
.faq-list.is-collapsed > details:nth-of-type(n+4) { display: none; }
.faq-list.is-revealed > details:nth-of-type(n+4) { animation: faqIn .35s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px/1 var(--font-head); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.faq-more:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.faq-more svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .faq-list.is-revealed > details:nth-of-type(n+4) { animation: none; } }

/* OUR WORK: real client sites on the brand-blue band */
.work-band { background: var(--grad-hero); color: #fff; padding: 56px 0; overflow-x: clip; }
.work-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.work-head .eyebrow { color: rgba(255, 255, 255, .85); justify-content: center; }
.work-head h2 { color: #fff; margin: 10px 0 12px; }
.work-head p:not(.eyebrow) { color: rgba(255, 255, 255, .78); margin: 0; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.work-card { display: flex; flex-direction: column; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(5, 2, 30, .7); backdrop-filter: blur(6px); }
.work-shot { display: block; margin: 16px 16px 0; border-radius: 14px 14px 10px 10px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .6); transition: transform .35s ease; }
.work-shot:hover { transform: translateY(-4px); }
.work-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef0f6; border-bottom: 1px solid #dfe3ee; }
.work-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.work-bar i:nth-child(2) { background: #febc2e; }
.work-bar i:nth-child(3) { background: #28c840; }
.work-bar span { margin-left: 10px; flex: 1; max-width: 260px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #5b6078; font: 600 11.5px/1.4 var(--font-body, Inter, sans-serif); }
.work-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.work-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 26px; flex: 1; }
.work-tag { margin: 0; color: #9fe7ff; font: 800 11.5px/1.4 var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.work-body h3 { margin: -6px 0 0; color: #fff; font-size: 26px; }
.work-desc { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; }
.work-stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.work-stats li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border-left: 3px solid var(--green, #3ee0a7); }
.work-stats li:nth-child(2) { border-color: var(--amber, #ffb547); }
.work-stats li:nth-child(3) { border-color: var(--orange); }
.work-stats b { font: 800 28px/1.1 var(--font-head); color: #fff; }
.work-stats span { color: rgba(255, 255, 255, .85); font-size: 13px; line-height: 1.3; }
.work-stats small { color: rgba(255, 255, 255, .55); font-size: 12px; }
.work-trend { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(8, 4, 40, .28); }
.work-spark { flex: none; width: 46%; height: 56px; }
.work-trend p, .work-new p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.work-trend b, .work-new b { color: #fff; font: 700 14px/1.3 var(--font-head); }
.work-src { margin: -4px 0 0; color: rgba(255, 255, 255, .5); font-size: 12px; }
.work-feats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.work-feats li { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 13px; font-weight: 600; }
.work-new { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(8, 4, 40, .28); }
.work-pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #3ee0a7; box-shadow: 0 0 0 0 rgba(62, 224, 167, .6); animation: workPulse 2s infinite; }
@keyframes workPulse { 70% { box-shadow: 0 0 0 12px rgba(62, 224, 167, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 224, 167, 0); } }
:root .work-band a.work-link:not(.z):not(.z) { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; color: #ffb27a; font: 700 15px/1.2 var(--font-head); text-decoration: none; }
.work-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.work-link:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .work-band { padding: 64px 0 72px; }
  .work-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 520px) {
  .work-body { padding: 18px 18px 22px; }
  .work-stats { gap: 8px; }
  .work-stats li { padding: 10px; }
  .work-stats b { font-size: 22px; }
  .work-trend { flex-direction: column; align-items: stretch; }
  .work-spark { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .work-pulse { animation: none; } .work-shot:hover { transform: none; } }
.work-band a.work-shot, .work-band a.work-shot:hover { text-decoration: none; }

/* OUR WORK: compact band row, details open on click */
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 24px; align-items: stretch; }
.work-intro { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: 20px; border-left: 3px solid var(--teal); }
.work-k { margin: 0; color: #fff; font: 800 28px/1.2 var(--font-head); letter-spacing: normal; }
.work-v { color: rgba(255, 255, 255, .78); font-size: 15px; }
.work-tile { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 14px 12px 20px; border: 0; border-left: 3px solid var(--amber); border-radius: 0 16px 16px 0; background: rgba(255, 255, 255, .06); color: #fff; text-align: left; font: inherit; cursor: pointer; transition: background .2s, transform .2s; }
.work-tile + .work-tile { border-left-color: var(--orange); }
.work-tile:hover { background: rgba(255, 255, 255, .12); }
.work-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.work-tile[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.work-thumb { flex: none; width: 104px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-tile-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.work-tile-t b { font: 800 22px/1.2 var(--font-head); }
.work-tile-t small { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.work-plus { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--orange); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); transition: transform .3s ease, background .2s; }
.work-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.work-tile[aria-expanded="true"] .work-plus { transform: rotate(45deg); }
.work-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease, margin .45s ease; }
.work-panel.is-open { grid-template-rows: 1fr; margin-top: 28px; }
.work-panel-in { overflow: hidden; min-height: 0; }
.work-panel .work-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; opacity: 0; transform: translateY(-10px); transition: opacity .35s ease, transform .35s ease; }
.work-panel.is-open .work-card { opacity: 1; transform: none; }
.work-panel .work-shot { margin: 16px 0 16px 16px; }
.work-panel .work-body { padding: 22px 26px 24px; }
@media (max-width: 1100px) {
  .work-row { grid-template-columns: 1fr 1fr; }
  .work-intro { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .work-panel .work-card { grid-template-columns: 1fr; }
  .work-panel .work-shot { margin: 16px 16px 0; }
}
@media (max-width: 640px) {
  .work-row { grid-template-columns: 1fr; gap: 14px; }
  .work-thumb { width: 84px; }
  .work-tile-t b { font-size: 19px; }
  .work-tile-t small { font-size: 13.5px; }
  .work-panel.is-open { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .work-panel, .work-panel .work-card, .work-plus { transition: none; } }

/* Header layout: logo | menu + Contact (centred in the free space) | tools on the far right */
@media (min-width: 1101px) {
  .header-inner { gap: 28px; }
  .main-nav { flex: 1 1 auto; margin-left: 0; }
  .main-nav > ul { width: 100%; }
  :root .main-nav > ul > li:first-child { margin-left: auto; }
  :root .main-nav > ul > li.nav-has-sub:not(:first-child) { margin-left: 0; }
  :root .main-nav > ul > li:has(> .nav-cta) { margin-left: calc(var(--nav-gap) * .5); }
  :root .main-nav > ul > li:has(> .nav-cta) + li.nav-tool { margin-left: auto; }
  :root .main-nav > ul > li.nav-tool + li.nav-tool { margin-left: calc(6px - var(--nav-gap)); }
  .main-nav .nav-lang { margin-left: 0; }
}

/* Spacing pass: one rhythm for every section (desktop 88 / tablet 72 / phone 52) */
.section { padding: 88px 0; }
.section-head { margin-bottom: 48px; }
.services { padding-top: 64px; }
.contact { padding: 120px 0 88px; }
.tr-body { height: 148px; }
.team-ring.is-3d .tr-stage { height: 522px; }
.team-ring.is-3d { margin-bottom: 0; }
.team-ring.is-3d .tr-ctrl { margin-top: 0; }
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .services { padding-top: 56px; }
  .contact { padding: 96px 0 72px; }
  .work-band { padding: 48px 0; }
}
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 28px; }
  .services { padding-top: 48px; }
  .contact { padding: 84px 0 60px; }
  .work-band { padding: 44px 0; }
  .tr-body { height: 150px; }
  .team-ring.is-3d .tr-stage { height: 466px; }
}
#team .section-head { margin-bottom: 26px; }

/* Before/after on phones: phone frame fits the screen */
@media (max-width: 700px) {
  .ba.is-mobile { max-width: 380px; margin-left: auto; margin-right: auto; border-radius: 46px; padding: 10px; }
  .ba.is-mobile .ba-chrome { height: 76px; border-radius: 36px 36px 0 0; }
  .ba.is-mobile .ba-screen { border-radius: 0 0 36px 36px; }
  .ba.is-mobile .ba-view { height: min(640px, 72vh); }
}
@media (max-width: 700px) { .ba-hint-desk { display: none; } }

/* Light theme: brand blue for journey steps, blog cards and FAQ (white text, orange accents) */
[data-theme="light"] .jr-num { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(36, 9, 107, .7); }
[data-theme="light"] .jr-tab { color: #3b1fa8; }
[data-theme="light"] .jr-tab:hover .jr-num { border-color: transparent; box-shadow: 0 0 0 4px rgba(59, 31, 168, .14), 0 10px 22px -12px rgba(36, 9, 107, .7); }
[data-theme="light"] .jr-tab.is-done .jr-num { background: var(--grad-hero); }
[data-theme="light"] .jr-tab[aria-selected="true"] .jr-num { background: var(--grad-orange); }
[data-theme="light"] .jr-tab[aria-selected="true"] { color: var(--ink); }

[data-theme="light"] .post-card { background: var(--grad-hero); border-color: transparent; box-shadow: 0 22px 44px -28px rgba(36, 9, 107, .75); }
[data-theme="light"] .post-card:hover { box-shadow: 0 30px 56px -26px rgba(36, 9, 107, .8); }
[data-theme="light"] .post-card .post-meta { color: rgba(255, 255, 255, .75); }
[data-theme="light"] .post-card .post-cat { background: var(--grad-orange); color: #fff; }
:root[data-theme="light"] .post-card h3 a:not(.z):not(.z):not(.z), :root[data-theme="light"] .post-card h2 a:not(.z):not(.z):not(.z) { color: #fff; }
:root[data-theme="light"] .post-card h3 a:not(.z):not(.z):not(.z):hover, :root[data-theme="light"] .post-card h2 a:not(.z):not(.z):not(.z):hover { color: #ffb27a; }
[data-theme="light"] .post-card .post-card-body > p:not(.post-meta) { color: rgba(255, 255, 255, .82); }
:root[data-theme="light"] .post-card .post-more:not(.z):not(.z):not(.z) { color: #ffa45c; }

[data-theme="light"] .faq-list details { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: 0 16px 34px -24px rgba(36, 9, 107, .7); }
[data-theme="light"] .faq-list details[open] { box-shadow: 0 22px 44px -24px rgba(36, 9, 107, .8); }
[data-theme="light"] .faq-list summary { color: #fff; }
[data-theme="light"] .faq-list summary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat, var(--grad-orange); box-shadow: 0 6px 14px -6px rgba(255, 90, 31, .8); }
[data-theme="light"] .faq-list details p { color: rgba(255, 255, 255, .85); }
:root[data-theme="light"] .faq-list details a:not(.z):not(.z):not(.z) { color: #ffb27a; }
[data-theme="light"] .faq-more { background: var(--grad-orange); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 90, 31, .8); }
[data-theme="light"] .faq-more svg { stroke: #fff; }
[data-theme="light"] .faq-more:hover { border-color: transparent; }

/* Team carousel: give the centre card's glow room to fade out (no hard line under the arrows) */
.team-ring.is-3d { padding-bottom: 56px; margin-bottom: -40px; }
.team-ring.is-3d .tr-ctrl { position: relative; z-index: 2; }
/* Layout review: hero proof, add-ons collapse, light FAQ, mobile contact bar */
.hero-proof { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 4px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none; font-size: 14.5px; transition: background .2s; }
:root .hero a.hero-proof:not(.z):not(.z) { color: #fff; }
.hero-proof:hover { background: rgba(255, 255, 255, .2); }
.hero-proof-k { padding: 5px 11px; border-radius: 999px; background: var(--grad-orange); font: 800 14px/1 var(--font-head); white-space: nowrap; }
.hero-proof b { font-weight: 700; }
.hero-proof svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.addons.is-collapsed .addon-more { display: none; }
.addon-more-wrap { display: flex; justify-content: center; margin: 28px 0 8px; }
.addon-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.band { padding: 44px 0; }
/* light theme FAQ: white cards with blue accents so Contact stands out */
[data-theme="light"] .faq-list details { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid #3b1fa8; box-shadow: 0 10px 26px -20px rgba(36, 9, 107, .5); }
[data-theme="light"] .faq-list details[open] { box-shadow: 0 16px 34px -22px rgba(36, 9, 107, .55); }
[data-theme="light"] .faq-list summary { color: #24096b; }
[data-theme="light"] .faq-list details p { color: var(--ink-soft); }
:root[data-theme="light"] .faq-list details a:not(.z):not(.z):not(.z) { color: var(--orange); }
/* mobile Call / WhatsApp bar */
.mcta { display: none; }
@media (max-width: 700px) {
  .mcta { position: fixed; left: 12px; right: 84px; bottom: 12px; z-index: 900; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(20, 12, 60, .92); backdrop-filter: blur(10px); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
  :root .mcta a:not(.z):not(.z) { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; color: #fff; font: 800 15px/1 var(--font-head); text-decoration: none; }
  .mcta-call { background: var(--grad-orange); }
  .mcta-wa { background: #1da851; }
  .mcta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: 72px; }
}
@media (max-width: 700px) {
  .mcta { transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; }
  .mcta.is-shown { transform: none; opacity: 1; pointer-events: auto; }
}

/* Team: tighter gaps to the sections around it */
#team.section { padding: 24px 0 0; }
@media (max-width: 640px) { #team.section { padding: 8px 0 0; } }

/* Hero: title and intro stay at 3 lines on phones */
@media (max-width: 440px) { .hero h1#hero-title { font-size: min(38px, 8.8vw); } }
@media (max-width: 360px) { .hero .hero-lead { font-size: 15px; } }
.sr-opt-ico.call svg { fill: none; stroke: var(--orange-400); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { body { padding-bottom: 0; } }


/* ===== Before sites: dated but realistic (around 2015) ===== */
.ba-before img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(.92) brightness(1.04); }
/* electrician */
.ob { background: #ececec; color: #555; font-family: Arial, Helvetica, sans-serif; font-size: max(10px, 1.18cqw); line-height: 1.55; }
.ob-top { display: flex; justify-content: space-between; padding: .6cqw 3cqw; background: #2b2b2b; color: #bbb; font-size: max(9px, 1cqw); }
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 3cqw; background: #fff; border-bottom: 1px solid #ddd; }
.ob-logo { display: flex; align-items: center; gap: 1cqw; color: #1f3d7a; font: bold max(15px, 2.4cqw)/1.1 Arial, Helvetica, sans-serif; }
.ob-logo i { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; min-width: 26px; min-height: 26px; border-radius: 4px; background: #1f3d7a; }
.ob-logo svg { width: 64%; height: 64%; fill: #f6c21c; }
.ob-logo small { display: block; margin-top: 3px; color: #888; font-weight: normal; font-size: max(9px, .95cqw); }
.ob-nav { display: flex; gap: 1.8cqw; font-size: max(9px, 1cqw); font-weight: bold; color: #666; letter-spacing: .03em; }
.ob-nav a.on { color: #1f3d7a; border-bottom: 2px solid #f6c21c; }
.ob-slider { position: relative; height: 26cqw; overflow: hidden; background: #888; }
.ob-slider img { object-position: center 30%; }
.ob-cap { position: absolute; left: 4cqw; bottom: 4cqw; padding: 1.2cqw 2cqw; background: rgba(0, 0, 0, .55); color: #fff; }
.ob-cap b { display: block; font-size: max(13px, 2cqw); }
.ob-cap span { font-size: max(10px, 1.15cqw); color: #ddd; }
.ob-arr { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 3.4cqw; height: 5cqw; background: rgba(0, 0, 0, .35); color: #fff; font-size: max(16px, 3cqw); line-height: 1; }
.ob-l { left: 0; } .ob-r { right: 0; }
.ob-dots { position: absolute; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); display: flex; gap: .7cqw; }
.ob-dots i { width: .9cqw; height: .9cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); } .ob-dots i.on { background: #fff; }
.ob-wrap { width: 88%; margin: 0 auto; padding: 2.4cqw 0 1cqw; }
.ob-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-bottom: 2cqw; }
.ob-cols > div { background: #fff; padding: 1.6cqw; border: 1px solid #ddd; }
.ob-cols h4, .ob-news h4 { margin: 0 0 .6cqw; color: #1f3d7a; font-size: max(11px, 1.4cqw); }
.ob-cols p { margin: 0 0 .8cqw; }
.ob-cols a, .ob-news b { color: #1f3d7a; }
.ob-about { display: grid; grid-template-columns: 1fr 30%; gap: 2cqw; background: #fff; padding: 1.8cqw; border: 1px solid #ddd; }
.ob-about h3 { margin: 0 0 .8cqw; color: #333; font-size: max(13px, 1.8cqw); }
.ob-about p { margin: 0 0 1cqw; }
.ob-news { border-left: 1px solid #e3e3e3; padding-left: 1.6cqw; }
.ob-news p { margin: 0 0 1cqw; }
.ob-foot { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.4cqw 3cqw; background: #2b2b2b; color: #999; font-size: max(9px, .95cqw); }
/* dental */
.dob { background: #dbe7ec; font-family: Verdana, Geneva, sans-serif; font-size: max(10px, 1.1cqw); line-height: 1.55; color: #444; padding: 2cqw 0; }
.dob-page { width: 86%; margin: 0 auto; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .15); }
.dob-head { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 2.4cqw; }
.dob-logo { font: italic bold max(16px, 2.6cqw)/1.1 Georgia, "Times New Roman", serif; color: #1c7c8c; }
.dob-logo small { display: block; margin-top: 4px; font: italic normal max(9px, 1cqw) Georgia, serif; color: #888; }
.dob-tel { color: #1c7c8c; font-weight: bold; font-size: max(10px, 1.15cqw); }
.dob-nav { display: flex; background: linear-gradient(#2aa0b3, #1c7c8c); }
.dob-nav a { padding: .9cqw 1.6cqw; color: #fff; font-size: max(9px, 1cqw); border-right: 1px solid rgba(255, 255, 255, .25); }
.dob-nav a.on { background: rgba(0, 0, 0, .15); }
.dob-banner { position: relative; height: 22cqw; overflow: hidden; }
.dob-banner img { object-position: center 35%; }
.dob-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1cqw 2.4cqw; background: rgba(28, 124, 140, .75); color: #fff; font: italic max(12px, 1.7cqw) Georgia, serif; }
.dob-body { display: grid; grid-template-columns: 1fr 32%; gap: 2.4cqw; padding: 2cqw 2.4cqw; }
.dob-main h3 { margin: 0 0 .6cqw; color: #1c7c8c; font: bold max(12px, 1.6cqw) Georgia, serif; }
.dob-main p { margin: 0 0 1cqw; }
.dob-main ul { margin: 0 0 1cqw; padding-left: 1.6cqw; columns: 2; }
.dob-note { font-style: italic; color: #888; }
.dob-box { margin-bottom: 1.4cqw; padding: 1.2cqw 1.4cqw; background: #f2f7f8; border: 1px solid #d5e4e8; }
.dob-box h4 { margin: 0 0 .6cqw; color: #1c7c8c; font-size: max(10px, 1.2cqw); }
.dob-box p { margin: 0; }
.dob-box table { width: 100%; border-collapse: collapse; font-size: max(9px, 1cqw); }
.dob-box td { padding: 2px 0; border-bottom: 1px dotted #c9dade; }
.dob-box a, .dob-foot a { color: #1c7c8c; text-decoration: underline; }
.dob-foot { padding: 1.2cqw 2.4cqw; background: #f2f7f8; border-top: 1px solid #d5e4e8; color: #888; font-size: max(9px, .95cqw); text-align: center; }
/* restaurant */
.rob { background: #f3ead8; color: #5a4632; font-family: Georgia, "Times New Roman", serif; font-size: max(10px, 1.15cqw); line-height: 1.6; }
.rob-head { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 4cqw; background: #3b2416; border-bottom: 3px solid #b8893c; }
.rob-logo { font: italic max(18px, 3cqw)/1.1 Georgia, serif; color: #f1d9a6; }
.rob-logo small { display: block; margin-top: 4px; font-size: max(9px, 1cqw); color: #c9b08a; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.rob-tel { text-align: right; color: #c9b08a; font-size: max(9px, 1cqw); }
.rob-tel b { display: block; color: #f1d9a6; font-size: max(12px, 1.6cqw); }
.rob-nav { display: flex; justify-content: center; gap: 2.4cqw; padding: .9cqw; background: #5a3a24; color: #e8d3a9; font-size: max(9px, 1.05cqw); }
.rob-nav a.on { color: #fff; text-decoration: underline; }
.rob-banner { position: relative; height: 24cqw; overflow: hidden; border-bottom: 3px solid #b8893c; }
.rob-banner img { object-position: center 55%; filter: saturate(.75) sepia(.15) contrast(.92); }
.rob-cap { position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%); padding: .8cqw 2.4cqw; background: rgba(59, 36, 22, .75); color: #f1d9a6; font-style: italic; font-size: max(12px, 1.7cqw); white-space: nowrap; }
.rob-body { display: grid; grid-template-columns: 1fr 30%; gap: 2.4cqw; width: 86%; margin: 0 auto; padding: 2.4cqw 0; }
.rob-main h3 { margin: 0 0 .6cqw; color: #7a2e1d; font-size: max(13px, 1.7cqw); font-weight: normal; font-style: italic; }
.rob-main p { margin: 0 0 1.2cqw; }
.rob-main a, .rob-box a { color: #7a2e1d; text-decoration: underline; }
.rob-box { margin-bottom: 1.4cqw; padding: 1.2cqw 1.4cqw; background: #fbf6ec; border: 1px solid #e0d2b4; }
.rob-box h4 { margin: 0 0 .5cqw; color: #7a2e1d; font-size: max(10px, 1.2cqw); }
.rob-box p { margin: 0; }
.rob-fb { display: flex; align-items: center; gap: .8cqw; font-family: Arial, sans-serif; font-size: max(9px, .95cqw); }
.rob-fb i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; min-width: 18px; min-height: 18px; background: #3b5998; color: #fff; font: bold max(11px, 1.4cqw)/1 Arial, sans-serif; font-style: normal; }
.rob-fb b { display: block; color: #3b5998; }
.rob-foot { padding: 1.2cqw; background: #3b2416; color: #a88e6a; text-align: center; font-size: max(9px, .95cqw); }
.ob h3, .ob h4 { font-family: Arial, Helvetica, sans-serif; letter-spacing: normal; line-height: 1.3; }
.dob h3, .dob h4, .rob h3, .rob h4 { font-family: Georgia, "Times New Roman", serif; letter-spacing: normal; line-height: 1.3; }
.ob-quotes { margin-top: 2cqw; background: #fff; padding: 1.8cqw; border: 1px solid #ddd; }
.ob-quotes h3 { margin: 0 0 1cqw; color: #333; font-size: max(13px, 1.8cqw); }
.ob-quotes > div { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.ob-quotes p { margin: 0; padding: 1.2cqw 1.4cqw; background: #f6f6f6; border-left: 3px solid #f6c21c; font-style: italic; }
.ob-quotes b { display: block; margin-top: .6cqw; font-style: normal; color: #1f3d7a; }
.ob-areas { margin: 2cqw 0 1cqw; padding: 1.2cqw 1.6cqw; background: #1f3d7a; color: #dfe6f3; font-size: max(9px, 1.05cqw); }
.ob-areas b { color: #f6c21c; }
.dob-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; margin-bottom: 1.4cqw; }
.dob-team > div { padding: 1.2cqw; text-align: center; background: #f2f7f8; border: 1px solid #d5e4e8; }
.dob-team i { display: grid; place-items: center; width: 5cqw; height: 5cqw; min-width: 30px; min-height: 30px; margin: 0 auto .6cqw; border-radius: 50%; background: #c9dfe4; color: #1c7c8c; font: bold max(10px, 1.3cqw) Verdana, sans-serif; font-style: normal; }
.dob-team b { display: block; color: #333; }
.dob-team span { color: #888; font-size: .9em; }
.rob-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-bottom: 1.4cqw; }
.rob-gal > div { height: 11cqw; overflow: hidden; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.rob-gal img { filter: saturate(.75) sepia(.15) contrast(.92); }
:root .rob-nav a { color: #e8d3a9; text-decoration: none; }
:root .rob-nav a.on { color: #fff; text-decoration: underline; }

/* Before sites on a phone: their own basic, dated mobile layout */
.ob-menubtn, .dob-menubtn { display: none; }
@container (max-width: 600px) {
  .ob { font-size: 13px; line-height: 1.5; }
  .ob-top { flex-direction: column; gap: 2px; padding: 6px 12px; font-size: 10px; text-align: center; }
  .ob-head { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 12px 0; border-bottom: 0; }
  .ob-logo { justify-content: center; font-size: 20px; }
  .ob-logo i { width: 30px; height: 30px; }
  .ob-logo small { font-size: 10px; }
  .ob-nav { display: none; }
  .ob-menubtn { display: flex; align-items: center; gap: 8px; margin: 0 -12px; padding: 10px 14px; background: #1f3d7a; color: #fff; font: bold 12px/1 Arial, sans-serif; letter-spacing: .08em; }
  .ob-menubtn span { width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
  .ob-slider { height: 180px; }
  .ob-cap { left: 10px; right: 10px; bottom: 22px; padding: 8px 10px; }
  .ob-cap b { font-size: 15px; } .ob-cap span { font-size: 11px; }
  .ob-arr { width: 22px; height: 34px; font-size: 20px; }
  .ob-dots { bottom: 8px; gap: 5px; } .ob-dots i { width: 7px; height: 7px; }
  .ob-wrap { width: auto; padding: 12px; }
  .ob-cols { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .ob-cols > div, .ob-about, .ob-quotes { padding: 12px; }
  .ob-cols h4, .ob-news h4 { font-size: 15px; margin-bottom: 4px; }
  .ob-about { grid-template-columns: 1fr; gap: 10px; }
  .ob-about h3, .ob-quotes h3 { font-size: 17px; }
  .ob-news { border-left: 0; border-top: 1px solid #e3e3e3; padding: 10px 0 0; }
  .ob-quotes { margin-top: 10px; } .ob-quotes > div { grid-template-columns: 1fr; gap: 8px; } .ob-quotes p { padding: 10px; }
  .ob-areas { margin: 10px 0 4px; padding: 10px 12px; font-size: 12px; }
  .ob-foot { flex-direction: column; gap: 4px; padding: 12px; font-size: 10px; text-align: center; }

  .dob { font-size: 13px; padding: 0; }
  .dob-page { width: auto; box-shadow: none; }
  .dob-head { flex-direction: column; gap: 6px; padding: 14px 12px; text-align: center; }
  .dob-logo { font-size: 22px; } .dob-logo small { font-size: 11px; }
  .dob-tel { font-size: 12px; font-weight: normal; }
  .dob-nav { display: none; }
  .dob-menubtn { display: block; padding: 10px 12px; background: linear-gradient(#2aa0b3, #1c7c8c); color: #fff; font-size: 13px; text-align: center; }
  .dob-banner { height: 170px; }
  .dob-cap { padding: 8px 12px; font-size: 14px; }
  .dob-body { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .dob-main h3 { font-size: 17px; margin-bottom: 4px; }
  .dob-main ul { columns: 1; padding-left: 18px; }
  .dob-team { grid-template-columns: repeat(3, 1fr); gap: 6px; } .dob-team > div { padding: 8px 4px; font-size: 11px; } .dob-team i { width: 34px; height: 34px; font-size: 12px; }
  .dob-box { margin-bottom: 10px; padding: 10px 12px; } .dob-box h4 { font-size: 14px; } .dob-box table { font-size: 12px; }
  .dob-foot { padding: 10px; font-size: 10px; }

  .rob { font-size: 13px; }
  .rob-head { flex-direction: column; gap: 8px; padding: 14px 12px; text-align: center; }
  .rob-logo { font-size: 24px; } .rob-logo small { font-size: 10px; }
  .rob-tel { text-align: center; font-size: 11px; } .rob-tel b { font-size: 15px; }
  .rob-nav { flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; font-size: 12px; }
  .rob-banner { height: 170px; }
  .rob-cap { bottom: 12px; padding: 6px 12px; font-size: 13px; white-space: normal; width: max-content; max-width: 86%; text-align: center; }
  .rob-body { grid-template-columns: 1fr; gap: 10px; width: auto; padding: 12px; }
  .rob-main h3 { font-size: 18px; margin-bottom: 4px; }
  .rob-gal { gap: 6px; } .rob-gal > div { height: 70px; border-width: 2px; }
  .rob-box { margin-bottom: 10px; padding: 10px 12px; } .rob-box h4 { font-size: 14px; }
  .rob-fb { font-size: 11px; } .rob-fb i { width: 22px; height: 22px; font-size: 13px; }
  .rob-foot { padding: 10px; font-size: 10px; }
}

/* Before/after desktop view: inside a MacBook-style laptop */
.ba-mac { position: relative; max-width: 1040px; margin: 0 auto; }
.ba-mac > .ba:not(.is-mobile) { padding: 18px 16px 16px; background: #141418; border: 1px solid #2b2b33; border-radius: 22px 22px 8px 8px; box-shadow: 0 30px 60px -30px rgba(20, 10, 60, .55), inset 0 0 0 1px #3a3a44; }
.ba-mac > .ba:not(.is-mobile)::before { content: ""; position: absolute; top: 6px; left: 50%; z-index: 3; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #2c2c35; box-shadow: inset 0 0 0 2px #1d1d24; }
.ba-mac > .ba:not(.is-mobile) .ba-chrome { border-radius: 6px 6px 0 0; }
.ba-mac > .ba:not(.is-mobile) .ba-screen { border-radius: 0 0 4px 4px; overflow: hidden; }
.ba-mac::after { content: ""; display: block; position: relative; left: -6%; width: 112%; height: 18px; margin-top: -1px; border-radius: 2px 2px 14px 14px; background: linear-gradient(#e9e9ee, #c4c4cc 55%, #9c9ca6); box-shadow: 0 14px 24px -12px rgba(20, 10, 60, .45); }
.ba-mac::before { content: ""; position: absolute; left: 50%; bottom: 10px; z-index: 1; width: 16%; height: 7px; margin-left: -8%; border-radius: 0 0 10px 10px; background: linear-gradient(#b7b7c0, #d3d3da); }
.ba-mac:has(> .ba.is-mobile)::after, .ba-mac:has(> .ba.is-mobile)::before { display: none; }
@media (max-width: 700px) { .ba-mac::after, .ba-mac::before { display: none; } }

/* phones: add-ons merged into one swipe row */
.addons.is-merged .addon-grid > .addon-more:not(.z) { display: flex; }
.addons.is-merged .addon-group.addon-more, .addons.is-merged .addon-grid.addon-more, .addons.is-merged .addon-grid.addon-more + .swipe-dots, .addons.is-merged .addon-more-wrap { display: none; }
.addons.is-merged .addon-group:first-of-type { display: none; }
/* example sites: phone numbers are plain text, never auto-linked by iOS */
.ba a[href^="tel"], .ba a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }

/* Homepage example report: matches the live audit (2026-11-07) */
.ap-card::before { background: linear-gradient(90deg, #3b1fa8 0%, #2563eb 62%, #ff6a1a 100%); }
.ap-gauge .tr { stroke: var(--purple-100); }
.ap-gauge .br { stroke: #ff4d6d; }
.ap-gauge b { color: #ff4d6d; }
.ap-gauge i { background: linear-gradient(135deg, #ff7a9a, #ff4d6d); }
.ap-verdict { color: var(--pink-600); }
.ap-areas i { background: var(--purple-50); }
.ap-areas i::after { background: linear-gradient(90deg, #ff7a9a, #ff4d6d); }
.ap-areas i.ok::after { background: var(--grad-orange); }
.ap-areas b.bad { color: #ff4d6d; } .ap-areas b.ok { color: #ff6a1a; }
.ap-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow: hidden; }
.ap-tabs span { flex: 0 0 auto; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: 700 12px/1.2 var(--font-head); color: var(--ink); white-space: nowrap; }
.ap-tabs span.is-on { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: 0 10px 18px -12px rgba(42, 15, 107, .9); }
.ap-row { grid-template-columns: 22px auto 1fr auto; }
.ap-row i { background: linear-gradient(90deg, #3b1fa8, #2563eb); }
.ap-row small { font-size: 11.5px; font-weight: 700; color: var(--purple-700); white-space: nowrap; }
.ap-you { color: #e0365a; border-color: #ff4d6d; }
.ap-wins { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 12.5px; }
.ap-wins-h, .ap-wins-r { display: grid; grid-template-columns: 1fr 64px 74px 40px; align-items: center; gap: 6px; padding: 7px 12px; }
.ap-wins-h { background: var(--grad-hero); color: #fff; font-family: var(--font-head); font-weight: 700; }
.ap-wins-h b { font-size: 11px; color: #ffb37a; text-align: center; }
.ap-wins-r { border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.ap-wins-r:nth-child(odd) { background: var(--purple-50); }
.ap-wins-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-wins-r em { justify-self: center; display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 99px; font-style: normal; font-weight: 800; font-size: 11.5px; }
.ap-wins-r em.t { background: linear-gradient(135deg, #5fd3a0, #20b386); color: #fff; }
.ap-wins-r em.m { background: var(--orange-50); color: #d0440f; }
.ap-wins-r em.l { background: var(--pink-50); color: var(--pink-600); }
.ap-wins-r em.n { color: var(--ink-400); }
.ap-wins-r.is-you { background: var(--orange-50); box-shadow: inset 4px 0 0 #ff6a1a; }
.ap-wins-r.is-you i { font-style: normal; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--grad-orange); color: #fff; font-size: 10px; }
[data-theme="dark"] .ap-row small { color: #a096fc; }
[data-theme="dark"] .ap-wins-r em.m { color: #ff9a5c; }
@media (max-width: 640px) {
  .ap-wins-h, .ap-wins-r { grid-template-columns: 1fr 44px 44px 32px; padding: 7px 10px; }
  .ap-wins-h b:nth-of-type(2) { font-size: 0; } .ap-wins-h b:nth-of-type(2)::after { content: "Emerg."; font-size: 11px; }
  .ap-row small { display: none; }
}
.ap-art, .ap-card, .ap-serp, .ap-wins, .ap-tabs { min-width: 0; max-width: 100%; }
.ap-grid > * { min-width: 0; }

/* Packages: service tabs (2026-11-08) */
.pkg-tabs { display: flex; justify-content: center; gap: 8px; margin: -14px auto 18px; padding: 6px; width: max-content; max-width: 100%; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(42, 15, 107, .6); overflow-x: auto; scrollbar-width: none; }
.pkg-tabs::-webkit-scrollbar { display: none; }
.pkg-tab { flex: 0 0 auto; padding: 11px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px/1 var(--font-head); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pkg-tab:hover { background: var(--purple-50); }
.pkg-tab[aria-selected="true"] { background: var(--grad-hero); color: #fff; box-shadow: 0 10px 22px -12px rgba(42, 15, 107, .9); }
.pkg-tab:focus-visible { outline: 3px solid var(--orange-400); outline-offset: 2px; }
.pkg-intro { max-width: 680px; margin: 0 auto 40px; text-align: center; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.pkg-note { max-width: 860px; margin: 34px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-500); }
.package-price .package-extra { flex-basis: 100%; margin-top: 4px; font-style: normal; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.package--featured .package-price .package-extra { color: #ffb37a; }
.pkg-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .pkg-tabs { justify-content: flex-start; margin: -6px 0 14px; width: auto; }
  .pkg-tab { padding: 10px 16px; font-size: 14px; }
  .pkg-intro { margin-bottom: 18px; font-size: 15px; }
  .pkg-note { margin-top: 18px; font-size: 13px; }
}
@media (max-width: 640px) {
  .pkg-tabs { justify-content: center; gap: 2px; padding: 5px; width: max-content; margin-left: auto; margin-right: auto; }
  .pkg-tab { padding: 10px 11px; font-size: 14px; }
}
@media (max-width: 360px) { .pkg-tab { padding: 9px 8px; font-size: 13px; } }
.ap-head > div { min-width: 0; } .ap-dom, .ap-verdict { overflow-wrap: anywhere; }
@media (max-width: 360px) { .ap-head { gap: 12px; } .ap-gauge { width: 72px; height: 72px; } .ap-dom { font-size: 18px; } }

/* "All in" tab in SEORAPID orange */
.pkg-tab--allin { color: #ff6a1a; }
.pkg-tab--allin:hover { background: var(--orange-50); }
.pkg-tab--allin[aria-selected="true"] { background: var(--grad-orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 90, 31, .9); }
.pkg-panel--allin .package--featured { background: var(--grad-orange); box-shadow: 0 30px 60px -24px rgba(255, 90, 31, .65); }
.pkg-panel--allin .package--featured .package-tag { background: var(--grad-hero); }
.pkg-panel--allin .package--featured .package-price .package-extra { color: #fff; }
.pkg-panel--allin .package--featured .btn-orange { background: #fff; color: #d0440f; box-shadow: none; }
@media (max-width: 640px) { .pkg-tab { padding: 10px 8px; font-size: 14px; } }
@media (max-width: 360px) { .pkg-tabs { padding: 4px; } .pkg-tab { padding: 9px 5px; font-size: 12.5px; } }
.pkg-panel--allin .package--featured { background: linear-gradient(135deg, #f26a1b 0%, #c2410c 100%); }
.pkg-panel--allin .package--featured .package-sub { color: rgba(255, 255, 255, .92); }
.pkg-panel--allin .package--featured li::before { background-color: rgba(255, 255, 255, .22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.pkg-panel--allin .package--featured .package-price { border-bottom-color: rgba(255, 255, 255, .3); }

/* ===== Package comparison tables (2026-11-08) ===== */
.cmp-toggle { display: flex; justify-content: center; margin: 26px 0 0; }
.cmp-toggle button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--purple-700); background: var(--surface); color: var(--purple-700); font: 700 15px/1 var(--font-head); cursor: pointer; transition: background .2s, color .2s; }
.cmp-toggle button:hover { background: var(--purple-50); }
.cmp-toggle button:focus-visible { outline: 3px solid var(--orange-400); outline-offset: 3px; }
.cmp-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.cmp-toggle button[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-theme="dark"] .cmp-toggle button { color: #fff; border-color: rgba(255, 255, 255, .25); }
[data-theme="dark"] .cmp-toggle button:hover { background: rgba(255, 255, 255, .06); }

.cmp { position: relative; margin-top: 26px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(42, 15, 107, .55); overflow: clip; }
.cmp[hidden] { display: none; }
.cmp-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); }
.cmp-head { position: sticky; top: 64px; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.cmp-intro { padding: 34px 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.cmp-intro .eyebrow { margin: 0 0 8px; color: #ff6a1a; }
.cmp-intro h3 { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.cmp-intro p:last-child { margin: 0; font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.cmp-plan { position: relative; padding: 30px 18px 24px; text-align: center; border-left: 1px solid var(--line); }
.cmp-plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; }
.cmp-plan.p1::before { background: linear-gradient(90deg, #0b5563, #0f7a50); }
.cmp-plan.p2::before { background: var(--grad-hero); }
.cmp-plan.p3::before { background: linear-gradient(90deg, #8f1f45, #ad3b0b); }
.cmp-ico { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 17px; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 26px -14px rgba(42, 15, 107, .8); }
.cmp-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p1 .cmp-ico { background: linear-gradient(135deg, #0b5563, #0f7a50); }
.p2 .cmp-ico { background: var(--grad-hero); }
.p3 .cmp-ico { background: linear-gradient(135deg, #8f1f45, #ad3b0b); }
.cmp-plan h4 { margin: 0; font: 800 19px/1.2 var(--font-head); color: var(--ink); }
.cmp-plan .sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink-500); min-height: 2.7em; }
.cmp-price { margin: 10px 0 2px; font: 800 34px/1 var(--font-head); color: var(--ink); }
.cmp-price small { display: block; margin-bottom: 4px; font: 600 12px/1 var(--font-body); color: var(--ink-500); letter-spacing: .12em; text-transform: uppercase; }
.cmp-per { font-size: 13px; color: var(--ink-500); }
.cmp-tag { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: 999px; background: var(--grad-orange); color: #fff; font: 800 10.5px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cmp .btn { width: 100%; padding: 12px 10px; font-size: 14px; }
.cmp-plan .btn { margin-top: 16px; }
.btn-line { background: transparent; border: 2px solid var(--line); color: var(--ink); box-shadow: none; }
.btn-line:hover { border-color: var(--purple-700); color: var(--purple-700); }
[data-theme="dark"] .btn-line { border-color: rgba(255, 255, 255, .2); color: #fff; }
[data-theme="dark"] .btn-line:hover { border-color: #fff; color: #fff; }

.cmp .c2, .cmp-head .p2 { background: color-mix(in srgb, var(--purple-50) 70%, var(--surface)); }
[data-theme="dark"] .cmp .c2, [data-theme="dark"] .cmp-head .p2 { background: rgba(106, 61, 240, .10); }
.cmp-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 16px 30px; background: var(--grad-hero); color: #fff; font: 800 12.5px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.cmp-group i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.cmp-group svg { width: 13px; height: 13px; fill: none; stroke: #ff9a5c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cmp-row { display: contents; }
.cmp-row > div { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: center; font-size: 14px; line-height: 1.4; color: var(--ink); }
.cmp-row > div:not(:first-child) { border-left: 1px solid var(--line); }
.cmp-row > .lbl { justify-content: flex-start; text-align: left; padding-left: 30px; font-weight: 600; }
.cmp-row:hover > div { background: color-mix(in srgb, var(--orange-50) 60%, var(--surface)); }
.cmp-yes { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5fd3a0, #20b386); box-shadow: 0 6px 14px -8px #20b386; flex: 0 0 auto; }
.cmp-yes svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cmp-no { width: 18px; height: 3px; border-radius: 3px; background: var(--ink-300, #c8c4e0); opacity: .7; }
.cmp-val { font-weight: 700; }
.cmp .c2 .cmp-val { color: var(--purple-700); }
[data-theme="dark"] .cmp .c2 .cmp-val { color: #b8acff; }
.cmp .cmp-val.cmp-extra { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--orange-50); color: #d0440f; font-weight: 800; font-size: 13px; }
[data-theme="dark"] .cmp .cmp-val.cmp-extra { color: #ff9a5c; }
.cmp .cmp-val.cmp-save { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--mint-50); color: var(--mint-700); font-weight: 800; }
.cmp-foot > div { padding: 22px 18px 26px; border-bottom: 0; }
.cmp-row.cmp-foot:hover > div { background: transparent; }
.cmp-row.cmp-foot:hover > .c2 { background: color-mix(in srgb, var(--purple-50) 70%, var(--surface)); }
.cmp-pick { display: none; }
@media (max-width: 1100px) { .cmp-head { top: 56px; } }
@media (max-width: 760px) {
  .cmp { border-radius: 20px; }
  .cmp-pick { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .cmp-pick button { flex: 1; padding: 10px 4px; border-radius: 999px; border: 0; background: transparent; font: 700 13px/1.1 var(--font-head); color: var(--ink); cursor: pointer; }
  .cmp-pick button[aria-pressed="true"] { background: var(--grad-hero); color: #fff; }
  .cmp-pick button small { display: block; margin-top: 3px; font: 600 11px/1 var(--font-body); opacity: .75; }
  .cmp-grid { grid-template-columns: 1.15fr 1fr; }
  .cmp-intro { display: none; }
  .cmp-head .cmp-plan { grid-column: 1 / -1; display: none; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 14px; padding: 20px 16px 16px; text-align: left; border-left: 0; }
  .cmp-head .cmp-plan .cmp-ico { margin: 0; grid-row: span 2; width: 46px; height: 46px; }
  .cmp-head .cmp-plan .sub { min-height: 0; }
  .cmp-head .cmp-plan .cmp-price { grid-column: 3; grid-row: 1 / span 2; margin: 0; text-align: right; font-size: 26px; }
  .cmp-head .cmp-plan .cmp-per, .cmp-head .cmp-plan .btn, .cmp-head .cmp-plan .cmp-tag { display: none; }
  .cmp-row > .c1, .cmp-row > .c2, .cmp-row > .c3 { display: none; }
  .cmp[data-show="1"] .cmp-head .p1, .cmp[data-show="2"] .cmp-head .p2, .cmp[data-show="3"] .cmp-head .p3 { display: grid; }
  .cmp[data-show="1"] .cmp-row > .c1, .cmp[data-show="2"] .cmp-row > .c2, .cmp[data-show="3"] .cmp-row > .c3 { display: flex; }
  .cmp .cmp-row > div:not(:first-child) { border-left: 1px solid var(--line); }
  .cmp-row > .lbl { padding-left: 16px; font-size: 13.5px; }
  .cmp-row > div { padding: 12px 14px; min-height: 48px; font-size: 13.5px; }
  .cmp-group { padding: 14px 16px; }
  .cmp-foot > .lbl { display: none; }
  .cmp-foot > div:not(.lbl) { grid-column: 1 / -1; border-left: 0 !important; }
  .cmp-head { position: static; }
}
.cmp { scroll-margin-top: 80px; }
@media (max-width: 360px) { .cmp-pick button { font-size: 11.5px; white-space: nowrap; letter-spacing: -.01em; } }

/* "How it works" dropdown: the five steps */
.nav-step-n { display: none; }
.nav-sub-ic.ic-step { background: var(--grad-hero); }
.nav-sub-ic.ic-step.is-first { background: var(--grad-orange); }
@media (max-width: 1100px) {
  .nav-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--grad-hero); color: #fff; font: 800 11px/1 var(--font-head); font-style: normal; vertical-align: 1px; }
  .nav-sub-steps li:first-child .nav-step-n { background: var(--grad-orange); }
}
.nav-sub-ic.ic-price { background: var(--grad-hero); }
.nav-sub-ic.ic-price.is-allin { background: var(--grad-orange); }
.main-nav .nav-sub li a.is-allin b { color: #ff6a1a; }
.nav-sub-ic.ic-price { background: var(--grad-hero); }
.nav-sub-ic.ic-price.is-allin { background: var(--grad-orange); }
.main-nav .nav-sub li a.is-allin b { color: #ff6a1a; }

/* Compare tables: the big plan header scrolls away; a slim bar with names and prices takes its place */
.cmp-head { position: static; }
.cmp-mini { grid-column: 1 / -1; position: sticky; top: 64px; z-index: 4; height: 0; }
@media (max-width: 1100px) { .cmp-mini { top: 56px; } }
.cmp-mini-in { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px -18px rgba(42, 15, 107, .55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.cmp.is-stuck .cmp-mini-in { opacity: 1; transform: none; pointer-events: auto; }
.cmp-mini-in > span { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px 10px; font: 800 14px/1.2 var(--font-head); color: var(--ink); border-left: 1px solid var(--line); }
.cmp-mini-in > span:first-child { justify-content: flex-start; padding-left: 30px; border-left: 0; font: 700 12px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: #ff6a1a; }
.cmp-mini-in > span b { font-weight: 800; color: var(--purple-700); }
[data-theme="dark"] .cmp-mini-in > span b { color: #b8acff; }
.cmp-mini-in > span::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.cmp-mini-in > .m1::before { background: linear-gradient(90deg, #0b5563, #0f7a50); }
.cmp-mini-in > .m2 { background: color-mix(in srgb, var(--purple-50) 70%, var(--surface)); }
[data-theme="dark"] .cmp-mini-in > .m2 { background: color-mix(in srgb, #6a3df0 10%, var(--surface)); }
.cmp-mini-in > .m2::before { background: var(--grad-hero); }
.cmp-mini-in > .m3::before { background: linear-gradient(90deg, #8f1f45, #ad3b0b); }
@media (max-width: 760px) {
  .cmp-mini-in { grid-template-columns: 1fr; }
  .cmp-mini-in > span:first-child, .cmp-mini-in > span.m1, .cmp-mini-in > span.m2, .cmp-mini-in > span.m3 { display: none; }
  .cmp[data-show="1"] .cmp-mini-in > .m1, .cmp[data-show="2"] .cmp-mini-in > .m2, .cmp[data-show="3"] .cmp-mini-in > .m3 { display: flex; border-left: 0; }
}

/* Package cards: blue / SEORAPID blue / orange (2026-11-08) */
.package--launch { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); box-shadow: 0 30px 60px -28px rgba(37, 99, 235, .6); }
.package--launch .btn-light { color: #1e3a8a; }
.package--scale { background: linear-gradient(135deg, #f26a1b 0%, #c2410c 100%); box-shadow: 0 30px 60px -28px rgba(194, 65, 12, .6); }
.package--scale .package-sub { color: rgba(255, 255, 255, .92); }
.package--scale .package-price { border-bottom-color: rgba(255, 255, 255, .3); }
.package--scale .package-price .package-extra { color: #fff; }
.package--scale .btn-light { background: #fff; color: #c2410c; }
.package--scale .btn-light:hover { color: #ff5a1f; }
.package-tag--blue { background: var(--grad-hero); box-shadow: 0 10px 22px -10px rgba(42, 15, 107, .9); }
/* All in: middle card back to SEORAPID blue so the orange stays on the right */
.pkg-panel--allin .package--featured { background: var(--grad-hero); box-shadow: 0 30px 60px -24px rgba(42, 15, 107, .6); }
.pkg-panel--allin .package--featured .package-tag { background: var(--grad-orange); }
.pkg-panel--allin .package--featured .package-price .package-extra { color: #ffb37a; }
.pkg-panel--allin .package--featured .btn-orange { background: var(--grad-orange); color: #fff; box-shadow: 0 14px 28px -12px rgba(255, 90, 31, .7); }
.pkg-panel--allin .package--featured li::before { background-color: rgba(255, 255, 255, .16); }
/* comparison tables follow the same colours */
.cmp-plan.p1::before, .cmp-mini-in > .m1::before, .p1 .cmp-ico { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.cmp-plan.p3::before, .cmp-mini-in > .m3::before, .p3 .cmp-ico { background: linear-gradient(135deg, #f26a1b, #c2410c); }
.cmp-plan.p3 .btn-line { border-color: #ff6a1a; color: #d0440f; }
[data-theme="dark"] .cmp-plan.p3 .btn-line { color: #ff9a5c; }
.cmp-foot .c3 .btn-line { border-color: #ff6a1a; color: #d0440f; }
[data-theme="dark"] .cmp-foot .c3 .btn-line { color: #ff9a5c; }

/* Compare tables: explanation tooltips */
.cmp-row > .lbl { gap: 8px; }
.cmp-info { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-left: auto; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-700); cursor: help; transition: background .2s, color .2s; }
.cmp-info svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-info:hover, .cmp-info:focus-visible, .cmp-info[aria-expanded="true"] { background: var(--grad-orange); color: #fff; outline: none; }
[data-theme="dark"] .cmp-info { background: rgba(255, 255, 255, .08); color: #b8acff; }
.cmp-tip { position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 12px; background: var(--grad-hero); color: #fff; font: 500 13.5px/1.5 var(--font-body); box-shadow: 0 18px 40px -14px rgba(21, 18, 58, .65); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.cmp-tip.is-on { opacity: 1; transform: none; }
.cmp-tip b { display: block; margin-bottom: 4px; font: 800 13px/1.3 var(--font-head); color: #ffb37a; }
.cmp-tip::after { content: ""; position: absolute; left: var(--ax, 50%); width: 12px; height: 12px; margin-left: -6px; background: #3b1fa8; transform: rotate(45deg); }
.cmp-tip.is-below::after { top: -5px; } .cmp-tip:not(.is-below)::after { bottom: -5px; }

/* Orange card: brighter orange, SEORAPID blue button (2026-11-08) */
.package--scale { background: linear-gradient(150deg, #ff8a1a 0%, #ff5a1f 55%, #e2431a 100%); box-shadow: 0 34px 70px -28px rgba(255, 90, 31, .7); }
.package--scale li::before { background-color: rgba(255, 255, 255, .22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.package--scale .package-sub, .package--scale li { color: rgba(255, 255, 255, .96); }
.package--scale .btn-light, .package--scale .btn-light:hover { background: var(--grad-hero); color: #fff; box-shadow: 0 14px 28px -12px rgba(42, 15, 107, .8); }
.package--scale .btn-light:hover { filter: brightness(1.12); }
.cmp-plan.p3::before, .cmp-mini-in > .m3::before, .p3 .cmp-ico { background: linear-gradient(150deg, #ff8a1a, #ff5a1f 55%, #e2431a); }

/* Compare tables: blue buttons on the orange plan, solid orange group icons */
.cmp-plan.p3 .btn-line, .cmp-foot .c3 .btn-line, [data-theme="dark"] .cmp-plan.p3 .btn-line, [data-theme="dark"] .cmp-foot .c3 .btn-line { background: var(--grad-hero); border: 0; color: #fff; box-shadow: 0 12px 24px -12px rgba(42, 15, 107, .8); }
.cmp-plan.p3 .btn-line:hover, .cmp-foot .c3 .btn-line:hover { color: #fff; filter: brightness(1.12); }
.cmp-group i { width: 32px; height: 32px; border-radius: 10px; background: var(--grad-orange); box-shadow: 0 8px 18px -8px rgba(255, 90, 31, .85); }
.cmp-group svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 2.4; }
.cmp-group { padding-top: 13px; padding-bottom: 13px; gap: 12px; }
/* "Compare every feature" / "Hide the full comparison" button in SEORAPID orange */
.cmp-toggle button, [data-theme="dark"] .cmp-toggle button { background: var(--grad-orange); border: 0; color: #fff; padding: 16px 28px; box-shadow: 0 14px 28px -12px rgba(255, 90, 31, .7); }
.cmp-toggle button:hover, [data-theme="dark"] .cmp-toggle button:hover { background: var(--grad-orange); filter: brightness(1.08); }

/* ===== Examples: service tabs + SEO / PPC / Social / All in / Extras mock-ups (2026-11-08) ===== */
.ex-tabs { margin-top: -6px; }
.ex-intro { margin-bottom: 26px; }
.xm { background: #fff; color: #202124; font-family: var(--font-body); font-size: max(12px, 1.3cqw); line-height: 1.45; min-height: 100%; }
.xm.xm-b { background: #f6f6f7; }
.xm svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; }
.xm b { font-weight: 700; }
.xm-pad { padding: 1.4em 2em; }
.xm-sbar { display: flex; align-items: center; gap: .8em; margin: 1.2em 2em 0; padding: .75em 1.2em; border: 1px solid #dfe1e5; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32,33,36,.12); }
.xm-sbar svg { margin-left: auto; color: #4285f4; width: 1.2em; height: 1.2em; }
.xm-dots { display: inline-flex; gap: 3px; } .xm-dots i { width: .55em; height: .55em; border-radius: 50%; background: #4285f4; } .xm-dots i:nth-child(2) { background: #ea4335; } .xm-dots i:nth-child(3) { background: #fbbc05; } .xm-dots i:nth-child(4) { background: #34a853; }
.xm-q { font-size: 1.05em; }
.xm-stars { display: inline-flex; gap: 1px; vertical-align: -.1em; } .xm-stars i { color: #dadce0; } .xm-stars i.on { color: #fbbc05; } .xm-stars svg { fill: currentColor; stroke: none; width: .95em; height: .95em; }
.xm-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #e3e5e8; border-radius: .9em; overflow: hidden; margin-bottom: 1.2em; background: #fff; }
.xm-mapimg { grid-row: span 3; position: relative; min-height: 9em; background: linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px) 0 0 / 2.2em 2.2em, linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px) 0 0 / 2.2em 2.2em, linear-gradient(135deg, #e8efe4, #dfe8f1); }
.xm-mapimg::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: .5em; background: #fff; transform: rotate(-12deg); }
.xm-mapimg i { position: absolute; width: 1.1em; height: 1.1em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ea4335; z-index: 1; }
.xm-mapimg i.you { background: var(--c1, #3b1fa8); width: 1.6em; height: 1.6em; box-shadow: 0 0 0 .3em rgba(255,255,255,.8); }
.xm-pl { padding: .55em .9em; border-bottom: 1px solid #eef0f2; } .xm-pl:last-child { border-bottom: 0; }
.xm-pl b { display: block; color: #1a0dab; font-size: .98em; } .xm-pl small { display: block; color: #70757a; font-size: .85em; }
.xm-pl.is-you { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--c1, #3b1fa8); }
.xm-org { display: grid; grid-template-columns: 1.7em 1fr; gap: .6em; padding: .7em 0; border-bottom: 1px solid #eef0f2; }
.xm-org.is-you { background: #f2f7ff; margin: 0 -.8em; padding: .8em; border-radius: .7em; border: 0; box-shadow: inset 3px 0 0 var(--c1, #3b1fa8); }
.xm-pos { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: #eef0f3; color: #5f6368; font-weight: 700; font-size: .85em; }
.xm-org.is-you .xm-pos { background: var(--c1, #3b1fa8); color: #fff; }
.xm-org small, .xm-ad small { color: #4d5156; font-size: .82em; } .xm-org b { display: block; color: #1a0dab; font-size: 1.12em; font-weight: 500; } .xm-org p, .xm-ad p { margin: .15em 0 0; color: #4d5156; font-size: .92em; }
.xm-rich { color: #70757a; font-size: .85em; margin-top: .2em; }
.xm-links { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; } .xm-links span { padding: .3em .8em; border: 1px solid #dadce0; border-radius: 999px; color: #1a0dab; font-size: .85em; background: #fff; }
.xm-miss { margin-top: 1em; padding: .9em 1.1em; border: 2px dashed #e0475e; border-radius: .8em; color: #b3243b; background: #fff5f6; }
.xm-miss span { display: block; color: #6b3a42; font-size: .9em; margin-top: .2em; }
.xm-ai { margin-bottom: 1.1em; padding: .9em 1.1em; border-radius: .9em; background: linear-gradient(135deg, #eef3ff, #f6efff); border: 1px solid #dfe3fb; }
.xm-ai span { font-weight: 700; font-size: .82em; color: #5b45d6; } .xm-ai p { margin: .2em 0 0; } .xm-ai b { color: #1a0dab; }
.xm-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .5em; margin: 0 2em 1.6em; }
.xm-pad .xm-strip { margin: 0; }
.xm-strip span { padding: .7em .9em; border-radius: .7em; font-size: .9em; text-align: center; }
.xm-strip b { display: block; font: 800 1.45em/1.15 var(--font-head); }
.xm-strip.bad span { background: #fff1f2; color: #8a2a3a; } .xm-strip.bad b { color: #e0475e; }
.xm-strip.good span { background: #ecfbf4; color: #11624a; } .xm-strip.good b { color: #14a37a; }
.xm-ad { padding: .9em 0; border-bottom: 1px solid #eef0f2; }
.xm-ad em { font-style: normal; font-weight: 700; color: #202124; margin-right: .4em; }
.xm-ad b { display: block; color: #1a0dab; font-size: 1.12em; font-weight: 500; margin-top: .1em; }
.xm-ad.is-weak { opacity: .85; } .xm-ad.is-weak b { color: #5b5f9e; }
.xm-ad.is-you { margin: .3em -.8em; padding: 1em .8em; border-radius: .8em; background: #f2f7ff; border: 0; box-shadow: inset 3px 0 0 var(--c1, #3b1fa8); }
.xm-call { display: inline-flex; align-items: center; gap: .5em; margin-top: .7em; padding: .5em 1em; border-radius: 999px; background: var(--c1, #3b1fa8); color: #fff; font-weight: 700; font-size: .9em; }
.xm-note { margin-top: .9em; padding: .6em .9em; border-radius: .6em; background: #fff1f2; color: #8a2a3a; font-size: .88em; }
.xm-note.good { background: #ecfbf4; color: #11624a; }
.xm-ig { max-width: 34em; margin: 0 auto; }
.xm-prof { display: flex; gap: 1.2em; align-items: center; margin-bottom: 1em; }
.xm-prof p { margin: .3em 0 0; font-size: .92em; color: #444; } .xm-prof a { color: #00376b; font-weight: 600; }
.xm-av { flex: 0 0 auto; width: 4.6em; height: 4.6em; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.2em/1 var(--font-head); background: linear-gradient(135deg, var(--c1, #3b1fa8), var(--c2, #ff6a1a)); box-shadow: 0 0 0 .2em #fff, 0 0 0 .35em var(--c2, #ff6a1a); }
.xm-av.old { background: #b8b8bd; box-shadow: none; }
.xm-av.sm { width: 2.4em; height: 2.4em; font-size: .85em; box-shadow: none; }
.xm-cnt { display: flex; gap: 1.1em; font-size: .92em; margin-top: .2em; color: #444; } .xm-cnt b { color: #111; }
.xm-tick { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: #0095f6; color: #fff; vertical-align: -.1em; } .xm-tick svg { width: .75em; height: .75em; stroke-width: 3.5; }
.xm-hl { display: flex; gap: 1.1em; margin: .2em 0 1em; } .xm-hl span { display: grid; justify-items: center; gap: .3em; font-size: .78em; color: #333; }
.xm-hl i { width: 3em; height: 3em; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 .15em #fff, 0 0 0 .3em #dbdbdb; }
.xm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.xm-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.xm-tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--p, 50%) 50%; display: block; }
.xm-tile.old img { filter: grayscale(.6) brightness(.85) blur(.6px); }
.xm-tile span { position: absolute; left: .4em; right: .4em; bottom: .4em; padding: .25em .4em; background: rgba(0,0,0,.55); color: #fff; font-size: .75em; }
.xm-tile .cap { left: 0; right: 0; bottom: 0; padding: .6em; background: linear-gradient(transparent, var(--c1)); font: 800 .85em/1.2 var(--font-head); }
.xm-tile.brand { display: grid; place-items: center; padding: .6em; text-align: center; background: linear-gradient(140deg, var(--c1), color-mix(in srgb, var(--c1) 60%, #000)); }
.xm-tile.brand span { position: static; background: none; padding: 0; color: #fff; font: 800 1em/1.2 var(--font-head); }
.xm-tile.brand::after { content: ""; position: absolute; right: -1.2em; top: -1.2em; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--c2); opacity: .9; }
.xm-h { margin: 0 0 .3em; font: 800 1.4em/1.2 var(--font-head); color: #202124; }
.xm-sub { margin: 0 0 1em; color: #5f6368; }
.xm-list { display: grid; gap: .5em; }
.xm-list > div { display: grid; grid-template-columns: 1.8em 8em 1fr; align-items: center; gap: .6em; padding: .75em .9em; border-radius: .7em; background: #fff; border: 1px solid #ececef; }
.xm-list i { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: #fde7ea; color: #e0475e; } .xm-list span { color: #5f6368; font-size: .92em; }
.xm-dash { background: #f6f5fc; }
.xm-dh { display: flex; align-items: center; gap: .8em; margin-bottom: 1em; } .xm-dh small { display: block; color: #6b6890; font-size: .82em; }
.xm-dh em { margin-left: auto; font-style: normal; padding: .35em .8em; border-radius: 999px; background: linear-gradient(135deg, #ff8a1a, #ff5a1f); color: #fff; font-weight: 700; font-size: .8em; }
.xm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin-bottom: .8em; }
.xm-kpis > div { padding: .8em; border-radius: .8em; background: #fff; box-shadow: 0 6px 16px -12px rgba(42,15,107,.5); }
.xm-kpis b { display: block; font: 800 1.6em/1.1 var(--font-head); color: #2a0f6b; } .xm-kpis span { display: block; font-size: .85em; color: #5f5c80; } .xm-kpis em { font-style: normal; font-weight: 700; font-size: .8em; color: #14a37a; }
.xm-chart { padding: .8em; border-radius: .8em; background: #fff; margin-bottom: .8em; } .xm-chart small { color: #6b6890; font-size: .82em; }
.xm-chart svg { display: block; width: 100%; height: 6em; margin-top: .4em; } .xm-chart .ln { fill: none; stroke: #3b1fa8; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .xm-chart .ar { fill: rgba(59,31,168,.12); }
.xm-ch { display: grid; gap: .45em; padding: .8em; border-radius: .8em; background: #fff; }
.xm-ch > div { display: grid; grid-template-columns: 7.5em 1fr 2.6em; align-items: center; gap: .6em; font-size: .9em; }
.xm-ch i { height: .55em; border-radius: 999px; background: #eceaf8; overflow: hidden; } .xm-ch i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b1fa8, #ff6a1a); } .xm-ch em { font-style: normal; font-weight: 700; text-align: right; }
.xm-form { display: grid; gap: .5em; max-width: 26em; padding: 1em; border: 1px solid #d9d9de; background: #fff; }
.xm-form span { padding: .55em .7em; border: 1px solid #c9c9cf; color: #9a9aa2; font-size: .9em; } .xm-form span.big { height: 4.5em; }
.xm-form em { justify-self: start; padding: .4em 1.4em; background: #8a8a92; color: #fff; font-style: normal; } .xm-form small { color: #8a2a3a; }
.xm-calls { margin-top: 1.2em; max-width: 26em; padding: 1em; border-radius: .9em; background: #1f1f24; color: #fff; }
.xm-calls > div { display: flex; align-items: center; gap: .6em; padding: .55em 0; border-top: 1px solid rgba(255,255,255,.1); color: #ff8a9a; }
.xm-calls i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(255,90,110,.18); }
.xm-ex { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2em; align-items: start; }
.xm-chat { border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -18px rgba(20,20,60,.45); border: 1px solid #ececf2; padding-bottom: .8em; }
.xm-chead { display: grid; grid-template-columns: auto 1fr; column-gap: .7em; align-items: center; padding: .8em 1em; background: var(--c1); color: #fff; margin-bottom: .6em; }
.xm-chead .xm-av { grid-row: span 2; } .xm-chead small { opacity: .8; font-size: .8em; }
.xm-msg { max-width: 82%; margin: .4em .9em; padding: .55em .85em; border-radius: 1em 1em 1em .3em; background: #f1f1f6; font-size: .92em; }
.xm-msg.me { margin-left: auto; border-radius: 1em 1em .3em 1em; background: var(--c1); color: #fff; }
.xm-msg.ok { background: #ecfbf4; color: #11624a; font-weight: 600; }
.xm-rec { padding: 1em 1.1em; border-radius: 1em; background: #fff; border: 1px solid #ececf2; box-shadow: 0 14px 34px -18px rgba(20,20,60,.45); }
.xm-rec b { display: flex; align-items: center; gap: .5em; color: #11624a; } .xm-rec span { display: block; margin-top: .3em; font-size: .85em; color: #6b6b78; } .xm-rec p { margin: .5em 0 0; font-size: .92em; }
@container (max-width: 600px) {
  .xm { font-size: 13px; }
  .xm-pad { padding: 1.1em 1.1em; } .xm-sbar { margin: 1em 1.1em 0; } .xm-strip { margin: 0 1.1em 1.2em; }
  .xm-map { grid-template-columns: 1fr; } .xm-mapimg { grid-row: auto; min-height: 7em; }
  .xm-kpis { grid-template-columns: repeat(2, 1fr); }
  .xm-ex { grid-template-columns: 1fr; }
  .xm-list > div { grid-template-columns: 1.8em 1fr; } .xm-list span { grid-column: 2; }
  .xm-ch > div { grid-template-columns: 6.5em 1fr 2.4em; }
  .xm-av { width: 3.6em; height: 3.6em; } .xm-cnt { gap: .7em; font-size: .85em; }
  .xm-hl { gap: .8em; }
}
.ba-stack.xm-stack { min-height: 100%; }
.xm svg { display: inline-block; }
.xm { position: relative; isolation: isolate; }

/* Examples: smaller laptop in the middle, Before notes on the left, After notes on the right */
.before-after .container { max-width: 1400px; }
.ba-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "b m a"; gap: 44px; align-items: center; }
.ba-stage > .ba-mac { grid-area: m; width: 720px; max-width: 100%; margin: 0; transition: width .45s ease; }
.ba-stage > .ba-mac:has(> .ba.is-mobile) { width: 404px; }
.ba-side--before { grid-area: b; } .ba-side--after { grid-area: a; }
.ba-side { position: relative; padding: 22px 22px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: opacity .3s ease, border-color .3s ease, transform .3s ease; }
.ba-side[hidden] { display: none; }
.ba-side.is-dim { opacity: .55; }
.ba-side--before.is-active { border-color: #e0475e; }
.ba-side--after.is-active { border-color: #2563eb; }
.ba-side-head { display: grid; gap: 8px; margin-bottom: 14px; }
.ba-side-tag { justify-self: start; padding: 5px 11px; border-radius: 999px; font: 800 11px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #55527a; }
.ba-side--after .ba-side-tag { background: var(--grad-hero); }
.ba-side h3 { margin: 0; font: 800 20px/1.2 var(--font-head); color: var(--ink); }
.ba-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ba-side-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--ink-600, var(--ink)); }
.ba-side-list .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 12px/1 var(--font-head); color: #fff; background: #e0475e; }
.ba-side--after .ba-side-list .n { background: var(--grad-hero); }
.ba-side-list:not(.is-num) .n { background: rgba(224, 71, 94, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0475e' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat; }
.ba-side--after .ba-side-list:not(.is-num) .n { background: rgba(20, 163, 122, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314a37a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.ba-side-res { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; background: rgba(224, 71, 94, .1); color: var(--ink); }
.ba-side-res b { display: block; font: 800 24px/1.1 var(--font-head); color: #e0475e; }
.ba-side--after .ba-side-res { background: rgba(20, 163, 122, .12); }
.ba-side--after .ba-side-res b { color: #14a37a; }
.ba-side-btn { margin-top: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 13px/1 var(--font-body); cursor: pointer; }
.ba-side-btn:hover { border-color: currentColor; }
.ba-side--after .ba-side-btn { background: linear-gradient(135deg, #ff8a1a, #ff5a1f); border-color: transparent; color: #fff; }
.ba-side-btn:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 2px; }
@media (max-width: 1240px) {
  .ba-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "m m" "b a"; gap: 22px; }
  .ba-stage > .ba-mac { justify-self: center; }
}
@media (max-width: 700px) {
  .ba-stage { grid-template-columns: 1fr; grid-template-areas: "m" "b" "a"; gap: 14px; }
  .ba-side { padding: 18px; }
  .ba-side h3 { font-size: 18px; }
}

/* Mock-ups: the same blocks in the same place on both sides, numbered to match the notes */
.xm-blk { position: relative; }
.xm-n { position: absolute; top: .5em; right: .5em; z-index: 3; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font: 800 .8em/1 var(--font-head); color: #fff; background: #e0475e; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.xm-a .xm-n { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.xm-seo .xm-ai { height: 6.6em; overflow: hidden; padding-right: 2.6em; }
.xm-seo .xm-ai p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xm-seo .xm-ai b { color: #1a0dab; }
.xm-b .xm-ai { background: #f1f2f4; border-color: #e3e5e8; }
.xm-seo .xm-pl b, .xm-seo .xm-pl small, .xm-seo .xm-org b, .xm-seo .xm-org p, .xm-seo .xm-org small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-seo .xm-org > div { min-width: 0; }
.xm-seo .xm-orgs { margin-bottom: .2em; }
.xm-seo .xm-orgs .xm-org { padding: .7em .8em; margin: 0 -.8em; border-radius: .7em; }
.xm-seo .xm-orgs .xm-org.is-you { border: 0; }
.xm-where { margin-top: .9em; padding: .8em 1.1em; border-radius: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-where.bad { border: 2px dashed #e0475e; color: #b3243b; background: #fff5f6; }
.xm-where.good { border: 2px solid #14a37a; color: #11624a; background: #ecfbf4; }
.xm-ppc .xm-ad2 { padding: 1em 1em .9em; border-radius: .9em; border: 1px solid #e3e5e8; background: #fff; }
.xm-ppc .xm-ad2.is-you { background: #f2f7ff; border-color: #cfe0ff; box-shadow: inset 3px 0 0 var(--c1, #3b1fa8); }
.xm-ad2 small { color: #4d5156; font-size: .82em; display: block; margin-top: .45em; }
.xm-ad2 b { display: block; color: #1a0dab; font-size: 1.12em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.6em; }
.xm-ad2 p { margin: .2em 0 0; color: #4d5156; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-ad2 .xm-links { flex-wrap: nowrap; overflow: hidden; }
.xm-ad2 .xm-links span { white-space: nowrap; }
.xm-adpos { display: inline-block; padding: .25em .7em; border-radius: 999px; font-weight: 700; font-size: .8em; }
.xm-adpos.bad { background: #fde7ea; color: #b3243b; } .xm-adpos.good { background: #e3f0ff; color: #1e3a8a; }
.xm .miss { color: #c23a50 !important; font-style: italic; }
.xm-links .miss { border-style: dashed !important; border-color: #f0a7b3 !important; background: #fff5f6 !important; }
.xm-call.miss { background: #fff5f6; border: 1px dashed #f0a7b3; font-weight: 600; }
.xm-land { margin-top: 1em; padding: .8em; border-radius: .9em; border: 1px solid #e3e5e8; background: #fff; height: 13.5em; overflow: hidden; }
.xm-lurl { display: block; font-size: .8em; color: #5f6368; margin-bottom: .6em; padding-right: 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-lp { border-radius: .6em; overflow: hidden; border: 1px solid #ececf0; height: 10.6em; }
.xm-lh { display: flex; justify-content: space-between; align-items: center; padding: .55em .8em; font-weight: 800; font-size: .85em; background: var(--c1, #3b1fa8); color: #fff; }
.xm-lh span { display: inline-flex; gap: .4em; align-items: center; font-weight: 700; }
.xm-lp h5 { margin: .7em .8em .2em; font: 800 1.15em/1.2 var(--font-head); color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-lp .xm-rich { margin: 0 .8em; } .xm-lp p { margin: .2em .8em 0; font-size: .9em; color: #3c4043; }
.xm-lb { display: flex; gap: .5em; margin: .6em .8em 0; } .xm-lb span { display: inline-flex; gap: .4em; align-items: center; padding: .45em .9em; border-radius: 999px; background: var(--c1, #3b1fa8); color: #fff; font-weight: 700; font-size: .85em; } .xm-lb .alt { background: var(--c2, #ff6a1a); color: #111; }
.xm-land.old .xm-lp { background: #f4f4f1; font-family: Georgia, "Times New Roman", serif; }
.xm-land.old .xm-lh { background: #6d6d72; font-family: Georgia, serif; }
.xm-land.old h5 { font-family: Georgia, serif; font-weight: 400; color: #333; }
.xm-land.old i { display: block; height: .55em; margin: .55em .8em 0; border-radius: 2px; background: #d7d7d3; } .xm-land.old i.s { width: 55%; }
.xm-land.old em { display: block; margin: .7em .8em; color: #3a5a9a; font-size: .85em; text-decoration: underline; }
.xm-ig .xm-prof { padding-right: 2.2em; min-height: 6.2em; }
.xm-ig .xm-prof p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-ig .xm-prof > div { min-width: 0; }
.xm-ig .xm-hl { min-height: 4.6em; padding-right: 2.2em; }
.xm-hl.old i { background: none; border: 2px dashed #c9c9cf; box-shadow: none; }
.xm-hl.old span { color: #9a9aa2; }
.xm-gridw .xm-n { top: .4em; right: .4em; }
.xm-ig .xm-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 600px) {
  .xm-seo .xm-ai { height: 8.2em; }
  .xm-seo .xm-ai p { -webkit-line-clamp: 4; }
  .xm-land { height: 14.5em; }
  .xm-lp { height: 11.4em; }
  .xm-lb span { padding: .4em .7em; }
}
.xm-seo .xm-rich, .xm-ppc .xm-rich, .xm-lp .xm-rich { height: 1.45em; line-height: 1.45em; white-space: nowrap; overflow: hidden; }
.xm-seo .xm-rich .xm-stars, .xm-ppc .xm-rich .xm-stars { vertical-align: -.12em; }
@container (max-width: 600px) { .xm-strip span { min-height: 5.4em; display: flex; flex-direction: column; justify-content: center; } }
@media (max-width: 1240px) { .ba-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 700px) { .ba-stage { grid-template-columns: minmax(0, 1fr); } .ba-stage > .ba-mac, .ba-stage > .ba-mac:has(> .ba.is-mobile) { width: 100%; } }
.xm-seo .xm-orgs .xm-org.is-you { border-bottom: 1px solid transparent; }
.xm-ppc .xm-call { border: 1px solid transparent; }
.xm-ig .xm-cnt { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.xm-ig .xm-prof > div > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Before/After tags are buttons; SEO, PPC and Social switch the whole screen instead of a half-and-half wipe */
.ba-tag { pointer-events: auto; cursor: pointer; border: 0; transition: opacity .25s ease, transform .2s ease; }
.ba-tag:hover { transform: translateY(-1px); }
.ba-tag:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 2px; }
.ba.is-toggle .ba-handle, .ba.is-toggle .ba-range { display: none; }
.ba.is-toggle .ba-tag { opacity: .55; font-size: 13px; padding: 8px 16px; }
.ba.is-toggle .ba-tag.is-on { opacity: 1; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 18px -6px rgba(0, 0, 0, .45); }
.ba.is-toggle .ba-tag-after:not(.is-on) { background: linear-gradient(135deg, #ff8a1a, #ff5a1f); opacity: 1; animation: baNudge 2.4s ease-in-out 1s infinite; }
@keyframes baNudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ba.is-toggle .ba-tag-after:not(.is-on) { animation: none; } }
.ba-side { cursor: default; }
.xm-ai .xm-n { color: #fff; font-size: .8em; font-weight: 800; }
.ba-side.is-dim { opacity: 1; }
.ba-side.is-dim > :not(.ba-side-btn) { opacity: .5; transition: opacity .3s ease; }
.ba-side > * { transition: opacity .3s ease; }
.xm.xm-b, .xm.xm-a { padding-bottom: 3.6em; }
@container (max-width: 600px) {
  .xm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
  .xm-strip span { min-height: 4.8em; padding: .6em .35em; font-size: .82em; }
}
/* Laptop screen keeps the MacBook 16:10 ratio (browser bar + page) */
.ba-mac > .ba:not(.is-mobile) .ba-view { height: auto; aspect-ratio: 16 / 9.1; }
/* Wide screen: Google and Instagram laid out like on a real desktop, so a 16:10 screen fits it all */
.xm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.2em; align-items: start; }
.xm-row .xm-map { grid-template-columns: 1fr; margin: 0; }
.xm-row .xm-mapimg { grid-row: auto; min-height: 6.5em; }
.xm-seo .xm-orgs .xm-org:first-of-type { padding-top: .3em; }
.xm-ppc .xm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.xm-ppc .xm-land { margin-top: 0; height: auto; }
.xm-ppc .xm-lp { height: auto; min-height: 10.6em; }
.xm-ppc .xm-ad2 .xm-links { flex-wrap: wrap; max-height: 4.2em; }
.xm-ig { max-width: 48em; }
.xm-ig .xm-grid { grid-template-columns: repeat(6, 1fr); }
.xm-ig .xm-tile .cap, .xm-ig .xm-tile.brand span { font-size: .72em; }
.xm-ig .xm-tile span { font-size: .62em; }
@container (max-width: 600px) {
  .xm-row, .xm-ppc .xm-row { grid-template-columns: 1fr; }
  .xm-ppc .xm-land { margin-top: 0; }
  .xm-row .xm-mapimg { min-height: 5em; }
  .xm-seo .xm-orgs .xm-org:nth-of-type(3) { display: none; }
  .xm-ig .xm-grid { grid-template-columns: repeat(3, 1fr); }
  .xm-ig .xm-tile .cap, .xm-ig .xm-tile.brand span { font-size: .85em; }
}
.ba-mac > .ba:not(.is-mobile) .ba-view { aspect-ratio: 16 / 8.95; }
.xm-seo .xm-ai { height: 4.9em; padding-top: .7em; padding-bottom: .7em; }
.xm-seo .xm-ai p { -webkit-line-clamp: 2; }
.xm-row .xm-mapimg { min-height: 5.5em; }
.xm.xm-b, .xm.xm-a { padding-bottom: 2.8em; }
.xm-seo.xm-pad, .xm-ppc.xm-pad, .xm-ig.xm-pad { padding-top: 1em; padding-bottom: 1em; }
.xm-ppc .xm-ad2 .xm-links { flex-wrap: nowrap; max-height: none; }
@container (max-width: 600px) { .xm-seo .xm-ai { height: 6.4em; } .xm-seo .xm-ai p { -webkit-line-clamp: 3; } }
/* AI box tall enough for its lines; content always ends above the Before/After buttons */
.xm-seo .xm-ai { height: 5.9em; }
@container (max-width: 600px) {
  .xm-seo .xm-ai { height: 7.4em; }
  .xm.xm-b, .xm.xm-a { padding-bottom: 4.6em; }
  .xm-seo .xm-orgs .xm-org:last-of-type { border-bottom: 0; }
}

/* ===== Phone usability pass ===== */
/* Chat button steps aside while a button or link sits under it */
.sr-fab { transition: transform .25s ease, opacity .25s ease; }
.is-tucked .sr-fab { opacity: 0; transform: translateX(30px) scale(.7); pointer-events: none; }
@media (max-width: 640px) {
  .sr-fab { width: 54px; height: 54px; }
  .sr-fab svg { width: 30px; height: 30px; }
}
/* Swipe rows: the next card peeks in, so it is clear there is more to swipe */
@media (max-width: 640px) {
  .service-grid > .reveal, .addon-grid > .reveal, .package-grid > .reveal { opacity: 1; transform: none; }
}
/* Menu on phones and tablets: sections fold open with the arrow, so the list stays short */
@media (max-width: 1100px) {
  .main-nav .nav-has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav .nav-has-sub > a { flex: 1 1 auto; }
  .main-nav .nav-sub-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--bg-soft); color: var(--ink); cursor: pointer; }
  .main-nav .nav-sub-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .main-nav .nav-has-sub.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
  .main-nav .nav-has-sub > ul.nav-sub { display: none; flex-basis: 100%; margin-top: 4px; }
  .main-nav .nav-has-sub.is-open > ul.nav-sub { display: flex; }
}
/* Footer on phones: link lists side by side instead of one long column */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 26px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid > :last-child:nth-child(4) { grid-column: 1 / -1; }
}
/* Services menu jumps to a card: brief highlight */
.service-card { scroll-margin-top: 110px; }
.service-card.is-flash { animation: svcFlash 1.8s ease; }
@keyframes svcFlash { 0%, 60% { box-shadow: 0 0 0 3px #ff6a1f, 0 20px 40px -20px rgba(255, 90, 31, .6); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .service-card.is-flash { animation: none; outline: 3px solid #ff6a1f; } }
/* Phone menu: every submenu item gets the same small icon tile as on desktop */
@media (max-width: 1100px) {
  .main-nav .nav-sub li a.nav-sub-icon:not(.z):not(.z):not(.z):not(.z) { display: flex; align-items: center; gap: 12px; }
  .main-nav .nav-sub .nav-sub-ic { position: static; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: #fff; box-shadow: 0 4px 10px -4px rgba(21, 18, 58, .45); }
  .main-nav .nav-sub .nav-sub-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .main-nav .nav-step-n { display: none; }
}
/* Services menu: Free audit first, in orange */
.nav-sub-ic.ic-price.is-hot { background: var(--grad-orange); }
.main-nav .nav-sub li a.is-hot b { color: #ff6a1a; }

/* ===== About us ===== */
.about { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.about-copy .eyebrow { margin-bottom: 12px; }
.about-copy h2 { margin: 0 0 18px; font: 800 clamp(30px, 3.6vw, 44px)/1.1 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.about-copy p { margin: 0 0 14px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.about-copy .about-lead { color: var(--ink); font-size: 19px; }
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-values li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.about-values li:first-child { background: var(--grad-hero); border-color: transparent; color: #fff; }
.about-values i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--grad-hero); color: #fff; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .7); }
.about-values li:first-child i { background: var(--grad-orange); box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .8); }
.about-values svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-values b { font: 800 17px/1.25 var(--font-head); color: var(--ink); }
.about-values span { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.about-values li:first-child b { color: #fff; } .about-values li:first-child span { color: rgba(255, 255, 255, .82); }
@media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 640px) {
  .about-values { grid-template-columns: 1fr; gap: 12px; }
  .about-values li { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .about-values li i { grid-row: span 2; }
  .about-copy p { font-size: 16px; } .about-copy .about-lead { font-size: 17.5px; }
  .about-cta .btn { flex: 1 1 100%; text-align: center; }
}
.about-stats { list-style: none; margin: 22px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.about-stats li { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.about-stats b { display: block; font: 800 24px/1.1 var(--font-head); background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.about-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.about-copy .about-src { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .about-stats { gap: 8px; } .about-stats li { padding: 12px 10px; } .about-stats b { font-size: 19px; } .about-stats span { font-size: 12px; } }
@media (max-width: 360px) { .about-stats { grid-template-columns: 1fr; } }
.about-copy .about-src { margin-bottom: 20px; }
.about-copy h2 { margin-bottom: 14px; }
.about-copy .about-lead { margin-bottom: 0; }
.about-cta { margin-top: 20px; }