@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


:root{
  --bb-blue:#0047FF;--bb-lime:#C6FF3D;--bb-coral:#FF6B5B;--bb-navy:#0B1535;
  --bb-surface:#FCFDFF;--bb-line:rgba(11,21,53,.085);--bb-shadow:0 18px 55px rgba(11,21,53,.08);
}
html{background:var(--bb-surface)}
body{position:relative;background-color:var(--bb-surface)!important}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(circle at 8% 8%,rgba(0,71,255,.07),transparent 24%),
    radial-gradient(circle at 92% 18%,rgba(198,255,61,.10),transparent 20%),
    radial-gradient(circle at 72% 88%,rgba(255,107,91,.055),transparent 24%),
    linear-gradient(180deg,#fff 0%,#FBFCFF 48%,#fff 100%);
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:
    radial-gradient(rgba(0,71,255,.18) .65px,transparent .65px),
    linear-gradient(rgba(11,21,53,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,21,53,.022) 1px,transparent 1px);
  background-size:26px 26px,64px 64px,64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.13) 60%,transparent 95%);
}
section,.section,header,.hero{position:relative}
section:where(:not(.stats):not(.final)):before,.section:before{
  content:"";position:absolute;left:50%;top:0;width:min(1180px,92%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,71,255,.08),rgba(11,21,53,.08),transparent);
  pointer-events:none;
}
.card,.course,.feature,.opportunity,.step,.dashboard,.download-box,.gate,.module,.tool-card,.game-stat,.lab-shell{
  border-color:var(--bb-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 45px rgba(11,21,53,.045);
}
.card:hover,.course:hover,.feature:hover,.opportunity:hover,.tool-card:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 65px rgba(11,21,53,.10)!important;
}
nav{box-shadow:0 8px 30px rgba(11,21,53,.035)}
.premium-grid{
  background-image:linear-gradient(rgba(0,71,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,71,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
.premium-orb{position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}




/* =========================================================
   BONBONS WEB ATMOSPHERE — colorful, textured, premium
   Keeps each page's own layout/palette; adds shared depth only.
   ========================================================= */
:root{
  --bb-blue:#0047FF;
  --bb-lime:#C6FF3D;
  --bb-coral:#FF6B5B;
  --bb-navy:#0B1535;
  --bb-cream:#F8FAFF;
  --bb-surface:#FCFDFF;
  --bb-line:rgba(11,21,53,.085);
}
body{
  font-family:"Plus Jakarta Sans",Arial,Helvetica,sans-serif!important;
}
body:before{
  background:
    radial-gradient(circle at 8% 8%,rgba(0,71,255,.11),transparent 25%),
    radial-gradient(circle at 90% 13%,rgba(198,255,61,.10),transparent 22%),
    radial-gradient(circle at 18% 82%,rgba(255,107,91,.07),transparent 25%),
    radial-gradient(circle at 76% 72%,rgba(116,86,255,.055),transparent 24%),
    linear-gradient(180deg,#FCFDFF 0%,#F6F8FD 48%,#FBFCFF 100%)!important;
}
body:after{
  opacity:.52!important;
  background-image:
    radial-gradient(rgba(0,71,255,.20) .7px,transparent .7px),
    linear-gradient(rgba(11,21,53,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,21,53,.022) 1px,transparent 1px),
    radial-gradient(rgba(255,107,91,.10) .65px,transparent .65px)!important;
  background-size:28px 28px,68px 68px,68px 68px,44px 44px!important;
}
nav{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.card,.course,.feature,.opportunity,.step,.dashboard,.download-box,.gate,.module,.tool-card,.game-stat,.lab-shell{
  border-color:var(--bb-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.88) inset,0 16px 45px rgba(11,21,53,.05);
}
.card:hover,.course:hover,.feature:hover,.opportunity:hover,.tool-card:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 65px rgba(11,21,53,.10)!important;
}
.premium-grid{
  background-image:
    linear-gradient(rgba(0,71,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,71,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 80% 10%,rgba(198,255,61,.10),transparent 26%)!important;
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* SCANNABLE INFORMATION HIERARCHY */
.section,.hero{isolation:isolate}
.heading{max-width:720px}
.heading p{max-width:650px}
.label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,71,255,.07);
  border:1px solid rgba(0,71,255,.09);
}
.card,.opportunity,.feature,.step,.dashboard,.download-box,.recruiter-callout{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.section-white{
  background:rgba(255,255,255,.58)!important;
}
@media(min-width:901px){
  .section{padding-top:86px;padding-bottom:86px}
}

/* Registration FAQs: distinct question cards with native, keyboard-friendly disclosure. */
.bb-conversion-faq details{
  --faq-accent:#245BA8;
  --faq-tint:#EFF5FF;
  --faq-border:#C8DAF2;
  margin:10px 0 0;
  padding:0;
  border:1px solid var(--faq-border);
  border-left:4px solid var(--faq-accent);
  border-radius:14px;
  background:var(--faq-tint);
  overflow:hidden;
}
.bb-conversion-faq details:nth-of-type(3n + 2){
  --faq-accent:#A63D35;
  --faq-tint:#FFF2EF;
  --faq-border:#F2C9C1;
}
.bb-conversion-faq details:nth-of-type(3n){
  --faq-accent:#226742;
  --faq-tint:#EFF9F0;
  --faq-border:#C7E5D1;
}
.bb-conversion-faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:12px 14px;
  box-sizing:border-box;
  list-style:none;
  color:var(--faq-accent);
  font-size:13px;
  line-height:1.55;
}
.bb-conversion-faq summary::-webkit-details-marker{display:none}
.bb-conversion-faq summary::after{
  content:'+';
  display:grid;
  place-items:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  border:1px solid var(--faq-border);
  border-radius:50%;
  background:#FFF;
  color:var(--faq-accent);
  font-size:20px;
  font-weight:600;
  line-height:1;
}
.bb-conversion-faq details[open]{border-color:var(--faq-accent)}
.bb-conversion-faq details[open] summary::after{content:'−'}
.bb-conversion-faq details p{
  padding:0 14px 14px;
  margin:0;
  color:#40516B;
  font-size:12px;
  line-height:1.7;
}
.bb-conversion-faq summary:hover{background:#FFFFFF66}
.bb-conversion-faq summary:focus-visible{
  outline:3px solid var(--faq-accent);
  outline-offset:-3px;
  border-radius:10px;
}