/* ============================================================
   BOXFY — AI Services design system  (v3 — vibrant + readable)
   Fonts: Sora (display) + Plus Jakarta Sans (body)
   Palette: sky→blue→purple→pink gradient, white readable content,
            dark hero + footer for contrast.
   ============================================================ */
:root{
  --bxf-sky:#38BDF8; --bxf-blue:#4F7BF7; --bxf-indigo:#6366F1; --bxf-purple:#A855F7;
  --bxf-pink:#EC4899; --bxf-rose:#FB5A6A; --bxf-orange:#FF6A3D;
  --bxf-signal:linear-gradient(100deg,var(--bxf-sky),var(--bxf-blue) 32%,var(--bxf-purple) 66%,var(--bxf-pink));
  --bxf-signal-2:linear-gradient(120deg,var(--bxf-blue),var(--bxf-purple) 50%,var(--bxf-pink) 82%,var(--bxf-orange));
  --bxf-ink:#0A0E24; --bxf-ink-2:#10163A; --bxf-ink-3:#171E48; --bxf-ink-line:#2A3266;
  --bxf-paper:#FFFFFF; --bxf-paper-2:#F5F6FD; --bxf-lav:#F1EEFE; --bxf-sky-tint:#EAF3FF; --bxf-line:#E4E4F2;
  --bxf-head:#131634; --bxf-body:#45496A; --bxf-muted:#7A80A0;
  --bxf-mist:#FFFFFF; --bxf-mist-2:#C6CCEC; --bxf-mist-dim:#8E96C4;
  --bxf-glow:0 18px 50px -18px rgba(99,102,241,.55); --bxf-shadow:0 14px 40px -18px rgba(19,22,52,.28);
  --bxf-radius:18px; --bxf-radius-sm:12px; --bxf-maxw:1140px;
  --bxf-font-d:"Sora",system-ui,sans-serif; --bxf-font-b:"Plus Jakarta Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
.bxf-body{margin:0;font-family:var(--bxf-font-b);background:var(--bxf-paper);color:var(--bxf-body);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bxf-wrap{max-width:var(--bxf-maxw);margin-inline:auto;padding-inline:22px}
.bxf-h1,.bxf-h2,.bxf-h3{font-family:var(--bxf-font-d);color:var(--bxf-head)}
.bxf-h1{font-size:clamp(2.1rem,5.2vw,3.9rem);line-height:1.05;letter-spacing:-.02em;font-weight:700;margin:0 0 18px}
.bxf-h2{font-size:clamp(1.55rem,3.3vw,2.45rem);line-height:1.12;letter-spacing:-.015em;font-weight:700;margin:0 0 14px}
.bxf-h3{font-size:clamp(1.12rem,2vw,1.35rem);font-weight:600;margin:0 0 8px;color:var(--bxf-head)}
.bxf-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--bxf-body);max-width:64ch}
.bxf-grad{background:var(--bxf-signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bxf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--bxf-font-d);font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bxf-purple);margin:0 0 18px}
.bxf-eyebrow::before{content:"";width:24px;height:3px;background:var(--bxf-signal);border-radius:3px}
/* HEADER + DROPDOWN */
.bxf-header{position:sticky;top:0;z-index:100;background:rgba(10,14,36,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--bxf-ink-line)}
.bxf-nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.bxf-brand{display:flex;align-items:center;gap:10px;font-family:var(--bxf-font-d);font-weight:700;font-size:1.28rem;color:var(--bxf-mist);text-decoration:none;letter-spacing:-.01em}
.bxf-brand img{height:32px;width:auto;display:block}
.bxf-brand-dot{width:28px;height:28px;border-radius:8px;background:var(--bxf-signal);box-shadow:var(--bxf-glow);display:grid;place-items:center;font-size:.9rem;color:#fff}
.bxf-navlinks{display:flex;align-items:center;gap:24px}
.bxf-navlinks>a{color:var(--bxf-mist-2);text-decoration:none;font-size:.93rem;font-weight:500;transition:color .2s;white-space:nowrap}
.bxf-navlinks>a:hover{color:var(--bxf-mist)}
.bxf-navlinks .bxf-btn{color:#fff}
.bxf-burger span{display:block;width:22px;height:2px;background:var(--bxf-mist);margin:4px 0;border-radius:2px;transition:.2s}
@media(max-width:940px){
 .bxf-navlinks{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bxf-ink);border-bottom:1px solid var(--bxf-ink-line);padding:10px 22px 20px;max-height:0;overflow:hidden;transition:max-height .3s ease}
 .bxf-navlinks.bxf-open{max-height:90vh;overflow:auto}
 .bxf-navlinks>a,
 .bxf-navlinks .bxf-btn{margin-top:14px;justify-content:center;border-bottom:0}
 .bxf-drop{width:100%}
 
 .bxf-drop.bxf-open 
 
 .bxf-burger{display:block}
}
/* BUTTONS */
.bxf-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:100px;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;border:0;font-family:var(--bxf-font-b);background:var(--bxf-signal);color:#fff;box-shadow:var(--bxf-glow);transition:transform .18s ease,box-shadow .18s ease}
.bxf-btn:hover{transform:translateY(-2px);box-shadow:0 22px 54px -14px rgba(168,85,247,.6)}
.bxf-btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:var(--bxf-mist);box-shadow:none}
.bxf-btn-ghost:hover{border-color:var(--bxf-sky);background:rgba(56,189,248,.12);box-shadow:none}
.bxf-btn-ghost.bxf-dark{border-color:var(--bxf-line);color:var(--bxf-head)}
.bxf-btn-ghost.bxf-dark:hover{border-color:var(--bxf-purple);background:rgba(168,85,247,.07)}
.bxf-btn-wa{background:#25D366;box-shadow:0 16px 40px -14px rgba(37,211,102,.55)}
.bxf-btn-wa:hover{box-shadow:0 22px 50px -12px rgba(37,211,102,.7)}
/* SECTIONS */
.bxf-section{padding:82px 0}
.bxf-section-tight{padding:52px 0}
.bxf-center{text-align:center}
.bxf-center .bxf-lead,.bxf-center .bxf-eyebrow{margin-inline:auto}
.bxf-band{background:var(--bxf-lav);border-block:1px solid var(--bxf-line)}
.bxf-band-sky{background:var(--bxf-sky-tint);border-block:1px solid var(--bxf-line)}
.bxf-band-vivid{background:var(--bxf-signal-2);position:relative}
.bxf-band-vivid .bxf-h2,.bxf-band-vivid .bxf-h3{color:#fff}
.bxf-band-vivid .bxf-lead,.bxf-band-vivid p{color:rgba(255,255,255,.92)}
.bxf-band-vivid .bxf-eyebrow{color:rgba(255,255,255,.92)}
.bxf-band-vivid .bxf-eyebrow::before{background:#fff}
/* HERO */
.bxf-hero{padding:74px 0 80px;position:relative;overflow:hidden;background:radial-gradient(1100px 520px at 12% -10%,rgba(79,123,247,.42),transparent 60%),radial-gradient(900px 520px at 100% 0%,rgba(236,72,153,.34),transparent 55%),radial-gradient(700px 500px at 60% 120%,rgba(168,85,247,.30),transparent 60%),var(--bxf-ink)}
.bxf-hero .bxf-h1{color:var(--bxf-mist)}
.bxf-hero .bxf-lead{color:var(--bxf-mist-2)}
.bxf-hero .bxf-eyebrow{color:var(--bxf-sky)}
.bxf-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:900px){.bxf-hero-grid{grid-template-columns:1fr;gap:40px}}
.bxf-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.bxf-hero-trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--bxf-ink-line)}
.bxf-hero-trust div{font-size:.84rem;color:var(--bxf-mist-dim)}
.bxf-hero-trust b{display:block;font-family:var(--bxf-font-d);font-size:1.5rem;color:var(--bxf-mist);font-weight:700}
/* ANSWER CARD */
.bxf-answer{background:rgba(16,22,58,.72);border:1px solid var(--bxf-ink-line);border-radius:var(--bxf-radius);padding:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);position:relative;overflow:hidden;backdrop-filter:blur(4px)}
.bxf-answer::before{content:"";position:absolute;inset:0;padding:1px;border-radius:var(--bxf-radius);background:var(--bxf-signal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}
.bxf-answer-head{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--bxf-mist-dim);margin-bottom:14px;font-weight:600}
.bxf-answer-dot{width:9px;height:9px;border-radius:50%;background:var(--bxf-sky);box-shadow:0 0 10px var(--bxf-sky);animation:bxf-blink 1.6s ease-in-out infinite}
@keyframes bxf-blink{0%,100%{opacity:1}50%{opacity:.35}}
.bxf-answer-body{color:var(--bxf-mist-2);font-size:.96rem;line-height:1.7}
.bxf-answer-body em{color:#fff}.bxf-answer-body b{color:#fff}
.bxf-answer-cite{margin-top:16px;padding-top:14px;border-top:1px dashed var(--bxf-ink-line);font-size:.82rem;color:var(--bxf-sky);display:flex;align-items:center;gap:8px}
.bxf-typing{border-right:2px solid var(--bxf-sky);animation:bxf-caret .9s steps(1) infinite}
@keyframes bxf-caret{50%{border-color:transparent}}
/* QUICK ANSWER */
.bxf-quick{background:linear-gradient(120deg,var(--bxf-sky-tint),var(--bxf-lav));border:1px solid var(--bxf-line);border-left:4px solid var(--bxf-purple);border-radius:var(--bxf-radius-sm);padding:22px 26px;box-shadow:var(--bxf-shadow)}
.bxf-quick-tag{font-family:var(--bxf-font-d);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bxf-purple);margin-bottom:8px}
.bxf-quick p{margin:0;color:var(--bxf-head);font-size:1.06rem;line-height:1.7}
/* CARDS */
.bxf-grid{display:grid;gap:20px}
.bxf-grid-2{grid-template-columns:repeat(2,1fr)}.bxf-grid-3{grid-template-columns:repeat(3,1fr)}.bxf-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.bxf-grid-3,.bxf-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bxf-grid-2,.bxf-grid-3,.bxf-grid-4{grid-template-columns:1fr}}
.bxf-card{background:var(--bxf-paper);border:1px solid var(--bxf-line);border-radius:var(--bxf-radius);padding:26px;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:var(--bxf-shadow)}
.bxf-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 54px -20px rgba(99,102,241,.4)}
.bxf-card p{margin:0;font-size:.95rem;color:var(--bxf-body)}
.bxf-card-ico{width:48px;height:48px;border-radius:13px;background:var(--bxf-signal);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px;box-shadow:var(--bxf-glow)}
.bxf-band-vivid .bxf-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);box-shadow:none;backdrop-filter:blur(4px)}
.bxf-band-vivid .bxf-card .bxf-h3{color:#fff}.bxf-band-vivid .bxf-card p{color:rgba(255,255,255,.9)}
.bxf-def{background:var(--bxf-paper);border:1px solid var(--bxf-line);border-left:4px solid var(--bxf-sky);border-radius:var(--bxf-radius-sm);padding:18px 22px;margin:0 0 24px;box-shadow:var(--bxf-shadow);color:var(--bxf-body)}
.bxf-def b{color:var(--bxf-head);font-family:var(--bxf-font-d)}
/* FIGURE / IMAGE PLACEHOLDER */
.bxf-figure{margin:0;border-radius:var(--bxf-radius);overflow:hidden;border:1px solid var(--bxf-line);box-shadow:var(--bxf-shadow);background:var(--bxf-paper-2);position:relative}
.bxf-figure img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;background:linear-gradient(120deg,var(--bxf-sky-tint),var(--bxf-lav))}
.bxf-figure figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(10,14,36,.72);color:#fff;font-size:.76rem;padding:6px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.bxf-ph-txt{opacity:.85}
/* VIDEO */
.bxf-video{position:relative;border-radius:var(--bxf-radius);overflow:hidden;border:1px solid var(--bxf-line);box-shadow:var(--bxf-shadow);aspect-ratio:16/9;background:#000}
.bxf-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bxf-video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:700px){.bxf-video-grid{grid-template-columns:1fr}}
/* MARQUEE */
.bxf-marquee{border-block:1px solid var(--bxf-line);background:var(--bxf-paper-2);padding:15px 0;overflow:hidden;white-space:nowrap}
.bxf-marquee-track{display:inline-flex;gap:40px;animation:bxf-scroll 34s linear infinite}
.bxf-marquee span{font-family:var(--bxf-font-d);font-weight:600;color:var(--bxf-muted);font-size:.95rem;display:inline-flex;align-items:center;gap:40px}
.bxf-marquee span::after{content:"◆";background:var(--bxf-signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:.7rem}
@keyframes bxf-scroll{to{transform:translateX(-50%)}}
/* STEPS */
.bxf-steps{display:grid;gap:18px;counter-reset:bxfstep}
.bxf-step{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--bxf-paper);border:1px solid var(--bxf-line);border-radius:var(--bxf-radius);padding:22px 24px;box-shadow:var(--bxf-shadow)}
.bxf-step-n{counter-increment:bxfstep;width:44px;height:44px;border-radius:12px;background:var(--bxf-signal);color:#fff;font-family:var(--bxf-font-d);font-weight:700;display:grid;place-items:center;box-shadow:var(--bxf-glow)}
.bxf-step-n::before{content:counter(bxfstep,decimal-leading-zero)}
.bxf-step p{color:var(--bxf-body);margin:0}
/* STATS */
.bxf-band .bxf-grid-4,.bxf-band-sky .bxf-grid-4{text-align:center;gap:8px}
.bxf-stat b{font-family:var(--bxf-font-d);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;display:block;background:var(--bxf-signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bxf-stat span{font-size:.84rem;color:var(--bxf-muted)}
/* FAQ */
.bxf-faq details{background:var(--bxf-paper);border:1px solid var(--bxf-line);border-radius:var(--bxf-radius-sm);margin-bottom:12px;overflow:hidden;box-shadow:var(--bxf-shadow)}
.bxf-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--bxf-font-d);font-weight:600;color:var(--bxf-head);display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:1.02rem}
.bxf-faq summary::-webkit-details-marker{display:none}
.bxf-faq summary::after{content:"+";background:var(--bxf-signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.6rem;font-weight:400;transition:transform .2s}
.bxf-faq details[open] summary::after{transform:rotate(45deg)}
.bxf-faq details p{margin:0;padding:0 22px 20px;font-size:.96rem;color:var(--bxf-body)}
/* CHIPS */
.bxf-chips{display:flex;flex-wrap:wrap;gap:10px}
.bxf-chip{padding:9px 17px;border-radius:100px;border:1px solid var(--bxf-line);background:var(--bxf-paper);color:var(--bxf-body);font-size:.88rem;font-weight:600;text-decoration:none;transition:all .2s;box-shadow:var(--bxf-shadow)}
.bxf-chip:hover{border-color:transparent;background:var(--bxf-signal);color:#fff}
/* RELATED */
.bxf-related a{display:flex;align-items:center;gap:12px;background:var(--bxf-paper);border:1px solid var(--bxf-line);border-radius:var(--bxf-radius);padding:18px 20px;text-decoration:none;color:var(--bxf-head);font-family:var(--bxf-font-d);font-weight:600;box-shadow:var(--bxf-shadow);transition:transform .18s,border-color .18s}
.bxf-related a:hover{transform:translateY(-3px);border-color:var(--bxf-purple)}
.bxf-r-ico{font-size:1.3rem}.bxf-r-arrow{margin-left:auto;background:var(--bxf-signal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* CTA */
.bxf-ctaband{text-align:center;background:var(--bxf-signal-2);border-radius:26px;padding:56px 30px;box-shadow:0 30px 70px -26px rgba(168,85,247,.6)}
.bxf-ctaband .bxf-h2{color:#fff}.bxf-ctaband .bxf-lead{color:rgba(255,255,255,.94)}
/* FOOTER */
.bxf-footer{background:var(--bxf-ink);padding:60px 0 30px;border-top:3px solid transparent;border-image:var(--bxf-signal) 1}
.bxf-footer .bxf-brand{color:#fff}
.bxf-footer p{color:var(--bxf-mist-dim)}
.bxf-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:780px){.bxf-footer-grid{grid-template-columns:1fr 1fr;gap:26px}}
.bxf-footer h4{font-family:var(--bxf-font-d);color:#fff;font-size:.95rem;margin:0 0 14px}
.bxf-footer a{display:block;color:var(--bxf-mist-dim);text-decoration:none;font-size:.9rem;margin-bottom:9px;transition:color .2s}
.bxf-footer a:hover{color:var(--bxf-sky)}
.bxf-footer-bottom{border-top:1px solid var(--bxf-ink-line);margin-top:40px;padding-top:22px;font-size:.84rem;color:var(--bxf-mist-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.bxf-social{display:flex;gap:12px;margin-top:16px}
.bxf-social a{width:38px;height:38px;margin:0;border-radius:10px;background:var(--bxf-ink-3);border:1px solid var(--bxf-ink-line);display:grid;place-items:center;transition:background .2s,transform .2s}
.bxf-social a:hover{background:var(--bxf-signal);transform:translateY(-2px)}
.bxf-social svg{width:18px;height:18px;fill:#fff}
/* FAB */
.bxf-fab{position:fixed;right:20px;bottom:20px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.6);text-decoration:none;transition:transform .2s}
.bxf-fab:hover{transform:scale(1.08)}
.bxf-fab svg{width:30px;height:30px;fill:#fff}
/* STICKY */
.bxf-sticky{display:none}
@media(max-width:680px){
 .bxf-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:85;background:rgba(10,14,36,.96);backdrop-filter:blur(12px);border-top:1px solid var(--bxf-ink-line);padding:10px 14px;gap:10px}
 .bxf-sticky .bxf-btn{flex:1;justify-content:center;padding:12px}
 .bxf-fab{bottom:78px}.bxf-body{padding-bottom:70px}
}
/* SERVICE INTERLINK INDEX */
.bxf-svc-index{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
@media(max-width:800px){.bxf-svc-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bxf-svc-index{grid-template-columns:1fr}}
.bxf-svc-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;border:1px solid var(--bxf-line);background:var(--bxf-paper);color:var(--bxf-body);text-decoration:none;font-size:.9rem;font-weight:500;transition:all .18s;box-shadow:var(--bxf-shadow)}
.bxf-svc-link:hover{border-color:transparent;background:var(--bxf-signal);color:#fff}
.bxf-svc-link .ico{font-size:1.1rem}
.bxf-svc-link.is-current{background:var(--bxf-signal);color:#fff;border-color:transparent}
/* A11Y */
:focus-visible{outline:2px solid var(--bxf-purple);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
.bxf-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.bxf-reveal.bxf-in{opacity:1;transform:none}
/* BLOG */
.bxf-post{max-width:760px;margin-inline:auto}
.bxf-post h2{margin-top:40px}.bxf-post h3{margin-top:26px}
.bxf-post p,.bxf-post li{color:var(--bxf-body);font-size:1.04rem}
.bxf-post a{color:var(--bxf-purple);text-decoration:underline;text-underline-offset:2px}
.bxf-post a:hover{color:var(--bxf-pink)}
.bxf-post ul,.bxf-post ol{padding-left:22px}
.bxf-post-meta{display:flex;gap:14px;align-items:center;color:var(--bxf-muted);font-size:.86rem;margin-bottom:18px}
.bxf-post-tag{background:var(--bxf-signal);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:.04em}
.bxf-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem;box-shadow:var(--bxf-shadow);border-radius:12px;overflow:hidden}
.bxf-table th{background:var(--bxf-ink);color:#fff;text-align:left;padding:12px 16px;font-family:var(--bxf-font-d);font-size:.9rem}
.bxf-table td{padding:12px 16px;border-top:1px solid var(--bxf-line);color:var(--bxf-body)}
.bxf-table tr:nth-child(even) td{background:var(--bxf-paper-2)}
.bxf-blog-card{background:var(--bxf-paper);border:1px solid var(--bxf-line);border-radius:var(--bxf-radius);padding:24px;text-decoration:none;display:block;box-shadow:var(--bxf-shadow);transition:transform .2s,border-color .2s}
.bxf-blog-card:hover{transform:translateY(-4px);border-color:var(--bxf-purple)}

/* ============================================================
   BATCH 3 — real logo, dropdown mega-nav, video, readability
   ============================================================ */

/* ---- real logo in brand ---- */
.bxf-brand-img { height: 34px; width: auto; display: block; }
.bxf-footer .bxf-brand-img { height: 40px; }

/* ---- four-category dropdown nav ---- */
.bxf-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.bxf-burger span { display: block; width: 22px; height: 2px; background: var(--bxf-mist); margin: 4px 0; border-radius: 2px; transition: .2s; }

.bxf-drop { position: relative; }
.bxf-drop > button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  color: var(--bxf-slate); font-family: var(--bxf-font-b); font-size: .92rem; font-weight: 500; padding: 0;
}
.bxf-drop > button:hover { color: var(--bxf-mist); }
.bxf-drop > button::after { content: "▾"; font-size: .7rem; color: var(--bxf-cyan); transition: transform .2s; }
.bxf-drop:hover > button::after { transform: rotate(180deg); }

/* invisible bridge across the gap so hover doesn't drop between button and menu */
.bxf-drop::after { content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 24px; }
.bxf-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; background: var(--bxf-ink-2); border: 1px solid var(--bxf-line); border-radius: 16px;
  padding: 10px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease; z-index: 80;
}
.bxf-drop:hover .bxf-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.bxf-menu { transition-delay: .12s; }
.bxf-menu a {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; text-decoration: none;
  color: var(--bxf-slate); transition: background .15s;
}
.bxf-menu a:hover { background: var(--bxf-ink-3); }
.bxf-menu a b { display: block; color: var(--bxf-mist); font-family: var(--bxf-font-d); font-size: .92rem; font-weight: 600; }
.bxf-menu a span { font-size: .78rem; color: var(--bxf-slate-dim); line-height: 1.4; }
.bxf-menu-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(79,70,229,.16); border: 1px solid var(--bxf-line); display: grid; place-items: center; font-size: 1rem; }

@media (max-width: 940px) {
  .bxf-burger { display: block; }
  .bxf-navlinks {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bxf-ink-2); border-bottom: 1px solid var(--bxf-line); padding: 12px;
    max-height: 0; overflow: hidden; transition: max-height .3s ease; padding-block: 0;
  }
  .bxf-navlinks.bxf-open { max-height: 80vh; overflow-y: auto; padding-block: 12px; }
  .bxf-navlinks > a:not(.bxf-btn) { display: block; padding: 12px 8px; border-bottom: 1px solid var(--bxf-line); }
  .bxf-drop { width: 100%; }
  .bxf-drop > button { width: 100%; justify-content: space-between; padding: 12px 8px; border-bottom: 1px solid var(--bxf-line); }
  .bxf-menu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; box-shadow: none; border: 0; background: var(--bxf-ink-3); max-height: 0; overflow: hidden; padding: 0; transition: max-height .3s ease; }
  .bxf-drop.bxf-open .bxf-menu { max-height: 600px; padding: 6px; margin-bottom: 8px; }
  .bxf-drop:hover .bxf-menu { transform: none; }
}

/* ---- video embeds ---- */
.bxf-videos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bxf-video {
  position: relative; aspect-ratio: 16/9; border-radius: var(--bxf-radius); overflow: hidden;
  border: 1px solid var(--bxf-line); background: var(--bxf-ink-3);
}
.bxf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- real image in figure placeholder ---- */
.bxf-figure img { width: 100%; height: auto; display: block; border-radius: var(--bxf-radius); }

/* ---- hero background image option ---- */
.bxf-hero-bg { position: relative; }
.bxf-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,8,21,.72), rgba(6,8,21,.92)), var(--bxf-hero-src) center/cover;
  opacity: .5;
}

/* ============================================================
   READABILITY — pink/purple/blue/sky brand spectrum on inner blocks
   Alternating band system with guaranteed contrast
   ============================================================ */
:root {
  --bxf-pink:   #EC4899;
  --bxf-purple: #A855F7;
  --bxf-blue:   #4F46E5;
  --bxf-sky:    #22D3EE;
}

/* tinted section variants — dark enough that mist/slate text stays AA */
.bxf-band-pink   { background: linear-gradient(160deg, rgba(236,72,153,.10), rgba(168,85,247,.05)); border-block: 1px solid var(--bxf-line); }
.bxf-band-purple { background: linear-gradient(160deg, rgba(168,85,247,.12), rgba(79,70,229,.06)); border-block: 1px solid var(--bxf-line); }
.bxf-band-blue   { background: linear-gradient(160deg, rgba(79,70,229,.12), rgba(34,211,238,.05)); border-block: 1px solid var(--bxf-line); }
.bxf-band-sky    { background: linear-gradient(160deg, rgba(34,211,238,.10), rgba(79,70,229,.05)); border-block: 1px solid var(--bxf-line); }

/* white "spotlight" block — dark text for deliberate contrast pop */
.bxf-band-white { background: #F8FAFC; border-block: 1px solid #E2E8F0; }
.bxf-band-white .bxf-h1, .bxf-band-white .bxf-h2, .bxf-band-white .bxf-h3 { color: #0B1027; }
.bxf-band-white .bxf-lead, .bxf-band-white p { color: #334155; }
.bxf-band-white .bxf-eyebrow { color: #7C3AED; }
.bxf-band-white .bxf-card { background: #fff; border-color: #E2E8F0; }
.bxf-band-white .bxf-card p { color: #475569; }
.bxf-band-white .bxf-card:hover { border-color: var(--bxf-purple); }
.bxf-band-white .bxf-grad { background: linear-gradient(100deg, var(--bxf-blue), var(--bxf-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bxf-band-white .bxf-def { background: #F1F5F9; border-color: #E2E8F0; }
.bxf-band-white .bxf-def b { color: #0B1027; }
.bxf-band-white .bxf-step { background: #fff; border-color: #E2E8F0; }
.bxf-band-white .bxf-step p { color: #475569; }
.bxf-band-white .bxf-faq details { background: #fff; border-color: #E2E8F0; }
.bxf-band-white .bxf-faq summary { color: #0B1027; }
.bxf-band-white .bxf-faq details p { color: #475569; }

/* gradient hero text pop for section headers using full spectrum */
.bxf-grad-full { background: linear-gradient(100deg, var(--bxf-sky), var(--bxf-blue) 35%, var(--bxf-purple) 65%, var(--bxf-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================
   BATCH 4 — dropdown hover fix (kills the dead-gap bug)
   ============================================================ */
.bxf-drop > button { padding: 10px 2px; }              /* bigger hit area */
.bxf-menu { top: calc(100% + 4px); }                    /* close the gap */
.bxf-drop::after {                                      /* invisible hover bridge */
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; display: none;
}
.bxf-drop:hover::after, .bxf-drop:focus-within::after { display: block; }
.bxf-drop:focus-within .bxf-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* clearer, more colorful menu items */
.bxf-menu { background: var(--bxf-ink-2); border-color: #2A3566; }
.bxf-menu a:hover { background: linear-gradient(100deg, rgba(79,70,229,.22), rgba(34,211,238,.12)); }
.bxf-menu a:hover .bxf-menu-ico { background: var(--bxf-signal); border-color: transparent; }
.bxf-menu a:hover b { color: #fff; }
@media (min-width: 941px){
  /* make sure the whole nav item area is hoverable so mouse-over always triggers */
  .bxf-drop { padding-bottom: 2px; }
}

/* ============================================================
   BATCH 4 — nav hover fix, selection color, colorful menus,
   white vector icons, Build-row theme, image slots, buttons
   ============================================================ */

/* ---- FIX: hover gap so the menu doesn't drop when moving the mouse down ---- */
.bxf-drop { padding-bottom: 4px; }                 /* extends hover target */
.bxf-drop::after {                                  /* invisible bridge between button and menu */
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; background: transparent;
}
.bxf-menu { top: calc(100% + 10px); }               /* menu sits just under the bridge */
/* keep it open while hovering button OR the bridge OR the menu itself */
.bxf-drop:hover .bxf-menu,
.bxf-drop:focus-within .bxf-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---- colorful, high-contrast dropdown menu ---- */
.bxf-menu { background: #0C1230; border: 1px solid #2E3A6E; box-shadow: 0 34px 80px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(79,70,229,.15); }
.bxf-menu a b { color: #FFFFFF; }
.bxf-menu a span { color: #AEB9E4; }
.bxf-menu a:hover { background: linear-gradient(100deg, rgba(79,70,229,.28), rgba(34,211,238,.14)); }
.bxf-menu a:hover b { color: #fff; }
.bxf-menu a:hover .bxf-menu-ico { border-color: var(--bxf-cyan); box-shadow: 0 0 16px -4px var(--bxf-cyan); }
/* menu icons: white glyph on branded tile */
.bxf-menu-ico { background: linear-gradient(135deg, var(--bxf-indigo), var(--bxf-cyan)); border: 1px solid #3A4680; color: #fff; filter: saturate(1.1); }

/* ---- FIX: branded text selection (kills harsh default blue) ---- */
::selection { background: rgba(79,70,229,.55); color: #fff; }
::-moz-selection { background: rgba(79,70,229,.55); color: #fff; }
.bxf-band-white ::selection { background: rgba(168,85,247,.35); color: #0B1027; }

/* ---- white-vector card icons (svg strokes/fills forced white) + hover ---- */
.bxf-card-ico { background: linear-gradient(135deg, var(--bxf-indigo), var(--bxf-cyan)); box-shadow: 0 8px 22px -8px rgba(79,70,229,.7); transition: transform .2s ease, box-shadow .2s ease; }
.bxf-card-ico svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; }
.bxf-card-ico svg[data-fill] { fill: #fff; stroke: none; }
.bxf-card:hover .bxf-card-ico { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 14px 30px -8px rgba(34,211,238,.8); }

/* ---- image slot ABOVE card grids (6:21 wide banner the user fills) ---- */
.bxf-imgslot {
  width: 100%; aspect-ratio: 21 / 6; border-radius: var(--bxf-radius); overflow: hidden;
  border: 1px solid var(--bxf-line); background: var(--bxf-ink-3); margin: 0 0 30px;
}
.bxf-imgslot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bxf-band-white .bxf-imgslot { border-color: #E2E8F0; background: #EEF1F8; }

/* ---- plain hero figure: no mask/caption, just the image ---- */
.bxf-figure { margin: 0; }
.bxf-figure img { width: 100%; height: auto; display: block; border-radius: var(--bxf-radius); border: 1px solid var(--bxf-line); }
.bxf-figure figcaption { display: none; }   /* user asked: no text on image slots */

/* ---- Build & Automate row: themed card backgrounds, white text ---- */
.bxf-card.bxf-card-build {
  background: linear-gradient(150deg, #1B2450, #10173A);
  border-color: #34408A;
}
.bxf-card.bxf-card-build h3 { color: #fff; }
.bxf-card.bxf-card-build p { color: #C7D0F0; }
.bxf-card.bxf-card-build:hover { border-color: var(--bxf-cyan); box-shadow: 0 0 40px -10px rgba(34,211,238,.5); }
.bxf-card.bxf-card-build .bxf-card-ico { background: linear-gradient(135deg, var(--bxf-cyan), var(--bxf-indigo)); }

/* ---- button color update (richer gradient + active states) ---- */
.bxf-btn { background: linear-gradient(100deg, var(--bxf-indigo), var(--bxf-magenta) 120%); background-size: 160% 100%; background-position: 0% 0; transition: background-position .3s ease, transform .18s ease, box-shadow .18s ease; }
.bxf-btn:hover { background-position: 100% 0; transform: translateY(-2px); }
.bxf-btn:active { transform: translateY(0); }
.bxf-btn-ghost { background: transparent; }
.bxf-btn-ghost:hover { background: rgba(34,211,238,.08); }

/* JS hover-intent open class (works alongside :hover for reliability) */
.bxf-drop.bxf-hovered .bxf-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width:940px){ .bxf-drop.bxf-hovered .bxf-menu { transform:none; } }

/* white vector glyph inside dropdown menu icon tiles */
.bxf-menu-ico svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.bxf-menu-ico svg[data-fill] { fill: #fff; stroke: none; }
/* svc-index tile icons also white vector */
.bxf-svc-link .ico svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; vertical-align: middle; }
.bxf-svc-link .ico svg[data-fill] { fill: #fff; stroke: none; }
.bxf-band-white .bxf-svc-link .ico svg { stroke: #4F46E5; }
.bxf-band-white .bxf-svc-link .ico svg[data-fill] { fill: #4F46E5; }

/* FIX: guarantee card icon tiles always show the gradient + white glyph,
   even inside white bands or hub cards (override any inherited light bg) */
.bxf-card-ico,
.bxf-band-white .bxf-card-ico {
  background: linear-gradient(135deg, #4F46E5, #22D3EE) !important;
  border: 0 !important;
}
.bxf-card-ico svg { stroke: #fff !important; }
.bxf-card-ico svg[data-fill] { fill: #fff !important; stroke: none !important; }
/* the reveal animation shouldn't leave icons half-faded if JS is slow */
.bxf-card-ico { opacity: 1 !important; }

/* ============================================================
   BATCH 4 — nav readability, colorful menus, white-vector icons
   ============================================================ */
/* brighter nav triggers (were too dim per screenshot) */
.bxf-drop > button { color: var(--bxf-mist); font-weight: 600; }
.bxf-drop > button:hover { color: var(--bxf-cyan); }
.bxf-navlinks > a:not(.bxf-btn) { color: var(--bxf-mist); font-weight: 600; }
.bxf-navlinks > a:not(.bxf-btn):hover { color: var(--bxf-cyan); }

/* colorful, higher-contrast mega-menu */
.bxf-menu { border-color: #2E3766; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(79,70,229,.15); }
.bxf-menu a b { color: #fff; }
.bxf-menu a span { color: #AEB9E0; }
.bxf-menu a:hover { background: linear-gradient(100deg, rgba(79,70,229,.22), rgba(34,211,238,.12)); }
.bxf-menu a:hover b { color: var(--bxf-cyan); }
.bxf-menu-ico { background: var(--bxf-signal); border: 0; box-shadow: 0 4px 14px -4px rgba(79,70,229,.6); }

/* white-vector card icons with gradient hover */
.bxf-card-ico { background: linear-gradient(135deg, var(--bxf-indigo), var(--bxf-cyan)); border: 0; color: #fff; box-shadow: 0 6px 18px -6px rgba(79,70,229,.55); transition: transform .2s ease, box-shadow .2s ease; }
.bxf-card-ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.bxf-card:hover .bxf-card-ico { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 26px -6px rgba(34,211,238,.7); }

/* Build & Automate — themed dark cards with white text (per request) */
.bxf-cards-build .bxf-card { background: linear-gradient(160deg, #2A1E5C, #14183A); border-color: #3A2E7A; }
.bxf-cards-build .bxf-card h3 { color: #fff; }
.bxf-cards-build .bxf-card p { color: #CFD6F5; }
.bxf-cards-build .bxf-card:hover { border-color: var(--bxf-cyan); }

/* clean pre-cards image band — no overlay, no text, just the picture (6:21-ish wide) */
.bxf-imgband { margin: 0 0 40px; border-radius: var(--bxf-radius); overflow: hidden; border: 1px solid var(--bxf-line); background: var(--bxf-ink-3); }
.bxf-imgband img { width: 100%; height: auto; display: block; }
/* graceful empty state before user drops the JPG */
.bxf-imgband:empty, .bxf-imgband img[src=""] { display: none; }

/* button color polish */
.bxf-btn { background: linear-gradient(100deg, var(--bxf-indigo), var(--bxf-cyan)); }
.bxf-btn:hover { filter: brightness(1.08); }

/* ============================================================
   BATCH 5 — home banner, category feature cards, about, home FAQ
   ============================================================ */
/* single home banner */
.bxf-homebanner { margin: 8px 0 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--bxf-line); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.bxf-homebanner img { width: 100%; height: auto; display: block; aspect-ratio: 3/2; object-fit: cover; }

/* category feature cards (image + title + desc), colorful, hover lift */
.bxf-catgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 980px){ .bxf-catgrid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .bxf-catgrid{ grid-template-columns: 1fr;} }
.bxf-catcard { position: relative; border-radius: var(--bxf-radius); overflow: hidden; border: 1px solid var(--bxf-line); background: var(--bxf-ink-3); text-decoration: none; display: flex; flex-direction: column; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.bxf-catcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(79,70,229,.55); }
.bxf-catcard-img { aspect-ratio: 4/3; overflow: hidden; }
.bxf-catcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.bxf-catcard:hover .bxf-catcard-img img { transform: scale(1.08); }
.bxf-catcard-body { padding: 20px; }
.bxf-catcard h3 { font-family: var(--bxf-font-d); color: var(--bxf-mist); font-size: 1.15rem; margin: 0 0 6px; }
.bxf-catcard p { margin: 0 0 12px; font-size: .9rem; color: #C7D0EC; }
.bxf-catcard .bxf-catcard-link { font-size: .85rem; font-weight: 600; }
.bxf-catcard-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; color: #fff; backdrop-filter: blur(6px); }
.bxf-cat-grow  .bxf-catcard-badge{ background: rgba(34,211,238,.85); color:#04121a;}
.bxf-cat-build .bxf-catcard-badge{ background: rgba(168,85,247,.9);}
.bxf-cat-create .bxf-catcard-badge{ background: rgba(236,72,153,.9);}
.bxf-cat-immersive .bxf-catcard-badge{ background: rgba(56,140,255,.9);}
.bxf-cat-grow:hover{ border-color: var(--bxf-cyan);}
.bxf-cat-build:hover{ border-color: var(--bxf-purple);}
.bxf-cat-create:hover{ border-color: var(--bxf-pink);}
.bxf-cat-immersive:hover{ border-color: var(--bxf-sky);}
.bxf-catcard .bxf-catcard-link { color: var(--bxf-cyan); }
.bxf-cat-build .bxf-catcard-link{ color: var(--bxf-purple);}
.bxf-cat-create .bxf-catcard-link{ color: var(--bxf-pink);}
.bxf-cat-immersive .bxf-catcard-link{ color: var(--bxf-sky);}

/* about — 2 col */
.bxf-about { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 860px){ .bxf-about{ grid-template-columns: 1fr; gap: 30px;} }
.bxf-about-img { border-radius: var(--bxf-radius); overflow: hidden; border: 1px solid var(--bxf-line); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.bxf-about-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 5/4; }
.bxf-about-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (max-width:480px){ .bxf-about-list{ grid-template-columns:1fr;} }
.bxf-about-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--bxf-slate); }
.bxf-about-list li::before { content: "✓"; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--bxf-signal); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }

/* improved "read all posts" button — solid gradient, high visibility */
.bxf-btn-blog { background: var(--bxf-signal); color: #fff !important; box-shadow: var(--bxf-glow); }
.bxf-btn-blog:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* footer legal links */
.bxf-legal a { color: var(--bxf-slate-dim); text-decoration: none; }
.bxf-legal a:hover { color: var(--bxf-cyan); }

/* ============================================================
   BATCH 6 — AI-search prose block on inner pages
   ============================================================ */
.bxf-prose { max-width: 78ch; }
.bxf-prose p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.75; color: var(--bxf-slate); }
.bxf-prose p:last-child { margin-bottom: 0; }
.bxf-prose strong, .bxf-prose b { color: var(--bxf-mist); }
/* on white spotlight sections the prose text darkens automatically via .bxf-band-white p */

/* ============================================================
   BATCH 7 — services intro two-column (copy + small image)
   ============================================================ */
.bxf-svc-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; margin-bottom: 42px; }
@media (max-width: 820px){ .bxf-svc-intro{ grid-template-columns: 1fr; gap: 26px; } }
.bxf-svc-intro .bxf-lead { margin-bottom: 0; }
.bxf-svc-intro-img { border-radius: var(--bxf-radius); overflow: hidden; border: 1px solid var(--bxf-line); background: var(--bxf-ink-3); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); }
.bxf-svc-intro-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }

/* ============================================================
   BATCH 8 — AI Content Studio cluster (hub, showcase, pillar)
   ============================================================ */
/* studio hero with image */
.bxf-studio-hero { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--bxf-line); margin-top: 10px; }
.bxf-studio-hero img.bxf-studio-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: .35; }
.bxf-studio-hero-inner { position: relative; padding: 64px 44px; background: linear-gradient(120deg, rgba(6,8,21,.85), rgba(11,16,39,.6)); }
@media (max-width:640px){ .bxf-studio-hero-inner{ padding: 40px 22px; } }

/* pipeline grid (12 services) */
.bxf-pipe { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width:900px){ .bxf-pipe{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .bxf-pipe{ grid-template-columns: 1fr;} }
.bxf-pipe-item { background: var(--bxf-ink-3); border: 1px solid var(--bxf-line); border-radius: 14px; padding: 18px; transition: border-color .2s, transform .2s; }
.bxf-pipe-item:hover { border-color: var(--bxf-indigo); transform: translateY(-3px); }
.bxf-pipe-item h3 { font-family: var(--bxf-font-d); color: var(--bxf-mist); font-size: 1rem; margin: 0 0 5px; }
.bxf-pipe-item p { margin: 0; font-size: .86rem; color: var(--bxf-slate); }

/* prompt-to-screen breakdown */
.bxf-prompt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--bxf-ink-3); border: 1px solid var(--bxf-line); border-radius: var(--bxf-radius); padding: 22px; margin-bottom: 18px; }
@media (max-width:760px){ .bxf-prompt{ grid-template-columns: 1fr;} }
.bxf-prompt-media { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--bxf-line); background: var(--bxf-ink); }
.bxf-prompt-media iframe, .bxf-prompt-media img { width:100%; height:100%; border:0; object-fit: cover; }
.bxf-prompt-code { font-size: .88rem; }
.bxf-prompt-code .tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bxf-cyan); }
.bxf-prompt-code pre { background: var(--bxf-ink); border: 1px solid var(--bxf-line); border-radius: 10px; padding: 12px; margin: 6px 0 12px; white-space: pre-wrap; color: #C7D0EC; font-size: .84rem; overflow-x:auto; }
.bxf-prompt-tools { display:flex; flex-wrap:wrap; gap:6px; }
.bxf-prompt-tools span { font-size:.74rem; padding:4px 10px; border-radius:100px; background: rgba(79,70,229,.16); border:1px solid var(--bxf-line); color: var(--bxf-mist); }

/* gallery filter */
.bxf-gallery { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .bxf-gallery{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .bxf-gallery{ grid-template-columns:1fr;} }
.bxf-gallery-item { border-radius: var(--bxf-radius); overflow:hidden; border:1px solid var(--bxf-line); background: var(--bxf-ink-3); }
.bxf-gallery-item .bxf-video, .bxf-gallery-item img { aspect-ratio:16/9; }

/* instagram embed row */
.bxf-ig-row { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .bxf-ig-row{ grid-template-columns:1fr;} }
.bxf-ig-embed { background: var(--bxf-ink-3); border:1px solid var(--bxf-line); border-radius: var(--bxf-radius); overflow:hidden; min-height: 480px; }
.bxf-ig-embed iframe { width:100%; min-height:480px; border:0; }

/* pillar blog body */
.bxf-pillar { max-width: 76ch; }
.bxf-pillar h2 { margin-top: 38px; }
.bxf-pillar h3 { margin-top: 24px; color: var(--bxf-mist); }
.bxf-pillar p, .bxf-pillar li { color: var(--bxf-slate); line-height: 1.8; }
.bxf-pillar ul { padding-left: 20px; }
.bxf-pillar li { margin-bottom: 8px; }

/* ============================================================
   BATCH 11 — ML lifecycle steps + 2-col grid
   ============================================================ */
.bxf-steps { display: grid; gap: 16px; }
.bxf-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--bxf-ink-3); border: 1px solid var(--bxf-line); border-radius: var(--bxf-radius); padding: 20px 22px; transition: border-color .2s; }
.bxf-step:hover { border-color: var(--bxf-indigo); }
.bxf-step-num { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--bxf-signal); color: #fff; font-family: var(--bxf-font-d); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(79,70,229,.6); }
.bxf-step h3 { margin: 0 0 5px; }
.bxf-step p { margin: 0; color: var(--bxf-slate); font-size: .94rem; }
.bxf-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
@media (max-width: 720px){ .bxf-grid-2{ grid-template-columns: 1fr; } }

/* ============================================================
   BATCH 11 — local AI agency page components
   ============================================================ */
/* solution cards (9) */
.bxf-solgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width:900px){ .bxf-solgrid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .bxf-solgrid{ grid-template-columns: 1fr;} }
.bxf-solcard { background: var(--bxf-ink-3); border: 1px solid var(--bxf-line); border-radius: var(--bxf-radius); padding: 22px; transition: transform .2s, border-color .2s; }
.bxf-solcard:hover { transform: translateY(-4px); border-color: var(--bxf-indigo); }
.bxf-solcard-top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.bxf-solcard-num { font-family: var(--bxf-font-d); font-size: 1.4rem; font-weight: 700; background: var(--bxf-signal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bxf-solcard-badge { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: rgba(34,211,238,.14); color: var(--bxf-cyan); border: 1px solid rgba(34,211,238,.3); }
.bxf-solcard h3 { margin: 0 0 7px; }
.bxf-solcard p { margin: 0; font-size: .9rem; color: var(--bxf-slate); }

/* tech chips */
.bxf-tech-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.bxf-tech-chip { padding: 10px 18px; border-radius: 100px; background: var(--bxf-ink-3); border:1px solid var(--bxf-line); color: var(--bxf-mist); font-weight:600; font-size:.9rem; transition: border-color .2s, transform .2s; }
.bxf-tech-chip:hover { border-color: var(--bxf-cyan); transform: translateY(-2px); }

/* case studies */
.bxf-case { background: var(--bxf-ink-3); border:1px solid var(--bxf-line); border-radius: var(--bxf-radius); padding: 24px; }
.bxf-case-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--bxf-purple); margin-bottom:10px; }
.bxf-case h3 { margin: 0 0 8px; font-size: 1.1rem; }
.bxf-case p { color: var(--bxf-slate); font-size:.9rem; }
.bxf-case-stats { display:flex; gap:20px; margin-top:16px; padding-top:16px; border-top:1px solid var(--bxf-line); }
.bxf-case-stat b { display:block; font-family:var(--bxf-font-d); font-size:1.5rem; background:var(--bxf-signal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bxf-case-stat span { font-size:.78rem; color: var(--bxf-slate); }

/* pricing plans */
.bxf-plans { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .bxf-plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto;} }
.bxf-plan { position:relative; background: var(--bxf-ink-3); border:1px solid var(--bxf-line); border-radius: var(--bxf-radius); padding: 28px 24px; }
.bxf-plan-pop { border-color: var(--bxf-indigo); box-shadow: 0 20px 50px -24px rgba(79,70,229,.6); }
.bxf-plan-poptag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--bxf-signal); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:100px; }
.bxf-plan h3 { margin:0 0 4px; }
.bxf-plan-sub { color: var(--bxf-slate); font-size:.86rem; margin:0 0 16px; min-height:38px; }
.bxf-plan-price { margin-bottom:18px; }
.bxf-plan-amt { font-family:var(--bxf-font-d); font-size:2rem; font-weight:700; color:var(--bxf-mist); }
.bxf-plan-per { color: var(--bxf-slate); font-size:.9rem; }
.bxf-plan-feats { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; }
.bxf-plan-feats li { font-size:.88rem; color:var(--bxf-slate); padding-left:24px; position:relative; }
.bxf-plan-feats li::before { content:"✓"; position:absolute; left:0; width:16px; height:16px; border-radius:5px; background:var(--bxf-signal); color:#fff; font-size:.62rem; display:grid; place-items:center; top:2px; }
.bxf-plan .bxf-btn { width:100%; justify-content:center; }

/* testimonials */
.bxf-testi-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .bxf-testi-grid{ grid-template-columns:1fr;} }
.bxf-testi { background: var(--bxf-ink-3); border:1px solid var(--bxf-line); border-radius:var(--bxf-radius); padding:22px; }
.bxf-stars { color:#FBBF24; letter-spacing:2px; margin-bottom:10px; }
.bxf-testi-quote { color: var(--bxf-mist); font-size:.92rem; line-height:1.6; margin:0 0 16px; }
.bxf-testi-who b { display:block; color:var(--bxf-mist); font-size:.9rem; }
.bxf-testi-who span { font-size:.8rem; color: var(--bxf-slate); }

/* ============================================================
   BATCH 12 — studio pipeline cards recolored (12 distinct hues, white text)
   ============================================================ */
.bxf-pipe-item { color: #fff; border: 1px solid rgba(255,255,255,.12); }
.bxf-pipe-item h3 { color: #fff; }
.bxf-pipe-item p  { color: rgba(255,255,255,.86); }
.bxf-pipe-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
/* 12 distinct deep-tint gradients — all keep white text readable */
.bxf-pipe-item:nth-child(1)  { background: linear-gradient(160deg,#3B1E6E,#1A1140); }  /* violet */
.bxf-pipe-item:nth-child(2)  { background: linear-gradient(160deg,#0E3A5E,#0A1B3A); }  /* blue */
.bxf-pipe-item:nth-child(3)  { background: linear-gradient(160deg,#124E4A,#08201F); }  /* teal */
.bxf-pipe-item:nth-child(4)  { background: linear-gradient(160deg,#5A1E4D,#25102A); }  /* magenta */
.bxf-pipe-item:nth-child(5)  { background: linear-gradient(160deg,#1E3A6E,#0C1733); }  /* indigo */
.bxf-pipe-item:nth-child(6)  { background: linear-gradient(160deg,#5E2A18,#2A1109); }  /* amber-brown */
.bxf-pipe-item:nth-child(7)  { background: linear-gradient(160deg,#154E6E,#08222F); }  /* sky */
.bxf-pipe-item:nth-child(8)  { background: linear-gradient(160deg,#4A2270,#1F0F33); }  /* purple */
.bxf-pipe-item:nth-child(9)  { background: linear-gradient(160deg,#6E1E3A,#2E0C18); }  /* crimson */
.bxf-pipe-item:nth-child(10) { background: linear-gradient(160deg,#2A4E14,#122208); }  /* green */
.bxf-pipe-item:nth-child(11) { background: linear-gradient(160deg,#1E4E5E,#0A2129); }  /* cyan-deep */
.bxf-pipe-item:nth-child(12) { background: linear-gradient(160deg,#5E1E2A,#2A0C12); }  /* red */
.bxf-pipe-item:hover { border-color: rgba(255,255,255,.28); }

/* AI tools directory */
.bxf-tools-cat { margin-bottom: 34px; }
.bxf-tools-cat h3 { color: var(--bxf-mist); font-family: var(--bxf-font-d); margin: 0 0 14px; font-size: 1.15rem; }
.bxf-tools-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (max-width:760px){ .bxf-tools-grid{ grid-template-columns: 1fr; } }
.bxf-tool { background: var(--bxf-ink-3); border: 1px solid var(--bxf-line); border-radius: 12px; padding: 14px 16px; transition: border-color .2s, transform .2s; }
.bxf-tool:hover { border-color: var(--bxf-cyan); transform: translateY(-2px); }
.bxf-tool b { color: var(--bxf-mist); font-size: .95rem; }
.bxf-tool span { display:block; color: var(--bxf-slate); font-size: .84rem; margin-top: 3px; line-height:1.5; }

/* inline SEO link clusters */
.bxf-linkcluster { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:16px; }
.bxf-linkcluster a { color: var(--bxf-cyan); font-size:.9rem; font-weight:600; text-decoration:none; }
.bxf-linkcluster a:hover { text-decoration:underline; }
.bxf-outlink { color: var(--bxf-cyan); text-decoration: none; border-bottom: 1px dotted rgba(34,211,238,.5); }
.bxf-outlink:hover { border-bottom-style: solid; }

/* ============================================================
   BATCH 13 — showcase as lead machine: bright blocks, trust, lead form
   ============================================================ */
/* bright conversion bands */
.bxf-band-red { background: linear-gradient(120deg,#DC2626,#7F1D1D); color:#fff; }
.bxf-band-red .bxf-eyebrow, .bxf-band-red .bxf-h2, .bxf-band-red h2, .bxf-band-red h3 { color:#fff; }
.bxf-band-red p, .bxf-band-red .bxf-lead { color: rgba(255,255,255,.92); }
.bxf-band-brightblue { background: linear-gradient(120deg,#2563EB,#1E3A8A); color:#fff; }
.bxf-band-brightblue .bxf-eyebrow, .bxf-band-brightblue .bxf-h2, .bxf-band-brightblue h2, .bxf-band-brightblue h3 { color:#fff; }
.bxf-band-brightblue p, .bxf-band-brightblue .bxf-lead { color: rgba(255,255,255,.92); }
.bxf-band-red .bxf-eyebrow::before, .bxf-band-brightblue .bxf-eyebrow::before { background:#fff !important; }

/* trust bar */
.bxf-trust { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; text-align:center; }
@media (max-width:820px){ .bxf-trust{ grid-template-columns:repeat(2,1fr);} }
.bxf-trust-item b { display:block; font-family:var(--bxf-font-d); font-size:1.9rem; background:var(--bxf-signal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bxf-trust-item span { font-size:.82rem; color:var(--bxf-slate); }
.bxf-band-red .bxf-trust-item b, .bxf-band-brightblue .bxf-trust-item b { -webkit-text-fill-color:#fff; color:#fff; }
.bxf-band-red .bxf-trust-item span, .bxf-band-brightblue .bxf-trust-item span { color:rgba(255,255,255,.85); }

/* mid-page CTA strip */
.bxf-cta-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-radius:var(--bxf-radius); padding:26px 30px; }
.bxf-cta-strip h3 { margin:0; font-family:var(--bxf-font-d); font-size:1.3rem; }
.bxf-cta-strip .bxf-btn { flex:none; }

/* lead form */
.bxf-lead-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:640px; margin:24px auto 0; }
@media (max-width:560px){ .bxf-lead-form{ grid-template-columns:1fr;} }
.bxf-lead-form input, .bxf-lead-form select, .bxf-lead-form textarea { width:100%; padding:13px 15px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:.95rem; }
.bxf-lead-form input::placeholder, .bxf-lead-form textarea::placeholder { color:rgba(255,255,255,.6); }
.bxf-lead-form select option { color:#111; }
.bxf-lead-form .bxf-lf-full { grid-column:1/-1; }
.bxf-lead-form button { grid-column:1/-1; }

/* region badges */
.bxf-regions-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.bxf-region-badge { padding:8px 16px; border-radius:100px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:600; font-size:.88rem; }

/* ============================================================
   BATCH 14 — brand tiles (colored SVG) + leader grid
   ============================================================ */
.bxf-brandgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
@media (max-width:900px){ .bxf-brandgrid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .bxf-brandgrid{ grid-template-columns:repeat(2,1fr);} }
.bxf-brandtile { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #E7E9F2; border-radius:12px; padding:10px 12px; transition:transform .2s, box-shadow .2s; }
.bxf-brandtile:hover { transform:translateY(-3px); box-shadow:0 10px 24px -10px rgba(0,0,0,.18); }
.bxf-brandtile svg { flex:none; }
.bxf-brandtile b { font-size:.82rem; color:#1E2338; line-height:1.15; }

.bxf-leadergrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1000px){ .bxf-leadergrid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .bxf-leadergrid{ grid-template-columns:1fr;} }
.bxf-leader { position:relative; border-radius:var(--bxf-radius); padding:22px 20px 20px; background:var(--bxf-ink-3); border:1px solid var(--bxf-line); overflow:hidden; transition:transform .2s, border-color .2s; }
.bxf-leader::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--lc1),var(--lc2)); }
.bxf-leader:hover { transform:translateY(-4px); border-color:var(--lc1); }
.bxf-leader h3 { margin:8px 0 6px; color:var(--bxf-mist); font-family:var(--bxf-font-d); font-size:1.05rem; }
.bxf-leader p { margin:0; color:var(--bxf-slate); font-size:.86rem; line-height:1.55; }

/* ============================================================
   BATCH 15 — ML page: blue/red/purple cards, readability, colorful blocks
   ============================================================ */
/* scope to ML page via body class */
body.ml-page .bxf-pipe-item { color:#fff; border:1px solid rgba(255,255,255,.14); }
body.ml-page .bxf-pipe-item h3 { color:#fff; }
body.ml-page .bxf-pipe-item p  { color:rgba(255,255,255,.9); }
/* blue / red / purple rotation across the 6 solution cards */
body.ml-page .bxf-pipe-item:nth-child(1){ background:linear-gradient(155deg,#2563EB,#1E3A8A);} /* blue */
body.ml-page .bxf-pipe-item:nth-child(2){ background:linear-gradient(155deg,#DC2626,#7F1D1D);} /* red */
body.ml-page .bxf-pipe-item:nth-child(3){ background:linear-gradient(155deg,#7C3AED,#4C1D95);} /* purple */
body.ml-page .bxf-pipe-item:nth-child(4){ background:linear-gradient(155deg,#2563EB,#1E3A8A);} /* blue */
body.ml-page .bxf-pipe-item:nth-child(5){ background:linear-gradient(155deg,#DC2626,#7F1D1D);} /* red */
body.ml-page .bxf-pipe-item:nth-child(6){ background:linear-gradient(155deg,#7C3AED,#4C1D95);} /* purple */
body.ml-page .bxf-pipe-item:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,0,0,.6); border-color:rgba(255,255,255,.3);}

/* vertical/industry cards — colorful with white text */
body.ml-page #verticals .bxf-card { color:#fff; border:0; }
body.ml-page #verticals .bxf-card h3 { color:#fff; }
body.ml-page #verticals .bxf-card p { color:rgba(255,255,255,.9); }
body.ml-page #verticals .bxf-card:nth-child(1){ background:linear-gradient(155deg,#2563EB,#1E3A8A);}
body.ml-page #verticals .bxf-card:nth-child(2){ background:linear-gradient(155deg,#7C3AED,#4C1D95);}
body.ml-page #verticals .bxf-card:nth-child(3){ background:linear-gradient(155deg,#DC2626,#7F1D1D);}
body.ml-page #verticals .bxf-card:nth-child(4){ background:linear-gradient(155deg,#0EA5E9,#1E3A8A);}

/* lifecycle steps — colorful number chips + readable on purple band */
body.ml-page .bxf-band-purple .bxf-step { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
body.ml-page .bxf-band-purple .bxf-step h3 { color:#fff; }
body.ml-page .bxf-band-purple .bxf-step p { color:rgba(255,255,255,.88); }
body.ml-page .bxf-step:nth-child(1) .bxf-step-num{ background:linear-gradient(155deg,#2563EB,#1E3A8A);}
body.ml-page .bxf-step:nth-child(2) .bxf-step-num{ background:linear-gradient(155deg,#DC2626,#7F1D1D);}
body.ml-page .bxf-step:nth-child(3) .bxf-step-num{ background:linear-gradient(155deg,#7C3AED,#4C1D95);}
body.ml-page .bxf-step:nth-child(4) .bxf-step-num{ background:linear-gradient(155deg,#0EA5E9,#1E3A8A);}

/* technique keyword chips */
.bxf-kw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
@media (max-width:820px){ .bxf-kw-grid{ grid-template-columns:1fr;} }
.bxf-kw { border-radius:14px; padding:18px; color:#fff; }
.bxf-kw h4 { margin:0 0 6px; font-family:var(--bxf-font-d); font-size:1rem; }
.bxf-kw p { margin:0; font-size:.86rem; color:rgba(255,255,255,.9); line-height:1.5; }
.bxf-kw code { background:rgba(255,255,255,.2); padding:1px 6px; border-radius:5px; font-size:.8rem; color:#fff; }
.bxf-kw-blue{ background:linear-gradient(155deg,#2563EB,#1E3A8A);}
.bxf-kw-red{ background:linear-gradient(155deg,#DC2626,#7F1D1D);}
.bxf-kw-purple{ background:linear-gradient(155deg,#7C3AED,#4C1D95);}

/* ============================================================
   BATCH 15 — ML page: blue/red/purple card palette, colorful blocks
   ============================================================ */
/* scope to ML page via body id */
.ml-page .bxf-pipe-item { color:#fff; border:1px solid rgba(255,255,255,.14); }
.ml-page .bxf-pipe-item h3 { color:#fff; }
.ml-page .bxf-pipe-item p { color:rgba(255,255,255,.88); }
/* override the global rainbow with a focused blue/red/purple cycle */
.ml-page .bxf-pipe-item:nth-child(1){ background:linear-gradient(160deg,#2563EB,#1E3A8A);} /* blue */
.ml-page .bxf-pipe-item:nth-child(2){ background:linear-gradient(160deg,#7C3AED,#4C1D95);} /* purple */
.ml-page .bxf-pipe-item:nth-child(3){ background:linear-gradient(160deg,#DC2626,#7F1D1D);} /* red */
.ml-page .bxf-pipe-item:nth-child(4){ background:linear-gradient(160deg,#2563EB,#1E3A8A);} /* blue */
.ml-page .bxf-pipe-item:nth-child(5){ background:linear-gradient(160deg,#7C3AED,#4C1D95);} /* purple */
.ml-page .bxf-pipe-item:nth-child(6){ background:linear-gradient(160deg,#DC2626,#7F1D1D);} /* red */
.ml-page .bxf-pipe-item:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.3); box-shadow:0 18px 40px -18px rgba(0,0,0,.6);}

/* colorful lifecycle steps (was plain) */
.ml-page .bxf-band-purple { background:linear-gradient(120deg,#4C1D95,#1E1B4B); }
.ml-page .bxf-step { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.ml-page .bxf-step h3{ color:#fff; } .ml-page .bxf-step p{ color:rgba(255,255,255,.85); }
.ml-page .bxf-step-num{ background:linear-gradient(135deg,#2563EB,#DC2626); }

/* industry vertical cards — tri-color left accent */
.ml-page .bxf-grid-2 .bxf-card{ border-left:4px solid; }
.ml-page .bxf-grid-2 .bxf-card:nth-child(1){ border-left-color:#2563EB;}
.ml-page .bxf-grid-2 .bxf-card:nth-child(2){ border-left-color:#7C3AED;}
.ml-page .bxf-grid-2 .bxf-card:nth-child(3){ border-left-color:#DC2626;}
.ml-page .bxf-grid-2 .bxf-card:nth-child(4){ border-left-color:#2563EB;}

/* hero tint for ML */
.ml-page .bxf-hero{ background:linear-gradient(120deg,#0A1B3A,#1E1B4B 55%,#2A0C18); }

/* ============================================================
   BATCH 16 — SITEWIDE THEME FIX (match the showcase readability)
   Fixes low-contrast step/cards on dark bands; brightens accents.
   ============================================================ */

/* --- STEP CARDS on dark bands: white text, translucent card (the screenshot fix) --- */
.bxf-band-blue .bxf-step,
.bxf-band-purple .bxf-step,
.bxf-band-red .bxf-step,
.bxf-band-brightblue .bxf-step {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}
.bxf-band-blue .bxf-step h3, .bxf-band-purple .bxf-step h3,
.bxf-band-red .bxf-step h3, .bxf-band-brightblue .bxf-step h3,
.bxf-band-blue .bxf-step .bxf-h3, .bxf-band-purple .bxf-step .bxf-h3,
.bxf-band-red .bxf-step .bxf-h3, .bxf-band-brightblue .bxf-step .bxf-h3 { color:#fff !important; }
.bxf-band-blue .bxf-step p, .bxf-band-purple .bxf-step p,
.bxf-band-red .bxf-step p, .bxf-band-brightblue .bxf-step p { color:rgba(255,255,255,.9) !important; }

/* colorful step numbers on dark bands (blue→red→purple cycle) */
.bxf-band-blue .bxf-step:nth-child(4n+1) .bxf-step-n, .bxf-band-purple .bxf-step:nth-child(4n+1) .bxf-step-n { background:linear-gradient(155deg,#2563EB,#1E3A8A); }
.bxf-band-blue .bxf-step:nth-child(4n+2) .bxf-step-n, .bxf-band-purple .bxf-step:nth-child(4n+2) .bxf-step-n { background:linear-gradient(155deg,#DC2626,#7F1D1D); }
.bxf-band-blue .bxf-step:nth-child(4n+3) .bxf-step-n, .bxf-band-purple .bxf-step:nth-child(4n+3) .bxf-step-n { background:linear-gradient(155deg,#7C3AED,#4C1D95); }
.bxf-band-blue .bxf-step:nth-child(4n) .bxf-step-n,   .bxf-band-purple .bxf-step:nth-child(4n) .bxf-step-n   { background:linear-gradient(155deg,#0EA5E9,#1E3A8A); }

/* --- bxf-band-blue: brighten to the showcase's readable navy-blue --- */
.bxf-band-blue { background: linear-gradient(135deg,#0A1B3A,#132B5E 60%,#0A1B3A) !important; }
.bxf-band-blue .bxf-h2, .bxf-band-blue h2, .bxf-band-blue h3 { color:#fff; }
.bxf-band-blue .bxf-lead, .bxf-band-blue p { color:rgba(255,255,255,.9); }
.bxf-band-blue .bxf-eyebrow { color:#7CC6FF; }

/* --- generic cards on dark bands stay readable --- */
.bxf-band-blue .bxf-card, .bxf-band-purple .bxf-card {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
}
.bxf-band-blue .bxf-card h3, .bxf-band-purple .bxf-card h3,
.bxf-band-blue .bxf-card .bxf-h3, .bxf-band-purple .bxf-card .bxf-h3 { color:#fff; }
.bxf-band-blue .bxf-card p, .bxf-band-purple .bxf-card p { color:rgba(255,255,255,.88); }

/* --- FAQ on dark bands readable --- */
.bxf-band-blue .bxf-faq details, .bxf-band-purple .bxf-faq details { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.bxf-band-blue .bxf-faq summary, .bxf-band-purple .bxf-faq summary { color:#fff; }
.bxf-band-blue .bxf-faq p, .bxf-band-purple .bxf-faq p { color:rgba(255,255,255,.85); }

/* --- unify accent to the showcase blue/red system across service pages --- */
:root { --bxf-accent-blue:#2563EB; --bxf-accent-red:#DC2626; --bxf-accent-purple:#7C3AED; }

/* ============================================================
   BATCH 17 — FORCE white text on dark tool/kw cards inside white bands
   (beats .bxf-band-white p override; screenshot readability fix)
   ============================================================ */
.bxf-band-white .bxf-tool, .bxf-tool { background:#141A33 !important; border:1px solid rgba(255,255,255,.14) !important; }
.bxf-band-white .bxf-tool b, .bxf-tool b { color:#FFFFFF !important; }
.bxf-band-white .bxf-tool span, .bxf-tool span { color:rgba(255,255,255,.82) !important; }
.bxf-band-white .bxf-tool:hover, .bxf-tool:hover { border-color:var(--bxf-cyan) !important; }

/* tools category headings (were faint white on white band) -> dark for the band */
.bxf-band-white .bxf-tools-cat h3 { color:#0B1027 !important; }

/* kw cards (GANs/SMOTE etc) — ensure white text on their colored bg regardless of band */
.bxf-band-white .bxf-kw h4, .bxf-kw h4 { color:#fff !important; }
.bxf-band-white .bxf-kw p, .bxf-kw p { color:rgba(255,255,255,.9) !important; }
.bxf-band-white .bxf-kw code, .bxf-kw code { color:#fff !important; background:rgba(255,255,255,.18) !important; }

/* brand tiles inside white bands: keep them light with dark text (they're white cards) */
.bxf-band-white .bxf-brandtile b { color:#1E2338 !important; }