/* GP Project Limited — Vintage Watch Dealer */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0a;--bg2:#141414;--bg3:#1a1a1a;
  --gold:#c9a84c;--gold-light:#e2c97e;--gold-dark:#a07b2a;
  --text:#e8e4dc;--text-dim:#9a9590;--text-bright:#faf5ee;
  --border:#2a2520;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color .3s}
a:hover{color:var(--gold-light)}

/* ── Header ─────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:1rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);letter-spacing:3px;font-weight:700}
.logo span{color:var(--text-dim);font-weight:400;font-size:.85rem;letter-spacing:1px;display:block}
nav a{color:var(--text-dim);margin-left:2rem;font-size:.85rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}
nav a:hover{color:var(--gold)}

/* ── Hero ────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8rem 2rem 4rem;
  background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,var(--bg) 100%),
    url('https://images.unsplash.com/photo-1587836374828-4dbafa94cf0e?w=1920&q=80') center/cover no-repeat;
}
.hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);color:var(--text-bright);line-height:1.15;margin-bottom:1rem}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{font-size:1.15rem;color:var(--text-dim);max-width:600px;margin:0 auto 2.5rem}
.hero-btn{
  display:inline-block;padding:14px 40px;
  border:1px solid var(--gold);color:var(--gold);
  font-size:.85rem;letter-spacing:2px;text-transform:uppercase;
  transition:all .4s;
}
.hero-btn:hover{background:var(--gold);color:var(--bg)}

/* ── Section base ────────────────────────── */
section{padding:6rem 2rem}
.container{max-width:1200px;margin:0 auto}
.section-label{
  font-size:.75rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;
}
.section-title{
  font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);
  color:var(--text-bright);margin-bottom:1rem;line-height:1.2;
}
.section-subtitle{color:var(--text-dim);max-width:650px;margin-bottom:3rem;font-size:1.05rem}

/* ── Watch Grid ──────────────────────────── */
.watch-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;
}
.watch-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  overflow:hidden;transition:transform .4s,border-color .4s;
}
.watch-card:hover{transform:translateY(-4px);border-color:var(--gold-dark)}
.watch-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.watch-card-body{padding:1.5rem}
.watch-card h3{font-family:var(--font-display);font-size:1.15rem;color:var(--text-bright);margin-bottom:.4rem}
.watch-card .brand{font-size:.8rem;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:.6rem}
.watch-card p{font-size:.9rem;color:var(--text-dim);line-height:1.6}

/* ── About ───────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-img{border-radius:4px;border:1px solid var(--border)}
.about-text p{margin-bottom:1.2rem;color:var(--text-dim)}
.about-text p:first-of-type{color:var(--text);font-size:1.1rem}

/* ── Services ────────────────────────────── */
.services{background:var(--bg2)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}
.service-item{
  padding:2rem;background:var(--bg3);border:1px solid var(--border);border-radius:4px;
  transition:border-color .3s;
}
.service-item:hover{border-color:var(--gold-dark)}
.service-icon{font-size:2rem;margin-bottom:1rem}
.service-item h3{font-family:var(--font-display);font-size:1.1rem;color:var(--text-bright);margin-bottom:.6rem}
.service-item p{font-size:.9rem;color:var(--text-dim)}

/* ── Contact ─────────────────────────────── */
.contact-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;
}
.contact-info h3{font-family:var(--font-display);color:var(--text-bright);font-size:1.2rem;margin-bottom:1rem}
.contact-info p{color:var(--text-dim);margin-bottom:.5rem;font-size:.95rem}
.contact-info a{color:var(--gold)}
.map-placeholder{
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  padding:2rem;text-align:center;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}

/* ── Footer ──────────────────────────────── */
footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:3rem 2rem 2rem;text-align:center;
}
.footer-registration{
  max-width:600px;margin:0 auto 2rem;padding:2rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:4px;
}
.footer-registration h4{
  font-family:var(--font-display);color:var(--gold);font-size:.95rem;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem;
}
.footer-registration img{max-width:180px;margin:0 auto 1rem;border-radius:4px;background:#fff;padding:8px}
.footer-registration p{font-size:.8rem;color:var(--text-dim);line-height:1.6}
.footer-bottom{font-size:.8rem;color:var(--text-dim);margin-top:1.5rem}

/* ── Responsive ──────────────────────────── */
@media(max-width:768px){
  .about-grid,.contact-inner{grid-template-columns:1fr}
  nav a{margin-left:1rem;font-size:.75rem}
  .logo{font-size:1.1rem}
  .header-inner{padding:.8rem 1rem}
}