/* =====================================================
   VIRTEK AI — Animations & Components v2
   ===================================================== */

/* ---- HERO SPECIFIC ---- */
#hero-canvas {
  position:absolute; inset:0; pointer-events:none; z-index:0; width:100%; height:100%;
}

/* ---- HORIZONTAL MARQUEE (client logos / tags) ---- */
.marquee-wrap { overflow:hidden; position:relative; }
.marquee-track {
  display:flex; gap:48px; align-items:center;
  animation: marquee-scroll 25s linear infinite;
  width:max-content;
}
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-item {
  flex-shrink:0; font-family:var(--font-sans); font-size:0.85rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted-light);
  padding:8px 20px; border:1px solid var(--border-light); border-radius:var(--radius-pill);
  white-space:nowrap; transition:all 0.3s;
}
.marquee-item:hover { border-color:var(--navy); color:var(--navy); }

/* ---- COMPARISON TABLE ---- */
.compare-table { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); }
.compare-header {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  background:var(--bg-light);
}
.compare-header-cell {
  padding:16px 20px; font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted-light);
  border-bottom:1px solid var(--border-light);
}
.compare-header-cell.highlight { color:var(--navy); }
.compare-row { display:grid; grid-template-columns:2fr 1fr 1fr; border-bottom:1px solid var(--border-light); }
.compare-row:last-child { border-bottom:none; }
.compare-cell {
  padding:15px 20px; font-size:0.88rem; color:var(--text-secondary-light);
  display:flex; align-items:center;
}
.compare-cell.center { justify-content:center; }
.compare-cell.yes { color:#16A34A; font-size:1.1rem; }
.compare-cell.no { color:#DC2626; font-size:1.1rem; }
.compare-cell.highlight-col { background:rgba(30,42,110,0.03); }

/* ---- PROCESS STEP ---- */
.process-step { display:flex; gap:24px; padding:32px 0; border-bottom:1px solid var(--border-light); }
.process-step:last-child { border-bottom:none; }
.process-step-num {
  font-family:var(--font-serif); font-size:3rem; font-weight:700; line-height:1;
  color:var(--bg-light-2); -webkit-text-stroke:1.5px var(--border-light);
  flex-shrink:0; width:70px; text-align:center;
}
.process-step-content h3 { margin-bottom:8px; font-size:1.2rem; }
.process-step-content p { font-size:0.92rem; }

/* ---- TESTIMONIAL ---- */
.testimonial-card {
  padding:32px; border-radius:var(--radius-lg);
  background:var(--bg-white); border:1px solid var(--border-light);
  transition:all 0.3s;
}
.testimonial-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(30,42,110,0.08); }
.testimonial-quote { font-family:var(--font-serif); font-size:1rem; font-style:italic; color:var(--text-on-light); line-height:1.75; margin-bottom:20px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-san); font-weight:700; color:#fff; font-size:0.9rem;
}
.testimonial-name { font-weight:600; font-size:0.9rem; }
.testimonial-role { font-size:0.8rem; color:var(--text-muted-light); }

/* ---- RESULT PILL ---- */
.result-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius-pill);
  font-size:0.78rem; font-weight:700;
  background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.2);
  color:#16A34A;
}

/* ---- PAGE INNER HERO ---- */
.page-hero {
  padding:160px 0 80px; position:relative; overflow:hidden;
}

/* ---- PORTFOLIO CARD ---- */
.portfolio-card {
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-white); border:1px solid var(--border-light);
  transition:all 0.3s;
}
.portfolio-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(30,42,110,0.1); border-color:rgba(26,111,255,0.2); }
.portfolio-card-img {
  position:relative; height:200px; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-light),var(--bg-light-2));
  display:flex; align-items:center; justify-content:center;
}
.portfolio-cat {
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,0.9); border:1px solid var(--border-light);
  border-radius:var(--radius-pill); padding:4px 12px;
  font-size:0.72rem; font-weight:700; color:var(--navy);
  backdrop-filter:blur(8px);
}
.portfolio-card-body { padding:24px; }
.portfolio-card-body h3 { font-size:1.05rem; margin-bottom:8px; }
.portfolio-card-body p { font-size:0.85rem; margin-bottom:14px; }
.portfolio-metrics { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.portfolio-service-tags { font-size:0.78rem; color:var(--text-muted-light); }

/* ---- FAQ ---- */
.faq-item { border-bottom:1px solid var(--border-light); }
.faq-q {
  padding:22px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-serif); font-size:1.05rem; font-weight:600; color:var(--text-on-light);
  transition:color 0.3s;
}
.faq-q:hover { color:var(--navy); }
.faq-toggle {
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:1.2rem; line-height:1; transition:all 0.3s;
}
.faq-item.open .faq-toggle { transform:rotate(45deg); border-color:var(--navy); color:var(--navy); background:rgba(30,42,110,0.06); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-item.open .faq-a { max-height:300px; }
.faq-a-inner { padding:0 0 22px; font-size:0.92rem; color:var(--text-secondary-light); line-height:1.8; }

/* ---- CONTACT ITEM ---- */
.contact-info-item { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border-light); }
.contact-info-item:last-of-type { border-bottom:none; }
.contact-info-icon { width:42px;height:42px;border-radius:var(--radius-sm);background:var(--bg-light);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0; }
.contact-info-label { font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted-light); }
.contact-info-value { font-size:0.92rem;font-weight:500;color:var(--text-on-light); }

/* ---- FILTER BUTTONS ---- */
.filter-btn { padding:8px 22px;border-radius:var(--radius-pill);font-size:0.84rem;font-weight:600;background:transparent;border:1.5px solid var(--border-light);color:var(--text-secondary-light);cursor:pointer;transition:all .3s; }
.filter-btn.active, .filter-btn:hover { background:var(--navy);border-color:var(--navy);color:#fff; }