.belit-about{
  --navy:#051f3e;
  --blue:#128bcc;
  --red:#ed1c27;
  --white:#ffffff;
  --ink:#071a33;
  --muted:rgba(5,31,62,.70);
  --line:rgba(5,31,62,.12);
  --shadow: 0 18px 60px rgba(5,31,62,.10);
  --shadow2: 0 28px 90px rgba(5,31,62,.14);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  isolation:isolate;
}
.belit-about *{ box-sizing:border-box; }
.belit-about a{ color:inherit; text-decoration:none; }
.belit-about img{ max-width:100%; display:block; }

.ba-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.ba-sec{ padding:120px 0; position:relative; }
@media (max-width: 900px){ .ba-sec{ padding:84px 0; } }

/* ---------- shared headings ---------- */
.ba-centerhead{ max-width: 860px; margin: 0 auto 56px; text-align:center; }
.ba-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:12.5px; font-weight:900;
  color:rgba(5,31,62,.78);
  letter-spacing:.04em;
}
.ba-eyebrow::before{
  content:""; width:10px; height:10px;
  border-radius:3px;
  background:linear-gradient(135deg, var(--blue), rgba(18,139,204,.35));
  box-shadow:0 10px 24px rgba(18,139,204,.12);
  flex:0 0 auto;
}
.ba-h1{
  margin:22px 0 18px;
  font-size:clamp(42px, 5.4vw, 76px);
  line-height:1.02;
  letter-spacing:-.04em;
  color:var(--navy);
}
.ba-h2{
  margin:14px 0 0;
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--navy);
}
.ba-brandline{
  height:3px; width:140px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(237,28,39,.82), transparent);
  margin:20px auto 0;
}

/* ---------- reveal motion ---------- */
.ba-observe .ba-reveal{
  opacity:0; transform: translateY(18px); filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.18,.9,.2,1),
    transform .85s cubic-bezier(.18,.9,.2,1),
    filter .85s cubic-bezier(.18,.9,.2,1);
}
.ba-observe.ba-in .ba-reveal{ opacity:1; transform: translateY(0); filter: blur(0); }
.ba-stagger > *{
  opacity:0; transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.18,.9,.2,1), transform .8s cubic-bezier(.18,.9,.2,1);
}
.ba-in .ba-stagger > *{ opacity:1; transform: translateY(0); }
.ba-stagger > *:nth-child(1){ transition-delay:.06s; }
.ba-stagger > *:nth-child(2){ transition-delay:.12s; }
.ba-stagger > *:nth-child(3){ transition-delay:.18s; }
.ba-stagger > *:nth-child(4){ transition-delay:.24s; }
.ba-stagger > *:nth-child(5){ transition-delay:.30s; }
.ba-stagger > *:nth-child(6){ transition-delay:.36s; }
.ba-stagger > *:nth-child(7){ transition-delay:.42s; }
.ba-stagger > *:nth-child(8){ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .ba-reveal, .ba-stagger > *{ transition:none !important; transform:none !important; filter:none !important; opacity:1 !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.ba-pagehero{
  position:relative;
  padding:120px 0 96px;
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(18,139,204,.18), transparent 60%),
    linear-gradient(180deg, rgba(18,139,204,.06) 0%, rgba(255,255,255,1) 75%);
  border-bottom: 1px solid rgba(5,31,62,.08);
  overflow:hidden;
}
.ba-pagehero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(5,31,62,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,31,62,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 380px at 50% 100%, transparent 0, #000 70%);
  -webkit-mask-image: radial-gradient(900px 380px at 50% 100%, transparent 0, #000 70%);
  pointer-events:none;
  opacity:.55;
}
.ba-herohead{
  position:relative;
  text-align:center;
  max-width: 860px;
  margin: 0 auto;
}
.ba-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size:13px; font-weight:900;
  color:rgba(5,31,62,.80);
  letter-spacing:.02em;
}
.ba-kicker .dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(237,28,39,.16);
  animation: ba-pulse 2.4s ease-in-out infinite;
}
@keyframes ba-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(237,28,39,.16); }
  50%{ box-shadow:0 0 0 8px rgba(237,28,39,.06); }
}
.ba-lead{
  margin: 0 auto;
  max-width: 740px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--navy);
  font-weight:600;
}

.ba-herobody{
  position:relative;
  max-width: 880px;
  margin: 64px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px){ .ba-herobody{ grid-template-columns: 1fr; gap:18px; } }
.ba-herobody p{
  margin:0;
  padding: 28px 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.ba-herobody p:first-child{ border-top: 3px solid var(--red); }
.ba-herobody p:last-child{ border-top: 3px solid var(--blue); }

@media (max-width: 768px){
  .ba-pagehero{ padding:96px 0 72px; }
}

/* ============================================================
   EU PROJEKTI (DARK)
   ============================================================ */
.ba-dark{
  background:
    radial-gradient(1000px 520px at 25% 10%, rgba(18,139,204,.22), transparent 62%),
    radial-gradient(900px 520px at 80% 70%, rgba(237,28,39,.14), transparent 60%),
    linear-gradient(180deg, #041a34 0%, #051f3e 55%, #041a34 100%);
  color: rgba(255,255,255,.92);
  position:relative;
  overflow:hidden;
}
.ba-dark::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 380px at 50% 0%, #000 0, transparent 70%);
  -webkit-mask-image: radial-gradient(900px 380px at 50% 0%, #000 0, transparent 70%);
  pointer-events:none;
}
.ba-dark .ba-h2{ color:#fff; }
.ba-dark .ba-eyebrow{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.86);
}
.ba-dark .ba-eyebrow::before{
  background:linear-gradient(135deg, rgba(237,28,39,.95), rgba(18,139,204,.55));
}

.ba-eu-lead{
  max-width: 880px;
  margin: 0 auto 40px;
  text-align:center;
}
.ba-eu-lead p{
  margin: 0 auto 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.85;
  font-size: 16px;
}
.ba-eu-lead p:last-child{ margin-bottom:0; }

.ba-eu-programs{
  position:relative;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  max-width: 880px;
  margin: 0 auto 28px;
}
@media (max-width: 760px){ .ba-eu-programs{ grid-template-columns: 1fr; } }

.ba-eucard{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  padding:26px 26px 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
}
.ba-eucard:hover{
  transform: translateY(-3px);
  border-color: rgba(237,28,39,.30);
  background: linear-gradient(180deg, rgba(237,28,39,.08), rgba(255,255,255,.04));
}
.eu-tag{
  display:inline-block;
  font-size:11px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.66);
  padding:6px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  margin-bottom:18px;
}
.ba-eucard h3{
  margin:0 0 10px;
  font-size:24px; color:#fff;
  letter-spacing:-.01em;
}
.ba-eucard p{
  margin:0; color: rgba(255,255,255,.74);
  font-size:14.5px; line-height:1.7;
}

.ba-rdband{
  position:relative;
  max-width:880px; margin: 0 auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(237,28,39,.10), rgba(18,139,204,.12));
  padding:22px 26px 24px;
}
.rd-lbl{
  font-size:12px; font-weight:900;
  text-transform:uppercase; letter-spacing:.12em;
  color: rgba(255,255,255,.82);
  margin-bottom:14px;
}
.rd-list{ display:flex; flex-wrap:wrap; gap:8px; }
.rd-pill{
  padding:9px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color:#fff; font-size:13px; font-weight:800;
  transition: background .2s ease, border-color .2s ease;
}
.rd-pill:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.40);
}

/* ============================================================
   SARADNJA
   ============================================================ */
.ba-coop{
  background:
    radial-gradient(900px 520px at 85% 15%, rgba(18,139,204,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,139,204,.04), transparent 62%);
}
.ba-coop-lead{
  max-width: 880px;
  margin: 0 auto 44px;
  text-align:center;
}
.ba-coop-lead p{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.ba-coopgrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
  margin-bottom:32px;
}
@media (max-width: 980px){ .ba-coopgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px){ .ba-coopgrid{ grid-template-columns: 1fr; } }

.ba-coopcard{
  position:relative;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  padding:26px 22px 24px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.ba-coopcard:hover{
  transform: translateY(-3px);
  border-color: rgba(18,139,204,.22);
  box-shadow: var(--shadow2);
}
.coop-role{
  display:inline-block;
  font-size:11px; font-weight:900;
  letter-spacing:.10em; text-transform:uppercase;
  color: var(--red);
  margin-bottom:14px;
  padding: 6px 12px;
  border-radius:999px;
  background: rgba(237,28,39,.08);
  border: 1px solid rgba(237,28,39,.18);
}
.ba-coopcard h3{
  margin:0 0 10px;
  font-size:18px; color: var(--navy);
  letter-spacing:-.01em;
  line-height:1.3;
}
.ba-coopcard p{
  margin:0; color: var(--muted);
  font-size:13.5px; line-height:1.65;
}

.ba-techpartners{
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  padding:18px;
}
.tp-rows{ display:flex; flex-direction:column; gap:10px; }
.tp-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-radius:16px;
  border:1px solid rgba(5,31,62,.08);
  background: linear-gradient(90deg, rgba(5,31,62,.02), transparent);
  transition: border-color .25s ease, transform .25s ease;
}
.tp-row:hover{ border-color: rgba(18,139,204,.22); transform: translateY(-1px); }
.tp-name b{
  display:block; font-size:17px; color: var(--navy);
  letter-spacing:-.01em;
}
.tp-name span{
  display:block; font-size:12.5px; color: rgba(5,31,62,.60);
  font-weight:700; margin-top:3px;
}
.tp-level{
  font-size:12px; font-weight:950;
  letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  white-space:nowrap;
}
.tp-gold{ background: linear-gradient(135deg, #f6c451, #c98f1c); color:#3a2a06; }
.tp-silver{ background: linear-gradient(135deg, #d8dde2, #9aa3ad); color:#1a232c; }

/* ============================================================
   TIM
   ============================================================ */
.ba-team{
  background:
    radial-gradient(900px 520px at 85% 15%, rgba(18,139,204,.12), transparent 60%),
    linear-gradient(180deg, rgba(18,139,204,.04), transparent 62%);
}
.ba-teamgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
}
@media (max-width: 980px){ .ba-teamgrid{ grid-template-columns: 1fr; max-width:560px; margin-left:auto; margin-right:auto; } }

.ba-person{
  position:relative;
  border-radius:26px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background:rgba(255,255,255,.97);
  overflow:hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
  display:flex; flex-direction:column;
}
.ba-person:hover{
  transform: translateY(-4px);
  border-color: rgba(18,139,204,.24);
  box-shadow: var(--shadow2);
}
.ba-person::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(237,28,39,.85), transparent);
  opacity:0; transition: opacity .25s ease;
}
.ba-person:hover::after{ opacity:1; }

.ba-photo{
  height:340px;
  background-size:cover;
  background-position:center top;
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.ba-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(5,31,62,.40));
  pointer-events:none;
}
.ba-person:hover .ba-photo{ transform: scale(1.06); }

.ba-pbody{
  padding:26px 26px 24px;
  display:flex; flex-direction:column;
  flex:1;
}
.ba-pbody h3{
  margin:0 0 8px;
  font-size:22px; color: var(--navy);
  letter-spacing:-.01em;
}
.ba-role{
  display:inline-block;
  font-weight:900;
  color: var(--red);
  font-size:11.5px;
  letter-spacing:.10em;
  text-transform: uppercase;
  margin-bottom:18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(237,28,39,.08);
  border: 1px solid rgba(237,28,39,.18);
  align-self:flex-start;
}
.ba-pbio p{
  margin:0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14.5px;
}
.ba-pbio p + p{ margin-top:10px; }
.ba-bio-more{
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .4s ease, margin-top .4s ease;
}
.ba-person.is-open .ba-bio-more{
  max-height: 1200px;
  opacity: 1;
  margin-top: 10px;
}
.ba-biotoggle{
  margin-top: 18px;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:0; padding:0;
  font:inherit; font-weight:900; font-size:13px;
  letter-spacing:.02em;
  color: var(--blue);
  cursor:pointer;
}
.ba-biotoggle .lbl-less{ display:none; }
.ba-person.is-open .ba-biotoggle .lbl-less{ display:inline; }
.ba-person.is-open .ba-biotoggle .lbl-more{ display:none; }
.ba-biotoggle .arr{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease;
  margin-top:-2px;
}
.ba-person.is-open .ba-biotoggle .arr{ transform: rotate(-135deg); margin-top:2px; }
.ba-biotoggle:hover{ color: var(--navy); }

/* ============================================================
   KLJUCNA PREDNOST
   ============================================================ */
.ba-edge{
  padding: 100px 0;
  background:
    radial-gradient(900px 520px at 10% 30%, rgba(237,28,39,.06), transparent 62%),
    radial-gradient(900px 520px at 90% 70%, rgba(18,139,204,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,31,62,.02), transparent 60%);
}
.ba-edgebox{
  position:relative;
  max-width: 920px; margin: 0 auto;
  border-radius:28px;
  background: linear-gradient(135deg, #06224a 0%, #051f3e 100%);
  color:#fff;
  padding:56px 52px 46px;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.ba-edgebox::before{
  content:"\201C";
  position:absolute;
  top:-26px; left:18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 220px;
  line-height:1;
  color: rgba(237,28,39,.22);
  pointer-events:none;
}
.ba-edgebox::after{
  content:""; position:absolute;
  right:-60px; bottom:-60px;
  width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(18,139,204,.30), transparent 65%);
  filter: blur(6px); pointer-events:none;
}
.ba-edgequote{
  position:relative;
  margin:0;
  font-size:clamp(17px, 1.7vw, 22px);
  line-height:1.65;
  color: rgba(255,255,255,.94);
  max-width: 76ch;
  font-weight:500;
  letter-spacing:-.005em;
}
.ba-edgemeta{ margin-top:28px; position:relative; }
.ba-edgetag{
  display:inline-flex; align-items:center;
  padding:12px 18px; border-radius:999px;
  font-size:12.5px; font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background: linear-gradient(90deg, rgba(237,28,39,.85), rgba(18,139,204,.65));
  box-shadow: 0 14px 30px rgba(237,28,39,.20);
}
@media (max-width: 720px){
  .ba-edgebox{ padding:40px 26px 32px; }
  .ba-edgebox::before{ font-size:160px; top:-12px; left:10px; }
}

/* ============================================================
   NAGRADE
   ============================================================ */
.ba-awards{
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(18,139,204,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(5,31,62,.03));
  position:relative;
  overflow:hidden;
}
.ba-awards::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(5,31,62,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(900px 380px at 50% 30%, #000 0, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 380px at 50% 30%, #000 0, transparent 75%);
  opacity:.55;
  pointer-events:none;
}
.ba-awardgrid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 980px){ .ba-awardgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .ba-awardgrid{ grid-template-columns: 1fr; } }

.ba-award{
  position:relative;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(360px 220px at 50% -20%, rgba(18,139,204,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfcfe);
  padding:28px 22px 24px;
  text-align:center;
  box-shadow: 0 14px 40px rgba(5,31,62,.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.ba-award::before{
  content:"";
  position:absolute; left:-20%; top:-30%;
  width:140%; height:60%;
  background: radial-gradient(circle, rgba(18,139,204,.14), transparent 60%);
  opacity:0; transition: opacity .4s ease;
  pointer-events:none;
}
.ba-award::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity:0; transition: opacity .3s ease;
}
.ba-award:hover{
  transform: translateY(-6px);
  border-color: rgba(18,139,204,.26);
  box-shadow: 0 24px 64px rgba(18,139,204,.14);
}
.ba-award:hover::after{ opacity:1; }
.ba-award:hover .aw-medal{ transform: translateY(-2px) scale(1.04); color: var(--blue); }

.aw-medal{
  width:64px; height:64px;
  margin: 0 auto 16px;
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(18,139,204,.14), rgba(18,139,204,.04));
  border-radius:50%;
  border: 1px solid rgba(18,139,204,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(18,139,204,.10);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s ease;
}
.aw-medal svg{ width:38px; height:38px; }

.aw-year{
  display:inline-block;
  font-weight:950; color: var(--blue);
  font-size:13px; letter-spacing:.06em;
  font-variant-numeric: tabular-nums;
  margin-bottom:8px;
  padding: 4px 10px;
  border-radius:999px;
  background: rgba(18,139,204,.08);
  border: 1px solid rgba(18,139,204,.20);
}
.aw-name{
  margin:0;
  font-size:14.5px;
  color: var(--navy);
  font-weight:800;
  line-height:1.45;
  letter-spacing:-.005em;
}

/* ============================================================
   SERTIFIKATI
   ============================================================ */
.ba-certs{
  background:
    radial-gradient(900px 520px at 15% 80%, rgba(237,28,39,.06), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(237,28,39,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(237,28,39,.03));
}
.ba-certs .ba-eyebrow::before{
  background: linear-gradient(135deg, var(--red), rgba(237,28,39,.30));
  box-shadow: 0 10px 24px rgba(237,28,39,.12);
}
.ba-certgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
}
@media (max-width: 900px){ .ba-certgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px){ .ba-certgrid{ grid-template-columns: 1fr; } }

.ba-certcard{
  position:relative;
  border-radius:22px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  padding:22px 22px 22px;
  box-shadow: 0 14px 40px rgba(5,31,62,.05);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:14px;
  overflow:hidden;
  color: inherit;
  cursor: pointer;
}
.ba-certcard--static{ cursor: default; }
.ba-certcard::before{
  content:""; position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, var(--red), rgba(237,28,39,.20));
  opacity:.55;
  transition: opacity .25s ease;
}
.ba-certcard::after{
  content:""; position:absolute;
  inset:auto -40% -60% -40%;
  height: 140px;
  background: radial-gradient(circle, rgba(237,28,39,.10), transparent 60%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.ba-certcard:hover{
  transform: translateY(-4px);
  border-color: rgba(237,28,39,.28);
  box-shadow: 0 22px 56px rgba(237,28,39,.10);
}
.ba-certcard:hover::before{ opacity:1; }
.ba-certcard:hover::after{ opacity:1; }

.ct-img{
  position:relative;
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(5,31,62,.08);
  background: #ffffff;
  overflow:hidden;
  line-height:0;
}
.ct-img img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ba-certcard:hover .ct-img img{ transform: scale(1.04); }

.ba-certcard b{
  display:block;
  font-size:15px;
  color: var(--navy);
  letter-spacing:-.01em;
  line-height:1.4;
  font-weight:900;
  margin-top: 4px;
}