/* Full-bleed, high-energy visual direction. */
.hero { min-height: 720px; padding: 0; color: #fff; background: var(--ink); }
.hero::before { display: none; }
.hero > .container { width: 100%; max-width: none; min-height: 720px; }
.hero__grid { display: block; min-height: 720px; }
.hero__copy { position: absolute; z-index: 8; top: 50%; left: max(28px, calc((100vw - 1180px) / 2)); width: min(550px, calc(100vw - 56px)); max-width: none; transform: translateY(-50%); text-shadow: 0 2px 18px rgba(8,15,42,.22); }
.hero__copy h1 { max-width: 600px; margin: 20px 0 24px; color: #fff; font-size: clamp(56px,6.1vw,88px); line-height: .94; }
.hero__copy h1 em { color: var(--lime); }
.hero__copy > p { color: rgba(255,255,255,.88); font-size: 18px; max-width: 530px; }
.hero .eyebrow { color: var(--lime); }
.hero .eyebrow > span:first-child { background: var(--lime); }
.hero .btn--primary { color: var(--ink); background: var(--lime); box-shadow: 0 16px 34px rgba(199,243,107,.23); }
.hero .btn--primary:hover { background: #d5ff7e; }
.hero .btn--text { color: #fff; }
.hero .proof { border-top-color: rgba(255,255,255,.25); }
.hero .proof span { color: rgba(255,255,255,.68); }
.hero__visual { position: absolute; inset: 0; min-height: 720px; padding: 0; max-width: none; }
.carousel { width: 100%; height: 720px; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.carousel::before { display: none; }
.carousel__slide img { object-position: center center; }
.carousel__shade { background: linear-gradient(90deg, rgba(8,15,42,.93) 0%, rgba(8,15,42,.72) 31%, rgba(8,15,42,.18) 62%, rgba(8,15,42,.04) 100%), linear-gradient(0deg, rgba(8,15,42,.28), transparent 45%); }
.carousel__caption { left: auto; right: max(34px, calc((100vw - 1180px) / 2)); bottom: 86px; align-items: end; text-align: right; }
.carousel__caption strong { font-size: 25px; }
.carousel__controls { left: auto; right: max(30px, calc((100vw - 1180px) / 2)); width: 230px; bottom: 30px; }
.hero__badge { left: auto; right: max(290px, calc((100vw - 640px) / 2)); bottom: 29px; }
.ticker { color: var(--ink); background: var(--lime); }
.ticker i { color: var(--blue); }
.catalog { background: linear-gradient(180deg, #fff 0%, #f4f6ff 100%); }
.catalog .kicker { display: inline-flex; padding: 8px 12px; border-radius: 999px; color: #fff; background: var(--blue); }
.filters button { background: #fff; border-color: #dfe3f1; }
.filters button:hover, .filters .is-active { background: var(--blue); border-color: var(--blue); }
.course-card { border: 0; box-shadow: 0 9px 30px rgba(23,33,77,.07); }
.benefits { background: var(--ink); color: #fff; }
.benefits .kicker { color: var(--lime); }
.benefits__intro > p, .benefit-list p { color: #bfc5da; }
.benefit-list article { border-bottom-color: rgba(255,255,255,.14); }
.benefit-list article > span { color: var(--lime); }
.cta__box { background: linear-gradient(135deg, #3155e7 0%, #673de6 62%, #ff7361 140%); }
@media (max-width: 900px) {
  .hero, .hero > .container, .hero__grid, .hero__visual, .carousel { min-height: 780px; height: 780px; }
  .hero__copy { top: 62px; left: 28px; transform: none; width: min(610px, calc(100vw - 56px)); }
  .hero__copy h1 { font-size: clamp(52px,10vw,76px); max-width: 570px; }
  .carousel__shade { background: linear-gradient(180deg, rgba(8,15,42,.92) 0%, rgba(8,15,42,.66) 48%, rgba(8,15,42,.18) 75%, rgba(8,15,42,.46) 100%); }
  .carousel__caption { right: 28px; bottom: 78px; }
  .carousel__controls { right: 26px; bottom: 24px; }
  .hero__badge { left: 28px; right: auto; bottom: 23px; }
}
@media (max-width: 600px) {
  .hero, .hero > .container, .hero__grid, .hero__visual, .carousel { min-height: 790px; height: 790px; }
  .hero__copy { top: 42px; left: 15px; width: calc(100vw - 30px); }
  .hero__copy h1 { margin-top: 16px; font-size: 49px; }
  .hero__copy > p { font-size: 16px; line-height: 1.55; }
  .hero__actions { gap: 14px; margin: 26px 0; }
  .hero .btn { min-height: 50px; padding: 0 18px; }
  .hero .proof { max-width: 100%; justify-content: space-between; }
  .carousel__slide img { object-position: 62% center; }
  .carousel__caption { display: none; }
  .carousel__controls { left: auto; right: 16px; width: 160px; }
  .hero__badge { left: 15px; }
}