/* =========================================================
   BILFICOM 2026 — INNER PAGES
   Append this to bilficom-modern.css from v1
   ========================================================= */
.bf-inner-hero {
    position:relative;
    padding:105px 0 96px;
    background:
      radial-gradient(circle at 86% 10%,rgba(214,163,65,.16),transparent 24%),
      linear-gradient(135deg,#f5f8fb 0%,#fff 62%,#eef3f8 100%);
}
.bf-inner-hero-compact { padding:86px 0 78px; }
.bf-inner-hero h1 { max-width:850px; margin:0; color:var(--bf-navy); font-size:clamp(42px,6vw,70px); line-height:1.03; letter-spacing:-.045em; }
.bf-inner-hero p { max-width:720px; margin:24px 0 0; color:var(--bf-muted); font-size:18px; }
.bf-inner-hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:75px; align-items:end; }
.bf-inner-hero-note { padding:30px; border-left:3px solid var(--bf-gold); background:rgba(255,255,255,.65); }
.bf-inner-hero-note span,.bf-card-label { display:block; margin-bottom:9px; color:var(--bf-blue); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.bf-inner-hero-note strong { color:var(--bf-navy); font-size:20px; line-height:1.45; }
.bf-feature-image-short,.bf-feature-image-short img { min-height:470px; }
.bf-mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bf-statement-card { padding:44px; border:1px solid var(--bf-line); border-radius:var(--bf-radius); background:#fff; }
.bf-statement-card h3 { margin:10px 0 20px; color:var(--bf-navy); font-size:28px; line-height:1.25; }
.bf-statement-card p { color:var(--bf-muted); }
.bf-statement-card-dark { color:#fff; background:var(--bf-navy); border-color:var(--bf-navy); }
.bf-statement-card-dark h3 { color:#fff; }
.bf-statement-card-dark p { color:#b9c7d7; }
.bf-statement-card-dark .bf-card-label { color:var(--bf-gold-soft); }
.bf-principle-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--bf-line); border-bottom:1px solid var(--bf-line); }
.bf-principle-grid article { padding:34px 28px; border-right:1px solid var(--bf-line); }
.bf-principle-grid article:last-child { border-right:0; }
.bf-principle-grid b { color:var(--bf-blue); font-size:12px; }
.bf-principle-grid h3 { margin:14px 0 8px; color:var(--bf-navy); font-size:21px; }
.bf-principle-grid p { margin:0; color:var(--bf-muted); font-size:14px; }
.bf-cta-band { padding:76px 0; background:var(--bf-navy); }
.bf-cta-band-inner { display:flex; justify-content:space-between; align-items:center; gap:45px; }
.bf-cta-band h2 { max-width:750px; margin:0; color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.1; letter-spacing:-.035em; }

.bf-profile-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:75px; align-items:start; }
.bf-profile-aside { position:sticky; top:120px; }
.bf-profile-image { overflow:hidden; border-radius:26px; background:var(--bf-bg); box-shadow:var(--bf-shadow); }
.bf-profile-image img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.bf-profile-caption { padding:20px 4px; }
.bf-profile-caption span { display:block; color:var(--bf-muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.bf-profile-caption strong { display:block; margin-top:4px; color:var(--bf-navy); }
.bf-profile-copy h2 { margin-bottom:22px; }
.bf-lead { color:var(--bf-navy)!important; font-size:20px!important; font-weight:650; line-height:1.6; }
.bf-richtext { color:var(--bf-muted); line-height:1.85; }
.bf-richtext p { margin:0 0 18px; }
.bf-richtext ul { padding-left:20px; }

.bf-dynamic-service { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.bf-dynamic-service-image { overflow:hidden; border-radius:24px; }
.bf-dynamic-service-image img { display:block; width:100%; max-height:520px; object-fit:cover; }

.bf-course-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:65px; align-items:center; }
.bf-course-meta-card { padding:28px; border:1px solid var(--bf-line); border-radius:20px; background:#fff; box-shadow:var(--bf-shadow); }
.bf-course-meta-card > div { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--bf-line); }
.bf-course-meta-card > div:last-child { border-bottom:0; }
.bf-course-meta-card span { color:var(--bf-muted); font-size:13px; }
.bf-course-meta-card strong { color:var(--bf-navy); text-align:right; }
.bf-course-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:start; }
.bf-course-description { font-size:17px; }
.bf-course-note { margin-top:32px; padding:22px; border-radius:15px; background:#eef4fa; }
.bf-course-note strong { color:var(--bf-navy); }
.bf-course-note p { margin:7px 0 0; color:var(--bf-muted); font-size:14px; }
.bf-enrol-card { overflow:hidden; border:1px solid var(--bf-line); border-radius:22px; background:#fff; box-shadow:var(--bf-shadow); }
.bf-enrol-card-image { display:block; width:100%; max-height:290px; object-fit:cover; }
.bf-enrol-card-body { padding:30px; }
.bf-enrol-card h3 { margin:4px 0 22px; color:var(--bf-navy); font-size:27px; }
.bf-btn-block { width:100%; }
.bf-small-copy { margin:16px 0 0; color:var(--bf-muted); font-size:13px; }
.bf-small-copy a { color:var(--bf-blue); font-weight:700; }
.bf-payment-box { margin-top:22px; padding-top:22px; border-top:1px solid var(--bf-line); }
.bf-payment-box h4 { color:var(--bf-navy); }
.bf-price-list { margin:0 0 20px; }
.bf-price-list div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--bf-line); }
.bf-price-list dt { color:var(--bf-muted); }
.bf-price-list dd { margin:0; color:var(--bf-navy); font-weight:800; }
.bf-success-box { margin-top:20px; text-align:center; }
.bf-success-icon { width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:#23865b; font-size:24px; font-weight:900; }

.bf-form-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.bf-form-intro { position:sticky; top:120px; }
.bf-modern-form,.bf-contact-form-card { padding:38px; border:1px solid var(--bf-line); border-radius:22px; background:#fff; box-shadow:var(--bf-shadow); }
.bf-field { display:block; margin-bottom:18px; }
.bf-field > span { display:block; margin-bottom:7px; color:var(--bf-navy); font-size:13px; font-weight:750; }
.bf-field input,.bf-field select,.bf-field textarea,
.bf-contact-form-card input,.bf-contact-form-card select,.bf-contact-form-card textarea {
    width:100%; min-height:52px; padding:12px 14px; border:1px solid #d6dce5; border-radius:10px; outline:none; color:var(--bf-ink); background:#fff;
}
.bf-field textarea,.bf-contact-form-card textarea { min-height:140px; resize:vertical; }
.bf-field input:focus,.bf-field select:focus,.bf-field textarea:focus,
.bf-contact-form-card input:focus,.bf-contact-form-card select:focus,.bf-contact-form-card textarea:focus { border-color:var(--bf-blue); box-shadow:0 0 0 3px rgba(29,90,150,.08); }
.bf-form-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bf-form-message { margin-top:15px; padding:13px 15px; border-radius:9px; background:#eef4fa; color:var(--bf-navy); }

.bf-contact-page-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; align-items:start; }
.bf-contact-details h2 { margin-bottom:18px; }
.bf-contact-details > p { color:var(--bf-muted); }
.bf-contact-list { margin-top:35px; border-top:1px solid var(--bf-line); }
.bf-contact-list > * { display:block; padding:20px 0; border-bottom:1px solid var(--bf-line); text-decoration:none; }
.bf-contact-list span { display:block; color:var(--bf-muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.bf-contact-list strong { display:block; margin-top:4px; color:var(--bf-navy); font-size:16px; line-height:1.5; }
.bf-contact-form-card h3 { margin:0 0 22px; color:var(--bf-navy); font-size:28px; }
.bf-contact-form-card .form-row,.bf-contact-form-card .row { margin:0; }
.bf-contact-form-card .form-group { margin-bottom:15px; }
.bf-contact-form-card button,.bf-contact-form-card input[type=submit] { min-height:52px; padding:0 22px; border:0; border-radius:11px; color:#fff; background:var(--bf-navy); font-weight:800; cursor:pointer; }
.bf-map-full iframe { display:block; width:100%; height:470px; border:0; }

@media(max-width:980px){
    .bf-inner-hero-grid,.bf-profile-grid,.bf-dynamic-service,.bf-course-hero-grid,.bf-course-layout,.bf-form-layout,.bf-contact-page-grid { grid-template-columns:1fr; gap:45px; }
    .bf-profile-aside,.bf-form-intro { position:static; }
    .bf-profile-aside { max-width:520px; }
    .bf-principle-grid { grid-template-columns:1fr 1fr; }
    .bf-principle-grid article:nth-child(2) { border-right:0; }
    .bf-principle-grid article:nth-child(-n+2) { border-bottom:1px solid var(--bf-line); }
}
@media(max-width:680px){
    .bf-inner-hero { padding:72px 0 65px; }
    .bf-inner-hero h1 { font-size:clamp(38px,11vw,52px); }
    .bf-inner-hero p { font-size:16px; }
    .bf-mission-grid,.bf-principle-grid,.bf-form-two { grid-template-columns:1fr; }
    .bf-principle-grid article { border-right:0; border-bottom:1px solid var(--bf-line); }
    .bf-principle-grid article:last-child { border-bottom:0; }
    .bf-statement-card,.bf-modern-form,.bf-contact-form-card { padding:26px 22px; }
    .bf-cta-band-inner { align-items:flex-start; flex-direction:column; }
    .bf-course-meta-card > div { flex-direction:column; gap:4px; }
    .bf-course-meta-card strong { text-align:left; }
}


/* =========================================================
   V3 — DISTINCT EDITORIAL INNER HEROES
   ========================================================= */
.bf-inner-hero-dark {
    position: relative;
    isolation: isolate;
    min-height: 500px;
    padding: 92px 0 88px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 22%, rgba(54,112,169,.30), transparent 28%),
        radial-gradient(circle at 15% 95%, rgba(214,163,65,.14), transparent 24%),
        linear-gradient(135deg, #08182c 0%, #102b4b 58%, #0c2039 100%);
}
.bf-inner-hero-dark::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to right, rgba(0,0,0,.75), transparent 85%);
}
.bf-inner-hero-dark::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -130px;
    top: -190px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
}
.bf-hero-word {
    position: absolute;
    z-index: -1;
    left: 2.5%;
    bottom: -44px;
    color: rgba(255,255,255,.035);
    font-size: clamp(110px, 17vw, 245px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.07em;
    white-space: nowrap;
    pointer-events: none;
}
.bf-editorial-hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 76px;
    align-items: center;
}
.bf-editorial-hero-copy {
    position: relative;
    z-index: 2;
}
.bf-inner-hero-dark h1 {
    max-width: 830px;
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 6vw, 74px);
    line-height: 1.01;
    letter-spacing: -.05em;
}
.bf-inner-hero-dark h1 em {
    color: #d9e7f5;
    font-style: normal;
}
.bf-inner-hero-dark p {
    max-width: 690px;
    margin: 25px 0 0;
    color: #b9c8d9;
    font-size: 17px;
    line-height: 1.75;
}
.bf-hero-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 30px;
}
.bf-hero-trail span {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: #d7e2ee;
    background: rgba(255,255,255,.04);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.bf-editorial-visual {
    position: relative;
    min-height: 410px;
}
.bf-editorial-image {
    position: absolute;
    inset: 0 0 35px 50px;
    overflow: hidden;
    border-radius: 26px;
    background: #0a192c;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.bf-editorial-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bf-editorial-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6,17,31,.40));
}
.bf-hero-quote {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    width: min(360px, 86%);
    padding: 24px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;
    background: rgba(9,26,47,.94);
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
}
.bf-hero-quote span,
.bf-contact-hero-card > span,
.bf-enroll-step-card > span {
    display: block;
    margin-bottom: 8px;
    color: #d9b76d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.bf-hero-quote strong {
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 1.45;
}

/* Services: no stock image required; capability stack becomes the visual. */
.bf-capability-stack {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(10px);
}
.bf-capability-stack > div {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 15px;
    min-height: 68px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}
.bf-capability-stack b {
    color: #d9b76d;
    font-size: 11px;
}
.bf-capability-stack span {
    color: #f5f8fb;
    font-size: 16px;
    font-weight: 700;
}

/* Profile: portrait becomes part of the hero rather than a separate banner. */
.bf-profile-hero {
    padding-bottom: 0;
}
.bf-profile-hero-grid {
    min-height: 510px;
    display: grid;
    grid-template-columns: 1.08fr .72fr;
    gap: 75px;
    align-items: end;
}
.bf-profile-hero .bf-editorial-hero-copy {
    align-self: center;
    padding-bottom: 78px;
}
.bf-profile-hero-image {
    align-self: end;
    height: 500px;
    overflow: hidden;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
.bf-profile-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bf-profile-role {
    margin-top: 30px;
    padding-left: 16px;
    border-left: 2px solid #d6a341;
}
.bf-profile-role span {
    display: block;
    color: #9eb2c8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.bf-profile-role strong {
    display: block;
    margin-top: 4px;
    color: #fff;
}

/* Course: combines image and transactional information in the hero. */
.bf-course-hero {
    padding: 74px 0;
}
.bf-course-hero-grid-v2 {
    align-items: center;
}
.bf-course-hero-panel {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background: rgba(255,255,255,.05);
    box-shadow: 0 28px 70px rgba(0,0,0,.22);
}
.bf-course-hero-image {
    height: 235px;
    overflow: hidden;
}
.bf-course-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.bf-course-meta-dark {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.bf-course-meta-dark > div {
    border-color: rgba(255,255,255,.10);
}
.bf-course-meta-dark span {
    color: #93a9bf;
}
.bf-course-meta-dark strong {
    color: #fff;
}

/* Enrolment: clearly communicates progression rather than looking like content. */
.bf-enroll-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .65fr;
    gap: 80px;
    align-items: center;
}
.bf-enroll-step-card {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    background: rgba(255,255,255,.045);
}
.bf-enroll-step-card ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bf-enroll-step-card li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    color: #9eb0c3;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
    font-weight: 650;
}
.bf-enroll-step-card li:last-child {
    border-bottom: 0;
}
.bf-enroll-step-card li b {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    font-size: 11px;
}
.bf-enroll-step-card li.is-done {
    color: #d2deea;
}
.bf-enroll-step-card li.is-done b {
    color: #fff;
    background: #285b86;
    border-color: #285b86;
}
.bf-enroll-step-card li.is-current {
    color: #fff;
}
.bf-enroll-step-card li.is-current b {
    color: #10233f;
    background: #d6a341;
    border-color: #d6a341;
}

/* Contact: address becomes an architectural hero card. */
.bf-contact-hero-card {
    position: relative;
    padding: 38px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 25px 60px rgba(0,0,0,.18);
}
.bf-contact-hero-card::before {
    content: "IBADAN";
    display: block;
    margin-bottom: 26px;
    color: rgba(255,255,255,.12);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}
.bf-contact-hero-card strong {
    display: block;
    color: #fff;
    font-size: 23px;
    line-height: 1.55;
}
.bf-contact-hero-card small {
    display: block;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: #9eb1c5;
    font-size: 12px;
    line-height: 1.6;
}
.bf-btn-ghost-light {
    color: #fff;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.04);
}
.bf-btn-ghost-light:hover {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.09);
}

/* Give the first content block a deliberate handoff from the hero. */
.bf-inner-hero-dark + .bf-section,
.bf-inner-hero-dark + .bf-section-soft {
    position: relative;
}
.bf-inner-hero-dark + .bf-section::before,
.bf-inner-hero-dark + .bf-section-soft::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(var(--bf-shell), calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(16,35,63,.13), transparent);
}

@media (max-width: 980px) {
    .bf-inner-hero-dark {
        min-height: auto;
        padding: 76px 0;
    }
    .bf-editorial-hero-grid,
    .bf-profile-hero-grid,
    .bf-enroll-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .bf-editorial-visual {
        min-height: 440px;
        max-width: 700px;
    }
    .bf-profile-hero {
        padding-bottom: 0;
    }
    .bf-profile-hero .bf-editorial-hero-copy {
        padding-bottom: 0;
    }
    .bf-profile-hero-image {
        width: min(100%, 560px);
        height: 500px;
    }
}
@media (max-width: 680px) {
    .bf-inner-hero-dark {
        padding: 62px 0;
    }
    .bf-inner-hero-dark h1 {
        font-size: clamp(40px, 12vw, 55px);
    }
    .bf-inner-hero-dark p {
        font-size: 16px;
    }
    .bf-hero-word {
        bottom: -15px;
        font-size: 28vw;
    }
    .bf-editorial-visual {
        min-height: 360px;
    }
    .bf-editorial-image {
        inset: 0 0 42px 18px;
    }
    .bf-hero-quote {
        padding: 20px;
    }
    .bf-profile-hero-image {
        height: 410px;
    }
    .bf-contact-hero-card,
    .bf-enroll-step-card {
        padding: 24px;
    }
}


/* =========================================================
   V4 — FOOTER-TONE ARTISTIC HERO SYSTEM
   Same visual family as the #0b1b31 footer, with restrained
   bubbles/orbits and layered background artistry.
   ========================================================= */

.bf-inner-hero-dark {
    background:
        radial-gradient(circle at 74% 22%, rgba(36,86,132,.24) 0, rgba(36,86,132,0) 30%),
        radial-gradient(circle at 16% 92%, rgba(214,163,65,.08) 0, rgba(214,163,65,0) 25%),
        linear-gradient(135deg, #071527 0%, #0b1b31 47%, #102744 100%);
}

/* Remove the grid look from V3 and replace it with soft editorial artistry. */
.bf-inner-hero-dark::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 87% 70%, rgba(255,255,255,.045) 0 3px, transparent 4px),
        radial-gradient(circle at 91% 60%, rgba(214,163,65,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 13%, rgba(255,255,255,.05) 0 4px, transparent 5px);
    background-size: auto;
    mask-image: none;
}

/* Large orbit/bubble composition */
.bf-inner-hero-dark::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 470px;
    right: -75px;
    top: -155px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    background:
        radial-gradient(circle at 37% 38%, rgba(255,255,255,.035) 0 4%, transparent 4.5%),
        radial-gradient(circle at 62% 68%, rgba(214,163,65,.11) 0 2.5%, transparent 3%);
    box-shadow:
        0 0 0 72px rgba(255,255,255,.018),
        0 0 0 145px rgba(255,255,255,.010);
}

/* Every hero gets a second family of soft bubbles using the background word layer. */
.bf-hero-word {
    left: auto;
    right: 3%;
    bottom: -28px;
    color: rgba(255,255,255,.025);
    font-size: clamp(100px, 15vw, 220px);
    letter-spacing: -.065em;
}

/* A gold/blue bubble cluster behind left-side copy. */
.bf-editorial-hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -105px;
    top: -78px;
    width: 215px;
    height: 215px;
    border: 1px solid rgba(214,163,65,.10);
    border-radius: 50%;
    box-shadow:
        64px 84px 0 -59px rgba(214,163,65,.20),
        104px 16px 0 -91px rgba(255,255,255,.18);
    pointer-events: none;
}

/* Gentle floating bubbles around visual/card side */
.bf-editorial-visual::before,
.bf-capability-stack::before,
.bf-profile-hero-image::before,
.bf-course-hero-panel::before,
.bf-enroll-step-card::before,
.bf-contact-hero-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(214,163,65,.16);
    border-radius: 50%;
    background: rgba(214,163,65,.025);
}

.bf-editorial-visual::before {
    right: -32px;
    bottom: 54px;
}

.bf-capability-stack,
.bf-profile-hero-image,
.bf-course-hero-panel,
.bf-enroll-step-card,
.bf-contact-hero-card {
    position: relative;
    z-index: 1;
}

.bf-capability-stack::before {
    right: -34px;
    top: -35px;
    width: 112px;
    height: 112px;
}

.bf-profile-hero-image::before {
    left: -44px;
    top: 70px;
    width: 118px;
    height: 118px;
}

.bf-course-hero-panel::before {
    right: -35px;
    bottom: -34px;
    width: 110px;
    height: 110px;
}

.bf-enroll-step-card::before {
    right: -32px;
    top: -32px;
    width: 96px;
    height: 96px;
}

.bf-contact-hero-card::after {
    right: -44px;
    bottom: -42px;
    width: 130px;
    height: 130px;
}

/* Cards remain translucent so the footer-tone background shows through. */
.bf-capability-stack,
.bf-enroll-step-card,
.bf-contact-hero-card {
    border-color: rgba(255,255,255,.09);
    background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    box-shadow: 0 28px 70px rgba(0,0,0,.17);
    backdrop-filter: blur(9px);
}

.bf-hero-quote {
    background: rgba(7,21,39,.94);
    border-color: rgba(255,255,255,.09);
}

/* Page-specific artistry, same family but not identical. */
.bf-about-hero {
    background:
        radial-gradient(circle at 76% 28%, rgba(35,88,138,.25), transparent 28%),
        radial-gradient(circle at 18% 95%, rgba(214,163,65,.08), transparent 24%),
        linear-gradient(135deg, #071527 0%, #0b1b31 52%, #102744 100%);
}

.bf-services-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(42,100,151,.25), transparent 31%),
        radial-gradient(circle at 62% 100%, rgba(214,163,65,.055), transparent 24%),
        linear-gradient(130deg, #071527 0%, #0b1b31 48%, #0e2948 100%);
}

.bf-profile-hero {
    background:
        radial-gradient(circle at 69% 30%, rgba(42,100,151,.22), transparent 27%),
        linear-gradient(135deg, #061322 0%, #0b1b31 56%, #102744 100%);
}

.bf-course-hero {
    background:
        radial-gradient(circle at 80% 16%, rgba(42,100,151,.25), transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(214,163,65,.07), transparent 23%),
        linear-gradient(135deg, #071527 0%, #0b1b31 50%, #102846 100%);
}

.bf-enroll-hero {
    background:
        radial-gradient(circle at 83% 32%, rgba(42,100,151,.22), transparent 27%),
        linear-gradient(135deg, #071527 0%, #0b1b31 54%, #0d243f 100%);
}

.bf-contact-hero {
    background:
        radial-gradient(circle at 78% 24%, rgba(42,100,151,.24), transparent 29%),
        radial-gradient(circle at 18% 92%, rgba(214,163,65,.065), transparent 24%),
        linear-gradient(135deg, #061423 0%, #0b1b31 50%, #102744 100%);
}

/* Additional decorative orbits visible on larger screens only */
@media (min-width: 981px) {
    .bf-about-hero .bf-editorial-visual::after,
    .bf-services-hero .bf-capability-stack::after,
    .bf-contact-hero .bf-contact-hero-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
    }

    .bf-about-hero .bf-editorial-visual::after {
        width: 34px;
        height: 34px;
        right: 18px;
        top: -20px;
        background: rgba(214,163,65,.18);
        box-shadow:
            -72px 20px 0 -10px rgba(255,255,255,.08),
            28px 74px 0 -7px rgba(44,105,159,.18);
    }

    .bf-services-hero .bf-capability-stack::after {
        width: 25px;
        height: 25px;
        left: -38px;
        bottom: 30px;
        background: rgba(214,163,65,.14);
        box-shadow:
            -35px -48px 0 -6px rgba(255,255,255,.08),
            24px -210px 0 -4px rgba(47,107,160,.18);
    }

    .bf-contact-hero .bf-contact-hero-card::before {
        width: 22px;
        height: 22px;
        right: 22px;
        top: 22px;
        background: rgba(214,163,65,.16);
        box-shadow:
            -52px 26px 0 -6px rgba(255,255,255,.08),
            25px 76px 0 -5px rgba(51,110,163,.20);
    }
}

@media (max-width: 680px) {
    .bf-inner-hero-dark::after {
        width: 300px;
        height: 300px;
        right: -155px;
        top: -95px;
        box-shadow:
            0 0 0 46px rgba(255,255,255,.014),
            0 0 0 92px rgba(255,255,255,.008);
    }

    .bf-editorial-hero-copy::before {
        width: 150px;
        height: 150px;
        left: -82px;
        top: -45px;
    }
}