/* ==========================================================================
   ZEALYEN INFOTECH — EDITORIAL REDESIGN LAYER
   Bold typography, ambient blob backdrop, numbered cards, marquee strip,
   and a rebuilt footer CTA. Loads after modern.css and only adds/overrides.
   ========================================================================== */

:root {
  --ink: #0A0E1A;
  --lime: #A7F3D0;
  --lime-deep: #10B981;
}

/* -------------------------------------------------------------------- */
/* Ambient blob backdrop — sits behind all page content, whole site      */
/* -------------------------------------------------------------------- */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(480px 420px at 8% 18%, rgba(37,99,235,0.10), transparent 70%),
    radial-gradient(420px 380px at 95% 12%, rgba(16,185,129,0.09), transparent 70%),
    radial-gradient(520px 460px at 90% 85%, rgba(245,158,11,0.06), transparent 70%),
    radial-gradient(460px 400px at 5% 90%, rgba(37,99,235,0.08), transparent 70%);
  filter: blur(10px);
}
.navbar, .hero-header, #footer, .newsletter,
main, .container, .container-fluid { position: relative; z-index: 1; }

/* -------------------------------------------------------------------- */
/* Editorial typography — bigger, tighter, bolder                       */
/* -------------------------------------------------------------------- */
.hero-header h1 {
  font-size: clamp(2.4rem, 6vw, 4rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}
.hero-header h1 span {
  position: relative; display: inline-block; padding-bottom: 0.08em;
}
.hero-header h1 span::after {
  content: '';
  position: absolute; left: 0; bottom: -0.04em; width: 100%; height: 0.1em;
  background: linear-gradient(90deg, var(--lime), transparent);
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  animation: underlineGrow 0.9s var(--ease-out-expo) 0.5s forwards;
}
@keyframes underlineGrow { to { transform: scaleX(1); } }

.section-title h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  letter-spacing: -0.03em !important;
}

/* -------------------------------------------------------------------- */
/* Marquee strip — injected by editorial.js right after .hero-header     */
/* -------------------------------------------------------------------- */
.zt-marquee {
  background: var(--ink);
  overflow: hidden; white-space: nowrap;
  padding: 12px 0;
  position: relative; z-index: 1;
}
.zt-marquee-track {
  display: inline-flex; align-items: center;
  animation: marqueeScroll 26s linear infinite;
  will-change: transform;
}
.zt-marquee:hover .zt-marquee-track { animation-play-state: paused; }
.zt-marquee-item {
  color: var(--lime);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 28px; display: inline-flex; align-items: center; gap: 28px;
}
.zt-marquee-item i { font-size: 8px; color: rgba(167,243,208,0.5); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .zt-marquee-track { animation: none; } }

/* -------------------------------------------------------------------- */
/* Numbered service cards — pure CSS counters, no markup changes needed  */
/* -------------------------------------------------------------------- */
.row:has(> [class*="col"] > .service-item),
.row:has(> [class*="col"] > .service-detail-card) {
  counter-reset: zt-card;
}
.service-item, .service-detail-card { padding-top: 44px; }
.service-item::after, .service-detail-card > .service-detail-header::after {
  counter-increment: zt-card;
  content: "0" counter(zt-card);
  position: absolute; top: 14px; right: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 13px;
  color: var(--primary-mid);
  letter-spacing: 0.02em;
  opacity: 1;
}
.service-item:hover::after { color: var(--primary); }
.service-detail-header { position: relative; }

/* -------------------------------------------------------------------- */
/* Chunkier, more graphic buttons                                        */
/* -------------------------------------------------------------------- */
.btn-primary, .btn-outline-primary, .btn-light, .btn-outline-light {
  border-radius: 14px !important;
  padding: 13px 28px !important;
  font-weight: 700 !important;
}
.hero-header .btn-light {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
.hero-header .btn-light:hover {
  background: var(--lime-deep) !important; border-color: var(--lime-deep) !important; color: var(--ink) !important;
}
.hero-header .btn-outline-light:hover { background: rgba(255,255,255,0.16) !important; }

/* -------------------------------------------------------------------- */
/* Section title — oversized ghost numeral behind the heading            */
/* -------------------------------------------------------------------- */
.section-title { position: relative; }
.section-title::before {
  content: attr(data-num);
  position: absolute; top: -0.5em; left: -0.04em;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: 5rem; color: var(--primary-pale);
  z-index: -1; line-height: 1; user-select: none;
}

/* -------------------------------------------------------------------- */
/* Footer — bold CTA banner injected above the column grid               */
/* -------------------------------------------------------------------- */
.zt-footer-cta {
  padding: 64px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  position: relative; overflow: hidden;
}
.zt-footer-cta::before {
  content: '';
  position: absolute; width: 420px; height: 420px; border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  
  top: -160px; right: -80px; pointer-events: none;
}
.zt-footer-cta-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 28px; position: relative; z-index: 1;
}
.zt-footer-cta h2 {
  color: #fff !important; font-size: clamp(1.9rem, 4.5vw, 3.2rem) !important;
  letter-spacing: -0.03em !important; margin: 0; max-width: 640px; line-height: 1.1 !important;
}
.zt-footer-cta h2 em {
  font-style: normal; color: var(--lime);
}
.zt-footer-cta .btn {
  flex-shrink: 0; white-space: nowrap;
  background: var(--lime) !important; color: var(--ink) !important; border-color: var(--lime) !important;
  font-weight: 800 !important;
}
.zt-footer-cta .btn:hover { background: #fff !important; border-color: #fff !important; transform: translateY(-3px); }

/* -------------------------------------------------------------------- */
/* Mobile tuning                                                         */
/* -------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body::after { display: none; }
  .section-title::before { font-size: 3.2rem; top: -0.35em; }
  .zt-marquee-item { font-size: 12px; padding: 0 18px; }
  .zt-footer-cta-inner { align-items: flex-start; }
}