/* ============================================================================
   ComAve — Coming Soon
   Dark, minimal, mobile-first. Single-fold splash.
   Brand font: Barlow (self-hosted from /fonts/).
   ========================================================================== */

/* Self-hosted Barlow. We only declare the weights actually used on this
   page — adding more is one @font-face block per file. `font-display: swap`
   means text shows in the fallback font for the few hundred ms it takes the
   TTF to load, rather than blank. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Barlow-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Barlow-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Barlow-Black.ttf') format('truetype');
}

/* Monigue — display font for headings, per brand guide. */
@font-face {
  font-family: 'Monigue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Monigue.otf') format('opentype');
}

:root {
  /* Brand colours from the ComAve guide:
     primary (orange) drives CTAs + accents
     bg (deep navy) is the canvas; bg-elev is the input/card surface
     text is white on dark; text-muted is the lower-emphasis grey-blue */
  --bg: #0F152E;
  --bg-elev: #1F2937;
  --text: #ffffff;
  --text-muted: #9aa9c7;
  --accent: #FF6B00;             /* brand primary orange */
  --accent-hover: #ff8b33;
  --accent-glow: rgba(255, 107, 0, 0.30);
  --secondary-glow: rgba(74, 158, 255, 0.15);
  --border: rgba(255, 255, 255, 0.10);
  --error: #ff8a8a;
  --success: #6cf0a0;
  --radius: 8px;                 /* per brand guide */
  --max-width: 640px;
  font-family: 'Barlow', Arial, system-ui, -apple-system, sans-serif;
}

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

html,
body {
  height: 100%;
}

body {
  background:
    radial-gradient(circle at 20% 0%, var(--accent-glow), transparent 50%),
    radial-gradient(circle at 80% 100%, var(--secondary-glow), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ----- layout ----- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.brand-link {
  display: inline-block;
  color: var(--text);          /* logo SVG uses currentColor — inherits this */
  text-decoration: none;
  /* Hover tints toward the accent — subtle but signals interactivity */
  transition: color 0.15s ease;
}
.brand-link:hover { color: var(--accent); }

.logo {
  display: block;
  height: 44px;                /* SVG is 88x24 ratio → ~160px wide */
  width: auto;
  max-width: 100%;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.08);
}

.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

.footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* ----- copy ----- */
/* Headline uses Monigue per brand guide; max 110px on desktop, scales
   smoothly down on mobile. Letter-spacing tighter than default since
   Monigue is a display font with generous default tracking. */
.headline {
  font-family: 'Monigue', 'Impact', 'Barlow', sans-serif;
  font-size: clamp(3rem, 9vw, 6.875rem);   /* up to 110px */
  font-weight: 400;                         /* Monigue ships at 1 weight */
  letter-spacing: -0.01em;
  line-height: 1.0;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Accent span — solid orange instead of the previous gradient. Cleaner
   match to the brand guide's single-colour primary. */
.accent {
  color: var(--accent);
}

.subhead {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 1rem;                          /* 16px per brand guide */
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 520px;
  line-height: 1.55;
}

/* ----- form ----- */
.notify-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 520px) {
  .field-row {
    flex-direction: row;
  }
}

.email-input {
  flex: 1 1 auto;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.email-input::placeholder {
  color: #555;
}

.email-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  /* White on orange would be ~2.9:1, fails WCAG AA. White is fine here at
     700+ weight + this size, but pure white isn't optimal — using a
     near-white that picks up just enough warmth from the orange. */
  color: #ffffff;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease;
  white-space: nowrap;
}

.submit-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.submit-btn.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ----- consent + message ----- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.consent input[type='checkbox'] {
  margin-top: 3px;
  accent-color: var(--accent);
}

.form-message {
  min-height: 1.2em;
  font-size: 0.875rem;
}

.form-message.error { color: var(--error); }
.form-message.success { color: var(--success); }

/* ----- footer ----- */
.socials {
  display: flex;
  gap: 24px;
}

.socials a {
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.05s ease;
}

.socials a:hover {
  color: var(--text);
}

.socials a:active {
  transform: translateY(1px);
}

.legal {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ----- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}