body {
        box-sizing: border-box;
    }

    :root {
        --color-background: #F8FAFC;
        --color-surface: #FFFFFF;
        --color-text: #0F172A;
        --color-primary: #2563EB;
        --color-secondary: #64748B;
    }

    html {
        scroll-behavior: smooth;
    }

    * {
        font-family: 'Inter', sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-display {
        font-family: 'Sora', sans-serif;
    }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .animate-fade-in {
        animation: fadeIn 0.8s ease-out forwards;
    }

    .animate-slide-in-left {
        animation: slideInLeft 0.8s ease-out forwards;
    }

    .animate-slide-in-right {
        animation: slideInRight 0.8s ease-out forwards;
    }

    .animate-scale-in {
        animation: scaleIn 0.6s ease-out forwards;
    }

    .float-animation {
        animation: float 6s ease-in-out infinite;
    }

    .delay-100 {
        animation-delay: 0.1s;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }

    .delay-300 {
        animation-delay: 0.3s;
    }

    .delay-400 {
        animation-delay: 0.4s;
    }

    .delay-500 {
        animation-delay: 0.5s;
    }

    /* Gradient backgrounds */
    .hero-gradient {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(30, 58, 138, 0.95) 100%);
    }

    .section-gradient-blue {
        background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
    }

    .section-gradient-light {
        background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    }

    .card-gradient {
        background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    }

    /* Card effects */
    .card-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    /* Button styles */
    .btn-primary {
        background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
    }

    .btn-secondary {
        border: 2px solid;
        border-color: var(--color-primary);
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        background-color: var(--color-primary);
        color: white;
        transform: translateY(-2px);
    }

    /* Hero background pattern */
    .hero-pattern {
        background-image:
            radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    }

    /* Trust badge styles */
    .trust-badge {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Device card glow */
    .device-glow {
        position: relative;
        overflow: hidden;
    }

    .device-glow::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .device-glow:hover::before {
        opacity: 1;
    }

    /* Form focus styles */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    /* Sticky header shadow */
    .header-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    /* Mobile menu */
    .mobile-menu {
        transition: all 0.3s ease;
        transform: translateY(-100%);
        opacity: 0;
    }

    .mobile-menu.active {
        transform: translateY(0);
        opacity: 1;
    }
    
 
.hero-bg {
  background-image: url('hero-img-bg.jpeg')!important;
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
}

/* Black overlay */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7); /* 50% black */
  z-index: 1;
}

/* Section ka content overlay ke upar rahe */
.hero-bg > * {
  position: relative;
  z-index: 2;
}

@view-transition {
        navigation: auto;
    }