/* ===================================================
   ECAI Landing Page — Custom Styles
   Paleta: bg #021E13 | gold #D4AF37 | text white/gray
   =================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: #021E13;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: #021E13; }
::-webkit-scrollbar-thumb    { background: #7A6318; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #D4AF37; }

/* ── Glassmorphism card ────────────────────────────── */
.glass-card {
  background:           rgba(255, 255, 255, 0.028);
  backdrop-filter:      blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:               1px solid rgba(255, 255, 255, 0.07);
}

/* ── Navbar — blur on scroll (toggled via JS) ──────── */
#navbar {
  background: transparent;
}
#navbar.scrolled {
  background:       rgba(2, 30, 19, 0.88);
  backdrop-filter:  blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom:    1px solid rgba(255, 255, 255, 0.05);
}

/* ── Globe canvas visibility ──────────────────────── */
#globe-canvas {
  transition: opacity 0.6s ease;
}

/* ── Timeline dots ─────────────────────────────────── */
.tl-dot {
  position:   absolute;
  left:       -8px;  /* half of 16px dot, minus border width offset */
  top:        4px;
  width:      13px;
  height:     13px;
  border-radius: 50%;
  background: #021E13;
  border:     2px solid rgba(255,255,255,0.2);
  transform:  translateX(-50%);
  transition: border-color 0.3s;
}
.tl-dot--gold {
  background: #D4AF37;
  border-color: #D4AF37;
  box-shadow: 0 0 12px rgba(212,175,55,0.5);
}

/* ── Section baseline opacity (pre-animation) ──────── */
.reveal-label,
.reveal-title,
.problem-card,
.flow-step,
.agent-card,
.metric-card,
.security-item,
.platform-mockup,
.timeline-step,
.cta-card {
  will-change: transform, opacity;
}

/* ── Subtle radial glow behind hero text ──────────── */
#section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 70% 50%,
    rgba(212, 175, 55, 0.045) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── Metrics section glow ─────────────────────────── */
#section-metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    rgba(212, 175, 55, 0.035) 0%,
    transparent 70%
  );
  pointer-events: none;
}
#section-metrics { position: relative; }

/* ── Input / select focus ring ─────────────────────── */
.field:focus {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

/* ── Gradient dividers between sections ───────────── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 175, 55, 0.15) 50%,
    transparent 100%
  );
}

/* ── Hotspot tooltip (injected by globe.js) ────────── */
.hs-tooltip {
  position:        fixed;
  pointer-events:  none;
  background:      rgba(2, 30, 19, 0.92);
  border:          1px solid rgba(212, 175, 55, 0.35);
  border-radius:   10px;
  padding:         8px 14px;
  font-size:       11px;
  font-family:     Inter, sans-serif;
  color:           #D4AF37;
  font-weight:     600;
  white-space:     nowrap;
  backdrop-filter: blur(10px);
  z-index:         200;
  transition:      opacity 0.25s;
}

/* ── Floating email + back-to-top ─────────────────── */
#float-email, #back-top {
  transition: opacity 0.35s ease, transform 0.35s ease,
              background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

/* ── Mobile menu ──────────────────────────────────── */
#mobile-menu {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.ham-line {
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

/* ── Loading screen ───────────────────────────────── */
#loader {
  transition: opacity 0.6s ease;
}
#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ── Comparison table ─────────────────────────────── */
.compare-table { border-collapse: separate; border-spacing: 0; }
.compare-table thead tr th { border-bottom: 1px solid rgba(255,255,255,0.07); }
.compare-row td { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.compare-row:hover td { background: rgba(255,255,255,0.02); }
.compare-row td:first-child { border-radius: 8px 0 0 8px; }
.compare-row td:last-child  { border-radius: 0 8px 8px 0; }
.check-yes  { color: #D4AF37; font-size: 1.1rem; font-weight: 900; }
.check-no   { color: rgba(255,255,255,0.15); font-size: 1.1rem; font-weight: 900; }
.check-partial { color: rgba(255,255,255,0.4); font-size: 1.1rem; font-weight: 700; }

/* Highlight ECAI column */
.compare-table tbody .compare-row td:nth-child(2) {
  background: rgba(212,175,55,0.05);
  border-left:  1px solid rgba(212,175,55,0.12);
  border-right: 1px solid rgba(212,175,55,0.12);
}
.compare-table thead th:nth-child(2) {
  background: rgba(212,175,55,0.05);
  border-left:  1px solid rgba(212,175,55,0.12);
  border-right: 1px solid rgba(212,175,55,0.12);
  border-top:   1px solid rgba(212,175,55,0.12);
  border-radius: 10px 10px 0 0;
}

/* ── FAQ accordion ────────────────────────────────── */
.faq-body { transition: none; }
.faq-btn  { cursor: pointer; background: none; border: none; }
.faq-chevron.open { transform: rotate(180deg); }

/* ── Language toggle ──────────────────────────────── */
.lang-toggle { user-select: none; }
.lang-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
  line-height: 1;
  transition:  color 0.2s;
}
.lang-btn:hover      { color: #D4AF37 !important; }
.lang-btn.lang-active { color: #D4AF37; }

/* ── Particle size responsive tuning ──────────────── */
@media (max-width: 768px) {
  #globe-canvas { opacity: 0.5 !important; }
}