/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --color-bg: #050505;
  --color-bg-alt: #111111;
  --color-text: #FFFFFF;
  --color-text-muted: #dcdada;
  --color-accent: #FFFFFF;
  --color-border: #333333;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Accessibility - Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Accessibility - Focus Visible for WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Accessibility - Reduced Motion for WCAG 2.3.3 */
@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;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-text: #FFFFFF;
    --color-bg: #000000;
    --color-border: #FFFFFF;
  }
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.7;
}

ul {
  list-style: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utilities */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

/* Navigation */
.nav-toggle {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 100;
  cursor: pointer;
  mix-blend-mode: difference;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: currentColor;
  transition: var(--transition-fast);
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-bg);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.main-nav.active {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 768px) {
  .main-nav {
    width: 80%;
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: none;
    transition: transform var(--transition-smooth);
  }

  .main-nav.active {
    transform: translateX(0);
    pointer-events: all;
  }
}

.nav-list {
  text-align: center;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 4rem;
  margin: var(--spacing-sm) 0;
  display: block;
  color: var(--color-text-muted);
  transition: color var(--transition-smooth), transform var(--transition-smooth);
}

.nav-link:hover {
  color: var(--color-text);
  transform: scale(1.05);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.animate-in {
  opacity: 0;
  animation: fadeIn 0.8s forwards;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

/* FABAL Specific Sections */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-md);
  position: relative;
  gap: var(--spacing-lg);
}
.hero-business {
  min-height: 70vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-md);
  position: relative;
  gap: var(--spacing-lg);
}

.hero .text-content {
  flex: 1;
  min-width: 0;
  /* Prevent overflow */
}

.hero-media {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-media video {
  max-height: 80vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

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

/* Ensure main element for accessibility */
main {
  display: block;
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding-top: var(--spacing-xl);
    /* Add extra top padding for nav */
  }

  .hero .text-content {
    margin-bottom: var(--spacing-lg);
    /* Ensure gap when stacked */
    width: 100%;
    /* Full width on mobile */
    flex: none;
  }

  .hero-headline,
  .hero-subhead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero .text-content,
  .hero-media {
    width: 100%;
    /* Full width on mobile */
    flex: none;
  }
}

/* Interactive Hero Image */
.interactive-visual {
  position: relative;
  width: 100%;
  flex: 1;
  max-width: 600px;
  /* Smaller */
  aspect-ratio: 4/3;
  /* Adjust to fit the machine shape better */
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-layer {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Layer 1: Sketch (Base) */
.layer-sketch {
  /* Robust CSS "Blueprint" look: Grayscale + Brightness/Contrast */
  filter: grayscale(100%) contrast(150%) brightness(0.7) drop-shadow(0 0 0 white);
  /* Fallback: Make it semi-transparent white-ish ghost if detailed outlines fail */
  opacity: 0.6;
  mix-blend-mode: luminosity;
  /* Helps it blend into background */
}

/* Layer 2: Real (Revealed) */
.layer-real {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* The Magic: Masking */
  --x: 50%;
  --y: 50%;

  /* Radial gradient mask */
  mask-image: radial-gradient(circle 120px at var(--x) var(--y), black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle 120px at var(--x) var(--y), black 10%, transparent 80%);

  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.interactive-visual:hover .layer-real {
  opacity: 1;
}

.hero-headline {
  /* Reduced vw unit to fit in 50% width column. 
     Calc: "INTELLIGENCE" (12ch) needs to fit in 50vw. 50/12 ≈ 4vw per char. 
     So 5-6vw is safe max. */
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.1;
  /* slightly looser for wrapped lines */
  margin-bottom: var(--spacing-md);
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero-subhead {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0;
  /* Reset margin */
  text-align: left;
}

.section-title {
  font-size: 6rem;
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-xs);
  display: inline-block;
}

/* Grid Layouts - Asymmetrical */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 5 cards in a row */
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) 0;
}

/* Responsive breakpoints for bento grid */
@media (max-width: 1179px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cards on medium screens */
  }
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 cards on tablets */
  }
}

@media (max-width: 600px) {
  .bento-grid {
    grid-template-columns: 1fr;
    /* 1 card on mobile */
  }
}

.bento-card {
  background: var(--color-bg-alt);
  padding: 1rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

.bento-card.dark-bg {
  background: #1a1a1a;
}

.bento-card.darker-bg {
  background: #222;
}

.bento-card-text {
  margin-top: 1rem;
}

.bento-card-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.bento-card::after {
  content: '';
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.bento-card:hover {
  border-color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.bento-card:hover::after {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.bento-card.active {
  border-color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.bento-card.active::after {
  opacity: 1;
  background: var(--color-text);
  border-color: var(--color-text);
}

.bento-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.bento-card p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Card Detail Sections */
.card-detail {
  display: none;
  grid-column: 1 / -1;
  margin-top: var(--spacing-sm);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.card-detail.active {
  display: block;
  opacity: 1;
  max-height: 1000px;
}

.detail-content {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

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

.detail-image {
  width: 100%;
}

.detail-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.detail-image-container {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.detail-info h4 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.detail-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--spacing-sm);
}

.keyword {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.keyword:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text);
  color: var(--color-text);
  transform: translateY(-1px);
}

.keyword.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text);
  color: var(--color-text);
}

.feature-descriptions {
  margin-top: 1rem;
}

.feature-desc {
  display: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--color-text);
  margin-top: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.feature-desc.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-lg) var(--spacing-md);
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.footer-logo {
  max-width: 120px;
  height: auto;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.footer-logo:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }

  :root {
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
  }

  .nav-link {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 3rem;
  }
}

@media (max-width: 600px) {
  .section-title {
    font-size: 2rem;
  }
}

/* Hero Background Interaction */
.hero {
  position: relative;
  overflow: hidden;
  /* Allow clicking through the text to the image if needed, but usually text is on top */
}

.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  /* Ensure black background if image has transparency or doesn't cover */
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* "Make it fit" - show the whole machine */
  object-position: center;
  /* Center it */
  transition: opacity var(--transition-smooth), filter var(--transition-smooth);
}

/* 
   State 1: "Sketch" Look (Default)
   We simulate a dark technical drawing style using filters since we couldn't generate the asset.
   Invert turns white background to black. Silver machine becomes dark. 
   High contrast makes it look more graphical.
   Grayscale removes any stray color.
*/
.hero-bg-img.sketch {
  filter: grayscale(100%) invert(90%) contrast(150%) brightness(0.8);
  opacity: 0.8;
}

/* State 2: Real Look (Hover styles applied to parent) */
/* We can't hover the background easily if text is over it. 
   So we'll assume the user hovers the HERO section itself. */
.hero:hover .hero-bg-img.sketch {
  filter: none;
  opacity: 1;
}

/* Adjust text readability so it doesn't get lost on the image */
.hero .text-content {
  position: relative;
  z-index: 10;
  mix-blend-mode: difference;
  /* Cool effect that adapts to bg, often used in tech sites */
  pointer-events: none;
  /* Let clicks pass through if needed */
}

/* ========================================
   HORIZONTAL TOP MENU OVERRIDES
   ======================================== */

/* Hide the mobile/overlay toggle button on pages with horizontal menu */
body.horizontal-nav .nav-toggle {
  display: none;
}

/* Reset main-nav to be a fixed top bar */
body.horizontal-nav .main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
  transform: none;
}

/* Logo styling */
body.horizontal-nav .nav-logo {
  position: absolute;
  left: 2rem;
  top: 0.75rem;
  height: 50px;
  width: auto;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

body.horizontal-nav .nav-logo:hover {
  opacity: 1;
}

/* Nav list horizontal layout */
body.horizontal-nav .nav-list {
  display: flex;
  gap: 3rem;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav links sizing and style reset */
body.horizontal-nav .nav-link {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  display: block;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

body.horizontal-nav .nav-link:hover {
  color: var(--color-text);
  transform: none;
}

/* Active state style */
body.horizontal-nav .nav-link.active {
  color: var(--color-text);
}

/* Revert to hamburger menu on mobile */
@media (max-width: 950px) {
  body.horizontal-nav .nav-toggle {
    display: flex;
  }

  body.horizontal-nav .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    background-color: var(--color-bg);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: none;
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: none;
    transition: transform var(--transition-smooth);
  }

  body.horizontal-nav .main-nav.active {
    transform: translateX(0);
    pointer-events: all;
  }

  body.horizontal-nav .nav-logo {
    display: none;
  }

  body.horizontal-nav .nav-list {
    display: block;
    gap: 0;
  }

  body.horizontal-nav .nav-link {
    font-size: 2.5rem;
    margin: var(--spacing-sm) 0;
  }

  body.horizontal-nav .nav-link:hover {
    transform: scale(1.05);
  }
}

/* ========================================
   BUSINESS PAGE STYLES
   ======================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

.stat-card {
  background-color: var(--color-bg);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  transition: background-color var(--transition-fast);
}

.stat-card:hover {
  background-color: var(--color-bg-alt);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.stat-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-lg);
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.highlight {
  color: var(--color-accent);
}

/* ========================================
   COMPANY PAGE STYLES
   ======================================== */

.vision-text {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  max-width: 900px;
  margin-bottom: var(--spacing-lg);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.team-member {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.member-photo {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: var(--spacing-sm);
}

.member-role {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.member-name {
  font-size: 1.5rem;
  font-weight: 500;
}

/* ========================================
   CONTACT PAGE STYLES
   ======================================== */

.map-container {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--color-bg-alt);
  overflow: hidden;
  margin-top: var(--spacing-md);
  border: 1px solid var(--color-border);
}

.map-container img {
  width: 100%;
  height: auto;
  display: block;
}

.map-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.location-marker {
  position: absolute;
  top: 48%;
  left: 52%;
  width: 20px;
  height: 20px;
  background-color: var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
  animation: pulse 2s infinite;
  cursor: pointer;
}

.location-label {
  position: absolute;
  top: 48%;
  left: 52%;
  transform: translate(20px, -50%);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-left: 1rem;
  text-transform: uppercase;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.contact-grid {
  margin-top: var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
}

.contact-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
}

.contact-item p {
  font-size: 1.5rem;
}

.contact-item a {
  text-decoration: underline;
}

/* ========================================
   HARDWARE SECTION
   ======================================== */

.hardware {
  margin-top: var(--spacing-xl);
}

.hardware img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ========================================
   PARTNER SECTION
   ======================================== */

.partner {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
}

.partner-content {
  position: relative;
  z-index: 2;
  padding: 32px;
}

/* ========================================
   PRODUCT SECTION
   ======================================== */

.product {
  margin-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* ========================================
   INFO BUTTON & MODAL
   ======================================== */

/* Info Button - White Circle with + */
.info-button {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.info-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1) rotate(90deg);
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.4);
}

.info-button span {
  font-size: 2rem;
  font-weight: 300;
  color: #000;
  line-height: 1;
  user-select: none;
}

/* Info Button Center Position */
.info-button-center {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.info-button-center:hover {
  transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
}

/* Info Button Bottom Left Position */
.info-button-bottom-left {
  top: 70%;
  left: 40%;
  right: auto;
  transform: translate(-50%, -50%);
}

.info-button-bottom-left:hover {
  transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
}

/* Info Button Left Position */
.info-button-left {
  top: 50%;
  left: 20%;
  right: auto;
  transform: translateY(-50%);
}

.info-button-left:hover {
  transform: translateY(-50%) scale(1.1) rotate(90deg);
}

/* Info Button Top Position */
.info-button-top {
  top: 20%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.info-button-top:hover {
  transform: translateX(-50%) scale(1.1) rotate(90deg);
}

/* Info Popup (Non-Modal) */
.info-popup {
  position: absolute;
  top: 50%;
  right: 5rem;
  transform: translateY(-50%) translateX(-20px);
  width: 280px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  color: #000;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-popup.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) translateX(0);
}

/* Second popup positioned to the left of center button */
#infoPopup2 {
  right: auto;
  left: 50%;
  transform: translateY(-50%) translateX(calc(-100% - 80px));
}

#infoPopup2.active {
  transform: translateY(-50%) translateX(calc(-100% - 60px));
}

/* Third popup positioned to the right of bottom-left button */
#infoPopup3 {
  top: 70%;
  left: 40%;
  right: auto;
  transform: translateY(-50%) translateX(80px);
}

#infoPopup3.active {
  transform: translateY(-50%) translateX(60px);
}

/* Fourth popup positioned to the right of left button */
#infoPopup4 {
  top: 50%;
  left: 20%;
  right: auto;
  transform: translateY(-50%) translateX(80px);
}

#infoPopup4.active {
  transform: translateY(-50%) translateX(60px);
}

/* Fifth popup positioned above the top button */
#infoPopup5 {
  top: 20%;
  left: 50%;
  right: auto;
  transform: translate(-50%, calc(-100% - 80px));
}

#infoPopup5.active {
  transform: translate(-50%, calc(-100% - 60px));
}

.popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.popup-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}

.info-popup h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #000;
  text-transform: uppercase;
  padding-right: 1rem;
}

.info-popup p {
  font-size: 0.85rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 844px) {
  .info-button {
    width: 50px;
    height: 50px;
    bottom: 1rem;
    right: 1rem;
  }

  .info-button span {
    font-size: 1.5rem;
  }

  .info-popup {
    width: 240px;
    padding: 1.25rem;
    right: 4rem;
  }

  .info-popup h3 {
    font-size: 1rem;
  }

  .info-popup p {
    font-size: 0.8rem;
  }
}