/*
Theme Name: RASEEKH Landing
Theme URI: https://raseekh.example
Author: RASEEKH Audit Tax & Advisory
Author URI: https://raseekh.example
Description: قالب رسيخ للاستشارات الضريبية والتدقيق — قالب ووردبريس كامل (هيدر/رئيسية/مدونة/فوتر) خاص بشركة رسيخ. يدعم العربية والإنجليزية (RTL/LTR)، خدمات ومقالات مدونة تُدار من لوحة التحكم أو ملفات JSON.
Version: 4.15.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: raseekh-landing
*/

.raseekh-landing {
  --bg: #ffffff;
  --bg-deep: #f1f6ff;
  --surface: #f5f8ff;
  --surface-2: #e9f0ff;
  --cyan: #0056d6;
  --blue: #0038ff;
  --text: #101c36;
  --muted: #5b6b85;
  --line: rgba(0, 56, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.78);
  --radius: 22px;
  --shadow: 0 20px 50px rgba(15, 40, 90, 0.08);
  --header-h: 76px;
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-scrolled: rgba(255, 255, 255, 0.94);
  --nav-mobile-bg: rgba(255, 255, 255, 0.97);
  --pill-bg: rgba(240, 245, 255, 0.9);
  --trust-row-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(234, 241, 255, 0.7));
  --trust-item-hover-bg: rgba(255, 255, 255, 0.6);
  --font-ar: "IBM Plex Sans Arabic", "Outfit", sans-serif;
  --font-en: "Outfit", "IBM Plex Sans Arabic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-family: var(--font-en);
  width: 100%;
}

.raseekh-landing[data-lang="ar"] {
  font-family: var(--font-ar);
}

/* Dark theme: same component, same markup — only the tokens change. Applied
   by toggling this class on the root (see initThemeToggle in script.js);
   every rule elsewhere in this file reads color through the variables
   above, so this block is the only place the palette itself is redefined. */
.raseekh-landing.theme-dark {
  --bg: #05070f;
  --bg-deep: #03040a;
  --surface: #121a2e;
  --surface-2: #182238;
  --cyan: #6fbcff;
  --blue: #8aa8ff;
  --text: #f3f6ff;
  /* Lightened from #94a3c4 — the previous shade read too close to the
     surface color at a glance (borders/section edges were hard to place
     against the dark background); this keeps AA contrast with real margin
     to spare against both --bg and --surface. */
  --muted: #aab6d6;
  /* Brighter + more opaque than before so card/section borders are
     actually visible against the dark surfaces instead of nearly
     disappearing. */
  --line: rgba(150, 185, 255, 0.32);
  --glass: rgba(18, 26, 46, 0.9);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  --header-bg: rgba(5, 7, 15, 0.88);
  --header-bg-scrolled: rgba(5, 7, 15, 0.97);
  --nav-mobile-bg: rgba(9, 13, 24, 0.97);
  --pill-bg: rgba(24, 34, 56, 0.92);
  --trust-row-bg: linear-gradient(180deg, rgba(18, 26, 46, 0.9), rgba(9, 13, 24, 0.7));
  --trust-item-hover-bg: rgba(255, 255, 255, 0.07);
  background: var(--bg);
}

body.raseekh-standalone {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
}

body.raseekh-standalone.theme-dark {
  background: #05070f;
}

.raseekh-landing *,
.raseekh-landing *::before,
.raseekh-landing *::after {
  box-sizing: border-box;
}

.raseekh-landing img,
.raseekh-landing svg {
  max-width: 100%;
  display: block;
}

.raseekh-landing a {
  color: inherit;
  text-decoration: none;
}

.raseekh-landing button {
  font: inherit;
  cursor: pointer;
}

.raseekh-landing .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.raseekh-landing .container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.raseekh-landing .ambient {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Clips the decorative orbs' negative offsets here, at the decoration
     layer only — NOT on the root .raseekh-landing wrapper. An ancestor
     with overflow:hidden breaks position:sticky for the header inside it
     (confirmed live: header.getBoundingClientRect().top stayed negative
     while scrolling instead of pinning to 0), so the clip has to live on
     a box that isn't also the header's containing block. */
  overflow: hidden;
}

.raseekh-landing .ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.raseekh-landing .ambient__orb--cyan {
  width: 420px;
  height: 420px;
  background: #0091ea;
  top: -120px;
  inset-inline-end: -80px;
  opacity: 0.10;
}

.raseekh-landing .ambient__orb--blue {
  width: 520px;
  height: 520px;
  background: #0038ff;
  bottom: 10%;
  inset-inline-start: -160px;
  opacity: 0.08;
}

.raseekh-landing .site-header,
.raseekh-landing main,
.raseekh-landing .site-footer {
  position: relative;
  z-index: 1;
}

.raseekh-landing .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.raseekh-landing .header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 16px;
}

.raseekh-landing .brand {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.raseekh-landing .brand__logo,
.raseekh-landing .footer__logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.raseekh-landing .brand__logo {
  height: clamp(28px, 4.4vw, 42px);
  max-width: min(280px, 52vw);
}

.raseekh-landing .footer__logo-link {
  display: inline-flex;
  margin-bottom: 10px;
}

.raseekh-landing .footer__logo {
  height: clamp(36px, 5.4vw, 52px);
  max-width: min(320px, 86vw);
}

.raseekh-landing .nav {
  display: flex;
  gap: 28px;
}

.raseekh-landing .nav a {
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.raseekh-landing .nav a:hover {
  color: var(--cyan);
}

.raseekh-landing .header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.raseekh-landing .lang-switch,
.raseekh-landing .theme-toggle {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
}

.raseekh-landing .theme-toggle {
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.raseekh-landing .theme-toggle:hover {
  color: var(--cyan);
  transform: rotate(15deg);
}

.raseekh-landing .lang-switch__btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.raseekh-landing .lang-switch__btn.is-active {
  background: linear-gradient(135deg, #0038ff, #00b8d4);
  color: #fff;
}

.raseekh-landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.raseekh-landing .btn:hover {
  transform: translateY(-1px);
}

.raseekh-landing .btn--primary {
  background: linear-gradient(135deg, #0038ff 0%, #00c6e0 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 56, 255, 0.35);
}

.raseekh-landing .btn--outline,
.raseekh-landing .btn--ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

.raseekh-landing .btn--lg {
  padding: 14px 26px;
  font-size: 1.02rem;
}

.raseekh-landing .nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
}

.raseekh-landing .nav-toggle span {
  display: block;
  height: 2px;
  background: var(--cyan);
  margin: 5px 0;
}

/* Full-bleed hero: a real office photo fills the whole banner, a dark
   editorial overlay sits over it (always dark regardless of the site's own
   light/dark toggle — same treatment as .pillars/.cta__panel), and the copy
   sits on top in white. The photo is a real <img> (not a CSS background)
   specifically so it keeps loading="eager"/fetchpriority="high" for LCP. */
.raseekh-landing .hero.hero--photo {
  position: relative;
  overflow: hidden;
  margin: 0 0 32px;
  padding: 0;
  min-height: clamp(480px, 58vw, 640px);
  display: flex;
  align-items: flex-end;
  background: #0a1f47;
}

.raseekh-landing .hero__bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.raseekh-landing .hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 25, 0.32) 0%,
    rgba(6, 14, 34, 0.6) 55%,
    rgba(4, 9, 22, 0.92) 100%
  );
}

.raseekh-landing .hero__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding-block: 96px 56px;
  color: #fff;
}

.raseekh-landing .hero--photo .eyebrow {
  color: #fff;
}

.raseekh-landing .hero--photo .eyebrow .dot {
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.raseekh-landing .hero--photo h1 {
  color: #fff;
}

.raseekh-landing .hero--photo .hero__lead {
  color: rgba(255, 255, 255, 0.9);
}

.raseekh-landing .hero--photo .hero__tagline {
  color: #fff;
  border-inline-start-color: var(--cyan);
}

.raseekh-landing .hero--photo .btn--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.raseekh-landing .hero--photo .btn--outline:hover {
  background: rgba(255, 255, 255, 0.14);
}

.raseekh-landing .hero__stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.92);
  animation: raseekh-badge-float 5s ease-in-out infinite;
}

.raseekh-landing .hero__stat-chip strong {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cyan);
}

@media (max-width: 640px) {
  .raseekh-landing .hero.hero--photo {
    min-height: 420px;
    align-items: flex-end;
  }

  .raseekh-landing .hero__content {
    padding-block: 64px 40px;
    max-width: 100%;
  }
}

/* Generic gentle-float utility — shared by any standalone icon badge on the
   page (the hero stat chip above, and the CTA section's WhatsApp bubble
   icon) so it isn't a static, lifeless dot next to the button. */
.raseekh-landing .hero__float-badge {
  display: inline-flex;
  animation: raseekh-badge-float 5s ease-in-out infinite;
}

@keyframes raseekh-badge-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.raseekh-landing .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin: 0 0 16px;
}

.raseekh-landing[data-lang="ar"] .eyebrow {
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-ar);
}

.raseekh-landing .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.raseekh-landing .hero h1,
.raseekh-landing .section-head h2,
.raseekh-landing .cta h2 {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.raseekh-landing .hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

.raseekh-landing .hero__lead,
.raseekh-landing .section-head__lead,
.raseekh-landing .cta p {
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 52ch;
}

.raseekh-landing .hero__tagline {
  margin: -8px 0 24px;
  max-width: 52ch;
  font-weight: 600;
  color: var(--text);
  border-inline-start: 3px solid var(--cyan);
  padding-inline-start: 12px;
}

.raseekh-landing .hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.raseekh-landing .section-head {
  margin-bottom: 32px;
}

.raseekh-landing .section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.raseekh-landing .blog__total {
  margin: -8px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.raseekh-landing .blog__total strong {
  color: var(--text);
  font-family: var(--font-en);
}

.raseekh-landing [id] {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.raseekh-landing .services {
  position: relative;
  overflow: hidden;
}

.raseekh-landing .service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.raseekh-landing .service-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(245, 248, 255, 0.9);
  color: var(--muted);
  font-size: 0.86rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.raseekh-landing .service-pill:hover {
  color: var(--text);
  border-color: var(--cyan);
  transform: translateY(-1px);
}

/* Pills used to get a highlighted background/border for "pillar" services,
   visually splitting the row into two tiers. Per feedback, all service pills
   should read as one consistent set — the --pillar modifier class is still
   applied in markup (front-page.php / services.php) but intentionally left
   unstyled here so every pill renders identically via the base .service-pill
   rule above. */

.raseekh-landing .bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.raseekh-landing .card {
  position: relative;
  grid-column: span 4;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  min-height: 168px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.raseekh-landing .card p {
  flex: 1;
}

.raseekh-landing .card__cta {
  align-self: flex-start;
  margin-top: 16px;
}

/* Featured services as a continuous, self-driving marquee — same technique
   as .banner-strip below: the card set is rendered twice in the markup
   (front-page.php duplicates the loop, second pass aria-hidden + tabindex
   -1) and the track animates a flat -50%, which is always exactly one full
   set no matter how many cards there are, so the loop never stutters or
   has to "reset". It never needs a JS timer, can't get stuck paused the
   way the old pointerenter/setInterval version could, and pauses cleanly
   on hover/focus like every other marquee on the site. The real, single,
   fully keyboard/screen-reader-reachable set of cards is the first pass;
   the visual illusion of infinite scroll is free. */
.raseekh-landing .services-carousel {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.raseekh-landing .bento.bento--carousel {
  display: flex;
  grid-template-columns: none;
  width: max-content;
  padding: 4px 2px 14px;
  animation: raseekh-marquee 42s linear infinite;
}

.raseekh-landing[dir="rtl"] .bento.bento--carousel {
  animation-name: raseekh-marquee-rtl;
}

.raseekh-landing .services-carousel:hover .bento.bento--carousel,
.raseekh-landing .services-carousel:focus-within .bento.bento--carousel {
  animation-play-state: paused;
}

.raseekh-landing .bento.bento--carousel > .card {
  grid-column: unset;
  flex: 0 0 300px;
}

.raseekh-landing .card__badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(0, 56, 255, 0.28);
}

/* Featured/pillar service cards used to get a faint blue radial glow that
   plain cards didn't, so the full services list read as two different
   colors mixed together. Per feedback, every service card should look the
   same — .card--featured now falls through to the base .card background
   (var(--glass)) with no override. */

.raseekh-landing .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 14px;
  background: var(--surface-2);
  color: var(--cyan);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.raseekh-landing .card__icon svg {
  width: 22px;
  height: 22px;
}

.raseekh-landing .card:hover .card__icon,
.raseekh-landing .free-offer-card:hover .card__icon {
  transform: scale(1.12) rotate(-4deg);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 56, 255, 0.32);
}

.raseekh-landing .card h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.raseekh-landing .card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* Scrolling "banner" strip right under the hero — a continuous, seamless
   marquee of service topics (icon + label, reusing the same services.json
   entries and icon set as the rest of the page) so the top of the page has
   some motion and visual rhythm instead of stopping dead after the hero.
   Two identical passes of the item list sit side by side in the track and
   the whole thing translates by exactly -50%, so the loop point is
   invisible. Pauses on hover/focus so it's not fighting anyone trying to
   read a label. */
.raseekh-landing .banner-strip {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.raseekh-landing .banner-strip__track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  padding: 14px 24px;
  animation: raseekh-marquee 32s linear infinite;
}

.raseekh-landing .banner-strip:hover .banner-strip__track,
.raseekh-landing .banner-strip:focus-within .banner-strip__track {
  animation-play-state: paused;
}

.raseekh-landing .banner-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.raseekh-landing .banner-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--cyan);
  flex: none;
}

.raseekh-landing .banner-strip__icon svg {
  width: 16px;
  height: 16px;
}

@keyframes raseekh-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.raseekh-landing[dir="rtl"] .banner-strip__track {
  animation-name: raseekh-marquee-rtl;
}

@keyframes raseekh-marquee-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

/* "Pillars" banner — the five core disciplines, shown on a dark navy panel
   so the page isn't just flat light cards back to back. A CSS-only grain
   texture (an inline SVG feTurbulence filter, no downloaded image) plus a
   soft glow give it depth; the icon badges climb in an ascending staircase
   on wide screens, echoing a fanned/arced arrangement without relying on
   fragile hand-computed trigonometry. */
.raseekh-landing .pillars {
  position: relative;
  overflow: hidden;
  margin: 32px 0;
  border-radius: 28px;
  color: #fff;
  background-color: #0a1f47;
  /* A real desk/office photo (passed in per-page via the --pillars-bg-image
     custom property) sits under a dark editorial gradient so the white
     copy stays readable; if the property is ever unset, the gradient alone
     still reads fine as a plain dark panel. */
  background-image:
    linear-gradient(130deg, rgba(5, 10, 25, 0.9), rgba(9, 22, 48, 0.84) 45%, rgba(5, 10, 25, 0.94)),
    var(--pillars-bg-image, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.raseekh-landing .pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.raseekh-landing .pillars__glow {
  position: absolute;
  inset-inline-end: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.22;
  filter: blur(100px);
  pointer-events: none;
}

.raseekh-landing .pillars__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: 60px;
}

.raseekh-landing .pillars__copy .eyebrow {
  color: #fff;
}

.raseekh-landing .pillars__copy .eyebrow .dot {
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
}

.raseekh-landing .pillars__title {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
}

.raseekh-landing .pillars__accent {
  color: #fff;
}

.raseekh-landing .pillars__lead {
  margin: 0 0 26px;
  max-width: 46ch;
  color: rgba(234, 240, 255, 0.78);
}

.raseekh-landing .pillars__stack {
  display: grid;
  grid-template-columns: repeat(3, 104px);
  justify-content: end;
  gap: 26px 22px;
  padding-inline-end: 6px;
}

.raseekh-landing .pillars__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 104px;
  text-align: center;
}

.raseekh-landing .pillars__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 10px 24px rgba(3, 10, 30, 0.35);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.raseekh-landing .pillars__item:hover .pillars__badge {
  transform: translateY(-4px) scale(1.06);
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--cyan);
  box-shadow: 0 14px 30px rgba(0, 86, 214, 0.35);
}

.raseekh-landing .pillars__item:hover .pillars__label {
  color: #fff;
}

.raseekh-landing .pillars__badge svg {
  width: 26px;
  height: 26px;
}

.raseekh-landing .pillars__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* A fixed 3-column grid (not flex-wrap) keeps the five items aligned into
   clean, even rows at every width — no per-item offset, no ragged wrapping. */
@media (max-width: 980px) {
  .raseekh-landing .pillars__grid {
    grid-template-columns: 1fr;
    padding-block: 44px;
    gap: 32px;
  }

  .raseekh-landing .pillars__stack {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .raseekh-landing .pillars {
    margin: 22px 0;
    border-radius: 20px;
  }

  .raseekh-landing .pillars__grid {
    padding-block: 32px;
  }

  .raseekh-landing .pillars__stack {
    grid-template-columns: repeat(3, 84px);
    gap: 20px 16px;
  }

  .raseekh-landing .pillars__item {
    width: 84px;
  }

  .raseekh-landing .pillars__badge {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.14);
  }

  .raseekh-landing .pillars__badge svg {
    width: 22px;
    height: 22px;
  }

  .raseekh-landing .pillars__label {
    font-size: 0.76rem;
  }
}

.raseekh-landing .free-offers {
  padding: 40px 0 12px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .free-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.raseekh-landing .free-offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 24px 22px;
  border-radius: var(--radius);
  background:
    radial-gradient(900px 160px at 100% 0%, rgba(0, 145, 234, 0.12), transparent 55%),
    var(--surface);
  border: 1px solid rgba(0, 56, 255, 0.22);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .free-offer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.4);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.14);
}

.raseekh-landing .free-offer-card__badge {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.raseekh-landing .free-offer-card h3 {
  margin: 4px 0 4px;
  font-size: 1.08rem;
}

.raseekh-landing .free-offer-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.94rem;
}

.raseekh-landing .free-offer-card__cta {
  margin-top: auto;
  padding: 9px 18px;
  font-size: 0.88rem;
}

.raseekh-landing .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.raseekh-landing .step {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: var(--surface);
}

.raseekh-landing .step__index {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--cyan);
  margin-bottom: 12px;
  font-size: 0.85rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.raseekh-landing .step:hover .step__index {
  transform: scale(1.15);
  color: var(--blue);
}

.raseekh-landing .step h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.raseekh-landing .step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* "Why RASEEKH" is now a full-bleed photo panel — same treatment as
   .pillars/.cta__panel/.hero--photo: a real desk photo (--whyus-bg-image,
   set per-page) under a dark gradient, white copy on top. The "how we
   work" steps render as a second block inside the same panel (see
   .why-us__process below) rather than their own separate section. */
.raseekh-landing .why-us.why-us--photo {
  position: relative;
  overflow: hidden;
  margin: 32px 0;
  border-radius: 28px;
  color: #fff;
  background-color: #0a1f47;
  background-image:
    linear-gradient(130deg, rgba(5, 10, 25, 0.9), rgba(9, 22, 48, 0.84) 45%, rgba(5, 10, 25, 0.94)),
    var(--whyus-bg-image, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding-block: 60px;
}

.raseekh-landing .why-us--photo .section-head .eyebrow {
  color: var(--cyan);
}

.raseekh-landing .why-us--photo .section-head h2 {
  color: #fff;
}

.raseekh-landing .why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}

@media (max-width: 640px) {
  .raseekh-landing .why-grid {
    grid-template-columns: 1fr;
  }
}

/* "How we work" lives as a second block inside the same panel (under the
   one "ليه رسيخ؟" heading) instead of its own separate section — a divider
   plus its own smaller sub-heading keeps the two readable as
   related-but-distinct without a hard section break. */
.raseekh-landing .why-us__process {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.raseekh-landing .why-us__process-head {
  margin-bottom: 24px;
}

.raseekh-landing .why-us__process-head .eyebrow {
  color: var(--cyan);
}

.raseekh-landing .why-us__process-head h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: #fff;
}

@media (max-width: 640px) {
  .raseekh-landing .why-us__process {
    margin-top: 32px;
    padding-top: 28px;
  }
}

.raseekh-landing .why-us--photo .why-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .why-us--photo .why-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--cyan);
}

.raseekh-landing .why-us--photo .why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.raseekh-landing .why-us--photo .why-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: #fff;
}

.raseekh-landing .why-us--photo .why-card p {
  margin: 0;
  color: rgba(235, 240, 255, 0.78);
  font-size: 0.92rem;
}

.raseekh-landing .why-us--photo .step {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.raseekh-landing .why-us--photo .step__index {
  color: var(--cyan);
}

.raseekh-landing .why-us--photo .step:hover .step__index {
  color: #fff;
}

.raseekh-landing .why-us--photo .step h3 {
  color: #fff;
}

.raseekh-landing .why-us--photo .step p {
  color: rgba(235, 240, 255, 0.78);
}

@media (max-width: 640px) {
  .raseekh-landing .why-us.why-us--photo {
    margin: 22px 0;
    border-radius: 20px;
    padding-block: 40px;
  }
}

.raseekh-landing .audience {
  padding: 40px 0 24px;
}

.raseekh-landing .audience-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.raseekh-landing .audience-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.raseekh-landing .audience-tag:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 56, 255, 0.32);
  background: var(--surface-2);
}

.raseekh-landing .team {
  padding: 72px 0 24px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
}

.raseekh-landing .team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 12px;
}

.raseekh-landing .team-card__photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  margin-bottom: 8px;
}

.raseekh-landing .team-card__photo--placeholder {
  display: block;
  background: linear-gradient(135deg, rgba(0, 56, 255, 0.14), rgba(0, 145, 234, 0.08));
}

.raseekh-landing .team-card__name {
  margin: 0;
  font-size: 1rem;
}

.raseekh-landing .team-card__role {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.raseekh-landing .testimonials {
  padding: 64px 0 24px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.raseekh-landing .testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .testimonial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.28);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.14);
}

.raseekh-landing .testimonial-card__quote-mark {
  position: absolute;
  top: 6px;
  inset-inline-start: 20px;
  font-size: 3.4rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(0, 56, 255, 0.14);
}

.raseekh-landing .testimonial-card__text {
  margin: 18px 0 0;
  font-size: 0.98rem;
  color: var(--text);
}

.raseekh-landing .testimonial-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.raseekh-landing .testimonial-card__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.raseekh-landing .testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.raseekh-landing .testimonial-card__name {
  font-weight: 600;
  font-size: 0.92rem;
}

.raseekh-landing .testimonial-card__role {
  color: var(--muted);
  font-size: 0.82rem;
}

.raseekh-landing .clients {
  padding: 40px 0 8px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.raseekh-landing .client-chip {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.raseekh-landing .client-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 56, 255, 0.32);
}

.raseekh-landing .partners {
  padding: 56px 0 24px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .partners .section-head {
  margin-bottom: 28px;
}

.raseekh-landing .partners-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}

.raseekh-landing .partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding: 22px 32px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .partner-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.3);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.14);
}

.raseekh-landing .partner-card__logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.raseekh-landing .blog {
  padding: 72px 0 24px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.raseekh-landing .blog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: var(--surface);
  overflow: hidden;
}

.raseekh-landing .blog-cover {
  margin: -22px -22px 6px;
  aspect-ratio: 16 / 9;
  line-height: 0;
}

.raseekh-landing .blog-cover svg {
  display: block;
  width: 100%;
  height: 100%;
}

.raseekh-landing .blog-cover--single {
  margin: 0 0 20px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}

.raseekh-landing .blog-card__date,
.raseekh-landing .blog-post__date {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.raseekh-landing .blog-post__index {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  margin-inline-end: 10px;
  opacity: 0.75;
}

.raseekh-landing .blog-archive__count {
  color: var(--muted);
  font-size: 0.86rem;
  margin: -8px 0 0;
}

.raseekh-landing .blog-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.raseekh-landing .blog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.raseekh-landing .blog-card__more,
.raseekh-landing .blog-post__more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.raseekh-landing .blog-card__more:hover,
.raseekh-landing .blog-post__more:hover {
  text-decoration: underline;
}

.raseekh-landing .blog-viewall,
.raseekh-landing .view-all {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.raseekh-landing .blog-mobile-quick {
  display: none;
}

.raseekh-landing .blog-mobile-quick .faq-list--compact {
  margin-bottom: 16px;
}

.raseekh-landing .blog-mobile-quick__cta {
  display: flex;
  justify-content: center;
}

.raseekh-landing .view-all button.btn {
  font-family: inherit;
  cursor: pointer;
}

.raseekh-landing .contact-panel {
  margin-bottom: 28px;
}

.raseekh-landing .contact-form-panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 28px;
}

.raseekh-landing .contact-form-panel h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.raseekh-landing .contact-form-panel .form-lead {
  color: var(--muted);
  margin: 0 0 22px;
}

.raseekh-landing .contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.raseekh-landing .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.raseekh-landing .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.raseekh-landing .form-field input,
.raseekh-landing .form-field select,
.raseekh-landing .form-field textarea {
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.raseekh-landing .form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.raseekh-landing .form-field input:focus,
.raseekh-landing .form-field select:focus,
.raseekh-landing .form-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 56, 255, 0.14);
}

.raseekh-landing .contact-form .btn {
  margin-top: 4px;
}

.raseekh-landing .form-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 12px 0 0;
}

.raseekh-landing .form-banner {
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
}

.raseekh-landing .form-banner strong {
  display: block;
  margin-bottom: 4px;
}

.raseekh-landing .form-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.raseekh-landing .form-banner--success {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
}

.raseekh-landing .form-banner--error {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.1);
}

@media (max-width: 720px) {
  .raseekh-landing .form-row {
    grid-template-columns: 1fr;
  }

  .raseekh-landing .contact-form-panel {
    padding: 22px;
  }
}

/* Zakat calculator (page-templates/zakat-calculator.php) — reuses the
   contact form's .form-field/.form-row/.form-note/.form-banner classes
   above for every plain input, and only adds what's specific to this page:
   the disclaimer callout, the "؟" field-help disclosures, the tiered-
   inventory rows, the results/scenario cards, and the print-only report
   head used by the "download PDF" button (see the @media print block near
   the end of this file). */
.raseekh-landing .zakat-disclaimer {
  background: rgba(0, 56, 255, 0.06);
  border: 1px solid rgba(0, 56, 255, 0.24);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 28px;
}

.raseekh-landing .zakat-disclaimer strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
}

.raseekh-landing .zakat-disclaimer p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.7;
}

.raseekh-landing .zakat-form {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 28px;
}

.raseekh-landing .zakat-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 32px;
}

.raseekh-landing .zakat-fieldset:last-of-type {
  margin-bottom: 20px;
}

.raseekh-landing .zakat-fieldset legend {
  padding: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.raseekh-landing .zakat-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.raseekh-landing .field-help {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.raseekh-landing .field-help:hover,
.raseekh-landing .field-help[aria-expanded="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.raseekh-landing .field-help__panel {
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0 0;
}

.raseekh-landing .zakat-tiers {
  border-top: 1px dashed var(--line);
  padding-top: 20px;
  margin-top: 8px;
}

.raseekh-landing .zakat-tiers h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.raseekh-landing .zakat-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  align-items: end;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.raseekh-landing .zakat-tier-row:last-of-type {
  border-bottom: none;
}

.raseekh-landing .zakat-tier-row__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.88rem;
  align-self: center;
}

.raseekh-landing .zakat-tier-row .form-field {
  margin-bottom: 0;
}

.raseekh-landing .form-field--pct input {
  text-align: center;
}

.raseekh-landing .zakat-tier-mismatch {
  background: rgba(224, 51, 79, 0.08);
  border: 1px solid rgba(224, 51, 79, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 14px !important;
}

.raseekh-landing .zakat-skip-note {
  font-style: italic;
}

.raseekh-landing .zakat-results {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.raseekh-landing .zakat-results h2 {
  margin: 0 0 18px;
  font-size: 1.4rem;
}

.raseekh-landing .zakat-results h3 {
  font-size: 1.05rem;
  margin: 28px 0 12px;
}

.raseekh-landing .zakat-results__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px 20px;
}

.raseekh-landing .zakat-results__summary p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.raseekh-landing .zakat-results__summary strong {
  color: var(--text);
  font-family: var(--font-en);
}

.raseekh-landing .zakat-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.raseekh-landing .zakat-scenario-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .zakat-scenario-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.3);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.12);
}

.raseekh-landing .zakat-scenario-card h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.raseekh-landing .zakat-scenario-card p {
  margin: 0 0 6px;
  font-size: 0.86rem;
  color: var(--muted);
}

.raseekh-landing .zakat-scenario-card strong {
  color: var(--text);
  font-family: var(--font-en);
}

.raseekh-landing .zakat-scenario-card__due {
  margin: 0 !important;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.raseekh-landing .zakat-scenario-card__due strong {
  color: var(--blue);
  font-size: 1.05rem;
}

.raseekh-landing .zakat-notes ul {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raseekh-landing .zakat-notes li {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.raseekh-landing .zakat-results__actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.raseekh-landing .zakat-email-action {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.raseekh-landing .zakat-email-action h3 {
  margin: 0 0 6px;
}

.raseekh-landing .zakat-email-action [data-zakat-send-email] {
  margin-top: 10px;
}

.raseekh-landing .zakat-recalculate {
  margin-top: 20px;
}

.raseekh-landing .zakat-print-head {
  display: none;
}

@media (max-width: 900px) {
  .raseekh-landing .zakat-scenarios {
    grid-template-columns: 1fr;
  }

  .raseekh-landing .zakat-tier-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 720px) {
  .raseekh-landing .zakat-form,
  .raseekh-landing .zakat-results {
    padding: 20px;
  }
}

/* Printing the result (the calculator's "PDF" is just the browser's own
   print-to-PDF, triggered by window.print() — this avoids every pitfall of
   generating Arabic/RTL text client-side through a canvas or PDF library,
   since the browser is already the thing correctly shaping and laying out
   the Arabic on screen). Everything except the results panel is hidden,
   and the print-only letterhead (hidden on screen) takes its place. */
@media print {
  .raseekh-landing .site-header,
  .raseekh-landing .promo-bar,
  .raseekh-landing .whatsapp-float,
  .raseekh-landing .site-footer,
  .raseekh-landing .section-doodle,
  .raseekh-landing .section-head,
  .raseekh-landing .zakat-disclaimer,
  .raseekh-landing .zakat-form,
  .raseekh-landing .zakat-results__actions,
  .raseekh-landing .zakat-email-action,
  .raseekh-landing .zakat-recalculate {
    display: none !important;
  }

  .raseekh-landing .zakat-print-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #000;
  }

  .raseekh-landing .zakat-print-head img {
    height: 40px;
    width: auto;
  }

  .raseekh-landing .zakat-print-head p {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
  }

  .raseekh-landing .zakat-results {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .raseekh-landing .zakat-scenarios {
    grid-template-columns: repeat(3, 1fr);
  }

  .raseekh-landing .zakat-scenario-card {
    break-inside: avoid;
  }
}

.raseekh-landing .blog-archive {
  padding: 56px 0 80px;
}

.raseekh-landing .blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.raseekh-landing .blog-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

.raseekh-landing .blog-related__title {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.raseekh-landing .blog-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .blog-post h2 {
  margin: 6px 0 14px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.raseekh-landing .blog-post:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.3);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.12);
}

.raseekh-landing .blog-post__body {
  color: var(--muted);
  max-width: 68ch;
}

.raseekh-landing .blog-post__body p {
  margin: 0 0 14px;
}

.raseekh-landing .blog-post__body p:last-child {
  margin-bottom: 0;
}

.raseekh-landing .blog-empty {
  color: var(--muted);
}

.raseekh-landing .blog-post__excerpt {
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 68ch;
}

.raseekh-landing .blog-single {
  max-width: 72ch;
  margin: 0 auto;
}

.raseekh-landing .blog-single__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.raseekh-landing .blog-single__back:hover {
  color: var(--cyan);
}

.raseekh-landing .blog-single h1 {
  margin: 6px 0 18px;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.raseekh-landing .blog-single__question {
  border-inline-start: 3px solid var(--blue);
  background: rgba(0, 56, 255, 0.05);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 24px;
}

.raseekh-landing .blog-single__question .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 6px;
}

.raseekh-landing .blog-single__question p {
  margin: 0;
  font-weight: 600;
}

.raseekh-landing .blog-single__answer .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.raseekh-landing .blog-single__answer .blog-post__body {
  color: var(--ink, #16233f);
}

.raseekh-landing .blog-single__cta {
  margin-top: 36px;
}

.raseekh-landing .footer__contacts {
  margin-top: 10px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 8px;
  align-items: baseline;
}

.raseekh-landing .footer__contact-line {
  display: contents;
}

.raseekh-landing .footer__contact-label {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.raseekh-landing .legal-body {
  color: var(--text);
  max-width: 72ch;
}

/* Privacy/Terms are single WP pages with no separate English post — both
   language bodies render server-side and this toggles which one shows,
   keyed off the same [data-lang] attribute the rest of the site's i18n
   system already sets on .raseekh-landing (see applyI18n in script.js).
   Each state is spelled out explicitly (rather than relying on a generic
   hide-rule plus an override) so specificity can't fight itself. */
.raseekh-landing .legal-body[data-lang-content="ar"] {
  display: block;
}

.raseekh-landing .legal-body[data-lang-content="en"] {
  display: none;
}

.raseekh-landing[data-lang="en"] .legal-body[data-lang-content="ar"] {
  display: none;
}

.raseekh-landing[data-lang="en"] .legal-body[data-lang-content="en"] {
  display: block;
}

.raseekh-landing .section-head h1 [data-lang-content="ar"] {
  display: inline;
}

.raseekh-landing .section-head h1 [data-lang-content="en"] {
  display: none;
}

.raseekh-landing[data-lang="en"] .section-head h1 [data-lang-content="ar"] {
  display: none;
}

.raseekh-landing[data-lang="en"] .section-head h1 [data-lang-content="en"] {
  display: inline;
}

.raseekh-landing .legal-body h2 {
  font-size: 1.3rem;
  margin: 32px 0 12px;
}

.raseekh-landing .legal-body h2:first-child {
  margin-top: 0;
}

.raseekh-landing .legal-body h3 {
  font-size: 1.08rem;
  margin: 22px 0 10px;
}

.raseekh-landing .legal-body p {
  color: var(--muted);
  margin: 0 0 14px;
}

.raseekh-landing .legal-body ul,
.raseekh-landing .legal-body ol {
  color: var(--muted);
  margin: 0 0 14px;
  padding-inline-start: 22px;
}

.raseekh-landing .legal-body li {
  margin: 0 0 8px;
}

.raseekh-landing .legal-body strong {
  color: var(--text);
}

.raseekh-landing .footer__legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.raseekh-landing .cta {
  padding: 48px 0 72px;
}

.raseekh-landing .cta__panel {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: 40px;
  border-radius: 28px;
  border: 1px solid var(--line);
  overflow: hidden;
  color: #fff;
  background-color: #0a1f47;
  /* Same editorial-photo-under-dark-gradient treatment as the pillars
     banner, so the closing CTA reads as one visual family with it rather
     than a plain flat card. */
  background-image:
    linear-gradient(120deg, rgba(5, 10, 25, 0.92), rgba(9, 22, 48, 0.86) 55%, rgba(5, 10, 25, 0.94)),
    var(--cta-bg-image, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.raseekh-landing .cta__panel .eyebrow {
  color: var(--cyan);
}

.raseekh-landing .cta__panel h2 {
  color: #fff;
}

.raseekh-landing .cta__panel p {
  color: rgba(234, 240, 255, 0.8);
}

.raseekh-landing .cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.raseekh-landing .cta__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow);
}

.raseekh-landing .cta__more {
  font-size: 14px;
  color: rgba(234, 240, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.raseekh-landing .cta__more:hover {
  color: var(--cyan);
}

/* Floating WhatsApp button — fixed corner, RTL/LTR-aware via logical
   properties so it sits in the same visually-natural corner regardless of
   language direction. */
.raseekh-landing .whatsapp-float {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  animation: raseekh-wa-float-in 0.5s ease 0.7s both;
}

.raseekh-landing .whatsapp-float__toggle {
  position: relative;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(10, 20, 40, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.raseekh-landing .whatsapp-float__toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(10, 20, 40, 0.34);
}

.raseekh-landing .whatsapp-float__ring {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: raseekh-wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

.raseekh-landing .whatsapp-float.is-open .whatsapp-float__ring {
  animation: none;
  opacity: 0;
}

.raseekh-landing .whatsapp-float__panel {
  min-width: 240px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: bottom center;
  animation: raseekh-wa-panel-in 0.18s ease both;
}

.raseekh-landing .whatsapp-float__panel[hidden] {
  display: none;
}

.raseekh-landing .whatsapp-float__title {
  margin: 0 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.raseekh-landing .whatsapp-float__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.raseekh-landing .whatsapp-float__link:hover {
  background: var(--glass);
  transform: translateY(-1px);
}

.raseekh-landing .whatsapp-float__link-icon {
  flex: none;
  display: flex;
  color: #25d366;
}

.raseekh-landing .whatsapp-float__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.raseekh-landing .whatsapp-float__link-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.raseekh-landing .whatsapp-float__link-number {
  font-size: 0.92rem;
  font-weight: 600;
}

@keyframes raseekh-wa-float-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes raseekh-wa-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes raseekh-wa-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Sticky bottom promo strip — advertises the free services site-wide, one
   red accent (deliberately distinct from the brand blue/cyan so it reads as
   an offer, not a nav element) pinned under the page and scrolling nowhere.
   The floating WhatsApp button shifts up to sit above it (see
   .has-promo-bar .whatsapp-float below) so the two never overlap. */
:root {
  --promo-bar-h: 60px;
}

.raseekh-landing .promo-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 55;
  min-height: var(--promo-bar-h);
  background: linear-gradient(90deg, #c81e3a, #e0334f);
  box-shadow: 0 -10px 30px rgba(10, 10, 20, 0.25);
  animation: raseekh-wa-float-in 0.5s ease 0.9s both;
}

.raseekh-landing .promo-bar[hidden] {
  display: none;
}

.raseekh-landing .promo-bar__inner {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  min-height: var(--promo-bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
  color: #fff;
}

.raseekh-landing .promo-bar__badge {
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
}

.raseekh-landing .promo-bar__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raseekh-landing .promo-bar__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
  font-size: 0.72rem;
  margin-inline-end: 6px;
}

.raseekh-landing .promo-bar__sep {
  margin-inline: 6px;
  opacity: 0.75;
}

.raseekh-landing .promo-bar__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: #c81e3a;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.raseekh-landing .promo-bar__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.raseekh-landing .promo-bar__dismiss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.raseekh-landing .promo-bar__dismiss:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Lift the floating WhatsApp button clear of the promo bar so the two
   never stack on top of each other. --promo-bar-h is kept in sync with the
   bar's real rendered height by script.js (initPromoBar/ResizeObserver) —
   the value below is only the pre-JS/first-paint fallback, which is why a
   generous static guess used to still leave the button crowding a bar that
   actually wrapped to more lines than the guess assumed. */
.raseekh-landing.has-promo-bar .whatsapp-float {
  inset-block-end: calc(var(--promo-bar-h) + 22px);
}

.raseekh-landing.has-promo-bar .site-footer {
  padding-block-end: calc(24px + var(--promo-bar-h));
}

@media (max-width: 640px) {
  :root {
    --promo-bar-h: 64px;
  }

  .raseekh-landing .promo-bar__inner {
    flex-wrap: wrap;
    padding-block: 8px;
    padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .raseekh-landing .promo-bar__text {
    order: 3;
    flex-basis: 100%;
    white-space: normal;
    font-size: 0.78rem;
  }

  /* Only the first free service is named on narrow screens — naming both
     ("X و Y") routinely wrapped to 2–3 lines and inflated the bar well past
     its assumed height, which is what let it crowd the WhatsApp button. */
  .raseekh-landing .promo-bar__item[data-promo-service="1"],
  .raseekh-landing .promo-bar__sep {
    display: none;
  }

  .raseekh-landing .promo-bar__cta {
    margin-inline-start: auto;
    padding: 7px 14px;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raseekh-landing .promo-bar {
    animation: none;
  }
}

/* Decorative section "doodles" — large, faint, abstract line-art (never
   photographic) that gives a section some visual life without competing
   with the content sitting on top of it. Purely cosmetic (aria-hidden) and
   clipped to its own section via overflow:hidden on the parent.
   Each one draws itself in ONCE, in sync with the section it belongs to
   (via the same scroll-triggered .reveal/.is-visible system the rest of
   the page uses) rather than looping forever — a deliberate entrance tied
   to reading progress, not ambient noise. */
.raseekh-landing .section-doodle {
  position: absolute;
  pointer-events: none;
  color: var(--cyan);
  opacity: 0.16;
  z-index: 0;
}

.raseekh-landing .section-doodle svg {
  display: block;
  width: 100%;
  height: 100%;
}

.raseekh-landing .section-doodle--percent {
  inset-inline-end: -50px;
  top: -10px;
  width: 280px;
  height: 280px;
}

.raseekh-landing .section-doodle--quote {
  inset-inline-start: -36px;
  top: -14px;
  width: 300px;
  height: 240px;
}

.raseekh-landing .section-doodle--calculator {
  inset-inline-end: -30px;
  bottom: -20px;
  width: 260px;
  height: 280px;
}

.raseekh-landing .section-doodle--ledger {
  inset-inline-end: -40px;
  top: -20px;
  width: 240px;
  height: 260px;
}

.raseekh-landing .section-doodle--article {
  inset-inline-start: -30px;
  bottom: -24px;
  width: 260px;
  height: 260px;
}

.raseekh-landing .section-doodle--question {
  inset-inline-end: -20px;
  top: -10px;
  width: 260px;
  height: 260px;
}

.raseekh-landing.theme-dark .section-doodle {
  opacity: 0.2;
  color: var(--blue);
}

/* Pre-reveal state: hidden and slightly lower, then eases up to its resting
   opacity once its section scrolls into view. Reuses the same JS toggle as
   every other .reveal target. This fade is deliberately quick (not the
   1.3s it used to be) so it settles BEFORE script.js starts the stroke
   "drawing" animation on the linework inside — the two used to run at the
   same time, and racing a barely-there fade-in against a barely-there
   16%-opacity stroke is exactly why the draw-in effect was so hard to
   notice. */
.raseekh-landing.has-reveal .section-doodle.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.raseekh-landing.has-reveal .section-doodle.reveal.is-visible {
  opacity: 0.16;
  transform: none;
}

.raseekh-landing.theme-dark.has-reveal .section-doodle.reveal.is-visible {
  opacity: 0.2;
}

/* Briefly brightened by script.js (drawDoodle) for the ~2s the stroke is
   actively tracing itself in, then released back to the normal faint
   resting opacity above — the visible "spotlight, then settle" is what
   makes the hand-drawn motion actually read instead of disappearing into
   the doodle's usual low opacity. */
.raseekh-landing.has-reveal .section-doodle.is-drawing {
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.raseekh-landing.theme-dark.has-reveal .section-doodle.is-drawing {
  opacity: 0.55;
}

.raseekh-landing .free-offers > .container,
.raseekh-landing .testimonials > .container,
.raseekh-landing .clients > .container,
.raseekh-landing .services > .container,
.raseekh-landing .blog > .container,
.raseekh-landing .faq > .container,
.raseekh-landing .team > .container,
.raseekh-landing .partners > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .raseekh-landing .section-doodle {
    width: 150px !important;
    height: 150px !important;
    opacity: 0.12;
  }

  .raseekh-landing.has-reveal .section-doodle.reveal.is-visible {
    opacity: 0.12;
  }

  .raseekh-landing.has-reveal .section-doodle.is-drawing {
    opacity: 0.4;
  }
}

.raseekh-landing .site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 28px;
  background: var(--bg-deep);
}

/* A grid with evenly-stretched fr tracks looks right only when every
   column's content fills its track — these columns don't (a few short nav
   links vs. a full address block), and align-items:flex-start hugs each
   column's content to ONE edge of its own (wide, mostly-empty) track. The
   unused width inside each track then reads as one big dead gap sitting
   right before the next column's text, instead of the actual 28px gap
   between tracks. A flex row with content-sized columns (each only as wide
   as it needs to be) and a real, even gap between them fixes that. */
.raseekh-landing .footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 40px;
  margin-bottom: 24px;
}

.raseekh-landing .footer__brand-block {
  min-width: 0;
  flex: 1 1 240px;
  max-width: 320px;
}

.raseekh-landing .footer__brand {
  font-weight: 700;
  margin: 0 0 6px;
}

.raseekh-landing .footer__en {
  margin: 0;
  color: var(--muted);
}

.raseekh-landing .footer__col-title {
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.raseekh-landing .footer__col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 150px;
}

.raseekh-landing .site-footer p,
.raseekh-landing .site-footer a {
  color: var(--muted);
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.raseekh-landing .site-footer a:hover {
  color: var(--cyan);
}

.raseekh-landing .footer__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: 20px;
}

.raseekh-landing .footer__partners-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.raseekh-landing .footer__partners-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.raseekh-landing .footer__partner-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 6px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.raseekh-landing .footer__partner-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 40, 90, 0.14);
}

.raseekh-landing .footer__partner-item img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.raseekh-landing .footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Visual polish pass: ambient motion, scroll-lift header, hover depth,
   scroll-reveal, and the FAQ accordion + address line added alongside it.
   --------------------------------------------------------------------- */

.raseekh-landing .ambient__orb--cyan {
  animation: raseekh-orb-drift-a 22s ease-in-out infinite;
}

.raseekh-landing .ambient__orb--blue {
  animation: raseekh-orb-drift-b 26s ease-in-out infinite;
}

@keyframes raseekh-orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 26px) scale(1.08); }
}

@keyframes raseekh-orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, -22px) scale(1.06); }
}

.raseekh-landing .site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.raseekh-landing .site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  box-shadow: 0 12px 30px rgba(15, 40, 90, 0.10);
}

.raseekh-landing .btn--primary:hover {
  box-shadow: 0 14px 36px rgba(0, 56, 255, 0.42);
  filter: saturate(1.08);
}

.raseekh-landing .card,
.raseekh-landing .step,
.raseekh-landing .blog-card,
.raseekh-landing .team-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.raseekh-landing .card:hover,
.raseekh-landing .step:hover,
.raseekh-landing .blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 56, 255, 0.3);
  box-shadow: 0 16px 34px rgba(15, 40, 90, 0.12);
}

.raseekh-landing .team-card:hover {
  transform: translateY(-3px);
}

/* Scroll reveal: base state only applies once JS has confirmed
   IntersectionObserver support and added `.has-reveal` to the root, so a
   visitor with JS disabled (or a crawler that doesn't run it) always sees
   full content with no hidden state. */
.raseekh-landing.has-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.raseekh-landing.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered entrance for grid children: the grid itself is the actual
   .reveal target that script.js's IntersectionObserver watches (one entry
   per section, not one per card), but each card gets its own delayed
   opacity/transform transition so items cascade in one after another
   instead of the whole grid popping in as a single flat block. */
.raseekh-landing.has-reveal .bento > .card,
.raseekh-landing.has-reveal .testimonials-grid > .testimonial-card,
.raseekh-landing.has-reveal .free-offers-grid > .free-offer-card,
.raseekh-landing.has-reveal .clients-grid > .client-chip,
.raseekh-landing.has-reveal .team-grid > .team-card,
.raseekh-landing.has-reveal .pillars__stack > .pillars__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.raseekh-landing.has-reveal .bento.is-visible > .card,
.raseekh-landing.has-reveal .testimonials-grid.is-visible > .testimonial-card,
.raseekh-landing.has-reveal .free-offers-grid.is-visible > .free-offer-card,
.raseekh-landing.has-reveal .clients-grid.is-visible > .client-chip,
.raseekh-landing.has-reveal .team-grid.is-visible > .team-card,
.raseekh-landing.has-reveal .pillars__stack.is-visible > .pillars__item {
  opacity: 1;
  transform: none;
}

.raseekh-landing .bento > .card:nth-child(1),
.raseekh-landing .testimonials-grid > .testimonial-card:nth-child(1),
.raseekh-landing .free-offers-grid > .free-offer-card:nth-child(1),
.raseekh-landing .clients-grid > .client-chip:nth-child(1),
.raseekh-landing .team-grid > .team-card:nth-child(1),
.raseekh-landing .pillars__stack > .pillars__item:nth-child(1) { transition-delay: 0s; }

.raseekh-landing .bento > .card:nth-child(2),
.raseekh-landing .testimonials-grid > .testimonial-card:nth-child(2),
.raseekh-landing .free-offers-grid > .free-offer-card:nth-child(2),
.raseekh-landing .clients-grid > .client-chip:nth-child(2),
.raseekh-landing .team-grid > .team-card:nth-child(2),
.raseekh-landing .pillars__stack > .pillars__item:nth-child(2) { transition-delay: 0.1s; }

.raseekh-landing .bento > .card:nth-child(3),
.raseekh-landing .testimonials-grid > .testimonial-card:nth-child(3),
.raseekh-landing .free-offers-grid > .free-offer-card:nth-child(3),
.raseekh-landing .clients-grid > .client-chip:nth-child(3),
.raseekh-landing .team-grid > .team-card:nth-child(3),
.raseekh-landing .pillars__stack > .pillars__item:nth-child(3) { transition-delay: 0.2s; }

.raseekh-landing .bento > .card:nth-child(4),
.raseekh-landing .clients-grid > .client-chip:nth-child(4),
.raseekh-landing .team-grid > .team-card:nth-child(4),
.raseekh-landing .pillars__stack > .pillars__item:nth-child(4) { transition-delay: 0.3s; }

.raseekh-landing .bento > .card:nth-child(5),
.raseekh-landing .clients-grid > .client-chip:nth-child(5),
.raseekh-landing .team-grid > .team-card:nth-child(5),
.raseekh-landing .pillars__stack > .pillars__item:nth-child(5) { transition-delay: 0.4s; }

.raseekh-landing .bento > .card:nth-child(6),
.raseekh-landing .clients-grid > .client-chip:nth-child(6),
.raseekh-landing .team-grid > .team-card:nth-child(6) { transition-delay: 0.3s; }

.raseekh-landing .bento > .card:nth-child(n+7),
.raseekh-landing .clients-grid > .client-chip:nth-child(n+7),
.raseekh-landing .team-grid > .team-card:nth-child(n+7) { transition-delay: 0.36s; }

.raseekh-landing .faq {
  padding: 72px 0 24px;
  position: relative;
  overflow: hidden;
}

.raseekh-landing .faq-list {
  display: grid;
  gap: 12px;
}

.raseekh-landing .faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.raseekh-landing .faq-item:hover {
  border-color: rgba(0, 56, 255, 0.24);
}

.raseekh-landing .faq-item[open] {
  border-color: rgba(0, 56, 255, 0.3);
  background: var(--glass);
}

.raseekh-landing .faq-item__q {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.raseekh-landing .faq-item__q::-webkit-details-marker {
  display: none;
}

.raseekh-landing .faq-item__q-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.raseekh-landing .faq-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--cyan);
}

.raseekh-landing .faq-item__icon svg {
  width: 16px;
  height: 16px;
}

.raseekh-landing .faq-item__q::after {
  content: "+";
  flex-shrink: 0;
  color: var(--cyan);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.raseekh-landing .faq-item[open] .faq-item__q::after {
  transform: rotate(45deg);
}

.raseekh-landing .faq-item__a {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.raseekh-landing .footer__address {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

.raseekh-landing .blog-single__byline {
  color: var(--muted);
  font-size: 0.85rem;
  margin: -8px 0 20px;
}

@media (prefers-reduced-motion: reduce) {
  .raseekh-landing .btn {
    animation: none;
    transition: none;
  }

  .raseekh-landing .ambient__orb--cyan,
  .raseekh-landing .ambient__orb--blue {
    animation: none;
  }

  .raseekh-landing.has-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .raseekh-landing.has-reveal .bento > .card,
  .raseekh-landing.has-reveal .testimonials-grid > .testimonial-card,
  .raseekh-landing.has-reveal .free-offers-grid > .free-offer-card,
  .raseekh-landing.has-reveal .clients-grid > .client-chip,
  .raseekh-landing.has-reveal .team-grid > .team-card {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .raseekh-landing .hero__stat-chip,
  .raseekh-landing .hero__float-badge {
    animation: none;
  }

  .raseekh-landing .promo-bar {
    animation: none;
  }

  .raseekh-landing .whatsapp-float,
  .raseekh-landing .whatsapp-float__panel {
    animation: none;
  }

  .raseekh-landing .whatsapp-float__ring {
    animation: none;
    opacity: 0;
  }

  .raseekh-landing .whatsapp-float__toggle,
  .raseekh-landing .whatsapp-float__link {
    transition: none;
  }

  .raseekh-landing .section-doodle {
    transition: none;
  }

  .raseekh-landing .banner-strip__track {
    animation: none;
  }

  .raseekh-landing .bento.bento--carousel {
    animation: none;
  }
}

@media (max-width: 980px) {
  .raseekh-landing .steps,
  .raseekh-landing .footer__grid,
  .raseekh-landing .cta__panel {
    grid-template-columns: 1fr;
    display: grid;
  }

  .raseekh-landing .cta__panel {
    align-items: start;
  }

  .raseekh-landing .card,
  .raseekh-landing .card--featured {
    grid-column: span 6;
  }

  .raseekh-landing .blog-grid,
  .raseekh-landing .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .raseekh-landing .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    padding: 16px 20px 20px;
    background: var(--nav-mobile-bg);
    box-shadow: 0 16px 30px rgba(15, 40, 90, 0.10);
    border-bottom: 1px solid var(--line);
  }

  .raseekh-landing .nav.is-open {
    display: flex;
  }

  .raseekh-landing .nav-toggle {
    display: inline-block;
  }

  .raseekh-landing .header__wa {
    display: none;
  }

  .raseekh-landing .brand__logo {
    height: 32px;
    max-width: min(200px, 48vw);
  }
}

@media (max-width: 640px) {
  .raseekh-landing .container {
    width: min(1180px, calc(100% - 24px));
  }

  .raseekh-landing .card,
  .raseekh-landing .card--featured {
    grid-column: span 12;
  }

  .raseekh-landing .bento.bento--carousel > .card {
    flex-basis: 248px;
  }

  .raseekh-landing .blog-grid,
  .raseekh-landing .blog-list {
    grid-template-columns: 1fr;
  }

  .raseekh-landing .banner-strip__track {
    gap: 22px;
    padding: 10px 16px;
    animation-duration: 22s;
  }

  .raseekh-landing .banner-strip__item {
    font-size: 0.8rem;
  }

  .raseekh-landing .whatsapp-float {
    inset-block-end: 14px;
    inset-inline-end: 14px;
  }

  .raseekh-landing .whatsapp-float__toggle {
    width: 52px;
    height: 52px;
  }

  .raseekh-landing .whatsapp-float__panel {
    min-width: 210px;
    max-width: calc(100vw - 28px);
  }

  /*
   * On the homepage only, the card grid + its "show more"/"view all" row
   * are swapped out for the lightweight quick-FAQ block (see
   * .blog-mobile-quick markup in front-page.php): building ~24 unique
   * inline-SVG covers client-side was the main source of the "heavy on
   * mobile" homepage feel the archive/blog page doesn't have. script.js
   * skips that rendering work under this same breakpoint instead of just
   * hiding its output, so this is a real reduction in mobile work, not
   * only a visual one.
   */
  .raseekh-landing .blog .blog-grid,
  .raseekh-landing .blog .view-all {
    display: none;
  }

  .raseekh-landing .blog .blog-mobile-quick {
    display: block;
  }

  /*
   * The section itself was tuned for a much taller desktop card grid — on
   * mobile, where it's now just a couple of compact FAQ rows and a button,
   * that same top padding read as oversized/heavy. Tightened specifically
   * for this breakpoint rather than changed globally.
   */
  .raseekh-landing .blog {
    padding: 40px 0 20px;
  }

  .raseekh-landing .blog-mobile-quick .faq-list--compact {
    gap: 8px;
    margin-bottom: 14px;
  }

  .raseekh-landing .blog-mobile-quick .faq-item {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .raseekh-landing .blog-mobile-quick .faq-item__q {
    font-size: 0.9rem;
    gap: 8px;
  }

  .raseekh-landing .blog-mobile-quick .faq-item__a {
    margin-top: 8px;
    font-size: 0.86rem;
  }

  .raseekh-landing .blog-mobile-quick__cta {
    width: 100%;
  }

  .raseekh-landing .blog-mobile-quick__cta.btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  /* Tap feedback for a touch device, where :hover never fires. */
  .raseekh-landing .blog-mobile-quick__cta.btn:active {
    transform: scale(0.97);
  }

  .raseekh-landing .service-pills {
    gap: 8px;
  }

  .raseekh-landing .service-pill {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .raseekh-landing .blog-post {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .raseekh-landing .blog-post .blog-cover {
    margin: -22px -18px 6px;
  }

  .raseekh-landing .brand__logo {
    height: 26px;
    max-width: min(168px, 48vw);
  }

  .raseekh-landing .footer__logo {
    height: 34px;
    max-width: min(240px, 82vw);
  }

  .raseekh-landing .free-offers {
    padding: 28px 0 4px;
  }

  .raseekh-landing .testimonials {
    padding: 44px 0 16px;
  }

  .raseekh-landing .clients {
    padding: 28px 0 4px;
  }

  .raseekh-landing .free-offer-card,
  .raseekh-landing .testimonial-card {
    padding: 20px 18px;
  }

  .raseekh-landing .client-chip {
    padding: 10px 16px;
    font-size: 0.84rem;
  }
}

/* Small-phone pass (≈iPhone SE / small Android widths) — distinct from the
   640px tablet-ish breakpoint above. Desktop and the 640px tier both still
   show a comfortable multi-line hero and generous panel padding; on a
   genuinely narrow phone that reads as cramped or, in the CTA/pillars
   panels, as excessive empty padding around short lines of wrapped text.
   This tier exists specifically so mobile isn't just "the desktop layout,
   shrunk" — it gets its own sizing. */
@media (max-width: 420px) {
  .raseekh-landing .container {
    width: min(1180px, calc(100% - 28px));
  }

  .raseekh-landing .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .raseekh-landing .hero__tagline {
    font-size: 0.9rem;
    padding-inline-start: 10px;
  }

  .raseekh-landing .pillars__grid {
    padding-block: 26px;
  }

  .raseekh-landing .pillars__title {
    font-size: 1.4rem;
  }

  .raseekh-landing .cta__panel {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .raseekh-landing .why-grid {
    grid-template-columns: 1fr;
  }

  .raseekh-landing .why-card {
    padding: 18px;
  }

  .raseekh-landing .audience-tag {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .raseekh-landing .promo-bar__badge {
    font-size: 1.1rem;
  }

  .raseekh-landing .whatsapp-float__toggle {
    width: 48px;
    height: 48px;
  }
}