/* OBSDN — E-commerce product drop landing page
 * Bold, editorial, high-contrast. Bebas Neue display + Barlow body.
 * Color: near-black bg, raw white text, gold accent, zero decoration.
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --o-bg:       #080808;
  --o-bg-card:  #0f0f0f;
  --o-bg-raise: #171717;
  --o-border:   rgba(255,255,255,0.07);
  --o-border-h: rgba(255,255,255,0.2);
  --o-fg:       #f0ede8;
  --o-fg-mid:   #888;
  --o-fg-faint: #444;
  --o-gold:     #c8a96a;
  --o-gold-dim: rgba(200,169,106,0.12);
  --o-gold-glow:rgba(200,169,106,0.15);
  --o-font-disp:'Bebas Neue', serif;
  --o-font-body:'Barlow', sans-serif;
  --r:          6px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background:var(--o-bg);
  color:var(--o-fg);
  font-family:var(--o-font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }

/* ── NAV ──────────────────────────────────────────────── */
.o-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,8,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--o-border);
}
.o-nav-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.o-logo {
  font-family:var(--o-font-disp);
  font-size:1.5rem; letter-spacing:0.25em;
  color:var(--o-fg);
}
.o-nav-links { display:flex; align-items:center; gap:2rem; }
.o-nav-links a {
  font-size:0.8rem; font-weight:400; color:var(--o-fg-mid);
  letter-spacing:0.12em; text-transform:uppercase;
  transition:color 0.2s;
}
.o-nav-links a:hover { color:var(--o-fg); }
.o-nav-drop {
  color:var(--o-gold) !important;
  font-weight:500 !important;
}

/* ── HERO ─────────────────────────────────────────────── */
.o-hero {
  min-height:95vh;
  border-bottom:1px solid var(--o-border);
  overflow:hidden;
}
.o-hero-inner {
  max-width:1200px; margin:0 auto; padding:5rem 2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  align-items:center; min-height:85vh;
}
.o-drop-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.75rem; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--o-gold); margin-bottom:1.5rem;
}
.o-drop-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--o-gold);
  animation:pulse 2.5s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(200,169,106,0.4); }
  50% { box-shadow:0 0 0 6px rgba(200,169,106,0); }
}
.o-headline {
  font-family:var(--o-font-disp);
  font-size:clamp(4.5rem,10vw,8rem);
  letter-spacing:0.04em; line-height:0.9;
  color:var(--o-fg); margin-bottom:1.75rem;
}
.o-sub {
  font-size:1.05rem; font-weight:300; color:var(--o-fg-mid);
  line-height:1.75; max-width:480px; margin-bottom:2.5rem;
  font-style:italic;
}
.o-hero-actions { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; margin-bottom:3rem; }
.o-btn-primary {
  background:var(--o-fg); color:var(--o-bg);
  padding:0.85rem 2.25rem;
  font-size:0.8rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase;
  border-radius:var(--r);
  transition:background 0.2s, transform 0.15s;
}
.o-btn-primary:hover { background:#fff; transform:translateY(-1px); }
.o-stock-badge {
  display:flex; align-items:center; gap:10px;
  font-size:0.78rem; color:var(--o-fg-mid); font-weight:300;
  letter-spacing:0.06em;
}
.o-stock-bar-outer {
  width:120px; height:3px; background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden;
}
.o-stock-bar {
  display:block; height:3px;
  background: linear-gradient(90deg, var(--o-gold), #e8c88a);
  border-radius:2px;
  transition:width 0.5s;
}
.o-hero-proof {
  display:flex; align-items:center; gap:2.5rem;
  border-top:1px solid var(--o-border); padding-top:2rem;
}
.o-proof-item { display:flex; flex-direction:column; }
.o-proof-num {
  font-family:var(--o-font-disp); font-size:2rem;
  letter-spacing:0.08em; color:var(--o-fg); line-height:1;
}
.o-proof-label { font-size:0.7rem; color:var(--o-fg-faint); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }
.o-proof-divider { width:1px; height:45px; background:var(--o-border); }

/* ── HERO PRODUCT VISUAL ──────────────────────────────── */
.o-hero-right { display:flex; flex-direction:column; align-items:center; gap:2rem; }
.o-product-hero { position:relative; display:flex; align-items:flex-end; justify-content:center; height:380px; }
.o-product-glow {
  position:absolute; width:300px; height:300px;
  border-radius:50%; background:radial-gradient(circle, var(--o-gold-glow) 0%, transparent 70%);
  bottom:0; left:50%; transform:translateX(-50%);
}
.o-product-bottle {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.o-bottle-body {
  width:90px; height:260px;
  background:linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 50%, #1f1f1f 100%);
  border-radius:8px 8px 16px 16px;
  border:1px solid rgba(255,255,255,0.08);
  position:relative; overflow:hidden;
  box-shadow: inset -4px 0 12px rgba(0,0,0,0.6), 4px 4px 20px rgba(0,0,0,0.8);
}
.o-bottle-body::before {
  content:''; position:absolute; left:12px; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, transparent 0%, rgba(200,169,106,0.15) 40%, transparent 100%);
}
.o-bottle-cap {
  width:65px; height:30px;
  background:linear-gradient(180deg, #252525 0%, #181818 100%);
  border-radius:4px 4px 0 0;
  border:1px solid rgba(255,255,255,0.06);
  margin-bottom:-1px;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.4);
}
.o-bottle-label {
  position:absolute; inset:20px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
}
.o-label-brand {
  font-family:var(--o-font-disp); font-size:1.1rem;
  letter-spacing:0.3em; color:var(--o-gold); opacity:0.9;
}
.o-label-name {
  font-size:0.55rem; font-weight:500; letter-spacing:0.25em;
  text-transform:uppercase; color:rgba(255,255,255,0.4);
}
.o-label-vol {
  font-size:0.6rem; color:rgba(255,255,255,0.2); letter-spacing:0.1em;
  font-style:italic; margin-top:8px;
}
.o-product-shadow {
  width:80px; height:12px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.7) 0%, transparent 70%);
  margin-top:-4px; position:relative; z-index:1;
}
.o-hero-chips { display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center; }
.o-chip {
  font-size:0.7rem; font-weight:400; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--o-fg-mid);
  border:1px solid var(--o-border);
  padding:5px 12px; border-radius:100px;
}

/* ── COLLECTION ───────────────────────────────────────── */
.o-section-inner { max-width:1200px; margin:0 auto; padding:6rem 2rem; }
.o-section-header { margin-bottom:3rem; }
.o-section-label {
  font-size:0.7rem; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--o-gold); display:block; margin-bottom:0.75rem;
}
.o-section-heading {
  font-family:var(--o-font-disp);
  font-size:clamp(2.5rem,5vw,4rem); letter-spacing:0.06em;
  color:var(--o-fg); line-height:1;
}
.o-products { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--o-border); }
.o-product-card {
  background:var(--o-bg-card); padding:2rem;
  position:relative; transition:background 0.2s;
}
.o-product-card:hover { background:var(--o-bg-raise); }
.o-product-card.bundle { background:var(--o-bg-raise); border:1px solid var(--o-gold-dim); }
.o-bundle-badge {
  font-size:0.68rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--o-gold);
  border:1px solid var(--o-gold);
  padding:3px 10px; border-radius:100px;
  display:inline-block; margin-bottom:1rem;
}
.o-prod-visual { height:160px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:1.25rem; }
.o-mini-bottle {
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.o-mini-bottle.tall .o-mb-body { height:100px; width:38px; }
.o-mini-bottle.wide .o-mb-body { height:64px; width:70px; border-radius:6px; }
.o-mini-bottle.mini .o-mb-body { height:70px; width:26px; }
.o-mb-cap {
  width:30px; height:16px;
  background:linear-gradient(180deg, #2a2a2a 0%, #181818 100%);
  border-radius:3px 3px 0 0; margin-bottom:-1px;
}
.o-mb-cap.flat { width:58px; height:10px; border-radius:2px 2px 0 0; }
.o-mb-cap.pump { border-radius:50% 50% 0 0 / 60% 60% 0 0; width:8px; height:14px; }
.o-mb-body {
  background:linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:4px 4px 8px 8px;
  display:flex; align-items:center; justify-content:center;
}
.o-mb-body span {
  font-size:0.45rem; letter-spacing:0.15em;
  color:rgba(200,169,106,0.5); text-transform:uppercase;
  text-align:center; line-height:1.3;
}
.bundle-v { gap:8px; flex-direction:row; align-items:flex-end; }
.o-prod-info h3 {
  font-family:var(--o-font-disp); font-size:1.4rem;
  letter-spacing:0.08em; color:var(--o-fg); margin-bottom:0.25rem;
}
.o-prod-sub { font-size:0.75rem; color:var(--o-fg-mid); margin-bottom:1rem; }
.o-prod-price {
  font-family:var(--o-font-disp); font-size:1.6rem;
  letter-spacing:0.06em; color:var(--o-fg); margin-bottom:1.25rem;
}
.o-prod-was { font-size:1rem; color:var(--o-fg-faint); text-decoration:line-through; margin-left:0.5rem; }
.o-prod-btn {
  display:block; text-align:center;
  padding:0.6rem 1rem;
  font-size:0.75rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid var(--o-border-h);
  border-radius:var(--r); color:var(--o-fg);
  transition:all 0.2s;
}
.o-prod-btn:hover { background:var(--o-fg); color:var(--o-bg); border-color:var(--o-fg); }
.o-prod-btn.glow {
  background:var(--o-gold); color:var(--o-bg);
  border-color:var(--o-gold);
}
.o-prod-btn.glow:hover { box-shadow:0 0 20px var(--o-gold-glow); }

/* ── RITUAL ───────────────────────────────────────────── */
.o-ritual { border-top:1px solid var(--o-border); background:var(--o-bg-card); }
.o-ingredients { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.o-ingr { }
.o-ingr-icon {
  font-size:1.5rem; color:var(--o-gold); margin-bottom:1rem; opacity:0.7;
}
.o-ingr h3 {
  font-size:0.8rem; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--o-fg);
  margin-bottom:0.75rem;
}
.o-ingr p { font-size:0.875rem; color:var(--o-fg-mid); line-height:1.75; font-weight:300; }

/* ── REVIEWS MARQUEE ──────────────────────────────────── */
.o-reviews { border-top:1px solid var(--o-border); overflow:hidden; padding:4rem 0; }
.o-review-marquee { overflow:hidden; }
.o-review-track {
  display:flex; gap:1.5rem;
  animation:marquee 30s linear infinite;
  width:max-content;
}
@keyframes marquee {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.o-review {
  flex-shrink:0; width:340px;
  background:var(--o-bg-card); border:1px solid var(--o-border);
  border-radius:10px; padding:1.5rem;
}
.o-review-stars { color:var(--o-gold); font-size:0.8rem; margin-bottom:0.75rem; letter-spacing:0.1em; }
.o-review p { font-size:0.875rem; color:var(--o-fg-mid); line-height:1.7; margin-bottom:0.75rem; font-style:italic; }
.o-review span { font-size:0.75rem; color:var(--o-fg-faint); }

/* ── EMAIL NOTIFY ─────────────────────────────────────── */
.o-notify {
  border-top:1px solid var(--o-border);
  padding:5rem 2rem; text-align:center;
  background: linear-gradient(180deg, var(--o-bg) 0%, #0c0906 100%);
}
.o-notify-inner { max-width:520px; margin:0 auto; }
.o-notify h2 {
  font-family:var(--o-font-disp); font-size:3rem;
  letter-spacing:0.08em; color:var(--o-fg); margin-bottom:0.75rem;
}
.o-notify p { font-size:0.95rem; color:var(--o-fg-mid); margin-bottom:2rem; font-weight:300; }
.o-notify-form { display:flex; gap:0; margin-bottom:1rem; }
.o-email-input {
  flex:1; background:var(--o-bg-raise);
  border:1px solid var(--o-border); border-right:none;
  color:var(--o-fg); padding:0.75rem 1rem;
  font-size:0.9rem; font-family:var(--o-font-body);
  border-radius:var(--r) 0 0 var(--r); outline:none;
}
.o-email-input:focus { border-color:var(--o-gold); }
.o-btn-notify {
  background:var(--o-gold); color:var(--o-bg);
  padding:0.75rem 1.5rem; border:none; cursor:pointer;
  font-size:0.8rem; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; font-family:var(--o-font-body);
  border-radius:0 var(--r) var(--r) 0;
  transition:background 0.2s;
}
.o-btn-notify:hover { background:#d4b47a; }
.o-notify-sub { font-size:0.75rem; color:var(--o-fg-faint); letter-spacing:0.06em; }

/* ── FOOTER ───────────────────────────────────────────── */
.o-footer { border-top:1px solid var(--o-border); padding:2.5rem 2rem; }
.o-footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.o-footer-links { display:flex; gap:2rem; }
.o-footer-links a {
  font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--o-fg-mid); transition:color 0.2s;
}
.o-footer-links a:hover { color:var(--o-fg); }
.o-footer-copy { font-size:0.75rem; color:var(--o-fg-faint); }
.o-footer-copy a { color:var(--o-gold); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:1000px) {
  .o-products { grid-template-columns:1fr 1fr; }
  .o-ingredients { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .o-hero-inner { grid-template-columns:1fr; }
  .o-hero-right { display:none; }
  .o-headline { font-size:clamp(3.5rem,14vw,5rem); }
  .o-products { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .o-nav-links a:not(.o-nav-drop) { display:none; }
  .o-ingredients { grid-template-columns:1fr; }
  .o-notify-form { flex-direction:column; }
  .o-email-input { border-right:1px solid var(--o-border); border-bottom:none; border-radius:var(--r) var(--r) 0 0; }
  .o-btn-notify { border-radius:0 0 var(--r) var(--r); }
}