/* learn.codeff.nl announcement: the pill in the hero and the "Learn" section (index.html). */
.hero-announce{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:6px 14px 6px 6px;border:1px solid rgba(71,182,217,.35);border-radius:999px;background:rgba(71,182,217,.08);color:#dfeef3;font-size:14px;transition:border-color .2s,background .2s}
.hero-announce:hover{border-color:var(--cyan);background:rgba(71,182,217,.14)}
.hero-announce b{padding:3px 9px;border-radius:999px;background:var(--cyan);color:#101718;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.hero-announce span{transition:transform .2s}
.hero-announce:hover span{transform:translateX(3px)}

.learn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;background:linear-gradient(160deg,#1d2425,#151b1c);border-bottom:1px solid var(--line)}
.learn h2{font:800 clamp(38px,4.2vw,62px)/1.02 Manrope,sans-serif;letter-spacing:-2.5px;margin:24px 0 22px}
.learn h2 em{color:var(--cyan);font-style:normal}
.learn-lead{font-size:18px;line-height:1.7;color:#b8c0c2;max-width:560px;margin:0 0 26px}
.learn-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;max-width:560px}
.learn-points li{display:flex;gap:12px;color:#d6dfe0;line-height:1.55}
.learn-points li:before{content:"›";color:var(--cyan);font-weight:800}

.course-card{position:relative;padding:32px;border:1px solid rgba(71,182,217,.35);border-radius:14px;background:radial-gradient(circle at 1px 1px,rgba(71,182,217,.13) 1.2px,transparent 0) 0 0/22px 22px,#1a2122;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.course-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 9px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#bbf7d0;font-size:13px;font-weight:700}
.course-badge i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.course-card h3{font:800 30px/1.1 Manrope,sans-serif;letter-spacing:-1px;margin:18px 0 10px}
.course-card>p{color:#b8c0c2;line-height:1.65;margin:0 0 22px}
.course-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}

@media(max-width:900px){.learn{grid-template-columns:1fr;gap:40px}.course-card{padding:24px}}
@media(prefers-reduced-motion:reduce){.hero-announce,.hero-announce span{transition:none}}