/*
 * VisionMed EMMA web app - futuristic theme
 *
 * This stylesheet defines a modern, high-tech look inspired by leading AI medical platforms.
 * It uses dark backgrounds, neon green accents, smooth transitions, and responsive layouts.
 */

/* CSS variables for easy theming */
:root {
 --color-primary: #2aff80; /* neon green accent */
 --color-primary-dark: #1eaa5b;
 --color-secondary: #011511; /* dark teal for overlays */
 --color-bg: #010b0a; /* deepest background */
 --color-card-bg: rgba(1, 20, 15, 0.8);
 --color-text: #e8ffe8;
 --color-muted: #96d8b2;
 --font-heading: 'Orbitron', sans-serif;
 --font-body: 'Montserrat', sans-serif;
}

/* Reset margins and paddings */
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 background-color: var(--color-bg);
 color: var(--color-text);
 font-family: var(--font-body);
 line-height: 1.6;
 overflow-x: hidden;
}

html {
 scroll-behavior: smooth;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
 * {
 scroll-behavior: auto !important;
 animation-duration: 0.001ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.001ms !important;
 }
}

/* Navigation bar */
.navbar {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10;
 backdrop-filter: blur(6px);
 background-color: rgba(1, 11, 10, 0.7);
 border-bottom: 1px solid rgba(42, 255, 128, 0.15);
}

.nav-container {
 max-width: 1200px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem 2rem;
  position: relative;
}

.nav-logo {
 height: 48px;
 width: auto;
}

/* Futuristic text logo for VisionMed in the nav */
.nav-text-logo {
 font-family: var(--font-heading);
 font-size: 1.6rem;
 color: var(--color-primary);
 text-decoration: none;
 letter-spacing: 1px;
}
.nav-text-logo sup {
 font-size: 0.6rem;
 vertical-align: super;
}

.nav-right {
 display: flex;
 align-items: center;
 gap: 1.5rem;
}

.nav-link {
 color: var(--color-muted);
 font-size: 0.9rem;
 text-decoration: none;
 transition: color 0.3s ease;
}

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

.nav-button {
 padding: 0.5rem 1rem;
 border-radius: 4px;
 border: 1px solid var(--color-primary);
 color: var(--color-primary);
 text-decoration: none;
 transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-button:hover {
 background-color: var(--color-primary);
 color: #001b0e;
}

/* Video page styling */
.video-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Wrapper for responsive iframes (16:9 aspect ratio) */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 8px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Password access form styling */
/* Futuristic style for the video library passkey input */
.password-input {
  /* Use a semi‑transparent card background to evoke a high‑tech feel */
  background-color: rgba(1, 20, 15, 0.8);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
  font-size: 1rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Center the passkey entry form and increase spacing for a cleaner look */
.access-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.error {
  color: #ff5c5c;
  margin-top: 0.5rem;
}

/* Responsive navigation toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 20px;
  cursor: pointer;
  z-index: 20;
}

.nav-toggle span {
  background-color: var(--color-primary);
  height: 2px;
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 1px;
}

/* Transform hamburger into X when active */
.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Hide nav-right and show toggle on small screens */
@media (max-width: 768px) {
  .nav-right {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(1, 20, 15, 0.95);
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 1rem;
    width: 200px;
    border-radius: 0 0 0 8px;
  }
  .nav-right.active {
    display: flex;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-container {
    padding: 1rem;
  }
}

/* Hero Section */
.hero {
 position: relative;
 height: 90vh;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
    /* Remove static background image; dynamic globe will be rendered with Vanta.js. */
    background: var(--color-bg);
    overflow: hidden;
    /* Fallback animation for non‑WebGL environments.
       Note: intentionally omit any background image so the swirling graphic
       doesn't flash before the Vanta.js animation loads. */
    animation: moveBackground 60s linear infinite;
    /* Explicitly set no background image to prevent flicker before the globe loads */
    background-image: none;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: radial-gradient(circle at center, rgba(0, 32, 16, 0.4), rgba(0, 10, 8, 0.8));
 z-index: 1;
}

.hero-content {
 position: relative;
 z-index: 2;
 max-width: 700px;
 padding: 2rem;
 animation: fadeInUp 1s ease forwards;
 opacity: 0;
 transform: translateY(40px);
 animation-delay: 0.3s;
}

/* Globe background container for Vanta.js */
#globe-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 overflow: hidden;
}

@keyframes fadeInUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* Hero logo modifications */
.hero-main-logo {
 /* Increase size for central hero logo */
 height: 200px;
 width: auto;
 margin-bottom: 1.5rem;
 animation: fadeInDown 1s ease forwards;
 opacity: 0;
 transform: translateY(-20px);
}

.hero-secondary-logo {
 height: 60px;
 width: auto;
 margin: 1rem auto 1.5rem auto;
 animation: fadeInUp 1.2s ease forwards;
 opacity: 0;
 transform: translateY(20px);
}

.hero-title {
 font-family: var(--font-heading);
 font-size: 2.4rem;
 font-weight: 700;
 color: var(--color-primary);
 margin-bottom: 0.5rem;
 letter-spacing: 1px;
 animation: fadeInUp 0.8s ease forwards;
 opacity: 0;
 transform: translateY(20px);
}

.hero-tagline {
 font-size: 1.2rem;
 color: var(--color-muted);
 margin-bottom: 1rem;
 animation: fadeInUp 1s ease forwards;
 opacity: 0;
 transform: translateY(20px);
}

.hero-buttons {
 display: flex;
 justify-content: center;
 gap: 1rem;
 flex-wrap: wrap;
}

/* Buttons */
.btn {
 display: inline-block;
 padding: 0.75rem 1.75rem;
 font-size: 0.9rem;
 font-weight: 500;
 border-radius: 4px;
 text-decoration: none;
 transition: background-color 0.3s ease, color 0.3s ease;
 cursor: pointer;
}

.btn-primary {
 background-color: var(--color-primary);
 color: #001b0e;
 border: 1px solid var(--color-primary);
}

.btn-primary:hover {
 background-color: #1ebd63;
 border-color: #1ebd63;
}

.btn-secondary {
 background-color: transparent;
 color: var(--color-primary);
 border: 1px solid var(--color-primary);
}

.btn-secondary:hover {
 background-color: var(--color-primary);
 color: #001b0e;
}
/* Enhance button animations */
.btn {
 position: relative;
 overflow: hidden;
}

.btn::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.1);
 transform: skewX(-20deg);
 transition: left 0.5s ease;
}

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

.btn:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 8px 20px rgba(0, 64, 32, 0.6);
}

/* Section Headers */
.section-header {
 text-align: center;
 margin-bottom: 2rem;
}

.section-header h2 {
 font-family: var(--font-heading);
 font-size: 2rem;
 color: var(--color-primary);
}

/* Logo used in section headers (e.g., EMMA logo in features section) */
.section-logo {
 /* Larger EMMA logo on the home page section header */
 /* Increase the EMMA logo size on the home page section header */
 height: 160px;
 width: auto;
 margin: 0 auto;
 display: block;
 filter: drop-shadow(0 0 6px rgba(42, 255, 128, 0.4));
}

/* Timeline list alignment (keeps bullets readable on left-aligned and right-aligned items) */
.timeline-item .custom-list {
 margin-top: 0.8rem;
}

.timeline-item.left .custom-list {
 text-align: left;
 display: inline-block;
}

.section-subtitle {
 color: var(--color-muted);
 font-size: 1rem;
 margin-top: 0.5rem;
}

/* Features grid */
.features {
 padding: 4rem 2rem;
 background: linear-gradient(180deg, #00180f 0%, #010b0a 100%);
}

.feature-grid {
 display: grid;
 /* Constrain EMMA feature cards to two per row on larger screens */
 grid-template-columns: repeat(2, 1fr);
 gap: 2rem;
 max-width: 1100px;
 margin: 0 auto;
}

/* Collapse to a single column on narrow viewports */
@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.15);
 border-radius: 8px;
 padding: 2rem;
 transition: transform 0.5s ease, box-shadow 0.5s ease;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 opacity: 0;
 transform: translateY(40px);
 /* Center the content of feature cards */
 text-align: center;
}

.feature-card h3 {
 font-family: var(--font-heading);
 font-size: 1.3rem;
 color: var(--color-primary);
 margin-bottom: 0.5rem;
}

.feature-card p {
 color: var(--color-muted);
 font-size: 0.9rem;
 line-height: 1.5;
}

.feature-card.in-view {
 opacity: 1;
 transform: translateY(0);
 box-shadow: 0 6px 16px rgba(0, 64, 32, 0.8);
}

.feature-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 20px rgba(0, 64, 32, 0.9);
}

/* Capability cards */
.capabilities {
 padding: 4rem 2rem;
 background: linear-gradient(180deg, #00190f 0%, #00130c 100%);
}

.capabilities-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 2rem;
 max-width: 1000px;
 margin: 0 auto;
}

.capability-card {
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.15);
 border-radius: 8px;
 padding: 2rem;
 transition: transform 0.5s ease, box-shadow 0.5s ease;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 opacity: 0;
 transform: translateY(40px);
 text-align: center;
}

.capability-card h3 {
 font-family: var(--font-heading);
 font-size: 1.4rem;
 color: var(--color-primary);
 margin-bottom: 0.5rem;
 line-height: 1.2;
}

/* Fields of use cards (EMMA page) */
.fields-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
 margin-top: 1.5rem;
}

.field-card {
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.15);
 border-radius: 8px;
 padding: 1.2rem 1.25rem;
 text-align: center;
 color: var(--color-muted);
 line-height: 1.4;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
 transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.field-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(0, 64, 32, 0.75);
}

@media (max-width: 1024px) {
 .fields-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 640px) {
 .fields-grid {
 grid-template-columns: 1fr;
 }
}

.capability-card p {
 color: var(--color-muted);
 font-size: 0.95rem;
 line-height: 1.5;
}

.capability-card.in-view {
 opacity: 1;
 transform: translateY(0);
 box-shadow: 0 6px 16px rgba(0, 64, 32, 0.8);
}

.capability-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 20px rgba(0, 64, 32, 0.9);
}

.section-note {
 text-align: center;
 color: var(--color-muted);
 margin-top: 1rem;
 font-size: 0.9rem;
}

/* When the note appears above the capability cards, add extra spacing */
.capabilities-note {
 max-width: 800px;
 margin: 1rem auto 2rem auto;
}

/* Additional sections */
.use-cases, .integration, .multimodal, .headset, .patent, .safety, .why {
 padding: 4rem 2rem;
 background: linear-gradient(180deg, #00130c 0%, #00180f 100%);
}

/* Alternating background for readability */
.integration {
 background: linear-gradient(180deg, #00180f 0%, #00130c 100%);
}

.headset {
 background: linear-gradient(180deg, #00190f 0%, #00130c 100%);
}

.patent {
 background: linear-gradient(180deg, #00130c 0%, #00180f 100%);
}

.safety {
 background: linear-gradient(180deg, #00180f 0%, #00130c 100%);
}

.why {
 background: linear-gradient(180deg, #00190f 0%, #00130c 100%);
}

.section-content {
 max-width: 900px;
 margin: 0 auto;
 color: var(--color-muted);
 font-size: 0.95rem;
 line-height: 1.6;
 opacity: 0;
 transform: translateY(40px);
 transition: transform 0.5s ease, opacity 0.5s ease;
}

.section-content.in-view {
 opacity: 1;
 transform: translateY(0);
}

.custom-list {
 list-style: none;
 padding-left: 0;
 margin-top: 1rem;
}

.custom-list li {
 margin-bottom: 0.6rem;
 padding-left: 1.2rem;
 position: relative;
 line-height: 1.5;
}

.custom-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0.5rem;
 width: 0.5rem;
 height: 0.5rem;
 background: var(--color-primary);
 border-radius: 50%;
}

/* Timeline styles for EMMA page */
.timeline {
 position: relative;
 max-width: 900px;
 margin: 0 auto;
 padding: 4rem 2rem;
}

.timeline::before {
 content: '';
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 2px;
 background-color: rgba(42, 255, 128, 0.5);
}

.timeline-item {
 position: relative;
 width: 50%;
 padding: 1rem 2rem;
 box-sizing: border-box;
 opacity: 0;
 transform: translateY(40px);
 transition: transform 0.5s ease, opacity 0.5s ease;
}

.timeline-item.in-view {
 opacity: 1;
 transform: translateY(0);
 box-shadow: 0 6px 16px rgba(0, 64, 32, 0.8);
}

.timeline-item.left {
 left: 0;
 text-align: right;
}

.timeline-item.right {
 left: 50%;
 text-align: left;
}

.timeline-item::before {
 content: '';
 position: absolute;
 top: 10px;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background-color: var(--color-primary);
 border: 2px solid var(--color-primary-dark);
 z-index: 1;
}

.timeline-item.left::before {
 right: -7px;
}

.timeline-item.right::before {
 left: -7px;
}

.timeline-item h3 {
 font-family: var(--font-heading);
 font-size: 1.4rem;
 color: var(--color-primary);
 margin-bottom: 0.3rem;
}

.timeline-item p {
 color: var(--color-muted);
 font-size: 0.9rem;
 line-height: 1.5;
}

.timeline-footnote {
 text-align: center;
 font-size: 0.8rem;
 color: var(--color-muted);
 margin-top: 1rem;
 /* Added extra spacing after the footnote for better separation */
 margin-bottom: 2rem;
}

@media (max-width: 768px) {
 .timeline::before {
 left: 16px;
 }
 .timeline-item {
 width: 100%;
 padding-left: 2.5rem;
 text-align: left;
 }
 .timeline-item.left,
 .timeline-item.right {
 left: 0;
 }
 .timeline-item.left::before,
 .timeline-item.right::before {
 left: 0;
 }
}

/* -----------------------------
 Modern reveal + micro-interactions
------------------------------ */

.reveal {
 opacity: 0;
 transform: translateY(18px) scale(0.985);
 filter: blur(6px);
 transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
 will-change: opacity, transform, filter;
}

.reveal.in-view {
 opacity: 1;
 transform: translateY(0) scale(1);
 filter: blur(0);
}

/* Shared card grid (home: Safety section) */
.info-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 1.25rem;
 margin-top: 1.25rem;
}

/* For the Designed for Safety, Validation & Scale section on the home page, force two cards per row on larger screens */
.safety .info-grid {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .safety .info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card {
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.18);
 border-radius: 12px;
 padding: 1.35rem 1.35rem;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
 position: relative;
 overflow: hidden;
 transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1), border-color 350ms ease;
    /* Center the content of info cards */
    text-align: center;
}

.info-card::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(600px circle at 20% 10%, rgba(42, 255, 128, 0.10), transparent 40%);
 opacity: 0;
 transition: opacity 450ms ease;
}

.info-card:hover {
 transform: translateY(-6px);
 border-color: rgba(42, 255, 128, 0.35);
 box-shadow: 0 18px 44px rgba(0, 64, 32, 0.55);
}

.info-card:hover::before {
 opacity: 1;
}

.info-card h3 {
 font-family: var(--font-heading);
 color: var(--color-primary);
 font-size: 1.05rem;
 margin-bottom: 0.35rem;
}

.info-card p {
 color: var(--color-muted);
 font-size: 0.9rem;
 line-height: 1.55;
}

/* Center the icon within info cards by default */
.info-card .icon-badge {
    display: block;
    margin: 0 auto 0.6rem auto;
}

/* Why VisionMed formatting */
.why-grid {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: 1.25rem;
 align-items: stretch;
}

.why-hero-card {
 border-radius: 14px;
 padding: 1.8rem 1.7rem;
 background: linear-gradient(180deg, rgba(1, 20, 15, 0.88), rgba(1, 12, 10, 0.92));
 border: 1px solid rgba(42, 255, 128, 0.22);
 box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
 position: relative;
 overflow: hidden;
  /* Center the content inside the hero card */
  text-align: center;
}

.why-hero-card::after {
 content: '';
 position: absolute;
 inset: -2px;
 background: conic-gradient(from 180deg, rgba(42, 255, 128, 0.18), transparent 20%, rgba(42, 255, 128, 0.12), transparent 60%, rgba(42, 255, 128, 0.18));
 filter: blur(18px);
 opacity: 0.5;
 pointer-events: none;
}

.why-kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.35rem 0.65rem;
 border-radius: 999px;
 border: 1px solid rgba(42, 255, 128, 0.22);
 color: var(--color-primary);
 font-size: 0.78rem;
 letter-spacing: 0.8px;
 text-transform: uppercase;
 position: relative;
 z-index: 1;
}

.why-headline {
 font-family: var(--font-heading);
 font-size: 1.55rem;
 margin-top: 0.8rem;
 color: var(--color-text);
 position: relative;
 z-index: 1;
}

.why-subtext {
 margin-top: 0.6rem;
 color: var(--color-muted);
 position: relative;
 z-index: 1;
}

.why-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-top: 1rem;
 position: relative;
 z-index: 1;
}

.pill {
 padding: 0.35rem 0.6rem;
 border-radius: 999px;
 background: rgba(42, 255, 128, 0.08);
 border: 1px solid rgba(42, 255, 128, 0.18);
 color: var(--color-primary);
 font-size: 0.82rem;
}

.why-cards {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1rem;
}

.why-card {
 border-radius: 12px;
 padding: 1.2rem 1.2rem;
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.16);
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
 transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1), border-color 350ms ease;
 /* Center the content of why cards */
 text-align: center;
}

.why-card:hover {
 transform: translateY(-5px);
 border-color: rgba(42, 255, 128, 0.35);
 box-shadow: 0 18px 44px rgba(0, 64, 32, 0.55);
}

.why-card h4 {
 font-family: var(--font-heading);
 color: var(--color-primary);
 margin-bottom: 0.3rem;
 font-size: 1.05rem;
}

.why-card p {
 color: var(--color-muted);
 font-size: 0.9rem;
 line-height: 1.55;
}

@media (max-width: 900px) {
 .why-grid {
 grid-template-columns: 1fr;
 }
}

.footnote {
 text-align: center;
 font-size: 0.8rem;
 color: var(--color-muted);
 margin-top: 1rem;
}

/* Animation keyframes */
@keyframes moveBackground {
 0% { background-position: 0 0; }
 100% { background-position: -800px 800px; }
}

@keyframes fadeInDown {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes fadeInUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* Roadmap section */
.roadmap {
 padding: 4rem 2rem;
 background: linear-gradient(180deg, #010b0a 0%, #00180f 100%);
}

.roadmap-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 2rem;
 max-width: 900px;
 margin: 0 auto;
}

.roadmap-item {
 background-color: var(--color-card-bg);
 border: 1px solid rgba(42, 255, 128, 0.15);
 border-radius: 8px;
 padding: 1.5rem;
 text-align: center;
 opacity: 0;
 transform: translateY(40px);
 transition: transform 0.5s ease, opacity 0.5s ease;
}

.roadmap-item h3 {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 color: var(--color-primary);
 margin-bottom: 0.5rem;
}

.roadmap-item p {
 color: var(--color-muted);
 font-size: 0.9rem;
 line-height: 1.5;
}

.roadmap-item.in-view {
 opacity: 1;
 transform: translateY(0);
 box-shadow: 0 6px 16px rgba(0, 64, 32, 0.8);
}

/* Call to Action */
.cta {
 padding: 4rem 2rem;
 background: radial-gradient(circle at center, #00251a, #00180f 80%);
 text-align: center;
}

.cta h2 {
 font-family: var(--font-heading);
 font-size: 2rem;
 color: var(--color-primary);
 margin-bottom: 1rem;
}

.cta p {
 color: var(--color-muted);
 font-size: 1rem;
 max-width: 700px;
 margin: 0 auto 2rem auto;
}

/* Footer */
.footer {
 padding: 1.5rem 2rem;
 background-color: #000b08;
 text-align: center;
 border-top: 1px solid rgba(42, 255, 128, 0.2);
}

.footer p {
 color: var(--color-muted);
 font-size: 0.8rem;
}

/* Social links container below the copyright line */
.footer-social {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* LinkedIn button styling */
.linkedin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  transition: transform 0.6s ease;
}

.linkedin-button:hover {
  transform: rotate(360deg) scale(1.1);
}

.linkedin-button svg {
  width: 20px;
  height: 20px;
  fill: #001b0e;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
 .hero-title {
 font-size: 1.6rem;
 }
 .hero-logo {
 height: 80px;
 }
 .nav-right {
 gap: 1rem;
 }
 .nav-link {
 font-size: 0.8rem;
 }
 .btn {
 padding: 0.6rem 1.2rem;
 font-size: 0.8rem;
 }
}

/*
 * Custom layout and sizing tweaks for the integration (Seamless Integration & Deployment)
 * section. The default `.info-grid` definition creates a flexible grid
 * with many columns on wide screens, which caused the icons in this
 * section to appear oversized and the cards to stretch too wide. Here we
 * explicitly constrain the layout to two cards per row on larger
 * viewports and scale down the icon size for a cleaner, more modern
 * appearance.
 */

/* Two‑column layout on larger screens and a single column on smaller devices */
/* Two fixed columns for integration section on larger screens */
.integration .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}

/* Collapse to single column on smaller viewports */
@media (max-width: 768px) {
    .integration .info-grid {
        grid-template-columns: 1fr;
    }
}

/* Reduce the size of the icon badges and their SVGs */
.integration .info-card .icon-badge {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the icon within the integration cards */
    margin: 0 auto 0.6rem auto;
}
.integration .info-card .icon-badge svg {
    width: 100%;
    height: 100%;
}

/*
 * Multimodal section styling. Previously, the modality cards inherited
 * basic styles from other card components, which resulted in overly
 * large icons and a cramped layout. Define dedicated styles for the
 * multimodal grid and cards to produce a cleaner, evenly spaced
 * appearance. Icons are scaled down and centered above each card’s
 * heading.
 */
.multimodal .modality-grid {
    display: grid;
    /* Two modality cards per row on larger screens */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .multimodal .modality-grid {
        grid-template-columns: 1fr;
    }
}

.multimodal .modality-card {
    background-color: var(--color-card-bg);
    border: 1px solid rgba(42, 255, 128, 0.18);
    border-radius: 12px;
    padding: 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1), border-color 350ms ease;
}
.multimodal .modality-card:hover {
    transform: translateY(-5px);
    border-color: rgba(42, 255, 128, 0.35);
    box-shadow: 0 18px 44px rgba(0, 64, 32, 0.55);
}
.multimodal .modality-card h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.multimodal .modality-card p {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Icon sizing for the multimodal cards */
.multimodal .modality-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.8rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multimodal .modality-icon svg {
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------------------------
 * Custom styles for commitment and FAQ items
 * These classes provide unique formatting for individual sections on the
 * Safety (Our Commitment) and FAQ pages. Each block uses a subtly different
 * background color to avoid a monotonous look while preserving the dark,
 * high‑contrast aesthetic of the site. The headings inherit the primary
 * accent color for clear emphasis.
 * -------------------------------------------------------------------------- */
.commitment-item,
.faq-item {
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1.5rem 0;
  border: 1px solid rgba(42, 255, 128, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  background-color: var(--color-card-bg);
}

.commitment-item h3,
.faq-item h3 {
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: var(--color-primary);
}

/* Alternating background colors to differentiate each block */
.bg-alt1 {
  background-color: rgba(1, 20, 15, 0.85);
}
.bg-alt2 {
  background-color: rgba(1, 25, 18, 0.85);
}
.bg-alt3 {
  background-color: rgba(1, 30, 20, 0.85);
}
.bg-alt4 {
  background-color: rgba(1, 35, 22, 0.85);
}
.bg-alt5 {
  background-color: rgba(1, 40, 25, 0.85);
}

/* Generic section block styling for varied subsections.
 * Applies generous padding, margin, border and shadow so that content
 * breathes and doesn't butt up against adjacent sections. Combined with
 * bg-alt classes this creates dynamic variation across pages. */
.section-block {
  padding: 2rem 1.5rem;
  margin: 2rem 0;
  border-radius: 12px;
  border: 1px solid rgba(42, 255, 128, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  background-color: var(--color-card-bg);
}

/* Increase spacing and padding on commitment and FAQ items
 * so that they inherit the section-block feel even if the
 * section-block class isn't explicitly applied. */
.commitment-item,
.faq-item {
  padding: 2rem 1.5rem;
  margin: 2rem 0;
  border-radius: 12px;
  border: 1px solid rgba(42, 255, 128, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  background-color: var(--color-card-bg);
}

/* Adjust gap between team cards to give breathing room */
.team .info-grid {
  gap: 2rem;
  /* Add spacing below the team cards to separate them from the following section */
  margin-bottom: 2rem;
}

/* Constrain the width of standalone pages such as the Safety, FAQ and News pages.
   Without this container the content stretches edge to edge, which makes the
   commitment and FAQ sections look awkward on large screens. Limiting the width
   provides breathing room on the left and right while centring the content. */
.safety-page,
.faq,
.news-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Provide alternating colours for the safety section cards on the home page.
   Each card uses a slightly different shade of dark green to visually
   distinguish one from another without needing additional markup. */
.safety .info-card:nth-child(1) {
  background-color: rgba(1, 20, 15, 0.85);
}
.safety .info-card:nth-child(2) {
  background-color: rgba(1, 25, 18, 0.85);
}
.safety .info-card:nth-child(3) {
  background-color: rgba(1, 30, 20, 0.85);
}
.safety .info-card:nth-child(4) {
  background-color: rgba(1, 35, 22, 0.85);
}

/* Center the access form content on the video page */
#access-form .section-content {
  text-align: center;
}