/*
Theme Name: Futuro Sicuro
Author: Associazione Vittime della Strada
Description: Tema luminoso, istituzionale e moderno con focus fiducia/azione.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: futuro-sicuro
*/
:root{--bg:#f8fafc;--fg:#0f172a;--acc:#2563eb;--acc2:#14b8a6;--card:#ffffff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Nunito,Arial,sans-serif;line-height:1.65}
.wrap{max-width:1100px;margin:0 auto;position:relative}
header{padding:1rem;background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}
.hero{padding:5rem 1rem;background:linear-gradient(135deg,#dbeafe,#ccfbf1);position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
.hero::before{width:180px;height:180px;right:8%;top:12%;background:radial-gradient(circle,rgba(37,99,235,.28),transparent 70%);animation:float 5s ease-in-out infinite}
.hero::after{width:120px;height:120px;left:10%;bottom:10%;background:radial-gradient(circle,rgba(20,184,166,.25),transparent 70%);animation:float 6s ease-in-out infinite reverse}
.hero h1{font-size:clamp(2rem,5.5vw,3.8rem);margin:0 0 1rem;animation:fadeUp .8s ease both}
.hero p{animation:fadeUp 1.1s ease both}
.cta{display:inline-block;background:var(--acc);color:#fff;padding:.8rem 1.2rem;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 12px 24px rgba(37,99,235,.28);transition:transform .25s ease}
.cta:hover{transform:translateY(-3px)}
.features{padding:2rem 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.feature{background:var(--card);border:1px solid #e2e8f0;border-radius:12px;padding:1rem;opacity:0;transform:translateY(22px);animation:reveal .75s ease forwards;transition:transform .25s ease,box-shadow .25s ease}
.feature:nth-child(2){animation-delay:.14s}.feature:nth-child(3){animation-delay:.28s}
.feature:hover{transform:translateY(-6px);box-shadow:0 14px 26px rgba(15,23,42,.14)}
.feature h3{margin-top:0;color:var(--acc)}
.road-dot{position:absolute;right:14%;top:20%;width:14px;height:14px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 0 rgba(37,99,235,.6);animation:ping 1.8s infinite}
footer{padding:1.75rem 1rem;background:#0f172a;color:#e2e8f0}
.stop-zone{padding:1rem 1rem 0}
.stop-banner{max-width:1100px;margin:0 auto 1rem;display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid #fecaca;border-radius:12px;padding:1rem;position:relative;overflow:hidden}
.stop-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(239,68,68,.2),transparent);animation:stopSweep 2.7s linear infinite}
.stop-sign{width:82px;height:82px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#dc2626;color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(220,38,38,.5);animation:stopPulse 1.5s infinite;flex:0 0 auto}
.stop-copy strong{display:block;font-size:1.02rem;color:#7f1d1d}
.stop-copy span{color:#991b1b}
.metrics,.impact-timeline,.testimonials,.final-cta{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.metrics-grid,.timeline-grid,.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.metric,.timeline-step,.quote-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem;opacity:0;transform:translateY(16px);animation:reveal .75s ease forwards;transition:transform .25s ease,box-shadow .25s ease}
.metric:hover,.timeline-step:hover,.quote-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(15,23,42,.12)}
.metric strong{display:block;font-size:1.85rem;color:#2563eb}
.timeline-step{border-left:4px solid #14b8a6}
.quote-card em{display:block;margin-top:.6rem;color:#475569}
.final-cta{background:linear-gradient(135deg,#dbeafe,#ccfbf1);border-radius:14px;text-align:center}
.unified-header{position:sticky;top:0;z-index:60;box-shadow:0 10px 24px rgba(15,23,42,.14)}
.u-topbar{background:#0f172a}.u-topbar .wrap{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:.4rem .8rem}
.u-topbar a{color:#fff;text-decoration:none;font-weight:700;font-size:.8rem;background:rgba(255,255,255,.12);padding:.28rem .6rem;border-radius:999px}
.u-menu{background:#fff;border-bottom:1px solid #e2e8f0}.u-menu-inner{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:.75rem 1rem}
.u-menu-list{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;flex-wrap:wrap}.u-menu-list a{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:#f1f5f9;color:#0f172a;text-decoration:none;font-weight:700;font-size:.82rem}
.u-donate{background:#dbeafe}.u-donate .wrap{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem .8rem}
.u-donate strong{font-size:.82rem;color:#1d4ed8}
@media (max-width:760px){.u-menu-inner{grid-template-columns:1fr}.u-menu-list a{font-size:.76rem}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}100%{box-shadow:0 0 0 16px rgba(37,99,235,0)}}
@keyframes stopPulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}100%{box-shadow:0 0 0 16px rgba(220,38,38,0)}}
@keyframes stopSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}