/* PRO Barbershop — REAL PHOTOS PACK */
:root{
  --bg:#020617;
  --panel:rgba(15,23,42,.82);
  --border:rgba(148,163,184,.18);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --shadow:0 18px 60px 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;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(1000px 700px at 95% 10%, rgba(245,158,11,.14), transparent 60%),
    var(--bg);
}
/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px) saturate(160%);
  background:rgba(2,6,23,.72);
  border-bottom:1px solid var(--border);
}
.topbar .inner{
  max-width:1180px;
  margin:auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.logo{height:42px;width:auto;display:block;filter: drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:#cbd5e1;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(148,163,184,.08);
}
.nav a:hover{border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.10);color:#fff}
/* Hero */
.hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(2,6,23,.20), rgba(2,6,23,.92)),
    url("assets/hero-bg.jpg") center/cover no-repeat;
}
.hero__inner{
  max-width:1180px;margin:auto;padding:104px 16px 78px;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.10);
  color:#e0f2fe;font-weight:900;font-size:12px;
  letter-spacing:.2px;
}
.hero h1{
  font-size:58px;letter-spacing:-1px;line-height:1.02;
  margin:14px 0 10px;
}
.hero h1 span{
  background:linear-gradient(135deg, rgba(56,189,248,.95), rgba(245,158,11,.90));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{
  margin:0 0 22px;color:#d1d5db;max-width:68ch;line-height:1.75;font-size:16px;
}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.cta.center{justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 18px;border-radius:999px;text-decoration:none;font-weight:900;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(148,163,184,.10);
  color:#fff;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.gold{border:0;color:#0b1020;background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 18px 40px rgba(245,158,11,.18)}
.btn.ghost{background:rgba(2,6,23,.35)}
.hero__meta{
  margin-top:26px;
  display:grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap:10px;
}
.chip{
  padding:14px 14px;border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.40);
  color:#e2e8f0;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  font-weight:900;
}
.chip b{color:#fff}
/* Sections */
.section{max-width:1180px;margin:auto;padding:76px 16px}
.section h2{text-align:center;font-size:34px;margin:0 0 10px;letter-spacing:-.4px}
.sub{text-align:center;color:var(--muted);margin:0 auto 28px;max-width:70ch;line-height:1.7}
.section h2::after{
  content:"";display:block;width:72px;height:3px;margin:14px auto 0;border-radius:999px;
  background:linear-gradient(135deg, rgba(56,189,248,.95), rgba(245,158,11,.85));
}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:18px;
  background:radial-gradient(600px 260px at 20% 0%, rgba(56,189,248,.16), transparent 55%);
  pointer-events:none;
}
.card img{height:44px;width:44px;display:block;margin-bottom:10px;filter: drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
/* About */
.about{padding:0 0 76px}
.about__inner{
  max-width:1180px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns: 1.05fr .95fr;gap:16px;align-items:stretch;
}
.about__text{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--shadow);
}
.about__text h2{text-align:left;margin:0 0 10px;font-size:28px}
.about__text h2::after{display:none}
.about__text p{margin:0;color:#cbd5e1;line-height:1.75}
.checks{margin-top:14px;display:grid;gap:10px;color:#e2e8f0;font-weight:800}
.about__media{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.about__media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
/* Gallery */
.gallery.real{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.shot.real{
  margin:0;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.35);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.shot.real img{width:100%;height:190px;object-fit:cover;display:block}
.shot.real figcaption{
  padding:10px 12px;
  color:#e2e8f0;
  font-weight:900;
  font-size:13px;
}
/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.price{
  background:rgba(2,6,23,.35);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-weight:900;
  box-shadow:var(--shadow);
}
.price small{display:block;color:var(--muted);font-weight:800;margin-top:6px}
.price span{color:#fde68a;font-size:20px}
.price.featured{border-color:rgba(245,158,11,.45);background:linear-gradient(180deg, rgba(245,158,11,.16), rgba(2,6,23,.45))}
/* Book */
.bookbox{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;
  text-align:center;box-shadow:var(--shadow);
}
.bookbox h2{margin:0 0 10px}
.bookbox h2::after{display:none}
.bookbox p{margin:0 auto 14px;color:var(--muted);max-width:70ch;line-height:1.7}
.note{margin-top:14px;color:#cbd5e1;font-weight:800}
/* Footer */
.footer{
  padding:18px 16px 24px;   /* reduced spacing */
  text-align:center;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid var(--border);
  background:rgba(2,6,23,.35);
}

.footer a{color:var(--accent);text-decoration:none;font-weight:900}
.footer a:hover{text-decoration:underline}
/* Floating CTA */
.float{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:16px;z-index:60;display:flex;gap:10px;align-items:center;
  padding:10px;border-radius:999px;
  background:rgba(2,6,23,.72);border:1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(12px);
}
.float__btn{
  text-decoration:none;font-weight:900;font-size:13px;
  padding:10px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0b1020;border:0;
}
.float__btn.ghost{
  background:rgba(148,163,184,.12);color:#fff;border:1px solid rgba(148,163,184,.22);
}
/* Responsive */
@media(max-width:980px){
  .hero h1{font-size:46px}
  .hero__meta{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery.real{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .about__inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero{min-height:600px}
  .hero__inner{padding:86px 16px 70px}
  .hero h1{font-size:38px}
  .cards,.gallery.real{grid-template-columns:1fr}
  .float{width:calc(100% - 24px);justify-content:center}
}

/* Remove extra gap before footer */
#book.section {
  padding-bottom: 36px;
}

/* ===============================
   REMOVE BOTTOM GAP COMPLETELY
   =============================== */

/* Tighten Book section */
#book.section {
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}

/* Tighten footer spacing */
.footer {
  padding-top: 10px !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
}

/* Remove extra spacing caused by floating bar */
.float {
  bottom: 6px !important;
}

/* Kill any accidental last-child spacing */
footer *:last-child {
  margin-bottom: 0 !important;
}

/* Footer logo card (fills the empty space nicely) */
.footer{
  padding: 18px 16px 28px;
  background: transparent;
  border-top: 0;
}

.footer-card{
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;

  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 18px;
  padding: 18px 16px;

  box-shadow: var(--shadow);
}

.footer-logo{
  height: 260px;        /* EXTRA LARGE logo */
  max-width: 900px;
  width: auto;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,0.70));
}




.footer-copy{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* ===============================
   TIGHTEN SECTION SPACING
   Match About section spacing
   =============================== */

/* Reduce top spacing for these sections */
#gallery.section,
#pricing.section,
#book.section {
  padding-top: 36px !important;
}

/* Slightly tighten bottom spacing as well */
#gallery.section,
#pricing.section {
  padding-bottom: 48px !important;
}

/* Book section slightly tighter */
#book.section {
  padding-bottom: 24px !important;
}

/* Testimonials */
.t-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.t-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
}

.t-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:radial-gradient(600px 260px at 20% 0%, rgba(245,158,11,.14), transparent 55%);
  pointer-events:none;
}

.stars{
  font-weight:900;
  letter-spacing:1px;
  color:#fde68a;
  margin-bottom:10px;
}

.t-card p{
  margin:0;
  color:#cbd5e1;
  line-height:1.75;
  font-size:14px;
}

.who{
  margin-top:12px;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}

@media(max-width:980px){
  .t-grid{grid-template-columns:1fr}
}