/* Project-specific landing refinements */

:root {
    --mkt-font: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mkt-primary: #1a3a7c;
    --mkt-primary-dark: #0a1630;
    --mkt-accent: #4d9de0;
    --mkt-accent-soft: rgba(77, 157, 224, .14);
    --mkt-shadow: 0 18px 55px rgba(10, 22, 48, .13);
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--mkt-font);
    letter-spacing: -0.012em;
}

/* Header: keeps the mobile hamburger inside the viewport */
header.fixed {
    overflow: visible !important;
    backdrop-filter: saturate(150%) blur(12px);
}

header.fixed > .container-mkt {
    width: 100%;
    max-width: 80rem;
}

header.fixed .logo-mobile {
    width: auto;
    object-fit: contain;
}

#mob-btn {
    position: relative;
    z-index: 60;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border: 1px solid rgba(26, 58, 124, .12);
    background: linear-gradient(135deg, #ffffff, #f3f7ff);
    box-shadow: 0 10px 28px rgba(10, 22, 48, .10);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    -webkit-tap-highlight-color: transparent;
}

#mob-btn:hover,
#mob-btn[aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: rgba(77, 157, 224, .42);
    background: linear-gradient(135deg, #ffffff, #eaf5ff);
    box-shadow: 0 16px 34px rgba(10, 22, 48, .16);
}

#mob-btn span {
    background: var(--mkt-primary);
    transform-origin: center;
}

#mob-menu {
    box-shadow: 0 22px 45px rgba(10, 22, 48, .12);
}

@media (max-width: 452px) {
    header.fixed .container-mkt {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    header.fixed .flex.items-center.justify-between {
        gap: .75rem;
        min-width: 0;
    }

    header.fixed a.shrink-0 {
        min-width: 0;
        flex: 1 1 auto;
        max-width: calc(100vw - 5.25rem);
    }

    header.fixed .logo-mobile {
        max-width: min(150px, calc(100vw - 6rem)) !important;
        max-height: 2.45rem !important;
    }

    #mob-btn {
        flex: 0 0 2.65rem;
        width: 2.65rem;
        min-width: 2.65rem;
        height: 2.65rem;
        margin-right: 0;
    }

    #mob-menu {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}

@media (max-width: 360px) {
    header.fixed .logo-mobile {
        max-width: min(128px, calc(100vw - 5.75rem)) !important;
    }

    #mob-btn {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
    }
}

/* More contemporary visual treatment, without changing the general structure */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline {
    border-radius: 999px !important;
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease !important;
}

.btn-primary,
#mob-cta {
    box-shadow: 0 14px 30px rgba(26, 58, 124, .22);
}

.btn-primary:hover,
#mob-cta:hover,
.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(26, 58, 124, .25);
}

.section-title {
    letter-spacing: -0.045em;
}

.section-subtitle {
    line-height: 1.65;
}

#hero h1 {
    letter-spacing: -0.065em;
    text-wrap: balance;
}

#hero .w-10.h-10,
#vantaggi .w-14.h-14,
#come-funziona .w-20.h-20,
#perche-noi .w-8.h-8 {
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(10, 22, 48, .16);
    transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease;
}

#hero .w-10.h-10::after,
#vantaggi .w-14.h-14::after,
#come-funziona .w-20.h-20::after,
#perche-noi .w-8.h-8::after {
    content: '';
    position: absolute;
    inset: -45%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55), transparent 70%);
    transform: translateX(-80%) rotate(8deg);
    transition: transform .55s ease;
}

#hero li:hover .w-10.h-10,
#vantaggi .group:hover .w-14.h-14,
#come-funziona .flex.flex-col.items-center:hover .w-20.h-20,
#perche-noi .flex.items-start:hover .w-8.h-8 {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 22px 44px rgba(10, 22, 48, .20);
}

#hero li:hover .w-10.h-10::after,
#vantaggi .group:hover .w-14.h-14::after,
#come-funziona .flex.flex-col.items-center:hover .w-20.h-20::after,
#perche-noi .flex.items-start:hover .w-8.h-8::after {
    transform: translateX(80%) rotate(8deg);
}

#vantaggi .group,
#come-funziona .flex.flex-col.items-center,
#perche-noi .rounded-2xl,
#testimonials .rounded-2xl,
#faq .max-w-3xl,
#form-lead .bg-white.rounded-2xl {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

#vantaggi .group:hover,
#come-funziona .flex.flex-col.items-center:hover,
#perche-noi .rounded-2xl:hover,
#testimonials .rounded-2xl:hover,
#faq .max-w-3xl:hover,
#form-lead .bg-white.rounded-2xl:hover {
    transform: translateY(-4px);
    box-shadow: var(--mkt-shadow);
}

#vantaggi .group {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

#vantaggi .group:hover {
    border-color: rgba(77, 157, 224, .34) !important;
}

#vantaggi .group svg,
#come-funziona svg,
#perche-noi svg,
#faq svg,
#hero svg {
    stroke-width: 2.25;
    transition: transform .25s ease, color .25s ease, opacity .25s ease;
}

#vantaggi .group:hover svg,
#come-funziona .flex.flex-col.items-center:hover svg,
#perche-noi .flex.items-start:hover svg,
#hero li:hover svg {
    transform: scale(1.12) rotate(-3deg);
}

.form-input,
.form-select,
textarea.form-input {
    border-radius: 1rem !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
    box-shadow: 0 0 0 4px rgba(77, 157, 224, .16) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}