/* ====== PALETTE CONVERSION-FIRST ====== */
:root{
    /* Font system */
    --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Primari (fiducia) */
    --brand:        #1170EE;   /* nuovo primary */
    --brand-600:    #0a59c7;   /* hover/active */
    --brand-50:     #e9f3ff;   /* soft bg */
    --brand-100:    #d6e9ff;

    /* CTA (attenzione) */
    --cta:          #FF8A1E;   /* arancione caldo */
    --cta-600:      #E06F07;   /* hover/active */
    --cta-50:       #FFF1E5;

    /* Stati */
    --success:      #146C43;
    --danger:       #E65353;
    --warning:      #F4B400;
    --info:         #16B1C4;

    /* Testi & basi */
    --fg:           #212529;
    --muted:        #6c757d;
    --bg-soft:      #F8F9FA;
    --white:        #ffffff;

    /* mapping legacy tuoi token */
    --soft-bg:      var(--brand-50);
    --soft-fg:      var(--brand);
}

/* ====== TYPOGRAPHY ====== */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.025em;
}

code, pre, .font-monospace {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* ====== BOTTONI ====== */
.btn-primary{
    background-color: var(--brand);
    border-color:     var(--brand);
    color:            var(--white);
}
.btn-primary:hover,
.btn-primary:focus{
    background-color: var(--brand-600);
    border-color:     var(--brand-600);
    color:            var(--white);
}

/* Bottone "Conferma" = verde conversione (come .btn-success migliorato) */
.swal2-confirm {
    background-color: #146C43 !important;
    border: 1px solid #146C43 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: .5rem;
    padding: .5rem 1rem;
    transition: all .2s ease-in-out;
}
.swal2-confirm:hover,
.swal2-confirm:focus {
    background-color: #1C865A !important;
    border-color: #1B7D55 !important;
    color: #fff !important;
}

/* Bottone "Cancel" = stile .btn-outline-secondary */
.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid #6c757d !important;
    color: #6c757d !important;
    font-weight: 500;
    border-radius: .5rem;
    padding: .5rem 1rem;
    transition: all .2s ease-in-out;
}
.swal2-cancel:hover,
.swal2-cancel:focus {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.hint-text {
    font-weight: 600;
    color: black;
    font-size: 0.95rem;

    animation-name: bounce;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;  /* solo 3 volte */
    animation-fill-mode: forwards; /* resta fermo allo stato finale */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(2px); }
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #146C43;                 /* verde acceso conversione */
    --bs-btn-border-color: #146C43;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1C865A;           /* hover leggermente più scuro */
    --bs-btn-hover-border-color: #1B7D55;
    --bs-btn-focus-shadow-rgb: 34,160,107; /* ombra verde coerente */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #197750;          /* active ancora più scuro */
    --bs-btn-active-border-color: #176D4B;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #146C43;
    --bs-btn-disabled-border-color: #146C43;
}

/* CTA dedicata (più "converting" di primary) */
.btn-cta{
    background-color: var(--cta);
    border-color:     var(--cta);
    color:            var(--white);
    padding:.7rem 1.1rem; font-weight:600; border-radius: .6rem;
    box-shadow: 0 6px 16px rgba(255,138,30,.25);
}
.btn-cta:hover,
.btn-cta:focus{
    background-color: var(--cta-600);
    border-color:     var(--cta-600);
    box-shadow: 0 8px 20px rgba(255,138,30,.32);
    color: var(--white);
}

/* Link evidenti ma accessibili */
a, .link-primary{ color: var(--brand); }
a:hover, .link-primary:hover{ color: var(--brand-600); }

/* Pills/tabs più "chip" */
.nav-pills .nav-link{
    border-radius: 999px;
    color: var(--brand);
    border:1px solid transparent;
}
.nav-pills .nav-link:hover{
    background: var(--brand-50);
    border-color: var(--brand-100);
}
.nav-pills .nav-link.active{
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(17,112,238,.35);
}

/* Badge soft coerenti con la palette */
.badge-soft{ background: var(--soft-bg); color: var(--soft-fg); }

/* Alert/info */
.alert-info{
    background: linear-gradient(180deg, #eaf9fc, #e5f7ff);
    border-color: #c8ecf7; color: #055160;
}

/* Progress sottile */
.progress-thin{ height:8px; border-radius:6px; }
.progress .progress-bar.bg-primary{
    background-color: var(--success) !important;
}

.progress{
    margin-top: 7px;
}

/* Ombre morbide */
.shadow-soft{ box-shadow: 0 6px 24px rgba(0,0,0,.06); }

/* ====== DARK MODE ====== */
[data-bs-theme="dark"]{
    --fg:#E9ECEF; --muted:#adb5bd;
    --bg-soft:#0f1115;
    --brand-50: rgba(17,112,238,.18);
    --cta-50:   rgba(255,138,30,.18);
}
[data-bs-theme="dark"] .badge-soft{ background: var(--brand-50); color:#cfe2ff; }
[data-bs-theme="dark"] .nav-pills .nav-link{ color:#cfe2ff; }
[data-bs-theme="dark"] .nav-pills .nav-link:hover{
    background: rgba(17,112,238,.18); border-color: transparent;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active{
    background: var(--brand); color:#fff;
}
[data-bs-theme="dark"] .btn-cta{ box-shadow: 0 6px 18px rgba(255,138,30,.26); }
[data-bs-theme="dark"] .alert-info{
    background: rgba(22,177,196,.12); border-color: rgba(22,177,196,.35); color:#b8e8ef;
}


/* Contenitore anteprima: altezza fissa e cover */
.screenshot-preview{
    height: 360px;            /* regola l'altezza dell'anteprima */
    cursor: zoom-in;
    background: #f8f9fa;
}
.screenshot-preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* taglia in alto/basso per mobile molto alto */
    object-position: top;     /* mostra la parte alta (above the fold) */
}

/* Sfumatura in basso per indicare che l'immagine continua */
.screenshot-fade{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events: none;
}

/* Call-to-action centrale in hover */
.screenshot-cta{
    position: absolute;
    left: 50%; bottom: 18px; transform: translateX(-50%);
    opacity: .0;
    transition: opacity .2s ease;
}
.screenshot-preview:hover .screenshot-cta{ opacity: 1; }

/* Dark mode friendly */
[data-bs-theme="dark"] .screenshot-fade{
    background: linear-gradient(to bottom, rgba(33,37,41,0), rgba(33,37,41,.92));
}

.badge.small{
    font-size: 10px;
    font-weight: normal;
}


#inlineEmailCard .badge { border-radius: 999px; }


/* ====== HOMEPAGE ====== */
.hp-section        { padding: 4.5rem 0; }
.hp-section-hero   { padding: 5rem 0 4rem; }
.hp-bg-light       { background-color: #f3f4f6; }
.hp-bg-gradient     { background: linear-gradient(to bottom, #f9fafb, #f3f4f6); }

/* Testo accessibile -- contrasto WCAG AA */
.hp-text-muted     { color: #4b5563; } /* ~7:1 su bianco */
.hp-text-danger    { color: #b91c1c; } /* ~5.7:1 su bianco -- per enfasi */

/* Avatar con iniziali */
.hp-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .875rem;
    flex-shrink: 0;
}

/* Icona cerchio (sezione problemi) */
.hp-icon-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Step numerati */
.hp-step-number {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--success, #146C43);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* CTA hero -- hover scale */
.hp-cta-hero {
    transition: transform .2s ease, box-shadow .2s ease;
}
.hp-cta-hero:hover {
    transform: scale(1.04);
}

/* Banner CTA finale */
.hp-cta-banner {
    background: linear-gradient(135deg, #146C43 0%, #1C865A 100%);
    padding: 4.5rem 0;
}

/* Card confronto "altri vs noi" */
.hp-compare-bad {
    background: #fef2f2;
    border-left: 4px solid #b91c1c;
}
.hp-compare-good {
    background: #f0fdf4;
    border-left: 4px solid #146C43;
}

/* Footer homepage */
.hp-footer a          { color: #9ca3af; text-decoration: none; }
.hp-footer a:hover    { color: #fff; }

/* Scarcity badge pulsante */
@keyframes hp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .7; }
}
.hp-scarcity {
    animation: hp-pulse 2.5s ease-in-out infinite;
}

/* Stat numbers (social proof section) */
.hp-stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}