/* ==========================================================================
   SMARTNIBAS — FUTURISTIC LAYER (additive)
   Loads AFTER styles.css. Nothing here deletes or restructures your
   existing rules — it only adds new effects and gently tints a few
   existing accents (card top-line, nav underline, eyebrow dot) toward
   a glowing teal/cyan that's drawn from your own brand colour (#169d9e)
   so it reads as "more advanced", not "a different site".
   ========================================================================== */

:root{
  --sn-glow:#19c7dc;
  --sn-glow-soft:#7fe9f2;
  --sn-glow-dim:rgba(25,199,220,.22);
  --sn-glow-dim-strong:rgba(25,199,220,.4);
}

/* ---------------------------------------------------------------------
   HERO — animated particle/grid canvas + scanning light sweep
--------------------------------------------------------------------- */
.hero-banner{ position:relative; }

.sn-hero-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}

.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, var(--sn-glow-dim) 45%, transparent 62%);
  background-size:260% 100%;
  background-position:130% 0;
  animation:snHeroSweep 8s ease-in-out infinite;
  mix-blend-mode:screen;
}

@keyframes snHeroSweep{
  0%{ background-position:150% 0; }
  50%{ background-position:-40% 0; }
  100%{ background-position:150% 0; }
}

/* Eyebrow badge: pulsing "system online" dot */
.eyebrow{ position:relative; }
.eyebrow::before{
  animation:snPulseDot 1.8s ease-in-out infinite;
}
@keyframes snPulseDot{
  0%,100%{ box-shadow:0 0 0 0 var(--sn-glow-dim); }
  50%{ box-shadow:0 0 10px 4px var(--sn-glow-dim); }
}

/* Desktop-only glass console around the hero copy block (kept out of the
   mobile layout so it never fights the existing mobile slider fixes) */
@media (min-width:921px){
  .hero-copy{
    padding:28px 32px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 30px 70px rgba(0,0,0,.25);
  }
}

/* Stat cards: tabular numerals + glow + shimmer sweep on hover */
.hero-stats strong{
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px var(--sn-glow-dim-strong);
}
.hero-stats .stat{
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hero-stats .stat::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
  transform:translateX(-120%);
  pointer-events:none;
}
.hero-stats .stat:hover{
  transform:translateY(-4px);
  border-color:var(--sn-glow-dim);
  box-shadow:0 18px 40px rgba(0,0,0,.28), 0 0 22px var(--sn-glow-dim);
}
.hero-stats .stat:hover::after{ animation:snShimmer .9s ease forwards; }
@keyframes snShimmer{ to{ transform:translateX(120%); } }

/* ---------------------------------------------------------------------
   Nav underline + buttons: same interactions, glowing teal accent
--------------------------------------------------------------------- */
.nav-links>li>a::after{
  background:var(--sn-glow);
  box-shadow:0 0 8px var(--sn-glow);
}
.btn{ position:relative; }
.btn:hover{ box-shadow:0 10px 28px rgba(0,0,0,.18), 0 0 20px var(--sn-glow-dim); }

/* ---------------------------------------------------------------------
   Cards — flowing top-line accent + glow ring on hover
   (uses the exact selector list already defined in styles.css so it
   only adds to elements that already opt into that treatment)
--------------------------------------------------------------------- */
.card::before,.feature-card::before,.product-card::before,.project-card::before,
.testimonial-card::before,.blog-card::before,.info-box::before{
  background:linear-gradient(90deg, transparent, var(--sn-glow-soft), transparent);
  background-size:220% 100%;
  animation:snTopLineFlow 3.4s linear infinite;
}
@keyframes snTopLineFlow{
  0%{ background-position:220% 0; }
  100%{ background-position:-220% 0; }
}

.feature-card:hover,.product-card:hover,.project-card:hover,.blog-card:hover,
.testimonial-card:hover,.info-box:hover,.solution-tile:hover{
  box-shadow:0 24px 55px rgba(0,0,0,.16), 0 0 0 1px var(--sn-glow-dim), 0 0 30px var(--sn-glow-dim);
}

.product-card:hover .product-icon,.feature-card:hover .feature-icon,.info-box:hover .feature-icon{
  box-shadow:0 0 22px var(--sn-glow-dim-strong);
  transform:scale(1.06);
}
.product-icon,.feature-icon{ transition:box-shadow .3s ease, transform .3s ease; }

/* Cards get a lightweight 3D tilt via JS (see home-futuristic.js);
   this just sets up the perspective + smooth return so it feels premium */
.product-card,.project-card,.solution-tile,.feature-card,.info-box{
  transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease;
  will-change:transform;
}

/* ---------------------------------------------------------------------
   Ecosystem section — faint animated circuit grid behind the nodes,
   plus a glowing accent bar and hover-lift on each node
--------------------------------------------------------------------- */
.ecosystem-map{ position:relative; overflow:hidden; }
.ecosystem-map::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--sn-glow-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--sn-glow-dim) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at center, #000 10%, transparent 78%);
  opacity:.55;
}
.node{
  position:relative;
  overflow:hidden;
  padding-left:28px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.node::before{
  content:"";
  position:absolute; left:14px; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--sn-glow);
  box-shadow:0 0 10px var(--sn-glow);
}
.node:hover{
  transform:translateY(-4px);
  border-color:var(--sn-glow-dim);
  box-shadow:0 16px 34px rgba(0,0,0,.12), 0 0 22px var(--sn-glow-dim);
}

@media (prefers-reduced-motion: reduce){
  .sn-hero-canvas,.hero-banner::before,.eyebrow::before,
  .card::before,.feature-card::before,.product-card::before,.project-card::before,
  .testimonial-card::before,.blog-card::before,.info-box::before{
    animation:none !important;
  }
}