/* ============================================================
   Basefund — Shared Base Styles
   Linked by all site pages: <link rel="stylesheet" href="/shared/base.css">
   Page-specific styles remain inline in each HTML file.
   ============================================================ */

/* ── TOKENS ── */
:root {
  /* Colors — Primary */
  --blue:#145DD0; --blue-lt:#28A4DD; --blue-deep:#0B3580;
  --blue-pale:#DDEEFF; --blue-tint:#EEF5FF;
  /* Colors — Accent */
  --accent:#00F4E0; --accent-tint:rgba(0,244,224,.10); --accent-deep:#00C4B4;
  /* Colors — Neutral */
  --white:#FFFFFF; --off:#F7F8FA; --gray:#ECEEF3;
  --dark:#0B3580; --dark-2:#0E4399;
  --ink:#2B2B2B; --slate:#5C6680; --slate-lt:#8B96AE;
  /* Colors — Semantic */
  --green:#167A43; --green-bg:#DFF4EA; --green-lt:#E8F5E9;
  --amber:#9A6100; --amber-bg:#FFF2DC;
  --red:#DC2626; --red-tint:#FFF5F5; --red-bg:rgba(220,38,38,.08);
  /* Colors — Decorative */
  --star:#F5A623; --chrome:#F2F4F7;
  /* Borders */
  --border:rgba(0,0,0,.07); --border-lt:rgba(255,255,255,.12);
  /* Typography */
  --f-head:'Lora',Georgia,serif; --f-body:'Inter',-apple-system,sans-serif;
  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  /* Radius */
  --r-sm:2px; --r-md:2px; --r-lg:2px; --r-xl:2px; --r-2xl:2px; --r-pill:9999px;
  /* Shadows */
  --s-sm:0 2px 8px rgba(20,93,208,.10);
  --s-md:0 6px 20px rgba(20,93,208,.13);
  --s-lg:0 16px 48px rgba(20,93,208,.18);
  --s-xl:0 32px 80px rgba(20,93,208,.22);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--f-body);background:var(--off);color:var(--ink);overflow-x:clip;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:var(--f-body);}
img{display:block;max-width:100%;}

/* ── LAYOUT ── */
.container{max-width:1200px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.container{padding:0 24px;}}

/* ── CLS PLACEHOLDERS ── */
bf-nav{display:block;height:64px;}
bf-nav:not(:defined) *{visibility:hidden!important;}
bf-footer{display:block;min-height:340px;background:var(--dark);}

/* ── SCROLL REVEAL ── */
.r{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform;}
.r.v{opacity:1;transform:none;will-change:auto;}
.sd1{transition-delay:.1s;}.sd2{transition-delay:.2s;}.sd3{transition-delay:.3s;}.sd4{transition-delay:.4s;}.sd5{transition-delay:.5s;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:-.01em;border:none;border-radius:var(--r-sm);transition:all 220ms var(--ease);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;}
.btn:active{transform:scale(.972);}
.btn-p{background:var(--blue);color:#fff;}
.btn-p:hover{background:#1A6AEB;box-shadow:0 8px 32px rgba(20,93,208,.4);transform:translateY(-1px);}
.btn-w{background:#fff;color:var(--dark);box-shadow:0 4px 16px rgba(0,0,0,.1);}
.btn-w:hover{background:var(--off);transform:translateY(-1px);}
.btn-gw{background:#2a6fd4;color:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.28);}
.btn-gw:hover{background:#3578da;border-color:rgba(255,255,255,.5);}
.btn-ob{background:var(--blue-tint);color:var(--blue);border:1.5px solid rgba(20,93,208,.2);}
.btn-ob:hover{background:var(--blue-pale);border-color:var(--blue);}
.btn-g{background:transparent;color:var(--slate);border:1.5px solid var(--border);}
.btn-g:hover{color:var(--ink);border-color:rgba(0,0,0,.2);}
.btn-sm{padding:16px 18px;font-size:13px;}
.btn-lg{padding:16px 36px;font-size:16px;}
.btn-xl{padding:18px 44px;font-size:16px;letter-spacing:-.02em;}
.arr{width:18px;height:18px;border-radius:var(--r-sm);background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:11px;transition:transform 200ms var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

/* ── SECTION HEADER ── */
.section-header{text-align:center;max-width:800px;margin:0 auto 48px;}
.section-header .eyebrow{align-items:center;box-sizing:border-box;color:#5C6680;column-gap:8px;display:inline-flex;font-family:'Inter',-apple-system,sans-serif;font-size:14px;font-weight:600;letter-spacing:.18em;margin:0 0 12px;padding:0;row-gap:8px;text-align:center;text-transform:uppercase;}
.section-header h2{font-family:var(--f-head);font-size:clamp(28px,4vw,48px);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin-bottom:14px;}
.section-header h2 em{font-style:italic;color:var(--blue);}
.section-header p{font-size:18px;line-height:1.7;color:var(--slate);}
.section-wrap{padding:96px 0 0;}

/* ── BREADCRUMBS ── */
.breadcrumb{font-size:13px;color:var(--slate-lt);padding:16px 0;}
.breadcrumb .container{max-width:1400px;}
.breadcrumb a{color:var(--slate);transition:color 150ms;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb .sep{margin:0 8px;opacity:.4;}

/* ── CTA SECTION (Blue full-width) ── */
.cta-section{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);padding:96px 0;position:relative;overflow:hidden;text-align:center;isolation:isolate;}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(255,255,255,.10) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(0,244,224,.08) 0%,transparent 50%);pointer-events:none;z-index:0;}
.cta-section::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 20%,transparent 75%);z-index:0;animation:cta-dots-drift 20s linear infinite;}
@keyframes cta-dots-drift{0%{background-position:0 0;}100%{background-position:280px 0;}}
.cta-section h2{font-family:var(--f-head);font-size:clamp(32px,4.5vw,52px);font-weight:600;color:#fff;margin-bottom:18px;position:relative;z-index:1;letter-spacing:-.03em;line-height:1.1;}
.cta-section h2 em{font-style:italic;color:rgba(255,255,255,.75);}
.cta-section p{font-size:17px;color:rgba(255,255,255,.65);max-width:44ch;margin:0 auto 44px;line-height:1.65;position:relative;z-index:1;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
@media(max-width:600px){.cta-section{padding:64px 0;}.cta-actions{flex-direction:column;align-items:center;}}

/* ── BLUE HERO VARIANT (solutions pages) ── */
.hero-blue{background:linear-gradient(148deg,#0B3580 0%,#1352C4 100%)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;overflow:hidden;position:relative;}
.hero-blue::before{content:'';position:absolute;inset:0;background:url('/shared/hero-wave.svg') right -20px center / 68% auto no-repeat,radial-gradient(ellipse 70% 110% at 105% 50%,rgba(40,164,221,.22) 0%,transparent 55%),radial-gradient(ellipse 45% 65% at 0% 100%,rgba(0,244,224,.10) 0%,transparent 50%),radial-gradient(ellipse 60% 55% at 55% -5%,rgba(20,93,208,.55) 0%,transparent 55%);z-index:0;pointer-events:none;}
.hero-blue .container{position:relative;z-index:1;}
.hero-blue .hero-eyebrow,.hero-blue .eyebrow{color:var(--accent)!important;}
.hero-blue h1{color:#fff!important;}
.hero-blue .hero-sub{color:rgba(255,255,255,.72)!important;}

/* ── A11Y ── */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}}