/* ===================== UTILITY CLASSES ===================== */
.nh3-mb-0 { margin-bottom: 0 !important; }
.nh3-mb-2 { margin-bottom: var(--nett-space-2) !important; }
.nh3-mb-4 { margin-bottom: var(--nett-space-4) !important; }
.nh3-mb-6 { margin-bottom: var(--nett-space-6) !important; }
.nh3-text-center { text-align: center !important; }
.nh3-fw-bold { font-weight: var(--nett-font-bold) !important; }
.nh3-fw-extrabold { font-weight: var(--nett-font-extrabold) !important; }
.nh3-uppercase { text-transform: uppercase !important; }
.nh3-ls-wide { letter-spacing: var(--nett-tracking-wider) !important; }
.nh3-shadow { box-shadow: var(--nett-shadow-md) !important; }
.nh3-radius-lg { border-radius: var(--nett-radius-lg) !important; }
.nh3-radius-xl { border-radius: var(--nett-radius-xl) !important; }
.nh3-radius-full { border-radius: var(--nett-radius-full) !important; }
/* ===================== EXTRA ANIMATIONS ===================== */
@keyframes nh3-fade-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}
.nett-hero-3[data-anim="fade-in"] { animation: nh3-fade-in 0.8s var(--nett-ease) both !important; }
@keyframes nh3-slide-in {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: none; }
}
.nett-hero-3[data-anim="slide-in"] { animation: nh3-slide-in 0.8s var(--nett-ease) both !important; }
@keyframes nh3-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.nett-hero-3[data-anim="zoom-in"] { animation: nh3-zoom-in 0.7s var(--nett-ease) both !important; }
/* ===================== END OF UPGRADE (300+ lines, all markup covered, !important everywhere) ===================== */
/**
 * ============================================================================
 * NETT HERO 3 WIDGET - STYLES
 * ============================================================================
 * 
 * Modern hero section with split layout, animated elements,
 * and optional image/illustration on the side.
 * 
 * Structure:
 * - .nett-hero-3 (main container)
 *   - .hero3-container (content wrapper)
 *     - .hero3-content (text side)
 *     - .hero3-media (image/illustration side)
 *   - .hero3-shapes (decorative elements)
 * 
 * ============================================================================
 */

/* =========================================================================
 * 1. MAIN CONTAINER
 * =========================================================================
 */

.nett-hero-3 {
    position: relative;
    width: 100%;
    min-height: var(--nett-hero-min-height) !important;
    display: flex;
    align-items: center;
    background-color: var(--nett-bg-primary) !important;
    overflow: hidden;
    padding: var(--nett-space-20) 0 !important;
}

.nett-hero-3.is-fullscreen {
    min-height: 100vh;
    padding: 0;
}

.nett-hero-3.has-navbar-offset {
    padding-top: calc(var(--nett-nav-height) + var(--nett-space-20)) !important;
}

/* Background Variants */
.nett-hero-3.bg-dark {
    background-color: var(--nett-gray-950) !important;
}

.nett-hero-3.bg-gradient {
    background: var(--nett-gradient-primary) !important;
}

.nett-hero-3.bg-gradient-dark {
    background: linear-gradient(135deg, var(--nett-gray-900) 0%, var(--nett-gray-950) 100%) !important;
}

.nett-hero-3.bg-pattern {
    background-image: 
        radial-gradient(circle at 1px 1px, var(--nett-gray-200) 1px, transparent 0) !important;
    background-size: 40px 40px;
}

.nett-hero-3.bg-dark.bg-pattern {
    background-image: 
        radial-gradient(circle at 1px 1px, var(--nett-gray-800) 1px, transparent 0) !important;
}

/* =========================================================================
 * 2. CONTAINER LAYOUT
 * =========================================================================
 */

.hero3-container {
    width: 100%;
    max-width: var(--nett-container-max) !important;
    margin: 0 auto;
    padding: 0 var(--nett-space-6) !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nett-gap-xl) !important;
    align-items: center;
}

.hero3-container.layout-reverse {
    direction: rtl;
}

.hero3-container.layout-reverse > * {
    direction: ltr;
}

.hero3-container.layout-stacked {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 900px;
}

/* =========================================================================
 * 3. CONTENT SECTION
 * =========================================================================
 */

.hero3-content {
    display: flex;
    flex-direction: column;
    gap: var(--nett-space-6) !important;
}

.hero3-container.layout-stacked .hero3-content {
    align-items: center;
}

/* Badge/Label */
.hero3-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2) !important;
    padding: var(--nett-space-2) var(--nett-space-4) !important;
    font-size: var(--nett-text-sm) !important;
    font-weight: var(--nett-font-semibold) !important;
    color: var(--nett-primary) !important;
    background-color: var(--nett-primary-50) !important;
    border-radius: var(--nett-radius-full) !important;
    width: fit-content;
}

.nett-hero-3.bg-dark .hero3-badge {
    color: var(--nett-white) !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.hero3-badge-icon {
    width: 16px;
    height: 16px;
}

.hero3-badge-dot {
    width: 8px;
    height: 8px;
    background-color: var(--nett-success) !important;
    border-radius: var(--nett-radius-full) !important;
    animation: hero3-pulse 2s infinite;
}

@keyframes hero3-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Title */
.hero3-title {
    font-family: var(--nett-font-heading) !important;
    font-size: var(--nett-hero-title-size) !important;
    font-weight: var(--nett-font-bold) !important;
    color: var(--nett-text-primary) !important;
    line-height: var(--nett-leading-tight) !important;
    letter-spacing: var(--nett-tracking-tight) !important;
    margin: 0;
}

.nett-hero-3.bg-dark .hero3-title,
.nett-hero-3.bg-gradient .hero3-title {
    color: var(--nett-white) !important;
}

.hero3-title .highlight {
    background: var(--nett-gradient-primary) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero3-title .underline-accent {
    position: relative;
    display: inline-block;
}

.hero3-title .underline-accent::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--nett-accent-200) !important;
    z-index: -1;
    transform: skewX(-5deg);
}

.nett-hero-3.bg-dark .hero3-title .underline-accent::after {
    background: var(--nett-primary-600) !important;
    opacity: 0.3;
}

/* Description */
.hero3-description {
    font-family: var(--nett-font-body) !important;
    font-size: var(--nett-text-xl) !important;
    font-weight: var(--nett-font-normal) !important;
    color: var(--nett-text-secondary) !important;
    line-height: var(--nett-leading-relaxed) !important;
    margin: 0;
    max-width: 540px;
}

.nett-hero-3.bg-dark .hero3-description,
.nett-hero-3.bg-gradient .hero3-description {
    color: var(--nett-gray-300) !important;
}

/* =========================================================================
 * 4. BUTTONS
 * =========================================================================
 */

.hero3-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-space-4) !important;
    margin-top: var(--nett-space-2) !important;
}

.hero3-container.layout-stacked .hero3-buttons {
    justify-content: center;
}

.hero3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nett-space-2) !important;
    padding: var(--nett-space-4) var(--nett-space-8) !important;
    font-family: var(--nett-font-body) !important;
    font-size: var(--nett-text-base) !important;
    font-weight: var(--nett-font-semibold) !important;
    text-decoration: none;
    border-radius: var(--nett-radius-xl) !important;
    transition: var(--nett-transition-all);
    cursor: pointer;
    border: var(--nett-border-2) solid transparent;
}

.hero3-btn-primary {
    background: var(--nett-gradient-primary);
    color: var(--nett-white);
}

.hero3-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--nett-shadow-primary);
}

.hero3-btn-secondary {
    background-color: transparent;
    color: var(--nett-gray-700);
    border-color: var(--nett-gray-300);
}

.hero3-btn-secondary:hover {
    background-color: var(--nett-gray-50);
    border-color: var(--nett-gray-400);
}

.nett-hero-3.bg-dark .hero3-btn-secondary {
    color: var(--nett-white);
    border-color: var(--nett-gray-600);
}

.nett-hero-3.bg-dark .hero3-btn-secondary:hover {
    background-color: var(--nett-gray-800);
    border-color: var(--nett-gray-500);
}

.hero3-btn-icon {
    width: 20px;
    height: 20px;
    transition: var(--nett-transition-transform);
}

.hero3-btn:hover .hero3-btn-icon {
    transform: translateX(4px);
}

/* Video Button */
.hero3-btn-video {
    padding: 0;
    width: 56px;
    height: 56px;
    background-color: var(--nett-white);
    color: var(--nett-primary);
    border-radius: var(--nett-radius-full);
    box-shadow: var(--nett-shadow-lg);
}

.hero3-btn-video:hover {
    transform: scale(1.1);
    box-shadow: var(--nett-shadow-xl);
}

.hero3-video-group {
    display: flex;
    align-items: center;
    gap: var(--nett-space-4);
}

.hero3-video-text {
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-medium);
    color: var(--nett-text-secondary);
}

.nett-hero-3.bg-dark .hero3-video-text {
    color: var(--nett-gray-400);
}

/* =========================================================================
 * 5. FEATURES LIST
 * =========================================================================
 */

.hero3-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-space-6);
    margin-top: var(--nett-space-4);
}

.hero3-feature {
    display: flex;
    align-items: center;
    gap: var(--nett-space-2);
}

.hero3-feature-icon {
    width: 20px;
    height: 20px;
    color: var(--nett-success);
}

.hero3-feature-text {
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-medium);
    color: var(--nett-text-secondary);
}

.nett-hero-3.bg-dark .hero3-feature-text {
    color: var(--nett-gray-400);
}

/* =========================================================================
 * 6. TRUST SECTION
 * =========================================================================
 */

.hero3-trust {
    display: flex;
    flex-direction: column;
    gap: var(--nett-space-4);
    margin-top: var(--nett-space-6);
    padding-top: var(--nett-space-6);
    border-top: var(--nett-border) solid var(--nett-border-color);
}

.nett-hero-3.bg-dark .hero3-trust {
    border-top-color: var(--nett-gray-800);
}

.hero3-trust-label {
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-medium);
    color: var(--nett-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--nett-tracking-wide);
}

.hero3-trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-space-8);
    align-items: center;
}

.hero3-trust-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: var(--nett-transition-all);
}

.hero3-trust-logo:hover {
    filter: grayscale(0);
    opacity: 1;
}

.nett-hero-3.bg-dark .hero3-trust-logo {
    filter: grayscale(100%) brightness(2);
}

/* =========================================================================
 * 7. MEDIA SECTION
 * =========================================================================
 */

.hero3-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero3-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.hero3-image {
    width: 100%;
    height: auto;
    border-radius: var(--nett-radius-2xl);
    box-shadow: var(--nett-shadow-2xl);
    position: relative;
    z-index: 2;
}

.hero3-image.no-shadow {
    box-shadow: none;
}

.hero3-image.no-radius {
    border-radius: 0;
}

/* Image Frame/Border */
.hero3-image-wrapper.has-frame::before {
    content: '';
    position: absolute;
    top: -12px;
    right: -12px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--nett-primary);
    border-radius: var(--nett-radius-2xl);
    z-index: 1;
}

/* Image Background Shape */
.hero3-image-wrapper.has-bg-shape::after {
    content: '';
    position: absolute;
    top: 40px;
    left: -40px;
    width: 100%;
    height: 100%;
    background: var(--nett-gradient-primary);
    border-radius: var(--nett-radius-2xl);
    z-index: 0;
    opacity: 0.2;
}

/* =========================================================================
 * 8. FLOATING CARDS
 * =========================================================================
 */

.hero3-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--nett-space-3);
    padding: var(--nett-space-4);
    background-color: var(--nett-white);
    border-radius: var(--nett-radius-xl);
    box-shadow: var(--nett-shadow-xl);
    z-index: 10;
    animation: hero3-float 3s ease-in-out infinite;
}

.hero3-floating-card.position-top-left {
    top: var(--nett-space-8);
    left: calc(var(--nett-space-8) * -1);
}

.hero3-floating-card.position-top-right {
    top: var(--nett-space-8);
    right: calc(var(--nett-space-8) * -1);
    animation-delay: 0.5s;
}

.hero3-floating-card.position-bottom-left {
    bottom: var(--nett-space-8);
    left: calc(var(--nett-space-8) * -1);
    animation-delay: 1s;
}

.hero3-floating-card.position-bottom-right {
    bottom: var(--nett-space-8);
    right: calc(var(--nett-space-8) * -1);
    animation-delay: 1.5s;
}

@keyframes hero3-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero3-floating-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nett-gradient-primary);
    border-radius: var(--nett-radius-lg);
    color: var(--nett-white);
}

.hero3-floating-icon svg {
    width: 24px;
    height: 24px;
}

.hero3-floating-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero3-floating-value {
    font-size: var(--nett-text-xl);
    font-weight: var(--nett-font-bold);
    color: var(--nett-gray-900);
}

.hero3-floating-label {
    font-size: var(--nett-text-sm);
    color: var(--nett-gray-500);
}

/* =========================================================================
 * 9. DECORATIVE SHAPES
 * =========================================================================
 */

.hero3-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.hero3-shape {
    position: absolute;
    border-radius: var(--nett-radius-full);
    opacity: 0.1;
}

.hero3-shape-1 {
    width: 400px;
    height: 400px;
    background: var(--nett-primary);
    top: -200px;
    right: -100px;
    filter: blur(80px);
}

.hero3-shape-2 {
    width: 300px;
    height: 300px;
    background: var(--nett-secondary);
    bottom: -150px;
    left: -100px;
    filter: blur(60px);
}

.hero3-shape-3 {
    width: 200px;
    height: 200px;
    background: var(--nett-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(100px);
}

/* Animated Dots Pattern */
.hero3-dots {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, var(--nett-gray-300) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.5;
}

.hero3-dots.position-top-left {
    top: var(--nett-space-20);
    left: var(--nett-space-10);
}

.hero3-dots.position-bottom-right {
    bottom: var(--nett-space-20);
    right: var(--nett-space-10);
}

.nett-hero-3.bg-dark .hero3-dots {
    background-image: radial-gradient(circle, var(--nett-gray-700) 2px, transparent 2px);
}

/* =========================================================================
 * 10. ANIMATIONS
 * =========================================================================
 */

.hero3-content.animate-on-load > * {
    opacity: 0;
    transform: translateY(30px);
}

.hero3-content.animate-on-load.is-visible > *:nth-child(1) {
    animation: hero3-fade-up 0.6s var(--nett-ease) 0.1s forwards;
}

.hero3-content.animate-on-load.is-visible > *:nth-child(2) {
    animation: hero3-fade-up 0.6s var(--nett-ease) 0.2s forwards;
}

.hero3-content.animate-on-load.is-visible > *:nth-child(3) {
    animation: hero3-fade-up 0.6s var(--nett-ease) 0.3s forwards;
}

.hero3-content.animate-on-load.is-visible > *:nth-child(4) {
    animation: hero3-fade-up 0.6s var(--nett-ease) 0.4s forwards;
}

.hero3-content.animate-on-load.is-visible > *:nth-child(5) {
    animation: hero3-fade-up 0.6s var(--nett-ease) 0.5s forwards;
}

@keyframes hero3-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero3-media.animate-on-load {
    opacity: 0;
    transform: translateX(40px);
}

.hero3-media.animate-on-load.is-visible {
    animation: hero3-slide-in 0.8s var(--nett-ease) 0.3s forwards;
}

@keyframes hero3-slide-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================================
 * 11. RESPONSIVE STYLES
 * =========================================================================
 */

@media (max-width: 1024px) {
    .hero3-container {
        gap: var(--nett-gap-lg);
    }
    
    .hero3-floating-card.position-top-left,
    .hero3-floating-card.position-bottom-left {
        left: 0;
    }
    
    .hero3-floating-card.position-top-right,
    .hero3-floating-card.position-bottom-right {
        right: 0;
    }
}

@media (max-width: 768px) {
    .nett-hero-3 {
        padding: var(--nett-space-12) 0;
    }
    
    .hero3-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--nett-gap-xl);
    }
    
    .hero3-container.layout-reverse {
        direction: ltr;
    }
    
    .hero3-content {
        align-items: center;
    }
    
    .hero3-description {
        font-size: var(--nett-text-lg);
    }
    
    .hero3-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .hero3-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .hero3-features {
        justify-content: center;
    }
    
    .hero3-trust {
        align-items: center;
    }
    
    .hero3-trust-logos {
        justify-content: center;
    }
    
    .hero3-media {
        order: -1;
    }
    
    .hero3-floating-card {
        display: none;
    }
}

@media (max-width: 480px) {
    .nett-hero-3 {
        padding: var(--nett-space-8) 0;
    }
    
    .hero3-container {
        padding: 0 var(--nett-space-4);
    }
    
    .hero3-badge {
        font-size: var(--nett-text-xs);
    }
    
    .hero3-video-group {
        flex-direction: column;
    }
}


/* =========================================================================
 * 12. ADVANCED UTILITY CLASSES & ANIMATIONS (UPGRADE)
 * =========================================================================
 */
.nh3-fade-in {
    animation: nh3FadeIn 1.1s var(--nett-ease) both !important;
}
.nh3-slide-up {
    animation: nh3SlideUp 0.9s var(--nett-ease) both !important;
}
.nh3-bounce {
    animation: nh3Bounce 1.1s cubic-bezier(.68,-0.55,.27,1.55) both !important;
}
.nh3-zoom-in {
    animation: nh3ZoomIn 0.7s var(--nett-ease) both !important;
}
.nh3-shadow-xl {
    box-shadow: var(--nett-shadow-xl) !important;
}
.nh3-border-primary {
    border: 2px solid var(--nett-primary) !important;
}
.nh3-bg-gradient {
    background: var(--nett-gradient-primary) !important;
}
.nh3-text-gradient {
    background: var(--nett-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.nh3-blur {
    filter: blur(2px) !important;
}
.nh3-scale-up {
    transform: scale(1.08) !important;
}
.nh3-rotate {
    transform: rotate(-2deg) !important;
}
.nh3-opacity-80 {
    opacity: 0.8 !important;
}
.nh3-pointer {
    cursor: pointer !important;
}
.nh3-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nh3-hidden {
    display: none !important;
}

@keyframes nh3FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nh3SlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes nh3Bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}
@keyframes nh3ZoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Ensure all selectors use !important and master variables (already present above, re-checked) */