/* ===============================
   SpectoLab modern color system
   Tokenized palette and overrides
   =============================== */

:root {
  /* Brand core */
  --brand-900: #0f1b2b;
  --brand-800: #14263a;
  --brand-700: #18314a;
  --brand-600: #1c3b59;
  --brand-500: #234868;   /* main primary text tone */
  --brand-400: #3e6280;
  --brand-300: #6e8da6;

  /* Accents */
  --accent-a: #3aa3ff;    /* blue */
  --accent-b: #2dd4bf;    /* teal */

  /* Surfaces */
  --bg-0: #f7fbff;
  --bg-1: #f2f6fa;
  --bg-2: #eef4f9;
  --bg-3: #e9f1f7;

  /* Text */
  --text-900: #0e141b;
  --text-800: #1f2a35;
  --text-700: #2c3d4d;
  --text-600: #415467;
  --text-500: #5a6c7f;
  --muted-500: #7b8b9a;
  --muted-400: #94a3b0;

  /* Controls */
  --btn-primary: var(--brand-600);
  --btn-primary-hover: #11283d;

  /* Shadows and borders */
  --shadow-1: rgba(20, 34, 50, 0.10);
  --shadow-2: rgba(20, 34, 50, 0.14);
  --border-1: rgba(20, 34, 50, 0.08);
  --border-2: rgba(20, 34, 50, 0.16);
}

/* Typography and base */

@font-face{
  font-family: "Inter";
  src: url("/assets/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }


html { scroll-behavior: smooth; }

/* Primary text color utility */
.has-text-primary { color: var(--brand-600) !important; }

/* Button primary override (Bulma) */
.is-primary,
.is-primary:link,
.is-primary:visited {
  background-color: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
}
.is-primary:hover,
.is-primary:focus,
.is-primary:active {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary) !important;
}

/* Light variant for secondary CTAs */
.is-primary.is-light {
  background-color: #e8f1fb !important;
  color: var(--brand-600) !important;
  border: 1px solid var(--brand-600) !important;
}
.is-primary.is-light:hover { background-color: #dfeaf8 !important; }
.is-primary.is-light:focus,
.is-primary.is-light:active { background-color: #d6e3f6 !important; outline: none !important; }

/* =========================================
   Background video layer for the top hero
   ========================================= */
.hero.is-fullheight-with-navbar {
  position: relative;
  overflow: hidden; /* hide any letterboxing on resize */
}

/* The video wrapper sits behind all hero content */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* never intercept clicks */
}

/* Transparent blue overlay above the video for readability */
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fallback tint: navy gradient + subtle blue wash */
  background:
    linear-gradient(to bottom, rgba(20,34,50,0.55), rgba(20,34,50,0.35) 35%, rgba(20,34,50,0.70)),
    rgba(58,163,255,0.18); /* #3aa3ff at 18% */
  z-index: 1;
}

/* Modern browsers can use color-mix while still keeping the fallback above */
@supports (background: color-mix(in srgb, white, black)) {
  .hero-video::after {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--brand-700) 55%, transparent),
        color-mix(in srgb, var(--brand-700) 35%, transparent) 35%,
        color-mix(in srgb, var(--brand-700) 70%, transparent)
      ),
      color-mix(in srgb, var(--accent-a) 18%, transparent);
  }
}

/* The actual <video> element */
.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fill while preserving aspect */
  filter: saturate(1.05) contrast(1.02);
}

/* Keep hero content above the overlay and video */
.hero .hero-body {
  position: relative;
  z-index: 2;
}

/* Accessibility - honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* Slightly stronger overlay on phones for contrast */
@media (max-width: 768px) {
  .hero-video::after {
    background:
      linear-gradient(to bottom, rgba(20,34,50,0.70), rgba(20,34,50,0.50) 35%, rgba(20,34,50,0.85)),
      rgba(58,163,255,0.20);
  }
}

/* Special CTA */
.special-button {
  background-color: rgba(17, 40, 57, 0.9);
  border: 1px solid transparent; color: #fff;
}
.special-button:hover {
  background-color: rgba(17, 40, 57, 1);
  border: 1px solid transparent; color: #fff;
}

/* Messaging animations */
.hero-messages { position: absolute; width: 100%; top: 0; left: 0; color: var(--text-900); }
.msg { position: absolute; top: 0; left: 0; width: 100%; color: var(--text-900); opacity: 0; pointer-events: none; text-align: center; }

/* Anchor scroll offsets */
.scroll-margin-top-section { scroll-margin-top: 92px; }
@media screen and (max-width: 768px) {
  .main-title-mobile-fit { height: 164px; }
  .scroll-margin-top-section { scroll-margin-top: 108px; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .scroll-margin-top-section { scroll-margin-top: 108px; }
}
@media screen and (min-width: 1024px) {
  .timeline-container { max-width: 900px; margin: 0 auto; }
}

/* Keyframe utility classes */
.fadeInOut { animation: fadeInOut 4s ease-in-out forwards; }
@keyframes fadeInOut {
  0% { opacity: 0; display: none; }
  10%,50% { opacity: 1; display: block; }
  90%,100% { opacity: 0; display: none; }
}
.scaleInOut { animation: scaleInOut 4s ease-in-out forwards; animation-delay: 4s; }
@keyframes scaleInOut {
  0% { opacity: 0; display: none; }
  10%,50% { opacity: 1; display: block; }
  90%,100% { opacity: 0; display: none; }
}
.slideInOut { animation: slideInOut 4s ease-in-out forwards; animation-delay: 8s; }
@keyframes slideInOut {
  0% { opacity: 0; display: none; }
  10%,50%,90%,100% { opacity: 1; display: block; }
}

/* Timeline visuals */
.timeline-container { position: relative; padding: 2rem 0; z-index: 10; }
.timeline-svg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 2000px; z-index: 0; overflow: visible;
}
.timeline-path { fill: none; stroke: var(--muted-400); stroke-width: 2; stroke-dasharray: 5,5; }
.timeline-container img { border-radius: 50% !important; }
.fade-step { opacity: 0; transition: opacity 1s ease; z-index: 1; }
.fade-step.visible { opacity: 1; }

/* Layering for hero */
.no-overlap-banner { position: relative; z-index: 2; }

/* Soft professional background for top hero */
.has-pillars-hero {
  background:
    radial-gradient(1200px 600px at 12% 18%, var(--bg-2) 0%, rgba(238,244,249,0) 60%),
    radial-gradient(1200px 600px at 88% 82%, var(--bg-3) 0%, rgba(230,239,247,0) 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

/* Pillar cards */
.pillar-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-1);
  box-shadow: 0 10px 30px var(--shadow-1);
  border-radius: 16px;
  padding: 18px 18px 8px 18px;
  height: auto; /* important: do not force equal heights */
  backdrop-filter: saturate(140%) blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: visible;
  --pillar-radius: 16;
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px var(--shadow-2);
  border-color: var(--border-2);
}

/* Clickable header */
.pillar-header { cursor: pointer; display: block; outline: none; }
.pillar-header:focus { box-shadow: 0 0 0 3px rgba(58,123,213,0.25); border-radius: 12px; }

/* Icon badge with modern gradient */
.pillar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  color: #fff; box-shadow: 0 8px 20px rgba(58, 123, 213, 0.25);
}

/* Expandable content */
.pillar-content { overflow: hidden; transition: height .25s ease, opacity .2s ease; opacity: 0; margin-top: 8px; }
.pillar-card.is-open .pillar-content { opacity: 1; }

/* Trace overlay hooks */
.pillar-card .trace-svg {
  position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.pillar-card.is-traced .trace-svg { opacity: 1; }
.trace-glow { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; filter: url(#traceGlow); }
.trace-beam { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Circular section */
.spectolab-circular { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 1/1; }
.circular-ring { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Motion */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.ring-spin { transform-origin: 50% 50%; animation: spin 40s linear infinite; }
.ring-spin-slow { transform-origin: 50% 50%; animation: spin-slow 90s linear infinite; }

/* Center badge */
.circular-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.center-badge {
  text-align: center; background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-1); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 10px 30px var(--shadow-1); backdrop-filter: saturate(140%) blur(6px);
}
.center-badge strong { font-size: 1.15rem; color: var(--brand-700); }
.center-badge small { display: block; color: var(--text-500); }

/* Orbital nodes */
.pillar-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.96); border: 1px solid var(--border-1); border-radius: 999px;
  box-shadow: 0 10px 24px var(--shadow-1); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; text-align: left;
}
.pillar-node:hover {
  transform: translate(-50%, -50%) translateY(-2px);
  box-shadow: 0 16px 36px var(--shadow-2);
  border-color: var(--border-2);
}
.pillar-node.is-active {
  border-color: rgba(58,123,213,0.45);
  box-shadow: 0 16px 36px rgba(58,123,213,0.20);
}
.node-icon {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  color: #fff; box-shadow: 0 8px 20px rgba(58,123,213,0.25); font-size: 1.05rem;
}
.node-label { white-space: nowrap; color: var(--brand-600); font-weight: 600; font-size: 0.95rem; }

/* Detail panel */
.spectolab-panel.box { border-radius: 16px; border: 1px solid var(--border-1); box-shadow: 0 10px 30px var(--shadow-1); }

/* Small screens */
@media (max-width: 768px) {
  .pillar-card { padding: 16px 16px 6px 16px; }
  .node-label { display: none; }
  .pillar-node { padding: 10px; }
  .node-icon { width: 42px; height: 42px; font-size: 1.15rem; }
}

/* ===============================
   Navbar and section backgrounds
   =============================== */

/* Navbar background and transparency */
.navbar.is-fixed-top {
  background-color: rgba(20, 38, 58, 0.92) !important;
  backdrop-filter: saturate(140%) blur(6px);
}
.navbar .navbar-item, .navbar .navbar-link { color: #ffffff !important; }
.navbar .navbar-item:hover, .navbar .navbar-link:hover { color: #e6f0ff !important; }

/* Section backgrounds using tokens */
#integration.hero { background-color: var(--bg-2) !important; }
#capabilities.hero { background-color: var(--bg-2) !important; }
#overview.hero { background-color: var(--bg-1) !important; }
#contactus.hero { background-color: var(--bg-2) !important; }

/* Footer */
footer.footer { background-color: #0b0d10 !important; }
footer.footer p { color: #98a2ad !important; }

/* ===============================
   SVG accent alignment
   =============================== */
.pillar-icon,
.node-icon {
  background: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
}

/* ===============================
   Scroll indicator
   =============================== */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5;
}
.scroll-indicator:hover { opacity: 1; transform: translateX(-50%) translateY(1px); }

.scroll-indicator .chevron {
  position: relative;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(20,34,50,0.7);
  border-bottom: 2px solid rgba(20,34,50,0.7);
  transform: rotate(45deg);
  animation: bounceDown 1.8s infinite;
}
.scroll-indicator .chevron-2 { animation-delay: .12s; }
.scroll-indicator .chevron-3 { animation-delay: .24s; }

@keyframes bounceDown {
  0%   { transform: translateY(0) rotate(45deg); opacity: .2; }
  40%  { transform: translateY(4px) rotate(45deg); opacity: .9; }
  80%  { transform: translateY(0) rotate(45deg); opacity: .4; }
  100% { transform: translateY(0) rotate(45deg); opacity: .2; }
}

/* If a section uses a dark background, flip chevron color for contrast */
footer.footer ~ .scroll-indicator { display: none; }
.hero[style*="background-color: #080808"] .scroll-indicator .chevron,
footer .scroll-indicator .chevron {
  border-color: rgba(255,255,255,0.8);
}

/* ===============================
   SpectoLab layout fixes
   Desktop: panel top-right, circle left
   Tablet: circle top, panel bottom
   Prevent collision without clipping
   =============================== */

/* Make sure the SpectoLab columns can be re-ordered cleanly */
#SpectoLab .columns { display: flex; }

/* Desktop */
@media (min-width: 1024px) {
  /* Stop vertical centering so panel pins to top */
  #SpectoLab .columns.is-vcentered { align-items: flex-start; }

  /* Order: circle first, panel second */
  #SpectoLab .columns > .column:first-child { order: 1; }
  #SpectoLab .columns > .column:last-child  { order: 2; }

  /* Gentle downscale of the circle to avoid touching the panel */
  #SpectoLab .spectolab-circular {
    transform: scale(0.9);
    transform-origin: left center;
  }

  /* Breathing room between columns if grid is tight */
  #SpectoLab .spectolab-panel.box { margin-left: 1rem; }
}

/* Tablet: stack vertically, circle on top, panel below */
@media (min-width: 769px) and (max-width: 1023px) {
  #SpectoLab .columns { flex-wrap: wrap; }
  #SpectoLab .columns > .column { flex: 0 0 100%; max-width: 100%; }
  #SpectoLab .columns > .column:first-child { order: 1; margin-bottom: 1.5rem; } /* circle */
  #SpectoLab .columns > .column:last-child  { order: 2; }                         /* panel */
}

/* Mobile: keep default, ensure no transform */
@media (max-width: 768px) {
  #SpectoLab .spectolab-circular {
    transform: none;
    transform-origin: center center;
  }
}

/* Never crop the circle */
.spectolab-circular { overflow: visible; padding: 0; }

/* Keep the panel above the circle if z-order conflicts */
.spectolab-panel.box { position: relative; z-index: 2; }

/* ===============================
   App screenshot frame
   =============================== */
.app-frame {
  position: relative;
  margin: 0;
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  border: 1px solid rgba(20,34,50,0.08);
  box-shadow: 0 16px 40px rgba(20,34,50,0.14);
}
.app-frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events: none;
}
.app-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.app-screenshot {
  display: block;
  max-width: 160px;   /* set your desired maximum size */
  width: 100%;        /* still responsive below that */
  height: auto;
  margin: 0 auto;     /* center horizontally inside frame */
}

/* Address card */
.address-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  box-shadow: 0 12px 32px var(--shadow-1);
  padding: 24px;
}

.address-card__header {
  margin-bottom: 12px;
}

.address-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* On tablet and up, give three columns: address, meta, map */
@media (min-width: 769px) {
  .address-card__grid {
    grid-template-columns: 1.1fr 1fr 1.4fr;
    gap: 28px;
    align-items: start;
  }
}

.address-block p { color: var(--text-700); }

.address-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.address-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-700);
  border-bottom: 1px dashed var(--border-1);
}
.address-list li:last-child { border-bottom: none; }
.address-list a { color: var(--brand-600); text-decoration: none; }
.address-list a:hover { text-decoration: underline; }
.address-list .icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-600);
}

/* Map frame */
.map-frame {
  position: relative;
  margin: 0;
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88));
  border: 1px solid var(--border-1);
  box-shadow: 0 10px 26px var(--shadow-1);
}
.map-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* If you switch to an iframe map, use this instead */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: 0 10px 26px var(--shadow-1);
  background: #fff;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Default state */
.navbar-burger {
  color: #ffffff !important;     /* text color if text is shown */
}
.navbar-burger span {
  background-color: #ffffff !important;  /* burger lines white */
  height: 2px; width: 20px;
}

/* Hover and focus */
.navbar-burger:hover span,
.navbar-burger:focus span {
  background-color: var(--accent-a) !important;  /* brighter blue accent */
}

/* Active state when menu is open */
.navbar-burger.is-active span {
  background-color: var(--accent-b) !important;  /* teal accent when active */
}

/* Mobile overlap fix for SpectoLab section */
@media (max-width: 768px) {
  /* Stack vertically with clear spacing */
  #SpectoLab .columns {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    row-gap: 1.25rem; /* extra breathing room */
  }

  /* Circle first */
  #SpectoLab .columns > .column:first-child { order: 1; }
  /* Panel second with top margin */
  #SpectoLab .columns > .column:last-child  { order: 2; }

  /* Make sure the circle sits above if they touch */
  #SpectoLab .spectolab-circular {
    position: relative;
    z-index: 2;           /* circle above */
    transform: none;      /* no scaling on mobile */
    transform-origin: center center;
  }

  /* Panel below, do not float above the circle */
  #SpectoLab .spectolab-panel.box {
    position: relative;
    z-index: 1;           /* below the circle */
    margin-top: 0.5rem;   /* extra spacing just in case */
  }
}