:root { --bg:#0b1020; --ink:#e9f2ff; --muted:#a9bdd8; /* NEW: surface + fade height to blend sections */
  --surface:##07151a;
  --fade-h:120px; /* adjust 80–160px to taste */}

/* Section + title */
.evo-edu{
  position:relative;
  padding:6rem 0 8rem;
  background:transparent;
  overflow:hidden;
}
.evo-title{
  text-align:center;
  color:var(--ink);
  font:800 2rem/1.1 "Inter", system-ui, sans-serif;
  margin:0 0 2rem;
  letter-spacing:.2px;
}

.evo-wrap{ position:relative; max-width:1200px; margin:0 auto; height:380px; perspective:800px; }

/* Layer order: SVG path (0) → icons (2) → 3D mage (3) */
.evo-path  { position:absolute; inset:0; z-index:0; pointer-events:none; }
.evo-stage { position:absolute; inset:0; z-index:2; transform-style:preserve-3d; }
.evo-3d    { position:absolute; inset:0; z-index:3; pointer-events:none; }

/* ── Node (chip) — static, no hover ───────────────────────────── */
.stage-chip{
  position:absolute;
  width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  text-align:center;
  transform-origin:50% 50%;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
  background:none;
  border:none;
  padding:0;
  margin:0;
  box-shadow:none;
  z-index:1;

  /* tokens kept for future cards, but unused now */
  --card-w: 320px;
  --card-h: 380px;
}

/* no invisible hover buffer */
.stage-chip::before { content:none !important; }

/* Logo + labels */
.stage-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}
.stage-icon img{
  max-width:120px;
  height:auto;
  display:block;
}
.stage-name{
  color:#e9f2ff;
  font:800 1.1rem/1.1 "Inter", system-ui, sans-serif;
  margin-top:.45rem;
  margin-bottom:1vh;
}
.stage-tag{
  color:#a9bdd8;
  font:500 .95rem/1.2 "Inter", system-ui, sans-serif;
}

/* nuke old hover card + transitions */
.stage-expand{ display:none !important; }
.stage-face,.stage-icon img,.stage-name,.stage-tag{
  transition:none !important;
  transform:none !important;
}

/*new section CSS*/

/* ========= Products (polished) ========= */
.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0; /* let media edge-to-edge; body has padding */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #00000000;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.product-card::after {
  /* subtle neon ring on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;

  transition: opacity 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 255, 0.22);
}
.product-card:hover::after {
  opacity: 1;
}

.product-media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.product-media img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* show whole image */
  margin: 0 auto;
  transition: transform 0.35s ease;
}

.product-card:hover .product-media img {
  transform: scale(1.06);
}

.product-body {
  padding: 16px 16px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.product-title {
  margin: 2px 0 0;
  font-size: 18px;
}
.product-desc {
  margin: 0;
  color: #b7c9cc;
  line-height: 1.45;
  padding-bottom: 2vh;
}

/* Pills / Meta */
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--elev-1);
  background: rgba(255, 255, 255, 0.03);
}

/* Ensure equal-height cards in the grid */
#products .grid.cards-3 {
  align-items: stretch;
}
#products .product-card .btn.block {
  margin-top: 6px;
}

/* Default 3-column grid */
.grid.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 45px; /* adjust spacing */
}

/* Responsive tweaks */
@media (max-width: 960px) {
  .grid.cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid.cards-3 {
    grid-template-columns: 1fr;
  }
}

/* ===== Vision & Mission ===== */

.quote-section {
  padding: 6rem 1.5rem;
  text-align: center;
}

.big-quote {
  max-width: 900px;
  margin: 0 auto;
  font: 700 1.75rem/1.5 "Inter", system-ui, sans-serif;
  color: #fff;
}

.quote-author {
  margin-top: 1.5rem;
  font: 500 1rem/1.4 "Inter", system-ui, sans-serif;
  color: #aaa;
}

/* NEW: seamless top-edge fade from previous bg -> this section's bg */
.edge-fade{
  position: relative;
  overflow: visible; /* let the gradient extend upward */
  padding-top: var(--fade-h); margin-top: var(--fade-h);
}
.edge-fade::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--fade-h));
  height: var(--fade-h);
  pointer-events: none;
  /* Blend the page bg (above) down into the section bg */
  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface) 100%);
  /* Optional polish */
  opacity: .95;
}

#vision-quote {
  position: relative;
  padding: 10rem 1.5rem;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: #161616;
}

/* background image */
#vision-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: url("images/vision_banner.png") center/cover no-repeat; */
  background: #303030;
  filter: brightness(0.15); /* dims the photo */
  z-index: -1; /* sit behind text */
}

.marquee { --gap: 1.5rem; --move: 0px; --duration: 30s;
  position: relative; overflow: hidden;
}
.marquee__track {
  display: flex; gap: 1.5rem;
  width: max-content;            /* track expands to real content width */
  will-change: transform;
}
.marquee[data-animate="true"] .marquee__track {
  animation: marquee var(--duration) linear infinite;
}
@keyframes marquee {
  to { transform: translateX(calc(-1 * var(--move))); } /* move by exactly one set */
}
#stories .quote {
  flex: 0 0 auto;
  max-width: 320px;       /* your preferred card max width */
  min-width: 250px;       /* optional floor for phones */
  width: 100%;
  box-sizing: border-box;
}
/* niceties */
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
}

#stories .marquee {
  width: 100vw;                            /* or 100lvw / 100svw for mobile stability */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;                         /* hide overflowed cards */
}

#stories .marquee__track {
  display: flex;
  gap: 1.5rem;            /* JS reads this via getComputedStyle(track).gap */
  width: max-content;
  will-change: transform;
}
/* Single-cycle animation: move by exactly one original set */
@keyframes marqueeCycle {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--distance)), 0, 0); }
}