/* ═══════════════════════════════════
           HERO
        ═══════════════════════════════════ */
 .hero {
     background: linear-gradient(160deg, #F0F6FF 0%, #EBF2FF 40%, #F5F7FA 100%);
     overflow: hidden;
     position: relative;
 }

 .hero::before {
     content: '';
     position: absolute;
     width: 800px;
     height: 800px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(59, 130, 246, .12) 0%, transparent 70%);
     top: -200px;
     right: -200px;
     pointer-events: none;
 }

 .hero::after {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(10, 82, 204, .07) 0%, transparent 70%);
     bottom: 0;
     left: 10%;
     pointer-events: none;
 }

 .carousel-item {
     min-height: 88vh;
 }

 .hero-wrapper {
     max-width: 1440px;
     margin: 0 auto;
     padding: 0 40px;
     position: relative;
     z-index: 1;
 }

 .hero-slide {
     min-height: 88vh;
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     align-items: center;
     gap: 64px;
     padding: 60px 0 80px;
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--blue);
     margin-bottom: 20px;
 }

 .hero-eyebrow::before {
     content: '';
     display: block;
     width: 28px;
     height: 2px;
     background: var(--blue);
     border-radius: 2px;
 }

 .hero h1 {
     font-size: clamp(2.4rem, 4vw, 3.6rem);
     margin-bottom: 24px;
     color: var(--ink);
 }

 .hero h1 .accent {
     color: var(--blue);
     font-style: italic;
 }

 .hero p {
     font-size: 1.05rem;
     color: var(--ink-light);
     max-width: 480px;
     margin-bottom: 40px;
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .hero-image {
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }

 .hero-image img {
     width: 100%;
     max-width: 680px;
     border-radius: var(--radius-lg);
     object-fit: cover;
     aspect-ratio: 4/3;
 }

 /* Carousel controls */
 .hero-controls {
     position: absolute;
     bottom: 36px;
     left: 40px;
     display: flex;
     align-items: center;
     gap: 8px;
     z-index: 10;
 }

 .hero-controls button {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .85);
     backdrop-filter: blur(8px);
     border: 1.5px solid var(--border);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .2s;
     color: var(--blue);
 }

 .hero-controls button:hover {
     background: var(--white);
     box-shadow: var(--shadow-sm);
     transform: scale(1.05);
 }

 .carousel-indicators.hero-indicators {
     bottom: 40px;
     left: auto;
     right: 40px;
     margin: 0;
     gap: 6px;
 }

 .hero-indicators button {
     width: 8px;
     height: 8px;
     background: rgba(10, 82, 204, .25);
     border: none;
     opacity: 1;
     padding: 0;
     transition: all .3s;
 }

 .hero-indicators button.active {
     width: 24px;
     border-radius: 4px;
     background: var(--blue);
 }