:root {
  --bg-color: #030303;
}
body {
  background-color: var(--bg-color);
  color: #ffffff;
  cursor: none;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
  }
}

/* --- UTILS --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

::selection { background: rgba(255,255,255,0.2); color: #fff; }

/* --- 3D CANVAS & LAYERS --- */
#webgl-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* --- CURSOR --- */
.cursor-dot {
  width: 4px; height: 4px; background: white;
  position: fixed; top: 0; left: 0; border-radius: 50%;
  z-index: 9999; pointer-events: none; transform: translate(-50%, -50%);
}
.cursor-circle {
  width: 30px; height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: fixed; top: 0; left: 0; border-radius: 50%;
  z-index: 9998; pointer-events: none; transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
}
.cursor-circle.active {
  width: 50px; height: 50px;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1px);
}

/* --- TYPOGRAPHY & FX --- */
.reveal-text { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.char { display: inline-block; transform: translateY(110%); will-change: transform; }

/* --- CARD HOVER FX --- */
.card-3d {
  transition: transform 0.3s ease-out, border-color 0.3s;
  transform-style: preserve-3d;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.card-3d:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(20,20,20,0.8);
}

/* --- MEGA CARD --- */
.mega-card {
  background: linear-gradient(180deg, rgba(15,15,15,0.9) 0%, rgba(5,5,5,0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
  position: relative;
  overflow: hidden;
}

/* --- MARQUEE --- */
.marquee-container { overflow: hidden; white-space: nowrap; position: relative; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }

@media (max-width: 768px) {
  .marquee-container {
    width: 100vw;
    max-width: 100%;
  }
}
.marquee-track { display: flex; gap: 6rem; width: max-content; animation: scroll 60s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track.reverse { animation-direction: reverse; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- MODAL --- */
#robot-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
#robot-modal.open { opacity: 1; pointer-events: auto; }
#robot-delivery-container {
  width: 140px; height: 140px; margin: 0 auto 1rem auto;
  transform: translateY(-20px); opacity: 0;
}

/* --- LOADER --- */
.loader-wrap {
  position: fixed; z-index: 10000; inset: 0; background: #030303;
  display: flex; align-items: center; justify-content: center;
}
.loader-bar { width: 1px; height: 0%; background: #333; position: relative; overflow: hidden; }
.loader-bar::after { content:''; position: absolute; inset: 0; background: #fff; animation: load 1.5s ease-in-out forwards; }
@keyframes load { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }

/* --- DIAGRAM ANIMATIONS --- */
.flow-line { stroke-dasharray: 10; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.node-glow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }

/* --- MOBILE OPERATING MODEL --- */
@media (max-width: 768px) {
  #op-model-diagram {
    display: grid !important; /* Center items in a stack */
    place-items: center;
    overflow: hidden;
  }
  
  /* Hide desktop elements */
  #op-model-diagram .lucide-chevron-right,
  #op-model-diagram > div:first-child, /* Connecting line */
  #op-model-diagram > .border-l { /* Vertical dividers if any */
    display: none !important;
  }
  
  /* Nodes - Absolute positioning for transitions */
  #op-node-1, #op-node-2, #op-node-3, #op-node-4 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* JS will handle visibility */
    width: 80%; /* Ensure readability */
    max-width: 200px;
    margin: 0;
    z-index: 20;
  }
  
  /* Keep robot visible above nodes */
  #op-model-robot-container {
    z-index: 30;
  }
}