/* ===================== HOME — HERO ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:150px 6% 90px; overflow:hidden;
  background:linear-gradient(165deg,var(--primary-dark) 0%,var(--primary) 58%,var(--secondary) 140%);
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(320px 160px at 88% 12%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(260px 140px at 8% 26%, rgba(255,255,255,.32), transparent 70%),
    radial-gradient(220px 120px at 60% 82%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(500px 500px at -10% 100%, rgba(56,189,248,.3), transparent 60%);
  filter:blur(2px);
  animation:cloudDrift 26s ease-in-out infinite alternate;
}
.hero .container{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.hero-content .badge{ margin-bottom:22px; }
.hero-content h1{ color:#fff; margin-bottom:20px; }
.hero-content p{ color:rgba(255,255,255,.82); font-size:1.08rem; max-width:520px; margin-bottom:34px; }
.hero-btn{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-outline{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.hero .btn-outline:hover{ background:#fff; color:var(--primary-dark); border-color:#fff; }
.hero-visual{ position:relative; }
.hero-stat{
  position:absolute; bottom:6%; left:-6%; background:#fff; color:var(--ink);
  padding:16px 20px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; font-weight:700;
}
.hero-stat i{ color:var(--gold); }
.hero-stat span{ display:block; font-size:.78rem; font-weight:600; color:var(--slate); }

@media (max-width:960px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero-content p{ margin-inline:auto; }
  .hero-btn{ justify-content:center; }
  .hero-visual{ max-width:280px; margin-inline:auto; }
  .hero-stat{ left:0; right:0; margin-inline:auto; width:max-content; bottom:-4%; }
}

/* ===================== ABOUT (HOME SPLIT) ===================== */
.about-home .container{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.about-home .media-panel{ min-height:420px; }
.about-home h2{ margin-bottom:18px; }
.about-home p{ margin-bottom:16px; }
.about-home .btn{ margin-top:10px; }
@media (max-width:900px){ .about-home .container{ grid-template-columns:1fr; } .about-home .media-panel{ min-height:280px; } }

/* ===================== WHY GRID ===================== */
.why{ background:var(--white); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card{ padding:34px 28px; }
.why-card i{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--sky-100); color:var(--primary-dark); font-size:1.2rem; margin-bottom:18px;
}
.why-card h3{ margin-bottom:8px; font-size:1.1rem; }
.why-card p{ font-size:.95rem; }
@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ===================== HOW IT WORKS ===================== */
.step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step; }
.step-card{ position:relative; padding:38px 30px; text-align:left; }
.step-number{
  font-family:var(--font-display); font-size:2.6rem; font-weight:800;
  color:var(--sky-200); position:absolute; top:18px; right:24px; line-height:1;
}
.step-card i{ font-size:1.5rem; color:var(--primary); margin-bottom:16px; display:block; }
.step-card h3{ margin-bottom:8px; }
.step-card p{ font-size:.95rem; }
@media (max-width:900px){ .step-grid{ grid-template-columns:1fr; } }

/* ===================== TREATMENT PREVIEW ===================== */
.home-treatment{ background:var(--white); }
.treatment-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:44px; }
.treatment-card{ overflow:hidden; }
.treatment-card .media-panel{ min-height:150px; border-radius:0; aspect-ratio:4/3; }
.treatment-card .content{ padding:22px; }
.treatment-card h3{ font-size:1.05rem; margin-bottom:8px; }
.treatment-card p{ font-size:.9rem; }
.center{ text-align:center; }
@media (max-width:1080px){ .treatment-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .treatment-grid{ grid-template-columns:1fr; } }

/* ===================== SERVICE AREA ===================== */
.area-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.area-card{
  padding:26px 14px; text-align:center; background:var(--white); border-radius:var(--radius);
  border:1px solid var(--sky-100); transition:transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.area-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:var(--sky-200); }
.area-card i{ color:var(--primary); font-size:1.2rem; margin-bottom:10px; display:block; }
.area-card h3{ font-size:.95rem; }
@media (max-width:900px){ .area-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .area-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===================== STATISTIC ===================== */
.statistic{
  background:linear-gradient(135deg,var(--ink),var(--primary-dark));
  padding:56px 6%;
}
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-card h2{ color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); }
.stat-card p{ color:rgba(255,255,255,.7); font-size:.92rem; margin-top:6px; }
@media (max-width:700px){ .stat-grid{ grid-template-columns:repeat(2,1fr); gap:32px 20px; } }

/* ===================== TESTIMONIAL ===================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{ padding:32px 28px; }
.testimonial-card i.fa-quote-left{ color:var(--sky-200); font-size:1.6rem; margin-bottom:14px; display:block; }
.testimonial-card p{ font-size:.96rem; margin-bottom:16px; }
.testimonial-card h3{ font-size:.98rem; color:var(--gold); }
@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ===================== FAQ ===================== */
.faq-box{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.faq-box details{
  background:var(--white); border:1px solid var(--sky-100); border-radius:var(--radius-sm);
  padding:20px 24px;
}
.faq-box summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-box summary::-webkit-details-marker{ display:none; }
.faq-box summary::after{ content:'+'; font-size:1.3rem; color:var(--primary); transition:transform var(--dur); }
.faq-box details[open] summary::after{ transform:rotate(45deg); }
.faq-box p{ margin-top:14px; font-size:.95rem; }

/* ===================== CTA ===================== */
.cta{
  text-align:center; border-radius:var(--radius-lg); margin:0 6%; padding:70px 6%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
}
.cta .eyebrow{ background:rgba(255,255,255,.15); color:#fff; }
.cta h2{ color:#fff; margin-bottom:14px; }
.cta p{ color:rgba(255,255,255,.85); max-width:520px; margin-inline:auto 24px auto; margin-bottom:28px;}
.cta .btn{ background:#fff; color:var(--primary-dark); box-shadow:0 20px 45px rgba(0,0,0,.2); }
.cta .btn:hover{ box-shadow:0 24px 55px rgba(0,0,0,.28); }
@media (max-width:640px){ .cta{ margin:0 4%; padding:50px 6%; } }