:root {
        --header-h: 74px;
    }

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

    html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--header-h);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        color: #020617;
        background: #f5f7ff;
        line-height: 1.65;
        overflow-x: hidden;
        padding-top: var(--header-h);
        width: 100%;
        max-width: 100%;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    img {
        max-width: 100%;
        display: block;
    }

    ul {
        list-style: none;
    }

    /* Brand gradient */
    .brand-gradient {
        background: linear-gradient(90deg, #020617, #22d3ee 40%, #a855f7 95%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Hero title gradient */
    .hero-title-gradient {
        background: linear-gradient(90deg, #22d3ee, #22c55e 50%, #a855f7 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Section title gradient */
    .title-gradient {
        background: linear-gradient(90deg, #22d3ee, #a855f7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Form title gradient */
    .form-title-gradient {
        background: linear-gradient(90deg, #0f172a, #22d3ee 50%, #a855f7 95%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Hero background */
    .hero-bg {
        background:
            radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.2), transparent 60%),
            radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.2), transparent 60%),
            linear-gradient(135deg, #020617 0%, #0b1120 100%);
    }

    /* Floating animation */
    @keyframes float {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(20px, 20px);
        }
    }

    .float-anim {
        animation: float 6s infinite alternate;
    }

    .float-anim-reverse {
        animation: float 8s infinite alternate-reverse;
    }

    /* Grid lines */
    .grid-lines-bg {
        background-image:
            linear-gradient(#0f172a 1px, transparent 1px),
            linear-gradient(90deg, #0f172a 1px, transparent 1px);
        background-size: 44px 44px;
    }

    /* Value gradient */
    .value-gradient {
        background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.3), transparent 65%);
    }

    /* Engine icon gradient */
    .engine-icon-gradient {
        background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.45), rgba(168, 85, 247, 0.85));
    }

    /* Section gradients */
    .section-soft-gradient {
        background: linear-gradient(180deg, #f9fafb 0%, #eef2ff 100%);
    }

    .section-dark-gradient {
        background: radial-gradient(900px 600px at 0% 0, rgba(34, 211, 238, 0.18), transparent 60%),
            linear-gradient(180deg, #020617 0%, #020617 100%);
    }

    /* CTA background */
    .cta-bg {
        background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    }

    .cta-bg::before {
        content: "";
        position: absolute;
        inset: -40%;
        opacity: 0.18;
        background-image:
            radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.8), transparent 55%),
            radial-gradient(circle at 100% 0, rgba(168, 85, 247, 0.8), transparent 55%);
        pointer-events: none;
    }

    /* Workflow gradient */
    .workflow-gradient {
        background: linear-gradient(135deg, #4f46e5, #9333ea, #14b8a6);
        box-shadow: 0 20px 50px rgba(147, 51, 234, 0.3);
    }

    .workflow-gradient::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), transparent 70%);
        z-index: 0;
        pointer-events: none;
        border-radius: 20px;
    }

    /* Step number gradient */
    .step-num-gradient {
        background: linear-gradient(135deg, #9333ea, #4f46e5);
        box-shadow: 0 5px 15px rgba(79, 70, 229, 0.5);
    }

    /* CTA button gradient */
    .cta-btn-gradient {
        background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #8b5cf6 100%);
        box-shadow: 0 20px 45px rgba(59, 130, 246, 0.35);
    }

    /* Submit button gradient */
    .submit-btn-gradient {
        background: linear-gradient(135deg, #22c55e, #22d3ee 40%, #a855f7 90%);
        box-shadow: 0 16px 40px rgba(34, 197, 94, 0.32);
    }

    /* Wave SVG styles */
    .wave1 {
        top: 0;
        opacity: 0.3;
        fill: rgba(34, 211, 238, 0.2);
    }

    .wave2 {
        top: 50px;
        opacity: 0.4;
        fill: rgba(168, 85, 247, 0.2);
    }

    .wave3 {
        top: 100px;
        opacity: 0.5;
        fill: rgba(245, 158, 11, 0.2);
    }

    /* Dropdown */
    .dropdown-menu {
        display: none;
    }

    .dropdown-menu.show {
        display: block;
    }

    /* Mobile menu */
    .mobile {
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .mobile.open {
        transform: translateX(0);
    }

    /* FAQ */
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .faq-card.active .faq-answer {
        max-height: 200px;
        padding: 15px 20px;
    }

    .faq-card.active .faq-question i {
        transform: rotate(180deg);
    }

    /* Carousel */
    .carousel {
        display: none;
    }

    .carousel.open {
        display: flex;
    }

    /* intl-tel-input */
    .iti {
        width: 100%;
        z-index: 12010 !important;
    }

    .iti .iti__flag-container {
        left: 10px;
    }

    .iti input {
        padding-left: 80px !important;
        height: 44px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        font-size: 0.93rem;
        width: 100%;
    }

    .iti input::placeholder {
        color: #9ca3af;
    }

    .iti input:focus {
        background: #ffffff;
        border-color: #22d3ee;
        box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.7);
        outline: none;
    }

    /* Responsive */
    @media (max-width: 900px) {
        :root {
            --header-h: 66px;
        }
    }

    @media (max-width: 560px) {
        :root {
            --header-h: 60px;
        }
    }