/* ============================================
   NOON SOLUTIONS — Design System v1.0
   شركة النون للحلول الرقمية المتكاملة
   ============================================ */

:root {
  /* Brand colors — EXACT match to anoon-six.vercel.app */
  --brand-blue: #203C8B;       /* brand-blue */
  --brand-sky: #4DABFF;        /* brand-sky (cyan accent) */
  --brand-orange: #FF9D00;     /* brand-orange */
  --brand-green: #219652;      /* brand-green (Tamkeen) */

  /* Hero indigo background palette */
  --bg-indigo-darkest: #010048;
  --bg-indigo-mid: #010057;
  --bg-indigo-bright: #02006C;
  --bg-card-dark: #010057;      /* dark card surface */

  /* Aliases */
  --primary: #203C8B;
  --primary-dark: #010057;
  --primary-darker: #010048;
  --primary-50: #F0F3FB;
  --primary-100: #DCE3F2;
  --primary-200: #B5C3E5;
  --primary-300: #8AA0D2;
  --accent: #FF9D00;
  --accent-dark: #F99D1B;
  --accent-light: #FFC76E;
  --accent-soft: #FFF4E0;
  --signal: #FF9D00;
  --signal-dark: #D67F00;

  /* Neutrals */
  --ink: #0D214A;
  --ink-soft: #1F3A66;
  --muted: #6B7892;
  --paper: #F9F9F9;
  --paper-warm: #FFF4E0;
  --white: #FFFFFF;
  --line: #D5DDEC;
  --line-soft: #E8EEF7;

  /* Type scale — 3-layer system */
  --font-ar: 'Tajawal', 'Cairo', 'Helvetica Neue', system-ui, sans-serif;
  --font-en: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-display-ar: 'Noto Kufi Arabic', 'Tajawal', sans-serif;
  --font-display-en: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 44, 74, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 44, 74, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 44, 74, 0.10);

  /* Container */
  --container: 1200px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ar);
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(45deg, #010048 0%, #010057 25%, #02006C 45%, #02006C 65%, #010057 80%, #010048 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 2px);
  background-size: 200% 200%, 100% 100%;
  background-blend-mode: overlay;
  background-attachment: fixed;
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  animation: bg-breathing 80s ease-in-out infinite;
}
@keyframes bg-breathing {
  0%, 100% { background-position: 0% 0%, 0 0; }
  50%      { background-position: 100% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

body[lang="en"] { font-family: var(--font-en); }

body[lang="en"] { font-family: var(--font-en); direction: ltr; }
body[lang="ar"] { font-family: var(--font-ar); direction: rtl; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

::selection { background: var(--accent); color: var(--ink); }

/* ============== TYPOGRAPHY ============== */
/* 3-LAYER TYPOGRAPHY SYSTEM */
h1, h2, h3, h4, h5, h6 {
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(255, 157, 0, 0.08);
}
/* Display (h1) — boldest, dedicated font */
h1 {
  font-family: var(--font-display-ar);
  font-size: clamp(2.75rem, 6.5vw, 5.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body[lang="en"] h1 { font-family: var(--font-display-en); }

/* Headline (h2, h3) — strong, brand font */
h2 {
  font-family: var(--font-ar);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
}
h3 {
  font-family: var(--font-ar);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}
h4 { font-size: 1.35rem; font-weight: 700; }

/* Body — readable, lighter */
p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; line-height: 1.75; font-weight: 400; }
.lead {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  font-weight: 400;
}
.accent { color: var(--brand-orange); }
.highlight { color: var(--brand-orange); }
a { color: inherit; }
.section a:not(.btn):not(.card__link):not(.product-card__cta) {
  color: var(--brand-sky);
  text-decoration: none;
}
.section a:not(.btn):not(.card__link):not(.product-card__cta):hover {
  color: var(--brand-orange);
}

/* ============== LAYOUT ============== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-9) 0; background: transparent; color: rgba(255,255,255,0.92); }
.section--tight { padding: var(--space-7) 0; }
.section--alt,
.section--dark,
.section--warm,
.section--blue-tint { background: transparent; color: rgba(255,255,255,0.92); }
.section h1, .section h2, .section h3 { color: var(--white); }
.section p { color: rgba(255,255,255,0.78); }
.section .lead { color: rgba(255,255,255,0.90); }
.section--feature { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); }
.section--feature h1, .section--feature h2 { color: var(--white); }
.section--feature p { color: rgba(255,255,255,0.85); }

.eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-orange);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
  padding: 6px 16px;
  background: rgba(255, 157, 0, 0.12);
  border: 1px solid rgba(255, 157, 0, 0.30);
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(255, 157, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  text-shadow: 0 0 12px rgba(255, 157, 0, 0.40);
}
.section--dark .eyebrow,
.hero .eyebrow {
  background: rgba(255, 157, 0, 0.15);
  color: var(--brand-orange);
}

/* ============== HEADER ============== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(1, 0, 72, 0.75);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header__nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}
.header__nav a:hover { color: var(--brand-orange); }
.header__nav a.active { color: var(--brand-orange); }
.header__nav a.active::after { background: var(--brand-orange); }
.lang-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.90);
}
.lang-toggle:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.menu-toggle svg { color: var(--white); }
@media (max-width: 920px) {
  .header__nav.open {
    background: rgba(1, 0, 72, 0.97);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255, 255, 255, 0.10);
  }
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
  gap: var(--space-5);
}
.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary);
}
.header__logo img {
  height: 100px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 0 16px rgba(255, 215, 0, 0.55))
    drop-shadow(0 0 32px rgba(255, 224, 60, 0.35))
    drop-shadow(0 0 56px rgba(255, 235, 100, 0.20));
  transition: filter var(--t-base), transform var(--t-base);
}
.header__logo:hover img {
  filter:
    drop-shadow(0 0 22px rgba(255, 215, 0, 0.75))
    drop-shadow(0 0 44px rgba(255, 224, 60, 0.50))
    drop-shadow(0 0 70px rgba(255, 235, 100, 0.30));
  transform: scale(1.04);
}

/* Brand product logos on cards / hero blocks — transparent + yellow glow */
.brand-logo {
  display: block;
  height: 320px;
  width: auto;
  margin: 0 auto var(--space-6);
  filter:
    drop-shadow(0 0 28px rgba(255, 215, 0, 0.55))
    drop-shadow(0 0 56px rgba(255, 224, 60, 0.35))
    drop-shadow(0 0 96px rgba(255, 235, 100, 0.20))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.10));
  animation: logo-glow 4s ease-in-out infinite alternate;
}
@keyframes logo-glow {
  0% {
    filter:
      drop-shadow(0 0 28px rgba(255, 215, 0, 0.50))
      drop-shadow(0 0 56px rgba(255, 224, 60, 0.30))
      drop-shadow(0 0 96px rgba(255, 235, 100, 0.18))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.10));
  }
  100% {
    filter:
      drop-shadow(0 0 40px rgba(255, 215, 0, 0.75))
      drop-shadow(0 0 80px rgba(255, 224, 60, 0.50))
      drop-shadow(0 0 130px rgba(255, 235, 100, 0.32))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.10));
  }
}
.hero .brand-logo, .hero--dark .brand-logo {
  filter:
    drop-shadow(0 0 36px rgba(255, 215, 0, 0.65))
    drop-shadow(0 0 72px rgba(255, 224, 60, 0.40))
    drop-shadow(0 0 110px rgba(255, 235, 100, 0.25))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.30));
  animation: logo-glow-dark 4s ease-in-out infinite alternate;
}
@keyframes logo-glow-dark {
  0% {
    filter:
      drop-shadow(0 0 36px rgba(255, 215, 0, 0.60))
      drop-shadow(0 0 72px rgba(255, 224, 60, 0.36))
      drop-shadow(0 0 110px rgba(255, 235, 100, 0.22))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.30));
  }
  100% {
    filter:
      drop-shadow(0 0 56px rgba(255, 215, 0, 0.90))
      drop-shadow(0 0 110px rgba(255, 224, 60, 0.60))
      drop-shadow(0 0 160px rgba(255, 235, 100, 0.40))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.30));
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .hero--dark .brand-logo { animation: none; }
}
.brand-logo--sm { height: 180px; }
.brand-logo--lg { height: 400px; }
.brand-logo--inline { height: 96px; margin: 0; }
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.header__nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
}
.header__nav a:hover { color: var(--primary); }
.header__nav a.active { color: var(--primary); }
.header__nav a.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  inset-inline: 0;
  height: 2px;
  background: var(--accent);
}
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--white);
  transition: all var(--t-fast);
}
.lang-toggle:hover { border-color: var(--primary); color: var(--primary); }
.menu-toggle { display: none; padding: var(--space-2); }
.menu-toggle svg { width: 28px; height: 28px; color: var(--primary); }

@media (max-width: 920px) {
  .header__nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    inset-inline: 0;
    background: var(--white);
    padding: var(--space-5);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    gap: var(--space-4);
    align-items: flex-start;
  }
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn--lg { padding: var(--space-5) var(--space-9); font-size: 1.15rem; }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.9rem; }
.btn--primary { background: var(--brand-orange); color: var(--white); border-color: var(--brand-orange); box-shadow: 0 4px 16px rgba(255, 157, 0, 0.30); }
.btn--primary:hover { background: transparent; color: var(--brand-orange); box-shadow: 0 6px 22px rgba(255, 157, 0, 0.25); transform: translateY(-1px); }
.btn--accent { background: var(--brand-orange); color: var(--white); border-color: var(--brand-orange); box-shadow: 0 4px 16px rgba(255, 157, 0, 0.30); }
.btn--accent:hover { background: transparent; color: var(--brand-orange); transform: translateY(-1px); }
.btn--signal { background: var(--brand-sky); color: var(--white); border-color: var(--brand-sky); }
.btn--signal:hover { background: transparent; color: var(--brand-sky); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.40); }
.btn--ghost:hover { background: rgba(255,255,255,0.10); color: var(--white); border-color: var(--white); }
.btn--light { background: var(--white); color: var(--primary-darker); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--block { width: 100%; }
.btn__arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}
body[lang="ar"] .btn__arrow { transform: rotate(180deg); }
.btn:hover .btn__arrow { transform: translateX(4px); }
body[lang="ar"] .btn:hover .btn__arrow { transform: rotate(180deg) translateX(4px); }

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: var(--space-10) 0 var(--space-10);
  background:
    linear-gradient(45deg, #010048 0%, #010057 25%, #02006C 45%, #02006C 65%, #010057 80%, #010048 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 2px);
  background-blend-mode: overlay;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero p, .hero .hero__sub { color: rgba(255, 255, 255, 0.85); }
.hero .eyebrow {
  background: rgba(248, 151, 29, 0.15);
  color: var(--accent);
}
.hero__title {
  color: #FFFFFF;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.40),
    0 0 60px rgba(255, 157, 0, 0.15);
}
/* Colored keyword spans inside hero/headings — break monotony */
.hero__title .acc,
h1 .acc, h2 .acc, h3 .acc {
  color: var(--brand-orange);
  text-shadow:
    0 0 24px rgba(255, 157, 0, 0.55),
    0 0 48px rgba(255, 157, 0, 0.25),
    0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero__title .sky,
h1 .sky, h2 .sky, h3 .sky {
  color: var(--brand-sky);
  text-shadow:
    0 0 24px rgba(77, 171, 255, 0.55),
    0 0 48px rgba(77, 171, 255, 0.25),
    0 2px 12px rgba(0, 0, 0, 0.35);
}
/* Make text-reveal characters inherit color */
.text-reveal__char { color: inherit; }
.hero__title .accent-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 90%, rgba(248, 151, 29, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(248, 151, 29, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(31, 67, 135, 0.20) 0%, transparent 70%);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 80px, rgba(255, 255, 255, 0.012) 80px, rgba(255, 255, 255, 0.012) 81px);
}
.hero__inner { position: relative; z-index: 2; }

/* Floating particles canvas */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Floating cosmic icons — glowing glass orbs in space */
.hero__icon {
  position: absolute;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 70%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  color: var(--brand-sky);
  font-size: 26px;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
  box-shadow:
    0 0 24px rgba(77, 171, 255, 0.30),
    0 0 48px rgba(77, 171, 255, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: all var(--t-base);
}
.hero__icon:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero__icon--1 {
  top: 14%; inset-inline-start: 8%; animation-delay: 0s; color: var(--brand-green);
  box-shadow:
    0 0 24px rgba(33, 150, 82, 0.40),
    0 0 56px rgba(33, 150, 82, 0.20),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.hero__icon--2 {
  top: 36%; inset-inline-start: 12%; animation-delay: 1s; color: var(--brand-sky);
  box-shadow:
    0 0 24px rgba(77, 171, 255, 0.45),
    0 0 56px rgba(77, 171, 255, 0.20),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.hero__icon--3 {
  top: 18%; inset-inline-end: 10%; animation-delay: 2s; color: var(--brand-orange);
  box-shadow:
    0 0 24px rgba(255, 157, 0, 0.45),
    0 0 56px rgba(255, 157, 0, 0.20),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.hero__icon--4 {
  top: 42%; inset-inline-end: 6%; animation-delay: 3s; color: var(--brand-orange);
  box-shadow:
    0 0 24px rgba(255, 157, 0, 0.45),
    0 0 56px rgba(255, 157, 0, 0.20),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
@media (max-width: 700px) {
  .hero__icon { display: none; }
}

/* Hero CTAs — exact match to original anoon site */
.hero .btn--primary {
  background: transparent;
  color: var(--brand-orange);
  border: 2px solid var(--brand-orange);
  box-shadow: 0 4px 12px rgba(255, 157, 0, 0.05);
}
.hero .btn--primary:hover {
  background: var(--brand-orange);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(255, 157, 0, 0.30);
}
.hero .btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--brand-sky);
  box-shadow: 0 4px 12px rgba(77, 171, 255, 0.10);
}
.hero .btn--ghost:hover {
  background: rgba(77, 171, 255, 0.15);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(77, 171, 255, 0.30);
}
.hero__inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.hero__title {
  margin-bottom: var(--space-5);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: rgba(255, 255, 255, 0.96);
  max-width: 760px;
  margin: 0 auto var(--space-7);
  line-height: 1.75;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  font-weight: 500;
}
.hero__sub .acc { color: var(--brand-orange); font-weight: 700; }
.hero__sub .sky { color: var(--brand-sky); font-weight: 700; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}
/* hero--dark is now an alias — every hero is dark by default */
.hero--dark { /* same as .hero */ }
.hero--dark .hero__title {
  background: linear-gradient(135deg, var(--white) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero--dark .hero__sub { color: rgba(255,255,255,0.85); }
.hero--dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.4); }
.hero--dark .btn--ghost:hover { background: var(--white); color: var(--primary); }

/* ============== CARDS ============== */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: rgba(1, 0, 87, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all 0.25s ease;
  color: rgba(255,255,255,0.92);
}
.card:hover {
  border-color: rgba(255, 157, 0, 0.30);
  background: rgba(1, 0, 87, 0.55);
  transform: translateY(-2px);
}
.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 157, 0, 0.10);
  color: var(--brand-orange);
  margin-bottom: var(--space-4);
  border: 1px solid rgba(255, 157, 0, 0.20);
}
.card__title { margin-bottom: var(--space-3); font-size: 1.25rem; color: var(--white); }
.card__body { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.7; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 0.9rem;
}
.card__link:hover { color: var(--brand-sky); }
.card--feature {
  background: linear-gradient(135deg, rgba(2, 0, 108, 0.85) 0%, rgba(1, 0, 87, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.12);
}
.card--feature .card__title { color: var(--white); }
.card--feature .card__body { color: rgba(255,255,255,0.80); }
.card--feature .card__icon { background: rgba(255, 157, 0, 0.18); color: var(--brand-orange); }
.card--accent {
  background: rgba(255, 157, 0, 0.08);
  border-color: rgba(255, 157, 0, 0.25);
}
.card--soon { opacity: 0.65; }
.card--soon::before {
  content: 'Coming Q3 2026';
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
}

/* Big product cards */
.product-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  transition: all var(--t-base);
  text-decoration: none;
  color: inherit;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.product-card {
  background:
    linear-gradient(180deg, rgba(2, 0, 108, 0.50) 0%, rgba(1, 0, 87, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.product-card:hover {
  border-color: rgba(255, 157, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 157, 0, 0.25),
    0 0 50px rgba(255, 157, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.product-card__top {
  padding: var(--space-9) var(--space-6) var(--space-7);
  background: linear-gradient(135deg, rgba(1, 0, 72, 0.50) 0%, rgba(2, 0, 108, 0.45) 50%, rgba(1, 0, 87, 0.50) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.product-card__top::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(248, 151, 29, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(248, 151, 29, 0.10) 0%, transparent 50%);
  pointer-events: none;
}
.product-card__logo {
  height: 260px;
  width: auto;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  align-self: center;
  filter:
    drop-shadow(0 0 40px rgba(255, 215, 0, 0.70))
    drop-shadow(0 0 80px rgba(255, 224, 60, 0.45))
    drop-shadow(0 0 130px rgba(255, 235, 100, 0.25))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  transition: filter var(--t-base), transform var(--t-base);
}
.product-card:hover .product-card__logo {
  filter:
    drop-shadow(0 0 56px rgba(255, 215, 0, 0.90))
    drop-shadow(0 0 110px rgba(255, 224, 60, 0.65))
    drop-shadow(0 0 160px rgba(255, 235, 100, 0.40))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  transform: scale(1.06);
}
.product-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}
.product-card__title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 16px rgba(255, 157, 0, 0.20);
}
.product-card__hook {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.product-card__body { padding: var(--space-6); }
.product-card__body p { font-size: 0.95rem; }
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
}
.product-card__cta::after {
  content: '→';
  transition: transform var(--t-fast);
}
body[lang="ar"] .product-card__cta::after { content: '←'; }
.product-card:hover .product-card__cta::after { transform: translateX(4px); }
body[lang="ar"] .product-card:hover .product-card__cta::after { transform: translateX(-4px); }

/* ============== STATS ============== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: var(--space-5) var(--space-3); }
.stat__num {
  font-family: var(--font-en);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #FFD180 0%, var(--brand-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 24px rgba(255, 157, 0, 0.40));
}
.stat__label {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  font-weight: 500;
}
.section--dark .stat__num { color: var(--brand-orange); }

/* ============== LOOP DIAGRAM ============== */
.loop {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  position: relative;
  margin-top: var(--space-7);
}
.loop__step {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background:
    linear-gradient(180deg, rgba(2, 0, 108, 0.50) 0%, rgba(1, 0, 87, 0.35) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  transition: all 0.4s ease;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.loop__step:hover {
  border-color: rgba(255, 157, 0, 0.40);
  transform: translateY(-4px);
  box-shadow:
    0 0 30px rgba(255, 157, 0, 0.15),
    0 12px 36px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.loop__num {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  background: radial-gradient(circle at 30% 30%, #FFB940 0%, var(--brand-orange) 60%, #D67F00 100%);
  color: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: var(--font-en);
  box-shadow:
    0 0 24px rgba(255, 157, 0, 0.50),
    0 0 48px rgba(255, 157, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.loop__title { font-size: 1.05rem; font-weight: 800; color: var(--white); margin-bottom: var(--space-2); }
.loop__desc { font-size: 0.95rem; color: rgba(255,255,255,0.78); line-height: 1.6; }
@media (max-width: 900px) { .loop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .loop { grid-template-columns: 1fr; } }

/* ============== TESTIMONIALS ============== */
.quote {
  background: linear-gradient(180deg, rgba(2, 0, 108, 0.50) 0%, rgba(1, 0, 87, 0.35) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  border-inline-start: 4px solid var(--brand-orange);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.10);
  height: 100%;
  box-shadow:
    0 0 24px rgba(255, 157, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.quote__text { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.92); margin-bottom: var(--space-4); font-style: italic; }
.quote__author { display: flex; align-items: center; gap: var(--space-3); }
.quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 157, 0, 0.15);
  border: 1px solid rgba(255, 157, 0, 0.30);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--brand-orange);
  font-family: var(--font-en);
}
.quote__name { font-weight: 700; color: var(--white); font-size: 0.95rem; }
.quote__meta { font-size: 0.8rem; color: rgba(255,255,255,0.55); }

/* ============== FAQ ============== */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item {
  background: linear-gradient(180deg, rgba(2, 0, 108, 0.50) 0%, rgba(1, 0, 87, 0.35) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.faq__item[open] {
  border-color: rgba(255, 157, 0, 0.50);
  background: linear-gradient(180deg, rgba(2, 0, 108, 0.65) 0%, rgba(1, 0, 87, 0.50) 100%);
  box-shadow:
    0 0 30px rgba(255, 157, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; font-size: 1.5rem; color: var(--brand-orange); transition: transform var(--t-fast); }
.faq__item[open] .faq__q::after { content: '−'; }
.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.7;
}

/* ============== PRICING ============== */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 800px) { .pricing { grid-template-columns: 1fr; } }
.price-card {
  background: rgba(1, 0, 87, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  transition: all var(--t-base);
  color: rgba(255,255,255,0.85);
}
.price-card:hover { transform: translateY(-2px); border-color: rgba(255,157,0,0.40); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.price-card--featured {
  border: 2px solid var(--brand-orange);
  background: linear-gradient(180deg, rgba(255, 157, 0, 0.12) 0%, rgba(1, 0, 87, 0.55) 100%);
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(255, 157, 0, 0.15);
}
@media (max-width: 800px) { .price-card--featured { transform: none; } }
.price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 157, 0, 0.30);
}
.price-card__name { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.75); margin-bottom: var(--space-3); }
.price-card__price {
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.price-card__price small { font-size: 1rem; color: rgba(255,255,255,0.50); font-weight: 400; }
.price-card__desc { font-size: 0.9rem; color: rgba(255,255,255,0.70); margin-bottom: var(--space-5); min-height: 50px; }
.price-card__list { list-style: none; margin-bottom: var(--space-5); text-align: start; }
.price-card__list li {
  padding: var(--space-2) 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.80);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.price-card__list li::before { content: '✓'; color: var(--brand-orange); font-weight: 900; }

/* ============== TABLE OF COMPARISON ============== */
.compare {
  width: 100%;
  background: rgba(1, 0, 87, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-collapse: separate;
  border-spacing: 0;
  color: rgba(255,255,255,0.85);
}
.compare th, .compare td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compare th {
  background: rgba(2, 0, 108, 0.70);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
}
.compare th:nth-child(3) { background: rgba(255, 157, 0, 0.85); color: var(--white); }
.compare td:nth-child(3) { background: rgba(255, 157, 0, 0.10); font-weight: 600; color: var(--white); }
.compare td b { color: var(--white); }
.compare tr:last-child td { border-bottom: 0; }

/* ============== FORMS ============== */
.form {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(1, 0, 87, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.form__field { margin-bottom: var(--space-4); }
.form__label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--white); margin-bottom: var(--space-2); }
.form__input, .form__select, .form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(1, 0, 72, 0.50);
  font-size: 1rem;
  color: var(--white);
  transition: all var(--t-fast);
  font-family: inherit;
}
.form__input::placeholder, .form__textarea::placeholder { color: rgba(255,255,255,0.40); }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  background: rgba(1, 0, 72, 0.70);
  box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.15);
}
.form__select { color: var(--white); }
.form__select option { background: #010057; color: var(--white); }
.form__textarea { resize: vertical; min-height: 120px; }

/* ============== FOOTER — transparent over body bg ============== */
.footer {
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: var(--space-9) 0 var(--space-6);
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-orange) 50%, transparent 100%);
  opacity: 0.5;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-weight: 900; font-size: 1.5rem; color: var(--white); margin-bottom: var(--space-3); }
.footer__tagline { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: var(--space-4); }
.footer h4 {
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.footer__list { list-style: none; }
.footer__list li { margin-bottom: var(--space-2); }
.footer__list a { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.footer__list a:hover { color: var(--accent); }
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.footer__social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--white);
  transition: all var(--t-fast);
}
.footer__social a:hover { background: var(--accent); color: var(--primary-dark); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

/* ============== UTILITIES ============== */
.text-center { text-align: center; }
.text-start { text-align: start; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-7 { margin-bottom: var(--space-7); }
.mt-5 { margin-top: var(--space-5); }
.row-gap { row-gap: var(--space-7); }
.hidden { display: none; }
.no-break { white-space: nowrap; }
.highlight { color: var(--signal); }
.accent { color: var(--accent); }

/* Language visibility */
[data-lang-en], [data-lang-ar] { display: none; }
body[lang="ar"] [data-lang-ar] { display: revert; }
body[lang="en"] [data-lang-en] { display: revert; }
body[lang="ar"] [data-lang-ar].lang-flex { display: flex; }
body[lang="en"] [data-lang-en].lang-flex { display: flex; }
body[lang="ar"] [data-lang-ar].lang-grid { display: grid; }
body[lang="en"] [data-lang-en].lang-grid { display: grid; }
body[lang="ar"] [data-lang-ar].lang-inline { display: inline; }
body[lang="en"] [data-lang-en].lang-inline { display: inline; }

/* CTA banner */
.cta-banner {
  background: linear-gradient(135deg, rgba(2, 0, 108, 0.70) 0%, rgba(1, 0, 87, 0.80) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--white);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  inset-inline-end: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 157, 0, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-banner h2 { color: var(--white); margin-bottom: var(--space-3); position: relative; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-5); position: relative; }
.cta-banner .hero__ctas { position: relative; }

/* Pill chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
.chip--dark { background: rgba(255,255,255,0.1); color: var(--white); border-color: rgba(255,255,255,0.2); }

/* ============================================
   SIGNATURE DOT — the orange dot system
   The defining visual mark of Noon
   ============================================ */
.dot,
.dot-sm,
.dot-lg {
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFC560 0%, var(--brand-orange) 60%, #D67F00 100%);
  box-shadow:
    0 0 12px rgba(255, 157, 0, 0.60),
    0 0 24px rgba(255, 157, 0, 0.30),
    inset 0 1px 2px rgba(255, 255, 255, 0.40);
  vertical-align: middle;
}
.dot { width: 10px; height: 10px; }
.dot-sm { width: 6px; height: 6px; }
.dot-lg { width: 16px; height: 16px; }

/* Section divider using the dot */
.dot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: var(--space-7) 0;
  opacity: 0.85;
}
.dot-divider::before,
.dot-divider::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 157, 0, 0.40), transparent);
}

/* Pulsing dot — for "live" indicators */
.dot-pulse {
  position: relative;
}
.dot-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: 0.4;
  animation: dot-pulse-ring 2s ease-out infinite;
}
@keyframes dot-pulse-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============================================
   MICROINTERACTIONS
   ============================================ */

/* Button ripple */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transform: scale(0);
  animation: ripple 0.55s ease-out;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Card 3D tilt setup */
.tilt-card,
.card,
.product-card,
.quote,
.loop__step,
.price-card,
.faq__item {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.3, 1.1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  will-change: transform;
}

/* Scroll-reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.85, 0.3, 1.1),
              transform 0.7s cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="100"] { transition-delay: 0.10s; }
[data-reveal][data-delay="200"] { transition-delay: 0.20s; }
[data-reveal][data-delay="300"] { transition-delay: 0.30s; }
[data-reveal][data-delay="400"] { transition-delay: 0.40s; }
[data-reveal][data-delay="500"] { transition-delay: 0.50s; }
[data-reveal][data-delay="600"] { transition-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Cursor trail (on hero only) */
.cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 157, 0, 0.20) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor-glow.is-active { opacity: 1; }
@media (max-width: 900px) { .cursor-glow { display: none; } }

/* Logo hover pause */
.header__logo:hover img {
  animation-play-state: paused !important;
}

/* ============================================
   CIRCULAR LOOP DIAGRAM
   ============================================ */
.value-loop {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1;
  position: relative;
}
.value-loop__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.value-loop__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 200px;
  pointer-events: none;
}
.value-loop__center img {
  height: 64px;
  width: auto;
  margin: 0 auto var(--space-3);
  filter: drop-shadow(0 0 24px rgba(255, 157, 0, 0.50));
  animation: spin-slow 60s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.value-loop__center-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  font-weight: 600;
}
.value-loop__step {
  position: absolute;
  width: 160px;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.value-loop__step.is-active { transform: translate(-50%, -50%) scale(1.08); }
.value-loop__bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  background: linear-gradient(135deg, rgba(2, 0, 108, 0.85) 0%, rgba(1, 0, 87, 0.85) 100%);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease;
}
.value-loop__step.is-active .value-loop__bubble {
  background: radial-gradient(circle at 30% 30%, #FFC560 0%, var(--brand-orange) 60%, #D67F00 100%);
  border-color: rgba(255, 255, 255, 0.50);
  color: var(--white);
  box-shadow:
    0 0 32px rgba(255, 157, 0, 0.60),
    0 0 56px rgba(255, 157, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.value-loop__label {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
}
.value-loop__step.is-active .value-loop__label {
  color: var(--brand-orange);
  text-shadow: 0 0 16px rgba(255, 157, 0, 0.40);
}

/* On small screens — fall back to stacked layout */
@media (max-width: 720px) {
  .value-loop { max-width: 100%; aspect-ratio: auto; height: auto; }
  .value-loop__svg { display: none; }
  .value-loop__center { position: static; transform: none; width: auto; margin-bottom: var(--space-6); }
  .value-loop__step {
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: start;
    padding: var(--space-4);
    background: rgba(1, 0, 87, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
  }
  .value-loop__bubble { margin: 0; flex-shrink: 0; }
}

/* ============================================
   HERO VISUAL — Gaza skyline + orbit
   ============================================ */
.hero__visual {
  position: absolute;
  inset-inline-end: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  height: 540px;
  max-width: 45vw;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
.hero__visual svg { width: 100%; height: 100%; }
@media (max-width: 1100px) {
  .hero__visual { display: none; }
}

/* Orbit rings rotate */
@keyframes orbit-rotate-cw { to { transform: rotate(360deg); } }
@keyframes orbit-rotate-ccw { to { transform: rotate(-360deg); } }
.orbit-1 { transform-origin: center; animation: orbit-rotate-cw 60s linear infinite; }
.orbit-2 { transform-origin: center; animation: orbit-rotate-ccw 90s linear infinite; }
.orbit-3 { transform-origin: center; animation: orbit-rotate-cw 120s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .orbit-1, .orbit-2, .orbit-3, .value-loop__center img { animation: none; }
}

/* North star pulse */
@keyframes north-star-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}
.north-star { animation: north-star-pulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ============================================
   PHOTO PLACEHOLDERS (until real photos arrive)
   ============================================ */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  background:
    linear-gradient(135deg, rgba(2, 0, 108, 0.60) 0%, rgba(1, 0, 72, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-7);
}
.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 157, 0, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(77, 171, 255, 0.15) 0%, transparent 50%);
}
.photo__icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 157, 0, 0.18);
  border: 1px solid rgba(255, 157, 0, 0.35);
  display: grid;
  place-items: center;
  color: var(--brand-orange);
  margin-bottom: var(--space-4);
  box-shadow: 0 0 24px rgba(255, 157, 0, 0.30);
}
.photo__label {
  position: relative;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ============================================
   404 PAGE — cosmic
   ============================================ */
.page-404 {
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: var(--space-9) var(--space-5);
  text-align: center;
  position: relative;
}
.page-404__code {
  font-family: var(--font-display-en);
  font-size: clamp(8rem, 18vw, 14rem);
  font-weight: 900;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--brand-orange) 60%, #D67F00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 0 60px rgba(255, 157, 0, 0.30));
}
.page-404__icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 70%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-6);
  color: var(--brand-orange);
  box-shadow: 0 0 48px rgba(255, 157, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: float 6s ease-in-out infinite;
}
.page-404__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--white);
  margin-bottom: var(--space-3);
}
.page-404__sub {
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto var(--space-6);
  font-size: 1.05rem;
}

/* ============================================
   20/10 ICONIC UPGRADES
   ============================================ */

/* ===== Custom Cursor (the signature orange dot) ===== */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
  .cursor-dot, .cursor-ring {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, width 0.25s cubic-bezier(0.2, 0.85, 0.3, 1.1), height 0.25s cubic-bezier(0.2, 0.85, 0.3, 1.1), border-color 0.25s ease, background 0.25s ease;
    will-change: transform, width, height;
  }
  .cursor-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD180 0%, #FF9D00 70%);
    box-shadow: 0 0 12px rgba(255, 157, 0, 0.8), 0 0 24px rgba(255, 157, 0, 0.4);
    mix-blend-mode: screen;
  }
  .cursor-ring {
    width: 36px; height: 36px;
    border: 1.5px solid rgba(255, 157, 0, 0.55);
    border-radius: 50%;
  }
  /* On hoverable elements */
  html.has-custom-cursor.is-hovering .cursor-dot {
    width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, #FFE4A0 0%, #FF9D00 70%);
  }
  html.has-custom-cursor.is-hovering .cursor-ring {
    width: 64px; height: 64px;
    border-color: rgba(255, 157, 0, 0.85);
    background: rgba(255, 157, 0, 0.08);
  }
  /* On text */
  html.has-custom-cursor.is-text .cursor-ring {
    width: 4px; height: 24px;
    border-radius: 2px;
    background: rgba(255, 157, 0, 0.7);
    border: none;
  }
  html.has-custom-cursor.is-text .cursor-dot { opacity: 0; }
}

/* ===== Scroll Progress Bar ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, var(--brand-orange) 0%, #FFD180 50%, var(--brand-orange) 100%);
  box-shadow: 0 0 12px rgba(255, 157, 0, 0.60), 0 0 24px rgba(255, 157, 0, 0.30);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ===== Page Loader ===== */
.loader {
  position: fixed;
  inset: 0;
  background: #010048;
  z-index: 10000;
  display: grid;
  place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
}
.loader__core {
  position: relative;
  width: 80px;
  height: 80px;
}
.loader__dot {
  position: absolute;
  inset: 50%;
  width: 16px; height: 16px;
  margin-top: -8px; margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD180 0%, #FF9D00 60%, #D67F00 100%);
  box-shadow: 0 0 24px rgba(255, 157, 0, 0.8), 0 0 56px rgba(255, 157, 0, 0.4);
  animation: loader-pulse 1.2s ease-in-out infinite;
}
.loader__ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: rgba(255, 157, 0, 0.6);
  border-radius: 50%;
  animation: loader-spin 1.4s linear infinite;
}
.loader__ring:nth-child(3) {
  inset: 12px;
  border-top-color: rgba(77, 171, 255, 0.5);
  animation-duration: 2s;
  animation-direction: reverse;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ===== Sticky CTA ===== */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(2, 0, 108, 0.95) 0%, rgba(1, 0, 87, 0.95) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 157, 0, 0.35);
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(255, 157, 0, 0.20), 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  transition: all 0.4s ease;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.sticky-cta:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255, 157, 0, 0.70);
  box-shadow: 0 0 40px rgba(255, 157, 0, 0.40), 0 16px 48px rgba(0, 0, 0, 0.45);
}
.sticky-cta::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 12px rgba(255, 157, 0, 0.9);
  animation: dot-pulse-ring 2s ease-out infinite;
}
@media (max-width: 600px) {
  .sticky-cta {
    bottom: 16px; inset-inline-end: 16px; inset-inline-start: 16px;
    justify-content: center;
  }
}

/* ===== Animated Gradient Mesh Background ===== */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  will-change: transform;
}
.mesh-blob--1 {
  width: 600px; height: 600px;
  background: var(--brand-orange);
  top: -10%; left: -10%;
  animation: mesh-drift-1 20s ease-in-out infinite;
}
.mesh-blob--2 {
  width: 500px; height: 500px;
  background: var(--brand-sky);
  top: 40%; right: -10%;
  animation: mesh-drift-2 25s ease-in-out infinite;
}
.mesh-blob--3 {
  width: 700px; height: 700px;
  background: #5C2EA8;
  bottom: -20%; left: 30%;
  opacity: 0.20;
  animation: mesh-drift-3 30s ease-in-out infinite;
}
@keyframes mesh-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(60px, 80px); }
  66%      { transform: translate(-40px, 50px); }
}
@keyframes mesh-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-100px, -60px); }
}
@keyframes mesh-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, -50px) scale(1.1); }
}
@media (max-width: 600px) {
  .mesh-blob { filter: blur(80px); opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-blob { animation: none; }
}

/* ===== Text Reveal — Letter by Letter ===== */
.text-reveal { display: inline-block; }
.text-reveal__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.1), transform 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.text-reveal__char.is-shown { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .text-reveal__char { opacity: 1 !important; transform: none !important; }
}

/* ===== Magnetic Buttons ===== */
.btn { transition: transform 0.25s cubic-bezier(0.2, 0.85, 0.3, 1.1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; }

/* ===== Page Transition Overlay ===== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(circle at center, var(--brand-orange) 0%, transparent 50%);
  transform: scale(0);
  transform-origin: var(--ptx, 50%) var(--pty, 50%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.7s ease;
}
.page-transition.is-active {
  transform: scale(4);
  opacity: 1;
}

/* ===== Easter Egg Modal ===== */
.easter {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: grid;
  place-items: center;
  background: rgba(1, 0, 72, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  text-align: center;
  padding: 20px;
}
.easter.is-active { opacity: 1; visibility: visible; }
.easter__star {
  width: 200px; height: 200px;
  margin: 0 auto 32px;
  background: radial-gradient(circle at 30% 30%, #FFD180 0%, #FF9D00 50%, transparent 80%);
  border-radius: 50%;
  filter: blur(2px);
  animation: easter-pulse 2s ease-in-out infinite;
}
.easter__text {
  color: var(--white);
  font-family: var(--font-display-ar);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  max-width: 600px;
  line-height: 1.4;
}
.easter__sub {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
  font-size: 1rem;
}
.easter__close {
  margin-top: 32px;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
}
@keyframes easter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== Number tick animation enhancement ===== */
.stat__num {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Smooth scrolling fix for nav links (custom JS handles momentum) */
html { scroll-behavior: auto; }

/* ============================================
   RESTRAINT — disable overdone effects
   "Less is more"
   ============================================ */

/* Disable custom cursor */
html.has-custom-cursor,
html.has-custom-cursor * { cursor: auto !important; }
.cursor-dot, .cursor-ring { display: none !important; }

/* Disable page transitions */
.page-transition { display: none !important; }

/* Disable mesh blobs */
.mesh-bg { display: none !important; }

/* Disable cursor glow on hero */
.cursor-glow { display: none !important; }

/* Hero icons — smaller, calmer */
.hero__icon {
  width: 44px;
  height: 44px;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Brand logo — calmer glow */
.brand-logo {
  filter: drop-shadow(0 0 32px rgba(255, 157, 0, 0.30));
  animation: none;
}
.hero .brand-logo, .hero--dark .brand-logo {
  filter: drop-shadow(0 0 28px rgba(255, 157, 0, 0.35));
  animation: none;
}

.header__logo img {
  height: 72px;
  filter: drop-shadow(0 0 16px rgba(255, 157, 0, 0.25));
  animation: none;
}
.header__logo:hover img { filter: drop-shadow(0 0 22px rgba(255, 157, 0, 0.40)); }

/* Product card logo — calmer */
.product-card__logo {
  height: 180px;
  filter: drop-shadow(0 0 28px rgba(255, 157, 0, 0.35));
  animation: none;
}
.product-card:hover .product-card__logo {
  filter: drop-shadow(0 0 36px rgba(255, 157, 0, 0.50));
  transform: scale(1.02);
}

/* Calm down product card shadows */
.product-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.product-card__top { min-height: 380px; }

/* Loop steps — calmer */
.loop__step {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.loop__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
}
.loop__num {
  box-shadow: 0 0 16px rgba(255, 157, 0, 0.35);
}

/* Eyebrow — simpler */
.eyebrow {
  box-shadow: none;
  text-shadow: none;
  border: 1px solid rgba(255, 157, 0, 0.25);
  padding: 5px 14px;
}

/* Stats — calmer */
.stat__num {
  filter: drop-shadow(0 2px 12px rgba(255, 157, 0, 0.25));
}

/* Quote — calmer */
.quote {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
}

/* FAQ — calmer */
.faq__item {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.faq__item[open] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Price card — calmer */
.price-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
}
.price-card--featured {
  box-shadow: 0 8px 32px rgba(255, 157, 0, 0.15);
}

/* Buttons — restore clean style */
.btn { transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); }

/* Hero title — simpler shadow */
.hero__title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
}
.hero__title .acc { text-shadow: 0 0 16px rgba(255, 157, 0, 0.35); }
.hero__title .sky { text-shadow: 0 0 16px rgba(77, 171, 255, 0.35); }

/* Subtitle simpler */
.hero__sub { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

/* Footer logo glow — calmer */
.footer__brand img {
  filter: drop-shadow(0 0 16px rgba(255, 157, 0, 0.25)) !important;
  height: 64px !important;
}

/* Disable 3D tilt by neutralizing the JS-set transform */
.card, .product-card, .quote, .price-card, .loop__step { transform: none !important; transform-style: flat; will-change: auto; }
.card:hover { transform: translateY(-2px) !important; }
.product-card:hover { transform: translateY(-3px) !important; }
.quote:hover, .price-card:hover, .loop__step:hover { transform: translateY(-2px) !important; }

/* Text reveal — show immediately (no letter animation) */
.text-reveal__char { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Card border-mask gradient — gone (handled by simpler .card above) */
.card::before { display: none; }

/* Calm the loader */
.loader__dot {
  width: 14px; height: 14px;
  margin-top: -7px; margin-left: -7px;
  box-shadow: 0 0 16px rgba(255, 157, 0, 0.60);
}

/* ============================================
   FINAL TEXT FIX — clear, crisp, no blur
   ============================================ */

/* Hero title — clean white, no blur shadow */
.hero__title,
.hero__title * {
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: var(--font-display-ar);
  font-weight: 900;
}
.hero__title .acc,
.hero__title .acc * {
  color: var(--brand-orange) !important;
}
.hero__title .sky,
.hero__title .sky * {
  color: var(--brand-sky) !important;
}

/* Hero sub — clean white */
.hero__sub,
.hero__sub * {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}
.hero__sub .acc { color: var(--brand-orange) !important; font-weight: 700; }
.hero__sub .sky { color: var(--brand-sky) !important; font-weight: 700; }

/* All headings — no heavy shadows */
h1, h2, h3, h4, h5, h6 {
  text-shadow: none !important;
}

/* Force text-reveal characters to render solid color */
.text-reveal__char {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* Eyebrow — clean */
.eyebrow {
  text-shadow: none !important;
}

/* Stat numbers — clean (keep small glow only) */
.stat__num {
  filter: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--brand-orange) !important;
}

/* ============================================
   FINAL — smaller, all-white, zero fog
   ============================================ */

/* Hero title — smaller, pure white, no effects */
.hero__title,
.hero__title *,
.hero__title .acc,
.hero__title .sky {
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: clamp(1.85rem, 4vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* Hero sub — smaller, white, no blur */
.hero__sub,
.hero__sub * {
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* Other headings — smaller, white, no shadow */
h1, h2, h3, h4 { text-shadow: none !important; filter: none !important; }
h1 { font-size: clamp(1.85rem, 4vw, 3.25rem) !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem) !important; }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; }

/* Hero brand logo — smaller too */
.hero .brand-logo,
.hero--dark .brand-logo {
  height: 140px !important;
  filter: drop-shadow(0 0 20px rgba(255, 157, 0, 0.30)) !important;
  animation: none !important;
}

/* Disable breathing background */
body { animation: none !important; }

/* Disable Hero visual blob effects (north star pulse) */
.north-star { animation: none !important; }

/* Calm down the hero__bg radial glows that might cause foggy look */
.hero__bg::before,
.hero__bg::after { opacity: 0.4; }

/* Page-wide — remove any leftover global filters */
section, .container, .hero__inner { filter: none !important; }

/* ============================================
   HEADER NAV — pure white + glow
   ============================================ */
.header__nav a,
.header__nav a span {
  color: #FFFFFF !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.40),
    0 0 16px rgba(255, 157, 0, 0.20);
  transition: text-shadow 0.25s ease, color 0.25s ease;
  font-weight: 600;
}
.header__nav a:hover,
.header__nav a:hover span {
  color: var(--brand-orange) !important;
  text-shadow:
    0 0 12px rgba(255, 157, 0, 0.65),
    0 0 24px rgba(255, 157, 0, 0.35);
}
.header__nav a.active,
.header__nav a.active span {
  color: var(--brand-orange) !important;
  text-shadow:
    0 0 14px rgba(255, 157, 0, 0.70),
    0 0 28px rgba(255, 157, 0, 0.40);
}

/* Language toggle — white with subtle glow */
.lang-toggle {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.40);
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.lang-toggle:hover {
  color: var(--brand-orange) !important;
  text-shadow: 0 0 12px rgba(255, 157, 0, 0.55);
  border-color: var(--brand-orange) !important;
}

/* ============================================
   CARDS — soft glow / illumination
   ============================================ */
.card {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.20),
    0 0 32px rgba(255, 157, 0, 0.06);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 157, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(77, 171, 255, 0.06) 0%, transparent 60%);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.card:hover::after { opacity: 1; }
.card:hover {
  border-color: rgba(255, 157, 0, 0.40) !important;
  box-shadow:
    0 0 0 1px rgba(255, 157, 0, 0.20),
    0 8px 28px rgba(0, 0, 0, 0.30),
    0 0 48px rgba(255, 157, 0, 0.15);
}

/* Card content should sit above the glow overlay */
.card > * { position: relative; z-index: 1; }

/* Card icon — illuminated */
.card__icon {
  background: radial-gradient(circle at 30% 30%, rgba(255, 157, 0, 0.25) 0%, rgba(255, 157, 0, 0.08) 70%) !important;
  border: 1px solid rgba(255, 157, 0, 0.30) !important;
  box-shadow:
    0 0 16px rgba(255, 157, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Card title slight glow */
.card__title {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

/* Card link arrow with glow */
.card__link {
  text-shadow: 0 0 10px rgba(255, 157, 0, 0.35);
}

/* ============================================
   WHITE GLOW — all cards illuminated white
   ============================================ */
.card,
.product-card,
.quote,
.price-card,
.loop__step,
.faq__item {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(255, 255, 255, 0.08),
    0 0 48px rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.card:hover,
.product-card:hover,
.quote:hover,
.price-card:hover,
.loop__step:hover,
.faq__item:hover,
.faq__item[open] {
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 40px rgba(255, 255, 255, 0.18),
    0 0 80px rgba(255, 255, 255, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Top inner-rim of white light on every card */
.card::after,
.product-card::after,
.quote::after,
.price-card::after,
.loop__step::after,
.faq__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.card:hover::after,
.product-card:hover::after,
.quote:hover::after,
.price-card:hover::after,
.loop__step:hover::after,
.faq__item:hover::after,
.faq__item[open]::after { opacity: 1; }

/* Content above the glow overlay */
.card > *,
.product-card > *,
.quote > *,
.price-card > *,
.loop__step > *,
.faq__item > * { position: relative; z-index: 1; }

/* Featured price card — keep its orange accent but add white glow too */
.price-card--featured {
  border: 2px solid var(--brand-orange) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 32px rgba(255, 255, 255, 0.12),
    0 0 48px rgba(255, 157, 0, 0.20),
    0 12px 36px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* ============================================
   AMBIENT BG ANIMATION — full-page starfield
   ============================================ */
#ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.header, main, .footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #ambient-bg { display: none; }
}

/* ============================================
   FINAL TYPOGRAPHY RESET
   Clean hierarchy, balanced sizes, sharp text
   ============================================ */

/* ─── Sizes (responsive but predictable) ─── */
.hero__title,
.hero__title *,
.hero__title .acc,
.hero__title .sky {
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 var(--space-4) !important;
}

.hero__sub,
.hero__sub * {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin: 0 auto var(--space-6) !important;
  max-width: 680px !important;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem) !important; line-height: 1.2 !important; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important; line-height: 1.3 !important; }
h4 { font-size: 1.2rem !important; line-height: 1.35 !important; }
p, .lead {
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.7 !important;
}
.card__body, .product-card__hook, .quote__text { font-size: 0.98rem !important; line-height: 1.7 !important; }
.eyebrow {
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
}

/* ─── Colors (clean, predictable) ─── */
.hero__title,
.hero__title > [data-lang-ar],
.hero__title > [data-lang-en] { color: #FFFFFF !important; }

.hero__title .acc,
h1 .acc, h2 .acc, h3 .acc,
.hero__sub .acc, p .acc {
  color: var(--brand-orange) !important;
  -webkit-text-fill-color: var(--brand-orange) !important;
  background: none !important;
  font-weight: inherit !important;
}
.hero__title .sky,
h1 .sky, h2 .sky, h3 .sky,
.hero__sub .sky, p .sky {
  color: var(--brand-sky) !important;
  -webkit-text-fill-color: var(--brand-sky) !important;
  background: none !important;
  font-weight: inherit !important;
}

h1, h2, h3, h4, h5, h6 { color: #FFFFFF !important; }
p { color: rgba(255, 255, 255, 0.85) !important; }
.lead { color: rgba(255, 255, 255, 0.92) !important; }
.card__title { color: #FFFFFF !important; }
.card__body { color: rgba(255, 255, 255, 0.80) !important; }

/* ─── Display / Spacing ─── */
.hero__inner { padding: var(--space-7) 0; }
.hero__inner .eyebrow { margin-bottom: var(--space-4) !important; display: inline-block !important; }
.hero__ctas { margin-top: var(--space-6) !important; gap: var(--space-4) !important; }

h1, h2 { margin: 0 0 var(--space-3) !important; }
h3, h4 { margin: 0 0 var(--space-2) !important; }
p { margin: 0 0 var(--space-3) !important; }
p:last-child { margin-bottom: 0 !important; }

/* ─── Sharp text rendering ─── */
.hero__title, .hero__sub, h1, h2, h3, h4, p, .lead, .eyebrow, .card__title, .card__body {
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Stats — re-enable a subtle gradient but keep it readable */
.stat__num {
  font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
  font-weight: 900 !important;
  color: var(--brand-orange) !important;
  -webkit-text-fill-color: var(--brand-orange) !important;
  background: none !important;
  text-shadow: 0 0 24px rgba(255, 157, 0, 0.25) !important;
}
.stat__label {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.55 !important;
}

/* ─── Card content rhythm ─── */
.card {
  padding: var(--space-6) !important;
}
.card__icon { margin-bottom: var(--space-4) !important; }
.card__title { margin-bottom: var(--space-3) !important; font-size: 1.15rem !important; }

/* ─── Product card text ─── */
.product-card__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--space-3) !important;
}
.product-card__hook {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.product-card__body { padding: var(--space-5) var(--space-6) var(--space-6) !important; }
.product-card__body p { font-size: 0.95rem !important; }

/* ─── Quote / testimonials ─── */
.quote__text {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-style: italic;
  margin: 0 0 var(--space-4) !important;
}
.quote__name { font-size: 0.95rem !important; color: #FFFFFF !important; }
.quote__meta { font-size: 0.82rem !important; color: rgba(255,255,255,0.60) !important; }

/* ─── FAQ readability ─── */
.faq__q {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #FFFFFF !important;
}
.faq__a {
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ─── Price cards readability ─── */
.price-card__name { font-size: 1rem !important; color: rgba(255,255,255,0.70) !important; }
.price-card__price { font-size: 2.25rem !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.price-card__desc { font-size: 0.9rem !important; color: rgba(255,255,255,0.65) !important; min-height: auto !important; }
.price-card__list li { font-size: 0.92rem !important; color: rgba(255,255,255,0.85) !important; }

/* ─── Header readability ─── */
.header__inner { height: 80px !important; }
.header__nav a { font-size: 0.95rem !important; font-weight: 600 !important; }
.header__logo img { height: 56px !important; }

/* ─── Buttons ─── */
.btn { font-size: 0.95rem !important; font-weight: 700 !important; padding: var(--space-3) var(--space-6) !important; }
.btn--lg { font-size: 1.02rem !important; padding: var(--space-4) var(--space-7) !important; }

/* ─── Container max-width refinement ─── */
.hero__inner {
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ============================================
   LOGOS — bigger + illuminated (final)
   ============================================ */

/* Header logo */
.header__logo img {
  height: 84px !important;
  width: auto !important;
  filter:
    drop-shadow(0 0 14px rgba(255, 157, 0, 0.45))
    drop-shadow(0 0 28px rgba(255, 195, 80, 0.30))
    drop-shadow(0 0 52px rgba(255, 215, 0, 0.18)) !important;
  transition: filter 0.3s ease, transform 0.3s ease !important;
}
.header__logo:hover img {
  filter:
    drop-shadow(0 0 18px rgba(255, 157, 0, 0.65))
    drop-shadow(0 0 36px rgba(255, 195, 80, 0.45))
    drop-shadow(0 0 64px rgba(255, 215, 0, 0.28)) !important;
  transform: scale(1.04);
}
.header__inner { height: 104px !important; }

/* Hero brand logo (Space / Academy / Tamkeen / Donors pages) */
.hero .brand-logo,
.hero--dark .brand-logo,
.brand-logo {
  height: clamp(180px, 22vw, 280px) !important;
  width: auto !important;
  margin: 0 auto var(--space-5) !important;
  filter:
    drop-shadow(0 0 28px rgba(255, 157, 0, 0.55))
    drop-shadow(0 0 56px rgba(255, 195, 80, 0.40))
    drop-shadow(0 0 100px rgba(255, 215, 0, 0.22))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18)) !important;
  animation: brand-logo-breathe 4.5s ease-in-out infinite !important;
}
@keyframes brand-logo-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 28px rgba(255, 157, 0, 0.50))
      drop-shadow(0 0 56px rgba(255, 195, 80, 0.35))
      drop-shadow(0 0 100px rgba(255, 215, 0, 0.20))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
  }
  50% {
    filter:
      drop-shadow(0 0 38px rgba(255, 157, 0, 0.75))
      drop-shadow(0 0 76px rgba(255, 195, 80, 0.55))
      drop-shadow(0 0 130px rgba(255, 215, 0, 0.32))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none !important; }
}

/* Product card logos (homepage) */
.product-card__logo {
  height: clamp(170px, 18vw, 220px) !important;
  width: auto !important;
  margin: 0 auto var(--space-4) !important;
  filter:
    drop-shadow(0 0 28px rgba(255, 157, 0, 0.55))
    drop-shadow(0 0 56px rgba(255, 195, 80, 0.40))
    drop-shadow(0 0 96px rgba(255, 215, 0, 0.22))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.30)) !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}
.product-card:hover .product-card__logo {
  filter:
    drop-shadow(0 0 40px rgba(255, 157, 0, 0.80))
    drop-shadow(0 0 80px rgba(255, 195, 80, 0.55))
    drop-shadow(0 0 140px rgba(255, 215, 0, 0.35))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.30)) !important;
  transform: scale(1.05) !important;
}

/* Product card top — taller so logo has space */
.product-card__top {
  min-height: 420px !important;
  padding: var(--space-8) var(--space-6) var(--space-6) !important;
}

/* Footer logo */
.footer__brand img {
  height: 92px !important;
  width: auto !important;
  filter:
    drop-shadow(0 0 22px rgba(255, 157, 0, 0.50))
    drop-shadow(0 0 44px rgba(255, 195, 80, 0.35))
    drop-shadow(0 0 72px rgba(255, 215, 0, 0.20)) !important;
  margin-bottom: var(--space-4) !important;
}

/* Value loop center logo */
.value-loop__center img {
  height: 80px !important;
  filter:
    drop-shadow(0 0 24px rgba(255, 157, 0, 0.60))
    drop-shadow(0 0 48px rgba(255, 215, 0, 0.30)) !important;
}

/* Hero icons — brighter */
.hero__icon {
  width: 56px !important;
  height: 56px !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 70%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 0 20px rgba(255, 157, 0, 0.20),
    0 0 40px rgba(255, 157, 0, 0.10),
    0 6px 20px rgba(0, 0, 0, 0.20) !important;
}
.hero__icon svg { width: 24px !important; height: 24px !important; }
.hero__icon--1 svg { color: var(--brand-green); filter: drop-shadow(0 0 8px rgba(33, 150, 82, 0.6)); }
.hero__icon--2 svg { color: var(--brand-sky); filter: drop-shadow(0 0 8px rgba(77, 171, 255, 0.6)); }
.hero__icon--3 svg { color: var(--brand-orange); filter: drop-shadow(0 0 8px rgba(255, 157, 0, 0.6)); }
.hero__icon--4 svg { color: var(--brand-orange); filter: drop-shadow(0 0 8px rgba(255, 157, 0, 0.6)); }

/* ============================================
   LOGOS — WHITE illumination (final final)
   ============================================ */

/* Header logo — white glow */
.header__logo img {
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.30))
    drop-shadow(0 0 52px rgba(255, 255, 255, 0.18)) !important;
}
.header__logo:hover img {
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 36px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 64px rgba(255, 255, 255, 0.28)) !important;
}

/* Hero brand logo — white glow with breathing */
.hero .brand-logo,
.hero--dark .brand-logo,
.brand-logo {
  filter:
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 56px rgba(255, 255, 255, 0.40))
    drop-shadow(0 0 100px rgba(255, 255, 255, 0.22))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18)) !important;
  animation: brand-logo-breathe-white 4.5s ease-in-out infinite !important;
}
@keyframes brand-logo-breathe-white {
  0%, 100% {
    filter:
      drop-shadow(0 0 28px rgba(255, 255, 255, 0.50))
      drop-shadow(0 0 56px rgba(255, 255, 255, 0.35))
      drop-shadow(0 0 100px rgba(255, 255, 255, 0.20))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
  }
  50% {
    filter:
      drop-shadow(0 0 38px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 76px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 130px rgba(255, 255, 255, 0.32))
      drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none !important; }
}

/* Product card logos — white glow */
.product-card__logo {
  filter:
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 56px rgba(255, 255, 255, 0.40))
    drop-shadow(0 0 96px rgba(255, 255, 255, 0.22))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.30)) !important;
}
.product-card:hover .product-card__logo {
  filter:
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.80))
    drop-shadow(0 0 80px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 140px rgba(255, 255, 255, 0.35))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.30)) !important;
}

/* Footer logo — white glow */
.footer__brand img {
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.50))
    drop-shadow(0 0 44px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 72px rgba(255, 255, 255, 0.20)) !important;
}

/* Value loop center logo — white glow */
.value-loop__center img {
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.60))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.30)) !important;
}

/* ============================================
   COSMIC SPACE AMBIENCE — entire site
   ============================================ */

/* Header — taller, bigger logo, stronger glow */
.header__inner { height: 120px !important; }
.header__logo img {
  height: 120px !important;
  width: auto !important;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 36px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 72px rgba(255, 255, 255, 0.28))
    drop-shadow(0 0 120px rgba(255, 255, 255, 0.15)) !important;
  animation: header-logo-pulse 5s ease-in-out infinite !important;
}
@keyframes header-logo-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 36px rgba(255, 255, 255, 0.40))
      drop-shadow(0 0 72px rgba(255, 255, 255, 0.22))
      drop-shadow(0 0 120px rgba(255, 255, 255, 0.12));
  }
  50% {
    filter:
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.85))
      drop-shadow(0 0 48px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 96px rgba(255, 255, 255, 0.32))
      drop-shadow(0 0 150px rgba(255, 255, 255, 0.18));
  }
}
.header__logo:hover img {
  transform: scale(1.04);
  animation-duration: 2s !important;
}
@media (prefers-reduced-motion: reduce) {
  .header__logo img { animation: none !important; }
}
@media (max-width: 600px) {
  .header__inner { height: 88px !important; }
  .header__logo img { height: 72px !important; }
}

/* ===== Deep space body background — nebula layers ===== */
body {
  background:
    /* Star clusters (radial gradients = distant nebula glow) */
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(120, 90, 220, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 85%, rgba(255, 157, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 75% 25%, rgba(77, 171, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 15% 75%, rgba(120, 200, 255, 0.10) 0%, transparent 55%),
    /* Main indigo gradient */
    linear-gradient(135deg, #010030 0%, #02006C 35%, #010057 65%, #010030 100%),
    /* Diagonal noise texture */
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 2px) !important;
  background-attachment: fixed !important;
  background-blend-mode: screen, screen, screen, screen, normal, normal !important;
}

/* Slow cosmic drift on body bg */
body {
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    200% 200%,
    100% 100% !important;
  animation: cosmic-drift 60s ease-in-out infinite alternate !important;
}
@keyframes cosmic-drift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
}

/* Vignette overlay — darkens corners for "looking through a porthole" effect */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(1, 0, 30, 0.35) 100%);
  z-index: 0;
  mix-blend-mode: multiply;
}

/* Section ambience — each section has subtle cosmic glow */
section {
  position: relative;
  overflow: hidden;
}
section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 90, 220, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(77, 171, 255, 0.05) 0%, transparent 70%);
  z-index: 0;
  opacity: 0.7;
}
section > * { position: relative; z-index: 1; }

/* Ambient canvas — bring forward slightly, brighter */
#ambient-bg { opacity: 0.85 !important; z-index: 0 !important; }

/* Make sure content stays above ambient effects */
.header, main, .footer { position: relative; z-index: 2 !important; }

/* Subtle starfield via pseudo-element on main */
main::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,195,80,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1px 1px at 80% 80%, rgba(77,171,255,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(255,255,255,0.3) 50%, transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,195,80,0.4) 50%, transparent),
    radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 60% 75%, rgba(255,255,255,0.3) 50%, transparent),
    radial-gradient(1px 1px at 40% 10%, rgba(77,171,255,0.4) 50%, transparent),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.4) 50%, transparent);
  background-size: 100% 100%;
  z-index: 0;
  opacity: 0.6;
  animation: stars-twinkle 8s ease-in-out infinite alternate;
}
@keyframes stars-twinkle {
  0%   { opacity: 0.35; }
  100% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  main::before { animation: none !important; }
}

/* ============================================
   MOBILE RESPONSIVE — comprehensive
   ============================================ */

/* ===== Tablet (≤900px) ===== */
@media (max-width: 900px) {
  /* Containers — tighter */
  .container { padding: 0 var(--space-4) !important; }

  /* Sections — less vertical space */
  .section { padding: var(--space-7) 0 !important; }
  .hero { padding: var(--space-7) 0 var(--space-8) !important; }

  /* Grids → 2 columns */
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-4) !important; }
  .pricing { grid-template-columns: 1fr !important; }
  .price-card--featured { transform: none !important; }

  /* Hide floating hero icons */
  .hero__icon { display: none !important; }

  /* Footer grid → 2 columns */
  .footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-5) !important; }

  /* Product card — single column */
  .grid.grid--2 { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }

  /* Hero visual hide on tablet */
  .hero__visual { display: none !important; }
}

/* ===== Phone (≤640px) ===== */
@media (max-width: 640px) {
  /* Container even tighter */
  .container { padding: 0 var(--space-3) !important; }
  .section { padding: var(--space-6) 0 !important; }
  .hero { padding: var(--space-6) 0 var(--space-7) !important; }

  /* Header — compact */
  .header__inner { height: 72px !important; }
  .header__logo img { height: 56px !important; }

  /* Hero title — smaller on phone */
  .hero__title,
  .hero__title *,
  .hero__title .acc,
  .hero__title .sky {
    font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
    line-height: 1.18 !important;
  }
  .hero__sub,
  .hero__sub * {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  .hero__inner { padding: var(--space-5) 0 !important; }

  /* H2/H3 phone sizes */
  h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
  h3 { font-size: clamp(1.15rem, 4vw, 1.4rem) !important; }
  .lead { font-size: 1rem !important; }
  p { font-size: 0.95rem !important; line-height: 1.65 !important; }

  /* Brand logos — smaller on phone */
  .hero .brand-logo,
  .hero--dark .brand-logo,
  .brand-logo {
    height: 130px !important;
    margin-bottom: var(--space-4) !important;
  }
  .product-card__logo { height: 130px !important; }
  .product-card__top { min-height: 280px !important; padding: var(--space-6) var(--space-4) var(--space-4) !important; }
  .footer__brand img { height: 64px !important; }

  /* Single-column for all grids */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3) !important; }

  /* Stat number smaller */
  .stat__num { font-size: clamp(2rem, 9vw, 2.75rem) !important; }
  .stat__label { font-size: 0.85rem !important; }

  /* Footer — single column */
  .footer__grid { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); text-align: start; }

  /* CTAs stack */
  .hero__ctas { flex-direction: column !important; width: 100% !important; gap: var(--space-3) !important; }
  .hero__ctas .btn { width: 100% !important; }

  /* Buttons — bigger touch target */
  .btn { min-height: 48px !important; padding: var(--space-3) var(--space-5) !important; }
  .btn--lg { padding: var(--space-4) var(--space-6) !important; font-size: 1rem !important; }

  /* Cards — tighter padding */
  .card { padding: var(--space-5) !important; }
  .product-card__body { padding: var(--space-4) !important; }
  .quote, .faq__item { padding: var(--space-5) !important; }
  .faq__q { padding: var(--space-4) !important; font-size: 0.95rem !important; }
  .faq__a { padding: 0 var(--space-4) var(--space-4) !important; font-size: 0.9rem !important; }

  /* Eyebrow smaller */
  .eyebrow { font-size: 0.7rem !important; padding: 4px 10px !important; letter-spacing: 0.1em !important; }

  /* Compare tables — make scrollable */
  .compare {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .compare th, .compare td { padding: var(--space-3) !important; font-size: 0.85rem !important; }

  /* Form — full width */
  .form { padding: var(--space-5) !important; }
  .form__input, .form__select, .form__textarea { font-size: 1rem !important; min-height: 44px !important; }

  /* Sticky CTA — compact */
  .sticky-cta {
    bottom: 12px !important;
    inset-inline-end: 12px !important;
    inset-inline-start: 12px !important;
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
    justify-content: center;
  }

  /* Loader — smaller */
  .loader__core { width: 60px !important; height: 60px !important; }

  /* Value loop — already responsive, but ensure padding */
  .value-loop { max-width: 100% !important; }
  .value-loop__bubble { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }

  /* Reduce expensive effects on phone */
  .card, .product-card, .quote, .price-card, .loop__step, .faq__item {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  .header { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }

  /* Calmer logo glow on mobile (saves GPU) */
  .hero .brand-logo,
  .brand-logo,
  .product-card__logo {
    filter:
      drop-shadow(0 0 16px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 32px rgba(255, 255, 255, 0.25))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.20)) !important;
    animation: none !important;
  }
  .header__logo img {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.20)) !important;
    animation: none !important;
  }

  /* Disable starfield pseudo-element on small screens (perf) */
  main::before { display: none; }

  /* Cosmic drift animation — disable on mobile (battery) */
  body { animation: none !important; background-size: auto !important; }

  /* Section ::before overlay — softer on mobile */
  section::before { opacity: 0.4 !important; }
}

/* ===== Tiny phones (≤380px) — iPhone SE etc ===== */
@media (max-width: 380px) {
  .container { padding: 0 var(--space-2) !important; }
  .hero__title,
  .hero__title * { font-size: 1.65rem !important; }
  .hero .brand-logo, .brand-logo { height: 110px !important; }
  .product-card__logo { height: 110px !important; }
  .header__logo img { height: 48px !important; }
  .header__inner { height: 64px !important; }
  .stat__num { font-size: 1.85rem !important; }
}

/* ===== Landscape orientation on phones ===== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: var(--space-5) 0 !important; }
  .hero__inner { padding: 0 !important; }
  .hero .brand-logo, .brand-logo { height: 90px !important; }
}

/* ===== Touch device — bigger tap targets ===== */
@media (hover: none) and (pointer: coarse) {
  .header__nav a { padding: var(--space-3) 0; }
  .lang-toggle { min-height: 40px; min-width: 40px; }
  .menu-toggle { padding: var(--space-3); }
  .btn { min-height: 48px; }
  .card__link { padding: var(--space-2) 0; display: inline-block; }
  /* Disable hover-only tilt animations */
  .card:hover, .product-card:hover, .quote:hover, .price-card:hover, .loop__step:hover {
    transform: none !important;
  }
}

/* Safe-area for notched phones */
/* Safe-area for notched phones */
.header__inner {
  padding-inline: max(var(--space-5), env(safe-area-inset-left)) max(var(--space-5), env(safe-area-inset-right)) !important;
}

/* =====================================================
   RECOVERED SESSION FIXES — re-applied after restore
   ===================================================== */

/* --- HEADER: frosted glass --- */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(4, 1, 58, 0.55) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.header.is-scrolled {
  background: rgba(4, 1, 58, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
.header::before, .header::after { display: none !important; content: none !important; }
.header__nav.open {
  background: rgba(4, 1, 58, 0.92) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}

/* --- NAV underline: RTL-safe scaleX, sits exactly under hovered link --- */
.header__nav a {
  position: relative !important;
  padding: 8px 2px !important;
  transition: color 0.3s ease !important;
}
.header__nav a::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  inset-inline: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--brand-orange), #FFC560, var(--brand-sky)) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  pointer-events: none !important;
}
.header__nav a:hover::before,
.header__nav a.active::before { transform: scaleX(1) !important; }
.header__nav a.active::after { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .header__nav a { padding: var(--space-3) 2px !important; }
}

/* --- product-card CTA: readable orange instead of dark blue --- */
.product-card__cta {
  color: var(--brand-orange) !important;
  text-shadow: 0 0 10px rgba(255, 157, 0, 0.35) !important;
}
.product-card:hover .product-card__cta { color: var(--accent-light) !important; }

/* --- TAMKEEN logo: official SVG keeps white + green, glow only --- */
img[src*="logo-tamkeen"] {
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.42))
          drop-shadow(0 6px 16px rgba(0,0,0,0.30)) !important;
}

/* --- Kill any box behind logos --- */
.product-card__top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.product-card__top::after,
.product-card__top::before { display: none !important; content: none !important; }
.header__logo img,
.product-card__logo,
.product-card img.product-card__logo,
.brand-logo,
.hero__inner img.brand-logo,
.footer img[src*="logo-"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- LOGO sizing: official SVGs render tighter than the old PNGs --- */
.header__logo img { height: 52px !important; width: auto !important; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important; }
@media (max-width: 920px) { .header__logo img { height: 44px !important; } }
@media (max-width: 600px) { .header__logo img { height: 38px !important; } }

.product-card__logo,
.product-card img.product-card__logo {
  height: 60px !important;
  width: auto !important;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.40)) !important;
  animation: none !important;
}
.product-card:hover .product-card__logo { filter: drop-shadow(0 8px 22px rgba(0,0,0,0.50)) !important; }
@media (max-width: 600px) { .product-card__logo { height: 52px !important; } }

.brand-logo,
.hero__inner img.brand-logo,
.hero .brand-logo,
.hero--dark .brand-logo {
  height: 100px !important;
  width: auto !important;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.38)) !important;
  animation: none !important;
}
.brand-logo--sm { height: 88px !important; }
.brand-logo--lg { height: 170px !important; }
.brand-logo--inline { height: 56px !important; }
@media (max-width: 600px) {
  .brand-logo, .brand-logo--sm { height: 78px !important; }
  .brand-logo--lg { height: 130px !important; }
}
.footer img[src*="logo-noon"] { height: 64px !important; }

/* --- PHOTO GALLERY (restored structural CSS) --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-4);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease-soft, cubic-bezier(0.22,1,0.36,1)), border-color 0.3s ease, box-shadow 0.3s ease;
}
.gallery__item--lg { grid-column: span 2; grid-row: span 2; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(0.95);
  transition: transform 0.7s var(--ease-soft, cubic-bezier(0.22,1,0.36,1)), filter 0.4s ease;
}
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(1, 0, 72, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.gallery__cap {
  position: absolute;
  inset-inline-start: var(--space-4);
  bottom: var(--space-3);
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.gallery__item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 157, 0, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.gallery__item:hover img { transform: scale(1.06); filter: brightness(1) saturate(1.05); }
@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__item--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--lg { grid-column: span 1; }
}

/* --- TAMKEEN photo gallery (restored structural CSS) --- */
.tk-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: var(--space-4);
}
.tk-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.5s var(--ease-soft, cubic-bezier(0.22,1,0.36,1)), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tk-gallery__main { grid-column: span 2; grid-row: span 2; }
.tk-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) saturate(0.95);
  transition: transform 0.7s var(--ease-soft, cubic-bezier(0.22,1,0.36,1)), filter 0.4s ease;
}
.tk-gallery figure:hover { transform: translateY(-4px); border-color: rgba(33, 150, 82, 0.45); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.tk-gallery figure:hover img { transform: scale(1.05); filter: brightness(1) saturate(1.05); }
.tk-gallery figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, transparent 0%, rgba(1, 0, 72, 0.92) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .tk-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .tk-gallery__main { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 480px) {
  .tk-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .tk-gallery__main { grid-column: span 1; grid-row: span 1; }
}

/* --- RESTORED: missing helper/structural classes --- */
.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: -64px;
  z-index: 2000;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; }

.hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: brightness(0.62) saturate(1.06);
  pointer-events: none;
  z-index: 0;
}

.form__status {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

/* =====================================================
   PRODUCT CARDS — refined design + bigger logos
   (final override — supersedes earlier logo-sizing block)
   ===================================================== */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 55%, rgba(2,0,90,0.12) 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
}
.product-card::after, .product-card::before { display: none !important; content: none !important; }
.product-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(255,157,0,0.50) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,157,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 55%, rgba(255,157,0,0.07) 100%) !important;
}

.product-card__top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 36px 28px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
}
.product-card__top::after, .product-card__top::before { display: none !important; content: none !important; }

/* logos on the cards — noticeably bigger again */
.product-card__logo,
.product-card img.product-card__logo {
  height: 132px !important;
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.42)) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease !important;
}
.product-card:hover .product-card__logo {
  transform: scale(1.06) !important;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.52)) !important;
}
@media (max-width: 600px) {
  .product-card__logo { height: 104px !important; }
  .product-card__top { padding: 28px 20px 14px !important; }
}

/* badge readable on the transparent card top */
.product-card__badge {
  display: inline-block !important;
  background: rgba(255,157,0,0.16) !important;
  color: var(--brand-orange) !important;
  border: 1px solid rgba(255,157,0,0.38) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
}

.product-card__title {
  color: #fff !important;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.product-card__hook {
  color: rgba(255,255,255,0.80) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.product-card__body {
  padding: 4px 28px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 !important;
}
.product-card__body p {
  color: rgba(255,255,255,0.74) !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* --- HEADER + BRAND logos — bigger (overcorrected too small earlier) --- */
.header__logo img {
  height: 72px !important;
  width: auto !important;
  animation: none !important;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.38)) !important;
}
@media (max-width: 920px) { .header__logo img { height: 58px !important; } }
@media (max-width: 600px) { .header__logo img { height: 48px !important; } }

.brand-logo,
.hero__inner img.brand-logo,
.hero .brand-logo,
.hero--dark .brand-logo {
  height: 190px !important;
  width: auto !important;
  animation: none !important;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,0.40)) !important;
}
.brand-logo--sm { height: 150px !important; }
.brand-logo--lg { height: 260px !important; }
.brand-logo--inline { height: 80px !important; }
@media (max-width: 600px) {
  .brand-logo, .brand-logo--sm,
  .hero .brand-logo, .hero--dark .brand-logo { height: 130px !important; }
  .brand-logo--lg { height: 180px !important; }
}
.footer img[src*="logo-noon"] { height: 78px !important; }

/* =====================================================
   PRODUCT CARDS v2 — editorial redesign
   per-brand accent · consistent logo zone · right-aligned
   ===================================================== */
.grid--2 { gap: 26px !important; }

.product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: linear-gradient(158deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.02) 60%, rgba(2,0,95,0.14) 100%) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 38px rgba(0,0,0,0.32) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}
/* per-brand accent colour */
.product-card[href*="space"]   { --ca: #4DABFF; }
.product-card[href*="academy"] { --ca: #FF9D00; }
.product-card[href*="tamkeen"] { --ca: #2BB36A; }
.product-card[href*="donors"]  { --ca: #E0B450; }
.product-card { --ca: #FF9D00; }

/* accent bar across the top */
.product-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; inset-inline: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, var(--ca), transparent) !important;
  z-index: 3 !important;
}
/* big faint product number watermark */
.product-card::after {
  position: absolute !important;
  top: 6px !important; inset-inline-start: 24px !important;
  font-family: var(--font-display-en, 'Space Grotesk', sans-serif) !important;
  font-size: 5.5rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--ca) !important;
  opacity: 0.13 !important;
  pointer-events: none !important;
  display: block !important;
}
.product-card[href*="space"]::after   { content: '1' !important; }
.product-card[href*="academy"]::after { content: '2' !important; }
.product-card[href*="tamkeen"]::after { content: '3' !important; }
.product-card[href*="donors"]::after  { content: '4' !important; }

.product-card:hover {
  transform: translateY(-8px) !important;
  border-color: color-mix(in srgb, var(--ca) 55%, transparent) !important;
  box-shadow: 0 26px 60px rgba(0,0,0,0.46),
              0 0 0 1px color-mix(in srgb, var(--ca) 30%, transparent),
              0 0 50px color-mix(in srgb, var(--ca) 22%, transparent) !important;
}

/* logo zone — fixed height so ALL four logos read the same size */
.product-card__top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 40px 32px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: start !important;
  gap: 0 !important;
}
.product-card__top::before, .product-card__top::after { display: none !important; content: none !important; }

.product-card__logo,
.product-card img.product-card__logo {
  height: 84px !important;
  width: 100% !important;
  max-width: 240px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 0 22px !important;
  align-self: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.40)) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}
.product-card:hover .product-card__logo { transform: scale(1.05) !important; }

.product-card__badge {
  display: inline-block !important;
  align-self: flex-start !important;
  background: color-mix(in srgb, var(--ca) 16%, transparent) !important;
  color: var(--ca) !important;
  border: 1px solid color-mix(in srgb, var(--ca) 42%, transparent) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
}

.product-card__title {
  color: #fff !important;
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: start !important;
  margin: 0 0 10px !important;
}
.product-card__hook {
  color: var(--ca) !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-align: start !important;
  margin: 0 !important;
}

.product-card__body {
  padding: 18px 32px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  flex: 1 !important;
}
.product-card__body::before {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--ca), transparent) !important;
  opacity: 0.4 !important;
  margin-bottom: 2px !important;
}
.product-card__body p {
  color: rgba(255,255,255,0.74) !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  text-align: start !important;
  margin: 0 !important;
}

/* CTA — proper pill button in the brand accent, pinned to the bottom */
.product-card__cta {
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ca) 14%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--ca) 55%, transparent) !important;
  color: var(--ca) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-shadow: none !important;
  transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease !important;
}
.product-card:hover .product-card__cta {
  background: color-mix(in srgb, var(--ca) 26%, transparent) !important;
  gap: 12px !important;
}

@media (max-width: 600px) {
  .grid--2 { gap: 18px !important; }
  .product-card__top { padding: 30px 22px 6px !important; }
  .product-card__body { padding: 16px 22px 24px !important; }
  .product-card__logo { height: 70px !important; }
  .product-card::after { font-size: 4rem !important; }
}

/* =====================================================
   DIGITAL SPACE — animated ambient background
   ===================================================== */
/* JS-drawn starfield canvas -> fixed full-page layer */
#ambient-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -2 !important;
  pointer-events: none !important;
  display: block !important;
}
/* digital grid + drifting nebula glows — pure CSS, always on */
body::before {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 42% 38% at 16% 20%, rgba(77,171,255,0.11) 0%, transparent 60%),
    radial-gradient(ellipse 46% 42% at 84% 72%, rgba(255,157,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 36% 32% at 62% 10%, rgba(120,95,255,0.09) 0%, transparent 55%),
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  animation: digital-drift 40s linear infinite;
}
@keyframes digital-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 56px 56px, 56px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* =====================================================
   LOGOS — illuminated glow (follows the artwork, no box)
   ===================================================== */
.product-card__logo,
.product-card img.product-card__logo {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.55))
    drop-shadow(0 0 26px color-mix(in srgb, var(--ca) 60%, transparent))
    drop-shadow(0 6px 16px rgba(0,0,0,0.40)) !important;
}
.product-card:hover .product-card__logo {
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.78))
    drop-shadow(0 0 40px color-mix(in srgb, var(--ca) 82%, transparent))
    drop-shadow(0 8px 20px rgba(0,0,0,0.50)) !important;
}
.header__logo img {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.48))
    drop-shadow(0 0 22px rgba(255,200,95,0.38))
    drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important;
}
.brand-logo,
.hero__inner img.brand-logo,
.hero .brand-logo,
.hero--dark .brand-logo {
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,0.52))
    drop-shadow(0 0 46px rgba(255,200,95,0.32))
    drop-shadow(0 8px 24px rgba(0,0,0,0.40)) !important;
}

/* =====================================================
   LANGUAGE TOGGLE — clean polished pill (final override)
   ===================================================== */
.lang-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 157, 0, 0.12) !important;
  border: 1.5px solid rgba(255, 157, 0, 0.45) !important;
  color: #ffffff !important;
  font-family: var(--font-en, 'Inter', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-shadow: none !important;
  box-shadow: 0 2px 10px rgba(255, 157, 0, 0.12) !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.lang-toggle:hover {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 157, 0, 0.40) !important;
}
.lang-toggle:active { transform: translateY(0) !important; }

/* =====================================================
   VALUE LOOP — force a clean vertical list on phones/tablets
   (the circular diagram only works on wide desktop)
   ===================================================== */
@media (max-width: 900px) {
  .value-loop {
    max-width: 460px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }
  .value-loop__svg { display: none !important; }
  .value-loop__center {
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    order: -1 !important;
  }
  .value-loop__center img { animation: none !important; height: 70px !important; }
  .value-loop__step {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: start !important;
    padding: 14px 16px !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    border-radius: 16px !important;
    margin: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  }
  .value-loop__step.is-active { transform: none !important; }
  .value-loop__bubble {
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 1.15rem !important;
  }
  .value-loop__label { font-size: 0.96rem !important; text-shadow: none !important; }
}