/* ============================================================
   SKOOUT ECO — Homepage ecosistema
   Palette: notte #0A0F1E · CRM blu #4F8DF7 · Budgetly oro #C9A84C
            SpeakRise ambra #F5B000 · testo #EDF0F7 / #98A2BC
   Type: Space Grotesk (display) + Inter (body)
   ============================================================ */

:root{
    --notte:      #0A0F1E;
    --notte-2:    #0E1528;
    --carta:      #121A30;
    --carta-2:    #16203A;
    --linea:      rgba(255,255,255,.07);
    --testo:      #EDF0F7;
    --testo-2:    #98A2BC;
    --testo-3:    #5E6987;
    --crm:        #4F8DF7;
    --budgetly:   #C9A84C;
    --speakrise:  #F5B000;
    --font-d:     'Space Grotesk', sans-serif;
    --font-b:     'Inter', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--font-b);
    background:var(--notte);
    color:var(--testo);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--crm); outline-offset:3px; border-radius:4px; }

.container{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* ===== NAVBAR ===== */
.eco-nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,15,30,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linea);
}
.eco-nav-inner{
    max-width:1120px; margin:0 auto; padding:0 24px;
    height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.eco-logo{
    font-family:var(--font-d); font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
    display:flex; align-items:center; gap:10px;
}
.eco-logo-mark{
    width:26px; height:26px; border-radius:50%;
    background:
      radial-gradient(circle at 30% 30%, var(--crm), transparent 55%),
      radial-gradient(circle at 72% 32%, var(--speakrise), transparent 55%),
      radial-gradient(circle at 50% 78%, var(--budgetly), transparent 55%),
      var(--carta);
    box-shadow:0 0 18px rgba(79,141,247,.35);
}
.eco-logo span{ color:var(--testo-3); font-weight:500; }
.eco-nav-links{ display:flex; gap:28px; font-size:.9rem; color:var(--testo-2); font-weight:500; }
.eco-nav-links a:hover{ color:var(--testo); }
.eco-nav-cta{
    font-size:.875rem; font-weight:700; color:#0A0E1A;
    background:linear-gradient(120deg,#E8CE84,var(--budgetly));
    padding:9px 18px; border-radius:10px; white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
}
.eco-nav-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(201,168,76,.35); }
.eco-hamburger{ display:none; background:none; border:none; color:var(--testo); font-size:1.3rem; cursor:pointer; }
.eco-nav-mobile{ display:none; flex-direction:column; padding:12px 24px 20px; gap:14px; border-top:1px solid var(--linea); background:rgba(10,15,30,.97); }
.eco-nav-mobile a{ color:var(--testo-2); font-weight:500; }
.eco-nav-mobile.open{ display:flex; }

/* ===== HERO ===== */
.eco-hero{
    position:relative; text-align:center;
    padding:150px 24px 80px; overflow:hidden;
}
.eco-hero::before{
    content:''; position:absolute; inset:-20% -10% auto;  height:120%;
    background:
      radial-gradient(600px 340px at 22% 18%, rgba(79,141,247,.16), transparent 70%),
      radial-gradient(560px 320px at 78% 22%, rgba(245,176,0,.10), transparent 70%),
      radial-gradient(640px 380px at 50% 90%, rgba(201,168,76,.12), transparent 70%);
    pointer-events:none;
}
.eco-eyebrow{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--testo-2); border:1px solid var(--linea); border-radius:100px;
    padding:8px 18px; margin-bottom:28px; background:rgba(255,255,255,.03);
}
.eco-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--budgetly); box-shadow:0 0 10px var(--budgetly); }
.eco-hero h1{
    position:relative;
    font-family:var(--font-d); font-weight:700; letter-spacing:-.03em;
    font-size:clamp(2.4rem, 5.6vw, 4.2rem); line-height:1.08;
    max-width:820px; margin:0 auto 22px;
}
.eco-hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--crm) 0%, #9db9f5 40%, #E8CE84 75%, var(--budgetly) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eco-hero-sub{
    position:relative; color:var(--testo-2);
    font-size:clamp(1rem, 1.8vw, 1.2rem); max-width:640px; margin:0 auto 36px;
}
.eco-hero-cta{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.btn-eco-primary{
    font-weight:700; font-size:1rem; color:#0A0E1A;
    background:linear-gradient(120deg,#E8CE84,var(--budgetly));
    padding:15px 30px; border-radius:12px;
    box-shadow:0 8px 30px rgba(201,168,76,.28);
    transition:transform .15s ease, box-shadow .15s ease;
}
.btn-eco-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,168,76,.42); }
.btn-eco-secondary{
    font-weight:600; font-size:1rem; color:var(--testo);
    border:1px solid rgba(255,255,255,.16); padding:15px 30px; border-radius:12px;
    background:rgba(255,255,255,.03); transition:border-color .15s ease, background .15s ease;
}
.btn-eco-secondary:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.06); }

/* ---- Firma: l'orbita dell'ecosistema ---- */
.eco-orbit{
    position:relative; width:min(560px, 88vw); height:min(560px, 88vw);
    margin:24px auto 10px;
}
.eco-orbit-ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px dashed rgba(255,255,255,.12);
}
.eco-orbit-ring.r2{ inset:17%; border-color:rgba(255,255,255,.09); }
.eco-orbit-ring.r3{ inset:34%; border-color:rgba(255,255,255,.07); }
.eco-orbit-core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-d); font-weight:700; font-size:1.35rem; letter-spacing:-.02em;
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.eco-orbit-core .eco-logo-mark{ width:54px; height:54px; box-shadow:0 0 42px rgba(79,141,247,.45); }
.eco-orbit-core small{ font-family:var(--font-b); font-weight:600; font-size:.66rem; letter-spacing:.22em; color:var(--testo-3); text-transform:uppercase; }
.eco-planet{
    position:absolute; top:50%; left:50%;
    width:0; height:0;
    animation:orbita var(--vel,42s) linear infinite;
}
.eco-planet .chip{
    position:absolute; top:0; left:0;
    transform:translate(var(--raggio), -50%);
    display:flex; align-items:center; gap:8px;
    background:var(--carta); border:1px solid var(--linea);
    padding:8px 14px; border-radius:100px;
    font-size:.8rem; font-weight:600; white-space:nowrap;
    box-shadow:0 0 26px color-mix(in srgb, var(--hue) 26%, transparent);
    animation:controrbita var(--vel,42s) linear infinite;
}
.eco-planet .chip i{ color:var(--hue); }
.eco-planet.p-crm{ --hue:var(--crm); --vel:46s; }
.eco-planet.p-bud{ --hue:var(--budgetly); --vel:46s; animation-delay:-15.33s; }
.eco-planet.p-bud .chip{ animation-delay:-15.33s; }
.eco-planet.p-spk{ --hue:var(--speakrise); --vel:46s; animation-delay:-30.66s; }
.eco-planet.p-spk .chip{ animation-delay:-30.66s; }
@keyframes orbita{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes controrbita{ from{ transform:translate(var(--raggio), -50%) rotate(0deg);} to{ transform:translate(var(--raggio), -50%) rotate(-360deg);} }
@media (prefers-reduced-motion: reduce){
    .eco-planet, .eco-planet .chip{ animation:none; }
    .eco-planet.p-crm{ transform:rotate(0deg); }
    .eco-planet.p-bud{ transform:rotate(120deg); }
    .eco-planet.p-spk{ transform:rotate(240deg); }
    .eco-planet.p-crm .chip{ transform:translate(var(--raggio), -50%) rotate(0deg); }
    .eco-planet.p-bud .chip{ transform:translate(var(--raggio), -50%) rotate(-120deg); }
    .eco-planet.p-spk .chip{ transform:translate(var(--raggio), -50%) rotate(-240deg); }
}

/* ===== MANIFESTO (sezione bianca) ===== */
.eco-manifesto{
    position:relative; padding:110px 24px; text-align:center;
    background:#FFFFFF;
}
.eco-manifesto .section-label{ color:#8A93A8; }
.eco-manifesto p{
    font-family:var(--font-d); font-weight:500; letter-spacing:-.01em;
    font-size:clamp(1.2rem, 2.6vw, 1.7rem); line-height:1.5;
    max-width:760px; margin:0 auto; color:#4A5468;
}
.eco-manifesto p strong{ color:#0A0F1E; font-weight:700; }

/* ===== SEZIONE APP (blu notte) ===== */
.eco-apps{ padding:100px 0 110px; background:var(--notte); }
.section-label{
    font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--testo-3); text-align:center; margin-bottom:14px;
}
.eco-apps h2{
    font-family:var(--font-d); font-weight:700; letter-spacing:-.02em;
    font-size:clamp(1.8rem, 3.6vw, 2.6rem); text-align:center; margin-bottom:12px;
}
.eco-apps .section-sub{ text-align:center; color:var(--testo-2); max-width:560px; margin:0 auto 56px; }

.apps-grid{
    display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:22px; align-items:stretch;
}
.app-card{
    --hue:var(--crm);
    position:relative; display:flex; flex-direction:column;
    background:var(--carta); border:1px solid var(--linea); border-radius:20px;
    padding:32px 28px; overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.app-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--hue), transparent);
    opacity:.8;
}
.app-card:hover{
    transform:translateY(-6px);
    border-color:color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow:0 18px 50px color-mix(in srgb, var(--hue) 16%, transparent);
}
.app-card.c-crm{ --hue:var(--crm); }
.app-card.c-bud{ --hue:var(--budgetly); }
.app-card.c-spk{ --hue:var(--speakrise); }

.app-card.in-evidenza{
    background:linear-gradient(180deg, var(--carta-2), var(--carta));
    border-color:color-mix(in srgb, var(--budgetly) 40%, transparent);
    box-shadow:0 20px 60px rgba(201,168,76,.14);
}
.badge-evidenza{
    position:absolute; top:20px; right:20px;
    font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:#0A0E1A; background:linear-gradient(120deg,#E8CE84,var(--budgetly));
    padding:6px 12px; border-radius:100px;
}
.app-icona{
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.35rem; color:var(--hue); margin-bottom:20px;
    background:color-mix(in srgb, var(--hue) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--hue) 25%, transparent);
}
.app-kicker{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hue); margin-bottom:8px; }
.app-card h3{ font-family:var(--font-d); font-weight:700; font-size:1.45rem; letter-spacing:-.02em; margin-bottom:10px; }
.app-desc{ color:var(--testo-2); font-size:.925rem; margin-bottom:20px; }
.app-punti{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.app-punti li{ display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:var(--testo-2); }
.app-punti li i{ color:var(--hue); margin-top:3px; font-size:.8rem; }
.app-cta{
    margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:.925rem; padding:13px 20px; border-radius:12px;
    border:1px solid color-mix(in srgb, var(--hue) 45%, transparent);
    color:var(--hue); transition:background .15s ease, color .15s ease;
}
.app-cta:hover{ background:var(--hue); color:#0A0E1A; }
.app-card.in-evidenza .app-cta{
    background:linear-gradient(120deg,#E8CE84,var(--budgetly)); color:#0A0E1A; border:none;
    box-shadow:0 8px 26px rgba(201,168,76,.3);
}
.app-card.in-evidenza .app-cta:hover{ box-shadow:0 12px 36px rgba(201,168,76,.45); }
.app-nota{ margin-top:12px; text-align:center; font-size:.75rem; color:var(--testo-3); }

/* ===== VISIONE (sezione bianca) ===== */
.eco-visione{ padding:110px 0; background:#FFFFFF; }
.eco-visione .section-label{ color:#8A93A8; }
.visione-box{
    position:relative; border:1px solid #E4E9F2; border-radius:24px;
    padding:64px 40px; text-align:center; overflow:hidden;
    background:
      radial-gradient(520px 260px at 12% 0%, rgba(79,141,247,.06), transparent 70%),
      radial-gradient(520px 260px at 88% 100%, rgba(201,168,76,.08), transparent 70%),
      #FAFBFD;
    box-shadow:0 24px 60px rgba(13,22,48,.06);
}
.visione-box h2{
    font-family:var(--font-d); font-weight:700; letter-spacing:-.02em; color:#0A0F1E;
    font-size:clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom:14px;
}
.visione-box p{ color:#4A5468; max-width:600px; margin:0 auto 30px; }

/* ===== FOOTER (blu notte) ===== */
.eco-footer{ background:var(--notte); border-top:1px solid var(--linea); padding:48px 0 36px; }
.footer-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:32px; }
.footer-brand p{ color:var(--testo-3); font-size:.85rem; max-width:280px; margin-top:10px; }
.footer-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--testo-3); margin-bottom:14px; }
.footer-col a{ display:block; color:var(--testo-2); font-size:.875rem; margin-bottom:9px; }
.footer-col a:hover{ color:var(--testo); }
.footer-bottom{ border-top:1px solid var(--linea); padding-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--testo-3); font-size:.8rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 920px){
    .apps-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .app-card.in-evidenza{ order:-1; }
    .eco-nav-links, .eco-nav .eco-nav-cta{ display:none; }
    .eco-hamburger{ display:block; }
    .eco-orbit{ margin-bottom:0; }
    .eco-planet .chip{ font-size:.7rem; padding:6px 11px; }
}