/* ========================================
   BRAND HEADER COMPONENT
   ======================================== */

.brand-header {
    background: var(--color-brand-primary);
    padding: var(--space-16) var(--space-8) var(--space-10);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Cyan glow behind logo */
.brand-header-glow {
    position: absolute;
    left: 50%;
    top: 94px;
    transform: translateX(-50%);
    width: 368px;
    height: 242px;
    background: #3ABAFB;
    filter: blur(92.65px);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* Small cross decorations — positions as % of 325×152px header frame (Figma spec) */
/* small-effect-1.svg — white 8px cross: left 7.69%, top 48.03% */
.brand-header-effect-1 {
    position: absolute;
    left: 7.69%;
    top: 48.03%;
    width: 8px;
    height: 8px;
    z-index: 1;
    pointer-events: none;
}

/* small-effect-2.svg — light blue 13px cross: left 33.54%, top 10.53% */
.brand-header-effect-2 {
    position: absolute;
    left: 33.54%;
    top: 10.53%;
    width: 13px;
    height: 13px;
    z-index: 1;
    pointer-events: none;
}

.brand-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-base);
    margin-top: var(--space-2);
    position: relative;
    z-index: 1;
}

/* Logo sits above glow */
.brand-header .brand-logo {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* ========================================
   BRAND LOGO COMPONENT
   ======================================== */

.brand-logo {
    display: block;
}

/* Sizes */
.brand-logo-small {
    height: 20px;
    width: auto;
}

.brand-logo-default {
    height: 40px;
    width: auto;
}

.brand-logo-large {
    height: 56px;
    width: auto;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .brand-header {
        padding: var(--space-8) var(--space-6) var(--space-10);
    }

    .brand-tagline {
        font-size: var(--font-size-sm);
    }
}