/* ==========================================================
   LANDING — Bella DPB
   ========================================================== */

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg, var(--primary-light) 0%, #fce4ec 100%);
  border-bottom:1px solid var(--line);
  padding:64px 24px;
  text-align:center;
}
.hero__inner{
  max-width:820px;
  margin:0 auto;
}
.hero__title{
  font-size:42px;
  font-weight:800;
  letter-spacing:-.5px;
  margin-bottom:12px;
}
.hero__subtitle{
  font-size:18px;
  color:var(--muted);
  margin-bottom:28px;
}
.hero__cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ===== Buttons large ===== */
.btn-lg{
  padding:12px 22px;
  font-size:15px;
  font-weight:600;
}

/* ===== Section ===== */
.section{
  padding:48px 0;
  scroll-margin-top:80px;
}
.section__header{
  text-align:center;
  margin-bottom:28px;
}
.section__title{
  font-size:28px;
  font-weight:800;
  margin-bottom:6px;
}
.section__subtitle{
  color:var(--muted);
  font-size:14px;
}

/* ===== Services grid ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.service-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.service-card__name{
  font-weight:700;
  font-size:16px;
}
.service-card__desc{
  color:var(--muted);
  font-size:13px;
  flex:1;
}
.service-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.service-card__duration{
  font-size:12px;
  color:var(--muted);
}
.service-card__price{
  font-size:18px;
  font-weight:700;
  color:var(--primary);
}

/* ===== Hours table ===== */
.hours-table{
  width:100%;
  border-collapse:collapse;
}
.hours-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.hours-table tr:last-child td{
  border-bottom:none;
}
.hours-table td:first-child{
  font-weight:600;
  width:140px;
}
.hours-table td.closed{
  color:var(--error);
}

/* ===== Contact ===== */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.contact-card{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-card__label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.contact-card__value{
  font-size:15px;
  font-weight:500;
}
.contact-card .btn{
  margin-top:10px;
  align-self:flex-start;
}

/* ===== CTA final ===== */
.cta-section{
  text-align:center;
  background:var(--primary-light);
  border:1px solid var(--primary-border);
  border-radius:var(--radius);
  padding:40px 20px;
  margin-bottom:24px;
}
.cta-section h2{
  font-size:26px;
  margin-bottom:8px;
}
.cta-section p{
  margin-bottom:18px;
}

/* ===== User name in topbar ===== */
.user-name{
  font-weight:600 !important;
  color:var(--primary) !important;
  pointer-events:none;
}

/* ===== Responsive ===== */
@media (max-width:640px){
  .hero{padding:48px 16px}
  .hero__title{font-size:32px}
  .hero__subtitle{font-size:16px}
  .section__title{font-size:22px}
}