/* =============================================================================
   RADOX Landing Page — Stellar Design System (SDS) Integration
   All tokens derived from @stellar/design-system theme.scss
   ============================================================================= */

/* ---------- CSS Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- SDS Design Tokens ---------- */
:root {
  /* SDS Dark Palette (dark sections: hero, for-users, for-investors, etc.) */
  --sds-gray-01: #161616;
  --sds-gray-02: #1c1c1c;
  --sds-gray-03: #232323;
  --sds-gray-04: #282828;
  --sds-gray-05: #2e2e2e;
  --sds-gray-06: #343434;
  --sds-gray-07: #3e3e3e;
  --sds-gray-08: #505050;
  --sds-gray-09: #707070;
  --sds-gray-10: #7e7e7e;
  --sds-gray-11: #a0a0a0;
  --sds-gray-12: #ededed;

  /* SDS Light Palette (light sections: how-it-works, for-companies, security) */
  --sds-gray-lt-01: #fcfcfc;
  --sds-gray-lt-02: #f8f8f8;
  --sds-gray-lt-03: #f3f3f3;
  --sds-gray-lt-04: #ededed;
  --sds-gray-lt-06: #e2e2e2;
  --sds-gray-lt-07: #dbdbdb;
  --sds-gray-lt-09: #8f8f8f;
  --sds-gray-lt-11: #6f6f6f;
  --sds-gray-lt-12: #171717;

  /* SDS Gold — Primary Accent (Stellar brand) */
  --sds-gold-03: #2c2100;
  --sds-gold-04: #352800;
  --sds-gold-06: #493c00;
  --sds-gold-07: #594a05;
  --sds-gold-08: #705e00;
  --sds-gold-09: #fdda24;
  --sds-gold-10: #ffef5c;
  --sds-gold-11: #f0c000;
  --sds-gold-12: #fffad1;

  /* SDS Semantic Colors */
  --sds-green-09: #30a46c;
  --sds-green-11: #4cc38a;
  --sds-red-09: #e5484d;
  --sds-red-11: #ff6369;
  --sds-teal-09: #05a2c2;
  --sds-teal-11: #00c2d7;

  /* SDS Overlays */
  --sds-overlay-01: rgba(255, 255, 255, 0.1);
  --sds-overlay-02: rgba(255, 255, 255, 0.2);

  /* Semantic Aliases */
  --dark-bg: var(--sds-gray-01);
  --dark-fg: var(--sds-gray-12);
  --muted-fg: var(--sds-gray-11);
  --subtle-fg: var(--sds-gray-09);
  --light-bg: var(--sds-gray-02);
  --light-fg: var(--sds-gray-12);
  --card-bg: var(--sds-gray-03);
  --card-border: var(--sds-gray-04);
  --secondary-bg: var(--sds-gray-04);

  /* Glass */
  --glass-bg: var(--sds-overlay-01);
  --glass-border: var(--sds-gray-06);

  /* Accent */
  --accent: var(--sds-gold-09);
  --accent-hover: var(--sds-gold-10);
  --accent-glow: var(--sds-gold-06);
  --accent-subtle: var(--sds-gold-03);

  /* Spacing */
  --section-py: clamp(4rem, 10vw, 10rem);
  --container: 72rem;
  --px: clamp(1rem, 4vw, 1.5rem);

  /* SDS Typography */
  --sds-ff-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --sds-ff-base: 'Inter', system-ui, -apple-system, sans-serif;
  --sds-ff-monospace: 'Inconsolata', monospace;

  /* SDS Font Weights */
  --sds-fw-regular: 400;
  --sds-fw-medium: 500;
  --sds-fw-semi-bold: 600;
  --sds-fw-bold: 700;

  /* SDS Animation */
  --sds-transition: cubic-bezier(0.65, 0.05, 0.36, 1) 100ms;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--sds-ff-base);
  font-size: 16px;
  background: var(--dark-bg);
  color: var(--dark-fg);
  line-height: 1.75rem;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--sds-ff-heading);
  font-weight: var(--sds-fw-semi-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h1 { font-weight: var(--sds-fw-bold); }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select { font-family: inherit; }

/* ---------- Utility Classes ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--px); padding-right: var(--px); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.relative { position: relative; }

/* ---------- Section Themes ---------- */
.section-dark { background: transparent; color: var(--dark-fg); }
.section-light { background: var(--light-bg); color: var(--light-fg); position: relative; z-index: 3; }

/* ---------- Buttons — SDS Pattern ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--sds-gray-lt-12);
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition), box-shadow var(--sds-transition);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--sds-gray-06);
  background: var(--sds-gray-01);
  color: var(--sds-gray-12);
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition), box-shadow var(--sds-transition);
}
.btn-secondary:hover {
  background: var(--sds-gray-04);
  border-color: var(--sds-gray-07);
}
.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--sds-gray-05);
}

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  color: var(--sds-gray-12);
  border: 1px solid var(--sds-gray-06);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition);
}
.btn-tertiary:hover {
  border-color: var(--sds-gray-07);
  background: var(--sds-gray-03);
}

/* Legacy class aliases — buttons */
.btn-gold { /* alias to primary */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--sds-gray-lt-12);
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition), box-shadow var(--sds-transition);
}
.btn-gold:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-gold:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--sds-gray-06);
  background: var(--sds-gray-01);
  color: var(--sds-gray-12);
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition), box-shadow var(--sds-transition);
}
.btn-outline:hover {
  background: var(--sds-gray-04);
  border-color: var(--sds-gray-07);
}
.btn-outline:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--sds-gray-05);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  font-weight: var(--sds-fw-semi-bold);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  color: var(--sds-gray-12);
  border: 1px solid var(--sds-gray-06);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--sds-transition), border-color var(--sds-transition);
}
.btn-outline-dark:hover {
  border-color: var(--sds-gray-07);
  background: var(--sds-gray-03);
}

/* ---------- Glass Card ---------- */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Light Card ---------- */
.light-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* ---------- Hover Lift ---------- */
.hover-lift { transition: all var(--sds-transition); }
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -8px rgba(253, 218, 36, 0.2);
}

/* ---------- Navbar Glass ---------- */
.navbar-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(22, 22, 22, 0.85);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all 0.5s ease;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  border-bottom-color: var(--sds-gray-06);
}
.navbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-logo {
  color: var(--sds-gray-12);
  font-family: var(--sds-ff-heading);
  font-weight: var(--sds-fw-bold);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}
.navbar-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
.navbar-link {
  font-size: 0.875rem;
  font-weight: var(--sds-fw-medium);
  color: var(--sds-gray-11);
  transition: color var(--sds-transition);
}
.navbar-link:hover { color: var(--sds-gray-12); }
.navbar-right {
  display: none;
  align-items: center;
  gap: 1rem;
}
.lang-toggle {
  font-size: 0.875rem;
  color: var(--sds-gray-09);
  transition: color var(--sds-transition);
}
.lang-toggle:hover { color: var(--sds-gray-12); }

/* Mobile hamburger */
.navbar-hamburger {
  display: flex;
  color: var(--sds-gray-12);
  background: none;
  border: none;
  cursor: pointer;
}
.navbar-hamburger svg { width: 24px; height: 24px; }

/* Mobile menu */
.mobile-menu {
  display: none;
  padding: 0.5rem var(--px) 1.5rem;
}
.mobile-menu.open { display: block; }
.mobile-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  color: var(--sds-gray-11);
  padding: 0.5rem 0;
  transition: color var(--sds-transition);
}
.mobile-menu-link:hover { color: var(--sds-gray-12); }
.mobile-menu-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
}

@media (min-width: 768px) {
  .navbar-links { display: flex; }
  .navbar-right { display: flex; }
  .navbar-hamburger { display: none; }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: 25%; left: 25%;
  width: 24rem; height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 218, 36, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: gold-drift 8s ease-in-out infinite;
  z-index: 2;
}
.hero-content {
  position: relative;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--px);
  z-index: 3;
}
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--sds-gray-12);
}
.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 2.5rem;
  max-width: 42rem;
  margin-left: auto; margin-right: auto;
  color: var(--sds-gray-09);
  white-space: pre-line;
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust-bar {
  padding: 4rem 0;
  position: relative;
  z-index: 3;
}
.trust-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  color: var(--sds-gray-09);
}
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.trust-logo-stellar { height: 2rem; width: auto; color: var(--sds-gray-09); }
.trust-logo-soroban {
  font-family: var(--sds-ff-heading);
  font-size: 1.5rem;
  font-weight: var(--sds-fw-semi-bold);
  color: var(--sds-gray-09);
  letter-spacing: -0.02em;
  padding-left: 2.5rem;
  border-left: 1px solid var(--sds-gray-04);
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how-it-works { padding: var(--section-py) 0; position: relative; z-index: 3; }
.how-it-works h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; }
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; }
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: 0.75rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  margin-bottom: 1.5rem;
}
.step-icon svg { width: 28px; height: 28px; color: var(--sds-gray-09); }
.step-num {
  color: var(--sds-gold-09);
  font-size: 0.875rem;
  font-weight: var(--sds-fw-semi-bold);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.step p { color: var(--sds-gray-09); line-height: 1.75rem; }

/* ==========================================================================
   FOR USERS — Dark
   ========================================================================== */
.for-users { padding: var(--section-py) 0; position: relative; overflow: hidden; }
.for-users h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; color: var(--sds-gray-12); }
.user-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .user-grid { grid-template-columns: repeat(2, 1fr); } }
.user-card {
  border-radius: 0.75rem;
  padding: 2rem;
}
.user-card svg { color: var(--sds-gray-09); margin-bottom: 1rem; width: 24px; height: 24px; }
.user-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--sds-gray-12); }
.user-card p { color: var(--sds-gray-11); line-height: 1.75rem; }




/* ==========================================================================
   FOR COMPANIES — Light
   ========================================================================== */
.for-companies { padding: var(--section-py) 0; position: relative; z-index: 3; }
.for-companies h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; }
.company-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .company-grid { grid-template-columns: repeat(3, 1fr); } }
.company-card {
  border-radius: 0.75rem;
  padding: 2rem;
}
.company-card svg { color: var(--sds-gray-09); margin-bottom: 1rem; width: 24px; height: 24px; }
.company-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.company-card p { color: var(--sds-gray-09); line-height: 1.75rem; }

/* ==========================================================================
   FOR INVESTORS — Dark
   ========================================================================== */
.for-investors { padding: var(--section-py) 0; overflow: hidden; position: relative; }
.for-investors h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; color: var(--sds-gray-12); }
.investor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .investor-grid { grid-template-columns: repeat(2, 1fr); } }
.investor-card {
  border-radius: 0.75rem;
  padding: 2rem;
}
.investor-card svg { color: var(--sds-gray-09); margin-bottom: 1rem; width: 24px; height: 24px; }
.investor-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--sds-gray-12); }
.investor-card p { color: var(--sds-gray-11); line-height: 1.75rem; }

/* ==========================================================================
   USE CASES — Dark
   ========================================================================== */
.use-cases { padding: var(--section-py) 0; overflow: hidden; position: relative; }
.use-cases h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; color: var(--sds-gray-12); }
.use-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) { .use-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .use-grid { grid-template-columns: repeat(4, 1fr); } }
.use-card {
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.use-card svg { color: var(--sds-gray-09); margin-bottom: 0.75rem; width: 20px; height: 20px; }
.use-card h3 { font-size: clamp(0.875rem, 1.2vw, 1rem); margin-bottom: 0.375rem; color: var(--sds-gray-12); }
.use-card p { color: var(--sds-gray-09); font-size: clamp(0.75rem, 1vw, 0.875rem); line-height: 1.6; }

/* ==========================================================================
   SECURITY — Light
   ========================================================================== */
.security-section { padding: var(--section-py) 0; position: relative; z-index: 3; }
.security-section h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 4rem; }
.security-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
.security-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
}
.security-icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: 0.5rem;
  background: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.security-icon svg { width: 22px; height: 22px; color: var(--sds-gray-09); }
.security-card h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.security-card p { color: var(--sds-gray-09); font-size: 0.875rem; line-height: 1.75rem; }

/* ==========================================================================
   WAITLIST FORM — Dark
   ========================================================================== */
.waitlist { padding: var(--section-py) 0; }
.waitlist-inner { max-width: 32rem; margin: 0 auto; padding: 0 var(--px); text-align: center; }
.waitlist h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: 1rem; color: var(--sds-gray-12); }
.waitlist .sub { color: var(--sds-gray-09); margin-bottom: 2.5rem; }
.waitlist form { text-align: left; }
.waitlist label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
  color: var(--sds-gray-11);
}
.waitlist input,
.waitlist select {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--sds-gray-02);
  border: 1px solid var(--sds-gray-06);
  color: var(--sds-gray-12);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--sds-transition);
  margin-bottom: 1rem;
}
.waitlist input::placeholder { color: var(--sds-gray-08); }
.waitlist select option { background: var(--sds-gray-01); color: var(--sds-gray-12); }
.waitlist input:focus,
.waitlist select:focus { border-color: var(--sds-gold-09); box-shadow: 0 0 0 4px var(--accent-glow); }
.waitlist .btn-gold { width: 100%; margin-top: 0.5rem; }
.waitlist .success {
  border-radius: 0.75rem;
  padding: 2rem;
  color: var(--sds-gold-11);
  font-size: 1.125rem;
  font-weight: var(--sds-fw-medium);
}
/* Honeypot */
.hp { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding: 5rem 0 2rem; position: relative; z-index: 2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand-name {
  color: var(--sds-gray-12);
  font-family: var(--sds-ff-heading);
  font-weight: var(--sds-fw-bold);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}
.footer-brand-tagline { font-size: 0.875rem; line-height: 1.75rem; color: var(--sds-gray-09); }
.footer-copyright { font-size: 0.75rem; margin-top: 1rem; color: var(--sds-gray-07); }
.footer h4 { font-size: 0.875rem; font-weight: var(--sds-fw-semi-bold); margin-bottom: 1rem; color: var(--sds-gray-12); }
.footer-link {
  display: block;
  font-size: 0.875rem;
  color: var(--sds-gray-09);
  transition: color var(--sds-transition);
  padding: 0.25rem 0;
}
.footer-link:hover { color: var(--sds-gray-12); }
.footer-divider {
  border: none;
  border-top: 1px solid var(--sds-gray-03);
  margin: 0;
}
.footer-disclaimer {
  padding-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.75rem;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  color: var(--sds-gray-07);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gold-drift {
  0%, 100% { opacity: 0.3; transform: translateY(0) translateX(0); }
  33% { opacity: 0.5; transform: translateY(-20px) translateX(10px); }
  66% { opacity: 0.2; transform: translateY(10px) translateX(-15px); }
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ==========================================================================
   CANVAS (particle background)
   ========================================================================== */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Main content must sit above canvas */
main, .footer { position: relative; z-index: 2; }

/* ==========================================================================
   LANGUAGE TOGGLE — Hidden text
   ========================================================================== */
[data-lang-en] { display: inline; }
[data-lang-pt] { display: none; }
html[lang="pt"] [data-lang-en] { display: none; }
html[lang="pt"] [data-lang-pt] { display: inline; }

/* ==========================================================================
   ACCESSIBILITY — SDS Standards
   ========================================================================== */

/* Focus-visible for keyboard-only focus rings */
.btn-primary:focus-visible,
.btn-gold:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.btn-primary:focus:not(:focus-visible),
.btn-gold:focus:not(:focus-visible) {
  box-shadow: none;
}

.btn-secondary:focus-visible,
.btn-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--sds-gray-05);
}
.btn-secondary:focus:not(:focus-visible),
.btn-outline:focus:not(:focus-visible) {
  box-shadow: none;
}

.navbar-link:focus-visible {
  outline: 2px solid var(--sds-gold-09);
  outline-offset: 4px;
  border-radius: 2px;
}
.navbar-link:focus:not(:focus-visible) { outline: none; }

.footer-link:focus-visible {
  outline: 2px solid var(--sds-gold-09);
  outline-offset: 2px;
  border-radius: 2px;
}
.footer-link:focus:not(:focus-visible) { outline: none; }

.waitlist input:focus-visible,
.waitlist select:focus-visible {
  border-color: var(--sds-gold-09);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.waitlist input:focus:not(:focus-visible),
.waitlist select:focus:not(:focus-visible) {
  border-color: var(--sds-gray-06);
  box-shadow: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-glow {
    animation: none;
    opacity: 0.3;
  }
}