:root {
    --cfo-navy-950: #061d38;
    --cfo-navy-900: #0b2f59;
    --cfo-navy-800: #174d80;
    --cfo-blue-100: #eaf3fb;
    --cfo-blue-50: #f6f9fc;
    --cfo-gold: #e89400;
    --cfo-gold-light: #ffbd24;
    --cfo-ink: #172433;
    --cfo-muted: #5b6a7a;
    --cfo-line: #dbe5ee;
    --cfo-white: #fff;
    --cfo-radius: 22px;
    --cfo-shadow: 0 22px 60px rgba(6, 29, 56, .11);
    --cfo-shell: min(1160px, calc(100% - 40px));
    --cfo-ease: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { margin: 0; color: var(--cfo-ink); background: var(--cfo-white); font: 400 1rem/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
button, a { touch-action: manipulation; }
h1, h2, h3 { margin: 0 0 .62em; color: var(--cfo-navy-950); font-family: Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.28rem, 2vw, 1.65rem); }
p { margin: 0 0 1.1rem; }
.cfo-shell { width: var(--cfo-shell); margin-inline: auto; }
.cfo-section { padding: clamp(72px, 9vw, 122px) 0; }
.cfo-section--soft { background: var(--cfo-blue-50); }
.cfo-section--navy { color: rgba(255,255,255,.78); background: var(--cfo-navy-950); }
.cfo-section--navy h2, .cfo-section--navy h3 { color: var(--cfo-white); }
.cfo-eyebrow { margin-bottom: 15px; color: var(--cfo-gold-light); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.cfo-eyebrow--dark { color: #ad5b00; }
.cfo-skip { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 11px 16px; color: var(--cfo-navy-950); background: var(--cfo-gold-light); transform: translateY(-160%); }
.cfo-skip:focus { transform: none; }

.cfo-topbar { color: rgba(255,255,255,.78); background: #03162a; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .78rem; }
.cfo-topbar__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.cfo-topbar a { color: var(--cfo-white); }
.cfo-header { position: sticky; z-index: 50; top: 0; background: rgba(8,37,70,.95); border-bottom: 1px solid rgba(255,255,255,.11); box-shadow: 0 12px 38px rgba(6,29,56,.14); backdrop-filter: blur(16px); }
.cfo-header__inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cfo-logo img { width: clamp(224px, 24vw, 300px); }
.cfo-nav { display: flex; align-items: center; gap: 24px; color: var(--cfo-white); }
.cfo-nav a { font-size: .9rem; font-weight: 720; text-decoration: none; }
.cfo-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 13px 22px; color: var(--cfo-navy-950); background: linear-gradient(135deg, var(--cfo-gold-light), var(--cfo-gold)); border: 0; border-radius: 999px; box-shadow: 0 12px 28px rgba(232,148,0,.23); font-weight: 820; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 160ms var(--cfo-ease), box-shadow 180ms ease; user-select: none; }
.cfo-button:active { transform: scale(.97); }
.cfo-button--small { min-height: 42px; padding: 10px 17px; font-size: .83rem; }
.cfo-button--ghost { color: var(--cfo-white); background: transparent; border: 1px solid rgba(255,255,255,.42); box-shadow: none; }
.cfo-button:focus-visible, .cfo-nav a:focus-visible, .cfo-back:focus-visible { outline: 3px solid var(--cfo-gold-light); outline-offset: 3px; }

.cfo-hero { position: relative; overflow: hidden; color: rgba(255,255,255,.82); background: radial-gradient(circle at 82% 20%, rgba(255,189,36,.18), transparent 24%), radial-gradient(circle at 8% 88%, rgba(66,145,207,.19), transparent 30%), linear-gradient(135deg, #104877, var(--cfo-navy-950) 64%, #031428); }
.cfo-hero::after { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(to right, transparent, #000 48%); content: ""; }
.cfo-hero__grid { position: relative; z-index: 1; min-height: 660px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(48px, 8vw, 104px); padding-block: clamp(78px, 10vw, 118px); }
.cfo-hero h1 { max-width: 12ch; color: var(--cfo-white); }
.cfo-hero__lead { max-width: 62ch; font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.cfo-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.cfo-visual { position: relative; min-height: 455px; }
.cfo-visual__ring { position: absolute; inset: 30px 8px 18px 32px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; }
.cfo-visual__panel { position: absolute; top: 42px; right: 0; width: min(350px, 88%); padding: 25px; color: var(--cfo-ink); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.72); border-radius: var(--cfo-radius); box-shadow: 0 28px 78px rgba(1,14,28,.35); }
.cfo-visual__panel strong { display: block; color: var(--cfo-navy-900); font-family: Georgia, serif; font-size: 1.35rem; }
.cfo-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 23px; }
.cfo-score span { height: 90px; display: flex; align-items: flex-end; justify-content: center; padding: 10px 4px; color: var(--cfo-white); background: linear-gradient(var(--cfo-gold-light), var(--cfo-gold)); border-radius: 9px 9px 4px 4px; font-size: .66rem; font-weight: 800; }
.cfo-score span:nth-child(1) { height: 60px; margin-top: 30px; opacity: .62; }
.cfo-score span:nth-child(2) { height: 75px; margin-top: 15px; opacity: .8; }
.cfo-visual__card { position: absolute; z-index: 2; left: 0; bottom: 45px; width: min(275px, 70%); padding: 22px; color: var(--cfo-white); background: rgba(6,29,56,.84); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; box-shadow: 0 20px 50px rgba(1,14,28,.25); backdrop-filter: blur(15px); }
.cfo-visual__card small { display: block; margin-bottom: 12px; color: var(--cfo-gold-light); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cfo-visual__card ul { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; font-size: .82rem; }
.cfo-visual__card li::before { margin-right: 8px; color: var(--cfo-gold-light); content: "✓"; }

.cfo-proof { background: var(--cfo-white); border-bottom: 1px solid var(--cfo-line); box-shadow: 0 14px 42px rgba(6,29,56,.055); }
.cfo-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cfo-proof__grid div { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-right: 1px solid var(--cfo-line); }
.cfo-proof__grid div:last-child { border-right: 0; }
.cfo-proof strong { color: var(--cfo-navy-900); font-family: Georgia, serif; font-size: 1.22rem; }
.cfo-proof span { color: var(--cfo-muted); font-size: .82rem; }

.cfo-heading { max-width: 780px; margin-bottom: 50px; }
.cfo-heading p:last-child { color: var(--cfo-muted); font-size: 1.08rem; }
.cfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.cfo-card { position: relative; overflow: hidden; padding: 30px; background: var(--cfo-white); border: 1px solid var(--cfo-line); border-radius: 18px; box-shadow: 0 16px 42px rgba(6,29,56,.065); transition: transform 220ms var(--cfo-ease), box-shadow 220ms ease, border-color 180ms ease; }
.cfo-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--cfo-gold-light), var(--cfo-gold)); content: ""; }
.cfo-card__number { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 24px; color: var(--cfo-navy-900); background: var(--cfo-blue-100); border: 1px solid #d4e5f3; border-radius: 50%; font-size: .74rem; font-weight: 850; }
.cfo-card p { color: var(--cfo-muted); }
.cfo-card__outcome { color: #9c5500 !important; font-size: .82rem; font-weight: 760; }
.cfo-link { color: var(--cfo-navy-800); font-weight: 850; text-decoration: none; }
.cfo-link span { display: inline-block; transition: transform 160ms var(--cfo-ease); }

.cfo-problem-grid, .cfo-benefit-grid, .cfo-package-grid, .cfo-step-grid, .cfo-audience-grid, .cfo-deliverables { display: grid; gap: 18px; }
.cfo-problem-grid, .cfo-benefit-grid, .cfo-step-grid { grid-template-columns: repeat(4, 1fr); }
.cfo-problem, .cfo-benefit, .cfo-step, .cfo-audience, .cfo-deliverable { padding: 25px; background: var(--cfo-white); border: 1px solid var(--cfo-line); border-radius: 16px; }
.cfo-problem { border-left: 3px solid #cf745e; }
.cfo-problem strong, .cfo-audience strong { display: block; margin-bottom: 7px; color: var(--cfo-navy-950); }
.cfo-problem p, .cfo-benefit p, .cfo-step p, .cfo-audience p { margin: 0; color: var(--cfo-muted); font-size: .9rem; }
.cfo-benefit__mark, .cfo-step__number { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 19px; color: var(--cfo-gold); background: #fff5df; border-radius: 50%; font-weight: 850; }
.cfo-package-grid { grid-template-columns: repeat(3, 1fr); }
.cfo-package { display: flex; flex-direction: column; padding: 32px; background: var(--cfo-white); border: 1px solid var(--cfo-line); border-radius: 18px; box-shadow: 0 14px 40px rgba(6,29,56,.06); }
.cfo-package--featured { border: 2px solid var(--cfo-gold); transform: translateY(-10px); }
.cfo-package ul, .cfo-feature-list { padding: 0; margin: 20px 0 27px; list-style: none; }
.cfo-package li, .cfo-feature-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--cfo-line); }
.cfo-package li::before, .cfo-feature-list li::before { position: absolute; left: 0; color: var(--cfo-gold); content: "✓"; font-weight: 900; }
.cfo-package .cfo-button { margin-top: auto; }
.cfo-audience-grid { grid-template-columns: repeat(3, 1fr); }
.cfo-deliverables { grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.cfo-deliverable { color: var(--cfo-navy-950); font-weight: 760; text-align: center; }

.cfo-detail-hero { position: relative; overflow: hidden; color: rgba(255,255,255,.8); background: radial-gradient(circle at 82% 20%, rgba(255,189,36,.15), transparent 25%), linear-gradient(130deg, #104877, var(--cfo-navy-950)); }
.cfo-detail-hero::after { position: absolute; right: -180px; bottom: -330px; width: 650px; height: 650px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }
.cfo-detail-hero__inner { position: relative; z-index: 1; max-width: 920px; padding-block: clamp(88px, 12vw, 150px); }
.cfo-detail-hero h1 { max-width: 14ch; color: var(--cfo-white); }
.cfo-detail-hero__summary { max-width: 68ch; font-size: 1.15rem; }
.cfo-breadcrumb { padding: 16px 0; color: var(--cfo-muted); background: var(--cfo-blue-50); border-bottom: 1px solid var(--cfo-line); font-size: .82rem; }
.cfo-breadcrumb a { color: var(--cfo-navy-800); }
.cfo-content { max-width: 920px; }
.cfo-content > p { color: var(--cfo-muted); font-size: 1.04rem; }
.cfo-back { display: inline-block; margin-top: 28px; color: var(--cfo-navy-800); font-weight: 800; }
.cfo-cta { padding: clamp(48px, 7vw, 72px); color: rgba(255,255,255,.8); background: linear-gradient(120deg, var(--cfo-navy-800), var(--cfo-navy-950)); border-radius: var(--cfo-radius); box-shadow: var(--cfo-shadow); text-align: center; }
.cfo-cta h2 { color: var(--cfo-white); }
.cfo-faq { display: grid; gap: 12px; }
.cfo-faq details { padding: 22px 24px; background: var(--cfo-white); border: 1px solid var(--cfo-line); border-radius: 14px; }
.cfo-faq summary { cursor: pointer; color: var(--cfo-navy-950); font-weight: 780; }
.cfo-faq p { margin: 15px 0 0; color: var(--cfo-muted); }

.cfo-footer { padding: 66px 0 28px; color: rgba(255,255,255,.7); background: linear-gradient(145deg, #071f3a, #031428); }
.cfo-footer__grid { display: grid; grid-template-columns: 1.5fr .65fr 1fr; gap: 54px; }
.cfo-footer img { width: min(300px, 100%); margin-bottom: 18px; }
.cfo-footer h2 { color: var(--cfo-white); font-family: inherit; font-size: .75rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.cfo-footer a { color: var(--cfo-white); }
.cfo-footer ul { padding: 0; margin: 0; list-style: none; }
.cfo-footer li { margin: 8px 0; }
.cfo-footer__bottom { margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); font-size: .82rem; }

@media (hover: hover) and (pointer: fine) {
    .cfo-button:hover { transform: translateY(-2px); box-shadow: 0 17px 37px rgba(232,148,0,.32); }
    .cfo-card:hover { border-color: #c2d6e7; box-shadow: var(--cfo-shadow); transform: translateY(-5px); }
    .cfo-link:hover span { transform: translateX(4px); }
}

@media (max-width: 960px) {
    .cfo-hero__grid { grid-template-columns: 1fr; }
    .cfo-visual { max-width: 600px; width: 100%; }
    .cfo-grid { grid-template-columns: repeat(2, 1fr); }
    .cfo-problem-grid, .cfo-benefit-grid, .cfo-step-grid { grid-template-columns: repeat(2, 1fr); }
    .cfo-nav > a:not(.cfo-button) { display: none; }
    .cfo-footer__grid { grid-template-columns: 1fr 1fr; }
    .cfo-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    :root { --cfo-shell: min(100% - 28px, 1160px); }
    .cfo-section { padding-block: 68px; }
    .cfo-topbar__inner > span { display: none; }
    .cfo-topbar__inner { justify-content: flex-end; }
    .cfo-header__inner { min-height: 74px; }
    .cfo-logo img { width: 205px; }
    .cfo-nav { gap: 10px; }
    .cfo-nav .cfo-button { padding-inline: 14px; font-size: .75rem; }
    .cfo-hero__grid { min-height: auto; padding-block: 58px 68px; }
    .cfo-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
    .cfo-visual { min-height: 430px; }
    .cfo-visual__panel { padding: 21px; }
    .cfo-visual__card { bottom: 24px; }
    .cfo-proof__grid { grid-template-columns: repeat(2, 1fr); }
    .cfo-proof__grid div:nth-child(2) { border-right: 0; }
    .cfo-proof__grid div:nth-child(-n+2) { border-bottom: 1px solid var(--cfo-line); }
    .cfo-proof__grid div { min-height: 96px; padding: 17px; }
    .cfo-grid, .cfo-problem-grid, .cfo-benefit-grid, .cfo-package-grid, .cfo-step-grid, .cfo-audience-grid, .cfo-deliverables, .cfo-footer__grid { grid-template-columns: 1fr; }
    .cfo-package--featured { transform: none; }
    .cfo-footer__brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .cfo-button, .cfo-card, .cfo-link span { transform: none !important; }
}

/* Keep the supplied white wordmark legible against the light navigation. */
.cfo-header .cfo-logo {
    display: grid;
    place-items: center;
    padding: 5px 12px;
    background: var(--cfo-navy-950);
    border-radius: 14px;
}
.cfo-header .cfo-logo img { width: clamp(205px, 22vw, 260px); }

/* 2026 visual refresh: shared Wave-inspired visual language, no content changes. */
:root {
    --cfo-navy-950: #082b58;
    --cfo-navy-900: #0b3c75;
    --cfo-navy-800: #1263ba;
    --cfo-blue-50: #f7fbff;
    --cfo-blue-100: #e9f4ff;
    --cfo-gold: #f28a00;
    --cfo-ink: #0b2952;
    --cfo-muted: #4f6482;
    --cfo-line: #dbe8f4;
    --cfo-radius: 24px;
    --cfo-shadow: 0 22px 58px rgba(16,70,135,.12);
}
body { background: #fffefd; }
h1, h2, h3 { letter-spacing: -.035em; }
.cfo-topbar { background: var(--cfo-navy-950); }
.cfo-header { background: rgba(255,254,253,.97); border-bottom-color: var(--cfo-line); box-shadow: 0 4px 18px rgba(7,37,77,.04); }
.cfo-nav { color: var(--cfo-navy-950); }
.cfo-nav > a:not(.cfo-button) { font-weight: 740; }
.cfo-logo img { filter: none; }
.cfo-button { color: #fff; background: #1455f5; box-shadow: 0 10px 24px rgba(20,85,245,.22); }
.cfo-button--ghost { color: var(--cfo-navy-950); background: #fff; border: 1.5px solid var(--cfo-navy-950); }
.cfo-eyebrow, .cfo-eyebrow--dark { color: #6250c9; }
.cfo-hero { color: var(--cfo-muted); background: linear-gradient(112deg, #fffdfa, #f6f0ff 45%, #dff1ff); }
.cfo-hero h1 { color: var(--cfo-navy-950); }
.cfo-hero::before { border-color: rgba(20,85,245,.16); }
.cfo-visual__panel { border-color: rgba(20,85,245,.13); background: rgba(255,255,255,.92); }
.cfo-visual__chart span { background: linear-gradient(180deg, #82c9ff, #1455f5); }
.cfo-visual__card { background: var(--cfo-navy-950); }
.cfo-proof { background: #fff; border-block: 1px solid var(--cfo-line); }
.cfo-proof strong { color: #1455f5; }
.cfo-section--soft { background: linear-gradient(180deg,#f8fbff,#edf7ff); }
.cfo-card, .cfo-problem, .cfo-benefit, .cfo-step, .cfo-audience, .cfo-deliverable, .cfo-package { border-color: var(--cfo-line); border-radius: 19px; }
.cfo-card { box-shadow: none; }
.cfo-card:hover { border-color: #9fc6ec; }
.cfo-section--navy, .cfo-cta { background: linear-gradient(125deg,#082b58,#0e55a2); }
.cfo-detail-hero { background: linear-gradient(115deg,#082b58,#155cb0); }
.cfo-detail-hero::after { border-color: rgba(255,255,255,.17); }
.cfo-package--featured { border-color: #1455f5; }
.cfo-benefit__mark, .cfo-step__number { color: #1455f5; background: #e5f2ff; }
.cfo-problem { border-left-color: #1455f5; }
.cfo-footer { background: #061f42; }
@media (hover: hover) and (pointer: fine) {
 .cfo-button:hover { background:#073ecd; }
}


/* --------------------------------------------------------------------------
   Bizuptics CFO 2026 design system — same brand, focused advisory expression
   Visual-only layer. Existing page copy and service details remain intact.
   -------------------------------------------------------------------------- */
:root {
    --cfo-brand-blue: #325197;
    --cfo-brand-sky: #7cc2e9;
    --cfo-brand-orange: #ff6d00;
    --cfo-brand-gold: #ffbf00;
    --cfo-navy-950: #08284d;
    --cfo-navy-900: #0d3768;
    --cfo-navy-800: #325197;
    --cfo-blue-50: #f5fbff;
    --cfo-blue-100: #e8f5fc;
    --cfo-gold: #ff6d00;
    --cfo-gold-light: #ffbf00;
    --cfo-ink: #102b4f;
    --cfo-muted: #556a82;
    --cfo-line: #dce8f1;
    --cfo-radius: 28px;
    --cfo-shadow: 0 24px 68px rgba(16,53,96,.13);
}

body { color: var(--cfo-ink); background: #fffdfa; }
h1, h2, h3 {
    color: var(--cfo-navy-950);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 780;
    letter-spacing: -.048em;
}
h1 { line-height: .98; }
h2 { line-height: 1.02; }
.cfo-eyebrow, .cfo-eyebrow--dark { color: var(--cfo-brand-orange); letter-spacing: .15em; }

.cfo-topbar { background: var(--cfo-navy-950); border-bottom: 1px solid rgba(255,255,255,.08); }
.cfo-header {
    background: rgba(255,253,250,.96);
    border-bottom: 1px solid rgba(50,81,151,.12);
    box-shadow: 0 8px 28px rgba(8,40,77,.05);
    backdrop-filter: blur(18px) saturate(145%);
}
.cfo-header__inner { min-height: 88px; }
.cfo-header .cfo-logo {
    min-width: 220px;
    min-height: 54px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--cfo-navy-950), #153f73);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(8,40,77,.12);
}
.cfo-header .cfo-logo img { width: clamp(205px, 21vw, 250px); }
.cfo-nav { color: var(--cfo-navy-950); }
.cfo-nav > a:not(.cfo-button) { font-weight: 760; text-decoration-thickness: .08em; text-decoration-color: transparent; }

.cfo-button {
    color: #fff;
    background: linear-gradient(135deg, var(--cfo-brand-orange), #f25700);
    box-shadow: 0 12px 28px rgba(255,109,0,.22);
    font-weight: 800;
}
.cfo-button--ghost { color: var(--cfo-navy-950); background: rgba(255,255,255,.72); border: 1.5px solid rgba(8,40,77,.68); box-shadow: none; }

.cfo-hero {
    color: var(--cfo-muted);
    background:
        radial-gradient(circle at 86% 18%, rgba(124,194,233,.46), transparent 25%),
        radial-gradient(circle at 77% 86%, rgba(255,191,0,.16), transparent 20%),
        linear-gradient(118deg, #fffdfa 0%, #f6fbff 44%, #e8f6fd 100%);
}
.cfo-hero::before { border-color: rgba(50,81,151,.17); }
.cfo-hero__grid { min-height: 700px; gap: clamp(36px, 6vw, 88px); }
.cfo-hero h1 { max-width: 11ch; color: var(--cfo-navy-950); }
.cfo-hero__lead { color: var(--cfo-muted); }
.cfo-visual { filter: drop-shadow(0 24px 34px rgba(31,70,113,.09)); }
.cfo-visual__ring { border-color: rgba(50,81,151,.18); }
.cfo-visual__panel {
    color: var(--cfo-ink);
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(50,81,151,.14);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(30,70,115,.16);
}
.cfo-visual__chart span { background: linear-gradient(180deg, var(--cfo-brand-sky), var(--cfo-brand-blue)); }
.cfo-visual__card {
    color: #fff;
    background: linear-gradient(145deg, var(--cfo-navy-950), #23457f);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    box-shadow: 0 22px 52px rgba(8,40,77,.22);
}
.cfo-score { color: var(--cfo-brand-gold); }

.cfo-proof { background: rgba(255,255,255,.95); border-block: 1px solid var(--cfo-line); box-shadow: 0 14px 40px rgba(16,53,96,.05); }
.cfo-proof strong { color: var(--cfo-brand-blue); }
.cfo-section { padding-block: clamp(76px, 9vw, 122px); }
.cfo-section--soft { background: linear-gradient(180deg, #f6fbff 0%, #eaf6fc 100%); }
.cfo-section--navy {
    background:
        radial-gradient(circle at 88% 12%, rgba(124,194,233,.18), transparent 22%),
        linear-gradient(135deg, var(--cfo-navy-950), #173f78);
}

.cfo-card, .cfo-problem, .cfo-benefit, .cfo-step, .cfo-audience, .cfo-deliverable, .cfo-package {
    background: rgba(255,255,255,.94);
    border-color: rgba(50,81,151,.13);
    border-radius: 22px;
    box-shadow: none;
}
.cfo-card { transition: transform 220ms var(--cfo-ease), box-shadow 220ms ease, border-color 180ms ease; }
.cfo-card__number { color: var(--cfo-brand-orange); }
.cfo-card__outcome { color: var(--cfo-brand-blue); }
.cfo-link { color: var(--cfo-brand-blue); }
.cfo-problem { border-left: 4px solid var(--cfo-brand-orange); }
.cfo-benefit__mark, .cfo-step__number { color: var(--cfo-brand-blue); background: var(--cfo-blue-100); }
.cfo-package--featured { border: 2px solid var(--cfo-brand-blue); box-shadow: 0 20px 50px rgba(50,81,151,.1); }
.cfo-feature-list li::before, .cfo-package li::before { color: var(--cfo-brand-orange); }

.cfo-detail-hero {
    color: var(--cfo-muted);
    background:
        radial-gradient(circle at 84% 16%, rgba(124,194,233,.45), transparent 24%),
        radial-gradient(circle at 76% 94%, rgba(255,191,0,.15), transparent 18%),
        linear-gradient(118deg, #fffdfa 0%, #f4fbff 52%, #e7f5fc 100%);
    border-bottom: 1px solid var(--cfo-line);
}
.cfo-detail-hero::before {
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image: linear-gradient(rgba(50,81,151,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(50,81,151,.055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to right, transparent 8%, #000 80%);
    content: "";
}
.cfo-detail-hero::after { border-color: rgba(50,81,151,.13); }
.cfo-detail-hero__inner { position: relative; z-index: 1; }
.cfo-detail-hero h1 { color: var(--cfo-navy-950); }
.cfo-detail-hero__summary { color: var(--cfo-muted); }
.cfo-breadcrumb { background: #fff; border-bottom-color: var(--cfo-line); }
.cfo-breadcrumb a, .cfo-back { color: var(--cfo-brand-blue); }

.cfo-cta {
    background:
        radial-gradient(circle at 10% 15%, rgba(124,194,233,.14), transparent 24%),
        linear-gradient(125deg, var(--cfo-navy-950), #173f78);
    border-radius: 28px;
    box-shadow: var(--cfo-shadow);
}
.cfo-faq details { border-color: rgba(50,81,151,.13); border-radius: 18px; }
.cfo-footer { background: linear-gradient(145deg, #061f3d, #08284d); }

.cfo-reveal-ready {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease, transform 620ms var(--cfo-ease);
}
.cfo-reveal-ready.is-visible { opacity: 1; transform: none; }
.cfo-header.is-scrolled { box-shadow: 0 12px 34px rgba(8,40,77,.10); }

@media (hover: hover) and (pointer: fine) {
    .cfo-button:hover { background: linear-gradient(135deg, #f25f00, #d94f00); box-shadow: 0 15px 32px rgba(255,109,0,.28); }
    .cfo-button--ghost:hover { color: #fff; background: var(--cfo-navy-950); border-color: var(--cfo-navy-950); }
    .cfo-card:hover { border-color: rgba(50,81,151,.3); box-shadow: 0 22px 52px rgba(16,53,96,.1); transform: translateY(-5px); }
    .cfo-nav > a:not(.cfo-button):hover { text-decoration-color: var(--cfo-brand-orange); }
}

@media (max-width: 960px) {
    .cfo-header { background: rgba(255,253,250,.98); }
    .cfo-hero__grid { min-height: auto; padding-block: 78px 70px; }
}

@media (max-width: 640px) {
    .cfo-header .cfo-logo { min-width: 0; min-height: 48px; padding: 4px 9px; border-radius: 13px; }
    .cfo-header .cfo-logo img { width: 184px; }
    .cfo-hero { background: linear-gradient(155deg, #fffdfa, #e9f6fd); }
    .cfo-visual { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
    .cfo-reveal-ready { opacity: 1; transform: none; transition: none; }
}


/* Editorial photography layer. See /ASSET-SOURCES.md for source and license. */
.cfo-visual::before {
    position: absolute;
    inset: 18px 24px 70px 18px;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(8,40,77,.02), rgba(8,40,77,.18)),
        url("https://images.pexels.com/photos/7693683/pexels-photo-7693683.jpeg?auto=compress&cs=tinysrgb&w=1400");
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(50,81,151,.14);
    border-radius: 30px;
    box-shadow: 0 28px 70px rgba(30,70,115,.16);
    content: "";
    transform: rotate(1deg);
}
.cfo-visual__panel { top: 30px; }
.cfo-visual__card { bottom: 28px; }
@media (max-width: 640px) {
    .cfo-visual::before { inset: 22px 8px 82px 8px; border-radius: 24px; transform: none; }
}