/* CloviCFO marketing site — shared styles. Visually rich, light, high-contrast (WCAG AA). Brand tokens. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --indigo:      #312E81;
  --indigo-700:  #3730a3;
  --indigo-600:  #4338ca;
  --indigo-400:  #818cf8;
  --indigo-muted:rgba(49,46,129,.07);
  --amber:       #B45309;
  --amber-bright:#D97706;
  --amber-light: #f59e0b;
  --amber-muted: rgba(217,119,6,.12);
  --teal:        #0d9488;
  --green:       #15803d;
  --green-bright:#22c55e;
  --red:         #b91c1c;
  --bg:          #ffffff;
  --bg2:         #f6f7fc;
  --bg3:         #eef1f8;
  --ink-bg:      #0f1430;
  --ink-bg2:     #161d42;
  --border:      #e2e6ef;
  --text:        #16213e;
  --text2:       #475067;
  --text3:       #6b7488;
  --radius:      16px;
  --shadow:      0 1px 3px rgba(22,33,62,.06), 0 10px 34px rgba(49,46,129,.08);
  --shadow-lg:   0 24px 70px rgba(49,46,129,.18);
  --grad-brand:  linear-gradient(120deg,#312E81 0%,#4338ca 45%,#D97706 130%);
  --grad-soft:   linear-gradient(135deg,#eef1ff 0%,#fdf4e8 100%);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width: 100%; }
a { color: var(--indigo); }
.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; }
:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5.5rem 0; position:relative; }
.section-alt { background: var(--bg2); }
.section-soft { background: var(--grad-soft); }
.section-ink { background: var(--ink-bg); color:#e7ebff; }
.section-ink h2, .section-ink h3, .section-ink h4 { color:#fff; }
.center { text-align: center; }
.section-label { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--amber); background: var(--amber-muted); padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem; }
.section-ink .section-label{ color:#fcd9a6; background:rgba(217,119,6,.18); }
h1,h2,h3,h4 { color: var(--text); letter-spacing:-.02em; }
h2.section-h { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.15; }
.section-sub { color: var(--text2); font-size: 1.1rem; max-width: 660px; margin: 1rem auto 0; }
.section-ink .section-sub{ color:#aeb6e0; }
.grad-text { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

.page-head { padding: 4.5rem 0 1rem; text-align:center; position:relative; background:
  radial-gradient(900px 420px at 78% -25%, rgba(49,46,129,.10), transparent 62%),
  radial-gradient(760px 380px at 8% 0%, rgba(217,119,6,.08), transparent 58%); }
.page-head h1 { font-size: clamp(2.1rem,4.5vw,3rem); font-weight:800; line-height:1.1; }
.page-head p { color: var(--text2); font-size:1.15rem; max-width:680px; margin:1.1rem auto 0; }

nav.topnav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: .8rem 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.nav-brand img { height:34px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { color: var(--text2); text-decoration:none; font-size:.92rem; font-weight:600; transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--indigo); }
.nav-actions { display:flex; align-items:center; gap:.7rem; }

.btn { display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.4rem; border-radius:11px; font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; border:none; transition:filter .15s, transform .12s, box-shadow .2s; line-height:1.4; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad-brand); color:#fff; box-shadow: 0 8px 24px rgba(49,46,129,.32); }
.btn-primary:hover { filter: brightness(1.08); box-shadow:0 12px 30px rgba(49,46,129,.4); }
.btn-amber { background: var(--amber-bright); color:#fff; box-shadow: 0 8px 24px rgba(217,119,6,.3); }
.btn-amber:hover { filter: brightness(1.06); }
.btn-outline { background:#fff; color:var(--indigo); border:1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--indigo); }
.section-ink .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn-lg { padding:.95rem 2rem; font-size:1.05rem; border-radius:13px; }

.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} }

.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; margin-top:3rem; }
.grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; margin-top:3rem; }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; position:relative; overflow:hidden; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card::after{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); opacity:0; transition:opacity .2s; }
.card:hover::after{ opacity:1; }
.card-ico { width:50px; height:50px; border-radius:13px; background:var(--indigo-muted); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; }
.card.amber .card-ico{ background:var(--amber-muted); color:var(--amber); }
.card.teal .card-ico{ background:rgba(13,148,136,.12); color:var(--teal); }
.card h3 { font-size:1.12rem; font-weight:700; margin-bottom:.5rem; }
.card p { color:var(--text2); font-size:.93rem; }
.section-ink .card{ background:var(--ink-bg2); border-color:rgba(255,255,255,.08); }
.section-ink .card p{ color:#aeb6e0; }
.section-ink .card-ico{ background:rgba(129,140,248,.16); color:#c7cdff; }

.tag { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.2rem .5rem; border-radius:6px; margin-left:.4rem; vertical-align:middle; }
.tag.live { background:rgba(21,128,61,.13); color:var(--green); }
.tag.soon { background:var(--amber-muted); color:var(--amber); }
.tag.partial { background:rgba(49,46,129,.1); color:var(--indigo); }
.section-ink .tag.live{background:rgba(34,197,94,.2);color:#86efac}.section-ink .tag.soon{background:rgba(245,158,11,.22);color:#fcd34d}.section-ink .tag.partial{background:rgba(129,140,248,.22);color:#c7cdff}

.split { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-top:3rem; }
.split.rev .split-text{ order:2; }
.split-text h3 { font-size:1.7rem; font-weight:800; }
.split-text > p { color:var(--text2); margin-top:1rem; }
.split-text ul { list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.split-text li { display:flex; gap:.7rem; align-items:flex-start; color:var(--text2); }
.split-text li .ck { color:var(--green); font-weight:800; flex-shrink:0; }
.split-text li b{ color:var(--text); }

.mock { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; }
.mock-bar { display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; background:var(--bg3); border-bottom:1px solid var(--border); }
.mock-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.mock-bar .r{background:#ff5f57}.mock-bar .y{background:#febc2e}.mock-bar .g{background:#28c840}
.mock-bar .url{ margin-left:.6rem; font-size:.72rem; color:var(--text3); background:#fff; border:1px solid var(--border); border-radius:6px; padding:.15rem .6rem; }
.mock-body { padding:1.1rem 1.2rem; }
.mock-tabs { display:flex; gap:.4rem; margin-bottom:.9rem; flex-wrap:wrap; }
.mock-tab { font-size:.72rem; font-weight:600; color:var(--text3); padding:.3rem .65rem; border-radius:7px; }
.mock-tab.on { background:var(--indigo); color:#fff; }
.mock-row { display:flex; justify-content:space-between; align-items:center; padding:.55rem .7rem; border-radius:8px; font-size:.83rem; }
.mock-row.head{ background:var(--bg3); font-weight:700; color:var(--text); }
.mock-row.gp{ background:var(--green-bright); color:#06351a; font-weight:700; }
.mock-row.noi{ background:#3b82f6; color:#fff; font-weight:700; }
.mock-row.ni{ background:var(--indigo); color:#fff; font-weight:800; }
.mock-row .amt{ font-variant-numeric:tabular-nums; font-weight:700; }
.mock-ai { display:flex; gap:.6rem; background:linear-gradient(90deg,rgba(49,46,129,.06),transparent); border-left:3px solid var(--indigo); padding:.6rem .8rem; border-radius:8px; margin:.7rem 0; }
.mock-ai .b{ font-size:1.1rem; }
.mock-ai p{ font-size:.78rem; color:var(--text2); margin:0; }
.mock-pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; }
.mock-pill.ok{ background:rgba(21,128,61,.13); color:var(--green); }
.mock-pill.warn{ background:var(--amber-muted); color:var(--amber); }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem; }
.kpi { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.3rem; box-shadow:var(--shadow); }
.kpi .lab{ font-size:.78rem; color:var(--text3); font-weight:600; }
.kpi .num{ font-size:2rem; font-weight:800; margin-top:.2rem; letter-spacing:-.02em; }
.kpi .num.up{ color:var(--green); } .kpi .num.brand{ color:var(--indigo); } .kpi .num.amber{ color:var(--amber); }
.kpi .sub{ font-size:.76rem; color:var(--text3); margin-top:.15rem; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; position:relative; }
.step { text-align:center; padding:1.5rem; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
.step-num { width:54px; height:54px; border-radius:50%; background:var(--grad-brand); color:#fff; font-weight:800; font-size:1.4rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; box-shadow:0 8px 20px rgba(49,46,129,.3); }
.step h3{ font-size:1.12rem; font-weight:700; margin-bottom:.5rem; }
.step p{ color:var(--text2); font-size:.93rem; }

.compare-table { margin-top:3rem; width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.compare-table th, .compare-table td { padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--border); font-size:.93rem; color:var(--text); }
.compare-table thead th { background:var(--bg3); font-weight:700; }
.compare-table .clovi-col { background:var(--indigo-muted); font-weight:600; }
.compare-table th.clovi-col { background:var(--grad-brand); color:#fff; }
.compare-table .yes{ color:var(--green); font-weight:800; }
.compare-table .no{ color:var(--text3); }

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; align-items:stretch; }
.plan { background:#fff; border:1px solid var(--border); border-radius:20px; padding:2rem; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; }
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.plan.featured { border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; box-shadow:var(--shadow-lg); position:relative; }
.plan.featured .ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad-brand); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.35rem 1rem; border-radius:999px; }
.plan h3 { font-size:1.25rem; font-weight:800; }
.plan .who { color:var(--text3); font-size:.85rem; margin-top:.2rem; }
.plan .price { font-size:2.6rem; font-weight:800; margin:1.2rem 0 .2rem; }
.plan .price small { font-size:1rem; font-weight:600; color:var(--text3); }
.plan .annual { color:var(--text3); font-size:.85rem; }
.plan ul { list-style:none; margin:1.5rem 0; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.plan li { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--text2); }
.plan li .ck{ color:var(--green); font-weight:800; flex-shrink:0; }
.pricing-note { text-align:center; color:var(--text3); font-size:.85rem; margin-top:1.5rem; }

.sec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; }
.sec-item { text-align:center; padding:1.6rem 1rem; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); transition:transform .2s; }
.sec-item:hover{ transform:translateY(-4px); }
.sec-item .ico{ font-size:1.9rem; margin-bottom:.6rem; }
.sec-item h4{ font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.sec-item p{ font-size:.85rem; color:var(--text2); }

.faq-list { max-width:780px; margin:3rem auto 0; }
details.faq { border:1px solid var(--border); border-radius:12px; margin-bottom:.9rem; background:#fff; overflow:hidden; box-shadow:var(--shadow); }
details.faq summary { padding:1.2rem 1.4rem; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; color:var(--text); }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:'+'; color:var(--amber); font-weight:800; font-size:1.3rem; line-height:1; }
details.faq[open] summary::after{ content:'\2212'; }
details.faq p { padding:0 1.4rem 1.3rem; color:var(--text2); font-size:.95rem; }

.bottom-cta { background:var(--grad-brand); color:#fff; border-radius:26px; padding:4.5rem 2rem; text-align:center; margin:2rem 0; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.bottom-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 240px at 80% 0%, rgba(255,255,255,.14), transparent 60%); }
.bottom-cta > *{ position:relative; }
.bottom-cta h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:#fff; }
.bottom-cta p { color:rgba(255,255,255,.9); font-size:1.15rem; margin:1rem auto 2rem; max-width:560px; }

footer { border-top:1px solid var(--border); padding:3rem 0 2rem; background:var(--bg2); }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.foot-brand img{ height:32px; }
.foot-brand p{ color:var(--text2); font-size:.9rem; margin-top:.9rem; max-width:300px; }
.foot-col h5{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin-bottom:.9rem; }
.foot-col a{ display:block; color:var(--text2); text-decoration:none; font-size:.9rem; margin-bottom:.6rem; }
.foot-col a:hover{ color:var(--indigo); }
.foot-bottom { border-top:1px solid var(--border); margin-top:2.5rem; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--text3); font-size:.85rem; }
.foot-bottom .disc{ max-width:680px; }

.hero { padding: 4.5rem 0 4.5rem; position:relative; background:
  radial-gradient(1100px 520px at 82% -10%, rgba(49,46,129,.12), transparent 60%),
  radial-gradient(900px 480px at -5% 10%, rgba(217,119,6,.08), transparent 55%); }
.hero-grid { display:grid; grid-template-columns: 1.02fr 1.15fr; gap:3.2rem; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:700; color:var(--indigo); background:rgba(49,46,129,.08); padding:.4rem .9rem; border-radius:999px; margin-bottom:1.4rem; border:1px solid rgba(49,46,129,.12); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight:800; line-height:1.06; }
.hero p.lead { font-size:1.2rem; color:var(--text2); margin:1.5rem 0 0; max-width:540px; }
.hero-cta { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero-trust { margin-top:1.8rem; display:flex; gap:1.6rem; flex-wrap:wrap; color:var(--text3); font-size:.85rem; }
.hero-trust b{ color:var(--text2); }
.hero-visual{ position:relative; }
.hero-float{ position:absolute; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-lg); border-radius:13px; padding:.7rem .9rem; z-index:3; }
.float-tr{ top:-22px; right:-10px; }
.float-bl{ bottom:-26px; left:-18px; }

.chart-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.3rem; box-shadow:var(--shadow); }
.chart-card h4{ font-size:.95rem; font-weight:700; margin-bottom:.1rem; }
.chart-card .chsub{ font-size:.78rem; color:var(--text3); margin-bottom:.8rem; }
.bars{ display:flex; align-items:flex-end; gap:.5rem; height:130px; }
.bar{ flex:1; border-radius:6px 6px 0 0; background:var(--grad-brand); position:relative; transform-origin:bottom; animation:grow 1s cubic-bezier(.2,.8,.2,1) both; }
.bar.alt{ background:linear-gradient(180deg,var(--amber-bright),var(--amber-light)); }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.bar-labels{ display:flex; gap:.5rem; margin-top:.4rem; }
.bar-labels span{ flex:1; text-align:center; font-size:.66rem; color:var(--text3); }
.legend{ display:flex; gap:1rem; margin-top:.8rem; font-size:.74rem; color:var(--text2); flex-wrap:wrap; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:.3rem; vertical-align:middle; }
.spark path.line{ fill:none; stroke:var(--indigo); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.8s ease forwards; }
.spark path.area{ fill:url(#cfArea); }
@keyframes draw{ to{ stroke-dashoffset:0; } }

@media (max-width: 920px) {
  .hero-grid, .split, .split.rev .split-text { grid-template-columns:1fr !important; }
  .split.rev .split-text{ order:0; }
  .grid-3, .grid-2, .grid-4, .steps, .pricing-grid, .foot-grid, .kpis { grid-template-columns:1fr; }
  .grid-4, .kpis, .sec-grid { grid-template-columns:1fr 1fr; }
  .nav-links { display:none; }
  .compare-table { display:block; overflow-x:auto; white-space:nowrap; }
  .hero-float{ display:none; }
}
@media (max-width:560px){ .grid-4,.kpis,.sec-grid{grid-template-columns:1fr;} }

/* ── Batch-2 CONTRAST FIX (Pattern B) ── opaque chip fills so text/bg pair passes >=4.5.
   Base (light) chips only; .section-ink .* variants keep higher specificity for dark sections. */
.hero-eyebrow { background:#e8e7f5 !important; border-color:#c7c9ec !important; color:#312e81 !important; }
.section-label { background:#fef3c7 !important; color:#92400e !important; }
.tag.live, .mock-pill.ok { background:#dcfce7 !important; color:#15803d !important; }
.tag.partial { background:#e0e7ff !important; color:#3730a3 !important; }
.tag.soon, .mock-pill.warn { background:#fef3c7 !important; color:#92400e !important; }