/* ==========================================================================
   FutureHive Systems — Redesign 2026
   Shared design system: typography, color system, hero/3D canvas, motion,
   glass cards, marquee, video sections. Loaded on every page alongside
   Tailwind (CDN) for utility classes.
   ========================================================================== */

:root{
  --navy: #060b16;
  --navy-2: #0b1526;
  --navy-3: #0f1c33;
  --blue: #16a5de;
  --blue-deep: #0f8bbd;
  --green: #6bc24d;
  --green-deep: #43832d;
  --violet: #7c3aed;
  --ink: #0f172a;
  --paper: #f8fafc;
  --glass-border: rgba(255,255,255,0.14);
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:#fff;
}

h1,h2,h3,h4,.font-display{
  font-family:'Sora','Inter',sans-serif;
  letter-spacing:-0.01em;
}

/* ---------- gradient text ---------- */
.text-gradient{
  background-image:linear-gradient(90deg,var(--green) 0%,var(--blue) 55%,var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- eyebrow ---------- */
.eyebrow{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.72rem;
}

/* ---------- nav ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transition:width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--blue-deep); }

/* ==========================================================================
   3D / WebGL Hero
   ========================================================================== */
.hero-3d{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(107,194,77,.25), transparent 60%),
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(22,165,222,.30), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  overflow:hidden;
  isolation:isolate;
}
.hero-3d canvas{
  position:absolute; inset:0; z-index:0;
  width:100%!important; height:100%!important;
  opacity:.9;
}
.hero-3d .hero-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,11,22,.15) 0%, rgba(6,11,22,.55) 75%, rgba(6,11,22,.92) 100%);
  pointer-events:none;
}
.hero-3d .hero-content{ position:relative; z-index:2; }

/* smaller inner-page hero variant */
.hero-3d.hero-3d--inner{ padding-top:5.5rem; padding-bottom:5.5rem; }
.hero-3d.hero-3d--inner canvas{ opacity:.7; }

.scroll-cue{
  width:26px; height:42px; border:2px solid rgba(255,255,255,.45);
  border-radius:14px; position:relative; margin:0 auto;
}
.scroll-cue::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px;
  background:#fff; border-radius:2px; transform:translateX(-50%);
  animation:scrollcue 1.6s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; transform:translate(-50%,0);}
  70%{ opacity:0; transform:translate(-50%,14px);}
  100%{ opacity:0; transform:translate(-50%,14px);}
}

/* ==========================================================================
   Video section
   ========================================================================== */
.video-feature{
  position:relative; overflow:hidden; border-radius:1.5rem;
  background:#000;
}
.video-feature video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.video-feature .video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,22,.15) 0%, rgba(6,11,22,.85) 100%);
}
.video-feature .video-caption{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem;
}
.play-badge{
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}

/* ==========================================================================
   Glass / lift cards
   ========================================================================== */
.glass-card{
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  border-radius:1.25rem;
}
.card-tilt{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.card-lift{
  transition:all .3s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(15,23,42,.06);
}
.card-lift:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
  border-color:rgba(22,165,222,.25);
}

/* ---------- cursor-tracking glare (added by redesign.js to every
   .card-tilt / .card-lift element) for a glassy 3D reflection ---------- */
.tilt-active{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-glare{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  transition:opacity .25s ease;
  mix-blend-mode:overlay;
}
.media-card{
  position:relative; border-radius:1.25rem; overflow:hidden;
  isolation:isolate;
}
.media-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
}
.media-card:hover img{ transform:scale(1.08); }
.media-card .media-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,22,0) 30%, rgba(6,11,22,.92) 100%);
}

.icon-badge{
  width:3rem; height:3rem; border-radius:.9rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transform-style:preserve-3d;
  animation:badge-float 5s ease-in-out infinite;
  animation-delay:calc(var(--float-delay, 0) * 1s);
}
@keyframes badge-float{
  0%, 100%{ transform:translateY(0) rotateY(0deg); }
  50%{ transform:translateY(-5px) rotateY(12deg); }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Marquee (client logos)
   ========================================================================== */
@keyframes marquee-scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll 34s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
.logo-chip{
  width:150px; height:86px; margin:0 10px;
  background:rgba(255,255,255,.9); border:1px solid #e5e7eb; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.06); transition:all .3s ease;
}
.logo-chip:hover{ box-shadow:0 14px 22px rgba(0,0,0,.12); transform:translateY(-3px); }
.logo-chip img{ max-height:42px; max-width:112px; filter:grayscale(100%); opacity:.75; transition:.3s; }
.logo-chip:hover img{ filter:grayscale(0%); opacity:1; }

.marquee-track--dark .logo-chip{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary{
  background:linear-gradient(90deg,var(--blue),var(--blue-deep));
  box-shadow:0 10px 22px -6px rgba(22,165,222,.55);
}
.btn-primary:hover{ box-shadow:0 14px 28px -6px rgba(22,165,222,.7); transform:translateY(-1px); }
.btn-secondary{
  background:linear-gradient(90deg,var(--green),var(--green-deep));
  box-shadow:0 10px 22px -6px rgba(107,194,77,.55);
}
.btn-secondary:hover{ box-shadow:0 14px 28px -6px rgba(107,194,77,.7); transform:translateY(-1px); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.55); }

/* ==========================================================================
   Counters / stats
   ========================================================================== */
.stat-num{ font-family:'Sora',sans-serif; }

#scrollTopBtn{ transition:all .3s ease; }

/* ==========================================================================
   Misc blobs (kept from previous version for gradient sections)
   ========================================================================== */
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none;
  animation:blob-float 9s ease-in-out infinite;
}
@keyframes blob-float{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(18px,-14px,0) scale(1.08); }
}

/* ---------- button press: physical 3D depth on click ---------- */
.btn-primary, .btn-secondary, .btn-ghost{
  transform-style:preserve-3d;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active{
  transform:translateY(1px) scale(.97);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
  transition:transform .08s ease, box-shadow .08s ease;
}

@media (max-width: 768px){
  .hero-3d canvas{ opacity:.55; }
}

@media (prefers-reduced-motion: reduce){
  .icon-badge, .blob{ animation:none; }
}

/* ==========================================================================
   Global Monitoring Proof section — dark glass surface + fleet globe
   ========================================================================== */
.fh-surface{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
}
.grid-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, black 35%, transparent 88%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, black 35%, transparent 88%);
}
.icon-badge-dark{
  border-radius:9999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  backdrop-filter:blur(6px);
}
.glass-strong{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);
  box-shadow:0 25px 60px -20px rgba(0,0,0,.65);
}
.glass{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
}
.pulse-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--green); position:relative;
}
.pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:var(--green); opacity:.55;
  animation:pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.5); opacity:.6; }
  100%{ transform:scale(2.4); opacity:0; }
}
#hero-globe{ position:relative; z-index:1; }
#hero-globe canvas{ width:100%!important; height:100%!important; display:block; }

/* ---------- extra 3D depth: floating panel + perspective wrapper ---------- */
.fleet-panel-wrap{
  perspective:1400px;
  animation:panel-hover 7s ease-in-out infinite;
}
.fleet-panel{
  position:relative;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.7),
    0 8px 24px -8px rgba(22,165,222,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
}
@keyframes panel-hover{
  0%, 100%{ transform:translateY(0) rotateX(0deg); }
  50%{ transform:translateY(-8px) rotateX(1.2deg); }
}
.fleet-panel::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(22,165,222,.55), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(107,194,77,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.8;
}

/* ---------- stat chips: subtle lift + glowing icons for depth ---------- */
.stat-chip{
  transform-style:preserve-3d;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.stat-icon{
  display:inline-block;
  font-size:1.15rem;
  filter:drop-shadow(0 0 6px currentColor);
  animation:stat-icon-float 4.5s ease-in-out infinite;
}
.stat-chip:nth-child(2) .stat-icon{ animation-delay:.5s; }
.stat-chip:nth-child(3) .stat-icon{ animation-delay:1s; }
@keyframes stat-icon-float{
  0%, 100%{ transform:translateY(0) translateZ(0); }
  50%{ transform:translateY(-4px) translateZ(14px); }
}

/* ---------- globe stage: glowing atmosphere behind the Three.js canvas ---------- */
.globe-stage{ position:relative; }
.globe-glow{
  position:absolute; inset:8% 12%;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(22,165,222,.45) 0%, rgba(22,165,222,.15) 40%, transparent 72%);
  filter:blur(18px);
  animation:globe-glow-pulse 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes globe-glow-pulse{
  0%, 100%{ opacity:.65; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .pulse-dot::after{ animation:none; opacity:.3; }
  .fleet-panel-wrap{ animation:none; }
  .stat-icon{ animation:none; }
  .globe-glow{ animation:none; }
}