/* =========================================================
   Aesthetic Layer — Animations, Glass, Themes, Micro-UX
   ابن الوليد والحيلاني
   ========================================================= */

/* ---------- Dark Theme Override ---------- */
html[data-theme="dark"] {
  --background: oklch(14% 0.01 25);
  --foreground: oklch(96% 0.005 80);
  --card: oklch(20% 0.012 25);
  --card-foreground: oklch(96% 0.005 80);
  --popover: oklch(16% 0.012 25);
  --popover-foreground: oklch(96% 0.005 80);
  --primary: oklch(62% 0.24 27);
  --primary-foreground: oklch(99% 0 0);
  --secondary: oklch(24% 0.012 25);
  --secondary-foreground: oklch(96% 0.005 80);
  --muted: oklch(24% 0.01 25);
  --muted-foreground: oklch(72% 0.01 60);
  --accent: oklch(70% 0.01 60);
  --accent-foreground: oklch(14% 0.01 25);
  --border: oklch(28% 0.012 25);
  --input: oklch(22% 0.01 25);
  --onyx: oklch(11% 0.012 25);
  --silver: oklch(40% 0.005 250);
}

html[data-theme="dark"] body {
  background: var(--background);
  color: var(--foreground);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--onyx);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: oklch(30% 0.015 25);
}
/* ---------- Static Motion-Free Helpers ---------- */
body,
body.is-leaving {
  opacity: 1;
}

[data-reveal],
.home-step-card[data-reveal],
.home-feature-card[data-reveal] {
  opacity: 1;
  filter: none;
  transform: none;
}

[data-counter] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
/* ---------- Trust Badges Strip ---------- *//* ---------- Trust Badges Strip ---------- */
.trust-strip {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--onyx) 60%, transparent),
    transparent
  );
  border-block: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
}

.trust-strip__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.trust-strip__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: color-mix(in oklab, var(--foreground) 55%, transparent);
}

/* ---------- Trust Badges — Unified Box ---------- */
.trust-badges-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.75rem;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.3);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
  cursor: default;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.trust-divider {
  width: 1px;
  height: 22px;
  background: color-mix(in oklab, var(--border) 70%, transparent);
}

@media (max-width: 640px) {
  .trust-divider {
    display: none;
  }
  .trust-badges-box {
    gap: 0.6rem 1rem;
  }
}

/* ---------- Features — Unified Box ---------- */
.features-unified-box {
  border-radius: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--card) 60%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 18px 40px -24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 color-mix(in oklab, white 5%, transparent);
  overflow: hidden;
}

.features-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  position: relative;
  cursor: default;
}

/* Vertical dividers between columns */
.feature-item:not(:nth-child(3n))::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  inset-inline-start: 0;
  width: 1px;
  background: color-mix(in oklab, var(--border) 55%, transparent);
}

/* Horizontal dividers between rows */
.feature-item:nth-child(n + 4)::after {
  content: "";
  position: absolute;
  inset-inline: 1.25rem;
  top: 0;
  height: 1px;
  background: color-mix(in oklab, var(--border) 55%, transparent);
}

.feature-item__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-item__content {
  min-width: 0;
  flex: 1;
}

@media (max-width: 900px) {
  .features-unified-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-item::before,
  .feature-item::after {
    display: none;
  }
  .feature-item:not(:nth-child(2n))::before {
    content: "";
    display: block;
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    inset-inline-start: 0;
    width: 1px;
    background: color-mix(in oklab, var(--border) 55%, transparent);
  }
  .feature-item:nth-child(n + 3)::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline: 1.25rem;
    top: 0;
    height: 1px;
    background: color-mix(in oklab, var(--border) 55%, transparent);
  }
}

@media (max-width: 600px) {
  .features-unified-grid {
    grid-template-columns: 1fr;
  }
  .feature-item::before,
  .feature-item::after {
    display: none !important;
  }
  .feature-item:not(:first-child) {
    border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  }
  .feature-item {
    padding: 1.25rem 1.25rem;
  }
}

/* ---------- Glassmorphism Cards ---------- */
.glass {
  background: color-mix(in oklab, var(--card) 55%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  box-shadow:
    0 12px 28px -16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 color-mix(in oklab, white 6%, transparent);
}

html[data-theme="dark"] .glass {
  background: color-mix(in oklab, var(--card) 45%, transparent);
  box-shadow:
    0 18px 38px -22px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 color-mix(in oklab, white 5%, transparent);
}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  cursor: pointer;
  color: var(--foreground);
backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-toggle:hover {
  transform: rotate(15deg) scale(1.05);
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
  color: var(--primary);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-sun {
  position: absolute;
  opacity: 0;
  transform: rotate(-45deg) scale(0.5);
}
.theme-toggle .icon-moon {
  position: absolute;
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
html[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(45deg) scale(0.5);
}

/* ---------- Splash — Branded Pulse ---------- */
.app-splash {
  background:
    radial-gradient(circle at top, color-mix(in oklab, var(--primary) 14%, transparent), transparent 32rem),
    var(--background);
}

.app-splash__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.app-splash__logo {
  width: 108px;
  height: 108px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(180deg, color-mix(in oklab, var(--card) 80%, transparent), color-mix(in oklab, var(--background) 85%, transparent));
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 18px 38px -18px color-mix(in oklab, var(--primary) 50%, transparent);
overflow: hidden;
}

.app-splash__logo::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  border: 1px solid color-mix(in oklab, var(--primary) 28%, transparent);
  background:
    radial-gradient(circle at center, color-mix(in oklab, var(--primary) 10%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}

.app-splash__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6a74, #d40c1a);
  box-shadow:
    0 0 0 10px rgba(212, 12, 26, 0.08),
    0 0 34px -10px rgba(212, 12, 26, 0.9);
}

.app-splash__logo img {
  position: relative;
  z-index: 1;
  width: 56%;
  height: 56%;
  object-fit: contain;
  border-radius: 16px;
}

.app-splash__logo img:not([src]),
.app-splash__logo img[src=""] {
  display: none;
}

.app-splash__bar {
  width: 160px;
  height: 4px;
  background: color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.app-splash__bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  border-radius: inherit;
}

.app-splash__brand-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--foreground);
  letter-spacing: 0.02em;
}

/* ---------- Skeleton Loaders ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  border-radius: 0.5rem;
  color: transparent !important;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in oklab, var(--foreground) 8%, transparent) 50%,
    transparent 80%
  );
}

.skeleton-text {
  height: 0.9rem;
  width: 70%;
  margin: 0.35rem 0;
}

.skeleton-block {
  height: 8rem;
  width: 100%;
}

/* Social hover effects */
.social-link-fx {
  position: relative;
  overflow: hidden;
}

.social-link-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--social-color, var(--primary)), color-mix(in oklab, var(--social-color, var(--primary)) 60%, transparent));
  opacity: 0;
z-index: 0;
}

.social-link-fx:hover {
  transform: translateY(-2px);
  color: #fff !important;
  border-color: transparent !important;
}

.social-link-fx:hover::after {
  opacity: 1;
}

.social-link-fx svg,
.social-link-fx > * {
  position: relative;
  z-index: 1;
}

.social-link-fx[data-net="facebook"] { --social-color: #1877f2; }
.social-link-fx[data-net="instagram"] { --social-color: #e4405f; }
.social-link-fx[data-net="whatsapp"] { --social-color: #25d366; }

/* "آخر تحديث" badge */
.last-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.last-update-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 999px;
  box-shadow: 0 0 0 0 #22c55e;
}

/* ---------- 404 Page ---------- */
.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.not-found__inner {
  max-width: 520px;
}

.not-found__art {
  margin-inline: auto;
  width: min(320px, 80%);
  margin-bottom: 1.5rem;
  position: relative;
}

.not-found__art svg {
  width: 100%;
  height: auto;
}

.not-found__art .lost-truck {
transform-origin: center;
}

.not-found__art .lost-truck-wheel {
  transform-origin: center;
}

.not-found__art .lost-truck-dust {
  opacity: 0.55;
}

.not-found__code {
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 900;
  background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 50%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}

.not-found__title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--foreground);
  margin-bottom: 0.4rem;
}

.not-found__text {
  font-size: 0.95rem;
  color: var(--muted-foreground);
  margin-bottom: 1.4rem;
  line-height: 1.7;
}

.not-found__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* ---------- Small helper: blur image until loaded ---------- */
img[data-blurload]:not(.is-loaded) {
  filter: blur(12px);
  transform: scale(1.02);
}
img[data-blurload].is-loaded {
  filter: none;
  transform: none;
}
/* ---------- Home page mobile polish ---------- */
@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.55);
  }

  html[data-theme="dark"] .site-header {
    background: rgba(24, 20, 20, 0.86);
  }

  .site-header__inner {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden;
    min-height: 4.6rem;
    padding-inline: 0.85rem !important;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    gap: 0.55rem;
  }

  .site-brand {
    flex: 1 1 auto;
    max-width: none !important;
    overflow: hidden;
    gap: 0.48rem !important;
  }

  .site-brand__logo {
    width: 4.45rem !important;
    height: 2.55rem !important;
    object-fit: contain;
    flex: 0 0 4.45rem;
  }

  .site-brand__copy {
    flex: 0 1 auto;
    max-width: min(8.4rem, calc(100vw - 13.1rem));
    min-width: 0;
  }

  .site-brand__title {
    font-size: 0.86rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  .site-brand__subtitle {
    margin-top: 0.12rem !important;
    font-size: 0.62rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .theme-toggle,
  .header-menu-toggle {
    width: 2.55rem !important;
    height: 2.55rem !important;
    border-radius: 8px !important;
  }

  .home-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    min-height: min(45rem, calc(100svh - 4.6rem));
    overflow: hidden;
    background: #071122;
  }

  .home-hero .hero-image-zoom {
    object-position: 50% center;
transform: none !important;
    filter: saturate(1.06) contrast(1.03);
  }

  .home-hero__overlay {
    background:
      linear-gradient(180deg, rgba(4, 10, 20, 0.5), rgba(4, 10, 20, 0.75) 48%, rgba(4, 10, 20, 0.9)),
      linear-gradient(90deg, rgba(4, 10, 20, 0.28), transparent 42%) !important;
  }

  .home-hero__inner {
    position: relative;
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: min(45rem, calc(100svh - 4.6rem));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: clamp(2.05rem, 7svh, 3.3rem) 1rem 4.4rem !important;
  }

  .home-hero__content {
    position: absolute;
    top: 50%;
    left: 50vw;
    right: auto;
    transform: translate(-50%, -50%) !important;
    width: min(calc(100vw - 2rem), 20rem);
    max-width: calc(100vw - 2rem);
    margin-inline: auto;
    padding-inline: 0;
    text-align: center;
  }

  .home-hero__title {
    max-width: 100%;
    font-size: clamp(1.72rem, 6.9vw, 2.02rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
    text-shadow: 0 16px 30px rgba(0, 0, 0, 0.42);
  }

  .home-hero__title > span:first-child,
  .home-hero__title [data-typed] {
    display: block;
    max-width: 17.5rem;
    margin-inline: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .home-hero__title [data-typed] {
    max-width: 16.8rem;
    margin-top: 0.12rem;
    min-height: 1.12em;
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: top;
  }

  .home-hero__subtitle {
    max-width: 29rem;
    margin: 1.05rem auto 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.85 !important;
  }

  .home-hero__actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
    width: 100%;
    margin: 1.25rem auto 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .home-hero__actions a {
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 3.08rem;
    padding-inline: 1rem !important;
    border-radius: 8px !important;
  }

  .home-hero__stats {
    width: 100%;
    max-width: 100% !important;
    margin: 1.15rem auto 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0.55rem !important;
  }

  .home-hero__stat-card {
    min-width: 0;
    padding: 0.72rem 0.42rem !important;
    border-radius: 8px !important;
    background: rgba(5, 12, 24, 0.48) !important;
    box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.72);
  }

  .home-hero__stat-card [data-counter] {
    font-size: clamp(1.08rem, 5vw, 1.34rem) !important;
    line-height: 1.08;
  }

  .home-hero__stat-card [data-cms$="Label"] {
    margin-top: 0.22rem !important;
    font-size: 0.66rem !important;
    line-height: 1.32;
  }

}

@media (max-width: 380px) {
  .site-brand__logo {
    width: 4.55rem !important;
  }

  .site-brand__copy {
    max-width: 7.9rem;
  }

  .home-hero__title {
    font-size: clamp(1.58rem, 6.6vw, 1.82rem) !important;
  }

  .home-hero__stat-card {
    padding-inline: 0.28rem !important;
  }

  .home-hero__stat-card [data-cms$="Label"] {
    font-size: 0.61rem !important;
  }
}

/* ---------- Process poster image ---------- */
.process-visual-section {
  position: relative;
}

.process-poster-figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, var(--border));
  background:
    radial-gradient(circle at top, color-mix(in oklab, white 82%, var(--primary) 8%), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, white 82%, var(--background) 18%), color-mix(in oklab, white 94%, var(--primary) 6%));
  box-shadow: 0 28px 80px -58px rgba(15, 23, 42, 0.48);
}

.process-poster-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Editable home cards ---------- */
.home-card-section {
  position: relative;
}

.home-card-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 15%, var(--border));
  border-radius: 8px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background:
    radial-gradient(circle at 15% 0%, color-mix(in oklab, #ffffff 72%, var(--primary) 10%), transparent 34rem),
    radial-gradient(circle at 88% 12%, color-mix(in oklab, #ffffff 78%, #0b2a55 7%), transparent 30rem),
    linear-gradient(180deg, color-mix(in oklab, #ffffff 96%, var(--background) 4%), color-mix(in oklab, #ffffff 90%, var(--primary) 3%));
  box-shadow: 0 28px 80px -62px rgba(15, 23, 42, 0.52);
}

.home-card-shell::before {
  content: "";
  position: absolute;
  inset-inline: 1.2rem;
  top: 0.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 45%, transparent), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.home-card-section__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.home-card-section__head--features {
  align-items: flex-start;
}

.home-card-section__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 900;
}

.home-card-section__kicker::before,
.home-card-section__kicker::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: color-mix(in oklab, var(--primary) 58%, transparent);
}

.home-card-section__title {
  margin-top: 0.2rem;
  color: #0b2147;
  font-size: clamp(2rem, 4.4vw, 3.55rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-card-section__intro {
  max-width: 45rem;
  margin-top: 0.65rem;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.85;
}

.home-card-section__logo {
  flex: 0 0 auto;
  width: clamp(8rem, 14vw, 13rem);
  height: clamp(4.5rem, 8vw, 7rem);
  object-fit: contain;
}

.home-steps-grid,
.home-features-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  /* 3D stage so the cards' entrance + tilt read with real depth */
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

.home-steps-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-features-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-step-card,
.home-feature-card {
  --home-card-accent: var(--primary);
  /* hover interaction — clean "slide-fwd-top": the card glides
     forward toward the viewer (translateZ) and up (translateY). */
  --tz: 0px;
  --ty: 0px;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--home-card-accent) 16%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    color-mix(in oklab, var(--background) 82%, #ffffff 18%);
  box-shadow: 0 22px 44px -36px rgba(15, 23, 42, 0.48);
isolation: isolate;
}

.home-step-card::before,
.home-feature-card::before {
  display: none;
}

.home-step-card:nth-child(2),.home-step-card:nth-child(2),
.home-feature-card:nth-child(2),
.home-feature-card:nth-child(6) {
  --home-card-accent: #0b5ea8;
}

.home-step-card:nth-child(3),
.home-feature-card:nth-child(3) {
  --home-card-accent: #0f8a74;
}

.home-step-card:nth-child(4),
.home-feature-card:nth-child(4) {
  --home-card-accent: #a46500;
}

.home-feature-card:nth-child(5) {
  --home-card-accent: #6b3fb4;
}

.home-step-card::after,
.home-feature-card::after {
  display: none;
}

.home-step-card,
.home-feature-card {
  transform-origin: center bottom;
}

.home-step-card:hover,
.home-feature-card:hover,
.home-step-card:focus-visible,
.home-feature-card:focus-visible {
  --tz: 8px;
  --ty: -3px;
  border-color: color-mix(in oklab, var(--home-card-accent) 28%, var(--border));
  box-shadow:
    0 28px 52px -42px rgba(15, 23, 42, 0.34),
    0 14px 24px -22px color-mix(in oklab, var(--home-card-accent) 14%, transparent);
  z-index: 3;
}

.home-step-card:hover::after,
.home-feature-card:hover::after,
.home-step-card:focus-visible::after,
.home-feature-card:focus-visible::after {
  opacity: 0;
}

.home-step-card:focus-visible,
.home-feature-card:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--home-card-accent) 24%, transparent);
  outline-offset: 3px;
}

.home-step-card__media {
  position: relative;
  aspect-ratio: 1.18 / 1;
  margin: 0.7rem;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in oklab, var(--home-card-accent) 8%, #ffffff);
  isolation: isolate;
}

.home-step-card__media::after,
.home-feature-card__media::after {
  display: none;
}

.home-step-card__media img,
.home-feature-card__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.home-step-card__media img {
  object-fit: cover;
}

.home-step-card:hover .home-step-card__media img,
.home-feature-card:hover .home-feature-card__media img {
  transform: scale(1.018);
  filter: saturate(1.02);
}

.home-step-card:hover .home-step-card__media,
.home-feature-card:hover .home-feature-card__media,
.home-step-card:focus-visible .home-step-card__media,
.home-feature-card:focus-visible .home-feature-card__media {
  transform: translateY(-0.04rem);
  box-shadow: 0 18px 34px -32px rgba(15, 23, 42, 0.34);
}

.home-step-card:hover .home-step-card__media::after,
.home-feature-card:hover .home-feature-card__media::after,
.home-step-card:focus-visible .home-step-card__media::after,
.home-feature-card:focus-visible .home-feature-card__media::after {
  opacity: 0;
  transform: none;
}

.home-card-badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  color: #fff;
  background: var(--home-card-accent);
  box-shadow: 0 16px 30px -18px color-mix(in oklab, var(--home-card-accent) 80%, black);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.home-step-card__body {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  min-height: 11.5rem;
  padding: 0 1rem 1.1rem;
  text-align: center;
}

.home-card-icon {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin-top: -0.9rem;
  border: 1px solid color-mix(in oklab, var(--home-card-accent) 18%, #ffffff);
  border-radius: 999px;
  color: var(--home-card-accent);
  background: #fff;
  box-shadow: 0 16px 28px -22px rgba(15, 23, 42, 0.52);
}

.home-card-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.home-step-card h3,
.home-feature-card h3 {
  color: #0b2147;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.35;
}

.home-step-card p,
.home-feature-card p {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.75;
}

.home-feature-card {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.95rem;
  min-height: 100%;
  padding: 0.9rem 0.9rem 1.1rem;
  direction: rtl;
}

.home-feature-card__media {
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--home-card-accent) 16%, transparent), transparent 60%),
    color-mix(in oklab, var(--home-card-accent) 7%, #ffffff);
}

.home-feature-card__media img {
  object-fit: cover;
}

.home-feature-card__body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding-inline: 0.15rem;
  text-align: right;
  direction: rtl;
}

.home-feature-card__body h3,
.home-feature-card__body p {
  margin: 0;
}

.home-step-card:hover .home-step-card__body,
.home-feature-card:hover .home-feature-card__body,
.home-step-card:focus-visible .home-step-card__body,
.home-feature-card:focus-visible .home-feature-card__body {
  transform: translateY(-0.025rem);
}

.home-step-card:hover .home-card-icon,
.home-step-card:focus-visible .home-card-icon {
  transform: translateY(-0.04rem) scale(1.015);
  box-shadow: 0 18px 30px -26px color-mix(in oklab, var(--home-card-accent) 22%, rgba(15, 23, 42, 0.16));
  border-color: color-mix(in oklab, var(--home-card-accent) 22%, #ffffff);
}

.home-step-card:hover h3,
.home-feature-card:hover h3,
.home-step-card:focus-visible h3,
.home-feature-card:focus-visible h3 {
  color: color-mix(in oklab, var(--home-card-accent) 32%, #0b2147);
  transform: translateY(-0.02rem);
}

.home-step-card:hover p,
.home-feature-card:hover p,
.home-step-card:focus-visible p,
.home-feature-card:focus-visible p {
  color: color-mix(in oklab, var(--muted-foreground) 88%, #0f172a 12%);
  opacity: 0.96;
  transform: translateY(-0.01rem);
}

.home-feature-card .home-card-badge {
  inset-inline-start: auto;
  inset-inline-end: 0.75rem;
}

@media (max-width: 1180px) {
  .home-steps-grid,
  .home-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .trust-strip {
    background: linear-gradient(180deg, color-mix(in oklab, var(--onyx) 66%, transparent), color-mix(in oklab, var(--background) 92%, transparent));
  }

  .trust-strip__inner {
    padding: 0.95rem 1rem 1.1rem;
    gap: 0.55rem;
  }

  .trust-strip__label {
    width: 100%;
    text-align: center;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .trust-badges-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.55rem;
    padding: 0.65rem;
    border-radius: 8px;
  }

  .trust-divider {
    display: none;
  }

  .trust-item {
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.52rem 0.45rem;
    border: 1px solid color-mix(in oklab, var(--border) 62%, transparent);
    border-radius: 8px;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }

  .trust-item:last-child {
    grid-column: 1 / -1;
  }

  .home-card-section {
    width: 100%;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 1rem !important;
    padding-top: 2.35rem;
    padding-bottom: 2.35rem;
    overflow: visible;
    scroll-snap-type: none;
    direction: rtl;
  }

  .home-card-section::-webkit-scrollbar {
    display: none;
  }

  .home-card-shell {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.75rem;
    border-radius: 8px;
    background:
      radial-gradient(circle at 14% 0%, color-mix(in oklab, #ffffff 78%, var(--primary) 8%), transparent 20rem),
      linear-gradient(180deg, #ffffff, color-mix(in oklab, #ffffff 92%, var(--primary) 3%));
    box-shadow: 0 24px 52px -44px rgba(15, 23, 42, 0.46);
    scroll-snap-align: none;
  }

  .home-card-shell--steps {
    min-width: 0;
  }

  .home-card-shell--features {
    min-width: 0;
  }

  .home-card-shell::before {
    inset-inline: 0.9rem;
    top: 0.58rem;
  }

  .home-card-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.72rem;
    text-align: right;
  }

  .home-card-section__logo {
    width: 5.9rem;
    height: 3.2rem;
  }

  .home-card-section__kicker {
    justify-content: flex-start;
    min-height: auto;
    font-size: 0.58rem;
    gap: 0.34rem;
  }

  .home-card-section__kicker::before,
  .home-card-section__kicker::after {
    width: 1rem;
  }

  .home-card-section__title {
    max-width: 31rem;
    font-size: 1.78rem;
    line-height: 1.08;
  }

  .home-card-section__intro {
    max-width: 29rem;
    margin-top: 0.24rem;
    margin-inline: 0;
    font-size: 0.56rem;
    line-height: 1.6;
  }

  .home-steps-grid,
  .home-features-grid {
    gap: 0.55rem;
    perspective: none;
  }

  .home-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-step-card,
  .home-feature-card {
    box-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.5);
  }

  .home-step-card__media {
    aspect-ratio: 1.3 / 1;
    margin: 0.4rem 0.4rem 0.05rem;
  }

  .home-step-card__body {
    min-height: 0;
    gap: 0.22rem;
    padding: 0 0.45rem 0.62rem;
  }

  .home-card-icon {
    width: 1.62rem;
    height: 1.62rem;
    margin-top: -0.48rem;
  }

  .home-card-icon svg {
    width: 0.82rem;
    height: 0.82rem;
  }

  .home-feature-card {
    gap: 0.34rem;
    padding: 0.42rem 0.42rem 0.62rem;
  }

  .home-feature-card__media {
    aspect-ratio: 1.48 / 1;
  }

  .home-feature-card__body {
    gap: 0.18rem;
    padding-inline: 0.18rem;
    text-align: right;
  }

  .home-step-card h3,
  .home-feature-card h3 {
    font-size: 0.76rem;
    line-height: 1.28;
  }

  .home-step-card p,
  .home-feature-card p {
    font-size: 0.58rem;
    line-height: 1.55;
  }

  main > section[data-reveal="zoom-in"] {
    padding-top: 2.25rem;
    padding-bottom: 2.6rem;
  }

  main > section[data-reveal="zoom-in"] > div {
    border-radius: 8px !important;
    padding: 2rem 1rem !important;
  }

  main > section[data-reveal="zoom-in"] h2 {
    font-size: 1.65rem !important;
    line-height: 1.22 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .theme-toggle:hover,
  .social-link-fx:hover,
  .home-step-card:hover,
  .home-feature-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  .social-link-fx:hover::after,
  .home-step-card:hover::after,
  .home-feature-card:hover::after {
    opacity: inherit !important;
    transform: none !important;
  }

  .home-step-card:hover .home-step-card__media,
  .home-feature-card:hover .home-feature-card__media,
  .home-step-card:hover .home-step-card__media img,
  .home-feature-card:hover .home-feature-card__media img,
  .home-step-card:hover .home-step-card__body,
  .home-feature-card:hover .home-feature-card__body,
  .home-step-card:hover .home-card-icon,
  .home-step-card:hover h3,
  .home-feature-card:hover h3,
  .home-step-card:hover p,
  .home-feature-card:hover p {
    transform: none !important;
    filter: none !important;
    box-shadow: inherit !important;
    opacity: inherit !important;
  }

  .home-step-card:hover .home-step-card__media::after,
  .home-feature-card:hover .home-feature-card__media::after {
    opacity: 0 !important;
    transform: none !important;
  }

}

/* Inline style replacements */
.wheel-1 { transform-origin: 25px 105px; }
.wheel-2 { transform-origin: 140px 105px; }

/* ===========================================================
   PREMIUM HOME-CARD INTERACTIONS  (added 2026-06-09)
   A big upgrade layered on top of the existing card system:
   • a light-sweep that races across the card on hover
   • a breathing accent glow ring
   • stronger icon / media motion
   • a full-page light wash that fires as each cards
     section scrolls into view, plus a bottom scroll beam
   =========================================================== */

/* The hover is now a single, clean "slide-fwd-top" (defined on the
   settled + :hover rules above). The earlier tilt-tracking, breathing
   glow ring and light-sweep were removed — they read as exaggerated.
   Below are only the small, calm accents that ride along with it. */

/* --- Gentle icon + media accent on hover ------------------- */
.home-step-card:hover .home-card-icon,
.home-step-card:focus-visible .home-card-icon {
  transform: translateY(-0.04rem) scale(1.015);
}

.home-step-card:hover .home-step-card__media img,
.home-feature-card:hover .home-feature-card__media img,
.home-step-card:focus-visible .home-step-card__media img,
.home-feature-card:focus-visible .home-feature-card__media img {
  transform: scale(1.018);
  filter: saturate(1.02);
}

/* Full-page scroll effects removed in static mode. */