/* ═══════════════════════════════════════════════════════════════
   SIRA Design System — سيرا للتقنية والاتصالات
   v1.0 · RTL-first · Light, calm & premium · Motion-rich
   Palette from the Sira brand mark: Cyan / Deep Navy / Gold
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────── */
  --cyan:        #17C3DE;
  --cyan-bright: #3ADCEF;
  --cyan-deep:   #0BA5C9;
  --cyan-ink:    #087E9C;
  --navy:        #16283C;
  --navy-2:      #1E3350;
  --navy-3:      #2E4560;
  --ink:         #0E1C2E;
  --gold:        #F0B341;
  --gold-deep:   #E1961F;
  --gold-soft:   #F7C051;

  /* ── Surfaces ──────────────────────────── */
  --bg:          #F6F9FC;
  --bg-2:        #EEF4F9;
  --surface:     #FFFFFF;
  --border:      #E3EBF3;
  --border-2:    #D3DfE9;

  /* ── Text ──────────────────────────────── */
  --text:        #14202E;
  --text-2:      #3D4E63;
  --text-3:      #67788D;
  --muted:       #8D9CAE;

  /* ── Effects ───────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(14, 28, 46, .05);
  --shadow-sm:   0 2px 10px rgba(14, 28, 46, .06);
  --shadow-md:   0 12px 32px rgba(14, 28, 46, .09);
  --shadow-lg:   0 28px 70px rgba(14, 28, 46, .13);
  --glow-cyan:   0 10px 34px rgba(11, 165, 201, .30);
  --glow-gold:   0 10px 30px rgba(240, 179, 65, .30);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --container: 1240px;
  --header-h: 78px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Professional web fonts first, then a robust Arabic-capable fallback chain
     (Segoe UI / Noto Sans Arabic / Tahoma cover Arabic if Google Fonts fail —
     so text never drops to a glyph-less font and never reflows into icons). */
  --font-head: 'Alexandria', 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', 'Noto Sans Arabic', 'Tahoma', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Alexandria', 'Tajawal', 'Segoe UI', 'Noto Sans Arabic', 'Tahoma', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ═══════════════ Base ═══════════════ */
* { box-sizing: border-box; }

html {
  overflow-x: hidden; /* with body's overflow-x, fully contains any horizontal overflow */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 15.5px;
  direction: rtl;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Inline icons that sit next to text must keep their box and never be crushed
   into (or overlapped by) the label when space is tight. Scoped to inline UI
   controls so full-bleed illustration SVGs (hero dashboard etc.) are untouched. */
.btn svg, .badge svg, .pill svg, .chip svg, .eyebrow svg,
.nav-links a svg, .nav-drop-menu a svg, .more svg, .footer-contact-item svg,
.footer-cr-verify svg, .footer-cr-badge svg, .theme-toggle svg,
.faq-item summary svg, .accordion-head svg { flex-shrink: 0; }

/* Visible keyboard focus (accessibility floor) — brand ring, both themes,
   never shown for mouse users thanks to :focus-visible. */
:focus-visible {
  outline: 2.5px solid var(--cyan-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
a:focus-visible, .btn:focus-visible, button:focus-visible,
summary:focus-visible, .nav-links a:focus-visible {
  outline: 2.5px solid var(--cyan-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(23, 195, 222, .18);
}
.hero :focus-visible, .section-dark :focus-visible, .cta-banner :focus-visible,
.site-footer :focus-visible, .mega-cta :focus-visible, .panel.dark :focus-visible {
  outline-color: var(--cyan-bright);
}

/* ---- Mobile safety + performance ---- */
.swiper { overflow: hidden; max-width: 100%; } /* clip off-screen slides even before CDN css loads */
@media (max-width: 700px) {
  .hero-stage, .hero-stage .ill, .ill { max-width: 100%; }
  /* GPU-heavy effects that cause scroll jank + drain battery on phones — disable them.
     backdrop-filter re-blurs the whole viewport every scroll frame (worst offender on the
     sticky header); the animated .aurora blobs run a blur(90px) animation forever. */
  .site-header, .mobile-menu, .btn-outline, .glass-card, .hero-pill, .hero-chip-float {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .btn-outline { background: rgba(255,255,255,.95); }
  .glass-card  { background: rgba(255,255,255,.94); }
  .aurora::before, .aurora::after,
  .hero-stage-glow, .bg-ornament { display: none; }
  /* animate opacity/transform only; kill lingering will-change layers after reveal */
  [data-reveal].is-visible, [data-reveal-stagger] > * { will-change: auto; }
}
::selection { background: rgba(23, 195, 222, .25); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--navy-3), var(--navy));
  border-radius: 8px; border: 2.5px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan-deep); }

/* ═══════════════ Layout ═══════════════ */
.container {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 24px;
}
.section { padding: 104px 0; position: relative; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 136px 0; }
.section-flush { padding: 0; }

@media (max-width: 768px) {
  .section { padding: 66px 0; }
  .section-lg { padding: 88px 0; }
}

/* ═══════════════ Typography ═══════════════ */
/* Arabic-safe typography: NO negative letter-spacing (it breaks the
   connected script), generous line-heights, descender-safe gradients. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0; font-weight: 700; line-height: 1.45;
  letter-spacing: 0;
}
h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.4; }
h2 { font-size: clamp(25px, 3.2vw, 40px); font-weight: 800; line-height: 1.45; }
h3 { font-size: clamp(19px, 2vw, 24px); }
h4 { font-size: 17px; }
p  { color: var(--text-2); margin: 0 0 12px; }
.lead { font-size: 17px; color: var(--text-2); line-height: 2; }

.gradient-text {
  background: linear-gradient(110deg, var(--cyan-ink) 0%, var(--cyan) 45%, var(--gold) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: gradientShift 7s ease-in-out infinite;
  /* keep Arabic descenders (ى ي ق ج …) from being clipped */
  padding-bottom: .12em; margin-bottom: -.12em;
  display: inline-block;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--cyan-ink);
  background: rgba(23, 195, 222, .09);
  border: 1px solid rgba(23, 195, 222, .22);
  padding: 7px 16px; border-radius: 999px;
  letter-spacing: .2px;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(23,195,222,.5);
  animation: dotPulse 2.4s infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(23,195,222,.45); }
  70% { box-shadow: 0 0 0 8px rgba(23,195,222,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,195,222,0); }
}
.eyebrow.gold { color: #B0740E; background: rgba(240,179,65,.10); border-color: rgba(240,179,65,.30); }
.eyebrow.gold::before { background: var(--gold); animation: none; }

.section-head { text-align: center; margin: 0 auto 58px; max-width: 780px; }
.section-head h2 { margin: 16px 0 14px; }
.section-head .lead { color: var(--text-3); }

.section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 auto 4px; max-width: 420px;
  font-size: 13px; font-weight: 700; color: var(--cyan-ink);
  letter-spacing: 1px;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}

/* ═══════════════ Buttons ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 28px; border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600; font-size: 15px; white-space: nowrap;
  cursor: pointer; border: 1.5px solid transparent;
  position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* shine sweep */
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  right: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: right .6s var(--ease);
  pointer-events: none;
}
.btn:hover::after { right: 120%; }

.btn-primary {
  background: linear-gradient(135deg, var(--cyan-deep) 0%, var(--cyan) 100%);
  color: #fff;
  box-shadow: var(--glow-cyan);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(11,165,201,.42); }
.btn-primary:active { transform: translateY(0); }

.btn-dark {
  background: linear-gradient(135deg, var(--navy-2), var(--ink));
  color: #fff;
  box-shadow: 0 10px 30px rgba(14,28,46,.28);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(14,28,46,.38); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-soft));
  color: #3A2705;
  box-shadow: var(--glow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(240,179,65,.42); }

.btn-outline {
  background: rgba(255,255,255,.92);
  color: var(--navy);
  border-color: var(--border-2);
}
.btn-outline:hover { border-color: var(--cyan-deep); color: var(--cyan-ink); background: rgba(23,195,222,.06); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--cyan-ink); }
.btn-ghost:hover { background: rgba(23,195,222,.08); }

/* light-on-dark variants */
.btn-white { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.10); }

.btn-lg { padding: 16px 36px; font-size: 16px; }
.btn-sm { padding: 8px 18px; font-size: 13px; }

.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(-5px); }
[dir="ltr"] .btn:hover .arrow, html.lang-en .btn:hover .arrow { transform: translateX(5px); }

/* legacy alias */
.btn-purple { background: linear-gradient(135deg, var(--navy-2), var(--ink)); color: #fff; }

/* ═══════════════ Header — full-width sticky bar (not floating) ═══════════════ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  /* Solid background (no backdrop-filter): a sticky blurred header re-blurs the whole
     viewport on every scroll frame, which is the #1 cause of scroll lag/jank. A near-
     opaque bar scrolls perfectly smoothly and reads as more professional. */
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 8px 30px rgba(14, 28, 46, .07);
}
.nav {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* Brand = mark + HTML wordmark (crisp fonts everywhere) */
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand .brand-mark, .brand .logo { height: 44px; width: auto; transition: transform .4s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-head); font-weight: 800;
  /* Arabic is connected script — never use negative letter-spacing here. */
  font-size: 21px; color: var(--ink); letter-spacing: 0;
}
.brand-text small {
  font-size: 10.5px; font-weight: 500; color: var(--text-3); letter-spacing: .3px;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  border-radius: 10px; position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(23,195,222,.07); }
.nav-links a.active { color: var(--cyan-ink); font-weight: 700; }
.nav-links a.active::after {
  content: ''; position: absolute; right: 13px; left: 13px; bottom: 3px; height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  animation: navUnderline .45s var(--ease) both;
}
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* dropdown */
.nav-drop { position: relative; }
.nav-drop > a svg { transition: transform .25s var(--ease); }
.nav-drop:hover > a svg, .nav-drop:focus-within > a svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: all .28s var(--ease);
  z-index: 70;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.nav-drop-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px; width: 100%;
}
.nav-drop-menu a:hover { background: var(--bg); }
.nav-drop-menu .ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,195,222,.10); color: var(--cyan-ink);
  transition: transform .3s var(--ease-spring);
}
.nav-drop-menu a:hover .ic { transform: scale(1.1) rotate(-6deg); }
.nav-drop-menu .ic.gold { background: rgba(240,179,65,.13); color: #B0740E; }
.nav-drop-menu .ic.navy { background: rgba(22,40,60,.08); color: var(--navy); }
.nav-drop-menu b { display: block; font-size: 14px; color: var(--ink); }
.nav-drop-menu small { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; }

.mobile-menu {
  display: none; position: fixed;
  top: var(--header-h); left: 0; right: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
  padding: 14px 18px 20px;
  transform: translateY(-16px); opacity: 0; visibility: hidden;
  transition: transform .35s var(--ease), opacity .3s var(--ease), visibility .3s;
  z-index: 59; box-shadow: var(--shadow-lg);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-menu a {
  display: block; padding: 13px 16px; border-radius: 12px;
  color: var(--text-2); font-size: 15.5px; font-weight: 600;
  font-family: var(--font-head);
}
.mobile-menu a:hover { background: var(--bg); color: var(--cyan-ink); }
.mobile-menu .mm-group {
  margin: 8px 0 2px; padding: 10px 16px 2px;
  font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: 1px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 1180px) {
  .nav-links { display: none; }
  .menu-toggle {
    display: inline-flex; width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--border);
    background: #fff; color: var(--navy);
    transition: all .2s var(--ease);
  }
  .menu-toggle:hover { border-color: var(--cyan-deep); color: var(--cyan-ink); }
  .mobile-menu { display: block; }
  .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-cta .btn:not(.btn-primary) { display: none; }
  .brand-text small { display: none; }
}
@media (max-width: 560px) {
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 13px; }
  .brand .brand-mark { height: 38px; }
  .brand-text strong { font-size: 18px; }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; right: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  z-index: 100; border-radius: 0 0 0 4px;
  transition: width .1s linear;
}

/* ═══════════════ Backgrounds & ornaments ═══════════════ */
.aurora {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.aurora::before, .aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
}
.aurora::before {
  width: 640px; height: 640px; top: -260px; left: -140px;
  background: radial-gradient(circle, rgba(23,195,222,.20), transparent 65%);
  /* static (no infinite blur(90px) animation — that runs the GPU non-stop) */
}
.aurora::after {
  width: 520px; height: 520px; bottom: -220px; right: -120px;
  background: radial-gradient(circle, rgba(240,179,65,.14), transparent 65%);
}
@keyframes auroraDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 30px) scale(1.08); }
  66% { transform: translate(-30px, 50px) scale(.95); }
}

.bg-ornament { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg-ornament::before, .bg-ornament::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(85px); opacity: .5;
}
.bg-ornament::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(23,195,222,.22) 0%, transparent 70%);
  top: -180px; right: -100px;
}
.bg-ornament::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(30,51,80,.14) 0%, transparent 70%);
  bottom: -160px; left: -80px;
}

.dot-grid {
  position: absolute; width: 230px; height: 230px;
  background-image: radial-gradient(circle, rgba(22,40,60,.12) 1.2px, transparent 1.2px);
  background-size: 15px 15px; opacity: .5; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 75%);
          mask-image: radial-gradient(circle, #000 30%, transparent 75%);
}

.wave-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(23,195,222,.13), transparent 60%),
    radial-gradient(880px 500px at -8% 36%, rgba(240,179,65,.08), transparent 55%),
    linear-gradient(180deg, #FBFDFF 0%, var(--bg) 100%);
}

/* floating geometric shards (brand echo) */
.shard {
  position: absolute; pointer-events: none; z-index: 0; opacity: .85;
  animation: shardFloat 7s ease-in-out infinite;
}
.shard.s2 { animation-duration: 9s; animation-delay: 1.2s; }
.shard.s3 { animation-duration: 11s; animation-delay: .6s; }
@keyframes shardFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

/* ═══════════════ Reveal-on-scroll system ═══════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  /* no persistent will-change: keeping it on dozens of reveal elements creates dozens
     of permanent GPU layers (memory pressure + jank). The transition composites fine. */
}
[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="down"]  { transform: translateY(-34px); }
[data-reveal="zoom"]  { transform: scale(.88); }
[data-reveal="blur"]  { transform: none; filter: blur(10px); }
[data-reveal].revealed {
  opacity: 1; transform: none; filter: none;
}
/* stagger children */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal-stagger].revealed > * { opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(1)  { transition-delay: .05s; }
[data-reveal-stagger].revealed > *:nth-child(2)  { transition-delay: .13s; }
[data-reveal-stagger].revealed > *:nth-child(3)  { transition-delay: .21s; }
[data-reveal-stagger].revealed > *:nth-child(4)  { transition-delay: .29s; }
[data-reveal-stagger].revealed > *:nth-child(5)  { transition-delay: .37s; }
[data-reveal-stagger].revealed > *:nth-child(6)  { transition-delay: .45s; }
[data-reveal-stagger].revealed > *:nth-child(7)  { transition-delay: .53s; }
[data-reveal-stagger].revealed > *:nth-child(8)  { transition-delay: .61s; }
[data-reveal-stagger].revealed > *:nth-child(9)  { transition-delay: .69s; }
[data-reveal-stagger].revealed > *:nth-child(10) { transition-delay: .77s; }
[data-reveal-stagger].revealed > *:nth-child(11) { transition-delay: .85s; }
[data-reveal-stagger].revealed > *:nth-child(12) { transition-delay: .93s; }

/* AOS compat (site-data.js injects data-aos) — mapped to the same effect */
[data-aos] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-aos].revealed, [data-aos].aos-animate { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], [data-aos], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ═══════════════ Cards ═══════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-2); }

/* Service card — soft "squircle" with gradient halo on hover */
.service-card {
  background: linear-gradient(180deg, #fff 0%, #FBFDFE 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 34px 30px;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 28px; padding: 1.5px;
  background: linear-gradient(135deg, rgba(23,195,222,.65), rgba(240,179,65,.5), rgba(23,195,222,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.service-card::after {
  content: ''; position: absolute; top: -70px; left: -70px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23,195,222,.12), transparent 65%);
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { transform: scale(1.6); }
.service-card .num {
  /* The icon sits at the content start (inline-start): the RIGHT corner in
     Arabic/RTL, the LEFT corner in English/LTR. The number must sit on the
     OPPOSITE top corner and flip with the language. We use PHYSICAL props here
     (not inset-inline-end) because the absolutely-positioned number was
     resolving its inline side to the same corner as the icon and overlapping it.
     Default = Arabic/RTL: icon on the right → number on the top-LEFT. */
  position: absolute; top: 24px; left: 26px; right: auto;
  font-family: var(--font-head);
  font-size: 44px; font-weight: 800; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--border-2);
  transition: all .35s var(--ease);
  pointer-events: none;
}
/* English/LTR: icon moves to the left → number moves to the top-RIGHT */
html.lang-en .service-card .num,
[dir="ltr"] .service-card .num { left: auto; right: 26px; }
.service-card:hover .num { -webkit-text-stroke-color: rgba(23,195,222,.55); }
.service-card .icon {
  width: 60px; height: 60px; border-radius: 17px;
  background: linear-gradient(135deg, rgba(23,195,222,.12), rgba(240,179,65,.10));
  border: 1px solid rgba(23,195,222,.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-ink);
  margin-bottom: 20px;
  transition: transform .4s var(--ease-spring), background .3s var(--ease), color .3s var(--ease);
}
.service-card:hover .icon {
  transform: scale(1.1) rotate(-7deg);
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  color: #fff; border-color: transparent;
}
.service-card h3 { font-size: 19px; margin-bottom: 10px; }
.service-card p { color: var(--text-3); font-size: 14.5px; line-height: 1.85; margin: 0; }
.service-card .more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; font-size: 13.5px; font-weight: 700;
  font-family: var(--font-head);
  color: var(--cyan-ink);
  transition: gap .25s var(--ease);
}
.service-card .more:hover { gap: 13px; }

/* Feature card (icon + text row) */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: rgba(23,195,222,.3); }
.feature-card .icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(23,195,222,.10); color: var(--cyan-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease-spring);
}
.feature-card:hover .icon { transform: scale(1.12) rotate(-8deg); }
.feature-card h4 { font-size: 15.5px; margin: 0 0 5px; }
.feature-card p { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.75; }

/* Value / About cards */
.value-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px; text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative; overflow: hidden;
}
.value-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: rgba(23,195,222,.3); }
.value-card .icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 19px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(23,195,222,.12), rgba(240,179,65,.10));
  color: var(--cyan-ink);
  transition: transform .45s var(--ease-spring);
}
.value-card:hover .icon { transform: scale(1.12) rotate(6deg); }

/* Step card (numbered process) */
.step-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 24px 30px;
  text-align: center; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.step-card .step-num {
  width: 58px; height: 58px; border-radius: 50%;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  box-shadow: var(--glow-cyan);
  position: relative;
  transition: transform .4s var(--ease-spring);
}
.step-card:hover .step-num { transform: scale(1.1) rotate(-8deg); }
.step-card.gold .step-num { background: linear-gradient(135deg, var(--gold-deep), var(--gold-soft)); color: #3A2705; box-shadow: var(--glow-gold); }
.step-card.navy .step-num { background: linear-gradient(135deg, var(--navy-3), var(--navy)); box-shadow: 0 10px 28px rgba(22,40,60,.3); }
.step-card h4 { margin-bottom: 9px; font-size: 16.5px; }
.step-card p { font-size: 13.5px; color: var(--text-3); margin: 0; }
.step-link {
  position: absolute; top: 50%; left: -34px; width: 44px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-2) 0 6px, transparent 6px 12px);
}

/* Glass card */
.glass-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Tilt (JS sets --rx / --ry) */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition: transform .18s ease-out;
  will-change: transform;
}

/* ═══════════════ Stats ═══════════════ */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: linear-gradient(160deg, #fff 0%, #F5FAFD 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 38px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stats-row::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--navy-3));
}
@media (max-width: 880px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-cell { text-align: center; padding: 6px; position: relative; }
.stat-cell + .stat-cell::before {
  content: ''; position: absolute; right: -10px; top: 18%; bottom: 18%;
  width: 1px; background: var(--border);
}
@media (max-width: 880px) { .stat-cell + .stat-cell::before { display: none; } }
.stat-cell strong {
  display: block; font-family: var(--font-head);
  font-size: 34px; color: var(--ink); font-weight: 800; line-height: 1.15; margin-bottom: 4px;
}
.stat-cell strong .accent, .stat-cell .accent { color: var(--cyan-ink); }
.stat-cell span { font-size: 13px; color: var(--text-3); }

/* hero inline stats */
.hero-stats { display: flex; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.hero-stat { position: relative; }
.hero-stat + .hero-stat { padding-right: 30px; border-right: 1px solid var(--border-2); }
.hero-stat b {
  display: block; font-family: var(--font-head);
  font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.2;
}
.hero-stat b .accent { color: var(--cyan-ink); }
.hero-stat span { font-size: 12.5px; color: var(--text-3); }

/* ═══════════════ Chips & badges ═══════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-2); font-weight: 600; font-size: 12.5px;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { transform: translateY(-2px); border-color: rgba(23,195,222,.4); }
.chip svg, .chip .ci { color: var(--cyan-ink); }
.chip.gold svg, .chip.gold .ci { color: var(--gold-deep); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: rgba(23,195,222,.10); color: var(--cyan-ink);
}
.badge.gold { background: rgba(240,179,65,.13); color: #A66E0C; }
.badge.navy { background: rgba(22,40,60,.08); color: var(--navy); }
.badge.green { background: rgba(22,163,74,.10); color: #15803D; }
.badge.coming { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; }
.badge.purple { background: rgba(22,40,60,.08); color: var(--navy); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pill.teal, .pill.cyan { background: rgba(23,195,222,.10); color: var(--cyan-ink); }
.pill.blue { background: rgba(30,51,80,.09); color: var(--navy-2); }
.pill.purple { background: rgba(30,51,80,.09); color: var(--navy-2); }
.pill.gold { background: rgba(240,179,65,.13); color: #A66E0C; }
.pill.coming { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; }

.hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-2); font-weight: 600; font-size: 12.5px;
  padding: 6px 13px; border-radius: 999px; box-shadow: var(--shadow-xs);
}
.hero-chip.t { border-color: rgba(23,195,222,.35); color: var(--cyan-ink); }

/* ═══════════════ Browser mockup (illustrations) ═══════════════ */
.ill {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(14,28,46,.14), 0 10px 28px rgba(14,28,46,.08);
  position: relative;
}
.ill__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #FAFCFE, #F2F6FA);
  border-bottom: 1px solid var(--border);
}
.ill__chrome .dot { width: 10px; height: 10px; border-radius: 50%; }
.ill__chrome .dot.r { background: #FC5F57; }
.ill__chrome .dot.y { background: #FDBB2E; }
.ill__chrome .dot.g { background: #28C840; }
.ill__chrome .url {
  margin-right: 10px; direction: ltr;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-3); font-size: 11px; padding: 4px 14px;
  border-radius: 20px; letter-spacing: .2px;
}
.ill__screen { background: #F8FBFD; min-height: 300px; }

/* device float */
.float { animation: floatY 5.5s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ═══════════════ Marquee (partners / tech strip) ═══════════════ */
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 54px; align-items: center;
  width: max-content;
  animation: marqueeMove 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(50%); } /* RTL: track moves right; duplicated content makes it seamless */
}
.partners { display: flex; gap: 54px; align-items: center; }
.partner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; color: #9AAABB;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  white-space: nowrap; letter-spacing: .3px;
  transition: color .25s var(--ease), transform .25s var(--ease);
  filter: grayscale(1);
}
.partner:hover { color: var(--navy); transform: translateY(-2px); filter: none; }

/* ═══════════════ Testimonials ═══════════════ */
.t-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px;
  height: 100%; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.t-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.t-card::before {
  content: '❝'; position: absolute; top: 14px; left: 22px;
  font-size: 54px; line-height: 1; color: rgba(23,195,222,.16);
  font-family: serif;
}
.t-card .stars { color: var(--gold); font-size: 15px; margin-bottom: 14px; letter-spacing: 3px; }
.t-card blockquote {
  font-size: 15px; color: var(--text-2); line-height: 1.95; margin: 0 0 22px; quotes: none;
}
.t-card .person { display: flex; align-items: center; gap: 12px; }
.t-card .person-pic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan-deep), var(--navy-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--font-head);
}
.t-card .person h5 { margin: 0; font-size: 14.5px; }
.t-card .person span { font-size: 12.5px; color: var(--text-3); }
.t-card--blue .person-pic { background: linear-gradient(135deg, var(--navy-2), var(--ink)); }
.t-card--orange .person-pic { background: linear-gradient(135deg, var(--gold-deep), var(--gold-soft)); color: #3A2705; }

/* ═══════════════ Project showcase ═══════════════ */
.project-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.project-card .visual {
  background: linear-gradient(135deg, #F2F8FC 0%, #E7F1F8 100%);
  padding: 36px; display: flex; align-items: center; justify-content: center;
  min-height: 240px; position: relative; overflow: hidden;
}
.project-card .body { padding: 30px 32px; }

.project-row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project-row:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.project-row .visual {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; min-height: 300px; position: relative; overflow: hidden;
}
.project-row .body { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 880px) { .project-row { grid-template-columns: 1fr; } }

/* ═══════════════ Pricing (pkg-card contract kept for hydration) ═══════════════ */
.pkg-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 30px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pkg-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.pkg-card.featured {
  border: 2px solid var(--cyan-deep);
  box-shadow: 0 22px 60px rgba(11,165,201,.18);
  background:
    radial-gradient(360px 200px at 85% -10%, rgba(23,195,222,.08), transparent 60%),
    #fff;
}
.pkg-card.featured::before {
  content: 'الأكثر طلبًا';
  position: absolute; top: -14px; right: 26px;
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: var(--font-head);
  padding: 5px 16px; border-radius: 999px;
  box-shadow: var(--glow-cyan);
}
html.lang-en .pkg-card.featured::before { content: 'Most popular'; }
.pkg-card h3 { font-size: 20px; margin-bottom: 6px; }
.pkg-card .pkg-desc { color: var(--text-3); font-size: 13.5px; margin-bottom: 18px; }
.pkg-card ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.pkg-card li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14px; color: var(--text-2);
  border-bottom: 1px dashed var(--border);
}
.pkg-card li:last-child { border-bottom: none; }
.pkg-card li svg { flex-shrink: 0; margin-top: 4px; color: var(--cyan-deep); }

/* ═══════════════ FAQ ═══════════════ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open] { border-color: rgba(23,195,222,.4); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  transition: background .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg); }
.faq-item summary h3 {
  font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.6; color: var(--ink);
}
.faq-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border-2); position: relative;
  transition: all .3s var(--ease);
}
.faq-ic::before, .faq-ic::after {
  content: ''; position: absolute; background: var(--text-3);
  top: 50%; left: 50%; transition: all .3s var(--ease);
}
.faq-ic::before { width: 12px; height: 1.8px; transform: translate(-50%, -50%); }
.faq-ic::after { width: 1.8px; height: 12px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ic { background: var(--cyan-deep); border-color: var(--cyan-deep); transform: rotate(180deg); }
.faq-item[open] .faq-ic::before { background: #fff; }
.faq-item[open] .faq-ic::after { opacity: 0; }
.faq-a { padding: 0 24px 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.faq-a p { margin: 0; }

/* Accordion (policies) */
.accordion-item {
  border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 12px; background: #fff; overflow: hidden;
  transition: border-color .25s var(--ease);
}
.accordion-item.open { border-color: rgba(23,195,222,.4); }
.accordion-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; font-weight: 700;
  font-family: var(--font-head); color: var(--text);
}
.accordion-body {
  padding: 0 22px; max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease), padding .35s var(--ease);
  color: var(--text-3); font-size: 14.5px; line-height: 1.9;
}
.accordion-item.open .accordion-body { padding: 0 22px 18px; max-height: 900px; }
.accordion-item.open .accordion-head svg { transform: rotate(180deg); }
.accordion-head svg { transition: transform .25s var(--ease); color: var(--text-3); }

.policy-tabs {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 12px;
}
.policy-tabs a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  font-size: 14px; color: var(--text-2);
  transition: all .2s var(--ease);
}
.policy-tabs a:hover { background: var(--bg); }
.policy-tabs a.active { background: rgba(23,195,222,.09); color: var(--cyan-ink); font-weight: 700; }

/* ═══════════════ CTA banner ═══════════════ */
.cta-banner {
  background:
    radial-gradient(700px 380px at 90% -20%, rgba(23,195,222,.25), transparent 55%),
    radial-gradient(520px 300px at 4% 120%, rgba(240,179,65,.18), transparent 55%),
    linear-gradient(135deg, var(--ink) 0%, var(--navy) 60%, var(--navy-2) 100%);
  border-radius: var(--r-xl);
  color: #fff; padding: 60px 58px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  align-items: center; gap: 32px;
  position: relative; overflow: hidden;
  box-shadow: 0 34px 90px rgba(14,28,46,.35);
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none;
}
.cta-banner h2 { color: #fff; margin-bottom: 10px; }
.cta-banner p { color: rgba(255,255,255,.78); margin: 0; font-size: 16px; line-height: 1.9; }
.cta-banner .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; position: relative; }
.cta-banner .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cta-banner .btn-primary:hover { box-shadow: 0 16px 44px rgba(0,0,0,.35); }
.cta-banner .btn-outline { border-color: rgba(255,255,255,.32); color: #fff; background: transparent; }
.cta-banner .btn-outline:hover { background: rgba(255,255,255,.10); border-color: #fff; }
@media (max-width: 880px) {
  .cta-banner { grid-template-columns: 1fr; padding: 40px 28px; }
  .cta-banner .actions { justify-content: flex-start; }
}

/* Dark section */
.section-dark {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(23,195,222,.13), transparent 55%),
    radial-gradient(700px 420px at 0% 110%, rgba(240,179,65,.09), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--navy) 100%);
  color: #E5EDF5;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p, .section-dark .lead { color: #AEBFD2; }
.section-dark .eyebrow { background: rgba(23,195,222,.12); border-color: rgba(23,195,222,.3); color: var(--cyan-bright); }
.section-dark .section-divider { color: var(--cyan-bright); }
.section-dark .section-divider::before, .section-dark .section-divider::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }

/* ═══════════════ Forms ═══════════════ */
.input, .select, .textarea {
  width: 100%; padding: 14px 17px;
  border-radius: 13px;
  border: 1.5px solid var(--border-2);
  background: #fff; font-family: inherit;
  font-size: 14.5px; color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: #B9CBDB; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cyan-deep);
  box-shadow: 0 0 0 4px rgba(23,195,222,.14);
}
.textarea { min-height: 140px; resize: vertical; }
label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--text); font-family: var(--font-head); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* ═══════════════ Footer ═══════════════ */
.site-footer {
  background:
    radial-gradient(820px 420px at 90% -20%, rgba(23,195,222,.10), transparent 55%),
    radial-gradient(600px 380px at 0% 130%, rgba(240,179,65,.07), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, #0A1522 100%);
  color: #AEBFD2;
  padding: 76px 0 26px;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23,195,222,.5), rgba(240,179,65,.4), transparent);
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 44px; align-items: flex-start;
  position: relative; z-index: 1;
}
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-text small { color: #7E96B2; }
.footer-brand p { color: #8FA5BB; font-size: 14px; max-width: 330px; line-height: 1.95; margin-top: 16px; }
.footer-col h5 {
  font-size: 14px; color: #fff; margin: 0 0 18px; font-weight: 700;
  font-family: var(--font-head);
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-col h5::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a, .footer-col li {
  color: #8FA5BB; font-size: 14px;
  transition: color .2s var(--ease), padding .25s var(--ease);
}
.footer-col a:hover { color: var(--cyan-bright); padding-right: 5px; }
.footer-contact-item { display: flex; align-items: center; gap: 10px; direction: ltr; justify-content: flex-end; }
.footer-contact-item svg { color: var(--cyan); flex-shrink: 0; }
.footer-bottom {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  color: #6B8099; font-size: 13px; gap: 16px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.socials { display: flex; gap: 9px; }
.socials a {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: #8FA5BB; background: rgba(255,255,255,.04);
  transition: all .25s var(--ease);
}
.socials a:hover {
  color: #fff; border-color: var(--cyan-deep);
  background: rgba(23,195,222,.14);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(23,195,222,.2);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Footer legal / verified-business strip (commercial registration) ── */
.footer-legal {
  position: relative; z-index: 1;
  margin-top: 46px; padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.footer-cr-card {
  flex-shrink: 0; display: block;
  background: #fff; border-radius: 18px; padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.6);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
  line-height: 0;
}
.footer-cr-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 44px rgba(23,195,222,.28); }
.footer-cr-card img { width: 116px; height: 116px; border-radius: 8px; }
.footer-cr-meta { min-width: 0; }
.footer-cr-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  color: #7FE3A2;
  background: rgba(46,204,113,.10); border: 1px solid rgba(46,204,113,.28);
  padding: 5px 13px; border-radius: 999px;
}
.footer-cr-badge svg { width: 13px; height: 13px; }
.footer-cr-meta h6 {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: #fff; margin: 12px 0 4px;
}
.footer-cr-meta p { color: #8FA5BB; font-size: 13.5px; margin: 0 0 10px; }
.footer-cr-meta p b { color: #C8D6E4; font-weight: 700; letter-spacing: .5px; }
.footer-cr-verify {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  color: var(--cyan-bright);
  transition: gap .25s var(--ease), color .2s var(--ease);
}
.footer-cr-verify svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.footer-cr-verify:hover { gap: 11px; color: #fff; }
.footer-cr-verify:hover svg { transform: translate(3px,-3px); }
@media (max-width: 540px) {
  .footer-legal { justify-content: center; text-align: center; }
  .footer-cr-badge, .footer-cr-verify { justify-content: center; }
}

/* ═══════════════ FABs ═══════════════ */
.fab {
  position: fixed; bottom: 24px; left: 24px; z-index: 55;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px rgba(37,211,102,.4);
  transition: transform .25s var(--ease-spring);
}
.fab:hover { transform: translateY(-4px) scale(1.07); }
.pulse-glow { animation: pulseGlow 2.6s infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 14px 36px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.4); }
  70% { box-shadow: 0 14px 36px rgba(37,211,102,.4), 0 0 0 16px rgba(37,211,102,0); }
}
.fab.top {
  left: auto; right: 24px; bottom: 24px;
  background: #fff; color: var(--navy);
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  width: 46px; height: 46px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  transform: translateY(10px);
}
.fab.top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab.top:hover { color: var(--cyan-ink); border-color: var(--cyan-deep); }

/* ═══════════════ Swiper overrides ═══════════════ */
.swiper { width: 100%; }
.swiper-pagination-bullet {
  background: var(--border-2); opacity: 1; width: 8px; height: 8px;
  transition: all .3s var(--ease);
}
.swiper-pagination-bullet-active {
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  width: 26px; border-radius: 4px;
}
.swiper-button-prev, .swiper-button-next {
  width: 46px; height: 46px; background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-md); color: var(--navy);
  border: 1px solid var(--border);
  transition: all .25s var(--ease);
}
.swiper-button-prev:hover, .swiper-button-next:hover { color: var(--cyan-ink); border-color: var(--cyan-deep); }
.swiper-button-prev::after, .swiper-button-next::after { font-size: 15px; font-weight: 800; }

/* ═══════════════ Utilities ═══════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-6 { grid-template-columns: 1fr 1fr; } }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }

/* ═══════════════ Icon micro-animations ═══════════════ */
.spin-slow { animation: spinSlow 14s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.wiggle-hover:hover { animation: wiggle .5s var(--ease); }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}

/* (typing caret removed — the "|" glyph looks like an Arabic ا) */

/* SVG draw-in (JS adds .draw when visible) */
.draw-path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.revealed .draw-path, .draw-path.draw {
  animation: drawIn 1.6s var(--ease) forwards;
}
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* count-up number pop */
[data-counter] { font-variant-numeric: tabular-nums; }

/* skeleton shimmer for placeholders */
.shimmer {
  background: linear-gradient(90deg, var(--bg-2) 25%, #fff 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmerMove 1.6s linear infinite;
}
@keyframes shimmerMove { to { background-position: -200% 0; } }

/* ═══════════════ Editorial layout language ═══════════════
   Oversized display type, asymmetric grids, sticky splits,
   numbered service rows, full-bleed product panels. */

.display-xl {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.32;
  color: var(--ink);
}
.display-lg {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.38;
}
.txt-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  text-stroke: 1.5px currentColor;
}
.txt-outline-light { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.txt-outline-ink   { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

/* section label — side-numbered editorial heading */
.sec-label {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 22px; margin-bottom: 46px;
  border-bottom: 1.5px solid var(--border-2);
}
.sec-label .idx {
  font-family: var(--font-head); font-weight: 800;
  font-size: 15px; color: var(--cyan-ink);
  letter-spacing: 1px;
}
.sec-label h2 { font-size: clamp(26px, 3.6vw, 46px); }
.sec-label .tail { margin-inline-start: auto; color: var(--text-3); font-size: 14px; max-width: 320px; line-height: 1.8; }
@media (max-width: 760px) { .sec-label { flex-wrap: wrap; } .sec-label .tail { margin-inline-start: 0; } }
.section-dark .sec-label { border-color: rgba(255,255,255,.14); }
.section-dark .sec-label .idx { color: var(--cyan-bright); }

/* scrolling word strip — calm, single-tone */
.word-strip { overflow: hidden; padding: 18px 0; }
.word-strip .marquee-track { gap: 0; animation-duration: 46s; }
.word-strip .words { display: flex; align-items: center; white-space: nowrap; }
.word-strip .w {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.6; padding: 0 26px;
  color: var(--text-2);
}
.word-strip .w.o { color: var(--text-2); }
.word-strip .sep { color: var(--gold); font-size: clamp(14px, 1.6vw, 20px); }
.word-strip.on-dark .w, .word-strip.on-dark .w.o { color: rgba(255,255,255,.55); }

/* editorial numbered service rows */
.svc-list { border-top: 1.5px solid var(--border-2); }
.svc-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.6fr 72px;
  align-items: center; gap: 28px;
  padding: 34px 10px;
  border-bottom: 1.5px solid var(--border-2);
  position: relative;
  transition: background .35s var(--ease), padding .35s var(--ease);
  text-decoration: none;
}
.svc-row::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.svc-row:hover { background: linear-gradient(90deg, rgba(23,195,222,.05), transparent 70%); padding-inline-start: 22px; }
.svc-row:hover::before { transform: scaleX(1); }
.svc-row .no {
  font-family: var(--font-head); font-weight: 800; font-size: 26px;
  color: var(--muted);
  transition: color .35s var(--ease);
}
.svc-row:hover .no { color: var(--cyan-deep); }
.svc-row h3 {
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; margin: 0;
  display: flex; align-items: center; gap: 14px;
  transition: color .3s var(--ease);
}
.svc-row:hover h3 { color: var(--cyan-ink); }
.svc-row .tag {
  font-size: 11px; font-weight: 700; font-family: var(--font-head);
  background: rgba(240,179,65,.14); color: #A66E0C;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.svc-row p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.85; }
.svc-row .go {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: all .35s var(--ease);
}
.svc-row:hover .go {
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  border-color: transparent; color: #fff;
  transform: rotate(-45deg);
  box-shadow: var(--glow-cyan);
}
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 54px 1fr 48px; }
  .svc-row p { grid-column: 2 / -1; grid-row: 2; }
  .svc-row .no { font-size: 22px; }
  .svc-row .go { width: 44px; height: 44px; }
}

/* sticky split section */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.split-side { position: sticky; top: 130px; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 40px; } .split-side { position: static; } }
.split-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding: 30px 0; border-bottom: 1.5px solid var(--border);
}
.split-item:first-child { padding-top: 0; }
.split-item .si-ic {
  width: 58px; height: 58px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease-spring);
}
.split-item:hover .si-ic { transform: scale(1.1) rotate(-7deg); }
.split-item h4 { font-size: 18px; margin-bottom: 7px; }
.split-item p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.9; }
.section-dark .split-item { border-color: rgba(255,255,255,.10); }
.section-dark .split-item h4 { color: #fff; }
.section-dark .split-item p { color: #AEBFD2; }

/* full-bleed product panels */
.panel {
  position: relative; overflow: hidden;
  border-radius: 40px;
  padding: clamp(34px, 5vw, 72px);
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: 26px;
}
.panel .p-no {
  /* small corner index that lives in the panel's padding band — never over content */
  position: absolute; top: 20px; inset-inline-start: 28px; left: auto;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1;
  opacity: .85; pointer-events: none;
}
@media (max-width: 940px) { .panel .p-no { display: none; } }
.panel h3 { font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; margin: 14px 0 12px; }
.panel .p-desc { font-size: 16px; line-height: 2; margin: 0 0 20px; }
.panel .p-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.panel .p-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.panel.dark {
  background:
    radial-gradient(760px 420px at 85% -10%, rgba(23,195,222,.16), transparent 55%),
    linear-gradient(150deg, #0B1826 0%, #16283C 100%);
  color: #E5EDF5;
}
.panel.dark h3 { color: #fff; }
.panel.dark .p-desc { color: #A9BCCF; }
.panel.dark .p-no { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.14); }
.panel.gold {
  background:
    radial-gradient(700px 400px at 12% -10%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(150deg, #FDF3E0 0%, #F8E5C2 100%);
}
.panel.gold .p-no { color: transparent; -webkit-text-stroke: 1.5px rgba(160,110,10,.25); }
.panel.sky {
  background:
    radial-gradient(700px 400px at 88% -10%, rgba(255,255,255,.8), transparent 55%),
    linear-gradient(150deg, #EAF4FB 0%, #D8E9F6 100%);
}
.panel.sky .p-no { color: transparent; -webkit-text-stroke: 1.5px rgba(22,40,60,.18); }
@media (max-width: 940px) {
  .panel { grid-template-columns: 1fr; border-radius: 28px; }
  .panel .p-no { font-size: 60px; top: 18px; left: 22px; }
}

/* huge stats band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band .sb {
  text-align: center; padding: 18px 12px; position: relative;
}
.stat-band .sb + .sb::before {
  content: ''; position: absolute; right: 0; top: 20%; bottom: 20%;
  width: 1.5px; background: var(--border-2);
}
.stat-band b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(44px, 5.6vw, 84px); line-height: 1.15; color: var(--ink);
}
.stat-band .sb:nth-child(1) b { color: var(--cyan-deep); }
.stat-band .sb:nth-child(3) b { color: var(--gold-deep); }
.stat-band span { font-size: 14px; color: var(--text-3); }
@media (max-width: 800px) {
  .stat-band { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .stat-band .sb:nth-child(3)::before { display: none; }
}

/* giant closing CTA */
.mega-cta {
  position: relative; overflow: hidden;
  border-radius: 44px; padding: clamp(50px, 7vw, 100px) clamp(24px, 5vw, 80px);
  text-align: center; color: #fff;
  background:
    radial-gradient(900px 480px at 80% -20%, rgba(23,195,222,.22), transparent 55%),
    radial-gradient(640px 380px at 6% 120%, rgba(240,179,65,.16), transparent 55%),
    linear-gradient(160deg, #0B1826 0%, #16283C 100%);
}
.mega-cta::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.mega-cta h2 {
  font-size: clamp(34px, 5.6vw, 76px); font-weight: 800; color: #fff;
  line-height: 1.4; margin-bottom: 18px; position: relative;
}
.mega-cta p { color: #A9BCCF; font-size: clamp(15px, 1.6vw, 19px); max-width: 560px; margin: 0 auto 36px; position: relative; }
.mega-cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.mega-cta .contact-line {
  margin-top: 44px; padding-top: 28px; position: relative;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  color: #7E96B2; font-size: 14px; direction: ltr;
}
.mega-cta .contact-line a { color: #C8D6E4; font-weight: 600; transition: color .2s; }
.mega-cta .contact-line a:hover { color: var(--cyan-bright); }

/* ═══════════════ LTR (English) adjustments ═══════════════ */
html.lang-en body, [dir="ltr"] body { direction: ltr; }
html.lang-en .nav-links a.active::after { animation: none; }
html.lang-en .footer-col a:hover { padding-right: 0; padding-left: 5px; }
html.lang-en .hero-stat + .hero-stat { padding-right: 0; padding-left: 30px; border-right: none; border-left: 1px solid var(--border-2); }
html.lang-en .stat-cell + .stat-cell::before { right: auto; left: -10px; }
html.lang-en .nav-drop-menu { right: auto; left: 0; }
html.lang-en .marquee-track { animation-name: marqueeMoveLtr; }
@keyframes marqueeMoveLtr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — opt-in via html[data-theme="dark"]
   Light stays the default. Only the light surfaces are remapped;
   the intentionally-dark sections (hero, section-dark, cta-banner,
   footer, panels, mega-cta) keep their cinematic treatment.
   NOTE: --ink is left dark on purpose (it is a background color in
   6 gradients) — text that used --ink is remapped explicitly below.
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:          #0A121C;
  --bg-2:        #0E1927;
  --surface:     #13212F;
  --border:      #223143;
  --border-2:    #2C3E52;
  --text:        #E7EFF7;
  --text-2:      #B7C6D8;
  --text-3:      #8CA1B7;
  --muted:       #6F8298;

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm:   0 2px 12px rgba(0, 0, 0, .40);
  --shadow-md:   0 14px 34px rgba(0, 0, 0, .48);
  --shadow-lg:   0 28px 70px rgba(0, 0, 0, .58);
  color-scheme: dark;
}
/* smooth cross-fade when the user flips the switch (added briefly by JS) */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching, html.theme-switching *,
  html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .45s var(--ease), background-image .45s var(--ease),
                border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease) !important;
  }
}

/* text that referenced --ink (a dark navy) must become light in the dark theme */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5,
html[data-theme="dark"] .brand-text strong, html[data-theme="dark"] .stat-cell strong,
html[data-theme="dark"] .hero-stat b, html[data-theme="dark"] .faq-item summary h3,
html[data-theme="dark"] .nav-drop-menu b, html[data-theme="dark"] .word-strip .w,
html[data-theme="dark"] .stat-band b, html[data-theme="dark"] .display-xl,
html[data-theme="dark"] .display-lg, html[data-theme="dark"] .accordion-head { color: var(--text); }
html[data-theme="dark"] .nav-links a:hover { color: var(--text); }
html[data-theme="dark"] .txt-outline-ink { -webkit-text-stroke-color: var(--text); }

/* page-level backgrounds */
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .wave-bg {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(23,195,222,.10), transparent 60%),
    radial-gradient(880px 500px at -8% 36%, rgba(240,179,65,.06), transparent 55%),
    linear-gradient(180deg, #0C1622 0%, var(--bg) 100%);
}

/* header + nav chrome */
html[data-theme="dark"] .site-header { background: rgba(12, 20, 30, .85); border-bottom-color: var(--border); }
html[data-theme="dark"] .site-header.scrolled { background: rgba(12, 20, 30, .96); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
html[data-theme="dark"] .nav-drop-menu,
html[data-theme="dark"] .mobile-menu { background: rgba(15, 25, 38, .98); border-color: var(--border); }
html[data-theme="dark"] .nav-drop-menu a:hover,
html[data-theme="dark"] .mobile-menu a:hover,
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .faq-item summary:hover,
html[data-theme="dark"] .policy-tabs a:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .fab.top,
html[data-theme="dark"] .swiper-button-prev,
html[data-theme="dark"] .swiper-button-next { background: var(--surface); color: var(--text); border-color: var(--border); }

/* surfaces that hardcoded white */
html[data-theme="dark"] .service-card { background: linear-gradient(180deg, #15242F 0%, #101D29 100%); }
html[data-theme="dark"] .stats-row { background: linear-gradient(160deg, #15242F 0%, #101C28 100%); }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .hero-chip { background: var(--surface); border-color: var(--border); color: var(--text-2); }
html[data-theme="dark"] .glass-card { background: rgba(19,33,47,.82); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .accordion-item { background: var(--surface); }
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea { background: #0F1B28; border-color: var(--border-2); color: var(--text); }
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] .btn-outline { background: rgba(255,255,255,.04); color: var(--text); border-color: var(--border-2); }
html[data-theme="dark"] .btn-outline:hover { background: rgba(23,195,222,.10); color: var(--cyan-bright); }
html[data-theme="dark"] .partner { color: #7C8EA2; }
html[data-theme="dark"] .partner:hover { color: #fff; }
html[data-theme="dark"] .faq-ic::before,
html[data-theme="dark"] .faq-ic::after { background: var(--text-3); }
html[data-theme="dark"] .shimmer { background: linear-gradient(90deg, var(--bg-2) 25%, #1C2C3C 50%, var(--bg-2) 75%); }

/* inline background:#fff on section wrappers/cards is swapped to var(--surface)
   in the HTML, so those adapt automatically. Decorative brand-color washes
   (product visuals) intentionally keep their light tint on dark. */

/* theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); flex-shrink: 0;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .3s var(--ease-spring);
}
.theme-toggle:hover { color: var(--cyan-ink); border-color: var(--cyan-deep); transform: translateY(-1px); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
html[data-theme="dark"] .theme-toggle:hover { color: var(--cyan-bright); }
/* toggle placed inside the dark mobile menu */
.mobile-menu .theme-toggle { width: 100%; height: auto; gap: 10px; padding: 13px 16px; justify-content: flex-start; border-radius: 12px; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; }
.mobile-menu .theme-toggle .tt-label { display: inline; }
.nav-cta .theme-toggle .tt-label { display: none; }

/* ═══════════════ Print ═══════════════ */
@media print {
  .site-header, .fab, .mobile-menu, .scroll-progress { display: none !important; }
}