/* ============================================================
   CRM DEBUGZONE — For Law Firms (revamp) — light navy/blue brand
   Scoped under .lf-revamp
   ============================================================ */
.lf-revamp {
    --l-blue:#1d6cff; --l-blue2:#1558d6; --l-cyan:#06b6d4; --l-cyan2:#22d3ee;
    --l-navy:#0a2540; --l-ink:#16273f; --l-muted:#5a6b82;
    --l-bg:#f6f9fe; --l-bg2:#eef5ff; --l-line:#e5edf7;
    --l-radius:16px; --l-shadow:0 20px 50px rgba(17,66,126,.10); --l-shadow-sm:0 8px 24px rgba(17,66,126,.07);
    --l-font:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;
    color:var(--l-ink); font-family:var(--l-font); background:#fff; overflow-x:hidden;
}
.lf-revamp p{ color:var(--l-muted); line-height:1.7; }
.lf-revamp a{ text-decoration:none; }
.lf-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.lf-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--l-blue); background:rgba(29,108,255,.08); padding:7px 16px; border-radius:999px; margin-bottom:14px; }
.lf-eyebrow.on-dark{ color:var(--l-cyan2); background:rgba(34,211,238,.14); }
.lf-title{ font-size:clamp(26px,3.2vw,38px); font-weight:800; color:var(--l-navy); line-height:1.15; margin:0 0 12px; }
.lf-title .grad,.lf-hero h1 .grad{ background:linear-gradient(90deg,var(--l-blue),var(--l-cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lf-sub{ font-size:16.5px; max-width:720px; }
.lf-head{ margin-bottom:40px; } .lf-center{ text-align:center; } .lf-center .lf-sub{ margin-left:auto; margin-right:auto; }
.lf-section{ padding:74px 0; } .lf-section.tint{ background:var(--l-bg); }

.lf-btn{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:999px; transition:transform .15s ease, box-shadow .18s ease, background .18s ease; border:none; cursor:pointer; }
.lf-btn-primary{ background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); color:#fff; box-shadow:0 12px 26px rgba(29,108,255,.3); } .lf-btn-primary:hover{ color:#fff; transform:translateY(-2px); }
.lf-btn-ghost{ background:#fff; color:var(--l-navy); border:1.5px solid var(--l-line); } .lf-btn-ghost:hover{ border-color:var(--l-blue); color:var(--l-blue); }
.lf-btn-white{ background:#fff; color:var(--l-blue); } .lf-btn-white:hover{ color:var(--l-blue2); transform:translateY(-2px); }
.lf-btn-outline{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.5); } .lf-btn-outline:hover{ background:rgba(255,255,255,.2); color:#fff; }

/* hero */
.lf-hero{ position:relative; padding:74px 0 66px; overflow:hidden; border-bottom:1px solid var(--l-line);
    background:radial-gradient(900px 460px at 92% -10%, rgba(34,211,238,.18), transparent 62%), radial-gradient(820px 440px at -5% 120%, rgba(29,108,255,.13), transparent 60%), linear-gradient(180deg,#fff,var(--l-bg2)); }
.lf-hero::after{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:radial-gradient(rgba(29,108,255,.05) 1px, transparent 1px); background-size:26px 26px; }
.lf-hero>.lf-container{ position:relative; z-index:2; max-width:880px; }
.lf-hero h1{ font-size:clamp(30px,4.2vw,50px); font-weight:800; color:var(--l-navy); line-height:1.1; margin:0 0 16px; }
.lf-hero-sub{ font-size:18px; max-width:700px; margin-bottom:26px; }
.lf-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.lf-hero-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.lf-hero-chips span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--l-navy); background:#fff; border:1px solid var(--l-line); padding:8px 15px; border-radius:999px; box-shadow:var(--l-shadow-sm); }
.lf-hero-chips i{ color:var(--l-cyan); }

/* stats */
.lf-stats{ padding:0; margin-top:-34px; position:relative; z-index:3; }
.lf-stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; background:#fff; border:1px solid var(--l-line); border-radius:18px; padding:26px 24px; box-shadow:var(--l-shadow); }
.lf-stat{ text-align:center; } .lf-stat .num{ font-size:clamp(26px,3vw,36px); font-weight:800; color:var(--l-blue); line-height:1; }
.lf-stat:nth-child(2) .num{ color:var(--l-cyan); } .lf-stat:nth-child(4) .num{ color:var(--l-cyan); }
.lf-stat .lbl{ font-size:13px; color:var(--l-muted); margin-top:8px; font-weight:600; }

/* we know your firm */
.lf-size-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:32px; }
.lf-size{ background:#fff; border:1px solid var(--l-line); border-radius:16px; padding:28px 26px; box-shadow:var(--l-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.lf-size:hover{ transform:translateY(-6px); box-shadow:var(--l-shadow); }
.lf-size .ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:#fff; margin-bottom:16px; background:linear-gradient(135deg,var(--l-navy),var(--l-blue)); }
.lf-size:nth-child(2) .ic{ background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); }
.lf-size:nth-child(3) .ic{ background:linear-gradient(135deg,var(--l-cyan),#0891b2); }
.lf-size h3{ font-size:19px; font-weight:800; color:var(--l-navy); margin:0 0 8px; } .lf-size p{ font-size:14.5px; margin:0; }
.lf-cases{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.lf-case{ font-size:14px; font-weight:600; color:var(--l-navy); background:#fff; border:1px solid var(--l-line); padding:9px 16px; border-radius:999px; box-shadow:var(--l-shadow-sm); }
.lf-case--accent{ background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); color:#fff; border-color:transparent; }

/* litify checks (2-col) */
.lf-checks{ display:grid; grid-template-columns:1fr 1fr; gap:2px 40px; max-width:960px; margin:0 auto; }
.lf-check{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--l-ink); padding:13px 4px; border-bottom:1px solid var(--l-line); }
.lf-check i{ color:var(--l-blue); font-size:18px; flex:0 0 auto; }

/* manual vs automated */
.lf-ba{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:920px; margin:0 auto; }
.lf-ba-card{ background:#fff; border:1px solid var(--l-line); border-radius:16px; padding:26px 28px; box-shadow:var(--l-shadow-sm); }
.lf-ba-after{ border:2px solid var(--l-blue); }
.lf-ba-card h3{ font-size:17px; font-weight:800; margin:0 0 16px; }
.lf-ba-before h3{ color:#c0392b; } .lf-ba-after h3{ color:var(--l-blue); }
.lf-ba-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lf-ba-card li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--l-ink); }
.lf-ba-before li i{ color:#c0392b; margin-top:2px; } .lf-ba-after li i{ color:#1d9e75; margin-top:2px; }

/* integrations */
.lf-int-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.lf-int{ background:#fff; border:1px solid var(--l-line); border-radius:16px; padding:24px 22px; box-shadow:var(--l-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.lf-int:hover{ transform:translateY(-6px); box-shadow:var(--l-shadow); }
.lf-int .ic{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff; margin-bottom:14px; background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); }
.lf-int:nth-child(3n) .ic{ background:linear-gradient(135deg,var(--l-navy),var(--l-blue)); }
.lf-int h4{ font-size:16px; font-weight:800; color:var(--l-navy); margin:0 0 6px; } .lf-int p{ font-size:13.5px; margin:0; }
.lf-int-note{ text-align:center; margin-top:26px; font-size:14.5px; color:var(--l-muted); }

/* best practice band */
.lf-band{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; align-items:center; background:linear-gradient(135deg,var(--l-navy),#113a67); border-radius:22px; padding:44px 46px; color:#fff; box-shadow:var(--l-shadow); }
.lf-band h2{ color:#fff; font-size:clamp(22px,2.6vw,30px); font-weight:800; margin:0 0 12px; line-height:1.25; }
.lf-band p{ color:#cfe0f2; font-size:16px; margin:0; }
.lf-band__points{ display:flex; flex-direction:column; gap:14px; }
.lf-band__points div{ display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px 18px; font-weight:700; font-size:15px; }
.lf-band__points i{ color:var(--l-cyan2); font-size:18px; }

/* AI */
.lf-ai-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lf-ai{ background:#fff; border:1px solid var(--l-line); border-radius:16px; padding:24px 22px; box-shadow:var(--l-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.lf-ai:hover{ transform:translateY(-6px); box-shadow:var(--l-shadow); }
.lf-ai .ic{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff; margin-bottom:14px; background:linear-gradient(135deg,#7c3aed,var(--l-blue)); }
.lf-ai h4{ font-size:16px; font-weight:800; color:var(--l-navy); margin:0 0 6px; } .lf-ai p{ font-size:13.5px; margin:0; }

/* team vs single hire */
.lf-vs{ display:grid; grid-template-columns:1fr 64px 1fr; gap:0; align-items:stretch; max-width:960px; margin:0 auto; }
.lf-vs-card{ background:#fff; border:1px solid var(--l-line); border-radius:18px; padding:32px 30px; box-shadow:var(--l-shadow-sm); position:relative; }
.lf-vs-single{ opacity:.96; }
.lf-vs-team{ border:2px solid var(--l-blue); box-shadow:var(--l-shadow); }
.lf-vs-ic{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-size:23px; color:#fff; margin-bottom:16px; background:linear-gradient(135deg,#8894a6,#5a6b82); }
.lf-vs-ic.team{ background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); }
.lf-vs-card h3{ font-size:19px; font-weight:800; color:var(--l-navy); margin:0 0 10px; line-height:1.3; }
.lf-vs-cost{ display:inline-block; font-size:15px; font-weight:800; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.lf-vs-cost--bad{ color:#c0392b; background:rgba(192,57,43,.09); }
.lf-vs-cost--good{ color:#1d9e75; background:rgba(29,158,117,.12); }
.lf-vs-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lf-vs-card li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--l-ink); }
.lf-vs-single li i{ color:#c0392b; }
.lf-vs-team li i{ color:#1d9e75; }
.lf-vs-team li.hl{ font-weight:700; color:var(--l-navy); background:rgba(29,108,255,.07); border:1px solid rgba(29,108,255,.18); border-radius:10px; padding:13px 15px; margin-top:6px; align-items:flex-start; line-height:1.55; font-size:14px; }
.lf-vs-team li.hl i{ margin-top:3px; font-size:16px; }
.lf-vs-team li.hl span{ display:block; }
.lf-vs-team li.hl i{ color:var(--l-blue); }
.lf-vs-badge{ position:absolute; top:-13px; right:24px; background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); color:#fff; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:6px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(29,108,255,.34); }
.lf-vs-mid{ display:flex; align-items:center; justify-content:center; }
.lf-vs-mid span{ width:52px; height:52px; border-radius:50%; background:var(--l-navy); color:#fff; font-weight:800; font-size:15px; display:grid; place-items:center; box-shadow:var(--l-shadow-sm); }
.lf-vs-note{ text-align:center; margin-top:26px; font-size:15px; color:var(--l-muted); font-weight:600; }

/* cta */
.lf-cta{ padding:0 0 84px; }
.lf-cta__inner{ background:linear-gradient(135deg,var(--l-blue),var(--l-cyan)); border-radius:24px; padding:52px 46px; text-align:center; color:#fff; position:relative; overflow:hidden; box-shadow:0 26px 60px rgba(29,108,255,.3); }
.lf-cta__inner::after{ content:""; position:absolute; width:320px; height:320px; left:-90px; bottom:-140px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.lf-cta__inner h2{ color:#fff; font-size:clamp(24px,3vw,36px); font-weight:800; margin:0 0 12px; position:relative; z-index:2; }
.lf-cta__inner p{ color:#eaf4ff; font-size:17px; max-width:640px; margin:0 auto 26px; position:relative; z-index:2; }
.lf-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; position:relative; z-index:2; }

/* animations */
@keyframes lfUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none; } }
.lf-hero>.lf-container>*{ animation:lfUp .55s ease both; }
.lf-revamp.js-anim .lf-reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.lf-revamp.js-anim .lf-reveal.in{ opacity:1; transform:none; }

/* responsive */
@media (max-width:991px){
    .lf-stats-grid{ grid-template-columns:repeat(3,1fr); gap:22px 16px; }
    .lf-size-grid{ grid-template-columns:1fr; }
    .lf-int-grid{ grid-template-columns:repeat(2,1fr); }
    .lf-ai-grid{ grid-template-columns:repeat(2,1fr); }
    .lf-band{ grid-template-columns:1fr; gap:24px; padding:32px 28px; }
    .lf-vs{ grid-template-columns:1fr; gap:16px; } .lf-vs-mid{ padding:2px 0; }
}
@media (max-width:640px){
    .lf-section{ padding:52px 0; }
    .lf-stats-grid{ grid-template-columns:repeat(2,1fr); }
    .lf-checks{ grid-template-columns:1fr; gap:0; }
    .lf-ba{ grid-template-columns:1fr; }
    .lf-int-grid,.lf-ai-grid{ grid-template-columns:1fr; }
    .lf-cta__inner{ padding:34px 22px; }
}
@media (prefers-reduced-motion:reduce){
    .lf-revamp *,.lf-revamp *::before,.lf-revamp *::after{ animation:none !important; transition:none !important; }
    .lf-revamp.js-anim .lf-reveal{ opacity:1 !important; transform:none !important; }
}