:root {
  --color-text-white: #ffffff;
  --color-text-grey-200: #eeeeee;
  --color-text-grey-400: #bdbdbd;
  --color-primary: #7f27ff;
  --radius-pill: 1000px;
  --space-0: 0;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-160: 160px;
  --font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text-white);
  background: #000; /* page edges beyond hero */
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: -999px; background: #000; color: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

.container { width: min(1280px, 100%); margin-inline: auto; padding-inline: 16px; }

/* Header */
.site-header { position: absolute; inset-inline: 0; top: 0; background: transparent; z-index: 10; }
.header-inner { display: flex; align-items: center; gap: 10px; padding-block: 24px; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.brand-mark { width: 25.041px; height: 22.169px; }
.brand-name { font-weight: 700; font-size: 24px; line-height: 1.4; }

/* Hero */
.site-main { display: block; }
.hero { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; }
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
}
.hero::before { content: ""; position: absolute; inset: -1px; background: rgba(0,0,0,0.302); z-index: -1; }
.hero-bg {
  position: absolute; inset: -1px; z-index: -2;
  background-image: url("./assets/hero.jpg");
  background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
}

.hero-inner { display: grid; align-items: start; justify-items: start; row-gap: 24px; padding-inline: 40px; }
.hero-text { display: grid; row-gap: 16px; }
.hero-title { margin: 0; font-weight: 700; font-size: clamp(32px, 8vw, 64px); line-height: 1.0; letter-spacing: 0; text-align: left; }
.hero-title { text-wrap: balance; }
.hero-subtitle { margin: 0; color: var(--color-text-grey-200); font-weight: 400; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.4; }
.br-mobile { display: none; }

.waitlist { display: grid; row-gap: 16px; width: 100%; }
.waitlist-label { margin: 0; font-size: 24px; line-height: 1.4; }

.waitlist-form .field { position: relative; width: min(480px, 100%); }
.waitlist-form input[type="email"] {
  width: 100%; height: 58px; padding: 16px 16px 16px 24px; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text-white);
  border: 1px solid #6e7273; outline: none; font-size: 16px; line-height: 1.6; letter-spacing: 0.2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}
.waitlist-form input[type="email"] { padding-right: calc(183px + 16px); }
.waitlist-form .btn-primary { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 183px; }
.waitlist-form input::placeholder { color: var(--color-text-white); opacity: 1; }
.waitlist-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(127, 39, 255, 0.15); }

.btn-primary {
  height: 58px; padding-inline: 16px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-text-white);
  font-weight: 700; font-size: 16px; line-height: 1.6; letter-spacing: 0.2px; border: none; cursor: pointer;
}
.btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-primary:hover { filter: brightness(1.05); }

.copyright { position: absolute; inset-inline: 0; bottom: 24px; text-align: center; color: var(--color-text-grey-400); font-size: 12px; line-height: 1.4; margin: 0; }
.privacy-note { position: absolute; inset-inline: 0; bottom: 44px; text-align: center; color: var(--color-text-grey-400); font-size: 12px; line-height: 1.4; margin: 0; }
.privacy-note a { color: var(--color-text-grey-400); text-decoration: underline; }
.privacy-note a:hover { color: var(--color-text-white); }

/* Responsive layout alignment to match Figma grid on large screens */
@media (min-width: 1280px) {
  .hero-inner { grid-template-rows: 1fr auto; }
  .hero-inner { row-gap: 64px; }
  .hero-text, .waitlist { justify-self: start; }
  .hero-title { font-size: 64px; }
  .hero-subtitle { font-size: 32px; letter-spacing: 0.2px; }
  .waitlist-label { font-size: 24px; }
}

@media (max-width: 460px) {
  .hero-inner { padding-inline: 40px; }
  .hero-title { max-width: none; width: 100%; margin-inline: 0; font-size: clamp(32px, 8vw, 56px); line-height: 1.0; }
  .hero-subtitle { max-width: none; width: 100%; margin-inline: 0; text-align: left; font-size: clamp(20px, 3.2vw, 24px); }
  .br-mobile { display: inline; }
  .waitlist { max-width: none; width: 100%; }
  .waitlist-form .field { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .waitlist-form input[type="email"] { padding-right: 16px; }
  .waitlist-form .btn-primary { position: static; transform: none; width: 100%; }
  .privacy-note { padding-inline: 20px; }
  .hero-text { row-gap: 24px; }
  .hero-inner { row-gap: 64px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}