/* ===== LocaBarbe — styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700&display=swap');

:root{
  --pink:#ff6fae; --pink-d:#e24e91; --blue:#6fc9ff; --cream:#fff7fb;
  --ink:#352233; --muted:#7a6b74; --white:#fff;
  --shadow:0 10px 30px rgba(226,78,145,.15);
  --radius:20px; --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.logo{font-family:'Baloo 2',sans-serif;line-height:1.15}
a{color:var(--pink-d);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 14px;border-radius:10px;z-index:99}

/* buttons */
.btn{display:inline-block;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-weight:700;font-family:'Baloo 2';padding:14px 26px;border-radius:999px;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;font-size:1rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(226,78,145,.3)}
.btn-ghost{background:#fff;color:var(--pink-d);box-shadow:inset 0 0 0 2px var(--pink)}
.btn-mini{padding:9px 18px;font-size:.95rem}
.btn-full{width:100%;font-size:1.1rem;padding:16px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,247,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid #ffe0ef}
.nav{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
.logo{font-size:1.5rem;font-weight:800;color:var(--ink)}
.logo span{color:var(--pink-d)}
.nav nav{margin-left:auto;display:flex;gap:22px}
.nav nav a{color:var(--ink);font-weight:600}
.nav nav a:hover{color:var(--pink-d)}

/* hero */
.hero{background:radial-gradient(1200px 500px at 80% -10%,#ffe3f1,transparent),linear-gradient(180deg,#fff7fb,#fff)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:60px 20px 70px}
.eyebrow{color:var(--pink-d);font-weight:700;margin-bottom:12px}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:16px}
.hl{color:var(--pink-d)}
.lead{font-size:1.15rem;color:var(--muted);max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 18px}
.trust{list-style:none;display:flex;gap:18px;flex-wrap:wrap;color:var(--ink);font-weight:600}
.hero-visual{display:flex;justify-content:center}
.cloud{font-size:clamp(7rem,18vw,13rem);filter:drop-shadow(0 20px 30px rgba(226,78,145,.25));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.cloud{animation:none}}

/* sections */
.section{padding:64px 0}
.section.alt{background:#fff}
.section h2{font-size:clamp(1.6rem,3.5vw,2.3rem);text-align:center;margin-bottom:10px}
.sub,.note{text-align:center;color:var(--muted)}
.sub{margin-bottom:34px}.note{margin-top:26px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.card{background:var(--cream);border:1px solid #ffe0ef;border-radius:var(--radius);padding:26px 22px;text-align:center}
.card .ico{font-size:2.3rem}
.card h3{margin:12px 0 8px;font-size:1.15rem}
.card p{color:var(--muted);font-size:.97rem}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto}
.plan{background:#fff;border:1px solid #ffe0ef;border-radius:var(--radius);padding:30px 26px;position:relative;text-align:center;box-shadow:0 6px 18px rgba(226,78,145,.06)}
.plan.featured{border:2px solid var(--pink);transform:scale(1.03);box-shadow:var(--shadow)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--pink-d);color:#fff;font-size:.8rem;font-weight:700;padding:6px 16px;border-radius:999px;font-family:'Baloo 2'}
.plan h3{font-size:1.4rem}
.price{font-family:'Baloo 2';font-size:2.6rem;font-weight:800;color:var(--pink-d);margin:6px 0}
.price span{font-size:1rem;color:var(--muted)}
.per{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.plan ul{list-style:none;text-align:left;margin-bottom:22px;display:grid;gap:9px}
.plan li{padding-left:26px;position:relative}
.plan li::before{content:"🍬";position:absolute;left:0}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.tag{background:#fff;border:1px solid #ffe0ef;border-radius:999px;padding:12px 22px;font-weight:700;font-family:'Baloo 2';box-shadow:0 4px 12px rgba(226,78,145,.06)}

/* steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.steps li{background:var(--cream);border:1px solid #ffe0ef;border-radius:var(--radius);padding:28px 24px;text-align:center}
.num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-family:'Baloo 2';font-weight:800;font-size:1.4rem;margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--muted)}

/* zone */
.zone{text-align:center;max-width:820px}
.zone p{color:var(--muted);font-size:1.08rem;margin-top:10px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.review{background:#fff;border:1px solid #ffe0ef;border-radius:var(--radius);padding:26px;box-shadow:0 6px 18px rgba(226,78,145,.06)}
.review p{font-style:italic;margin-bottom:14px}
.review cite{color:var(--pink-d);font-weight:700;font-style:normal}

/* faq */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid #ffe0ef;border-radius:14px;padding:4px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;font-family:'Baloo 2';padding:14px 0;list-style:none;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--pink-d);font-size:1.4rem}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:16px;color:var(--muted)}

/* contact */
.contact{background:radial-gradient(900px 400px at 10% 0%,#ffe3f1,transparent)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.contact h2{text-align:left}
.contact-info{list-style:none;margin-top:20px;display:grid;gap:12px;font-size:1.1rem;font-weight:600}
.form{background:#fff;border:1px solid #ffe0ef;border-radius:var(--radius);padding:28px;display:grid;gap:14px;box-shadow:var(--shadow)}
.form label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.form input,.form select,.form textarea{font:inherit;padding:11px 13px;border:1px solid #ffd4e7;border-radius:12px;background:var(--cream)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--pink)}

/* footer */
.site-footer{background:var(--ink);color:#f2e3ec;padding:50px 0 24px;margin-top:10px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.site-footer .logo{color:#fff}
.site-footer h4{margin-bottom:12px;color:#fff}
.site-footer a{display:block;color:#f2c9de;margin-bottom:7px}
.site-footer p{color:#c9b3c0;font-size:.95rem}
.copy{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid #4a3442;font-size:.9rem}

/* responsive */
@media(max-width:900px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .cards,.pricing,.steps,.reviews{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav nav{display:none}
  .cards,.pricing,.steps,.reviews{grid-template-columns:1fr}
  .plan.featured{transform:none}
  .foot-grid{grid-template-columns:1fr}
  .trust{gap:10px;font-size:.92rem}
}