/*
Theme Name: Astra Jaaftek
Template: astra
Description: Jaaftek LTD custom child theme — Modern, Bilingual, Glassmorphism
Version: 3.16.0
Author: Jaaftek LTD
*/

/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --blue-950: #172554;
  --blue-900: #1e3a8a;
  --blue-800: #1e40af;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --cyan:     #06b6d4;
  --dark:     #060d1f;
  --dark-2:   #0a0f1e;
  --dark-3:   #0f172a;
  --dark-4:   #1e293b;
  --text:     #e2e8f0;
  --muted:    #94a3b8;
  --white:    #ffffff;
  --grad:     linear-gradient(135deg, #2563eb, #06b6d4);
  --grad-r:   linear-gradient(135deg, #06b6d4, #2563eb);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: blur(20px);
  --radius:   14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --nav-height: 72px;

  /* Override Astra vars */
  --ast-normal-container-width: 100% !important;
  --ast-container-default-xlg-padding: 0px !important;
  --ast-container-default-lg-padding: 0px !important;
  --ast-container-default-slg-padding: 0px !important;
  --ast-container-default-md-padding: 0px !important;
  --ast-container-default-sm-padding: 0px !important;
  --ast-container-default-xs-padding: 0px !important;
  --ast-container-default-xxs-padding: 0px !important;
}

/* ── BASE RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Poppins', -apple-system, sans-serif;
  background: var(--dark) !important;
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}
[dir="rtl"] body,
[dir="rtl"],
html[lang="ar"] body {
  font-family: 'Tajawal', sans-serif !important;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5 {
  font-family: 'Tajawal', sans-serif !important;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-2); }
::-webkit-scrollbar-thumb { background: var(--blue-700); border-radius: 3px; }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
a { color: var(--blue-400); transition: color .2s; text-decoration: none; }
a:hover { color: var(--blue-300); }
img { max-width: 100%; }

/* ── ASTRA LAYOUT OVERRIDES ─────────────────────────────────── */
html, body, #page, .hfeed, .site {
  background: var(--dark) !important;
  background-color: var(--dark) !important;
}
#content.site-content,
.site-content,
#content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
#content > .ast-container,
.site-content > .ast-container,
body #content .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#primary, #main, .site-main,
.content-area, .ast-article-single,
.entry-content, .page .entry-content {
  background: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.entry-header, h1.entry-title, .ast-article-single .entry-header,
#secondary, .widget-area, .ast-sidebar-wrap { display: none !important; }
.site-description { display: none !important; }
.ast-prime-menu-nav { display: none; }

/* ── NAVBAR (GLASSMORPHISM) ──────────────────────────────────── */
#masthead,
.site-header,
header.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background: rgba(6, 13, 31, 0.65) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.4) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: var(--nav-height) !important;
  transition: background .3s, box-shadow .3s !important;
}
.ast-primary-header-bar,
.main-header-bar {
  padding: 0 !important;
  min-height: var(--nav-height) !important;
}
.ast-main-header-wrap { height: 100%; }
.site-primary-header-wrap,
.ast-builder-grid-row { height: var(--nav-height) !important; }

/* Logo */
.ast-site-identity .site-title a,
.site-title a,
span.site-title a {
  color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  font-family: 'Poppins', sans-serif !important;
  letter-spacing: -0.02em !important;
}
.site-title a::before {
  content: '< ' !important;
  color: var(--blue-400) !important;
  font-weight: 800 !important;
}
.site-title a::after {
  content: ' />' !important;
  color: var(--blue-400) !important;
  font-weight: 800 !important;
}

/* Nav links */
#site-navigation .menu-item a,
.main-navigation a,
#primary-menu > li > a,
.ast-primary-menu > li > a,
ul.main-header-menu li a,
#ast-hf-menu-1 li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 0 1rem !important;
  transition: color .2s !important;
  letter-spacing: .01em !important;
}
#site-navigation .menu-item a:hover,
#ast-hf-menu-1 li a:hover { color: #ffffff !important; }

/* Language switcher button in nav */
.jt-lang-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(255,255,255,0.8) !important;
  border-radius: 8px;
  padding: .4rem .9rem !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(10px);
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0;
}
.jt-lang-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,.15);
  color: #fff !important;
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.jt-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* ── GRADIENT TEXT ──────────────────────────────────────────── */
.gt {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SECTION TAG ────────────────────────────────────────────── */
.stag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: var(--blue-400);
  padding: .3rem .85rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.stag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

/* ── SECTION COMMON ─────────────────────────────────────────── */
.jt-sec {
  padding: 96px 0;
  position: relative;
}
.jt-sec-hd {
  text-align: center;
  margin-bottom: 4rem;
}
.jt-sec-hd h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  margin-bottom: .75rem;
  letter-spacing: -.03em;
}
.jt-sec-hd p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: 1rem;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.jbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  border: none;
  font-family: inherit;
}
.jbtn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.jbtn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255,255,255,.15);
  color: #fff;
}
.jbtn-ghost {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.jbtn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
  transform: translateY(-1px);
}
.jbtn-full { width: 100%; justify-content: center; }

/* ── HERO ───────────────────────────────────────────────────── */
.jt-hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(29,78,216,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 50%, rgba(6,182,212,0.08) 0%, transparent 60%),
    var(--dark);
  padding: 40px 0 60px;
}
.jt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.jt-hero::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(29,78,216,.12) 0%, transparent 70%);
  bottom: -200px; right: -200px;
  pointer-events: none;
}
.jt-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.jt-hero-inner h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -.05em;
  margin-bottom: 1.5rem;
  line-height: 1.05;
}
.jt-hero-inner .lead {
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.85;
  font-weight: 400;
}
.jt-hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.jt-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.2);
  color: var(--blue-400);
  padding: .4rem 1rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.jt-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  animation: blink 2s infinite;
}

/* Code block */
.jt-code {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.jt-code-hd {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(59,130,246,.08);
}
.cd { width: 11px; height: 11px; border-radius: 50%; }
.cd-r{background:#ff5f57}.cd-y{background:#febc2e}.cd-g{background:#28c840}
.jt-code-fn { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--muted); margin-left: .4rem; }
.jt-code-body {
  padding: 1.2rem 1.4rem;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  line-height: 1.85;
  color: #cdd6f4;
  overflow-x: auto;
}
.cc { color: #6c7086 }
.ck { color: #cba6f7 }
.cv { color: #89dceb }
.ccl{ color: #f9e2af }
.cs { color: #a6e3a1 }
.cp { color: #89b4fa }
.cf { color: #cba6f7 }
.cb { color: #fab387 }

/* ── SERVICES ───────────────────────────────────────────────── */
.jt-services { background: var(--dark-2); }
.jt-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(29,78,216,.06) 0%, transparent 70%);
  pointer-events: none;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.5), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.svc-card:hover {
  border-color: rgba(59,130,246,.25);
  transform: translateY(-5px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.08);
}
.svc-card:hover::before { opacity: 1; }
.svc-card.hot {
  border-color: rgba(59,130,246,.2);
  background: linear-gradient(135deg, rgba(29,78,216,.1) 0%, rgba(6,182,212,.04) 50%, var(--glass-bg) 100%);
}
.svc-badge {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 100px;
  margin-bottom: .9rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.svc-icon {
  width: 46px; height: 46px;
  background: rgba(37,99,235,.1);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 1.3rem;
}
.svc-card h3 { font-size: 1.05rem; margin-bottom: .6rem; font-weight: 700; }
.svc-card p { color: var(--muted); font-size: .83rem; margin-bottom: 1.1rem; line-height: 1.7; }
.svc-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.svc-list li {
  color: var(--muted);
  font-size: .8rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; align-items: center; gap: .5rem;
}
.svc-list li::before { content: '→'; color: var(--blue-400); font-size: .7rem; flex-shrink: 0; }
[dir="rtl"] .svc-list li { flex-direction: row-reverse; }
[dir="rtl"] .svc-list li::before { content: '←'; }
.svc-link { color: var(--blue-400); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; transition: gap .2s, color .2s; }
.svc-link:hover { color: var(--blue-300); gap: .6rem; }
[dir="rtl"] .svc-link { flex-direction: row-reverse; }

/* ── STATS ──────────────────────────────────────────────────── */
.jt-stats {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(37,99,235,.07) 0%, transparent 70%);
}
.stat-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: .4rem;
  letter-spacing: -.04em;
}
.stat-lbl { color: var(--muted); font-size: .85rem; font-weight: 500; }

/* ── ABOUT ──────────────────────────────────────────────────── */
.jt-about { background: var(--dark-3); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 768px) { .about-inner { grid-template-columns: 1fr; gap: 3rem; } }
[dir="rtl"] .about-inner { direction: rtl; }

.ab-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.ab-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.4rem;
  backdrop-filter: blur(10px);
  transition: border-color .3s;
}
.ab-card:hover { border-color: rgba(59,130,246,.2); }
.ab-icon { font-size: 1.75rem; margin-bottom: .6rem; display: block; }
.ab-card strong { display: block; color: var(--white); font-size: .9rem; margin-bottom: .2rem; font-weight: 600; }
.ab-card span { color: var(--muted); font-size: .78rem; line-height: 1.5; }

.about-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.25rem; letter-spacing: -.03em; }
.about-text p { color: var(--muted); margin-bottom: 1rem; font-size: .9rem; line-height: 1.85; }
.val-list { list-style: none; margin: 1.5rem 0 2rem; }
.val-list li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .7rem; color: var(--muted); font-size: .875rem; }
[dir="rtl"] .val-list li { flex-direction: row-reverse; text-align: right; }
.val-chk {
  width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-400); font-size: .65rem; margin-top: 2px;
}

/* ── TECH MARQUEE ───────────────────────────────────────────── */
.jt-tech { background: var(--dark); overflow: hidden; padding: 80px 0; }
.marquee-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
[dir="rtl"] .marquee-wrap {
  mask-image: linear-gradient(270deg, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
.tech-track {
  display: flex;
  gap: 1rem;
  animation: scroll 35s linear infinite;
  width: max-content;
}
[dir="rtl"] .tech-track { animation-direction: reverse; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tech-pill {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--blue-300);
  padding: .55rem 1.2rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  backdrop-filter: blur(8px);
  transition: border-color .3s;
}

/* ── PROCESS ────────────────────────────────────────────────── */
.jt-process { background: var(--dark-2); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }
.process-grid::before {
  content: '';
  position: absolute;
  top: 30px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.3), transparent);
}
@media (max-width: 900px) { .process-grid::before { display: none; } }
.proc-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  backdrop-filter: blur(10px);
  position: relative;
  transition: all .3s;
}
.proc-card:hover { border-color: rgba(59,130,246,.2); transform: translateY(-4px); }
.proc-num {
  width: 60px; height: 60px;
  background: var(--grad);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 30px rgba(37,99,235,.35);
  position: relative;
}
.proc-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.proc-card p { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* ── CONTACT ────────────────────────────────────────────────── */
.jt-contact { background: var(--dark-3); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) { .contact-inner { grid-template-columns: 1fr; gap: 3rem; } }
[dir="rtl"] .contact-inner { direction: rtl; }

.contact-info h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1rem; letter-spacing: -.03em; }
.contact-info p { color: var(--muted); margin-bottom: 2rem; font-size: .9rem; }
.c-item {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.1rem; color: var(--muted); font-size: .875rem;
}
[dir="rtl"] .c-item { flex-direction: row-reverse; }
.c-icon {
  width: 40px; height: 40px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--blue-400); font-size: .9rem;
}

.jt-form {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.fg { margin-bottom: 1.1rem; }
.fg label { display: block; color: var(--text); font-size: .8rem; font-weight: 500; margin-bottom: .4rem; }
.fg input, .fg select, .fg textarea {
  width: 100%;
  background: rgba(10,15,30,.7);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--white);
  padding: .7rem .9rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .875rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  resize: vertical;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--muted); }
.fg select option { background: var(--dark-2); }
.form-note { text-align: center; color: var(--muted); font-size: .75rem; margin-top: .6rem; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.jt-footer {
  background: var(--dark-2) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  color: var(--muted) !important;
}
#colophon, .site-footer {
  background: var(--dark-2) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
}
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }
[dir="rtl"] .footer-inner { direction: rtl; }
.footer-logo { font-size: 1.25rem; font-weight: 800; color: var(--white); margin-bottom: .75rem; display: inline-block; }
.footer-brand p { color: var(--muted); font-size: .84rem; line-height: 1.7; margin-bottom: 1.5rem; }
.socials { display: flex; gap: .6rem; }
[dir="rtl"] .socials { justify-content: flex-end; }
.socials a {
  width: 36px; height: 36px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: all .2s; font-size: .75rem;
}
.socials a:hover { background: rgba(59,130,246,.1); color: var(--white); border-color: rgba(59,130,246,.25); }
.footer-col h4 { color: var(--white); font-size: .85rem; font-weight: 600; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .55rem; }
.footer-col ul li a { color: var(--muted); font-size: .82rem; transition: color .2s; }
.footer-col ul li a:hover { color: var(--blue-400); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 1.4rem 0;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
}

/* ── MOBILE NAV ─────────────────────────────────────────────── */
@media (max-width: 921px) {
  .ast-mobile-header-wrap,
  #ast-mobile-header {
    background: rgba(6, 13, 31, 0.9) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  #ast-mobile-popup .ast-mobile-menu-trigger,
  .ast-mobile-menu-trigger { color: #fff !important; }
  #ast-mobile-popup { background: rgba(6, 13, 31, 0.97) !important; backdrop-filter: blur(30px) !important; }
  #ast-mobile-popup ul li a { color: rgba(255,255,255,.8) !important; font-size: 1rem !important; }
  .jt-wrap { padding: 0 1rem; }
  .jt-sec { padding: 64px 0; }
  .jt-hero { padding: 30px 0 50px; }
}

/* ── RTL ADJUSTMENTS ────────────────────────────────────────── */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .jt-hero-btns { flex-direction: row-reverse; }
[dir="rtl"] .stag { flex-direction: row-reverse; letter-spacing: 0; }
[dir="rtl"] .jt-badge { flex-direction: row-reverse; letter-spacing: 0; }
[dir="rtl"] .jt-sec-hd { text-align: right; }
[dir="rtl"] .jt-hero-inner { text-align: right; }
[dir="rtl"] .jt-hero-inner .lead { text-align: right; margin: 0 0 2.5rem; }
[dir="rtl"] .jt-hero-btns { justify-content: flex-start; }
[dir="rtl"] .svc-link { flex-direction: row-reverse; }
[dir="rtl"] .c-item { flex-direction: row-reverse; }
[dir="rtl"] .val-list li { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .ab-card { text-align: right; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'Tajawal', sans-serif !important; }
[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span,
[dir="rtl"] li, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] label {
  font-family: 'Tajawal', sans-serif !important;
}
[dir="rtl"] .jt-lang-btn { font-family: 'Poppins', sans-serif !important; }
[dir="rtl"] .jt-code-body, [dir="rtl"] .tech-pill, [dir="rtl"] .jt-code-fn {
  font-family: 'JetBrains Mono', monospace !important;
  direction: ltr;
}
[dir="rtl"] .jt-code { text-align: left; }
[dir="rtl"] .footer-inner { text-align: right; }
[dir="rtl"] .jt-sec-hd p { margin: 0; }
[dir="rtl"] .proc-card { text-align: right; }
[dir="rtl"] .proc-num { margin: 0 auto 1.25rem; }
[dir="rtl"] .stat-card { text-align: center; }

/* ═══════════════════════════════════════════════════════
   v2.1 FIXES: remove invalid !important on CSS vars,
   fix hero, logo caps, service card layout
   ═══════════════════════════════════════════════════════ */

/* Override Astra CSS vars correctly (no !important) */
:root {
  --ast-normal-container-width: 100%;
  --ast-narrow-container-width: 100%;
  --ast-container-default-xlg-padding: 0px;
  --ast-container-default-lg-padding: 0px;
  --ast-container-default-slg-padding: 0px;
  --ast-container-default-md-padding: 0px;
  --ast-container-default-sm-padding: 0px;
  --ast-container-default-xs-padding: 0px;
  --ast-container-default-xxs-padding: 0px;
}

/* Force layout with real properties (not vars) */
body #content > .ast-container,
body .site-content > .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── LOGO ALL CAPS ── */
.site-title a,
.ast-site-identity .site-title a {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── HERO: remove gap above content ── */
.jt-hero {
  min-height: calc(100vh - var(--nav-height, 72px));
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 0 50px !important;
}
.jt-hero .jt-wrap {
  width: 100%;
  text-align: center;
}
.jt-hero .jt-badge {
  display: inline-flex !important;
  margin-bottom: 1.75rem;
}
.jt-hero h1 {
  margin-bottom: 1.25rem;
}
.jt-hero .lead {
  margin: 0 auto 2.25rem !important;
}
.jt-hero-btns {
  justify-content: center !important;
  margin-bottom: 3rem !important;
}

/* ── SERVICE CARDS: force grid layout ── */
.svc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr !important; }
}
.svc-card {
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  padding: 1.75rem !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all .3s !important;
}
.svc-card:hover {
  border-color: rgba(59,130,246,0.25) !important;
  transform: translateY(-5px) !important;
  background: rgba(255,255,255,0.06) !important;
}
.svc-card.hot {
  background: linear-gradient(135deg, rgba(29,78,216,0.1), rgba(6,182,212,0.04), rgba(255,255,255,0.04)) !important;
  border-color: rgba(59,130,246,0.2) !important;
}
.svc-icon {
  font-size: 1.5rem;
  width: 48px; height: 48px;
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 12px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.svc-card h3 { font-size: 1.05rem !important; margin-bottom: .6rem !important; color: #fff !important; }
.svc-card p  { color: #94a3b8 !important; font-size: .83rem !important; margin-bottom: 1rem !important; line-height: 1.7 !important; }
.svc-list { list-style: none !important; padding: 0 !important; margin: 0 0 1.25rem !important; }
.svc-list li {
  color: #94a3b8 !important;
  font-size: .8rem !important;
  padding: .3rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  list-style: none !important;
}
.svc-list li::before { content: '→' !important; color: #60a5fa !important; font-size: .7rem !important; }
.svc-link {
  color: #60a5fa !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  margin-top: auto !important;
}
.svc-badge {
  display: inline-block !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  padding: .2rem .65rem !important;
  border-radius: 100px !important;
  margin-bottom: .9rem !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

/* ── STATS ── */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.stat-card {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  background: #060d1f !important;
}
.stat-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-bottom: .4rem !important;
}
.stat-lbl { color: #94a3b8 !important; font-size: .85rem !important; }

/* ── PROCESS GRID ── */
.process-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr !important; } }
.proc-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  transition: all .3s !important;
}
.proc-num {
  width: 60px !important; height: 60px !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important; font-weight: 900 !important; color: #fff !important;
  margin: 0 auto 1.25rem !important;
}
.proc-card h3 { font-size: 1rem !important; margin-bottom: .5rem !important; color: #fff !important; }
.proc-card p  { color: #94a3b8 !important; font-size: .82rem !important; }

/* ── ABOUT GRID ── */
.about-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
@media (max-width: 768px) { .about-inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; } }
.ab-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .9rem !important;
}
.ab-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 1.4rem !important;
  backdrop-filter: blur(10px) !important;
}
.ab-icon { font-size: 1.75rem !important; margin-bottom: .6rem !important; display: block !important; }
.ab-card strong { display: block !important; color: #fff !important; font-size: .9rem !important; margin-bottom: .2rem !important; }
.ab-card span   { color: #94a3b8 !important; font-size: .78rem !important; }

/* ── CONTACT GRID ── */
.contact-inner {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 4rem !important;
  align-items: start !important;
}
@media (max-width: 900px) { .contact-inner { grid-template-columns: 1fr !important; gap: 3rem !important; } }

/* ── LANGUAGE SWITCHER in nav ── */
#jt-lang-wrap {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
[dir="rtl"] #jt-lang-wrap { margin-left: 0; margin-right: 1rem; }
.jt-lang-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 8px !important;
  padding: .35rem .85rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  backdrop-filter: blur(10px) !important;
  font-family: 'Tajawal', sans-serif !important;
  white-space: nowrap !important;
}
.jt-lang-btn:hover {
  background: rgba(59,130,246,0.15) !important;
  border-color: rgba(59,130,246,0.35) !important;
  color: #fff !important;
}

/* ── SECTION WRAPPERS ── */
.jt-sec { padding: 90px 0 !important; position: relative; }
.jt-sec-hd { text-align: center !important; margin-bottom: 3.5rem !important; }
.jt-sec-hd h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important; margin-bottom: .75rem !important; }
.jt-sec-hd p { color: #94a3b8 !important; max-width: 560px !important; margin: 0 auto !important; }
.stag {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  background: rgba(37,99,235,0.1) !important;
  border: 1px solid rgba(37,99,235,0.25) !important;
  color: #60a5fa !important;
  padding: .3rem .85rem !important;
  border-radius: 100px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: 1rem !important;
}

/* ── SECTION BGs ── */
.jt-services { background: #0a0f1e !important; }
.jt-stats    { background: #060d1f !important; }
.jt-about    { background: #0f172a !important; }
.jt-tech     { background: #060d1f !important; }
.jt-process  { background: #0a0f1e !important; }
.jt-contact  { background: #0f172a !important; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .jt-sec { padding: 60px 0 !important; }
  .jt-hero { padding: 20px 0 40px !important; }
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ══════════════════════════════════════════ */

/* Tablet: 4-col → 2-col */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"],
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* Mobile: everything stacks */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: .75rem !important;
  }
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Padding fixes for mobile sections */
  [style*="padding:7rem 0"],
  [style*="padding:6rem 0"],
  [style*="padding:5rem 0"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [style*="padding:4rem 0"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  [style*="max-width:1200px"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Hero heading size */
  h1[style*="clamp"] { font-size: clamp(2rem,8vw,3rem) !important; }
  h2[style*="clamp"] { font-size: clamp(1.5rem,6vw,2rem) !important; }
  /* Form two-col → single col */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"] {
    grid-template-columns: 1fr !important;
  }
  /* Hide right border on stats on very small screens */
  [style*="border-right:1px solid rgba(255,255,255,.06)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  /* Nav padding */
  .main-header-bar { padding: 0 1rem !important; }
  .jt-footer .jt-wrap { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE COMPREHENSIVE v3.0 — full responsiveness fix
   ═══════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow on any screen */
html { overflow-x: hidden !important; max-width: 100% !important; }
body { overflow-x: hidden !important; max-width: 100% !important; }

/* Code block — prevent overflow on narrow screens */
.jt-code { max-width: 100% !important; width: 100% !important; }
.jt-code-body { overflow-x: auto !important; }

/* Marquee — hard contain */
.jt-tech { overflow: hidden !important; }
.marquee-wrap { overflow: hidden !important; max-width: 100vw !important; }

/* Buttons — always tappable (44px min) */
.jbtn { min-height: 44px !important; }

/* ── Tablets 768–1024px ── */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; }
}

/* ── Small tablets / large phones 481–767px ── */
@media (max-width: 767px) {
  .jt-sec { padding: 64px 0 !important; }
  .jt-sec-hd { margin-bottom: 2.5rem !important; }
  .jt-sec-hd h2 { font-size: clamp(1.65rem, 5.5vw, 2.3rem) !important; }
  .jt-hero { min-height: unset !important; padding: 64px 0 52px !important; }
  .jt-hero-inner h1 { font-size: clamp(2rem, 7.5vw, 3rem) !important; letter-spacing: -.02em !important; }
  .jt-hero-inner .lead { font-size: .925rem !important; }
  .jt-hero-btns { flex-direction: column !important; align-items: center !important; gap: .75rem !important; }
  .jt-hero-btns .jbtn { width: min(100%, 340px) !important; justify-content: center !important; }
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card { padding: 2.25rem 1.25rem !important; }
  .about-inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .contact-inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; padding: 3rem 0 2rem !important; }
}

/* ── Phones 481px and below ── */
@media (max-width: 480px) {
  .jt-wrap { padding: 0 1rem !important; }
  .jt-sec { padding: 52px 0 !important; }
  .jt-hero { padding: 52px 0 44px !important; }
  .jt-hero-inner h1 { font-size: clamp(1.85rem, 8vw, 2.6rem) !important; }
  .jt-hero-inner .lead { font-size: .875rem !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card { padding: 1.75rem .75rem !important; }
  .stat-num { font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important; }
  .about-inner { gap: 2rem !important; }
  .ab-cards { grid-template-columns: 1fr !important; }
  .process-grid { grid-template-columns: 1fr !important; }
  .proc-card { padding: 1.5rem 1.25rem !important; }
  .jt-form { padding: 1.5rem 1.25rem !important; border-radius: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 2.5rem 0 1.5rem !important; }
  .jt-sec-hd h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .jt-sec-hd { margin-bottom: 2rem !important; }
  .c-item { gap: .75rem !important; }
  .contact-inner { gap: 2rem !important; }
}

/* ── Very small phones ≤360px ── */
@media (max-width: 360px) {
  .jt-wrap { padding: 0 .875rem !important; }
  .jt-hero-inner h1 { font-size: 1.8rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-card { padding: 1.5rem !important; }
  .jt-form { padding: 1.25rem .875rem !important; }
  .svc-card { padding: 1.25rem !important; }
}

/* ── Mobile nav touch targets ── */
@media (max-width: 921px) {
  .ast-mobile-menu-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #masthead, .site-header, .ast-primary-header-bar, .main-header-bar {
    height: auto !important;
    min-height: var(--nav-height) !important;
  }
}

/* ── RTL mobile centering ── */
@media (max-width: 767px) {
  [dir=rtl] .jt-hero-btns { justify-content: center !important; flex-direction: column !important; align-items: center !important; }
  [dir=rtl] .jt-sec-hd { text-align: center !important; }
  [dir=rtl] .jt-hero-inner { text-align: center !important; }
  [dir=rtl] .jt-hero-inner .lead { text-align: center !important; margin: 0 auto 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   INLINE-STYLE TARGETED OVERRIDES — raw HTML page content
   ═══════════════════════════════════════════════════════════ */

/* Hero section: remove tall min-height on mobile, reduce padding */
@media (max-width: 767px) {
  [style*="min-height:calc(100vh - 72px)"] {
    min-height: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 48px !important;
  }
  [style*="padding:80px 0 60px"] {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
  }
  /* Reduce wrapper side padding for all 1200px max containers */
  [style*="max-width:1200px"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Lead text size */
  [style*="font-size:1.2rem"] { font-size: 1rem !important; }
  /* Flex hero buttons — force stack on small screens */
  [style*="flex-wrap:wrap"][style*="justify-content:center"] {
    flex-wrap: wrap !important;
    gap: .75rem !important;
  }
}

/* Sections: reduce 6rem padding on mobile */
@media (max-width: 767px) {
  [style*="padding:6rem 0"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [style*="padding:3rem 0"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Stats individual cells: reduce padding */
@media (max-width: 767px) {
  [style*="padding:2rem 1rem"][style*="border-right"] {
    padding: 1.5rem 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }
}

/* Extra small: aggressive reductions */
@media (max-width: 480px) {
  [style*="padding:6rem 0"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  [style*="padding:80px 0 60px"],
  [style*="min-height:calc(100vh - 72px)"] {
    padding-top: 52px !important;
    padding-bottom: 40px !important;
  }
  /* Force CTA buttons to full width */
  [style*="flex-wrap:wrap"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Service / about / process grids: already handled by previous selectors */
  [style*="gap:4rem"] {
    gap: 2rem !important;
  }
  [style*="gap:5rem"] {
    gap: 2rem !important;
  }
  /* Contact form padding */
  [style*="padding:2.5rem"] {
    padding: 1.5rem 1.25rem !important;
  }
  /* Reduce h2 inline font sizes */
  [style*="font-size:2.4rem"],
  [style*="font-size:2.5rem"],
  [style*="font-size:2.6rem"],
  [style*="font-size:2.8rem"],
  [style*="font-size:3rem"] {
    font-size: clamp(1.6rem,6vw,2.2rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTION-ID RESPONSIVE OVERRIDES v4.0
   Target page sections directly by their HTML ids
   Works on all devices — tablets (≤900px), phones (≤600px)
   ═══════════════════════════════════════════════════════════ */

/* ── Global: prevent ANY horizontal overflow ── */
html, body, #page { overflow-x: hidden !important; max-width: 100vw !important; }
section, div { max-width: 100% !important; box-sizing: border-box !important; }
img, svg { max-width: 100% !important; height: auto !important; }

/* ── Tablet ≤900px ── */
@media (max-width: 900px) {
  /* Hero: kill tall min-height, shrink padding */
  #hero {
    min-height: 0 !important;
    padding: 64px 0 52px !important;
  }
  /* All section inner containers: reduce side padding */
  #hero > div,
  #stats > div,
  #services > div,
  #about > div,
  #contact > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Stats: 4-col → 2-col */
  #stats > div > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Services: 3-col → 2-col */
  #services > div > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* About: side-by-side → stacked */
  #about > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  /* Contact: asymmetric → stacked */
  #contact > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  /* Reduce section vertical padding */
  #services, #about, #contact {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  #stats { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* ── Phones ≤600px ── */
@media (max-width: 600px) {
  /* Hero adjustments */
  #hero { padding: 52px 0 44px !important; }
  #hero > div { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Hero h1: reduce font */
  #hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.8rem) !important; }
  /* Lead text */
  #hero p { font-size: 1rem !important; max-width: 100% !important; }

  /* Hero code block */
  #hero > div > div:last-child {
    max-width: 100% !important;
    margin-top: 2rem !important;
  }

  /* Hero buttons: stack */
  #hero > div > div[style*=flex-wrap] {
    flex-direction: column !important;
    align-items: center !important;
    gap: .75rem !important;
  }
  #hero > div > div[style*=flex-wrap] > a {
    width: min(100%, 300px) !important;
    justify-content: center !important;
  }

  /* All section containers */
  #stats > div,
  #services > div,
  #about > div,
  #contact > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Stats: 2-col at ≤600px */
  #stats > div > div { grid-template-columns: repeat(2, 1fr) !important; }
  #stats > div > div > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; padding: 1.5rem .75rem !important; }

  /* Services: 1-col */
  #services > div > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  #services { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* About tech cards: 2-col stays ok; text before cards */
  #about > div > div:first-child { gap: 2rem !important; }
  #about > div > div:first-child > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }
  #about { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Contact form */
  #contact > div > div:first-child { gap: 2rem !important; }
  #contact > div > div:first-child > div:last-child {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
  #contact { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Section headings */
  #services > div > div:first-child h2,
  #about h2, #contact h2 {
    font-size: clamp(1.55rem, 6vw, 2.2rem) !important;
  }
}

/* ── Very small phones ≤420px ── */
@media (max-width: 420px) {
  #stats > div > div { grid-template-columns: 1fr !important; }
  #hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
  #hero > div { padding-left: .875rem !important; padding-right: .875rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET + OTHER PAGES FIX v4.1
   Covers inner pages (Services, About, Contact) which have
   no section IDs — uses attribute selectors for those pages
   ═══════════════════════════════════════════════════════════ */

/* KEY FIX: 3-column grids collapse to 2-col on tablet (900px) */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Section side padding */
  [style*="padding:0 2rem"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Section vertical padding */
  [style*="padding:7rem 0"],
  [style*="padding:6rem 0"],
  [style*="padding:5rem 0"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [style*="padding:4rem 0"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* Phones: 3-col → 1-col */
@media (max-width: 600px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighten side padding */
  [style*="padding:0 2rem"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Section padding further reduced */
  [style*="padding:7rem 0"],
  [style*="padding:6rem 0"],
  [style*="padding:5rem 0"] {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CLASS-BASED GRID RESPONSIVE SYSTEM v5.0
   Applied to DB content — reliable, no attribute selectors
   ═══════════════════════════════════════════════════════════ */

/* Base grid definitions (override inline) */
.jt-g3 { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1.25rem !important; }
.jt-g4 { display: grid !important; grid-template-columns: repeat(4,1fr) !important; }
.jt-g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; align-items: center !important; }
.jt-g2-sm { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
.jt-g-contact { display: grid !important; gap: 4rem !important; align-items: start !important; }
.jt-btn-group { display: flex !important; gap: 1rem !important; justify-content: center !important; flex-wrap: wrap !important; }

/* Container padding */
.jt-g3, .jt-g4, .jt-g2, .jt-g2-sm, .jt-g-contact { box-sizing: border-box !important; width: 100% !important; }

/* ── Tablet ≤900px ── */
@media (max-width: 900px) {
  .jt-g3 { grid-template-columns: repeat(2,1fr) !important; }
  .jt-g4 { grid-template-columns: repeat(2,1fr) !important; }
  .jt-g2 { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .jt-g-contact { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}

/* ── Mobile ≤600px ── */
@media (max-width: 600px) {
  .jt-g3 { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .jt-g4 { grid-template-columns: repeat(2,1fr) !important; }
  .jt-g2-sm { grid-template-columns: repeat(2,1fr) !important; gap: .75rem !important; }
  .jt-btn-group { flex-direction: column !important; align-items: center !important; }
  .jt-btn-group > a, .jt-btn-group > button { width: min(100%, 300px) !important; justify-content: center !important; }
}

/* ── Very small ≤360px ── */
@media (max-width: 360px) {
  .jt-g4 { grid-template-columns: 1fr !important; }
  .jt-g2-sm { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════
   MOBILE MENU — DARK OVERRIDE  (v3.2)
   Astra inline CSS sets white bg; beat it with specificity + !important
   ════════════════════════════════════════════════════ */

/* Hamburger icon */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger,
.ast-mobile-menu-trigger span,
.ast-mobile-menu-trigger svg { color: #fff !important; }
.mobile-menu-toggle-icon .ast-mobile-svg,
#ast-mobile-header .ast-mobile-svg { fill: #fff !important; }

/* Popup / slide-out drawer */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner { background-color: #060d1f !important; background: #060d1f !important; }

/* Close button */
.ast-mobile-popup-drawer.active .menu-toggle-close,
.menu-toggle-close { color: #fff !important; }

/* Mobile header content strip */
.ast-mobile-header-wrap .ast-mobile-header-content,
#ast-mobile-header .ast-mobile-header-content { background-color: #060d1f !important; background: #060d1f !important; }

/* Nav list & items backgrounds */
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu { background-color: #060d1f !important; background: #060d1f !important; }

/* Nav link text */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .ast-menu-toggle,
.ast-mobile-header-wrap .ast-mobile-header-content a { color: rgba(255,255,255,.75) !important; font-family: 'Poppins', sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; }

/* Nav link hover / active */
.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current_page_item > .menu-link { color: #60a5fa !important; background: rgba(37,99,235,.08) !important; }

/* Separator between nav items */
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu { border-color: rgba(255,255,255,.06) !important; }
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link { border-style: solid !important; border-width: 0 0 1px 0 !important; border-color: rgba(255,255,255,.06) !important; }

/* ── DESKTOP NAV — active state & polish ── */
#ast-desktop-header .main-header-menu .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu .current_page_item > .menu-link,
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a { color: #fff !important; }
#ast-desktop-header .main-header-menu .menu-item > .menu-link,
ul.main-header-menu > li > a { color: rgba(255,255,255,.7) !important; font-weight: 500 !important; font-size: .875rem !important; letter-spacing: .01em !important; padding: 0 .9rem !important; }
#ast-desktop-header .main-header-menu .menu-item:hover > .menu-link,
ul.main-header-menu > li:hover > a { color: #fff !important; }


/* ════════════════════════════════════════════════════
   DESKTOP HEADER — WIDE SCREEN LAYOUT FIX  (v3.3)
   Problem: logo far-left, nav far-right, huge empty center
   Fix: let dark BG fill 100%, constrain logo+nav to 1100px centered
   ════════════════════════════════════════════════════ */
@media (min-width: 922px) {

  /* Step 1: header background container goes edge-to-edge */
  .ast-primary-header-bar,
  .main-header-bar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #ast-desktop-header .site-primary-header-wrap.ast-container,
  .main-header-bar > .ast-container,
  .ast-primary-header-bar > .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Step 2: the actual logo+nav row — constrained and centered */
  #ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-has-sides {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 2.5rem !important;
    box-sizing: border-box !important;
    grid-template-columns: auto 1fr !important;
  }

  /* Step 3: logo section */
  #ast-desktop-header .site-header-primary-section-left {
    flex-shrink: 0 !important;
  }

  /* Step 4: nav section fills remaining space, items right-aligned */
  #ast-desktop-header .site-header-primary-section-right,
  #ast-desktop-header .ast-grid-right-section {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 0 !important;
    gap: 0 !important;
  }

  /* Step 5: nav links — clean, modern look */
  #ast-desktop-header ul.main-header-menu > li > a,
  #ast-desktop-header ul.main-header-menu > li > .menu-link,
  #ast-hf-menu-1 > li > a {
    color: rgba(255,255,255,.65) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: .02em !important;
    padding: .5rem 1rem !important;
    border-radius: 6px !important;
    transition: color .15s, background .15s !important;
    line-height: 1.4 !important;
  }
  #ast-desktop-header ul.main-header-menu > li:hover > a,
  #ast-desktop-header ul.main-header-menu > li:hover > .menu-link,
  #ast-hf-menu-1 > li:hover > a { color: #fff !important; background: rgba(255,255,255,.06) !important; }

  #ast-desktop-header ul.main-header-menu > li.current-menu-item > a,
  #ast-desktop-header ul.main-header-menu > li.current_page_item > a {
    color: #fff !important;
    background: rgba(37,99,235,.12) !important;
  }

  /* Step 6: logo text — crisp */
  .ast-site-identity .site-title a,
  .site-title a {
    font-size: 1.05rem !important;
    letter-spacing: .07em !important;
    font-weight: 800 !important;
  }
}

/* ── Arabic nav font (Tajawal) ── */
[lang="ar"] .menu-link,
[lang="ar"] #ast-hf-menu-1 a,
[lang="ar"] .main-header-menu a,
[lang="ar"] .ast-builder-menu-mobile .main-header-menu a {
  font-family: 'Tajawal', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ── Arabic nav font — high-specificity override (v3.7) ── */
[lang="ar"] #ast-desktop-header ul.main-header-menu > li > a,
[lang="ar"] #ast-desktop-header ul.main-header-menu > li > .menu-link,
[lang="ar"] #ast-hf-menu-1 > li > a,
[lang="ar"] #ast-hf-menu-1 a,
[lang="ar"] .main-header-menu .menu-link,
[lang="ar"] .main-header-menu a {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
/* ── Nav beside logo, lang button on outer edge (v3.14) ── */
@media (min-width: 922px) {
  /* Nav section: start items at the inner edge (beside logo) */
  #ast-desktop-header .site-header-primary-section-right,
  #ast-desktop-header .ast-grid-right-section {
    justify-content: flex-start !important;
  }
  /* Push lang button to the outer edge (far right in LTR, far left in RTL) */
  #jt-lang-wrap {
    margin-inline-start: auto !important;
  }
}

/* ── Arabic mobile menu RTL (v3.15) ── */
[lang="ar"] #ast-mobile-header .ast-builder-grid-row,
[lang="ar"] #ast-mobile-header .ast-builder-grid-row.ast-builder-grid-row-has-sides {
  direction: rtl !important;
}
[lang="ar"] .ast-mobile-popup-drawer,
[lang="ar"] .ast-mobile-popup-inner,
[lang="ar"] .ast-mobile-header-content,
[lang="ar"] .ast-builder-menu-mobile .main-navigation {
  direction: rtl !important;
}
[lang="ar"] .ast-mobile-popup-drawer .menu-item,
[lang="ar"] .ast-mobile-popup-drawer .menu-link,
[lang="ar"] .ast-builder-menu-mobile .menu-link {
  text-align: right !important;
}

/* ═══════════════════════════════════════════
   AI FUTURISTIC ANIMATIONS  v3.17
   ═══════════════════════════════════════════ */

/* ── Animated gradient text ── */
.gt, [style*="background:linear-gradient(135deg,#2563eb,#06b6d4);-webkit-background-clip:text"] {
  background: linear-gradient(135deg,#2563eb,#06b6d4,#818cf8,#2563eb) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gt-flow 6s ease infinite !important;
}
@keyframes gt-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Background grid ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}
#page, #masthead, .jt-footer { position: relative; z-index: 1; }

/* ── Ambient hero glows ── */
#hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 65%);
  pointer-events: none;
  animation: glow-drift 10s ease-in-out infinite;
  z-index: 0;
}
#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(6,182,212,.1) 0%, transparent 65%);
  pointer-events: none;
  animation: glow-drift 13s ease-in-out infinite reverse;
  z-index: 0;
}
@keyframes glow-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.1); }
  66%      { transform: translate(-25px,35px) scale(0.92); }
}

/* ── Scroll reveal ── */
.jt-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.jt-reveal.jt-in { opacity: 1; transform: translateY(0); }
.jt-reveal-left  { opacity: 0; transform: translateX(-50px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.jt-reveal-left.jt-in { opacity: 1; transform: translateX(0); }

/* stagger siblings */
.jt-stagger > *:nth-child(1) { transition-delay:.05s !important; }
.jt-stagger > *:nth-child(2) { transition-delay:.15s !important; }
.jt-stagger > *:nth-child(3) { transition-delay:.25s !important; }
.jt-stagger > *:nth-child(4) { transition-delay:.35s !important; }
.jt-stagger > *:nth-child(5) { transition-delay:.45s !important; }
.jt-stagger > *:nth-child(6) { transition-delay:.55s !important; }

/* ── Hero entrance ── */
.jt-hero-in > * {
  animation: hero-slide-up .9s cubic-bezier(.16,1,.3,1) both;
}
.jt-hero-in > *:nth-child(1) { animation-delay:.05s; }
.jt-hero-in > *:nth-child(2) { animation-delay:.18s; }
.jt-hero-in > *:nth-child(3) { animation-delay:.30s; }
.jt-hero-in > *:nth-child(4) { animation-delay:.42s; }
.jt-hero-in > *:nth-child(5) { animation-delay:.54s; }
@keyframes hero-slide-up {
  from { opacity:0; transform: translateY(36px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Badge float ── */
#hero > div > div:first-child {
  animation: badge-float 4s ease-in-out infinite;
}
@keyframes badge-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── Card hover glow ── */
#services > div > div > div,
#about > div > div,
.jt-grid > div {
  transition: transform .3s ease, box-shadow .3s ease !important;
}
#services > div > div > div:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 64px rgba(37,99,235,.25), 0 0 0 1px rgba(37,99,235,.3) !important;
}

/* ── Stat number pulse ── */
.jt-counter {
  display: inline-block;
  transition: transform .2s ease;
}

/* ── Button shimmer ── */
a[href="#contact"][style*="linear-gradient"],
a[href="/contact"][style*="linear-gradient"],
.jbtn-primary {
  position: relative;
  overflow: hidden;
}
a[href="#contact"][style*="linear-gradient"]::before,
a[href="/contact"][style*="linear-gradient"]::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine {
  0%       { left: -75%; }
  40%,100% { left: 140%; }
}

/* ── Process step number glow ── */
@keyframes step-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}

/* ── Marquee items ── */
.marquee-item { transition: filter .3s ease; }
.marquee-item:hover { filter: brightness(1.4); }

/* ── Footer brand pulse ── */
.footer-logo span { transition: text-shadow .3s ease; }
.footer-logo:hover span { text-shadow: 0 0 20px rgba(96,165,250,.6); }

/* ── Cursor blink on code block ── */
@keyframes cursor { 50% { opacity: 0; } }