/* =============================================
   AORO SOLAR — Hero Section
   Shortcode: [ux_hero_section]
   Full responsive, matches brand, fixes all layout
   ============================================= */

/* ── Section reset ── */
#ux-hero-section {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ── Inner — centered layout ── */
.ux-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Badge — corrected SVG size, no overflow ── */
.ux-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px 5px 6px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    margin: 0 0 20px 0 !important;
    line-height: 1 !important;
}
/* Green circle wrapper — sized to contain the icon exactly */
.ux-hero-badge__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background: rgba(31,111,92,0.55) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;   /* clip anything that overflows */
}
/* SVG itself — constrained to the circle */
.ux-hero-badge__icon svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.ux-hero-badge__text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.88) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Entrance Animations */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ux-hero-badge {
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ── Subtitle (hidden in this layout) ── */
.ux-hero-subtitle { display: none !important; }

/* ── Hero Title ── */
.ux-hero-title {
    font-size: clamp(2.8rem, 3.6vw, 3.9rem) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 0 20px 0 !important;
    word-break: break-word !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}
.ux-hero-highlight {
    display: inline-block !important;
    position: relative !important;
    color: var(--aoro-green, #1F6F5C) !important;
    font-style: italic !important;
    font-weight: 800 !important;
    padding: 0 16px !important;
    margin: 0 4px !important;
    z-index: 1;
}
.ux-hero-highlight::before {
    content: '' !important;
    position: absolute !important;
    top: 4px; bottom: 4px; left: 0; right: 0;
    background: #fffffff2 !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    transform: skewX(-12deg) !important;
    z-index: -1 !important;
    border-radius: 4px !important;
}

/* ── Subtext ── */
.ux-hero-subtext {
    margin: 0 0 24px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}
.ux-hero-subtext p {
    font-size: 25px !important;
    color: #ffffff !important;
    line-height: 1.7 !important;
    margin: 0 0 4px 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.ux-hero-subtext p strong,
.ux-hero-subtext p b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ux-hero-ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 22px 0 !important;
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s forwards;
}

/* Primary — exact same as header CTA (#ux-nav-cta a) */
.ux-hero-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 26px !important;
    background: var(--aoro-green, #1F6F5C) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    border: 2px solid var(--aoro-green, #1F6F5C) !important;
    box-shadow: 0 4px 20px rgba(31,111,92,0.42) !important;
    transition: background .25s, transform .2s, box-shadow .25s !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    white-space: nowrap !important;
}
.ux-hero-btn--primary:hover {
    background: var(--aoro-green-dark, #174f42) !important;
    border-color: var(--aoro-green-dark, #174f42) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(31,111,92,0.6) !important;
    color: #fff !important;
}

/* Ghost */
.ux-hero-btn--ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 24px !important;
    background: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    border: 2px solid rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: background .25s, border-color .25s, transform .2s !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    white-space: nowrap !important;
}
.ux-hero-btn--ghost:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.55) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}
.ux-hero-btn--ghost svg,
.ux-hero-btn--primary svg {
    transition: transform .2s;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}
.ux-hero-btn--ghost:hover svg,
.ux-hero-btn--primary:hover svg { transform: translateX(3px) !important; }

/* ── Trust bullets ── */
.ux-hero-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 22px !important;
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}
.ux-hero-bullets li {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.ux-hero-check {
    color: #4ade80 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
    .ux-hero-inner { max-width: 680px !important; }
}
@media (max-width: 900px) {
    .ux-hero-title { font-size: clamp(1.8rem, 5vw, 3rem) !important; }
    .ux-hero-inner { max-width: 100% !important; }
}
@media (max-width: 768px) {
    .ux-hero-title { font-size: clamp(1.7rem, 6.5vw, 2.4rem) !important; }
    .ux-hero-subtext p { font-size: 15px !important; }
    .ux-hero-ctas {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    .ux-hero-btn--primary,
    .ux-hero-btn--ghost {
        width: 100% !important;
        justify-content: center !important;
    }
    .ux-hero-bullets { gap: 6px 14px !important; }
}
@media (max-width: 480px) {
    .ux-hero-title { font-size: clamp(1.5rem, 8vw, 2rem) !important; }
    .ux-hero-badge__text { font-size: 10px !important; }
    .ux-hero-subtext p { font-size: 14px !important; }
    .ux-hero-bullets li { font-size: 13px !important; }
    .ux-hero-btn--primary,
    .ux-hero-btn--ghost { font-size: 12px !important; padding: 11px 20px !important; }
}
@media (max-width: 360px) {
    .ux-hero-title { font-size: 1.4rem !important; }
}