:root{
  --charcoal:#15191c;
  --charcoal-deep:#0d1012;
  --panel:#1f2528;
  --grey:#8a959c;
  --grey-bright:#b0b8be;
  --grey-mid:#6a7a82;
  --steel:#9aa6ac;
  --text:#e9edef;
  --green:#3f8f4f;
  --green-bright:#5fc46e;
  --max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  background:var(--charcoal);
  color:var(--text);
  line-height:1.65;
}
h1,h2,h3,h4{
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  letter-spacing:.02em;
  font-weight:700;
}
a{color:var(--grey-bright);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ---- Header / Nav ---- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(13,16,18,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(176,184,190,.18);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--max);margin:0 auto;
}
.brand{
  font-size:1.3rem;font-weight:800;letter-spacing:.06em;
  color:var(--text);text-transform:uppercase;
  display:flex;align-items:center;
}
.brand .logo-img{height:44px;width:auto;display:block;}
.nav ul{list-style:none;display:flex;gap:26px;align-items:center;}
.nav a{
  color:var(--steel);
  font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
}
.nav a:hover{color:var(--grey-bright);text-decoration:none;}
.nav a.active{color:var(--text);border-bottom:2px solid var(--grey-bright);padding-bottom:4px;}
.nav-toggle{display:none;}
.btn-nav{
  background:var(--grey-bright);color:var(--charcoal-deep)!important;
  padding:8px 18px;border-radius:4px;font-weight:700;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;
}
.btn-nav:hover{background:var(--text);text-decoration:none!important;}

@media(max-width:760px){
  .nav ul{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--charcoal-deep);flex-direction:column;gap:0;align-items:stretch;
    border-bottom:1px solid rgba(176,184,190,.18);
  }
  .nav ul.open{display:flex;}
  .nav ul li{border-top:1px solid rgba(255,255,255,.06);}
  .nav ul li a{display:block;padding:14px 24px;}
  .nav-toggle{
    display:block;background:none;border:1px solid var(--steel);
    color:var(--text);font-size:1.1rem;padding:6px 12px;border-radius:4px;
    cursor:pointer;
  }
}

/* ---- Hero ---- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;
  background:linear-gradient(180deg, rgba(13,16,18,.5), rgba(13,16,18,.94)), var(--charcoal);
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(138,149,156,.08) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(176,184,190,.03) 38px, rgba(176,184,190,.03) 40px);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  padding-top:80px;padding-bottom:80px;
}
.kicker{
  display:inline-block;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-bright);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.12;
  max-width:680px;
  margin-bottom:24px;
}
.hero h1 em{color:var(--grey-bright);font-style:normal;}
.pitch{font-size:1.13rem;max-width:600px;color:var(--steel);margin-bottom:14px;}
.tagline{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-mid);margin-bottom:36px;}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:14px 32px;border-radius:4px;
  font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:background .18s,color .18s;
}
.btn-primary{background:var(--grey-bright);color:var(--charcoal-deep);}
.btn-primary:hover{background:var(--text);text-decoration:none;}
.btn-ghost{
  background:transparent;color:var(--grey-bright);
  border:2px solid var(--grey-bright);
}
.btn-ghost:hover{background:rgba(176,184,190,.1);text-decoration:none;}

/* ---- Belt colour swatches hero ---- */
.swatch-row{
  display:flex;gap:12px;margin-top:48px;flex-wrap:wrap;align-items:center;
}
.swatch{
  width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.12);
  transition:transform .15s;cursor:pointer;
  position:relative;
}
.swatch:hover{transform:scale(1.15);}
.swatch-label{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);
  margin-top:4px;text-align:center;
}
.swatch-wrap{display:flex;flex-direction:column;align-items:center;}

/* ---- Sections ---- */
section{padding:80px 0;}
section:nth-child(even){background:var(--panel);}
.section-head{text-align:center;margin-bottom:52px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px;}
.rule{width:48px;height:3px;background:var(--grey-bright);margin:16px auto;}

/* ---- Grid ---- */
.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ---- Cards ---- */
.card{
  background:var(--charcoal-deep);
  border:1px solid rgba(176,184,190,.1);
  border-radius:8px;
  padding:32px 28px;
}
.panel section .card{background:var(--charcoal);}
.card h3{font-size:1.1rem;margin-bottom:10px;color:var(--grey-bright);}
.card p{color:var(--steel);font-size:.95rem;}
.card-icon{font-size:2rem;margin-bottom:16px;}

/* ---- Belt showcase ---- */
.belt-card{
  background:var(--charcoal-deep);
  border:1px solid rgba(176,184,190,.1);
  border-radius:8px;
  overflow:hidden;
  text-align:center;
}
.belt-swatch-large{
  height:120px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.belt-stripe{
  height:38px;width:100%;
  position:absolute;
  left:0;right:0;top:50%;transform:translateY(-50%);
}
.belt-buckle-preview{
  width:52px;height:36px;
  border:4px solid rgba(255,255,255,.25);
  border-radius:5px;
  background:rgba(176,184,190,.3);
  z-index:1;position:relative;
}
.belt-card-body{padding:20px;}
.belt-card-body h3{font-size:1rem;color:var(--text);margin-bottom:4px;}
.belt-card-body p{font-size:.85rem;color:var(--steel);}
.belt-card-body .price{
  font-size:1.4rem;font-weight:800;color:var(--grey-bright);
  margin-top:12px;
}

/* ---- Buckle section ---- */
.buckle-showcase{
  display:flex;gap:48px;align-items:center;flex-wrap:wrap;
}
.buckle-img-wrap{
  flex:0 0 320px;
  background:var(--charcoal-deep);
  border:1px solid rgba(176,184,190,.1);
  border-radius:12px;
  padding:24px;
  display:flex;align-items:center;justify-content:center;
}
.buckle-img-wrap svg,.buckle-img-wrap img{max-width:100%;height:auto;}
.buckle-copy{flex:1;min-width:260px;}
.buckle-copy h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:18px;}
.buckle-copy h2 em{color:var(--grey-bright);font-style:normal;}
.buckle-specs{list-style:none;margin-top:20px;}
.buckle-specs li{
  padding:10px 0;
  border-bottom:1px solid rgba(176,184,190,.08);
  font-size:.93rem;color:var(--steel);
  display:flex;gap:12px;
}
.buckle-specs li strong{color:var(--grey-bright);min-width:130px;flex-shrink:0;}

/* ---- Why section ---- */
.why-list{list-style:none;}
.why-list li{
  display:flex;gap:16px;padding:16px 0;
  border-bottom:1px solid rgba(176,184,190,.07);
}
.why-list li:last-child{border-bottom:none;}
.why-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px;}
.why-text h4{color:var(--grey-bright);margin-bottom:4px;}
.why-text p{color:var(--steel);font-size:.93rem;}

/* ---- How it works ---- */
.steps{display:flex;gap:0;position:relative;flex-wrap:wrap;}
.steps::before{
  content:'';position:absolute;top:36px;left:10%;right:10%;
  height:2px;background:rgba(176,184,190,.1);
}
@media(max-width:660px){.steps::before{display:none;}}
.step{flex:1;min-width:200px;text-align:center;padding:0 20px;}
.step-num{
  width:72px;height:72px;border-radius:50%;
  border:3px solid var(--grey-bright);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:800;color:var(--grey-bright);
  margin:0 auto 18px;
  background:var(--panel);
  position:relative;z-index:1;
}
.step h4{font-size:1rem;color:var(--text);margin-bottom:8px;}
.step p{font-size:.88rem;color:var(--steel);}

/* ---- Contact / CTA ---- */
.cta-section{
  text-align:center;
  padding:100px 24px;
  background:var(--charcoal-deep);
}
.cta-section h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:16px;}
.cta-section p{color:var(--steel);max-width:560px;margin:0 auto 36px;}

/* ---- Form ---- */
.contact-form{
  max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;
  text-align:left;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  background:var(--panel);
  border:1px solid rgba(176,184,190,.18);
  color:var(--text);
  padding:12px 16px;
  border-radius:4px;
  font-family:inherit;font-size:.95rem;
  width:100%;
}
.contact-form textarea{min-height:110px;resize:vertical;}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--grey-bright);
}
.contact-form label{
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-bottom:4px;display:block;
}
.form-group{display:flex;flex-direction:column;}

/* ---- Form status messages ---- */
#form-status.success{color:var(--green-bright);}
#form-status.error{color:#e07070;}

/* ---- Footer ---- */
footer{
  background:var(--charcoal-deep);
  border-top:1px solid rgba(176,184,190,.1);
  padding:40px 24px;
  text-align:center;
  color:var(--grey-mid);
  font-size:.85rem;
}
footer a{color:var(--steel);}
footer .footer-brand{
  font-size:1rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-bright);
  margin-bottom:10px;display:block;
}