html, body { margin: 0; background: var(--ink-800); }
  .site-scroll { height: 100vh; overflow-y: auto; scroll-behavior: smooth; }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--ink-450); border-radius: 10px; }
  ::-webkit-scrollbar-track { background: var(--ink-900); }
  .jbtn:active { transform: scale(.98); }

/* ---- interactive helpers (vanilla, replaces React state) ---- */
[data-href] { cursor: pointer; }

/* category filter active state */
.filter-btn.is-active {
  background: var(--gold-500) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  font-weight: 700;
}

/* header mega menu — open/close on click */
.mega { display: none !important; }
.navitem.is-open .mega { display: grid !important; }
.navitem.is-open > button .lucide-chevron-down,
.navitem.is-open > button [data-lucide="chevron-down"] { transform: rotate(180deg); }
.navitem > button .lucide-chevron-down,
.navitem > button [data-lucide="chevron-down"] { transition: transform .2s ease; }

/* card hover lift (mirrors original onMouseEnter) */
.svc-card:hover,
.prod-card:hover,
.proj-card:hover { transform: translateY(-4px); }

/* ---- hero Swiper slider ---- */
.hero-swiper .jadHero { width: 100%; }
.hero-swiper .swiper-slide { height: auto; }
.jadHero .swiper-button-next,
.jadHero .swiper-button-prev { color: var(--gold-500); }
.jadHero .swiper-button-next::after,
.jadHero .swiper-button-prev::after { font-size: 26px; }
.jadHero .swiper-pagination-bullet {
  background: var(--fg-muted);
  opacity: .6;
}
.jadHero .swiper-pagination-bullet-active {
  background: var(--gold-500);
  opacity: 1;
}
/* RTL: keep prev on the right, next on the left (Swiper handles dir, this just ensures spacing) */
.jadHero .swiper-button-prev,
.jadHero .swiper-button-next { width: 44px; height: 44px; }

/* ---- hero slide content: staggered entrance on the active slide ---- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.jadHero .swiper-slide-active .t-eyebrow { animation: heroIn .7s .15s both; }
.jadHero .swiper-slide-active .t-display { animation: heroIn .7s .30s both; }
.jadHero .swiper-slide-active .t-lead    { animation: heroIn .7s .45s both; }
.jadHero .swiper-slide-active .jbtn      { animation: heroIn .7s .60s both; }

/* ---- scroll reveal (added by js: .reveal -> .reveal.in) ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .jadHero .swiper-slide-active .t-eyebrow,
  .jadHero .swiper-slide-active .t-display,
  .jadHero .swiper-slide-active .t-lead,
  .jadHero .swiper-slide-active .jbtn { animation: none !important; }
}

/* ============================================================
   Service cards — centered ring icon design (light & dark)
   ============================================================ */
.service-card {
  text-align: center;
  padding: 42px 28px 34px;
  border-radius: var(--r-lg);
  cursor: pointer;
  position: relative;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.service-ring {
    width: 86px;
    height: 86px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px  solid #fff;
    transition: border-color .28s ease, background .28s ease, transform .28s ease;
}
.service-ring svg {
    stroke-width: 1.5px;
    fill: #15bedf;
    stroke: #15bedf;
}
.service-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--gold-500);
  margin-bottom: 8px;
}
.service-title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
}
.service-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}
.service-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--gold-500);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.service-more svg { stroke-width: 2px; }
.service-card:hover .service-more { opacity: 1; transform: none; }
.service-card:hover { transform: translateY(-6px); }
.service-card:hover .service-ring { transform: scale(1.06); }

/* light variant (home, on mist background) */
.service-card.light {
  background: var(--paper);
  border: 1px solid var(--cloud);
  box-shadow: var(--shadow-sm);
}
.service-card.light .service-ring { border-color: var(--cloud); color: var(--gold-600); }
.service-card.light .service-title { color: var(--ink-550); }
.service-card.light .service-desc { color: var(--slate-500); }
.service-card.light:hover { box-shadow: var(--shadow-md); border-color: var(--gold-400); }
.service-card.light:hover .service-ring { border-color: var(--gold-400); background: rgba(21,190,223,.08); }

/* dark variant (services page, on ink background) */
.service-card.dark {
  background: var(--ink-600);
  border: 1px solid var(--ink-450);
}
.service-card.dark .service-ring { border-color: var(--ink-400); color: var(--gold-400); }
.service-card.dark .service-title { color: var(--fg); }
.service-card.dark .service-desc { color: var(--fg-muted); }
.service-card.dark:hover { box-shadow: var(--shadow-md); border-color: var(--gold-500); }
.service-card.dark:hover .service-ring { border-color: var(--gold-500); background: rgba(21,190,223,.10); }

/* ============================================================
   Clients logo wall (filterable)
   ============================================================ */
.clients-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.client-logo {
  border-radius: var(--r-md);
  background: var(--ink-700);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.client-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .22s ease;
}
.client-logo:hover {
  transform: translateY(-3px);
  border-color: var(--gold-600);
  box-shadow: var(--shadow-md);
}
.client-logo:hover img { opacity: 1; }
@media (max-width: 960px) { .clients-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .clients-wall { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Testimonials slider
   ============================================================ */
.testi-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.testi-title { margin: 10px 0 0; color: var(--fg); }
.testiSwiper { max-width: 840px; margin: 0 auto; padding-bottom: 12px; }
.testiSwiper .swiper-pagination { position: static !important; margin-top: 34px; }
.testi-card { text-align: center; padding: 6px 16px; }
.testi-quote { display: inline-flex; color: var(--gold-500); transform: scaleX(-1); }
.testi-text {
  margin: 20px 0 28px;
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(18px, 2.2vw, 24px);
}
.testi-person { display: inline-flex; align-items: center; gap: 14px; justify-content: center; }
.testi-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--gold-600);
  box-shadow: 0 0 0 4px rgba(21,190,223,.10);
}
.testi-meta { text-align: start; }
.testi-name { color: var(--gold-400); font-weight: 700; font-size: 15px; }
.testi-role { color: var(--fg-faint); font-size: 13px; margin-top: 2px; }
.testiSwiper .swiper-pagination-bullet { background: var(--fg-muted); opacity: .6; }
.testiSwiper .swiper-pagination-bullet-active { background: var(--gold-500); opacity: 1; }

/* clients logo slider (home) */
.clientsSwiper { padding: 6px 46px 14px; }
.clientsSwiper .swiper-slide { height: auto; }
.clientsSwiper .client-logo { width: 100%; aspect-ratio: 3 / 2; }
.clientsSwiper .swiper-button-next,
.clientsSwiper .swiper-button-prev { color: var(--gold-500); width: 30px; height: 30px; }
.clientsSwiper .swiper-button-next::after,
.clientsSwiper .swiper-button-prev::after { font-size: 20px; }
.clientsSwiper .swiper-pagination { position: static !important; margin-top: 26px; }
.clientsSwiper .swiper-pagination-bullet { background: var(--fg-muted); opacity: .6; }
.clientsSwiper .swiper-pagination-bullet-active { background: var(--gold-500); opacity: 1; }