:root { --cream: #fff; --line: #e8eaf1; --shadow: 0 22px 60px rgba(17, 25, 54, .11); }
body { background: #fff; }
.header { background: rgba(255,255,255,.92); }
.hero { position: relative; background: #fff; padding-top: 64px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 18%, rgba(49,85,231,.06), transparent 24%), radial-gradient(circle at 84% 14%, rgba(199,243,107,.11), transparent 22%); }
.hero__grid { position: relative; grid-template-columns: .92fr 1.08fr; gap: 62px; }
.hero__visual { min-height: 500px; display: block; padding: 16px 0 30px; }
.hero__visual::before { display: none; }
.carousel { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 30px; overflow: hidden; background: #eef1f5; box-shadow: var(--shadow); }
.carousel::before { content: ""; position: absolute; inset: 12px; z-index: 4; border: 1px solid rgba(255,255,255,.58); border-radius: 21px; pointer-events: none; }
.carousel__slides, .carousel__slide { position: absolute; inset: 0; }
.carousel__slide { opacity: 0; transform: scale(1.025); transition: opacity .65s ease, transform 1.1s ease; }
.carousel__slide.is-active { opacity: 1; transform: scale(1); }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(10,18,46,.68) 100%); pointer-events: none; }
.carousel__caption { position: absolute; z-index: 3; left: 34px; bottom: 78px; color: #fff; display: grid; gap: 5px; }
.carousel__caption span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.carousel__caption strong { font-size: clamp(20px,2.2vw,30px); letter-spacing: -.035em; }
.carousel__controls { position: absolute; z-index: 5; left: 30px; right: 30px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.carousel__arrow { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(17,25,54,.32); backdrop-filter: blur(8px); cursor: pointer; transition: .2s background, .2s transform; }
.carousel__arrow:hover { background: var(--blue); transform: scale(1.07); }
.carousel__dots { display: flex; gap: 7px; }
.carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.5); cursor: pointer; transition: .25s width, .25s background; }
.carousel__dots button.is-active { width: 25px; background: var(--lime); }
.hero__badge { left: -22px; bottom: 4px; animation: badgeFloat 4s ease-in-out infinite; }
@keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.catalog { background: #fff; }
.benefits { background: #f7f8fc; }
.course-card { border-color: #eceef4; box-shadow: 0 1px 0 rgba(17,25,54,.02); }
.course-card:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(17,25,54,.12); }
.course-cover::before { transition: .35s transform; }
.course-card:hover .course-cover::before { transform: scale(1.12) rotate(8deg); }
.cta { background: #fff; }
.cta__box { position: relative; overflow: hidden; box-shadow: 0 30px 65px rgba(49,85,231,.18); }
.cta__box::after { content: ""; position: absolute; width: 260px; height: 260px; border: 55px solid rgba(255,255,255,.08); border-radius: 50%; right: -95px; top: -95px; pointer-events: none; }
.cta__box > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .carousel__slide, .hero__badge, .course-card, .course-cover::before { animation: none; transition: none; } }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 18px; } .hero__visual { min-height: 0; max-width: 700px; width: 100%; margin: auto; } .carousel { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .hero { padding-top: 46px; } .carousel { aspect-ratio: 4 / 3; border-radius: 23px; } .carousel__caption { left: 22px; bottom: 70px; } .carousel__controls { left: 20px; right: 20px; bottom: 19px; } .hero__badge { left: 8px; bottom: 4px; } }