:root{
  --bg:#0f0f0f;               /* main background */
  --elev:#151515;             /* elevated sections */
  --card:#1b1b1b;             /* cards */
  --text:#f5f5f5;             /* primary text */
  --muted:rgba(245,245,245,.7);
  --border:rgba(255,255,255,.08);

  /* Barber accents */
  --accent:#d4af37;           /* gold */
  --accent2:#f0c75e;          /* lighter gold */

  --radius:18px;
  --shadow: 0 14px 32px rgba(0,0,0,.45);
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(122,140,255,.18), transparent 60%),
    radial-gradient(700px 400px at 90% 20%, rgba(124,240,255,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1120px, 92%); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg), transparent 35%);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0;
}
.brand{display:flex; gap:.7rem; align-items:center; font-weight:900; letter-spacing:-.3px}
.brand-mark{
  width:12px;height:12px;border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(154,167,255,.12);
}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{opacity:.85; font-weight:750}
.nav a:hover{opacity:1}
.nav-cta{padding:.55rem .9rem; border:1px solid var(--border); border-radius:999px}

.nav-toggle{display:none; background:none; border:0; color:var(--text)}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; opacity:.9}

.hero{padding: 4.2rem 0 2.2rem}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items:center;
}
.eyebrow{color: color-mix(in srgb, var(--accent), var(--text) 70%);
  font-weight: 900; font-weight:800; letter-spacing:.2px; margin:0 0 .6rem}
h1{font-size: clamp(2.1rem, 4vw, 3.2rem); line-height:1.05; margin:0 0 .9rem; letter-spacing:-.8px}
.accent{background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); font-size:1.05rem; line-height:1.6; margin:0 0 1.2rem}

.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  padding:.9rem 1.1rem;
  font-weight:900;
  border:1px solid var(--border);
  transition: transform .18s ease, opacity .18s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{
  border:0;
  color:#0f0f0f;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 20px rgba(212,175,55,.35);
}
.btn-ghost{background: transparent}
.btn-full{width:100%; border-radius: 14px}

.trust{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.8rem;
}
.trust-item{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:.85rem;
  background: color-mix(in srgb, var(--elev), transparent 25%);
}
.trust-kpi{margin:0; font-weight:950; letter-spacing:-.4px}
.trust-label{margin:.15rem 0 0; color:var(--muted); font-weight:800; font-size:.9rem}
.hero-card img,
.shot img {
  filter: contrast(1.05) saturate(1.05);
}
.hero-media{position:relative}
.hero-card{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.hero-card img{height: 420px; width:100%; object-fit:cover}
.hero-badges{
  position:absolute; left:-14px; bottom: 18px;
  display:flex; flex-direction:column; gap:.5rem;
}
.badge{
  width:max-content;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg), transparent 25%);
  font-weight:900;
  color: var(--muted);
}

.section{padding: 3.2rem 0}
.section-alt{background: color-mix(in srgb, var(--elev), transparent 30%); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-head h2{margin:0 0 .6rem; letter-spacing:-.5px}
.section-head p{margin:0; color:var(--muted); font-weight:750}

.cards{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--elev), transparent 10%);
  padding: 1.2rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.card h3{margin:.1rem 0 .5rem}
.card p{margin:0 0 .9rem; color:var(--muted); font-weight:700; line-height:1.55}
.card ul{margin:0; padding-left:1.1rem; color:var(--muted); font-weight:750}
.card li{margin:.35rem 0}

.pricing-grid{
  margin-top:1.3rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.price-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--elev), transparent 10%);
  padding: 1.2rem;
}
.price-card.highlight{
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
}
.price{font-size:2rem; font-weight:950; margin:.4rem 0}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.gallery{
  margin-top: 1.3rem;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .9rem;
}
.shot{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--elev);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.shot img{height:220px; width:100%; object-fit:cover; transition: transform .35s ease}
.shot:hover img{transform: scale(1.03)}

.reviews{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.review{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--elev), transparent 10%);
  padding: 1.2rem;
}
.stars{margin:0 0 .6rem; letter-spacing:1px}
.review p{margin:.4rem 0; color:var(--muted); font-weight:750; line-height:1.55}
.review-meta{color:rgba(234,240,255,.6); font-weight:900}

.contact-grid{
  margin-top:1.3rem;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items:start;
}
.contact-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--elev), transparent 10%);
  padding: 1.2rem;
  overflow:hidden;
}
.contact-card label{display:block; font-weight:900; margin-bottom:.75rem}
.contact-card input,
.contact-card textarea,
.contact-card select{
  margin-top:.45rem;
  width:100%;
  border-radius: 14px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg), transparent 10%);
  color:var(--text);
  padding:.85rem .9rem;
  font:inherit;
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:.9rem}
.link{text-decoration:underline; text-underline-offset: 3px}

.contact-info{display:grid; gap:1rem}
.info-box,.map-box{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--elev), transparent 10%);
  padding: 1.2rem;
}
.info-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}

.footer{border-top:1px solid var(--border); padding: 1.4rem 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.footer-links{display:flex; gap:1rem}
.footer-links a{color:var(--muted); font-weight:800}
.footer-links a:hover{color:var(--text)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
  .hero-card img{height: 360px}
  .cards,.pricing-grid,.reviews{grid-template-columns: 1fr; }
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr));}
  .contact-grid{grid-template-columns: 1fr;}
  .row{grid-template-columns: 1fr}
  .nav{display:none}
  .nav-toggle{display:block}
}