:root {
  --brand: #7daea3;
  --ink: #222;
  --muted: #6b7280;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.06);
}

body {
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
  color: var(--ink);
  background: #fafafa;
}


/* Hero */
/* HERO WITH BACKGROUND IMAGE */
.hero {
  position: relative;
  padding: 120px 20px;
  text-align: center;
  color: #fff;
  background: url("/images/hair-removal.png") center/cover no-repeat;
  margin-top: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.hero-content {
  position: relative;
  max-width: 700px;
  z-index: 1;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.hero p {
  color: #f1f1f1;
  line-height: 1.6;
}

.cta-primary {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 30px;
  background: #59aeb0;
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.cta-primary:hover {
  opacity: 0.9;
}

/* Mobile Hero */
@media (max-width: 768px) {
  .hero {
    padding: 80px 20px;
  }
  .hero h1 {
    font-size: 2rem;
  }
}


/* Body Areas */
#body-areas {padding:60px 40px; background:#f9f9f9;}
.areas-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px;}
.area-card {background:#fff; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow);}
.area-card h3 {margin-top:0;}

/* Pricing */
#pricing {padding:60px 40px; background:#fff;}
.price-table {width:100%; border-collapse:collapse; box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden;}
.price-table th, .price-table td {padding:14px 16px; border-bottom:1px solid #eee;}
.price-table th {background:#59aeb0; color:#fff; text-align:left;}
/* Pricing controls */
.price-controls{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin: 20px 0;
}
#priceSearch{
  margin-left:auto; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  max-width:260px; width:100%;
}
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  padding:10px 14px; border:1px solid #e5e7eb; background:#fff;
  border-radius:999px; cursor:pointer; font-weight:600;
}
.tab.active{ background:#59aeb0; color:#fff; border-color:#59aeb0; }

/* Table wrapper for horizontal scroll on small screens */
.price-table-wrap{ overflow:auto; background:#fff; border-radius:12px; box-shadow:var(--shadow); }
.price-table{ width:100%; min-width:640px; border-collapse:collapse; }
.price-table th, .price-table td{ padding:14px 16px; border-bottom:1px solid #f0f0f0; text-align:left; }
.price-table th{ background:#59aeb0; color:#fff; position:sticky; top:0; }
.price-note{ margin-top:10px; color:var(--muted); font-size: 14px; }


/* Technology */
/* TECHNOLOGY SECTION WITH BACKGROUND IMAGE */
#technology {
  position: relative;
  padding: 100px 20px;
  color: #fff;
  background: url("/images/fpl-technology.jpg") center/cover no-repeat;
  text-align: center;
}

#technology::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* dark overlay for readability */
  z-index: 0;
}

#technology .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: auto;
}

#technology h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}

#technology p,
#technology ul {
  color: #f2f2f2;
  line-height: 1.6;
}

#technology ul {
  text-align: left;
  display: inline-block;
  margin-top: 20px;
}

#technology li {
  margin-bottom: 10px;
  list-style: none;
  position: relative;
  padding-left: 20px;
}

#technology li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--brand, #f5b7b1);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #technology {
    padding: 70px 16px;
    background-attachment: scroll;
  }
  #technology h2 {
    font-size: 1.6rem;
  }
}


/* FAQ */
#faq {padding:60px 40px; background:#fff;}
details {background:#fff; border-radius:var(--radius); margin-bottom:12px; box-shadow:var(--shadow); padding:16px 20px;}
summary {font-weight:600; cursor:pointer;}
details[open] summary {color:#59aeb0;}

/* Contraindications */
#contraindications {
  background-color: #fafafa;
  padding: 80px 20px;
  color: #333;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

#contraindications .container {
  max-width: 800px;
  margin: 0 auto;
}

#contraindications h2 {
  font-size: 2rem;
  color: #ca733f; /* your accent color */
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#contraindications p {
  line-height: 1.6;
  color: #555;
  margin-bottom: 10px;
  font-size: 1rem;
}

#contraindications ul {
  list-style: none;
  padding: 0;
  margin: 25px auto;
  display: inline-block;
  text-align: left;
}

#contraindications li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #444;
  font-size: 1rem;
}

#contraindications li::before {
  content: "⚠";
  position: absolute;
  left: 0;
  top: 0;
  color: #ca733f;
  font-size: 1.1rem;
  line-height: 1;
}

#contraindications em {
  display: block;
  margin-top: 20px;
  font-style: italic;
  color: #777;
}


/* Responsive */
@media(max-width:768px){
  .hero h1{font-size:1.8rem;}
  .site-menu{display:none; flex-direction:column;}
  .site-menu.open{display:flex;}
  .nav-toggle{display:block; background:none; border:none; font-size:1.4rem;}
  .price-table{ min-width:0; }
  .price-table thead{ display:none; }
  .price-table tr{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; padding:10px 12px; border-bottom:1px solid #eee; }
  .price-table td{ border:0; padding:6px 0; }
  .price-table td:first-child{ grid-column: 1 / -1; font-weight:700; color: #59aeb0;}
  .price-table td::before{
    content: attr(data-label);
    display:block; font-size:12px; color:#6b7280; margin-bottom:2px;
  }
  #faq {
    padding: 40px 20px;
  }
  #pricing {
    padding: 40px 20px;
  }
  #body-areas {
    padding: 40px 20px;
  }
  #contraindications {
    padding: 60px 16px;
  }

  #contraindications h2 {
    font-size: 1.6rem;
  }

  #contraindications li {
    font-size: 0.95rem;
  }
}