/* ==========================================================================
   Welcome page pubblica (rotta "/").

   Foglio autosufficiente: main.css NON viene caricato su questa pagina, perché
   le sue regole globali su body/h1-h3 interferirebbero con le misure definite
   qui. Per questo i @font-face di Avenir sono ridichiarati sotto, puntando agli
   stessi file già presenti in public/fonts/.

   Palette approvata (nessun nero puro in tutto il file):
     #24434D  testo principale        #159EB8  accento
     #117F94  eyebrow, link, azioni   #168FA8 -> #116D81  gradiente CTA
     #627A83  testo secondario        #DBE6E8  bordi e separatori
     #FFFFFF -> #EEF8FA  sfondo
   ========================================================================== */

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Light.woff2') format('woff2'),
         url('../fonts/Avenir-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Medium.woff2') format('woff2'),
         url('../fonts/Avenir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Heavy.woff2') format('woff2'),
         url('../fonts/Avenir-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    margin: 0;
    padding: 0;
    /* Rete di sicurezza: il layout è già costruito senza larghezze fisse. */
    overflow-x: hidden;
}

body.wp {
    /* CA-22: almeno l'intera altezza del viewport. 100dvh corregge le barre
       dei browser mobile dove supportato, con 100vh come fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF8FA 100%);
    color: #24434D;
    font-family: 'Avenir', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

/* CA-13: focus sempre visibile su tutto ciò che è interattivo.
   Si parte dal :focus classico, così anche i browser che non conoscono
   :focus-visible mostrano l'anello; poi lo si toglie sui soli focus da
   puntatore dove :focus-visible è supportato. */
body.wp a:focus {
    outline: 2px solid #117F94;
    outline-offset: 3px;
    border-radius: 6px;
}

body.wp a:focus:not(:focus-visible) { outline: none; }

.wp-header,
.wp-hero,
.wp-footer {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Header — CA-02, CA-18
   -------------------------------------------------------------------------- */

.wp-header {
    height: 102px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(20px, 3.6vw, 52px);
    border-bottom: 1px solid #DBE6E8;
}

.wp-logo-aphel {
    width: 89px;
    height: auto;   /* CA-11: proporzioni intatte */
    display: block;
}

.wp-header-right {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    min-width: 0;
}

.wp-solution {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #627A83;
    white-space: nowrap;
}

/* Il logo Predict è un JPG con fondo bianco pieno: multiply rende il bianco
   trasparente su qualunque sfondo, senza dover rifare l'asset. Dove la
   proprietà non è supportata si vede al più un rettangolo bianco su fondo
   quasi bianco, quindi il degrado è impercettibile. */
.wp-logo-predict {
    width: 112px;
    height: auto;   /* CA-11 */
    display: block;
    mix-blend-mode: multiply;
}

.wp-divider {
    width: 1px;
    height: 30px;
    background: #DBE6E8;
    flex: 0 0 auto;
}

.wp-header-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 900;
    color: #117F94;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.wp-header-login:hover { color: #116D81; }

.wp-arrow {
    width: 18px;
    height: 11px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wp-hero {
    flex: 1 1 auto;   /* spinge il footer a fondo pagina */
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(32px, 4.5vh, 64px) clamp(20px, 3.6vw, 52px);
}

/* Lavaggio celeste ancorato al lato destro. Sta dentro l'hero e non nel body,
   così per costruzione non può raggiungere l'header, che resta pulito.
   z-index -1 lo tiene sotto al contenuto senza toccare i figli: .wp-hero ha già
   un proprio contesto di impilamento (position: relative + z-index: 1).
   Il celeste è l'azzurro Aphel #159EB8 a opacità decrescente: palette rispettata. */
/* Valori ricavati dal riferimento grafico, non stimati.
   Sul mockup il lato destro a metà altezza è circa #E9F5F8; il fondo pagina a
   quell'altezza è circa #F6FCFD, quindi l'opacità necessaria si ottiene da
   246 + a(21-246) = 233  ->  a ~ 0.058. Verso il bordo destro sale a ~0.08.
   La transizione inizia intorno al 38% della larghezza (x~500 su 1200) e il suo
   punto medio cade sul centro del composito dei robot (~69%), oltre il quale il
   celeste è praticamente uniforme.
   Sta sull'hero e non sul body, così per costruzione non tocca l'header. */
.wp-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
                rgba(21, 158, 184, 0) 0%,
                rgba(21, 158, 184, 0) 38%,
                rgba(21, 158, 184, .032) 52%,
                rgba(21, 158, 184, .058) 69%,
                rgba(21, 158, 184, .08) 100%);
}

.wp-hero-text {
    /* CA-15: la colonna testuale non dipende dalla colonna visuale. */
    flex: 1 1 52%;
    min-width: 0;
    max-width: 620px;
}

/* Eyebrow — CA-19 */
.wp-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 900;   /* la storia indica 850: Avenir ha 300/500/900 e il
                           browser arrotonderebbe comunque a 900 */
    letter-spacing: .20em;
    text-transform: uppercase;
    color: #117F94;
}

.wp-eyebrow-dash {
    width: 30px;
    height: 2px;
    background: #117F94;
    flex: 0 0 auto;
}

/* Titolo — CA-19 */
.wp-title {
    margin: 0 0 22px;
    font-size: clamp(49px, 5.4vw, 77px);
    line-height: .99;
    font-weight: 900;
    letter-spacing: -.015em;
    color: #24434D;
}

.wp-accent { color: #159EB8; }

/* Descrizione */
.wp-desc {
    margin: 0 0 34px;
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 300;
    color: #627A83;
}

/* CTA principale */
.wp-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 10px;
    background: linear-gradient(90deg, #168FA8 0%, #116D81 100%);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(36, 67, 77, .16);
    transition: box-shadow .18s ease, transform .18s ease;
}

.wp-cta:hover {
    box-shadow: 0 14px 30px rgba(36, 67, 77, .22);
    transform: translateY(-1px);
}

.wp-cta:active { transform: translateY(0); }

/* Riferimenti alle funzioni */
.wp-features {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.4vw, 34px);
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}

.wp-features li {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #24434D;
}

/* Numerazione in #117F94 e non in #159EB8: la palette assegna il primo a
   "eyebrow, link e azioni secondarie" ed è l'unico dei due che a questa
   dimensione mantiene un contrasto conforme. */
.wp-feature-num {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #117F94;
}

/* --------------------------------------------------------------------------
   Hero visuale
   -------------------------------------------------------------------------- */

.wp-hero-visual {
    position: relative;
    flex: 1 1 48%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nel riferimento grafico non c'è un alone concentrato attorno ai robot: il
   celeste è tutto nella banda dell'hero. Un solo livello significa un solo
   valore da tarare e un risultato prevedibile.

   Misura dell'ellisse dal mockup (viewport 1200x750): estremo sinistro x=497,
   destro x=1160 -> diametro ~662px, cioè ~55% della larghezza del viewport, con
   centro a (828, 430). La colonna visuale a quella larghezza è ~465px e il suo
   centro cade a x~851, quindi praticamente coincide: serve il ~158% della
   colonna, con l'unione delle due ellissi che occupa il 90% del viewBox. */
.wp-rings {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: min(158%, 740px);
    height: auto;
    transform: translate(-52%, -50%);
    pointer-events: none;
}

/* CA-03, CA-21: interamente visibili, mai deformati, mai tagliati. */
.wp-robots {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: min(62vh, 560px);
    object-fit: contain;
}

.wp-badge {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 8%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid #DBE6E8;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(36, 67, 77, .10);
}

.wp-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #159EB8;
    flex: 0 0 auto;
}

.wp-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.wp-badge-text strong {
    font-size: 13px;
    font-weight: 900;
    color: #24434D;
}

.wp-badge-text span {
    font-size: 11px;
    font-weight: 300;
    color: #627A83;
}

/* --------------------------------------------------------------------------
   Footer — CA-08
   -------------------------------------------------------------------------- */

.wp-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px clamp(20px, 3.6vw, 52px);
    border-top: 1px solid #DBE6E8;
    font-size: 13px;
    color: #627A83;
    text-align: center;
}

.wp-payoff { font-weight: 500; }

.wp-footer-sep { color: #DBE6E8; }

.wp-copy { font-weight: 300; }

/* --------------------------------------------------------------------------
   Tablet: 721px - 1050px — CA-20
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
    .wp-hero { gap: clamp(18px, 2.6vw, 34px); }

    .wp-title { font-size: clamp(45px, 5.2vw, 58px); }

    .wp-desc {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .wp-features { margin-top: 32px; }

    /* La storia dichiara il badge non obbligatorio in questa fascia: a questa
       larghezza si sovrapporrebbe ai robot. */
    .wp-badge { display: none; }

    .wp-rings { width: min(100%, 460px); }
}

/* --------------------------------------------------------------------------
   Mobile: fino a 720px — CA-10, CA-18, CA-20
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .wp-header {
        height: 82px;
        gap: 12px;
    }

    .wp-logo-aphel { width: 72px; }

    .wp-logo-predict { width: 82px; }

    .wp-solution { display: none; }   /* spazio insufficiente accanto ai due loghi */

    .wp-divider { height: 24px; }

    .wp-header-login { font-size: 13px; }

    /* Colonna singola: nell'ordine del DOM la visuale segue il testo, quindi
       i robot cadono naturalmente dopo titolo, descrizione e CTA. */
    .wp-hero {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 34px 20px 24px;
    }

    .wp-hero-text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;
        text-align: center;
    }

    .wp-eyebrow {
        justify-content: center;
        font-size: 10px;
        margin-bottom: 16px;
    }

    .wp-title {
        font-size: clamp(43px, 9vw, 61px);
        margin-bottom: 16px;
    }

    .wp-desc {
        font-size: 15px;
        margin: 0 auto 26px;
    }

    .wp-features {
        justify-content: center;
        margin-top: 30px;
    }

    /* A colonna singola i robot stanno in basso, quindi il lavaggio celeste
       diventa verticale: un gradiente orizzontale non avrebbe più senso. */
    .wp-hero::before {
        background: linear-gradient(180deg,
                    rgba(21, 158, 184, 0) 0%,
                    rgba(21, 158, 184, 0) 46%,
                    rgba(21, 158, 184, .06) 70%,
                    rgba(21, 158, 184, .12) 100%);
    }

    .wp-hero-visual {
        flex: 0 0 auto;
        width: 100%;
    }

    .wp-robots { max-height: 42vh; }

    .wp-rings { width: min(100%, 380px); }

    .wp-cta {
        font-size: 12px;
        padding: 15px 26px;
    }

    .wp-footer {
        padding: 18px 20px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .wp-cta { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Preferenze utente
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.wp *,
    body.wp *::before,
    body.wp *::after {
        transition: none !important;
        animation: none !important;
    }

    .wp-cta:hover { transform: none; }
}