/* ============================================================
   Oneva — main stylesheet  (v2, April 2026)
   Design: A3 Steel & Ice
   Stack: Bootstrap 5.3 + this file
   Fonts: Syne 700/800 (headlines), DM Sans 300/400/500 (body),
          DM Mono 400/500 (data/labels)
   ============================================================ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy:          #0D2B52;
  --navy-dark:     #071828;
  --ice:           #5AADF2;
  --ice-bright:    #2E9AEF;
  --ice-dim:       #E3EFF9;
  --ice-border:    #B5D4F4;

  /* Neutrals */
  --charcoal:      #1A1E2A;
  --charcoal-mid:  #3A4055;
  --muted:         #5F6B7A;
  --surface:       #FFFFFF;
  --bg:            #F5F6F8;
  --border:        #D8DCE3;
  --border-light:  #EDEEF1;

  /* Semantic */
  --green:         #2A9E20;
  --green-dim:     #EBF7E8;
  --green-border:  #B4DDB0;

  /* Typography — unquoted single-word names, quoted multi-word names */
  --font-display:  Outfit, sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* Spacing / shape */
  --radius:        8px;
  --radius-lg:     12px;
  --radius-xl:     16px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:     0 10px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
}

/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dm-mono {
  font-family: var(--font-mono);
}

/* ── NAVBAR ────────────────────────────────────────────────── */
.oneva-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 60px;
}

.oneva-navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.oneva-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.oneva-logo-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--charcoal);
  letter-spacing: -0.02em;
}

.oneva-navbar-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.oneva-navbar-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.oneva-navbar-links a:hover {
  color: var(--charcoal);
}

/* ── BETA BANNER ───────────────────────────────────────────── */
.beta-banner {
  background: var(--ice-dim);
  border-bottom: 1px solid var(--ice-border);
  padding: 10px 0;
  font-size: 13px;
  color: var(--charcoal-mid);
  text-align: center;
}

.beta-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.beta-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-oneva-dark {
  background: var(--charcoal);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
  cursor: pointer;
}

.btn-oneva-dark:hover {
  background: var(--charcoal-mid);
  color: #fff;
}

.btn-oneva-dark:active {
  transform: scale(0.98);
}

.btn-oneva-outline {
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.btn-oneva-outline:hover {
  border-color: var(--ice-border);
  background: var(--ice-dim);
  color: var(--charcoal);
}

.btn-oneva-ice {
  background: var(--ice);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
  cursor: pointer;
}

.btn-oneva-ice:hover {
  background: var(--ice-bright);
  color: #fff;
}

.btn-oneva-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.btn-oneva-outline-white:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.btn-oneva-ghost {
  background: transparent;
  color: var(--charcoal-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.btn-oneva-ghost:hover {
  border-color: var(--ice-border);
  background: var(--ice-dim);
  color: var(--charcoal);
}

.btn-oneva-lg {
  padding: 13px 28px;
  font-size: 15px;
  border-radius: var(--radius-lg);
}

/* Nav bar register button */
.btn-oneva {
  background: var(--charcoal);
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-oneva:hover {
  background: var(--charcoal-mid);
}

/* ── SECTION COMMON ────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ice-bright);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  color: var(--muted);
  font-weight: 300;
  max-width: 580px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ── HERO ──────────────────────────────────────────────────── */
.landing-hero {
  background: var(--surface);
  padding: 88px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-bright);
  background: var(--ice-dim);
  border: 1px solid var(--ice-border);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 28px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ice);
  display: inline-block;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 800;
  font-display: block;
  color: var(--charcoal);
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: 20px;
}

.hero-h1 em {
  color: var(--ice);
  font-style: normal;
}

.hero-sub {
  font-size: 18px;
  color: var(--muted);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0;
}

/* ── FEATURES ──────────────────────────────────────────────── */
.landing-features {
  background: var(--bg);
  padding: 88px 0;
}

.landing-features .section-sub {
  margin: 0 auto 0;
  text-align: center;
}

.landing-features .text-center {
  margin-bottom: 2rem;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  border-color: var(--ice-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-card-accent {
  background: var(--ice-dim);
  border-color: var(--ice-border);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--ice-dim);
  border: 1px solid var(--ice-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--navy);
}

.feature-card-accent .feature-icon {
  background: var(--surface);
}

.feature-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.feature-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── HOW IT WORKS ──────────────────────────────────────────── */
.landing-how {
  background: var(--charcoal);
  padding: 88px 0;
}

.landing-how .section-eyebrow {
  color: rgba(90, 173, 242, 0.7);
}

.landing-how .section-title {
  color: #fff;
}

.how-step {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: 32px;
  height: 100%;
}

.how-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ice);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.how-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.how-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ── PRIVACY ───────────────────────────────────────────────── */
.landing-privacy {
  background: var(--surface);
  padding: 88px 0;
}

.privacy-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--charcoal-mid);
}

.check-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ice-dim);
  border: 1px solid var(--ice-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ice-bright);
  font-weight: 700;
  flex-shrink: 0;
}

.privacy-status-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}

.privacy-status-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.privacy-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  color: var(--charcoal-mid);
}

.ps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ps-dot-green { background: var(--green); }
.ps-dot-ice   { background: var(--ice); }

.ps-name { flex: 1; }

.ps-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 500;
}

.ps-tag-green {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.ps-tag-ice {
  background: var(--ice-dim);
  color: #1A5FA8;
  border: 1px solid var(--ice-border);
}

.nc-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.nc-badge svg { flex-shrink: 0; margin-top: 1px; }
.nc-badge strong { color: var(--charcoal); font-weight: 500; }

/* ── WAITLIST ───────────────────────────────────────────────── */
.landing-waitlist {
  background: var(--bg);
  padding: 88px 0;
  border-top: 1px solid var(--border-light);
}

.beta-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
}

.landing-waitlist .section-title {
  text-align: center;
}

.landing-waitlist .section-sub {
  margin: 0 auto 32px;
  text-align: center;
}

.waitlist-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
}

.waitlist-intro {
  font-size: 15px;
  color: var(--charcoal-mid);
  margin-bottom: 16px;
}

.waitlist-input-row {
  display: flex;
  gap: 10px;
}

.waitlist-input-row .form-control {
  flex: 1;
}

.waitlist-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  margin-bottom: 0;
  text-align: left;
}

.oneva-input {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.oneva-input:focus {
  border-color: var(--ice-border);
  box-shadow: 0 0 0 3px rgba(90,173,242,0.15);
  outline: none;
}

.oneva-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal-mid);
  margin-bottom: 6px;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

/* Waitlist success state */
.waitlist-success {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
}

.success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.success-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.success-text {
  font-size: 15px;
  color: var(--charcoal-mid);
  margin-bottom: 0;
}

/* Survey form */
.waitlist-survey {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-top: 16px;
  text-align: left;
}

.survey-intro {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  text-align: center;
}

/* ── CTA ───────────────────────────────────────────────────── */
.landing-cta {
  background: var(--charcoal);
  padding: 88px 0;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.cta-title em {
  color: var(--ice);
  font-style: normal;
}

.cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.45);
  font-weight: 300;
  margin-bottom: 32px;
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cta-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.landing-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-logo {
  text-decoration: none;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.footer-email {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-email:hover {
  color: var(--charcoal);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--charcoal);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .oneva-navbar-links a:not(.btn) {
    display: none;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
  }

  .waitlist-input-row {
    flex-direction: column;
  }

  .cta-buttons {
    flex-direction: column;
    padding: 0 20px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-left {
    flex-direction: column;
    align-items: center;
  }
}