/* Mobile‑first, dark, elegant */
:root{
  --bg:#0b0b0b;
  --fg:#e9e9e9;
  --muted:#b6b6b6;
  --accent:#d0b37f;
  --accent-2:#8d7444;
  --card:#131313;
  --gap: clamp(16px, 3vw, 28px);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.container{width:min(1100px, 92vw); margin-inline:auto}

.hero{position:relative; height:100svh; overflow:hidden}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: saturate(1.05) contrast(1.02) brightness(.9);
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
}
.hero__brand{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding: 18svh 0 var(--gap);
}
.brand{ text-align:center; margin-top:auto; margin-bottom:auto;}
.brand__name{
  display:block; font-size: clamp(36px, 9vw, 88px);
  letter-spacing:.03em; font-weight:700;
}
.brand__byline{
  display:block; margin-top:6px; color:var(--muted);
  font-size:clamp(14px, 2.8vw, 18px);
}
.scroll-hint{display:inline-block; margin-top:10svh; color:var(--fg); opacity:.7; text-decoration:none; font-size:20px}

.sound-gate{
  position:absolute; inset:0; display:grid; place-items:center;
  z-index:4; background:rgba(0,0,0,.6); backdrop-filter: blur(3px);
}
.sound-gate[hidden]{display:none}
.sound-gate__panel{
  background:rgba(19,19,19,.9); border:1px solid #262626; padding:28px; border-radius:16px;
  width:min(92vw, 560px); text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.9em 1.2em; border-radius:999px; border:1px solid #333; text-decoration:none;
  font-weight:600; cursor:pointer; transition:.2s transform ease, .2s opacity ease, .2s background ease, .2s border ease;
}
.btn--primary{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#141414; border-color:#6b5940 }
.btn--primary:hover{ transform: translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:#3a3a3a;}
.btn--ghost:hover{ border-color:#555; }

.section{ padding: clamp(56px, 9vw, 110px) 0 }
.section--story{ background:#0e0e0e }
.section--product{ background: #0b0b0b }
.section--contact{ background: #0f0f0f }

h2{ font-size: clamp(24px, 5.6vw, 40px); margin: 0 0 12px }
h3{ font-size: clamp(18px, 3.8vw, 22px); margin: 0 0 8px }
p{ margin: 0 0 12px; color: var(--fg) }
.small{ color: var(--muted); font-size:.9em }

.grid{ display:grid; gap:var(--gap) }
.notes{ grid-template-columns: repeat(1, 1fr); }
@media (min-width: 720px){
  .notes{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  background:var(--card); border:1px solid #1e1e1e; border-radius: var(--radius); padding: clamp(14px, 3vw, 22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.product{ display:grid; gap:var(--gap); align-items:center; grid-template-columns: 1fr }
@media (min-width: 960px){
  .product{ grid-template-columns: 1.1fr .9fr }
}
.product__copy{}
.product__media{ display:grid; place-items:center }
.bullets{ margin:16px 0 0; padding-left: 18px; }
.bullets li{ margin:6px 0; color:var(--muted) }

.bottle{
  width:min(88vw, 420px); aspect-ratio: 2/3; border-radius: 24px;
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(120% 140% at 80% 90%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #1b1b1b, #0e0e0e);
  position:relative; border:1px solid #1f1f1f; box-shadow: 0 40px 70px rgba(0,0,0,.6);
}
.bottle__shadow{ position:absolute; inset:auto 10% -18% 10%; height:18%; background: radial-gradient(60% 120% at 50% 0%, rgba(0,0,0,.7), transparent 70%); display:block }

.contact{ display:flex; gap:12px; flex-wrap:wrap }

.footer{ border-top:1px solid #1b1b1b; background:#0a0a0a; color:var(--muted); padding: 22px 0 }
.footer__grid{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer__nav{ display:flex; gap:12px; flex-wrap:wrap }
.footer__nav a{ color:var(--muted); text-decoration:none }
.footer__nav a:hover{ text-decoration:underline }

/* Fade-in after hero video */
.section{ opacity:0; transform: translateY(10px); transition:.6s ease }
.section.is-visible{ opacity:1; transform:none }