/* VOZY — Dark Luxury Visual Homepage */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #cfcfcf;
  --accent: #bfc2c7; /* subtle silver */
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--fg); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
  z-index: 50; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header .logo { display: flex; gap: 12px; align-items: center; }
.header nav a { margin-left: 22px; letter-spacing: 2px; text-transform: uppercase; font-size: 36px; opacity: 0.9; }
.header nav a:hover { opacity: 1; }

/* Hero */
.hero {
  min-height: 92vh;
  background-position: center top;
  background-size: contain; background-color: #000;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 16px;
}
.hero .inner { margin-top: 60px; }
.hero h1 {
  font-size: clamp(84px, 15vw, 192px);
  letter-spacing: 6px;
  text-transform: uppercase;
}
.cta {
  margin-top: 24px;
  display: inline-block;
  border: 1.5px solid var(--fg);
  padding: 36px 84px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 36px;
  transition: background .25s, color .25s;
}
.cta:hover { background: var(--fg); color: var(--bg); }

/* Sections */
.section { padding: 96px 0; }
.section h2 {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: clamp(18px, 2.5vw, 28px);
  margin-bottom: 28px;
}
.muted { color: var(--muted); }

/* Collection */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.collection-grid img {
  width: 100%; display: block; filter: brightness(85%);
  transition: filter .25s ease;
}
.collection-grid img:hover { filter: brightness(100%); }
@media (min-width: 900px) {
  .collection-grid { grid-template-columns: 1fr 1fr; }
}

/* About block */
.about-block {
  max-width: 820px; margin: 0 auto; text-align: center;
  font-size: 18px; line-height: 1.8;
}

/* Lookbook */
.lookbook {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 28%);
  gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: #333 #000;
}
.lookbook img { width: 100%; height: auto; display: block; filter: grayscale(100%) contrast(120%); }

/* Exclusivity */
.exclusive { text-align: center; }
.exclusive p { margin: 8px 0 18px; color: var(--muted); }
.form {
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.input {
  background: transparent; color: var(--fg);
  border: 1px solid #444; padding: 10px 14px; min-width: 260px;
}
.btn {
  background: var(--fg); color: var(--bg); border: none;
  padding: 10px 18px; text-transform: uppercase; letter-spacing: 2px; font-size: 36px;
  cursor: pointer; transition: opacity .2s;
}
.btn:hover { opacity: .9; }

/* Footer */
footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0; text-align: center; color: var(--muted);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }

.header .brand {
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark { font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size: 60px; letter-spacing: 4px; text-transform: uppercase; }

.brand img { height: 120px; }