:root{
  --bg:#ffffff;
  --card:#fff7fa;
  --muted:#5c5c5c;
  --text:#111111; /* testo principale nero */
  --brand:#ff1493; /* fucsia */
  --brand2:#ff80c7; /* rosa medio */
  --accent:#ffd1ea; /* rosa chiaro */
  --radius:18px;

  /* 🎨 sfondo graduale */
  --bg-start:#fff0f6;
  --bg-mid:#ffd1ea;
  --bg-end:#ff9acb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background:linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
  min-height:100vh;
}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(8px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.logo-mark{display:inline-grid;place-items:center;width:36px;height:36px;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:10px;color:#fff;font-weight:800}

.main-nav a{color:var(--text);opacity:.9;text-decoration:none;margin:0 10px;font-weight:600}
.main-nav a:hover{opacity:1;text-underline-offset:5px;text-decoration:underline;color:var(--brand)}
.lang-switch select{background:var(--card);color:var(--text);border:1px solid rgba(0,0,0,.1);padding:8px 10px;border-radius:10px}

/* Hero */
.hero{position:relative;padding:80px 0 40px;text-align:center}
.hero-inner{padding:40px 0 20px}
h1{font-size:clamp(32px,4vw,56px);line-height:1.05;margin:0 0 10px;color:#111;font-weight:800}
.lead{color:#333;font-size:clamp(16px,1.4vw,18px);max-width:700px;margin:0 auto}

/* ✨ “lascia il segno” in fucsia brillante */
.hero .gradient{
  background: linear-gradient(135deg, #ff1493 0%, #ff5fc3 40%, #ff80c7 70%, #ffa8dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  text-shadow:
    0 0 8px rgba(255,20,147,0.30),
    0 2px 10px rgba(255,105,180,0.25);
}

/* CTA */
.cta-row{display:flex;gap:12px;margin-top:22px;justify-content:center}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:2px solid var(--brand);text-decoration:none;color:var(--brand);font-weight:600;background:#fff}
.btn:hover{background:var(--brand);color:#fff;transition:all .25s ease}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none}
.btn-ghost{background:#fff;border:2px solid var(--brand);color:var(--brand)}

/* Ribbon */
.ribbon{padding:8px 0}
.ribbons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;color:#444;font-weight:600;opacity:.9}

/* Cards / Layout */
.features{padding:30px 0 70px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  color:#111;
}
.card h3{color:var(--brand)}
.page{padding:40px 0}

/* Form */
.form label{display:block;margin-bottom:6px;color:#111}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.15);
  background:#fff;color:#111;outline:none
}
.form button{margin-top:10px;background:var(--brand);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:600}

/* Footer */
.site-footer{
  padding:24px 0;
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:40px;
  color:#111;
  background:linear-gradient(180deg,#ffe4ef 0%,#ffd1ea 50%,#fbb6e0 100%);
  text-align:center;
}
.tiny{font-size:12px;color:#333}
.bullets{line-height:1.9}
.note{margin-top:8px;opacity:.9}

/* Hero decorative glows */
.hero-shapes::before, .hero-shapes::after{
  content:"";position:absolute;inset:auto;z-index:-1;filter:blur(60px);opacity:.35
}
.hero-shapes::before{
  width:320px;height:320px;left:5%;top:10%;
  background:radial-gradient(circle at 30% 30%, var(--brand), transparent 70%);
  border-radius:50%
}
.hero-shapes::after{
  width:380px;height:380px;right:8%;top:20%;
  background:radial-gradient(circle at 70% 70%, var(--accent), transparent 70%);
  border-radius:50%
}

/* Social footer centrati */
.social-links{
  margin-top:.8rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;margin:0;border-radius:50%;
  color:#ff1493;background:#fff;border:2px solid #f5b4d4;
  transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease;
}
.social-links a:hover{color:#e01184;border-color:#e01184;background:#fff0f6;transform:translateY(-3px)}
.social-links svg{width:24px;height:24px;fill:currentColor;display:block}

/* Mobile */
@media (max-width:600px){
  .main-nav{display:none}
}