:root {
  --primary: #00E5FF;
  --primary-dark: #00B8D4;
  --secondary: #7C4DFF;
  --dark: #0A0E17;
  --darker: #05080F;
  --light: #F8FDFF;
  --gray: #7A8599;
  --accent: #FF4081;

  /* Reading-length prose. --gray is fine for labels, placeholders and
     de-emphasised chrome, but at 5.2:1 on the card background it is too dim
     for paragraphs people actually have to read. This sits at 11.9:1 and
     still reads as a clear step below the white headings. */
  --text-body: #C2CBD9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background: var(--dark);
  color: var(--light);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Links in body copy — accessibility baseline.

   Two problems this fixes:

   1. Nothing styled unclassed links, so they fell through to the browser
      defaults: #0000EE unvisited and #551A8B once visited. Against the --dark
      page background those measure 2.05:1 and 1.75:1 — unreadable for anyone.
      Visited links deliberately keep the same treatment rather than dropping
      back to that purple.

   2. Colour on its own cannot mark a link here. --primary cyan is only 1.5:1
      against the --light body text around it, so a reader with any colour
      vision deficiency has no way to tell link from prose. The underline is
      therefore the cue that carries the meaning and is always on; the colour
      is decoration. Hover and focus change weight and outline, not just hue,
      for the same reason.
   --------------------------------------------------------------------------- */
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

/* Button-shaped anchors own their colour in every state. Without the
   exclusion below, :visited and :hover (0,1,1) outrank the .button rule
   that sets the label colour (0,1,0), so a visited primary CTA was painted
   --primary on a --primary background — 1:1, the label simply vanished —
   and 1.5:1 on hover. Prose links are unaffected. */
a:visited:not(:is(.button, .btn, .btn-primary, .btn-secondary, .primary,
                  .primary-button, .secondary, .emergency-button,
                  .emergency-btn, .help-button, .logout, .coming-soon-link)) {
  color: var(--primary);
}

a:hover:not(:is(.button, .btn, .btn-primary, .btn-secondary, .primary,
                .primary-button, .secondary, .emergency-button,
                .emergency-btn, .help-button, .logout, .coming-soon-link)) {
  color: var(--light);
  text-decoration-thickness: 3px;
}

a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anchors shaped as buttons, nav items or cards are already identifiable by
   their shape and position, so they opt out of the underline. Most set
   text-decoration themselves; these are the ones that never did. */
a.button,
a.btn,
a.btn-primary,
a.btn-secondary,
a.primary,
a.primary-button,
a.secondary,
a.emergency-button,
a.emergency-btn,
a.help-button,
a.logout,
a.coming-soon-link {
  text-decoration: none;
}

/* Background mesh gradient effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(124, 77, 255, 0.1) 0%, transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(0, 229, 255, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(124, 77, 255, 0.03) 0%, transparent 50%);
  z-index: -1;
}

/* Header styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2.5rem;
  background-color: rgba(5, 8, 15, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 229, 255, 0.25);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  color: var(--primary);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 4px;
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.3; transform: scale(0.8); }
}

nav {
  display: none;
  flex-direction: column;
  background-color: rgba(10, 14, 23, 0.95);
  backdrop-filter: blur(15px);
  position: absolute;
  top: 75px;
  right: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
              0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: translateY(-10px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

nav.active {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

nav a {
  padding: 1.2rem 2rem;
  color: var(--light);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

nav a:hover {
  background-color: rgba(0, 229, 255, 0.25);
  color: var(--primary);
}

nav a:last-child {
  border-bottom: none;
}

/* Steering-wheel menu toggle. Markup is unchanged (three plain spans):
   ::before draws the rim, the spans are the horizontal spoke, the lower
   spoke and the hub. Spans are centred with negative margins so that the
   transform property stays free for the open-state rotation. */
.menu-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 20;
  transition: transform 0.3s ease;
}

.menu-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 4px solid var(--light);
  border-radius: 50%;
}

.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: var(--light);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease,
              width 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

/* Horizontal spoke */
.menu-toggle span:nth-child(1) {
  width: 22px;
  height: 2px;
  margin: -1px 0 0 -11px;
}

/* Lower spoke */
.menu-toggle span:nth-child(2) {
  width: 2px;
  height: 11px;
  margin: 0 0 0 -1px;
}

/* Hub */
.menu-toggle span:nth-child(3) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: -4px 0 0 -4px;
}

.menu-toggle:hover {
  transform: rotate(25deg);
}

/* Open state: the spokes fold into an X inside the rim, the hub fades out */
.menu-toggle.active,
.menu-toggle.active:hover {
  transform: none;
}

.menu-toggle.active span:nth-child(1) {
  width: 18px;
  margin: -1px 0 0 -9px;
  transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  transform: rotate(-45deg);
}

.menu-toggle.active span:nth-child(3) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .menu-toggle span {
    transition: none;
  }

  .menu-toggle:hover {
    transform: none;
  }
}

/* Main content styles */
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.page-content {
  padding: 4rem 0;
  max-width: 1000px;
  margin: 0 auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  display: inline-block;
  width: 100%;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
}

.hero-card {
  background: rgba(10, 14, 23, 0.6);
  border-radius: 16px;
  padding: 3rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
}

.hero-card h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.lead {
  font-size: 1.2rem;
  color: var(--gray);
  line-height: 1.7;
}

.content-section {
  margin: 3rem 0;
}

.content-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.content-section p {
  margin-bottom: 1.5rem;
  color: var(--gray);
  line-height: 1.7;
}

/* Button styles */
.button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--darker);
  padding: 1.1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3);
  margin: 1rem 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 229, 255, 0.4);
}

.button:hover::before {
  left: 100%;
}

.secondary-button {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.25);
}

.secondary-button:hover {
  background: rgba(0, 229, 255, 0.25);
}

/* Card styles */
.card {
  background: rgba(10, 14, 23, 0.6);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 229, 255, 0.25);
}

/* Grid layouts */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: rgba(10, 14, 23, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--gray);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.team-member {
  text-align: center;
  padding: 2rem;
  background: rgba(10, 14, 23, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.member-photo {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.team-member h3 {
  color: var(--light);
  margin-bottom: 0.5rem;
}

.member-title {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
}

.member-bio {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

.credentials-grid, .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.credential-item, .value-item {
  padding: 2rem;
  background: rgba(10, 14, 23, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}

.credential-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.credential-item h3, .value-item h3 {
  color: var(--light);
  margin-bottom: 1rem;
}

.credential-item p, .value-item p {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

.company-info {
  margin: 3rem 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(10, 14, 23, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.info-item {
  color: var(--gray);
}

.info-item strong {
  color: var(--light);
}

.cta-section {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(10, 14, 23, 0.6);
  border-radius: 16px;
  margin: 4rem 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-section h2 {
  color: var(--primary);
  margin-bottom: 1rem;
}

/* FAQ specific styles */
.search-box {
  margin-bottom: 2rem;
}

.search-box input {
  width: 100%;
  padding: 1rem;
  background: rgba(10, 14, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--light);
  font-size: 1rem;
}

.search-box input::placeholder {
  color: var(--gray);
}

.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: center;
}

.category-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(10, 14, 23, 0.6);
  color: var(--gray);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-btn.active,
.category-btn:hover {
  background: var(--primary);
  color: var(--darker);
  border-color: var(--primary);
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(10, 14, 23, 0.6);
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.faq-question {
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: rgba(0, 229, 255, 0.15);
}

.faq-question h3 {
  color: var(--light);
  font-size: 1.1rem;
  font-weight: 600;
}

.faq-toggle {
  font-size: 1.5rem;
  color: var(--primary);
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

.faq-answer {
  display: none;
  padding: 0 2rem 2rem 2rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* Platform sub-headings inside a long answer (e.g. the home-screen steps),
   given air above so they read as headings rather than another sentence. */
.faq-subhead {
  margin-top: 1.4rem;
  color: var(--light);
}

.faq-answer ul, .faq-answer ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.faq-answer li {
  margin-bottom: 0.5rem;
}

.still-have-questions {
  text-align: center;
  padding: 4rem 2rem;
  margin-top: 4rem;
}

.still-have-questions h2 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.contact-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Footer styles */
footer {
  background-color: var(--darker);
  padding: 3rem 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 4rem;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  gap: 1.5rem;
}

.footer-nav a {
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--primary);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .main-container {
    padding: 0 1rem;
  }
  
  .page-content {
    padding: 2rem 0;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .hero-card {
    padding: 2rem;
  }
  
  .hero-card h2 {
    font-size: 1.5rem;
  }
  
  .lead {
    font-size: 1.1rem;
  }
  
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .credentials-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .faq-categories {
    justify-content: flex-start;
  }
  
  .category-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  
  .contact-options {
    flex-direction: column;
    align-items: center;
  }
}