.kastata-hero * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.kastata-hero {
    /* ----- CSS VARIABLES (scoped to this component) ----- */
    --k-hue: 214;
    --k-primary: hsl(var(--k-hue), 89%, 52%);
    --k-primary-dark: hsl(var(--k-hue), 82%, 46%);
    --k-primary-rgb: 24, 119, 242;
    --k-overlay-start: rgba(0, 0, 0, 0.75);
    --k-overlay-mid: rgba(var(--k-primary-rgb), 0.25);
    --k-overlay-end: rgba(0, 0, 0, 0.5);
    --k-badge-bg: rgba(var(--k-primary-rgb), 0.9);
    --k-dot-inactive: rgba(255, 255, 255, 0.4);
    --k-dot-active: var(--k-primary);
    --k-text-primary: #fff;
    --k-text-secondary: rgba(255, 255, 255, 0.9);
    --k-text-muted: rgba(255, 255, 255, 0.8);
    --k-bottom-bg: rgba(0, 0, 0, 0.55);
    --k-bottom-border: rgba(255, 255, 255, 0.1);
    --k-font-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --k-transition-smooth: 0.3s ease;
    --k-transition-fade: 1s ease-in-out;
}

/* ===== HERO CONTAINER ===== */
.kastata-hero .k-hero {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 300px;
    max-height: 460px;
    background: #000;
    overflow: hidden;
    font-family: var(--k-font-base);
}

@media (min-width: 768px) {
    .kastata-hero .k-hero {
        height: 50vh;
        min-height: 380px;
        max-height: 520px;
    }
}

/* ===== SLIDE ===== */
.kastata-hero .k-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--k-transition-fade);
    z-index: 0;
}

.kastata-hero .k-slide.is-active {
    opacity: 1;
    z-index: 10;
}

/* ===== ZOOM ===== */
.kastata-hero .k-slide.is-active .k-image {
    animation: kZoom 12s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes kZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

.kastata-hero .k-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== OVERLAY ===== */
.kastata-hero .k-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.7) 100%);
}

/* ===== CONTENT FADE ===== */
.kastata-hero .k-fade-in {
    animation: kFadeUp 0.8s ease forwards;
}

@keyframes kFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LAYOUT: TWO COLUMNS ===== */
.kastata-hero .k-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .kastata-hero .k-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }
}

.kastata-hero .k-left {
    flex: 1 1 50%;
    max-width: 100%;
}

.kastata-hero .k-right {
    flex: 1 1 40%;
    max-width: 100%;
    text-align: left;
}

@media (min-width: 768px) {
    .kastata-hero .k-right {
        text-align: right;
        padding-left: 1rem;
    }
}

/* ===== BADGE – clean, any length ===== */
.kastata-hero .k-badge {
    display: inline-block;
    background: var(--k-badge-bg);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    color: var(--k-text-primary);
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.25rem 1.2rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .kastata-hero .k-badge {
        font-size: 0.75rem;
        padding: 0.3rem 1.5rem;
    }
}

/* ===== BUTTON ===== */
.kastata-hero .k-btn {
    background: var(--k-primary);
    transition: all var(--k-transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--k-text-primary);
    text-decoration: none;
}

.kastata-hero .k-btn:hover {
    background: var(--k-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
    .kastata-hero .k-btn {
        padding: 0.6rem 1.8rem;
        font-size: 0.95rem;
    }
}

/* ===== DOTS ===== */
.kastata-hero .k-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--k-dot-inactive);
    cursor: pointer;
    transition: all 0.2s;
}

.kastata-hero .k-dot.is-active {
    background: var(--k-dot-active);
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(var(--k-primary-rgb), 0.4);
}

/* ===== TYPOGRAPHY ===== */
.kastata-hero .k-title {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--k-text-primary);
}

@media (min-width: 640px) {
    .kastata-hero .k-title {
        font-size: 3.2rem;
    }
}
@media (min-width: 1024px) {
    .kastata-hero .k-title {
        font-size: 4rem;
    }
}

.kastata-hero .k-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--k-text-secondary);
}

.kastata-hero .k-description {
    font-size: 0.85rem;
    color: var(--k-text-muted);
    line-height: 1.5;
}

@media (min-width: 640px) {
    .kastata-hero .k-subtitle {
        font-size: 1.2rem;
    }
    .kastata-hero .k-description {
        font-size: 0.95rem;
    }
}

/* ===== BOTTOM BAR ===== */
.kastata-hero .k-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--k-bottom-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--k-bottom-border);
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--k-text-secondary);
}

@media (min-width: 640px) {
    .kastata-hero .k-bottom {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

.kastata-hero .k-bottom .k-year {
    color: var(--k-primary);
    font-weight: 700;
    margin: 0 2px;
}

.kastata-hero .k-bottom i {
    margin: 0 6px;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .kastata-hero .k-hero {
        min-height: 300px;
    }
    .kastata-hero .k-wrapper {
        padding-top: 30px; /* adjust this value */
    }
    .kastata-hero .k-bottom {
        font-size: 0.7rem;
        padding: 0.4rem;
    }
    .kastata-hero .k-right {
        text-align: left;
    }
    .kastata-hero .k-title {
        font-size: 1.8rem;
    }
}

/* ===== UTILITY ===== */
.kastata-hero .u-absolute {
    position: absolute;
}
.kastata-hero .u-inset-0 {
    inset: 0;
}
.kastata-hero .u-relative {
    position: relative;
}
.kastata-hero .u-z-20 {
    z-index: 20;
}
.kastata-hero .u-z-30 {
    z-index: 30;
}
.kastata-hero .u-max-w-7xl {
    max-width: 80rem;
}
.kastata-hero .u-mx-auto {
    margin: 0 auto;
}
.kastata-hero .u-px-4 {
    padding: 0 1rem;
}
.kastata-hero .u-h-full {
    height: 100%;
}
.kastata-hero .u-flex {
    display: flex;
}
.kastata-hero .u-items-center {
    align-items: center;
}
.kastata-hero .u-justify-center {
    justify-content: center;
}
.kastata-hero .u-text-white {
    color: #fff;
}
.kastata-hero .u-font-semibold {
    font-weight: 600;
}
.kastata-hero .u-font-bold {
    font-weight: 700;
}
.kastata-hero .u-text-xs {
    font-size: 0.75rem;
}
.kastata-hero .u-text-sm {
    font-size: 0.875rem;
}
.kastata-hero .u-text-base {
    font-size: 1rem;
}
.kastata-hero .u-leading-relaxed {
    line-height: 1.625;
}
.kastata-hero .u-inline-block {
    display: inline-block;
}
.kastata-hero .u-inline-flex {
    display: inline-flex;
}
.kastata-hero .u-gap-2 {
    gap: 0.5rem;
}
.kastata-hero .u-gap-3 {
    gap: 0.75rem;
}
.kastata-hero .u-px-3 {
    padding: 0 0.75rem;
}
.kastata-hero .u-px-6 {
    padding: 0 1.5rem;
}
.kastata-hero .u-py-1 {
    padding: 0.25rem 0;
}
.kastata-hero .u-py-3 {
    padding: 0.75rem 0;
}
.kastata-hero .u-mb-4 {
    margin-bottom: 1rem;
}
.kastata-hero .u-mt-2 {
    margin-top: 0.5rem;
}
.kastata-hero .u-mt-4 {
    margin-top: 1rem;
}
.kastata-hero .u-mt-6 {
    margin-top: 1.5rem;
}
.kastata-hero .u-rounded-xl {
    border-radius: 0.75rem;
}
.kastata-hero .u-no-underline {
    text-decoration: none;
}
.kastata-hero .u-bottom-16 {
    bottom: 4rem;
}
.kastata-hero .u-left-1\/2 {
    left: 50%;
}
.kastata-hero .u--translate-x-1\/2 {
    transform: translateX(-50%);
}
.kastata-hero .u-text-center {
    text-align: center;
}
.kastata-hero .u-text-3xl {
    font-size: 1.875rem;
}
.kastata-hero .u-bg-black\/70 {
    background: rgba(0, 0, 0, 0.7);
}
.kastata-hero .u-w-full {
    width: 100%;
}