/* ============================================================================
   JU GROUP — premium motion layer  (ju1.co)
   3D tilt + glare · magnetic buttons · scroll reveals · spotlight · counters
   Scoped to #ju-root so nothing leaks into Odoo's own UI.
   ========================================================================== */

#ju-root {
  --ju-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ju-gold: #f4d77a;
}

/* ── 1. 3D TILT CARDS ───────────────────────────────────────────────────── */
#ju-root .tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.55s var(--ju-ease), box-shadow 0.55s var(--ju-ease),
    border-color 0.4s ease;
  position: relative;
}
/* The site ships its own .reveal/.visible system that hard-resets transform,
   so the tilt is applied through a variable with !important to win cleanly. */
#ju-root .tilt.is-tilting {
  transition: transform 0.09s linear, box-shadow 0.4s var(--ju-ease),
    border-color 0.4s ease;
  transform: var(--tilt, none) !important;
}
#ju-root .tilt.is-tilting {
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(244, 215, 122, 0.22), 0 0 46px -12px rgba(123, 108, 229, 0.5);
  border-color: rgba(244, 215, 122, 0.32) !important;
  z-index: 5;
}

/* moving specular sheen that follows the cursor */
#ju-root .tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ju-ease);
  background: radial-gradient(
    340px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.16),
    rgba(123, 108, 229, 0.09) 38%,
    transparent 62%
  );
  z-index: 3;
  mix-blend-mode: screen;
}
#ju-root .tilt.is-tilting::after { opacity: 1; }

/* content lifts off the surface for real parallax depth */
#ju-root .tilt.is-tilting .lift {
  transform: translateZ(38px) !important;
  transition: transform 0.55s var(--ju-ease);
  transform-style: preserve-3d;
}
#ju-root .tilt.is-tilting .lift-sm {
  transform: translateZ(18px) !important;
  transition: transform 0.55s var(--ju-ease);
}
#ju-root .tilt img { transition: transform 0.7s var(--ju-ease); }
#ju-root .tilt.is-tilting img { transform: scale(1.055) !important; }

/* stage: perspective must sit on the PARENT of the tilting element */
#ju-root .tilt-stage { perspective: 1100px; }

/* ── 2. MAGNETIC BUTTONS ────────────────────────────────────────────────── */
#ju-root .mag {
  transition: transform 0.5s var(--ju-ease), box-shadow 0.4s var(--ju-ease),
    filter 0.3s ease;
  will-change: transform;
}
#ju-root .mag.is-mag { transition: transform 0.12s linear; }
#ju-root .btn-primary.mag.is-mag {
  box-shadow: 0 14px 34px -10px rgba(233, 30, 99, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  filter: brightness(1.06);
}

/* ── 3. SCROLL REVEAL ───────────────────────────────────────────────────── */
#ju-root .rv {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.85s var(--ju-ease), transform 0.85s var(--ju-ease);
  will-change: opacity, transform;
}
#ju-root .rv.in { opacity: 1; transform: none; }

/* ── 4. CURSOR SPOTLIGHT (section-level ambient glow) ───────────────────── */
#ju-root .spot { position: relative; isolation: isolate; }
#ju-root .spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  background: radial-gradient(
    620px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(123, 108, 229, 0.11),
    transparent 60%
  );
}
#ju-root .spot.spot-on::before { opacity: 1; }

/* ── 5. SHEEN SWEEP on featured surfaces ────────────────────────────────── */
#ju-root .sheen { position: relative; overflow: hidden; }
#ju-root .sheen > .sheen-bar {
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 42%;
  left: -60%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(244, 215, 122, 0.18) 55%,
    transparent
  );
  transform: skewX(-16deg);
  z-index: 4;
}
#ju-root .sheen:hover > .sheen-bar { animation: ju-sheen 0.95s var(--ju-ease); }
@keyframes ju-sheen { to { left: 130%; } }

/* ── 6. ACCESSIBILITY / TOUCH ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #ju-root .rv { opacity: 1 !important; transform: none !important; }
  #ju-root .tilt, #ju-root .mag, #ju-root .tilt img { transition: none !important; }
  #ju-root .sheen:hover > .sheen-bar { animation: none; }
}
/* pointer:coarse = phones/tablets — keep it flat and fast there */
@media (hover: none), (pointer: coarse) {
  #ju-root .tilt { transform: none !important; }
  #ju-root .tilt::after { display: none; }
  #ju-root .tilt .lift, #ju-root .tilt .lift-sm { transform: none; }
}

/* ============================================================================
   AMBIENT LIFE — motion that plays on its own while the page sits open.
   All GPU-only (transform/opacity), all killed by prefers-reduced-motion.
   ========================================================================== */

/* 1 · breathing aurora behind the hero */
#ju-root .ju-aurora {
  position: absolute; inset: -25% -15%; pointer-events: none; z-index: 0;
  filter: blur(90px); opacity: 0.5;
}
#ju-root .ju-aurora span {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform, opacity;
}
#ju-root .ju-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(79,195,247,.42), transparent 68%);
  animation: ju-drift-a 26s ease-in-out infinite;
}
#ju-root .ju-aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: 6%; top: 22%;
  background: radial-gradient(circle, rgba(233,30,99,.34), transparent 68%);
  animation: ju-drift-b 32s ease-in-out infinite;
}
#ju-root .ju-aurora span:nth-child(3) {
  width: 34vw; height: 34vw; left: 34%; bottom: 2%;
  background: radial-gradient(circle, rgba(123,108,229,.38), transparent 68%);
  animation: ju-drift-c 29s ease-in-out infinite;
}
@keyframes ju-drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.75 }
  33%     { transform: translate3d(7vw,4vh,0) scale(1.16); opacity:1 }
  66%     { transform: translate3d(-4vw,7vh,0) scale(.92); opacity:.62 }
}
@keyframes ju-drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); opacity:.68 }
  40%     { transform: translate3d(-8vw,6vh,0) scale(.88); opacity:1 }
  70%     { transform: translate3d(3vw,-5vh,0) scale(1.2); opacity:.55 }
}
@keyframes ju-drift-c {
  0%,100% { transform: translate3d(0,0,0) scale(.95); opacity:.6 }
  50%     { transform: translate3d(6vw,-7vh,0) scale(1.22); opacity:.95 }
}

/* 2 · floating particle field (slow rising motes) */
#ju-root .ju-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
#ju-root .ju-motes i {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: rgba(244,215,122,.85);
  box-shadow: 0 0 10px rgba(244,215,122,.7);
  animation: ju-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes ju-rise {
  0%   { transform: translate3d(0,0,0) scale(.6); opacity: 0 }
  12%  { opacity: .85 }
  80%  { opacity: .5 }
  100% { transform: translate3d(var(--dx,20px), -108vh, 0) scale(1.15); opacity: 0 }
}

/* 3 · animated gradient sweep across brand text */
#ju-root .gradient-text, #ju-root .hero-line-2 {
  background-size: 260% 100% !important;
  animation: ju-flow 9s ease-in-out infinite;
}
@keyframes ju-flow {
  0%,100% { background-position: 0% 50% }
  50%     { background-position: 100% 50% }
}

/* 4 · idle float on the hero product + company logos */
#ju-root .hero-product-img img { animation: ju-float 7.5s ease-in-out infinite; will-change: transform; }
@keyframes ju-float {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg) }
  50%     { transform: translate3d(0,-14px,0) rotate(-.7deg) }
}
#ju-root .company-mark { animation: ju-pulse 4.6s ease-in-out infinite; }
@keyframes ju-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(123,108,229,.42) }
  60%     { box-shadow: 0 0 0 14px rgba(123,108,229,0) }
}

/* 5 · slow shimmer that crosses featured cards on a timer */
#ju-root .auto-sheen { position: relative; overflow: hidden; }
#ju-root .auto-sheen::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 38%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10) 45%,
              rgba(244,215,122,.16) 55%, transparent);
  transform: skewX(-16deg); pointer-events: none; z-index: 4;
  animation: ju-auto-sheen 7s ease-in-out infinite;
}
@keyframes ju-auto-sheen {
  0%, 62%  { left: -50% }
  86%,100% { left: 140% }
}

/* 6 · live pulse dot for "open now" style badges */
#ju-root .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #38e08a; margin-inline-end: 7px; position: relative; vertical-align: middle;
}
#ju-root .live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #38e08a; animation: ju-ping 2.1s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ju-ping { 0% { transform: scale(1); opacity: .8 } 80%,100% { transform: scale(3.2); opacity: 0 } }

/* 7 · scroll-progress bar */
#ju-root .ju-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  background: linear-gradient(90deg,#4FC3F7,#7B6CE5 50%,#E91E63);
  z-index: 9999; pointer-events: none; box-shadow: 0 0 14px rgba(123,108,229,.6);
}
html[dir="rtl"] #ju-root .ju-progress { transform-origin: right center; }

/* 8 · marquee strip for the trust logos */
#ju-root .ju-marquee { overflow: hidden; position: relative; }
#ju-root .ju-marquee-track {
  display: flex; gap: 46px; width: max-content;
  animation: ju-marquee 34s linear infinite;
  will-change: transform;
}
#ju-root .ju-marquee:hover .ju-marquee-track { animation-play-state: paused; }
@keyframes ju-marquee { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }

@media (prefers-reduced-motion: reduce) {
  #ju-root .ju-aurora span, #ju-root .ju-motes i, #ju-root .gradient-text,
  #ju-root .hero-line-2, #ju-root .hero-product-img img, #ju-root .company-mark,
  #ju-root .auto-sheen::before, #ju-root .live-dot::after,
  #ju-root .ju-marquee-track { animation: none !important; }
  #ju-root .ju-motes, #ju-root .ju-aurora { display: none; }
}
@media (hover: none), (pointer: coarse) {
  #ju-root .ju-motes { display: none; }          /* save battery on phones */
  #ju-root .ju-aurora { opacity: .32; filter: blur(70px); }
}

/* ── COMPANY MARKS — real brand logos instead of the generic "JU" square ─── */
/* Both company cards must read off the SAME baseline: the wordmark is wide and
   short, the JU ONE "1" is tall and narrow. Fixing the CONTAINER height and
   centring inside it keeps the logos — and the titles under them — aligned. */
#ju-root .company-mark {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  margin-bottom: 14px;
}
#ju-root .company-mark-img {
  display: block;
  max-height: 44px;
  height: auto !important;
  width: auto !important;
  max-width: 140px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(79, 195, 247, 0.34));
  transition: transform 0.5s var(--ju-ease), filter 0.5s var(--ju-ease);
}
/* the "1" carries less optical mass per pixel, so it may run slightly taller */
#ju-root .company-mark-img.is-one {
  max-height: 56px;
  max-width: 58px;
  filter: drop-shadow(0 8px 24px rgba(155, 63, 160, 0.55));
}
#ju-root .company-card.is-tilting .company-mark-img {
  transform: scale(1.07) translateZ(26px);
  filter: drop-shadow(0 12px 30px rgba(123, 108, 229, 0.6));
}
/* the old square styling no longer applies to an <img> — keep the row tidy */


/* ============================================================================
   SPLIT-TEXT REVEAL — headings rise word-by-word out of a soft blur.
   Arabic is cursive: we split on WORDS only, never letters, so joins survive.
   ========================================================================== */
#ju-root .sr-w { display: inline-block; }
#ju-root .sr-i {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(9px);
  transition: opacity 0.85s cubic-bezier(.22,1,.36,1),
              transform 0.85s cubic-bezier(.22,1,.36,1),
              filter 0.85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}
#ju-root .sr.in .sr-i { opacity: 1; transform: none; filter: none; }

/* paragraphs / leads fade up from blur as one block */
#ju-root .br {
  opacity: 0; transform: translateY(20px); filter: blur(7px);
  transition: opacity .95s cubic-bezier(.22,1,.36,1),
              transform .95s cubic-bezier(.22,1,.36,1),
              filter .95s cubic-bezier(.22,1,.36,1);
}
#ju-root .br.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  #ju-root .sr-i, #ju-root .br {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* four partnership tracks now — 2×2 reads better than 3+1 */
@media (min-width: 1000px) {
  #ju-root .b2b-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── unified site chrome: our nav/footer replace Odoo's defaults everywhere ── */
#top nav.navbar { display: none !important; }
#wrapwrap > footer { display: none !important; }
#ju-root.ju-chrome { overflow: visible; }

/* The theme hides Odoo's #top (the branded nav used to live in the page body).
   Now that our nav is injected INTO #top, bring the shell back — but keep it
   transparent and free of Odoo's own navbar so only the JU nav shows. */
/* the theme's rule is `header#top{display:none!important}` (specificity 1,0,1),
   so ours must match or beat it — plain `#top` silently loses. */
header#top, #wrapwrap > header {
  display: block !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
/* only the JU chrome may live in the header — hide every Odoo widget there */
header#top > *:not(.ju-chrome) { display: none !important; }

/* the JU nav is position:fixed, so Odoo-native pages need clearance under it.
   Our own branded pages carry their own hero spacing, so skip them. */
#wrapwrap > main { padding-top: 76px !important; }
#wrapwrap > main:has(#ju-root) { padding-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   1 · BRAND TYPOGRAPHY — the English face used across JU documents
      (catalog + warranty certificates): Cinzel for display, Playfair for
      serif accents. Arabic stays Tajawal.
   ══════════════════════════════════════════════════════════════════════════ */
#ju-root {
  --ff-en: "Cinzel", "Playfair Display", Georgia, serif !important;
  --ff-en-body: "Inter", system-ui, sans-serif;
}
#ju-root .logo-title, #ju-root .nav-links a, #ju-root .btn, #ju-root .eyebrow,
#ju-root .stat-lbl, #ju-root .b2b-num, #ju-root .card-num, #ju-root .footer-name,
#ju-root .pp-eyebrow, #ju-root .pp-fact b, #ju-root .company-name,
#ju-root .section-title, #ju-root .hp-badge {
  font-family: var(--ff-en);
  letter-spacing: .04em;
}
#ju-root .pp-step b, #ju-root .b2b-num { font-family: "Playfair Display", serif; }

/* ══════════════════════════════════════════════════════════════════════════
   2 · ICONS COME ALIVE — the star/feature chips used to be completely static
   ══════════════════════════════════════════════════════════════════════════ */
#ju-root .hp-icon, #ju-root .pp-ico, #ju-root .pp-list li i,
#ju-root .company-mark-img, #ju-root .b2b-perks li::before {
  transition: transform .5s var(--ju-ease), box-shadow .5s var(--ju-ease),
              filter .5s var(--ju-ease);
}
/* slow idle shimmer so they never look dead */
#ju-root .hp-icon, #ju-root .pp-ico {
  animation: ju-icon-breathe 4.2s ease-in-out infinite;
  will-change: transform;
}
#ju-root .hp-feat:nth-child(2n) .hp-icon,
#ju-root .pp-card:nth-child(2n) .pp-ico { animation-delay: -1.4s; }
#ju-root .hp-feat:nth-child(3n) .hp-icon,
#ju-root .pp-card:nth-child(3n) .pp-ico { animation-delay: -2.8s; }
@keyframes ju-icon-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.06); }
}
/* hover: the icon pops, spins a touch and throws light */
#ju-root .hp-feat:hover .hp-icon,
#ju-root .pp-card:hover .pp-ico {
  transform: translateY(-5px) scale(1.18) rotate(-8deg);
  box-shadow: 0 14px 30px -8px rgba(123,108,229,.75);
  filter: brightness(1.14);
}
#ju-root .hp-feat {
  transition: transform .45s var(--ju-ease), background .45s ease, border-color .45s ease;
  cursor: default;
}
#ju-root .hp-feat:hover {
  transform: translateX(-6px);
  background: rgba(255,255,255,.06);
  border-color: rgba(244,215,122,.35) !important;
}
#ju-root .pp-list li:hover i {
  transform: scale(1.22) rotate(-10deg);
  background: var(--pp-grad, linear-gradient(135deg,#4FC3F7,#7B6CE5 50%,#E91E63));
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · PARTNERSHIP PAGES — richer, clearly clickable motion
   ══════════════════════════════════════════════════════════════════════════ */
#ju-root .pp-card {
  cursor: default;
  transition: transform .5s var(--ju-ease), border-color .45s ease,
              box-shadow .45s ease, background .45s ease;
}
#ju-root .pp-card:hover {
  border-color: rgba(244,215,122,.42) !important;
  box-shadow: 0 26px 56px -22px rgba(0,0,0,.8), 0 0 40px -14px rgba(123,108,229,.5);
  background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
}
/* gradient edge that draws itself in on hover */
#ju-root .pp-card::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--pp-grad, linear-gradient(135deg,#4FC3F7,#7B6CE5 50%,#E91E63));
  transform: scaleX(0); transform-origin: right center;
  transition: transform .55s var(--ju-ease);
}
#ju-root .pp-card:hover::after { transform: scaleX(1); }

#ju-root .pp-step { transition: transform .5s var(--ju-ease), border-color .4s ease, background .4s ease; }
#ju-root .pp-step:hover {
  transform: translateY(-7px);
  border-color: rgba(244,215,122,.38) !important;
  background: rgba(255,255,255,.055);
}
#ju-root .pp-step:hover b { color: rgba(244,215,122,.42); transition: color .45s ease; }

/* the primary CTA breathes so the eye lands on it */
#ju-root .pp-btn {
  position: relative; overflow: hidden;
  animation: ju-cta-pulse 3.4s ease-in-out infinite;
}
#ju-root .pp-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
#ju-root .pp-btn:hover::after { animation: ju-btn-sheen .85s var(--ju-ease); }
#ju-root .pp-btn:hover { animation-play-state: paused; }
@keyframes ju-btn-sheen { to { left: 130%; } }
@keyframes ju-cta-pulse {
  0%, 100% { box-shadow: 0 14px 34px -12px rgba(233,30,99,.55), 0 0 0 0 rgba(244,215,122,.36); }
  55%      { box-shadow: 0 16px 40px -12px rgba(233,30,99,.68), 0 0 0 13px rgba(244,215,122,0); }
}

/* form fields lift on focus so filling in feels responsive */
#ju-root .pp-field { transition: transform .35s var(--ju-ease); }
#ju-root .pp-field:focus-within { transform: translateY(-3px); }
#ju-root .pp-form:hover { border-color: rgba(244,215,122,.4); }

/* facts count in with a lift */
#ju-root .pp-fact { transition: transform .5s var(--ju-ease), border-color .4s ease; }
#ju-root .pp-fact:hover { transform: translateY(-6px); border-color: rgba(244,215,122,.38) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   4 · FOOTER LOGO FAMILY
   ══════════════════════════════════════════════════════════════════════════ */
#ju-root .ju-logo-family {
  display: flex; justify-content: center;
  padding: 22px 20px 6px; margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* one quiet framed panel — the marks alone, no labels */
#ju-root .lf-panel {
  display: inline-flex; align-items: center; gap: 26px;
  padding: 12px 26px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: border-color .45s var(--ju-ease), background .45s var(--ju-ease);
}
#ju-root .lf-panel:hover { border-color: rgba(244,215,122,.28); }
#ju-root .lf-sep {
  width: 1px; height: 20px; background: rgba(255,255,255,.13); display: inline-block;
}
#ju-root .ju-logo-family img {
  height: 24px !important; width: auto !important; max-width: 92px !important;
  object-fit: contain; opacity: .6; filter: grayscale(.4);
  transition: opacity .45s var(--ju-ease), filter .45s var(--ju-ease), transform .45s var(--ju-ease);
}
#ju-root .ju-logo-family img.is-tall { height: 30px !important; max-width: 32px !important; }
#ju-root .ju-logo-family img:hover { opacity: 1; filter: none; transform: translateY(-3px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  #ju-root .hp-icon, #ju-root .pp-ico, #ju-root .pp-btn { animation: none !important; }
}

#ju-root .ju-logo-family .lf-item {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 9px;
}
#ju-root .ju-logo-family figcaption {
  font-family: var(--ff-en); font-size: 9.5px; letter-spacing: .22em;
  color: rgba(197,201,227,.5); transition: color .4s ease;
}
#ju-root .ju-logo-family .lf-item:hover figcaption { color: var(--ju-gold); }

/* ── NAV: mark only. The "JU GROUP / مجموعة جي يو" lockup ate the space the
   menu needs, and the logo already carries the name. ─────────────────────── */
#ju-root .nav-logo .logo-text { display: none !important; }
#ju-root .nav-logo img { height: 42px !important; width: auto !important; }
#ju-root .nav-logo { gap: 0 !important; }
/* the freed space goes back to the menu so the items breathe */
#ju-root .nav-links { gap: 20px !important; }
#ju-root .nav-links a { padding-inline: 2px; }
#ju-root .nav-logo img { margin-inline-end: 18px; }

/* ── JU ONE mark in the chrome: a tall narrow glyph needs its own sizing so it
   reads at the same optical weight as the old wide wordmark. ─────────────── */
#ju-root .nav-logo img.is-one {
  height: 46px !important; width: auto !important; max-width: 46px !important;
  filter: drop-shadow(0 6px 18px rgba(155, 63, 160, .55));
}
#ju-root img.footer-logo.is-one {
  height: 54px !important; width: auto !important; max-width: 54px !important;
  filter: drop-shadow(0 8px 22px rgba(155, 63, 160, .5));
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · FOOTER POLISH
   · the JU One mark centres over the company name
   · column titles must READ as titles (everything below them is a link)
   · the logo family no longer floats alone — it carries the copyright line
   ══════════════════════════════════════════════════════════════════════════ */
#ju-root .footer-brand { text-align: center !important; }
#ju-root .footer-brand .footer-logo { display: block !important; margin: 4px auto 18px !important; }
#ju-root .footer-brand .footer-name { text-align: center !important; }
#ju-root .footer-brand .footer-tagline {
  text-align: center !important; margin-inline: auto !important; max-width: 340px;
}

/* headings: heavier, lighter in colour, and a gradient rule underneath so the
   eye separates "title" from "links" instantly. */
#ju-root .footer-title {
  position: relative;
  font-size: 17px !important; font-weight: 800 !important;
  color: #ffffff !important; opacity: 1 !important; letter-spacing: .2px !important;
  padding-bottom: 13px !important; margin-bottom: 17px !important;
}
#ju-root .footer-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 36px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #4fc3f7, #7b6ce5, #e91e63);
}
#ju-root .footer-col ul li a {
  display: inline-block; font-size: 14px; color: #b3b9d6 !important;
  transition: color .3s var(--ju-ease), transform .3s var(--ju-ease);
}
#ju-root .footer-col ul li a:hover {
  color: var(--ju-gold) !important; transform: translateX(-3px);
}

/* last row: marks + copyright inside one panel, not two orphan rows */
#ju-root .footer-last {
  display: flex; justify-content: center;
  border-top: none !important; margin-top: 4px !important;
  padding: 22px 0 34px !important;
}
#ju-root .footer-last .lf-panel {
  gap: 20px; padding: 11px 24px; flex-wrap: wrap; justify-content: center;
}
#ju-root .lf-div {
  width: 1px; height: 26px; display: inline-block; background: rgba(255,255,255,.14);
}
#ju-root .lf-copy {
  font-size: 12.2px; color: rgba(197,201,227,.6); white-space: nowrap;
}
@media (max-width: 620px) {
  #ju-root .lf-div { display: none; }
  #ju-root .lf-copy { white-space: normal; text-align: center; }
}

/* ── EN mode on the programme pages: the shell is pinned RTL for Arabic, so
   English needs the direction handed back or the copy reads right-aligned. ── */
html[data-lang="en"] #ju-root.pp,
html[data-lang="en"] #ju-root .pp { direction: ltr; text-align: left; }
html[data-lang="en"] #ju-root .pp-sec-head,
html[data-lang="en"] #ju-root .pp-usa,
html[data-lang="en"] #ju-root .pp-fact { text-align: center; }
html[data-lang="en"] #ju-root .pp input[type="tel"],
html[data-lang="en"] #ju-root .pp input[type="email"] { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   6 · CINEMATIC SCROLL
   Cards no longer just appear — they travel toward the reader, and the hero
   stays put while the page rises over it.
   ══════════════════════════════════════════════════════════════════════════ */

/* `overflow-x: hidden` turns an element into a scroll container, which kills
   `position: sticky` inside it. `clip` hides the same overflow WITHOUT that
   side effect — this one line is what makes the pinned hero possible. */
#ju-root, #wrapwrap, #wrap, main { overflow-x: clip !important; }
#ju-root { overflow-y: visible !important; }

.appr {
  transform: var(--appr, none);
  opacity: var(--appr-o, 1);
  filter: blur(var(--appr-b, 0px));
  will-change: transform, opacity, filter;
}
/* while the pointer is on a card, the 3D tilt owns it — no blur, full opacity */
.appr.is-tilting { filter: none !important; opacity: 1 !important; }

/* the hero holds its ground; every following section rides over it on its
   own opaque plane */
#ju-root .hero { position: sticky; top: 0; z-index: 0; }
#ju-root .hero-inner {
  transform: var(--hero-t, none);
  opacity: var(--hero-o, 1);
  filter: blur(var(--hero-b, 0px));
  will-change: transform, opacity, filter;
}
#ju-root .hero ~ section,
#ju-root .hero ~ div,
#ju-root .hero ~ footer {
  position: relative; z-index: 1;
  /* the pinned hero sits behind everything, so every following plane needs an
     opaque base. Some sections (.trust-bar) open their gradient on
     `transparent` via the `background` shorthand and out-specify us — hence
     !important. It only fills the colour layer; their gradient still paints. */
  background-color: var(--bg, #07091c) !important;
}

@media (prefers-reduced-motion: reduce) {
  .appr { transform: none !important; opacity: 1 !important; filter: none !important; }
  #ju-root .hero { position: static; }
  #ju-root .hero-inner { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* Phones: keep the travel and the fade, drop the blur — a live `filter` on
   many elements while scrolling is the one part that costs real frames. */
@media (hover: none), (pointer: coarse) {
  .appr { filter: none !important; }
  #ju-root .hero-inner { filter: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · DEEP SPACE
   A starfield that drifts as you scroll, a violet nebula bleeding up from
   every band, and a breathing orb behind the headline. JU's own violet
   (#9C5BE0 → #E91E63) instead of a borrowed palette.
   ══════════════════════════════════════════════════════════════════════════ */

.ju-stars {
  position: absolute; inset: -12% 0; overflow: hidden;
  pointer-events: none; z-index: 0;
  will-change: transform;
}
.ju-stars i {
  position: absolute; display: block; border-radius: 50%;
  background: #fff;
  animation: ju-twinkle var(--tw, 4s) ease-in-out infinite;
  animation-delay: var(--td, 0s);
  will-change: opacity, transform;
}
.ju-stars i.gold { background: #f4d77a; box-shadow: 0 0 6px rgba(244,215,122,.8); }
.ju-stars i.big  { box-shadow: 0 0 8px rgba(255,255,255,.85); }
@keyframes ju-twinkle {
  0%, 100% { opacity: var(--o1, .12); transform: scale(.8); }
  50%      { opacity: var(--o2, .85); transform: scale(1.2); }
}

/* violet light bleeding up from the floor of each band */
.ju-nebula {
  position: absolute; inset-inline: -5%; bottom: -18%; height: 78%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(52% 62% at 50% 100%, rgba(156, 91, 224, .20), transparent 72%),
    radial-gradient(38% 46% at 14% 100%, rgba(79, 195, 247, .10), transparent 70%),
    radial-gradient(34% 44% at 88% 100%, rgba(233, 30, 99, .11), transparent 70%);
  animation: ju-nebula-breathe 22s ease-in-out infinite;
}
@keyframes ju-nebula-breathe {
  0%, 100% { opacity: .8; transform: translateY(0) scale(1); }
  50%      { opacity: 1;  transform: translateY(-2%) scale(1.05); }
}

/* the orb behind the headline — the "planet" of the hero */
#ju-root .hero .ju-orb {
  position: absolute; left: 50%; top: 45%;
  width: min(64vw, 780px); height: min(64vw, 780px);
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(156, 91, 224, .34) 0%, rgba(123, 108, 229, .17) 40%, transparent 63%),
    radial-gradient(circle at 64% 38%, rgba(233, 30, 99, .17) 0%, transparent 56%),
    radial-gradient(circle at 34% 64%, rgba(79, 195, 247, .15) 0%, transparent 56%);
  filter: blur(26px);
  animation: ju-orb 19s ease-in-out infinite;
}
@keyframes ju-orb {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: .9; }
  50%      { transform: translate(-50%, -53%) scale(1.10) rotate(10deg); opacity: 1; }
}

/* content always rides above the space layers */
.ju-above { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ju-stars i, .ju-nebula, #ju-root .hero .ju-orb { animation: none !important; }
  .ju-stars i { opacity: .3; }
}
/* phones: fewer moving parts, no blur on the orb */
@media (hover: none), (pointer: coarse) {
  #ju-root .hero .ju-orb { filter: blur(18px); animation-duration: 26s; }
}

/* content now travels underneath the navbar far more often (the hero is pinned
   and every band carries its own light), so the glass needs to be denser. */
#ju-root .nav.scrolled { background: rgba(7, 9, 28, .97) !important; }