/* ═══════════════════════════════════════════════════════════
   COMPETITORS ANALYSIS PAGE
   ═══════════════════════════════════════════════════════════ */

/* ─── VARIABLES (match site) ─── */
:root {
    --ca-blue: #0052e0;
    --ca-blue-d: #0040c0;
    --ca-blue-l: #e8f0ff;
    --ca-blue-xl: #eff6ff;
    --ca-text: #0f172a;
    --ca-sub: #475569;
    --ca-muted: #6b7280;
    --ca-light: #94a3b8;
    --ca-border: #e2e8f0;
    --ca-off: #f8fafc;
    --ca-white: #fff;
    --ca-green: #16a34a;
    --ca-amber: #f59e0b;
    --ca-red: #ef4444;
    --ca-purple: #7c3aed;
    --ca-font: "Plus Jakarta Sans", sans-serif;
    --ca-r: 16px;
    --ca-r-lg: 20px;
}

/* ─── KEYFRAMES ─── */
@keyframes caFadeUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes caPulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@keyframes caSlide { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes barGrow { from { width:0 } to { width:var(--bar-w) } }

/* ─── UTILITIES ─── */
.ca-wrap { max-width:1200px; margin:0 auto; padding:0 clamp(20px,4.5vw,52px) }
.ca-rv { opacity:0; transform:translateY(22px); transition: opacity .55s ease, transform .55s ease }
.ca-rv.in { opacity:1; transform:none }

/* ═══════════════════════════════════════════════════════════
   SECTION 1: HERO
   ═══════════════════════════════════════════════════════════ */
.ca-hero {
    position: relative;
    background: #060d1a;
    padding: 0;
    height: 100%;
    min-height: 380px;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ca-hero::before {
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
}
.ca-hero::after {
    content:"";
    position:absolute; top:-200px; right:-150px; width:800px; height:800px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(0,82,224,.22) 0%, rgba(99,102,241,.1) 40%, transparent 70%);
    pointer-events:none;
}
.ca-hero-glow {
    position:absolute; bottom:-200px; left:-100px; width:600px; height:600px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(6,182,212,.1) 0%, transparent 65%);
    pointer-events:none;
}
.ca-hero-inner {
    position:relative; z-index:1;
    text-align:center;
    max-width:720px; margin:0 auto;
}
.ca-hero-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(0,82,224,.15); border:1px solid rgba(0,82,224,.35);
    border-radius:100px; padding:.25rem .85rem .25rem .5rem;
    font-size:.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; color:rgba(148,187,255,.85);
    margin-bottom:1.25rem;
}
.ca-hero-badge svg {
    width:11px; height:11px; stroke:currentColor; fill:none;
    stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.ca-hero h1 {
    font-family:var(--ca-font);
    font-size:clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:800; line-height:1.15; letter-spacing:-.03em;
    color:#fff; margin-bottom:.5rem;
}
.ca-hero h1 em {
    font-style:normal;
    background:linear-gradient(130deg,#60a5fa 0%,#a78bfa 48%,#00e5cc 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.ca-hero-sub {
    font-size:.85rem; line-height:1.6;
    color:rgba(255,255,255,.5);
    max-width:56ch; margin:0 auto 1.25rem;
}
.ca-hero-stats {
    display:flex; justify-content:center; gap:2.5rem;
    flex-wrap:wrap;
}
.ca-hero-stat {
    text-align:center;
}
.ca-hero-stat .num {
    font-size:1.6rem; font-weight:800; color:#fff;
    letter-spacing:-.03em;
}
.ca-hero-stat .num em {
    font-style:normal;
    background:linear-gradient(130deg,#60a5fa,#a78bfa);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.ca-hero-stat .lbl {
    font-size:.68rem; color:rgba(255,255,255,.4);
    text-transform:uppercase; letter-spacing:.08em; font-weight:600;
    margin-top:.15rem;
}
.ca-hero-ctas {
    display:flex; justify-content:center; gap:1rem;
    margin-top:2.5rem; flex-wrap:wrap;
}
.ca-btn-p {
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--ca-blue); color:#fff;
    font-family:var(--ca-font); font-size:.88rem; font-weight:700;
    padding:.8rem 1.6rem; border-radius:10px;
    text-decoration:none; border:none; cursor:pointer;
    box-shadow:0 4px 20px rgba(0,82,224,.4);
    transition:background .15s, transform .12s, box-shadow .2s;
}
.ca-btn-p:hover { background:var(--ca-blue-d); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,82,224,.5) }
.ca-btn-p svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.ca-btn-s {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(255,255,255,.06); color:rgba(255,255,255,.85);
    font-family:var(--ca-font); font-size:.88rem; font-weight:500;
    padding:.8rem 1.6rem; border-radius:10px;
    text-decoration:none; border:1px solid rgba(255,255,255,.12);
    cursor:pointer; backdrop-filter:blur(6px);
    transition:background .15s, border-color .15s;
}
.ca-btn-s:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22) }

/* ═══════════════════════════════════════════════════════════
   SECTION 2: QUICK COMPARISON TABLE
   ═══════════════════════════════════════════════════════════ */
.ca-table-sec {
    padding:4rem 0; background:var(--ca-off);
    border-bottom:1px solid var(--ca-border);
}
.ca-sec-head {
    text-align:center; margin-bottom:2.5rem;
}
.ca-eyebrow {
    display:inline-flex; padding:.25rem .85rem; border-radius:100px;
    background:var(--ca-blue-xl); color:var(--ca-blue);
    font-size:.63rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:.75rem;
}
.ca-sec-head h2 {
    font-family:var(--ca-font);
    font-size:clamp(1.5rem,2.6vw,2rem);
    font-weight:800; letter-spacing:-.035em;
    color:var(--ca-text); margin-bottom:.5rem; line-height:1.15;
}
.ca-sec-head h2 em { font-style:normal; color:var(--ca-blue) }
.ca-sec-head p {
    font-size:.88rem; color:var(--ca-muted); line-height:1.7;
    max-width:52ch; margin:0 auto;
}

.ca-tbl-wrap {
    overflow-x:auto; border-radius:var(--ca-r-lg);
    border:1.5px solid var(--ca-border);
    background:var(--ca-white);
    box-shadow:0 4px 24px rgba(0,0,0,.04);
}
.ca-tbl {
    width:100%; border-collapse:collapse;
    font-size:.82rem;
}
.ca-tbl thead th {
    background:#f1f5f9; color:var(--ca-sub);
    font-weight:700; font-size:.68rem; text-transform:uppercase;
    letter-spacing:.08em; padding:.85rem 1.1rem;
    text-align:left; border-bottom:1.5px solid var(--ca-border);
    position:sticky; top:0; z-index:2;
    white-space:nowrap;
}
.ca-tbl tbody td {
    padding:.75rem 1.1rem;
    border-bottom:1px solid #f1f5f9;
    color:var(--ca-text);
    vertical-align:middle;
    white-space:nowrap;
}
.ca-tbl tbody tr:last-child td { border-bottom:none }
.ca-tbl tbody tr:hover { background:rgba(0,82,224,.02) }

/* Highlighted row (RanksBreathe) */
.ca-tbl tbody tr.ca-hl {
    background:rgba(0,82,224,.04);
    border-left:3px solid var(--ca-blue);
}
.ca-tbl tbody tr.ca-hl td { font-weight:700; color:var(--ca-blue) }
.ca-tbl tbody tr.ca-hl td:first-child {
    display:flex; align-items:center; gap:.4rem;
}
.ca-hl-crown { font-size:.9rem }

/* Dots rating */
.ca-dots { display:flex; gap:3px }
.ca-dot {
    width:10px; height:10px; border-radius:50%;
    background:#e2e8f0;
}
.ca-dot.on { background:var(--ca-blue) }
.ca-dot.on-g { background:var(--ca-green) }

/* Yes / No badges */
.ca-yes, .ca-no, .ca-mid {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.15rem .55rem; border-radius:100px;
    font-size:.7rem; font-weight:700;
}
.ca-yes { background:rgba(22,163,74,.08); color:#15803d }
.ca-no  { background:rgba(239,68,68,.06); color:#dc2626 }
.ca-mid { background:rgba(245,158,11,.08); color:#b45309 }

/* ═══════════════════════════════════════════════════════════
   SECTION 3: COMPETITOR CARDS
   ═══════════════════════════════════════════════════════════ */
.ca-cards-sec {
    padding:4rem 0 3rem;
    background:var(--ca-white);
}

.ca-card {
    background:var(--ca-white);
    border:1.5px solid var(--ca-border);
    border-radius:var(--ca-r-lg);
    overflow:hidden;
    margin-bottom:2.25rem;
    transition:box-shadow .3s, border-color .3s;
}
.ca-card:hover {
    box-shadow:0 12px 48px rgba(0,82,224,.06);
    border-color:rgba(0,82,224,.15);
}

/* Card Header */
.ca-card-hdr {
    display:flex; align-items:center; gap:1.25rem;
    padding:1.5rem 2rem;
    background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom:1px solid var(--ca-border);
    flex-wrap:wrap;
}
.ca-card-logo {
    width:52px; height:52px; border-radius:14px;
    background:var(--ca-white); border:1.5px solid var(--ca-border);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; font-weight:800; color:var(--ca-blue);
    flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.ca-card-info { flex:1; min-width:200px }
.ca-card-name {
    font-family:var(--ca-font);
    font-size:1.15rem; font-weight:800; color:var(--ca-text);
    letter-spacing:-.02em;
}
.ca-card-meta {
    display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem;
}
.ca-card-meta span {
    font-size:.7rem; color:var(--ca-muted);
    display:inline-flex; align-items:center; gap:.25rem;
}
.ca-card-meta svg {
    width:12px; height:12px; stroke:currentColor; fill:none;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ca-card-tags {
    display:flex; flex-wrap:wrap; gap:.35rem;
    margin-top:.45rem;
}
.ca-card-tag {
    display:inline-flex; padding:.15rem .55rem;
    border-radius:6px; font-size:.62rem; font-weight:600;
    background:rgba(0,82,224,.06); color:var(--ca-blue);
    letter-spacing:.02em;
}

/* Card Body */
.ca-card-body { padding:2rem }

/* Pros / Cons Grid */
.ca-pc-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1.5rem; margin-bottom:2rem;
}
.ca-pc-col h4 {
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; margin-bottom:.75rem;
    display:flex; align-items:center; gap:.4rem;
}
.ca-pc-col h4.good { color:var(--ca-green) }
.ca-pc-col h4.weak { color:var(--ca-amber) }
.ca-pc-col ul {
    list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem;
}
.ca-pc-col li {
    font-size:.82rem; color:var(--ca-sub); line-height:1.55;
    display:flex; align-items:flex-start; gap:.45rem;
}
.ca-pc-col li .ico {
    flex-shrink:0; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; margin-top:1px;
}
.ca-pc-col li .ico.g { background:rgba(22,163,74,.1); color:var(--ca-green) }
.ca-pc-col li .ico.a { background:rgba(245,158,11,.1); color:var(--ca-amber) }

/* Differentiator Mini Cards */
.ca-diff-head {
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--ca-blue); margin-bottom:.85rem;
    display:flex; align-items:center; gap:.4rem;
}
.ca-diff-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1rem; margin-bottom:2rem;
}
.ca-diff-card {
    background:var(--ca-blue-xl);
    border:1px solid rgba(0,82,224,.1);
    border-radius:14px; padding:1.1rem 1rem;
    text-align:center;
    transition:transform .2s, box-shadow .2s;
}
.ca-diff-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,82,224,.08) }
.ca-diff-ico { font-size:1.3rem; margin-bottom:.45rem }
.ca-diff-ttl { font-size:.78rem; font-weight:800; color:var(--ca-text); margin-bottom:.2rem }
.ca-diff-desc { font-size:.7rem; color:var(--ca-muted); line-height:1.5 }

/* Rating Bars */
.ca-bars-head {
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--ca-sub); margin-bottom:.85rem;
}
.ca-bar-row {
    display:grid; grid-template-columns:140px 1fr 140px 1fr;
    gap:.5rem .75rem; align-items:center;
    margin-bottom:.65rem;
}
.ca-bar-label {
    font-size:.72rem; font-weight:600; color:var(--ca-sub);
    text-align:right;
}
.ca-bar-track {
    height:8px; background:#e8edf3; border-radius:100px;
    overflow:hidden; position:relative;
}
.ca-bar-fill {
    height:100%; border-radius:100px;
    width:var(--bar-w);
    transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.ca-bar-fill.them { background:#94a3b8 }
.ca-bar-fill.us { background:linear-gradient(90deg,#0052e0,#6366f1) }
.ca-bar-tag {
    font-size:.62rem; font-weight:700; color:var(--ca-muted);
    white-space:nowrap;
}
.ca-bar-tag.us-tag { color:var(--ca-blue); font-weight:800 }

/* Card CTA */
.ca-card-cta {
    display:flex; justify-content:center;
    padding-top:1.5rem; border-top:1px solid var(--ca-border);
    margin-top:.5rem;
}
.ca-card-cta a {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.82rem; font-weight:700; color:var(--ca-blue);
    text-decoration:none; transition:gap .15s;
}
.ca-card-cta a:hover { gap:.65rem }
.ca-card-cta a svg {
    width:14px; height:14px; stroke:currentColor; fill:none;
    stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 4: WHY CHOOSE US
   ═══════════════════════════════════════════════════════════ */
.ca-why {
    padding:4.5rem 0;
    background:linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-top:1px solid var(--ca-border);
}
.ca-why-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:1.25rem; margin-bottom:2.5rem;
}
.ca-why-card {
    background:var(--ca-white);
    border:1.5px solid var(--ca-border);
    border-radius:18px; padding:1.75rem 1.5rem;
    text-align:center;
    transition:box-shadow .25s, transform .25s, border-color .25s;
}
.ca-why-card:hover {
    box-shadow:0 8px 32px rgba(0,82,224,.08);
    transform:translateY(-4px);
    border-color:rgba(0,82,224,.2);
}
.ca-why-ico {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin:0 auto .85rem;
}
.ca-why-ttl { font-size:.92rem; font-weight:800; color:var(--ca-text); margin-bottom:.35rem }
.ca-why-desc { font-size:.78rem; color:var(--ca-muted); line-height:1.6 }

.ca-why-cta {
    text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 5: FAQ
   ═══════════════════════════════════════════════════════════ */
.ca-faq {
    padding:4rem 0 5rem;
    background:var(--ca-white);
    border-top:1px solid var(--ca-border);
}
.ca-faq-list {
    max-width:760px; margin:0 auto;
}
.ca-faq-item {
    border:1.5px solid var(--ca-border);
    border-radius:14px; margin-bottom:.75rem;
    overflow:hidden; transition:border-color .2s;
}
.ca-faq-item.open { border-color:rgba(0,82,224,.25) }
.ca-faq-q {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.5rem; cursor:pointer;
    font-size:.88rem; font-weight:700; color:var(--ca-text);
    background:transparent; border:none; width:100%;
    font-family:var(--ca-font); text-align:left;
    transition:background .15s;
}
.ca-faq-q:hover { background:var(--ca-off) }
.ca-faq-q .chevron {
    width:18px; height:18px; stroke:var(--ca-muted);
    fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .25s; flex-shrink:0;
}
.ca-faq-item.open .chevron { transform:rotate(180deg) }
.ca-faq-a {
    max-height:0; overflow:hidden;
    transition:max-height .35s ease, padding .25s ease;
    padding:0 1.5rem;
}
.ca-faq-item.open .ca-faq-a {
    max-height:500px;
    padding:.25rem 1.5rem 1.25rem;
}
.ca-faq-a p {
    font-size:.82rem; color:var(--ca-sub); line-height:1.75;
}

/* ═══════════════════════════════════════════════════════════
   SECTION: DETAILED COMPARISON TABLE
   ═══════════════════════════════════════════════════════════ */
.ca-detailed-sec {
    padding:4rem 0 2rem; background:var(--ca-white);
}

/* ═══════════════════════════════════════════════════════════
   SECTION: MIGRATION PROCESS
   ═══════════════════════════════════════════════════════════ */
.ca-switch-sec {
    padding:3rem 0; background:linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    border-bottom:1px solid var(--ca-border); border-top:1px dashed var(--ca-border);
}
.ca-steps-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.ca-step-card {
    background:var(--ca-white); padding:2rem; border-radius:16px;
    border:1.5px solid var(--ca-border); text-align:center; position:relative;
    transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ca-step-card:hover {
    transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,82,224,.06);
    border-color:var(--ca-blue);
}
.ca-step-card .step-num {
    width:48px; height:48px; border-radius:50%; background:var(--ca-blue-xl);
    color:var(--ca-blue); font-size:1.1rem; font-weight:800; display:flex;
    align-items:center; justify-content:center; margin:0 auto 1.25rem;
    box-shadow:0 0 0 5px #fff;
}
.ca-step-card h4 { font-size:1rem; font-weight:800; color:var(--ca-text); margin-bottom:.5rem; }
.ca-step-card p { font-size:.82rem; color:var(--ca-muted); line-height:1.6; }

/* ═══════════════════════════════════════════════════════════
   SECTION: ROI CALCULATOR
   ═══════════════════════════════════════════════════════════ */
.ca-roi-sec {
    padding:4rem 0; background:var(--ca-white);
}
.ca-roi-box {
    display:grid; grid-template-columns:1fr 1fr; border-radius:24px;
    background:#0f172a; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.ca-roi-left {
    padding:3.5rem; position:relative; overflow:hidden;
}
.ca-roi-left::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at top right, rgba(0,82,224,.4) 0%, transparent 60%);
}
.ca-slider-wrap {
    margin-top:2.5rem; background:rgba(255,255,255,.05);
    padding:1.5rem; border-radius:16px; border:1px solid rgba(255,255,255,.1);
}
.ca-slider-wrap input[type=range] {
    width:100%; cursor:pointer; accent-color:#60a5fa; height:6px;
    background:rgba(255,255,255,.2); border-radius:100px;
}
.ca-roi-right {
    padding:3.5rem; background:#fff;
    display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
    position:relative;
}
.roi-card {
    padding:1.75rem; border-radius:16px; border:2px solid var(--ca-border);
    position:relative;
}
.roi-card.new {
    border-color:var(--ca-blue); background:var(--ca-blue-xl);
    box-shadow:0 8px 24px rgba(0,82,224,.1);
}
.roi-ttl { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ca-sub); margin-bottom:.5rem; }
.roi-card.new .roi-ttl { color:var(--ca-blue) }
.roi-val { font-size:2.2rem; font-weight:800; color:var(--ca-text); letter-spacing:-.03em }
.roi-card.new .roi-val { color:var(--ca-blue) }
.roi-vs {
    width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--ca-border);
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:800; color:var(--ca-muted);
    position:absolute; left:3.5rem; top:50%; transform:translateY(-50%); z-index:2;
}
.roi-card.new .roi-highlight {
    position:absolute; top:-12px; right:1.5rem; background:#16a34a; color:#fff;
    font-size:.65rem; font-weight:800; padding:.25rem .75rem; border-radius:100px;
    letter-spacing:.05em; text-transform:uppercase; box-shadow:0 4px 12px rgba(22,163,74,.3);
}

/* ═══════════════════════════════════════════════════════════
   SECTION: OLD WAY VS NEW WAY
   ═══════════════════════════════════════════════════════════ */
.ca-oldnew-sec {
    padding:4rem 0 5rem; background:var(--ca-off);
    border-top:1px solid var(--ca-border);
}
.ca-split-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    border-radius:24px; border:1px solid var(--ca-border);
    background:#fff; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.04);
}
.ca-split-col { padding:3.5rem 3rem; }
.ca-split-col.old-way { background:#fff; }
.ca-split-col.new-way {
    background:linear-gradient(145deg, #0f172a, #1e293b);
    position:relative; overflow:hidden;
}
.ai-glow-bg {
    position:absolute; top:-100px; right:-100px; width:400px; height:400px;
    background:radial-gradient(circle, rgba(99,102,241,.25) 0%, transparent 70%);
    pointer-events:none; border-radius:50%;
}
.split-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.25rem; }
.split-list li { display:flex; align-items:flex-start; gap:.8rem; font-size:.92rem; line-height:1.5; color:var(--ca-sub) }
.split-list.dark li { color:rgba(255,255,255,.7) }
.split-list.dark li strong { color:#fff }
.split-list li .x { color:#ef4444; font-weight:800; font-size:.85rem; margin-top:3px; flex-shrink:0 }
.split-list li .c { color:#22c55e; font-weight:800; font-size:.85rem; margin-top:3px; flex-shrink:0 }
.mock-dash {
    margin-top:2.5rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:12px; padding:1.25rem; backdrop-filter:blur(10px);
}
.mock-lbl { font-size:.65rem; font-weight:800; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.mock-bar { height:8px; background:linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius:100px; margin-bottom:.6rem; width:100%; box-shadow:0 0 10px rgba(59,130,246,.5); }

/* ═══════════════════════════════════════════════════════════
   STICKY CTA BAR
   ═══════════════════════════════════════════════════════════ */
.ca-sticky-bar {
    position:fixed; bottom:-100px; left:0; right:0; z-index:99;
    padding:1rem 0; background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px); border-top:1px solid var(--ca-border);
    box-shadow:0 -10px 40px rgba(0,0,0,.05);
    transition:bottom .4s cubic-bezier(.22,.61,.36,1);
}
.ca-sticky-bar.show { bottom:0; }
.ca-sticky-inner {
    max-width:800px; margin:0 auto; padding:0 20px;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .ca-pc-grid { grid-template-columns:1fr }
    .ca-diff-grid { grid-template-columns:repeat(3,1fr) }
    .ca-bar-row { grid-template-columns:100px 1fr 100px 1fr }
    .ca-why-grid { grid-template-columns:repeat(2,1fr) }
    .ca-steps-grid { grid-template-columns:repeat(3,1fr); gap:1rem }
}
@media (max-width:768px) {
    .ca-hero { padding:4rem 0 3.5rem; max-height:none; min-height:auto; display:block; }
    .ca-hero-stats { gap:1.5rem }
    .ca-card-hdr { padding:1.25rem 1.25rem }
    .ca-card-body { padding:1.25rem }
    .ca-diff-grid { grid-template-columns:1fr }
    .ca-bar-row { grid-template-columns:1fr; gap:.3rem }
    .ca-bar-label { text-align:left }
    .ca-bar-tag { display:none }
    .ca-why-grid { grid-template-columns:1fr }
    .ca-steps-grid { grid-template-columns:1fr }
    /* New Sections */
    .ca-roi-box { grid-template-columns:1fr }
    .ca-roi-right { padding:2.5rem; justify-content:flex-start }
    .roi-vs { position:relative; left:auto; top:auto; transform:none; margin:0 auto }
    .ca-split-grid { grid-template-columns:1fr }
    .ca-split-col { padding:2.5rem 2rem }
    .ca-sticky-inner { flex-direction:column; text-align:center }
    .ca-sticky-bar { padding:1rem }
}
@media (max-width:480px) {
    .ca-hero-ctas { flex-direction:column; align-items:center }
    .ca-hero-ctas a { width:100%; justify-content:center }
}