/* 95 Solutions: site styles (services edition 1.4.0). System fonts, no external requests. */
:root {
  --ink: #0b0b0f;
  --ink-2: #133340;
  --accent-bright: #5cc4b3;
  --brand-teal: #2d9d8c;
  --brand-navy: #264352;
  --accent: #2f5bff;
  --accent-ink: #fff;
  --text: #1c1d22;
  --muted: #5d606b;
  --line: #e6e7eb;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --good: #0f7a4d;
  --bad: #b42318;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 18, 27, .06), 0 8px 24px rgba(16, 18, 27, .06);
  --wrap: 1200px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.hp { position: absolute; left: -9999px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 650; font-size: .98rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; font-family: inherit; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.btn-ghost-light:hover { border-color: #fff; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 20px; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; flex-shrink: 0; }
.logo-img { max-height: 44px; width: auto; display: block; }
.logo-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 850; font-size: .95rem; letter-spacing: -.04em; }
.logo-light { color: #fff; }
.logo-light .logo-mark { background: #fff; color: var(--ink); }
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-link:hover, .nav-link.active { background: var(--bg-alt); text-decoration: none; }
.nav-item { position: relative; }
.nav-item.has-mega { position: static; }
.mega, .drop { position: absolute; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(14,38,49,.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60; }
.mega { left: 20px; right: 20px; top: calc(100% - 6px); padding: 26px 28px; }
.drop { left: 0; min-width: 240px; padding: 8px; display: grid; }
.drop a { padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 550; }
.drop a:hover { background: var(--bg-alt); }
.drop-all { border-top: 1px solid var(--line); margin-top: 4px; color: var(--accent) !important; }
.nav-item.open .mega, .nav-item.open .drop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1081px) { .nav-item:hover .mega, .nav-item:hover .drop, .nav-item:focus-within .mega, .nav-item:focus-within .drop { opacity: 1; visibility: visible; transform: none; } }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.mega-head { display: block; font-weight: 750; color: var(--ink); text-decoration: none; margin-bottom: 6px; font-size: .98rem; }
.mega-head:hover { color: var(--accent); }
.mega-col ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.mega-col li a { display: block; padding: 4px 0; color: var(--muted); text-decoration: none; font-size: .9rem; }
.mega-col li a:hover { color: var(--accent); }
.mega-foot { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; font-weight: 600; font-size: .92rem; }
.mega-foot a { color: var(--ink); text-decoration: none; }
.mega-foot .mega-cta { margin-left: auto; color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone { color: var(--ink); font-weight: 650; text-decoration: none; font-size: .92rem; white-space: nowrap; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 10px 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
.nav-mobile-only { display: none; }
.admin-bar { background: #fff7d6; border-bottom: 1px solid #f1df95; font-size: .85rem; }
.admin-bar .wrap { display: flex; gap: 16px; padding-top: 6px; padding-bottom: 6px; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(45,157,140,.38), transparent 60%), var(--ink); color: #d9dbe3; padding: 72px 0 80px; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 750; color: var(--accent); margin-bottom: 12px; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--accent-bright); }
.section-dark .kicker, .section-dark .why-num, .section-dark .steps li::before, .cta-band .kicker, .hero .facts li, .page-hero .facts li, .section-dark a:not(.btn), .page-hero a:not(.btn), .cta-band a:not(.btn) { color: var(--accent-bright); border-color: var(--accent-bright); }
.hero .facts li, .page-hero .facts li { color: inherit; }
.hero-sub { font-size: 1.18rem; color: #c7cad6; max-width: 58ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.hero-chips a { display: inline-block; padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #e7e9f1; font-size: .86rem; text-decoration: none; }
.hero-chips a:hover { border-color: #fff; }
.hero-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 26px; }
.hero-card-title { color: #fff; font-weight: 700; margin-bottom: 10px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid var(--accent); }
.facts strong { color: #fff; font-size: 1rem; }
.facts span { color: #b9bdca; font-size: .93rem; line-height: 1.5; }
.facts.compact li { padding-left: 12px; }

.proof-bar { border-bottom: 1px solid var(--line); background: #fff; }
.proof-inner { display: flex; flex-wrap: wrap; gap: 18px 44px; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.proof-stat { display: flex; align-items: baseline; gap: 10px; }
.proof-stat strong { font-size: 1.7rem; color: var(--ink); letter-spacing: -.03em; }
.proof-stat span { color: var(--muted); font-size: .92rem; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 0 auto; }
.badges li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 600; }

/* Sections */
.section { padding: 76px 0; }
.section-tight { padding-top: 40px; padding-bottom: 64px; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: #c9ccd8; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head h2 { margin: 0; }
.link-more { font-weight: 650; text-decoration: none; white-space: nowrap; }
.card-grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.top-gap { margin-top: 28px; }
.svc-card, .case-card, .post-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.svc-card:hover, .case-card:hover, .post-card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.svc-name { font-weight: 750; color: var(--ink); font-size: 1.08rem; line-height: 1.3; padding-right: 26px; }
.svc-sum { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.svc-go { position: absolute; top: 22px; right: 22px; color: var(--accent); font-weight: 700; }
.svc-card-alt { background: var(--bg-alt); }
.case-tag { display: inline-block; align-self: flex-start; font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.post-date { font-size: .82rem; color: var(--muted); }
.why-card { padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); }
.why-card p { color: #b9bdca; font-size: .96rem; margin: 0; }
.why-num { display: block; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 0; margin: 0; }
.steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.steps h3 { font-size: 1.02rem; }
.steps p { font-size: .93rem; color: var(--muted); margin: 0; }
.quote { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.quote blockquote { margin: 0 0 14px; font-size: 1.02rem; }
.quote figcaption { display: grid; font-size: .9rem; color: var(--muted); }
.quote strong { color: var(--ink); }

/* Page hero */
.page-hero { background: var(--ink); color: #c9ccd8; padding: 34px 0 54px; }
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: end; }
.hero-subtitle { color: #fff; font-size: 1.2rem; font-weight: 550; max-width: 60ch; }
.hero-lead { font-size: 1.06rem; color: #c3c6d2; max-width: 68ch; }
.hero-side { padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.04); }
.page-hero-post h1 { max-width: none; font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.post-meta { color: #aeb2c0; font-size: .93rem; }
.post-meta a { color: #fff; }
.lead-sm { color: #aeb2c0; font-size: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; font-size: .85rem; }
.crumbs li { color: #9ea2b1; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #5d6070; }
.crumbs a { color: #d6d8e1; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Content layout */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-top: 44px; padding-bottom: 64px; }
.side-col { display: grid; gap: 18px; align-content: start; position: sticky; top: 90px; }
.side-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; }
.side-box h3 { font-size: 1.02rem; }
.side-box p { font-size: .93rem; color: var(--muted); }
.side-cta { background: var(--bg-alt); border-color: transparent; }
.side-cta .btn + .btn { margin-top: 10px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li a { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: .93rem; }
.side-list li:last-child a { border: 0; }
.side-list li a:hover { color: var(--accent); }
.toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 30px; background: var(--bg-alt); }
.toc summary { font-weight: 700; cursor: pointer; }
.toc ol { margin: 10px 0 4px; padding-left: 20px; columns: 2; column-gap: 30px; font-size: .93rem; }
.toc li { break-inside: avoid; margin: 3px 0; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--accent); }
.prose { font-size: 1.04rem; }
.prose h2 { margin-top: 1.9em; padding-top: .2em; scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.5em; scroll-margin-top: 90px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--ink); color: #fff; font-weight: 650; }
.prose tbody tr:nth-child(even) td { background: #fafbfc; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--ink); }
.prose strong { color: var(--ink); }
.prose code { background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; }
.answer-box { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 28px; background: #fbfcff; }
.answer-title { font-weight: 750; color: var(--ink); margin-bottom: 6px; }
.answer-box p:last-child { margin: 0; }
.child-cards, .faq, .related { margin-top: 48px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-list summary { cursor: pointer; font-weight: 650; color: var(--ink); padding: 14px 32px 14px 0; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.4rem; color: var(--accent); font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-a { padding: 0 0 16px; color: var(--muted); }
.faq-a p:last-child { margin: 0; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.related-list a { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.related-list a:hover { border-color: var(--ink); }
.related-list strong { color: var(--ink); }
.related-list span { color: var(--muted); font-size: .92rem; }
.author-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 20px; border-radius: var(--radius); background: var(--bg-alt); }
.author-mark { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 850; }
.author-box p { margin: 0 0 4px; font-size: .95rem; }

/* Pricing */
.pricing { margin: 1.4em 0 1.8em; }
.pricing-note { font-size: .95rem; color: var(--muted); background: var(--bg-alt); border-radius: var(--radius-sm); padding: 12px 16px; }
.plan-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.plan-grid.plans-4 { grid-template-columns: repeat(2, 1fr); }
.plan-grid.plans-2 { grid-template-columns: repeat(2, 1fr); }
.plan-grid.plans-1 { grid-template-columns: 1fr; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; font-size: .95rem; }
.plan-featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.plan-badge { position: absolute; top: -12px; left: 20px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.prose .plan-name, .plan-name { margin: 0 0 6px; font-size: 1.1rem; }
.plan-price { margin: 0 0 4px; color: var(--ink); }
.plan-price strong { font-size: 1.9rem; letter-spacing: -.03em; }
.plan-price span { color: var(--muted); font-size: .9rem; }
.plan-billing { color: var(--muted); font-size: .86rem; margin-bottom: 12px; }
.prose .plan-list, .plan-list { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; }
.plan-list li { position: relative; padding-left: 22px; margin: 6px 0; line-height: 1.45; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); }
.plan-terms { margin: 0 0 16px; font-size: .84rem; border-top: 1px solid var(--line); padding-top: 10px; }
.plan-terms div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.plan-terms dt { color: var(--muted); }
.plan-terms dd { margin: 0; text-align: right; color: var(--ink); font-weight: 550; }
.pricing-foot { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.price-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.price-nav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; text-decoration: none; color: var(--ink); background: #fff; }
.price-nav a:hover { border-color: var(--ink); }
.price-group { margin: 34px 0; scroll-margin-top: 90px; }
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table.compare, table.compare { display: table; margin: 0; min-width: 640px; font-size: .9rem; }
.compare th[scope=row] { background: var(--bg-alt); color: var(--ink); width: 150px; font-weight: 650; }
.compare thead th.is-featured { background: var(--accent); }
.compare ul { margin: 0; padding-left: 1.1em; }
.compare li { margin: 3px 0; }
.price-teaser { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.price-teaser .plan-list { flex: 1; }

/* CTA + forms */
.cta-band { background: var(--ink); color: #c9ccd8; padding: 72px 0; }
.cta-band h2 { color: #fff; }
.cta-title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 750; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .6em; }
.cta-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.cta-points { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 8px; }
.cta-points li { padding-left: 24px; position: relative; color: #e4e6ee; }
.cta-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 11px; height: 6px; border-left: 2px solid #7ee2b8; border-bottom: 2px solid #7ee2b8; transform: rotate(-45deg); }
.lead-form { background: #fff; color: var(--text); border-radius: 18px; padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.lead-form h2 { font-size: 1.4rem; }
.form-row { display: grid; gap: 14px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.lead-form label, .search-form label { display: grid; gap: 6px; font-size: .88rem; font-weight: 650; color: var(--ink); margin-bottom: 14px; }
.lead-form input, .lead-form select, .lead-form textarea, .search-form input, .roas-tool input { width: 100%; font: inherit; font-size: 1rem; padding: 11px 13px; border: 1.5px solid #d4d6dd; border-radius: 10px; background: #fff; color: var(--text); font-weight: 400; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus, .roas-tool input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(45,157,140,.18); }
.form-fine { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.notice { border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; }
.notice-ok { background: #e7f6ee; color: #0b5d3a; }
.notice-err { background: #fdecea; color: var(--bad); }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.contact-grid .lead-form { box-shadow: var(--shadow); border: 1px solid var(--line); }
.contact-grid aside { display: grid; gap: 18px; }
.contact-list { list-style: none; margin: 0; }
.contact-list li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border: 0; }
.contact-list span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.contact-list address { font-style: normal; }
.booking { margin-top: 32px; }
.booking-frame iframe { width: 100%; min-height: 680px; border: 1px solid var(--line); border-radius: var(--radius); }
.search-form { display: flex; gap: 10px; max-width: 560px; margin: 18px auto 0; }
.search-form input { flex: 1; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 36px; }
.pager a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.pager a.on { background: var(--ink); color: #fff; }
.empty-state { padding: 40px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ROAS tool */
.roas-tool { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 1.4em 0 2em; background: var(--bg-alt); scroll-margin-top: 90px; }
.roas-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.roas-inputs label { display: grid; gap: 6px; font-size: .85rem; font-weight: 650; color: var(--ink); }
.roas-out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.roas-out div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: grid; gap: 2px; }
.roas-out span { font-size: .8rem; color: var(--muted); }
.roas-out strong { font-size: 1.45rem; color: var(--ink); letter-spacing: -.02em; }
.roas-verdict { margin: 14px 0 0; font-weight: 650; }
.roas-verdict.good { color: var(--good); }
.roas-verdict.bad { color: var(--bad); }

/* Footer */
.site-footer { background: #0a1c24; color: #a3a7b6; padding: 60px 0 24px; font-size: .94rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 7px 0; }
.site-footer a { color: #cfd2dc; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.f-brand p { margin: 16px 0; max-width: 40ch; }
.f-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px !important; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid #1b3844; margin-top: 40px; padding-top: 20px; font-size: .84rem; }
.footer-base p { margin: 0; }
.footer-base a { margin-left: 14px; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.25); }

/* Responsive */
@media (max-width: 1080px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .main-nav { position: fixed; inset: 70px 0 0 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 40px; overflow-y: auto; margin: 0; display: none; z-index: 55; }
  .main-nav.open { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.02rem; }
  .nav-mobile-only { display: flex; }
  .mega, .drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; width: auto; margin: 0; padding: 6px 0 12px 8px; display: none; }
  .nav-item.open .mega, .nav-item.open .drop { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 14px; }
  .mega-foot { flex-wrap: wrap; }
  .hero-grid, .page-hero-grid, .cta-grid, .contact-grid, .page-grid { grid-template-columns: 1fr; }
  .side-col { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .roas-inputs, .roas-out { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { padding: 48px 0 56px; }
  .section { padding: 54px 0; }
  .cols-2, .cols-3, .cols-4, .plan-grid, .plan-grid.plans-4, .plan-grid.plans-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row.two { grid-template-columns: 1fr; gap: 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .toc ol { columns: 1; }
  .footer-top { grid-template-columns: 1fr; }
  .header-actions .btn { padding: 8px 12px; font-size: .85rem; }
  .logo-text { font-size: 1.05rem; }
  .search-form { flex-direction: column; }
  .footer-base a { margin: 0 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .cta-band, .side-col, .wa-float { display: none; } .page-grid { display: block; } }
.plan .btn, .compare .btn { white-space: nowrap; font-size: .9rem; padding: 11px 14px; }
.roas-inputs label { align-content: end; }

/* Brand logo */
.logo-img { display: block; height: 40px; width: auto; max-width: 220px; }
.logo-light .logo-img { height: 44px; max-width: 240px; }
@media (max-width: 720px) { .logo-img { height: 32px; } }

/* Accessibility helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Floating buttons: chat bottom-right, WhatsApp above it */
.wa-float { bottom: 88px; width: 50px; height: 50px; }
.chat { position: fixed; right: 18px; bottom: 18px; z-index: 45; font-size: .95rem; }
.chat-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--ink); color: #fff; padding: 13px 18px 13px 15px; border-radius: 999px; font: inherit; font-weight: 700; box-shadow: 0 12px 30px rgba(14,38,49,.35); }
.chat-toggle:hover { background: var(--accent); }
.chat.open .chat-toggle { display: none; }
.chat-panel { width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 110px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(14,38,49,.28); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { background: var(--ink); color: #d6e6e3; padding: 14px 44px 12px 16px; position: relative; display: grid; gap: 2px; font-size: .8rem; line-height: 1.4; }
.chat-head strong { color: #fff; font-size: 1rem; }
.chat-close { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-alt); }
.chat-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; line-height: 1.5; white-space: pre-line; }
.chat-msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.me { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.chat-links a { font-size: .82rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--bg-alt); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.chat-quick button, .chat-act { font: inherit; font-size: .82rem; padding: 6px 11px; border: 1.5px solid var(--accent); color: var(--accent); background: #fff; border-radius: 999px; cursor: pointer; font-weight: 650; }
.chat-act.wa { border-color: #25d366; color: #138a44; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; font: inherit; padding: 10px 12px; border: 1.5px solid #d4d6dd; border-radius: 10px; }
.chat-form button { font: inherit; font-weight: 700; border: 0; background: var(--accent); color: #fff; padding: 0 14px; border-radius: 10px; cursor: pointer; }
.chat-lead { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.chat-lead input, .chat-lead textarea { font: inherit; font-size: .9rem; padding: 8px 10px; border: 1.5px solid #d4d6dd; border-radius: 8px; width: 100%; }
.chat-lead button { justify-self: start; }

/* Sticky contact bar on phones */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .mobile-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(14,38,49,.10); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 6px; font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; }
  .mobile-bar a + a { border-left: 1px solid var(--line); }
  .mobile-bar .mb-quote { background: var(--accent); color: #fff; }
  body { padding-bottom: 56px; }
  .wa-float { display: none; }
  .chat { bottom: 70px; right: 12px; }
  .chat-label { display: none; }
  .chat-toggle { padding: 14px; }
  .chat-panel { height: min(520px, calc(100vh - 150px)); }
}

/* Payment methods */
.pay-list { list-style: none; margin: 1em 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pay-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; display: grid; gap: 6px; align-content: start; background: #fff; }
.pay-item strong { color: var(--ink); font-size: 1.05rem; }
.pay-item span { color: var(--muted); font-size: .92rem; }
.pay-item .btn { justify-self: start; margin-top: 4px; }
.f-pay { color: #a3b3b9; }

/* Free tools */
.tool-wrap { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 1.4em 0 2em; background: var(--bg-alt); scroll-margin-top: 90px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tool-grid label, .tool-field { display: grid; gap: 6px; font-size: .85rem; font-weight: 650; color: var(--ink); align-content: end; }
.tool-wrap input, .tool-wrap select, .tool-wrap textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1.5px solid #d4d6dd; border-radius: 10px; background: #fff; color: var(--text); font-weight: 400; }
.tool-wrap textarea { min-height: 160px; resize: vertical; font-size: .95rem; line-height: 1.5; }
.tool-wrap input:focus, .tool-wrap select:focus, .tool-wrap textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(45,157,140,.18); }
.tool-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tool-modes button { font: inherit; font-size: .88rem; font-weight: 650; padding: 7px 13px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; color: var(--ink); }
.tool-modes button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.tool-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.tool-out div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: grid; gap: 2px; }
.tool-out span { font-size: .8rem; color: var(--muted); }
.tool-out strong { font-size: 1.35rem; color: var(--ink); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tool-note { margin: 14px 0 0; font-weight: 650; }
.tool-note.good { color: var(--good); } .tool-note.bad { color: var(--bad); }
.tool-code { background: #0e2631; color: #e3f2ef; border-radius: 10px; padding: 14px; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 14px 0 8px; max-height: 420px; overflow: auto; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tool-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; font-size: .92rem; }
.tool-table th, .tool-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tool-table th { background: var(--ink); color: #fff; font-weight: 650; }
.tool-rows { display: grid; gap: 10px; }
.tool-row { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 8px; align-items: end; }
.tool-row button, .tool-add { font: inherit; font-size: .85rem; padding: 9px 12px; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; }
.tool-warn { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: .9rem; }
.tool-warn li { padding: 8px 12px; border-radius: 8px; background: #fff7d6; color: #6b4e00; }
.tool-warn li.ok { background: #e7f6ee; color: var(--good); }
.tool-plan { background: #fff; border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 18px; margin-top: 16px; }
.tool-plan h3 { margin: 0 0 6px; }
.tool-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.tool-bar i { display: block; height: 100%; background: var(--accent); }
.tool-bar i.over { background: var(--bad); }
.serp-preview { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 14px; font-family: Arial, sans-serif; }
@media (max-width: 720px) { .tool-row { grid-template-columns: 1fr 1fr; } .tool-wrap { padding: 16px; } }
/* v1.5: header fits the Free Tools link; tool fields that do not apply stay hidden */
.nav-link { white-space: nowrap; }
@media (max-width: 1360px) and (min-width: 1081px) { .nav-link { padding: 10px 9px; font-size: .92rem; } .header-phone { display: none; } }
.tool [hidden] { display: none !important; }
/* Ways to pay strip under price tables */
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); font-size: .9rem; }
.pay-strip-label { font-weight: 700; color: var(--ink); }
.pay-strip ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pay-chip { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .85rem; color: var(--ink); }
.pay-strip a { margin-left: auto; font-weight: 600; }
@media (max-width: 600px) { .pay-strip a { margin-left: 0; } }
/* Phones: keep the main column inside the screen (long TOC entries and tables scroll or wrap instead) */
.main-col, .side-col { min-width: 0; }
@media (max-width: 1080px) { .page-grid { grid-template-columns: minmax(0, 1fr); } }
.toc li, .toc a { overflow-wrap: anywhere; white-space: normal; }

/* =====================================================================
   v1.6 design layer: agency look, icons, motion (respects reduced motion)
   ===================================================================== */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); }
:root {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mint: #4fd1b5; --mint-2: #7ee2c9; --navy-2: #12384a; --navy-3: #0a1c24; --sky: #8fb3ff; --sun: #ffc56b;
  --bg-alt: #f3f7f6; --line: #e3e9e8;
  --grad: linear-gradient(135deg, #1f7a6f 0%, #23a38c 55%, #4fd1b5 100%);
  --shadow-lg: 0 24px 60px rgba(14, 38, 49, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { font-feature-settings: "ss01" on; }
h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 800; letter-spacing: -.025em; }
h3 { font-weight: 750; }

/* Icons */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; display: inline-block; }
.ic-sm { width: 16px; height: 16px; margin-right: 8px; color: var(--accent); opacity: .85; }
.ic-badge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, rgba(31,122,111,.12), rgba(79,209,181,.18)); color: var(--accent); flex: none; transition: transform .3s var(--ease), background .3s; }
.ic-badge .ic { width: 22px; height: 22px; }
.ic-badge.sm { width: 34px; height: 34px; border-radius: 10px; }
.ic-badge.sm .ic { width: 17px; height: 17px; }
.ic-badge.glow { background: rgba(79,209,181,.12); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(79,209,181,.28); }

/* Buttons */
.btn .ic { width: 18px; height: 18px; }
.btn-accent { background: var(--grad); background-size: 140% 140%; color: #fff; border: 0; box-shadow: 0 8px 22px rgba(31,122,111,.28); }
.btn-accent:hover { filter: none; background-position: 100% 0; box-shadow: 0 12px 30px rgba(31,122,111,.38); }
.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-outline { border-color: rgba(14,38,49,.22); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); }

/* Top bar + reading progress */
.topbar { background: var(--navy-3); color: #b9d6d0; font-size: .82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.topbar .ic { width: 15px; height: 15px; margin-right: 6px; color: var(--mint); vertical-align: -.25em; }
.topbar-rotator { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
.topbar-rotator span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); transition: transform .5s var(--ease), opacity .5s; }
.topbar-rotator span.is-on { opacity: 1; transform: none; }
.topbar-rotator span.is-out { opacity: 0; transform: translateY(-100%); }
.topbar-links { display: flex; gap: 18px; white-space: nowrap; }
.topbar-links a { color: #dbeae7; text-decoration: none; }
.topbar-links a:hover { color: #fff; }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad); }

/* Header */
.site-header { transition: box-shadow .25s, background .25s; }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(14,38,49,.08); }
.header-inner { min-height: 74px; }
.mega { padding: 22px; border-radius: 18px; }
@media (min-width: 1081px) { .mega { max-height: calc(100vh - 130px); overflow-y: auto; } .mega-col ul { min-height: 0; } }
.mega-wrap { display: grid; grid-template-columns: 1fr 270px; gap: 24px; }
.mega-grid { gap: 20px 26px; }
.mega-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mega-col li a { display: flex; align-items: center; padding: 5px 0; color: #4a5560; }
.mega-col li a .ic-sm { width: 15px; height: 15px; }
.mega-promo { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; text-decoration: none; color: #cfe7e2; background: radial-gradient(260px 160px at 100% 0, rgba(79,209,181,.35), transparent 70%), var(--ink); }
.mega-promo strong { color: #fff; font-size: 1.1rem; }
.mega-promo .ic-badge { background: rgba(79,209,181,.16); color: var(--mint); }
.mega-promo span { font-size: .9rem; line-height: 1.5; }
.mega-promo-go { margin-top: auto; color: var(--mint) !important; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mega-foot a { display: inline-flex; align-items: center; gap: 6px; }
.mega-foot .ic { color: var(--accent); }
.mega-ind { left: 20px; right: 20px; }
.ind-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ind-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .2s; }
.ind-menu a:hover { background: var(--bg-alt); }
.ind-menu a:hover .ic-badge { transform: scale(1.08) rotate(-4deg); }
.header-actions .btn-sm { padding: 10px 16px; }

/* Shared dark backgrounds with moving light */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.orb.o1 { width: 520px; height: 520px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(79,209,181,.55), transparent 65%); }
.orb.o2 { width: 420px; height: 420px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(143,179,255,.35), transparent 65%); animation-duration: 22s; }
.orb.o3 { width: 300px; height: 300px; left: 42%; top: 30%; background: radial-gradient(circle, rgba(35,163,140,.35), transparent 65%); animation-duration: 26s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, 40px, 0) scale(1.12); } }
.hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); }

/* Home hero */
.hero-v2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b2029 0%, var(--ink) 100%); padding: 84px 0 96px; }
.hero-v2 .wrap { position: relative; z-index: 1; }
.hero-v2 .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; }
.hero-v2 h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 18ch; background: linear-gradient(180deg, #fff 30%, #cfeee6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(79,209,181,.1); border: 1px solid rgba(79,209,181,.3); color: var(--mint) !important; letter-spacing: .08em; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(79,209,181,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(79,209,181,0); } 100% { box-shadow: 0 0 0 0 rgba(79,209,181,0); } }
.hero-rotate { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; color: #fff; margin: -4px 0 14px; }
.rotator { position: relative; display: inline-block; color: var(--mint); }
.rotator b { display: inline-block; font-weight: 800; background: linear-gradient(90deg, var(--mint), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .35s, transform .35s var(--ease); }
.rotator b.out { opacity: 0; transform: translateY(-40%); }
.rotator b.in { opacity: 0; transform: translateY(40%); }
.rotator::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px; background: var(--grad); opacity: .7; }
.hero-audit { display: flex; align-items: center; gap: 8px; max-width: 590px; margin: 26px 0 16px; padding: 7px 7px 7px 16px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.hero-audit-ic { color: var(--accent); display: grid; }
.hero-audit input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1rem; color: var(--text); background: transparent; padding: 10px 4px; }
.hero-audit .btn { white-space: nowrap; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; color: #c4d6d2; font-size: .92rem; }
.hero-trust .ic { color: var(--mint); margin-right: 6px; }
/* Animated dashboard illustration */
.hero-visual { position: relative; min-height: 420px; }
.dash { position: absolute; inset: 30px 10px 30px 30px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.dash-top { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9fbab5; font-size: .78rem; }
.dash-top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.dash-top i:first-child { background: #ff7a7a; } .dash-top i:nth-child(2) { background: var(--sun); } .dash-top i:nth-child(3) { background: var(--mint); }
.dash-top span { margin-left: 8px; }
.dash-body { padding: 18px; display: grid; gap: 14px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-kpis div { border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; color: #cfe0dc; font-size: .82rem; }
.dash-kpis b { color: var(--mint); display: grid; }
.dash-chart { width: 100%; height: 130px; }
.dash-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 3.2s var(--ease) .4s forwards, glowline 3s ease-in-out 3.6s infinite; }
.dash-area { opacity: 0; animation: fadein 1.2s ease 1.8s forwards; }
.dash-line2 { opacity: .7; animation: dashmove 6s linear infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes dashmove { to { stroke-dashoffset: -100; } }
@keyframes glowline { 50% { filter: drop-shadow(0 0 6px rgba(79,209,181,.8)); } }
.dash-bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 8px; height: 80px; }
.dash-bars i { display: block; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(79,209,181,.9), rgba(31,122,111,.5)); transform-origin: bottom; animation: grow 1.4s var(--ease) both; }
.dash-bars i:nth-child(2) { animation-delay: .1s } .dash-bars i:nth-child(3) { animation-delay: .2s } .dash-bars i:nth-child(4) { animation-delay: .3s } .dash-bars i:nth-child(5) { animation-delay: .4s } .dash-bars i:nth-child(6) { animation-delay: .5s } .dash-bars i:nth-child(7) { animation-delay: .6s } .dash-bars i:nth-child(8) { animation-delay: .7s }
@keyframes grow { from { transform: scaleY(0); } }
.float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .84rem; box-shadow: 0 16px 34px rgba(0,0,0,.28); animation: bob 6s ease-in-out infinite; }
.float-chip .ic { color: var(--accent); }
.float-chip.c1 { top: 0; left: 0; }
.float-chip.c2 { top: 38%; right: -6px; animation-delay: -1.5s; }
.float-chip.c3 { bottom: 8px; left: 8%; animation-delay: -3s; }
.float-chip.c4 { top: 12%; right: 12%; animation-delay: -4.5s; background: var(--mint); }
.float-chip.c4 .ic { color: var(--ink); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.orbit { position: absolute; right: -34px; bottom: -44px; width: 150px; height: 150px; opacity: .8; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; animation: spin 30s linear infinite; }
.orbit span { position: absolute; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--mint); border: 1px solid rgba(255,255,255,.16); animation: spin 30s linear infinite reverse; }
.orbit span:nth-child(1) { top: -19px; left: 61px; } .orbit span:nth-child(2) { right: -19px; top: 61px; } .orbit span:nth-child(3) { bottom: -19px; left: 61px; } .orbit span:nth-child(4) { left: -19px; top: 61px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Platforms marquee */
.platforms { padding: 30px 0 26px; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.platforms-label { text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 750; color: var(--muted); margin: 0 0 16px; }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 10px; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 48s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.pf { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); font-weight: 650; font-size: .92rem; white-space: nowrap; }
.pf .ic { color: var(--accent); }

/* Stats */
.stats-strip { background: #fff; padding: 34px 0; border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { display: grid; gap: 4px; padding: 6px 20px; border-left: 3px solid; border-image: var(--grad) 1; }
.stat strong { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.stat > span { color: var(--muted); font-size: .95rem; }
.stat .count { font: inherit; color: inherit; }

/* Section heads */
.section-head .kicker { display: inline-flex; align-items: center; gap: 8px; }
.section-lead { color: var(--muted); max-width: 62ch; margin: 10px 0 0; font-size: 1.04rem; }
.link-more { display: inline-flex; align-items: center; gap: 6px; }
.link-more .ic { transition: transform .2s; }
.link-more:hover .ic { transform: translateX(4px); }

/* Tabs */
.tab-nav { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); margin-bottom: 26px; }
.tab-nav button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tab-nav button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(14,38,49,.1); }
.tab-nav button[aria-selected="true"] .ic { color: var(--accent); }
.tab-panel { animation: panelin .45s var(--ease); }
@keyframes panelin { from { opacity: 0; transform: translateY(10px); } }

/* Cards with icons */
.svc-card { border-radius: 18px; }
.svc-card-ic { gap: 10px; padding: 26px; }
.svc-card-ic .svc-name { padding-right: 0; margin-top: 6px; }
.svc-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: .9rem; }
.svc-more .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.svc-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover .ic-badge { transform: scale(1.08) rotate(-5deg); background: var(--grad); color: #fff; }
.svc-card:hover .svc-more .ic { transform: translateX(5px); }

/* Why */
.section-glow { position: relative; overflow: hidden; background: radial-gradient(800px 400px at 10% 0, rgba(79,209,181,.14), transparent 60%), radial-gradient(700px 380px at 100% 100%, rgba(143,179,255,.12), transparent 60%), var(--ink); }
.why-card { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: 18px; transition: transform .3s var(--ease), border-color .3s; }
.why-card:hover { transform: translateY(-4px); border-color: rgba(79,209,181,.4); }
.why-card .ic-badge { margin-bottom: 16px; }

/* Industries */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind-tile { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ind-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; text-decoration: none; }
.ind-tile:hover .ic-badge { background: var(--grad); color: #fff; transform: rotate(-6deg) scale(1.06); }
.ind-name { flex: 1; line-height: 1.3; }
.ind-go { color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.ind-tile:hover .ind-go { opacity: 1; transform: none; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; counter-reset: none; }
.timeline::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--line); }
.timeline::after { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--tl, 0)); transition: transform 1.6s var(--ease); }
.timeline li { position: relative; z-index: 1; }
.tl-dot { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid var(--line); color: var(--accent); margin-bottom: 14px; transition: border-color .4s, background .4s, color .4s; }
.timeline.on .tl-dot { border-color: var(--accent); }
.timeline li:hover .tl-dot { background: var(--grad); color: #fff; border-color: transparent; }
.tl-step { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.timeline h3 { font-size: 1.04rem; margin-bottom: 6px; }
.timeline p { font-size: .93rem; color: var(--muted); margin: 0; }

/* Carousel */
.car-ctrl { display: flex; gap: 8px; }
.car-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.car-btn:hover { background: var(--ink); color: #fff; transform: scale(1.05); }
.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -8px; padding: 8px; }
.carousel::-webkit-scrollbar { display: none; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 2); gap: 18px; }
.car-track > * { scroll-snap-align: start; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.car-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: #c9d4d2; cursor: pointer; transition: width .3s, background .3s; }
.car-dots button.on { width: 28px; background: var(--accent); }
.case-slide { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; color: var(--text); text-decoration: none; min-height: 250px; transition: box-shadow .3s, transform .3s var(--ease); }
.case-slide:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); text-decoration: none; }
.case-body { display: flex; flex-direction: column; gap: 8px; padding: 26px; }
.case-art { position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; }
.case-art .ic { width: 52px; height: 52px; position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.case-art i { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); animation: ripple 6s ease-out infinite; width: 120px; height: 120px; }
.case-art i:nth-child(3) { animation-delay: 2s; } .case-art i:nth-child(4) { animation-delay: 4s; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.a0 { background: linear-gradient(140deg, #0e2631, #1f7a6f); } .a1 { background: linear-gradient(140deg, #12384a, #3d6cf0); } .a2 { background: linear-gradient(140deg, #1f7a6f, #4fd1b5); } .a3 { background: linear-gradient(140deg, #2a2342, #8f5cf0); }
.case-card-art { padding: 0; overflow: hidden; }
.case-card-art .case-art { height: 130px; }
.case-card-art .case-tag, .case-card-art .svc-name, .case-card-art .svc-sum { margin: 0 22px; }
.case-card-art .svc-sum { margin-bottom: 22px; }
.case-card-art .case-tag { margin-top: 18px; }

/* Free tools cards marquee */
.marquee-cards { padding: 8px 0; }
.marquee-cards .marquee-track { gap: 16px; animation-duration: 70s; }
.tool-card { display: flex; flex-direction: column; gap: 8px; width: 270px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.tool-card .svc-name { padding: 0; }

/* Pricing teasers */
.price-teaser { position: relative; border-radius: 20px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.price-teaser:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-teaser.is-pop { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: var(--shadow-lg); }
.price-teaser .kicker { display: flex; align-items: center; gap: 10px; }
.pay-line { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .94rem; }
.pay-line .ic { color: var(--accent); margin-right: 6px; }

/* Testimonials */
.quote-slide { background: #fff; border-radius: 20px; }
.stars { display: flex; gap: 2px; color: var(--sun); margin-bottom: 10px; }
.stars .ic { fill: currentColor; }

/* About band on home */
.about-band { background: linear-gradient(180deg, #fff, var(--bg-alt)); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.about-side { position: sticky; top: 100px; }
.about-card { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 10px; }
.about-card-title { font-weight: 800; color: var(--ink); font-size: 1.15rem; margin: 6px 0 0; }
.about-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.tick-list { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 8px; font-size: .95rem; }
.tick-list .ic { color: var(--accent); margin-right: 8px; }

/* Blog thumbs */
.post-card { padding-top: 0; overflow: hidden; border-radius: 18px; }
.post-thumb { display: grid; place-items: center; height: 120px; margin: 0 -24px 10px; color: rgba(255,255,255,.9); }
.post-thumb .ic { width: 40px; height: 40px; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-intro { position: sticky; top: 100px; }
.faq-intro p { color: var(--muted); }
.faq-list details { border: 1px solid var(--line); border-radius: 14px; padding: 2px 18px; margin-bottom: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.faq-list details[open] { border-color: rgba(31,122,111,.4); box-shadow: 0 10px 26px rgba(14,38,49,.06); }
.faq-list summary::after { content: ""; width: 22px; height: 22px; top: 15px; right: 0; border-radius: 50%; background: var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a6f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .25s; }
.faq-list details[open] summary::after { content: ""; transform: rotate(45deg); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(160deg, #0b2029, var(--ink)); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-points li { padding-left: 0; display: flex; align-items: center; gap: 10px; }
.cta-points li::before { display: none; }
.cta-points .ic { color: var(--mint); width: 20px; height: 20px; }
.cta-contact { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.cta-contact a { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff !important; text-decoration: none; font-weight: 700; font-size: .92rem; transition: border-color .2s, background .2s; }
.cta-contact a:hover { border-color: rgba(79,209,181,.5); background: rgba(79,209,181,.08); }
.cta-contact small { display: block; font-weight: 500; color: #9fbab5; font-size: .75rem; }
.lead-form { border-radius: 22px; }

/* Inner page hero */
.page-hero-v2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b2029 0%, var(--ink) 100%); padding: 36px 0 64px; }
.page-hero-v2 .wrap { position: relative; z-index: 1; }
.page-hero-v2 h1 { font-size: clamp(2rem, 4vw, 3rem); }
.hero-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(79,209,181,.18); }
.hero-ic .ic { width: 15px; height: 15px; }
.page-hero-v2 .hero-side { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border-radius: 20px; padding: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-side-title { color: #fff; font-weight: 800; margin-bottom: 14px; }
.facts-ic { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.facts-ic li { display: flex; gap: 12px; align-items: flex-start; color: #b9c9c6; font-size: .9rem; line-height: 1.45; }
.facts-ic strong { display: block; color: #fff; font-size: .97rem; }
.hero-side-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.hero-side-contact a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff !important; text-decoration: none; font-size: .82rem; font-weight: 700; transition: background .2s; }
.hero-side-contact a:hover { background: rgba(79,209,181,.18); }
.hero-side-contact .ic { color: var(--mint); width: 20px; height: 20px; }
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; font-weight: 650; font-size: .92rem; color: var(--ink); }
.trust-inner span, .trust-inner a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.trust-inner .ic { color: var(--accent); }

/* Prose polish */
.prose h2 { position: relative; padding-left: 18px; }
.prose h2::before { content: ""; position: absolute; left: 0; top: .32em; bottom: .32em; width: 5px; border-radius: 4px; background: var(--grad); }
.prose table { border-radius: 14px; border: 1px solid var(--line); }
.prose thead th { background: linear-gradient(135deg, var(--ink), #164454); }
.side-cta { background: radial-gradient(240px 160px at 100% 0, rgba(79,209,181,.25), transparent 70%), var(--ink); color: #c7d7d4; border: 0; border-radius: 20px; }
.side-cta h3 { color: #fff; margin-top: 12px; }
.side-cta p { color: #b9c9c6; }
.side-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); }
.side-cta .btn-outline:hover { background: #fff; color: var(--ink); }
.side-box { border-radius: 18px; }
.side-list li a { display: flex; align-items: center; }
.related-list a { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; border-radius: 14px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.related-list a .ic-badge { grid-row: span 2; }
.related-list a:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.toc { border-radius: 16px; }
.plan { border-radius: 18px; transition: transform .3s var(--ease), box-shadow .3s; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan-featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.plan-badge { background: var(--grad); }

/* Footer */
.site-footer { background: radial-gradient(800px 300px at 90% 0, rgba(79,209,181,.08), transparent 60%), var(--navy-3); }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 34px; margin-bottom: 52px; border-radius: 24px; background: linear-gradient(135deg, rgba(31,122,111,.35), rgba(18,56,74,.6)); border: 1px solid rgba(79,209,181,.22); }
.footer-cta p { margin: 0; color: #b9d0cb; }
.footer-cta-title { color: #fff !important; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 6px !important; }
.footer-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.f-contact a, .f-pay { display: inline-flex; align-items: center; gap: 8px; }
.f-contact .ic, .f-pay .ic { color: var(--mint); }

/* Scroll reveal (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1080px) {
  .main-nav { bottom: 0; height: auto; }
  .topbar-links .tb-mail { display: none; }
  .mega-wrap { grid-template-columns: 1fr; }
  .mega-promo { display: none; }
  .ind-menu { grid-template-columns: 1fr 1fr; }
  .hero-v2 .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 380px; max-width: 560px; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::before, .timeline::after { display: none; }
  .about-grid, .faq-wrap { grid-template-columns: 1fr; }
  .about-side, .faq-intro { position: static; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .car-track { grid-auto-columns: 86%; }
}
@media (max-width: 720px) {
  .topbar-rotator { display: none; }
  .topbar-inner { justify-content: center; }
  .hero-v2 { padding: 52px 0 64px; }
  .hero-audit { flex-wrap: wrap; border-radius: 18px; padding: 10px; }
  .hero-audit-ic { display: none; }
  .hero-audit input { width: 100%; flex-basis: 100%; padding: 8px 6px; }
  .hero-audit .btn { width: 100%; }
  .hero-visual { min-height: 330px; }
  .dash { inset: 26px 0 26px 0; }
  .float-chip.c2 { right: 0; } .float-chip.c4 { display: none; }
  .orbit { display: none; }
  .ind-grid, .ind-menu { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .tab-nav { display: flex; overflow-x: auto; flex-wrap: nowrap; border-radius: 16px; }
  .tab-nav button { flex: none; }
  .case-slide { grid-template-columns: 1fr; }
  .case-art { height: 120px; }
  .car-track { grid-auto-columns: 92%; }
  .hero-side-contact { grid-template-columns: repeat(3, 1fr); }
  .trust-inner { justify-content: flex-start; font-size: .88rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cta { padding: 24px; }
  .stat { padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .dash, .float-chip, .orbit, .orbit span, .marquee-track, .btn-glow::after, .case-art i, .pulse-dot, .dash-line, .dash-line2, .dash-bars i { animation: none !important; }
  .dash-line { stroke-dashoffset: 0; } .dash-area { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee { overflow-x: auto; }
}

.hub-tiles { margin-bottom: 34px; }
.ind-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .ind-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ind-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .tab-panel .card-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 0 -2px; scrollbar-width: none; }
  .tab-panel .card-grid::-webkit-scrollbar { display: none; }
  .tab-panel .svc-card { scroll-snap-align: start; }
  .tab-panel::after { content: "Swipe for more"; display: block; text-align: center; font-size: .8rem; color: var(--muted); }
  .ind-grid:not(.ind-grid-3) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ind-grid:not(.ind-grid-3) .ind-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: .92rem; }
  .ind-grid:not(.ind-grid-3) .ind-go { display: none; }
}

/* ---------- Performance (v1.6.8): same look, smoother scrolling ----------
   Blur filters and backdrop blurs are redrawn on every frame while a page scrolls or animates.
   The glow shapes are already soft gradients, so the extra blur is dropped; animations pause off screen. */
.orb { filter: none; opacity: .6; will-change: transform; }
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.98); }
.page-hero-v2 .hero-side { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); }
.dash-line { animation: draw 3.2s var(--ease) .4s forwards; }
.marquee-track { will-change: transform; }
.anim-off, .anim-off * { animation-play-state: paused !important; }