/* =========================================================
   BSA — Sales Academy (PT BNI Life Insurance)
   Design tokens
   ========================================================= */
:root{
  --bsa-teal-900:#003543;
  --bsa-teal-800:#004052;
  --bsa-teal-700:#006885;
  --bsa-teal-500:#00AAAD;
  --bsa-teal-100:#E3F3F3;

  --bsa-orange-600:#F15A22;
  --bsa-orange-700:#D6491A;
  --bsa-amber-500:#F99D1F;

  --bsa-ink:#0B2B32;
  --bsa-ink-soft:#4A6169;
  --bsa-paper:#F6FAFA;
  --bsa-white:#FFFFFF;

  --bsa-font:'Montserrat', sans-serif;

  --bsa-radius-sm:10px;
  --bsa-radius-md:18px;
  --bsa-radius-lg:28px;

  --bsa-shadow-sm:0 4px 18px rgba(0,64,82,.08);
  --bsa-shadow-md:0 14px 40px rgba(0,64,82,.14);

  --bsa-ease:cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body.bsa-body{
  margin:0;
  font-family:var(--bsa-font);
  color:var(--bsa-ink);
  background:var(--bsa-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.bsa-container{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.bsa-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--bsa-ease), transform .8s var(--bsa-ease);
}
.bsa-reveal.bsa-is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   Header / Nav
   ========================================================= */
.bsa-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:500;
  padding:18px 0;
  background:transparent;
  transition:background .4s var(--bsa-ease), padding .4s var(--bsa-ease), box-shadow .4s var(--bsa-ease);
}
.bsa-header.bsa-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  padding:10px 0;
  box-shadow:0 2px 24px rgba(0,53,67,.08);
}
.bsa-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* logo — top right per spec */
.bsa-header__logo{
  order:3;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
}
.bsa-header__logo-img{
  height:34px;
  width:auto;
  display:block;
  transition:transform .35s var(--bsa-ease);
}
.bsa-header__logo:hover .bsa-header__logo-img{
  transform:scale(1.04);
}
.bsa-header__logo-sub{
  margin-top:3px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  transition:color .4s var(--bsa-ease);
}
.bsa-header.bsa-scrolled .bsa-header__logo-sub{
  color:var(--bsa-ink-soft);
}

.bsa-nav{ order:2; }
.bsa-nav__list{
  display:flex;
  gap:34px;
}
.bsa-nav__link{
  position:relative;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  padding:6px 0;
  transition:color .4s var(--bsa-ease);
}
.bsa-nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--bsa-orange-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--bsa-ease);
}
.bsa-nav__link:hover::after{ transform:scaleX(1); }

.bsa-header.bsa-scrolled .bsa-nav__link{
  color:var(--bsa-ink);
}

.bsa-burger{
  order:1;
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px; height:38px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.bsa-burger span{
  height:2px;
  width:100%;
  background:var(--bsa-teal-700);
  border-radius:2px;
  transition:transform .3s var(--bsa-ease), opacity .3s var(--bsa-ease);
}
.bsa-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.bsa-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.bsa-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .bsa-nav{ display:none; }
  .bsa-burger{ display:flex; }
}

/* Mobile off-canvas */
.bsa-mobile-overlay{
  position:fixed; inset:0;
  background:rgba(0,53,67,.5);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--bsa-ease), visibility .35s var(--bsa-ease);
  z-index:600;
}
.bsa-mobile-overlay.bsa-open{ opacity:1; visibility:visible; }

.bsa-mobile-menu{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(78vw,340px);
  background:var(--bsa-teal-800);
  z-index:700;
  padding:100px 32px 32px;
  transform:translateX(100%);
  transition:transform .45s var(--bsa-ease);
}
.bsa-mobile-menu.bsa-open{ transform:translateX(0); }
.bsa-mobile-menu ul{ display:flex; flex-direction:column; gap:6px; }
.bsa-mobile-link{
  display:block;
  padding:14px 4px;
  font-size:19px;
  font-weight:700;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* =========================================================
   Buttons
   ========================================================= */
.bsa-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.01em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .3s var(--bsa-ease), box-shadow .3s var(--bsa-ease), background .3s var(--bsa-ease), color .3s var(--bsa-ease);
}
.bsa-btn--primary{
  background:var(--bsa-orange-600);
  color:#fff;
  box-shadow:0 10px 26px rgba(241,90,34,.32);
}
.bsa-btn--primary:hover{
  transform:translateY(-3px);
  background:var(--bsa-orange-700);
  box-shadow:0 16px 34px rgba(241,90,34,.4);
}
.bsa-btn--ghost{
  background:transparent;
  border-color:rgba(0,104,133,.3);
  color:var(--bsa-teal-700);
}
.bsa-btn--ghost:hover{
  border-color:var(--bsa-teal-700);
  transform:translateY(-3px);
}
.bsa-btn--daftar{
  background:transparent;
  border-color:rgba(0,104,133,.3);
  color:#9F9F9F;
}
.bsa-btn--daftar:hover{
  border-color:#fff;
  transform:translateY(-3px);
}
.bsa-btn--block{ width:100%; justify-content:center; }

/* =========================================================
   Hero
   ========================================================= */
.bsa-hero{
  position:relative;
  padding:168px 0 120px;
  background:linear-gradient(165deg, var(--bsa-teal-800) 0%, var(--bsa-teal-700) 46%, var(--bsa-teal-500) 100%);
  overflow:hidden;
}
.bsa-hero__field{
  position:absolute; inset:0;
  opacity:.5;
}
.bsa-hero__field-svg{ width:100%; height:100%; }
.bsa-hero__field-path{ fill:rgba(255,255,255,.06); }

.bsa-hero__inner{ position:relative; z-index:2; }

.bsa-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bsa-amber-500);
  margin:0 0 18px;
}
.bsa-hero .bsa-eyebrow{ color:rgba(255,255,255,.85); }

.bsa-hero__title{
  font-size:clamp(34px,5.6vw,60px);
  line-height:1.08;
  font-weight:800;
  color:#fff;
  margin:0 0 24px;
  max-width:820px;
  letter-spacing:-.01em;
}
.bsa-hero__lead{
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
  max-width:620px;
  margin:0 0 36px;
  font-weight:400;
}
.bsa-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:56px;
}
.bsa-hero .bsa-btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.4);
}
.bsa-hero .bsa-btn--ghost:hover{ border-color:#fff; }

.bsa-hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin:0;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.18);
}
.bsa-stat__num{
  font-size:clamp(26px,3vw,38px);
  font-weight:800;
  color:#fff;
  margin:0;
}
.bsa-stat__label{
  margin:6px 0 0;
  font-size:12.5px;
  color:rgba(255,255,255,.72);
  font-weight:600;
}
.bsa-hero__note{
  font-size:11px;
  color:rgba(255,255,255,.5);
  margin:14px 0 0;
}

@media (max-width:700px){
  .bsa-hero__stats{ grid-template-columns:repeat(2,1fr); row-gap:28px; }
}

/* =========================================================
   Sections generic
   ========================================================= */
.bsa-section{ padding:104px 0; }
.bsa-section--alt{ background:var(--bsa-teal-100); }

.bsa-h2{
  font-size:clamp(26px,3.4vw,40px);
  font-weight:800;
  line-height:1.15;
  margin:0 0 18px;
  color:var(--bsa-teal-800);
  max-width:680px;
}
.bsa-lead-sm{
  font-size:16px;
  color:var(--bsa-ink-soft);
  max-width:640px;
  line-height:1.7;
  margin:0 0 52px;
}
.bsa-body-text{
  font-size:15.5px;
  line-height:1.8;
  color:var(--bsa-ink-soft);
  margin:0 0 18px;
}

.bsa-row-split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:start;
}
@media (max-width:860px){
  .bsa-row-split{ grid-template-columns:1fr; gap:36px; }
}

/* =========================================================
   Department cards
   ========================================================= */
.bsa-dept-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media (max-width:980px){ .bsa-dept-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bsa-dept-grid{ grid-template-columns:1fr; } }

.bsa-dept-card{
  position:relative;
  background:#fff;
  border-radius:var(--bsa-radius-md);
  padding:32px 26px 28px;
  box-shadow:var(--bsa-shadow-sm);
  transition:transform .4s var(--bsa-ease), box-shadow .4s var(--bsa-ease);
  overflow:hidden;
}
.bsa-dept-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--bsa-shadow-md);
}
.bsa-dept-card__index{
  position:absolute;
  top:18px; right:22px;
  font-size:34px;
  font-weight:800;
  color:var(--bsa-teal-100);
  z-index:0;
}
.bsa-dept-card__icon{
  font-size:26px;
  color:var(--bsa-orange-600);
  margin-bottom:20px;
  position:relative;
}
.bsa-dept-card__title{
  font-size:16.5px;
  font-weight:700;
  color:var(--bsa-teal-800);
  margin:0 0 12px;
  position:relative;
  line-height:1.35;
}
.bsa-dept-card__text{
  font-size:13.5px;
  line-height:1.7;
  color:var(--bsa-ink-soft);
  margin:0;
  position:relative;
}

/* =========================================================
   Ecosystem diagram (signature element)
   ========================================================= */
.bsa-ecosystem{ background:var(--bsa-teal-800); }
.bsa-ecosystem .bsa-eyebrow{ color:var(--bsa-amber-500); }
.bsa-ecosystem .bsa-h2{ color:#fff; }
.bsa-ecosystem .bsa-lead-sm{ color:rgba(255,255,255,.72); }

.bsa-eco-diagram{
  position:relative;
  width:100%;
  max-width:980px;
  margin:0 auto;
  aspect-ratio:1000/560;
}
.bsa-eco-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.bsa-eco-line{
  fill:none;
  stroke:rgba(0,170,173,.55);
  stroke-width:2;
  stroke-dasharray:640;
  stroke-dashoffset:640;
  transition:stroke-dashoffset 1.6s var(--bsa-ease);
}
.bsa-eco-diagram.bsa-eco-animate .bsa-eco-line{ stroke-dashoffset:0; }

.bsa-eco-node{
  position:absolute;
  transform:translate(-50%,-50%);
  text-align:center;
  font-weight:700;
  border-radius:var(--bsa-radius-sm);
  padding:10px 12px;
  font-size:11px;
  line-height:1.35;
  white-space:normal;
  width:132px;
  z-index:2;
}
.bsa-eco-node--dept{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  backdrop-filter:blur(2px);
}
.bsa-eco-node--channel{
  background:var(--bsa-amber-500);
  color:var(--bsa-teal-900);
  border-radius:100px;
  width:auto;
  max-width:150px;
  white-space:nowrap;
  padding:12px 18px;
}
.bsa-eco-node--hub{
  background:var(--bsa-orange-600);
  color:#fff;
  border-radius:50%;
  width:130px; height:130px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  white-space:normal;
  box-shadow:0 0 0 10px rgba(241,90,34,.18);
}

@media (max-width:760px){
  .bsa-eco-diagram{ aspect-ratio:auto; height:auto; }
  .bsa-eco-svg{ display:none; }
  .bsa-eco-diagram{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
  }
  .bsa-eco-node{ position:static; transform:none; width:100%; max-width:280px; }
  .bsa-eco-node--hub{ width:130px; margin:8px auto; }
}

/* =========================================================
   Channel cards
   ========================================================= */
.bsa-channel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media (max-width:980px){ .bsa-channel-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bsa-channel-grid{ grid-template-columns:1fr; } }

.bsa-channel-card{
  background:linear-gradient(150deg,#fff, var(--bsa-teal-100));
  border-radius:var(--bsa-radius-md);
  padding:34px 24px;
  border:1px solid rgba(0,104,133,.1);
  transition:transform .4s var(--bsa-ease), border-color .4s var(--bsa-ease);
}
.bsa-channel-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--bsa-teal-500);
}
.bsa-channel-card__icon{
  font-size:24px;
  color:var(--bsa-teal-700);
  margin-bottom:18px;
}
.bsa-channel-card__title{
  font-size:17px;
  font-weight:700;
  color:var(--bsa-teal-800);
  margin:0 0 10px;
}
.bsa-channel-card__text{
  font-size:13.5px;
  color:var(--bsa-ink-soft);
  line-height:1.7;
  margin:0;
}

/* =========================================================
   Karir teaser
   ========================================================= */
.bsa-check-list{ margin:0 0 30px; }
.bsa-check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  color:var(--bsa-ink-soft);
  margin-bottom:12px;
  line-height:1.6;
}
.bsa-check-list i{ color:var(--bsa-teal-500); margin-top:3px; }

.bsa-karir-panel{
  background:#fff;
  border-radius:var(--bsa-radius-lg);
  padding:38px;
  box-shadow:var(--bsa-shadow-md);
}
.bsa-karir-panel__title{
  font-size:20px;
  font-weight:800;
  color:var(--bsa-teal-800);
  margin:0 0 6px;
}
.bsa-karir-panel__hint{
  font-size:13px;
  color:var(--bsa-ink-soft);
  margin:0 0 26px;
  line-height:1.7;
}
.bsa-karir-panel__steps{ margin:0 0 28px; }
.bsa-karir-panel__steps li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:600;
  color:var(--bsa-ink-soft);
  padding:9px 0;
  border-bottom:1px dashed #EAF1F1;
}
.bsa-karir-panel__steps li:last-child{ border-bottom:none; }
.bsa-karir-panel__steps span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--bsa-teal-100);
  color:var(--bsa-teal-700);
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}

/* =========================================================
   Manajemen
   ========================================================= */
.bsa-mgmt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:26px;
}
@media (max-width:860px){ .bsa-mgmt-grid{ grid-template-columns:1fr; } }

.bsa-mgmt-card{
  background:#fff;
  border-radius:var(--bsa-radius-md);
  padding:32px 28px;
  box-shadow:var(--bsa-shadow-sm);
  transition:transform .4s var(--bsa-ease), box-shadow .4s var(--bsa-ease);
}
.bsa-mgmt-card:hover{ transform:translateY(-6px); box-shadow:var(--bsa-shadow-md); }
.bsa-mgmt-card__icon{
  font-size:24px;
  color:var(--bsa-orange-600);
  margin-bottom:16px;
}
.bsa-mgmt-card h3{
  font-size:17px;
  font-weight:700;
  color:var(--bsa-teal-800);
  margin:0 0 10px;
}
.bsa-mgmt-card p{
  font-size:13.5px;
  color:var(--bsa-ink-soft);
  line-height:1.7;
  margin:0 0 16px;
}
.bsa-mgmt-card a{
  font-size:13px;
  font-weight:700;
  color:var(--bsa-teal-700);
}
.bsa-mgmt-card a i{ margin-left:6px; transition:transform .3s var(--bsa-ease); }
.bsa-mgmt-card a:hover i{ transform:translateX(4px); }

.bsa-mgmt-note{
  font-size:12.5px;
  color:var(--bsa-ink-soft);
  text-align:center;
}

/* =========================================================
   Footer
   ========================================================= */
.bsa-footer{
  background:var(--bsa-teal-900);
  color:#fff;
  padding:64px 0 28px;
}

/* Row 1: left = 3 app/badge icons · right = 2-line tagline */
.bsa-footer__row1{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:36px;
}
.bsa-footer__apps{
  display:flex;
  align-items:center;
  gap:16px;
}
.bsa-footer__app-icon{
  height:40px;
  width:auto;
  border-radius:6px;
  transition:transform .3s var(--bsa-ease);
}
.bsa-footer__app-icon--badge{ height:44px; }
.bsa-footer__app-icon:hover{ transform:translateY(-3px); }

.bsa-footer__tagline{ text-align:right; }
.bsa-footer__tagline-line{
  margin:0;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  line-height:1.7;
}

.bsa-footer__divider{
  height:1px;
  background:rgba(255,255,255,.12);
}

/* Row 2: centered social icons */
.bsa-footer__row2{
  display:flex;
  justify-content:center;
  gap:22px;
  padding:32px 0;
  font-size:19px;
}
.bsa-footer__row2 a{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
  transition:background .3s var(--bsa-ease), transform .3s var(--bsa-ease), border-color .3s var(--bsa-ease);
}
.bsa-footer__row2 a:hover{
  background:var(--bsa-orange-600);
  border-color:var(--bsa-orange-600);
  transform:translateY(-4px);
}

.bsa-footer__bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.bsa-footer__legal{ display:flex; gap:22px; }
.bsa-footer__legal a:hover{ color:#fff; }

@media (max-width:700px){
  .bsa-footer__row1{ flex-direction:column; align-items:flex-start; }
  .bsa-footer__tagline{ text-align:left; }
}