:root {
  --bg: #050505;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.65);
  --accent: #e51743;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 5vw, 64px);
  gap: clamp(40px, 8vh, 96px);
}

.bg, .bg-overlay {
  position: fixed; inset: 0; z-index: -1;
}
.bg {
  background: #000 url('assets/hero.jpg') center/cover no-repeat;
  animation: slowZoom 24s ease-in-out infinite alternate;
}
.bg-overlay {
  background: radial-gradient(120% 80% at 20% 30%, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.87) 70%, rgb(0, 0, 0) 100%), linear-gradient(180deg, rgb(10, 8, 7) 0%, rgba(10,8,7,0.25) 40%, rgb(10, 8, 7) 100%);
}

@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* nav */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.brand span { color: var(--accent); font-size: 0.75em; vertical-align: super; margin-left: 2px; }
.socials { display: flex; gap: clamp(14px, 2vw, 28px); }
.socials a {
  color: var(--muted); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color .3s ease;
}
.socials a:hover { color: var(--accent); }

/* hero */
.hero {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 760px;
  animation: fadeUp 1.2s ease both;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 28px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(233, 184, 166, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(233,184,166,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(233,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,184,166,0); }
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
h1 em {
  font-style: normal;
  color: var(--accent);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

.lede {
  max-width: 460px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* countdown */
.countdown {
  list-style: none; display: flex; gap: clamp(16px, 3vw, 40px);
  margin-bottom: 44px;
}
.countdown li {
  display: flex; flex-direction: column; gap: 6px;
  padding-right: clamp(16px, 3vw, 40px);
  border-right: 1px solid var(--line);
}
.countdown li:last-child { border-right: none; padding-right: 0; }
.countdown span {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.countdown small {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}

/* form */
.subscribe {
  position: relative;
  display: flex; align-items: center;
  max-width: 480px;
  border-bottom: 1px solid var(--line);
  transition: border-color .3s ease;
}
.subscribe:focus-within { border-color: var(--accent); }
.subscribe input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--fg);
  padding: 16px 0;
  font-family: inherit; font-size: 1rem;
}
.subscribe input::placeholder { color: rgba(255,255,255,0.4); }
.subscribe button {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--fg);
  padding: 12px 0 12px 18px;
  font: inherit; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color .3s ease, transform .3s ease;
}
.subscribe button:hover { color: var(--accent); }
.subscribe button:hover svg { transform: translateX(4px); }
.subscribe button svg { width: 20px; height: 20px; transition: transform .3s ease; }
.subscribe .msg {
  position: absolute; top: 100%; left: 0; margin-top: 10px;
  font-size: 0.78rem; color: var(--accent); min-height: 1em;
  opacity: 0; transform: translateY(-4px); transition: .3s ease;
}
.subscribe .msg.show { opacity: 1; transform: translateY(0); }
.subscribe .msg.err { color: #ff6b80; }

/* footer */
.foot {
  display: flex; justify-content: space-between; gap: 20px;
  color: var(--muted);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: auto;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .socials a:nth-child(n+2) { display: none; }
  .countdown { flex-wrap: wrap; gap: 20px 28px; }
  .countdown li { border-right: none; padding-right: 0; }
  .foot { flex-direction: column; gap: 8px; }
}