:root {
  --void: #0a0c0f;
  --panel: #12151a;
  --panel-2: #1b1f26;
  --steel: #9aa5b1;
  --steel-light: #c7cdd3;
  --amber: #ff7a1a;
  --amber-deep: #d9600d;
  --cyan: #3de0d8;
  --grid-line: #232830;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

#hero-canvas {
  display: block;
  cursor: grab;
}

#hero-canvas:active {
  cursor: grabbing;
}

::selection {
  background: var(--amber);
  color: var(--void);
}

/* ---- Hero entrance (page load) ---- */
.hero-in {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-in 0.6s ease-out forwards;
}
.hero-in-1 {
  animation-delay: 0.05s;
}
.hero-in-2 {
  animation-delay: 0.15s;
}
@keyframes hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Nav link underline ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s ease-out;
}
.nav-link:hover::after {
  transform: scaleX(1);
}

/* ---- Button press micro-interaction ---- */
.btn-press {
  transition: transform 0.15s ease-out, background-color 0.15s ease-out,
    border-color 0.15s ease-out;
}
.btn-press:hover {
  transform: translateY(-1px);
}
.btn-press:active {
  transform: translateY(0) scale(0.97);
}

/* ---- Live status pulse dot ---- */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cyan);
  animation: pulse-ring 1.8s ease-out infinite;
}
.pulse-dot-green {
  background: #39d98a;
}
.pulse-dot-green::after {
  background: #39d98a;
}
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* ---- Hero canvas pointer tilt ---- */
.tilt-wrap {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- Tracking result reveal ---- */
.result-in {
  animation: result-in 0.3s ease-out;
}
@keyframes result-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Tracking progress bar fill-in ---- */
.progress-fill {
  width: 0%;
  transition: width 0.8s ease-out;
}
.progress-fill.is-filled {
  width: 66%;
}

/* ---- Data-stream tunnel canvas (behind all content, ambient motion) ---- */
.data-stream-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- Parallax depth layers: drifting container silhouettes ---- */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.parallax-layer {
  position: absolute;
  inset: -20% -10%;
  background-repeat: repeat-y;
  background-position: center top;
}
.parallax-layer-far {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='560'%3E%3Crect x='40' y='50' width='240' height='96' rx='3' fill='none' stroke='%237C8792' stroke-width='1.5'/%3E%3Cline x1='90' y1='50' x2='90' y2='146' stroke='%237C8792' stroke-width='1'/%3E%3Cline x1='150' y1='50' x2='150' y2='146' stroke='%237C8792' stroke-width='1'/%3E%3Cline x1='210' y1='50' x2='210' y2='146' stroke='%237C8792' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 460px 760px;
  opacity: 0.05;
}
.parallax-layer-mid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='560'%3E%3Crect x='40' y='50' width='200' height='80' rx='3' fill='none' stroke='%233DE0D8' stroke-width='1.5'/%3E%3Cline x1='80' y1='50' x2='80' y2='130' stroke='%233DE0D8' stroke-width='1'/%3E%3Cline x1='120' y1='50' x2='120' y2='130' stroke='%233DE0D8' stroke-width='1'/%3E%3Cline x1='160' y1='50' x2='160' y2='130' stroke='%233DE0D8' stroke-width='1'/%3E%3Cline x1='200' y1='50' x2='200' y2='130' stroke='%233DE0D8' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 620px 980px;
  opacity: 0.045;
}
.parallax-layer-near {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='560'%3E%3Crect x='30' y='40' width='280' height='120' rx='4' fill='none' stroke='%23FF7A1A' stroke-width='2'/%3E%3Cline x1='90' y1='40' x2='90' y2='160' stroke='%23FF7A1A' stroke-width='1.4'/%3E%3Cline x1='150' y1='40' x2='150' y2='160' stroke='%23FF7A1A' stroke-width='1.4'/%3E%3Cline x1='210' y1='40' x2='210' y2='160' stroke='%23FF7A1A' stroke-width='1.4'/%3E%3Cline x1='270' y1='40' x2='270' y2='160' stroke='%23FF7A1A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 900px 1400px;
  opacity: 0.04;
}

/* ---- Premium film-grain texture over the whole page ---- */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Cursor-follow spotlight glow over dark sections ---- */
.cursor-spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--spot-x, 50%) var(--spot-y, 30%),
    rgba(61, 224, 216, 0.06),
    transparent 70%
  );
  transition: opacity 0.3s ease-out;
}

/* ---- Hero glow blobs ---- */
.glow-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.glow-blob-amber {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: rgba(255, 122, 26, 0.16);
}
.glow-blob-cyan {
  width: 380px;
  height: 380px;
  bottom: -140px;
  right: -80px;
  background: rgba(61, 224, 216, 0.14);
}

/* ---- Gradient headline accent ---- */
.text-gradient {
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  backdrop-filter: blur(6px);
}

/* ---- Magnetic button pull toward cursor ---- */
.magnetic {
  transition: transform 0.2s ease-out, background-color 0.15s ease-out;
}

/* ---- Logo marquee ---- */
.marquee-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 4rem;
  animation: marquee 28s linear infinite;
}
.marquee-item {
  flex: none;
  padding: 0 1rem;
  font-family: "Space Grotesk", ui-sans-serif, system-ui;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--steel-light);
  white-space: nowrap;
  opacity: 0.7;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- Global network diagram ---- */
.route-line {
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.5;
  animation: route-flow 1.5s linear infinite;
}
@keyframes route-flow {
  to {
    stroke-dashoffset: -24;
  }
}
.route-traveler {
  filter: drop-shadow(0 0 4px rgba(255, 122, 26, 0.9));
}
.port-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--steel);
}

/* ---- Footer links ---- */
.footer-link {
  color: var(--steel);
  transition: color 0.15s ease-out;
}
.footer-link:hover {
  color: var(--steel-light);
}

/* ---- Service card glow border on hover (refines earlier lift effect) ---- */
.service-card {
  transition: transform 0.15s ease-out, background-color 0.15s ease-out,
    box-shadow 0.2s ease-out;
}
.service-card:hover {
  transform: translateY(-4px);
  background-color: var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(61, 224, 216, 0.35);
}

/* Quote form fields: readable on the dark panel, visible focus. */
.quote-input {
  width: 100%;
  min-height: 48px;
  border-radius: 4px;
  border: 1px solid var(--gridline, #232830);
  background: var(--void);
  padding: 0.65rem 0.85rem;
  color: #fff;
  font-size: 1rem;
  color-scheme: dark;
}
.quote-input:focus {
  outline: 2px solid #3de0d8;
  outline-offset: 1px;
}