/* ---------- Base ---------- */
body { font-family: Inter, "Helvetica Neue", Arial, sans-serif; color: #292a2e; -webkit-font-smoothing: antialiased; }
.heading { letter-spacing: -0.02em; }
/* Keep content centered on small screens: stop any element from causing a horizontal scroll.
   Scoped below lg (1024px) so it never interferes with the lg-only sticky price box. */
@media (max-width: 1023px) { html, body { overflow-x: hidden; max-width: 100%; } }

/* Arabic / RTL */
[dir="rtl"] body,
[dir="rtl"] .heading { font-family: "Cairo", "Tahoma", "Segoe UI", sans-serif; letter-spacing: 0; }
.ltr-keep { unicode-bidi: embed; }
[dir="rtl"] .ltr-keep { direction: ltr; text-align: right; }
[dir="rtl"] .marquee { direction: ltr; }
/* tel/email/number/url inputs default to LTR — align their placeholder/text to the right in RTL */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"] { text-align: right; }
[dir="rtl"] input[type="tel"]::placeholder,
[dir="rtl"] input[type="email"]::placeholder,
[dir="rtl"] input[type="number"]::placeholder,
[dir="rtl"] input[type="url"]::placeholder { text-align: right; }

/* RTL hero slider: progress fills right-to-left, arrows point outward */
[dir="rtl"] .hero-fill { left: auto; right: 0; }
[dir="rtl"] .hero-prev svg, [dir="rtl"] .hero-next svg { transform: scaleX(-1); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.stagger.in > * { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.btn:hover { transform: translateY(-2px); }

/* ---------- Clients marquee slider ---------- */
.marquee { overflow: hidden; transform: translateZ(0); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 34s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.marquee-track img { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Board float (applied to the <img> wrapper) ---------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.board-float { animation: floaty 7s ease-in-out infinite; }

/* ---------- Sticky header across the whole page ----------
   The header is injected into #site-header; making that wrapper `display:contents`
   removes its box so the sticky <header> sticks relative to the viewport, not the
   (header-height) wrapper. */
#site-header { display: contents; }

/* ---------- Active nav link (color + non-color underline indicator) ---------- */
.nav-link.active {
  color: #0000cc;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #0000ff;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Keyboard focus ring (was missing) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: 2px;
  border-radius: 6px;
}
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: #9db0ff;
}

/* ---------- Mobile menu ---------- */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.mobile-menu.open { max-height: 600px; }

/* ---------- Footer (deep indigo that blends with the #0000ff logo) ---------- */
.site-footer {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,0,255,0.22) 0%, rgba(8,8,38,0) 55%),
    #080826;
  color: #c7c9e6;
  border-top: 1px solid rgba(77,77,255,0.35);
}
.site-footer a { color: #c7c9e6; }
.site-footer a:hover { color: #ffffff; }
.site-footer .footer-accent { color: #9db0ff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}


/* ---------- Header binary ambience (0/1) ---------- */
.bin-digit { position: absolute; font-family: inherit; font-weight: 700; font-variant-numeric: normal; color: #0000ff; opacity: 0; will-change: opacity, transform; animation: binFade var(--dur, 2.4s) ease-in-out forwards; }
@keyframes binFade {
  0%   { opacity: 0; transform: translateY(5px); }
  30%  { opacity: var(--op, 0.2); transform: translateY(0); }
  70%  { opacity: var(--op, 0.2); transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .bin-digit { display: none; } }


/* ---------- Cursor binary trail (0/1) ---------- */
.cursor-bit { position: fixed; z-index: 95; pointer-events: none; font-weight: 700; color: #0000ff; line-height: 1; opacity: 0; will-change: transform, opacity; animation: cursorBit 0.9s ease-out forwards; }
@keyframes cursorBit {
  0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -165%) scale(0.7); }
}
@media (prefers-reduced-motion: reduce) { .cursor-bit { display: none; } }