/* ===================================================
   PETITE MOOD
   VERSIONE 2.0
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#E7387C;
    --primary-dark:#C81F63;
    --primary-light:#FFF4F8;

    --text:#2D2D2D;
    --text-light:#666;

    --white:#FFFFFF;

    --shadow:0 20px 50px rgba(231,56,124,.12);

    --radius:26px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:white;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

.container{

width:90%;

max-width:1280px;

margin:auto;

}


/* ==========================================
HEADER
========================================== */

header{

position:fixed;

top:0;
left:0;

width:100%;

background:rgba(255,255,255,.92);

backdrop-filter:blur(14px);

box-shadow:0 8px 30px rgba(0,0,0,.05);

z-index:999;

}

header .container{

height:95px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:72px;

}

nav{

display:flex;

gap:38px;

}

nav a{

color:var(--text);

font-weight:600;

position:relative;

transition:.35s;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

border-radius:20px;

transition:.35s;

}

nav a:hover{

color:var(--primary);

}

nav a:hover::after{

width:100%;

}

.header-btn{

padding:16px 30px;

background:var(--primary);

color:white;

border-radius:50px;

font-weight:700;

transition:.35s;

box-shadow:var(--shadow);

}

.header-btn:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}


/* ==========================================
HERO
========================================== */

.hero{

padding-top:180px;

padding-bottom:130px;

background:

linear-gradient(180deg,#FFFFFF,#FFF5F9);

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,rgba(231,56,124,.18),transparent 70%);

right:-220px;

top:-260px;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:90px;

align-items:center;

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

background:white;

color:var(--primary);

font-size:14px;

font-weight:700;

border-radius:50px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.05;

margin-bottom:30px;

}

.hero h1 span{

display:block;

color:var(--primary);

}

.hero p{

font-size:21px;

max-width:620px;

color:var(--text-light);

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary{

padding:18px 34px;

background:var(--primary);

color:white;

border-radius:50px;

font-weight:700;

box-shadow:var(--shadow);

transition:.35s;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-5px);

}

.btn-secondary{

padding:18px 34px;

border-radius:50px;

border:2px solid var(--primary);

color:var(--primary);

font-weight:700;

transition:.35s;

}

.btn-secondary:hover{

background:var(--primary);

color:white;

transform:translateY(-5px);

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-right img{

max-width:520px;

border-radius:34px;

box-shadow:

0 30px 70px rgba(231,56,124,.20);

transition:.4s;

}

.hero-right img:hover{

transform:translateY(-8px);

}

/* ===================================================
   TITOLI DELLE SEZIONI
=================================================== */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

background:var(--primary-light);

color:var(--primary);

font-weight:700;

border-radius:50px;

margin-bottom:25px;

}

.section-title h2{

font-size:52px;

line-height:1.15;

margin-bottom:20px;

font-weight:800;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:20px;

color:var(--text-light);

}


/* ===================================================
   FEATURES
=================================================== */

.features{

padding:110px 0;

background:white;

}

.features-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.feature-card{

background:white;

padding:45px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

border:1px solid rgba(231,56,124,.08);

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(231,56,124,.18);

}

.feature-icon{

font-size:55px;

margin-bottom:20px;

}

.feature-card h3{

font-size:28px;

margin-bottom:18px;

color:var(--primary);

}

.feature-card p{

color:var(--text-light);

}


/* ===================================================
   MISSIONE
=================================================== */

.mission{

padding:120px 0;

background:var(--primary-light);

}

.mission-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.mission-card{

background:white;

padding:45px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

}

.mission-card:hover{

transform:translateY(-10px);

}

.mission-card h3{

font-size:30px;

margin-bottom:20px;

color:var(--primary);

}

.mission-card p{

color:var(--text-light);

}


/* ===================================================
   COMMUNITY
=================================================== */

.community{

padding:120px 0;

background:white;

}

.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.stat-card{

background:var(--primary-light);

padding:45px 25px;

border-radius:var(--radius);

text-align:center;

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h3{

font-size:56px;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

color:var(--text-light);

}


/* ===================================================
   LA NOSTRA STORIA
=================================================== */

.story{

padding:130px 0;

background:#fffafc;

}

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.story-image img{

border-radius:34px;

box-shadow:0 30px 70px rgba(231,56,124,.18);

}

.story-text span{

display:inline-block;

padding:10px 22px;

background:var(--primary-light);

color:var(--primary);

font-weight:700;

border-radius:50px;

margin-bottom:25px;

}

.story-text h2{

font-size:48px;

margin-bottom:30px;

line-height:1.2;

}

.story-text p{

margin-bottom:22px;

font-size:18px;

color:var(--text-light);

}

.signature{

margin-top:35px;

font-size:22px;

font-weight:600;

line-height:1.7;

color:var(--primary);

}

/* ===================================================
   QUESTIONARIO
=================================================== */

.questionnaire{

padding:130px 0;

background:white;

}

.questionnaire-box{

max-width:950px;

margin:auto;

padding:70px;

border-radius:34px;

background:linear-gradient(135deg,#FFF4F8,#FFE6EF);

text-align:center;

box-shadow:var(--shadow);

}

.questionnaire-box span{

display:inline-block;

padding:10px 22px;

background:white;

border-radius:50px;

font-weight:700;

color:var(--primary);

margin-bottom:25px;

}

.questionnaire-box h2{

font-size:50px;

margin-bottom:25px;

line-height:1.2;

}

.questionnaire-box p{

max-width:720px;

margin:auto;

font-size:20px;

color:var(--text-light);

margin-bottom:40px;

}

.questionnaire-benefits{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}

.questionnaire-benefits div{

background:white;

padding:14px 22px;

border-radius:50px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}


/* ===================================================
   INSTAGRAM
=================================================== */

.instagram{

padding:120px 0;

background:#FFF9FC;

text-align:center;

}

.social-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}


/* ===================================================
   NEWSLETTER
=================================================== */

.newsletter{

padding:120px 0;

background:white;

}

.newsletter form{

display:flex;

justify-content:center;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.newsletter input{

width:430px;

max-width:90%;

padding:18px 24px;

border:1px solid #ececec;

border-radius:50px;

font-size:17px;

outline:none;

transition:.3s;

}

.newsletter input:focus{

border-color:var(--primary);

}

.newsletter button{

padding:18px 35px;

border:none;

background:var(--primary);

color:white;

border-radius:50px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.newsletter button:hover{

background:var(--primary-dark);

}


/* ===================================================
   FOOTER
=================================================== */

footer{

padding:90px 0;

background:#2F2F2F;

color:white;

text-align:center;

}

.footer-logo{

height:80px;

margin:auto;

margin-bottom:25px;

}

.footer-social{

display:flex;

justify-content:center;

gap:30px;

margin:35px 0;

flex-wrap:wrap;

}

.footer-social a{

color:white;

transition:.3s;

}

.footer-social a:hover{

color:#F8BBD0;

}

footer hr{

max-width:900px;

margin:40px auto;

border:none;

height:1px;

background:rgba(255,255,255,.15);

}

/* ===================================================
   MIGLIORAMENTI GENERALI 2.0
=================================================== */

:root{
--shadow-sm:0 12px 30px rgba(73,26,45,.08);
--shadow-lg:0 30px 75px rgba(231,56,124,.19);
--border:rgba(231,56,124,.11);
--header-height:95px;
}

body{min-width:320px;-webkit-font-smoothing:antialiased;}
html{scroll-padding-top:calc(var(--header-height) + 20px);}
button,input{font:inherit;}
section{position:relative;}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.menu-toggle:focus-visible{
outline:3px solid rgba(231,56,124,.28);
outline-offset:4px;
}

header .container{gap:28px;}
.logo{display:flex;align-items:center;flex:0 0 auto;}
.logo img{width:auto;object-fit:contain;}
nav{align-items:center;justify-content:center;gap:clamp(18px,2vw,38px);}
nav a{padding-block:8px;font-size:.92rem;white-space:nowrap;}

.header-btn,
.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1.25;
text-align:center;
}

.hero{
isolation:isolate;
background:radial-gradient(circle at 86% 20%,rgba(231,56,124,.14),transparent 31%),linear-gradient(180deg,#fff 0%,#fff5f9 100%);
}

.hero::before{z-index:-1;}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(50px,7vw,92px);}
.hero-left,.hero-right{min-width:0;}
.hero-badge{max-width:100%;border:1px solid rgba(231,56,124,.08);line-height:1.45;overflow-wrap:anywhere;}
.hero h1{font-size:clamp(3.4rem,5.5vw,4.55rem);letter-spacing:-.045em;}
.hero p{font-size:clamp(1.05rem,1.5vw,1.28rem);}
.hero-buttons{gap:14px;}
.btn-primary,.btn-secondary{min-height:58px;}
.hero-right img{width:min(100%,520px);aspect-ratio:1/1;border:8px solid rgba(255,255,255,.8);object-fit:cover;object-position:center;}

.section-title{max-width:940px;margin-inline:auto;}
.section-title h2{font-size:clamp(2.25rem,4vw,3.25rem);letter-spacing:-.035em;}
.section-title p{font-size:clamp(1.05rem,1.5vw,1.22rem);}

.feature-card,
.mission-card{height:100%;border:1px solid var(--border);box-shadow:var(--shadow-sm);}

.stat-card{border:1px solid rgba(231,56,124,.07);background:linear-gradient(145deg,#fff8fb,var(--primary-light));}
.stat-card h3{font-size:clamp(2.5rem,4.5vw,3.5rem);letter-spacing:-.04em;line-height:1.1;}

.story-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(48px,7vw,82px);}
.story-image img{width:100%;border:7px solid rgba(255,255,255,.85);}
.story-text h2{font-size:clamp(2.25rem,4vw,3rem);letter-spacing:-.035em;}

.questionnaire-box{overflow:hidden;border:1px solid rgba(231,56,124,.1);background:radial-gradient(circle at 100% 0%,rgba(231,56,124,.13),transparent 31%),linear-gradient(135deg,#fff8fb,#ffe7f0);}
.questionnaire-box h2{font-size:clamp(2.25rem,4.5vw,3.15rem);letter-spacing:-.035em;}
.questionnaire-benefits div{border:1px solid var(--border);}

.newsletter form{max-width:720px;margin-inline:auto;}
.newsletter input{flex:1 1 360px;min-width:0;min-height:58px;max-width:none;}
.newsletter button{min-height:58px;}

/* ===================================================
   ANIMAZIONI
=================================================== */

.feature-card,
.mission-card,
.stat-card,
.story-image,
.story-text,
.questionnaire-box{
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.feature-card:hover,
.mission-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.story-image img{transition:transform .4s ease;}
.story-image img:hover{transform:scale(1.015);}

.hidden{opacity:0;transform:translateY(38px);transition:opacity .75s ease,transform .75s ease;}
.show{opacity:1;transform:translateY(0);}

/* ===================================================
   NAVIGAZIONE COMPATTA
=================================================== */

.menu-toggle{
display:none;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:1px solid var(--border);
border-radius:50%;
background:var(--primary-light);
color:var(--primary);
font-size:28px;
line-height:1;
user-select:none;
}

@media(max-width:1180px){
:root{--header-height:82px;}
header .container{position:relative;height:var(--header-height);}
.logo img{height:62px;}
.menu-toggle{display:flex;order:3;}
.header-btn{margin-left:auto;padding:13px 21px;}
nav{
display:none;
position:absolute;
top:calc(100% + 10px);
right:0;
left:0;
flex-direction:column;
align-items:stretch;
gap:4px;
max-height:calc(100vh - var(--header-height) - 30px);
overflow-y:auto;
padding:18px;
border:1px solid var(--border);
border-radius:22px;
background:rgba(255,255,255,.98);
box-shadow:var(--shadow-lg);
text-align:left;
}
nav.active{display:flex;}
nav a{width:100%;padding:12px 14px;border-radius:12px;font-size:.96rem;}
nav a::after{display:none;}
nav a:hover{background:var(--primary-light);}
}

/* ===================================================
   TABLET
=================================================== */

@media(max-width:1024px){
.hero{padding:145px 0 95px;}
.hero-grid{grid-template-columns:1fr;gap:55px;text-align:center;}
.hero-left{max-width:790px;margin-inline:auto;}
.hero p{margin-inline:auto;}
.hero-buttons{justify-content:center;}
.hero-right img{width:min(72vw,520px);}
.features-grid,.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.features-grid .feature-card:last-child,.mission-grid .mission-card:last-child{grid-column:1/-1;width:min(100%,610px);margin-inline:auto;}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));}
.story-grid{grid-template-columns:1fr;max-width:820px;}
.story-image{order:-1;width:min(100%,620px);margin-inline:auto;}
.story-text{text-align:center;}
}

/* ===================================================
   SMARTPHONE
=================================================== */

@media(max-width:768px){
:root{--header-height:74px;--radius:22px;}
.container{width:min(91%,680px);}
header .container{height:var(--header-height);gap:12px;}
.logo img{height:54px;}
.header-btn{display:none;}
.menu-toggle{width:43px;height:43px;margin-left:auto;font-size:26px;}
nav{top:calc(100% + 8px);padding:14px;border-radius:18px;}

.hero{padding:112px 0 72px;background:radial-gradient(circle at 100% 22%,rgba(231,56,124,.12),transparent 32%),linear-gradient(180deg,#fff 0%,#fff5f9 100%);}
.hero::before{top:-180px;right:-220px;width:470px;height:470px;}
.hero-grid{gap:42px;}
.hero-badge{display:inline-flex;justify-content:center;width:fit-content;margin-bottom:23px;padding:10px 16px;border-radius:18px;font-size:.74rem;text-align:center;}
.hero h1{margin-bottom:22px;font-size:clamp(2.35rem,10vw,3.25rem);letter-spacing:-.04em;line-height:1.06;}
.hero p{margin-bottom:31px;font-size:1rem;line-height:1.7;}
.hero-buttons{gap:11px;}
.btn-primary,.btn-secondary{min-height:54px;padding:15px 23px;font-size:.92rem;}
.hero-right img{width:min(100%,470px);aspect-ratio:4/5;border-width:5px;object-position:59% center;}

.section-title{margin-bottom:45px;}
.section-title span,.story-text>span,.questionnaire-box>span{margin-bottom:18px;padding:8px 16px;font-size:.74rem;}
.section-title h2,.story-text h2,.questionnaire-box h2{font-size:clamp(2rem,8vw,2.55rem);}
.section-title p{font-size:1rem;}
.features,.mission,.community,.instagram,.newsletter,.story,.questionnaire{padding:76px 0;}
.features-grid,.mission-grid{grid-template-columns:1fr;gap:18px;}
.features-grid .feature-card:last-child,.mission-grid .mission-card:last-child{grid-column:auto;width:100%;}
.feature-card,.mission-card{padding:31px 24px;}
.feature-icon{font-size:2.8rem;}
.stats{gap:15px;margin-top:42px;}
.stat-card{padding:30px 15px;}
.stat-card h3{font-size:2.45rem;}
.stat-card p{font-size:.88rem;}
.story-grid{gap:42px;}
.story-image img{border-width:5px;}
.story-text p{font-size:.98rem;text-align:left;}
.questionnaire-box{padding:42px 22px;}
.questionnaire-benefits{gap:10px;margin-bottom:32px;}
.questionnaire-benefits div{padding:11px 15px;font-size:.82rem;}
.newsletter form{flex-direction:column;gap:11px;}
.newsletter input{flex-basis:auto;width:100%;}
.newsletter button{width:100%;}
.footer-social{gap:20px;}
}

/* ===================================================
   SMARTPHONE PICCOLO
=================================================== */

@media(max-width:500px){
.container{width:92%;}
.logo img{height:50px;}
.hero{padding-top:103px;}
.hero-badge{display:flex;width:100%;}
.hero h1{font-size:clamp(2.15rem,10.8vw,2.75rem);}
.hero-buttons{flex-direction:column;width:100%;}
.hero-buttons .btn-primary,.hero-buttons .btn-secondary,.social-buttons .btn-primary,.social-buttons .btn-secondary{width:100%;}
.stats{grid-template-columns:1fr;}
.questionnaire-benefits{flex-direction:column;}
.questionnaire-benefits div,.questionnaire-box>.btn-primary{width:100%;}
.social-buttons,.footer-social{flex-direction:column;}
.footer-social{gap:13px;}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
.hidden,.show{opacity:1;transform:none;}
}