/* ==========================================================================
   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);
}
.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;
}

/* ==========================================================================
   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; }

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