.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1e3040 0%, #2c7089 60%, #3a8fa3 100%);
}

.hero-bg-circles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-bg-circles circle {
    opacity: .07;
}

.hero .container {
    display: flex;
    padding: 0 0 0 10px;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 590px;
    padding: 80px 0;
    animation: fadeUp .8s ease both;
    flex: 1 0;
}

.hero-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.hero-eyebrow {
    display: inline-block;
    background: var(--gold);
    color: var(--white);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 40px;
}

.hero-logo-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(232, 245, 248, 1);
    border: 1.5px solid rgba(232, 245, 248, 0.28);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    animation: fadeUpRotate .8s ease both;
}

@keyframes fadeUpRotate {
    from {
        opacity: 0;
        transform: translateY(28px) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

.hero-logo-mark {
    width: 58px;
    height: 58px;
}

.hero h1 {
    font-family: 'Roboto Slab', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero h1 span {
    color: var(--gold);
}

.hero-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .85);
    line-height: 1.7;
    margin-bottom: 36px;
    font-weight: 600;
}

.hero-footer {
    font-size: .9rem;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    margin-bottom: 24px;
    font-weight: 400;
}

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

.hero-image-wrap {
    max-width: 600px;
    flex: 1 0;
    min-height: 560px;
    overflow: hidden;
    pointer-events: none;
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
}

/* .hero-image-wrap::before {
      content: '';
      position: absolute;
      margin-left: 600px;
      inset: 0;
      background: linear-gradient(90deg, #1e3040 0%, transparent 5%);
      z-index: 1;
    }
    .hero-carousel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(270deg, #1e3040 0%, transparent 55%);
      z-index: 1;
      margin-left: 545px;
    } */