@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

    :root {
        --brand-blue: #0f172a;
        --brand-accent: #2563eb;
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        scroll-behavior: smooth;
    }

    .gradient-bg {
        background: radial-gradient(circle at top right, #f8fafc, #e2e8f0);
    }

    .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    }

    .nav-blur {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .plan-card input:checked+div {
        border-color: #2563eb;
        background-color: rgba(37, 99, 235, 0.05);
        box-shadow: 0 0 0 2px #2563eb;
    }

    input[type="range"] {
        height: 6px;
        -webkit-appearance: none;
        background: #334155;
        border-radius: 10px;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        background: #2563eb;
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid white;
    }


    /* Notifica invio */
    .notice-bar {
        display: none;
        position: fixed;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        background: #16a34a;
        color: #fff;
        padding: 14px 32px;
        border-radius: 99px;
        font-size: 14px;
        font-weight: 700;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        animation: slideDown 0.4s ease;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ── Scroll progress bar ─────────────────────────────────────── */
    #scrollBar {
        position: fixed; top: 0; left: 0; height: 3px; width: 0%;
        background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb);
        background-size: 200% 100%;
        z-index: 99999;
        transition: width 0.08s linear;
        border-radius: 0 2px 2px 0;
        animation: shimmer 2s linear infinite;
    }
    @keyframes shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ── Status bar ──────────────────────────────────────────────── */
    .status-bar-pulse {
        display: inline-block; width: 7px; height: 7px;
        border-radius: 50%; background: #22c55e;
        animation: statusPulse 2s ease-in-out infinite;
        vertical-align: middle; margin-right: 6px;
    }
    @keyframes statusPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
        50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
    }

    /* ── Grain texture ───────────────────────────────────────────── */
    .grain::after {
        content: '';
        position: absolute; inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        background-size: 200px 200px;
        pointer-events: none; z-index: 1;
        border-radius: inherit;
    }

    /* ── Gradient mesh hero ──────────────────────────────────────────── */
    .hero-mesh {
        position: absolute; inset: 0; z-index: 0;
        overflow: hidden; pointer-events: none;
    }
    .hero-mesh span {
        position: absolute; border-radius: 50%;
        filter: blur(80px); opacity: 0.22;
        animation: meshFloat linear infinite;
        will-change: transform;
    }
    .hero-mesh span:nth-child(1) {
        width: 520px; height: 520px; background: #1d4ed8;
        top: -120px; left: -80px; animation-duration: 18s;
    }
    .hero-mesh span:nth-child(2) {
        width: 380px; height: 380px; background: #4f46e5;
        top: 60%; right: -60px; animation-duration: 23s; animation-delay: -7s;
    }
    .hero-mesh span:nth-child(3) {
        width: 280px; height: 280px; background: #0ea5e9;
        top: 40%; left: 45%; animation-duration: 20s; animation-delay: -13s;
        opacity: 0.12;
    }
    @keyframes meshFloat {
        0%   { transform: translate(0,0) scale(1); }
        33%  { transform: translate(30px,-40px) scale(1.07); }
        66%  { transform: translate(-20px,30px) scale(0.95); }
        100% { transform: translate(0,0) scale(1); }
    }

    /* ── Mini calcolatore hero ───────────────────────────────────────── */
    .hero-plan-btn {
        flex: 1; padding: 7px 0; border-radius: 10px;
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        cursor: pointer; border: none; transition: all 0.22s ease;
        color: #64748b; background: transparent;
    }
    .hero-plan-btn.hpb-active {
        background: #2563eb; color: #fff;
        box-shadow: 0 4px 14px rgba(37,99,235,0.4);
    }
    .ch-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 10px; border-radius: 8px;
        font-size: 10px; font-weight: 700;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.06); color: #94a3b8;
        transition: all 0.3s ease;
    }
    .ch-badge.ch-phone {
        background: rgba(34,197,94,0.12); color: #4ade80;
        border-color: rgba(34,197,94,0.3);
    }
    .ch-badge.ch-hidden { display: none; }
    input[type=range].hero-range {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 4px;
        background: rgba(255,255,255,0.1); border-radius: 99px; outline: none;
    }
    input[type=range].hero-range::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 18px; height: 18px; border-radius: 50%;
        background: #2563eb; cursor: pointer;
        box-shadow: 0 0 0 4px rgba(37,99,235,0.25);
    }
    input[type=range].hero-range::-moz-range-thumb {
        width: 18px; height: 18px; border-radius: 50%;
        background: #2563eb; cursor: pointer; border: none;
    }

    /* ── Rotating word ───────────────────────────────────────────── */
    #rotatingWord {
        display: inline-block;
        color: #60a5fa;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    #rotatingWord.fade-out { opacity: 0; transform: translateY(-14px); }
    #rotatingWord.fade-in  { opacity: 1; transform: translateY(0); }

    /* ── Bento grid ──────────────────────────────────────────────── */
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.1rem;
    }
    .bento-main { grid-column: span 7; grid-row: span 2; }
    .bento-5    { grid-column: span 5; }
    .bento-4    { grid-column: span 4; }

    @media (max-width: 1023px) {
        .bento-main { grid-column: span 12; grid-row: span 1; }
        .bento-5    { grid-column: span 6; }
        .bento-4    { grid-column: span 6; }
    }
    @media (max-width: 639px) {
        .bento-main, .bento-5, .bento-4 { grid-column: span 12; }
    }

    /* ── Bento card hover ────────────────────────────────────────── */
    .bento-card {
        transition: transform 0.28s cubic-bezier(0.23,1,0.32,1),
                    box-shadow 0.28s ease,
                    border-color 0.28s ease;
        will-change: transform;
    }
    .bento-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 48px -12px rgba(37,99,235,0.18);
        border-color: #3b82f6 !important;
    }

    /* ── Scroll-spy nav ──────────────────────────────────────────── */
    .nav-active { color: #2563eb !important; }

    /* ── Magnetic button ─────────────────────────────────────────── */
    .magnetic-btn {
        transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
        will-change: transform;
        display: inline-flex;
    }

html { scroll-padding-top: 130px; }
nav a.nav-active:not([href="#contatti"]) { color: #2563eb; }
nav a[href="#contatti"].nav-active { color: #fff !important; }
:focus-visible { outline: 3px solid #60a5fa !important; outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 100000; padding: 12px; background: white; color: #0f172a; }
.skip-link:focus { top: 10px; }
.plan-card input:focus-visible + div { outline: 3px solid #60a5fa; outline-offset: 4px; }
#leadModal { border: 0; padding: 16px; background: transparent; width: min(560px, 100%); max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; color: #0f172a; }
#leadModal::backdrop { background: rgba(15,23,42,.95); backdrop-filter: blur(8px); }
.ms-field-label { display: block; font-size: 12px; font-weight: 600; margin: 8px 0; }
#ticket .ms-field-label { color: #cbd5e1; }
.ms-honeypot { position: absolute; left: -10000px; height: 1px; width: 1px; overflow: hidden; }
.ms-policy { font-size: 12px; line-height: 1.6; }
.ms-policy a { text-decoration: underline; }
#home .text-slate-600, #preventivo .text-slate-600, #ticket .text-slate-500, footer .text-slate-600 { color: #94a3b8; }
#home [class*="text-[9px]"], #preventivo [class*="text-[8px]"], #preventivo [class*="text-[9px]"], #preventivo [class*="text-[10px]"], #ticket [class*="text-[10px]"] { font-size: 12px; }
.notice-bar { max-width: calc(100vw - 32px); border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } [data-aos] { opacity: 1 !important; transform: none !important; } }
#preventivo .grid > * { min-width: 0; }
#preventivo .plan-card .flex.justify-between { gap: .5rem; flex-wrap: wrap; }
@media (max-width: 639px) {
  #preventivo .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #preventivo .flex.items-center.gap-3 { flex-wrap: wrap; }
  #preventivo .flex.items-center.gap-3 > button { flex-shrink: 0; }
  #preventivo .flex.items-center.gap-3 > input { flex-shrink: 0; }
}
/* Le entrate laterali AOS non devono creare scorrimento orizzontale. */
main { overflow-x: clip; }
.grid > * { min-width: 0; }