/* ─────────────────────────────────────────────────────────────
   OSUS Journey Pages — Shared Premium Light Theme
   ---------------------------------------------------------------
   Single source of truth for every secondary journey page.
   This mirrors, class-for-class, the approved master reference
   "رائد الأعمال الطموح" (journeys/aspiring-entrepreneur/), which
   carries the same rules inline. Secondary pages link this file so
   their layout, spacing, section design, animation and visual
   rhythm are identical to the master — only the content differs.

   Header & footer inherit the shared site components (pages.css).
   Works in both RTL (ar) and LTR (en).
   ───────────────────────────────────────────────────────────── */

body { font-family: 'Tajawal', system-ui, sans-serif; }
#journey-challenges, #journey-steps, #journey-products { scroll-margin-top: 100px; }

/* ── Unified page canvas ───────────────────────────────────────── */
/* One continuous atmospheric background spanning all light sections */
#main-content {
  background:
    radial-gradient(ellipse at 14% 7%,   rgba(145,185,180,0.14) 0%, transparent 38%),
    radial-gradient(ellipse at 87% 5%,   rgba(255,237,210,0.70) 0%, transparent 44%),
    radial-gradient(ellipse at 5%  34%,  rgba(145,185,180,0.07) 0%, transparent 30%),
    radial-gradient(ellipse at 92% 40%,  rgba(255,220,178,0.22) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 57%,  rgba(255,150,25,0.04)  0%, transparent 32%),
    radial-gradient(ellipse at 6%  72%,  rgba(110,25,70,0.04)   0%, transparent 26%),
    radial-gradient(ellipse at 88% 67%,  rgba(145,185,180,0.055)0%, transparent 26%),
    #F8F7F3;
}

/* ── Shared section layout ─────────────────────────────────────── */
.jny-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sage, #91B9B4);
  margin-bottom: 0.75rem;
}
.jny-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--navy, #0F2837);
  margin-bottom: 0.9rem;
  line-height: 1.22;
}
.jny-section-sub {
  font-size: 1rem;
  color: #4a6070;
  line-height: 1.8;
  max-width: 54ch;
  margin-inline: auto;
}
/* Section heading blocks are centered (eyebrow + title + sub) */
.jny-section-header {
  margin-bottom: 3.5rem;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

/* ── 1. Intro ──────────────────────────────────────────────────── */
.jny-intro {
  position: relative;
  padding: var(--osus-hero-top) 0 var(--osus-hero-bottom);
  background: transparent;
  overflow: hidden;
}
.jny-intro__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.jny-intro__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.jny-intro__glow--1 {
  width: 680px; height: 540px;
  top: -160px; right: -60px;
  background: radial-gradient(circle, rgba(145,185,180,0.15) 0%, transparent 68%);
}
.jny-intro__glow--2 {
  width: 400px; height: 400px;
  bottom: -80px; left: 30%;
  background: radial-gradient(circle, rgba(255,150,25,0.1) 0%, transparent 65%);
}
.jny-intro__glow--3 {
  width: 300px; height: 300px;
  top: 20%; left: 5%;
  background: radial-gradient(circle, rgba(110,25,70,0.07) 0%, transparent 65%);
}
.jny-intro > .container { position: relative; z-index: 1; }

/* Two-column split: text + visual */
.jny-intro__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3.5rem;
  align-items: center;
}

.jny-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #8a9daa;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.jny-breadcrumb a {
  color: #8a9daa;
  text-decoration: none;
  transition: color 0.2s;
}
.jny-breadcrumb a:hover { color: var(--sage, #91B9B4); }

.jny-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(145,185,180,0.13);
  border: 1px solid rgba(145,185,180,0.38);
  color: #3d7a76;
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 1.85rem;
}
.jny-role-badge .category-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }

.jny-intro__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  color: var(--navy, #0F2837);
  line-height: 1.18;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.jny-title-accent {
  font-style: normal;
  color: var(--orange, #FF9619);
  display: inline;
}
.jny-intro__sub {
  font-size: 1.05rem;
  color: #4a6070;
  max-width: 50ch;
  line-height: 1.82;
  margin-bottom: 2.25rem;
}

/* Color-coded attribute pills */
.jny-attr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
}
.jny-attr {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.jny-attr--navy  { background: rgba(15,40,55,0.08);   color: var(--navy, #0F2837); }
.jny-attr--sage  { background: rgba(145,185,180,0.18); color: #2d6a65; }
.jny-attr--orange{ background: rgba(255,150,25,0.14);  color: #9a5500; }
.jny-attr--burg  { background: rgba(110,25,70,0.11);   color: #6E1946; }
.jny-attr__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jny-attr--navy  .jny-attr__dot { background: var(--navy, #0F2837); }
.jny-attr--sage  .jny-attr__dot { background: var(--sage, #91B9B4); }
.jny-attr--orange .jny-attr__dot { background: var(--orange, #FF9619); }
.jny-attr--burg  .jny-attr__dot { background: #6E1946; }

.jny-intro__ctas {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}
/* Page-nav primary button — navy */
.jny-btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.78rem 1.6rem;
  border-radius: 10px;
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.jny-btn-nav:hover { transform: translateY(-1px); }
.jny-btn-nav--navy {
  background: var(--navy, #0F2837);
  color: #fff;
  box-shadow: 0 2px 10px rgba(15,40,55,0.18);
}
.jny-btn-nav--navy:hover {
  background: #1a3d52;
  box-shadow: 0 6px 22px rgba(15,40,55,0.24);
}
.jny-btn-nav--sage {
  background: rgba(145,185,180,0.13);
  border: 1.5px solid rgba(145,185,180,0.5);
  color: #2d6a65;
}
.jny-btn-nav--sage:hover {
  background: rgba(145,185,180,0.22);
  border-color: rgba(145,185,180,0.8);
}
.jny-btn-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-style: normal;
  font-size: 0.9rem;
}
.jny-btn-nav:hover .jny-btn-arrow { transform: translateX(-3px); }

/* Phase strip — auto-fits any number of phases */
.jny-phase-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid rgba(15,40,55,0.09);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  max-width: 640px;
  margin-top: 3rem;
}
.jny-phase-item {
  padding: 0.85rem 0.5rem;
  text-align: center;
  border-inline-start: 1px solid rgba(15,40,55,0.07);
}
.jny-phase-item:first-child { border-inline-start: none; }
.jny-phase-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--orange, #FF9619);
  letter-spacing: 0.04em;
  margin-bottom: 0.22rem;
}
.jny-phase-label {
  display: block;
  font-size: 0.65rem;
  color: #6a8090;
  line-height: 1.3;
  font-weight: 500;
}

/* ── Journey Visual (left column) ─────────────────────────────── */
.jny-intro__visual {
  position: relative;
  align-self: stretch;
  min-height: 400px;
}
.jny-vis-orb {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.jny-vis-orb--1 {
  width: 260px; height: 260px;
  border: 1.5px dashed rgba(145,185,180,0.22);
  animation: jny-spin 35s linear infinite;
}
.jny-vis-orb--2 {
  width: 160px; height: 160px;
  border: 1px dashed rgba(255,150,25,0.18);
  animation: jny-spin 22s linear infinite reverse;
}
.jny-vis-cards {
  position: relative;
  height: 100%;
  padding: 1.25rem;
  transform: translateX(68px);
}
.jny-vis-card {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 4px 20px rgba(15,40,55,0.1), 0 1px 3px rgba(15,40,55,0.06);
  border: 1px solid rgba(15,40,55,0.08);
  width: 190px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.jny-vis-card--1 { top: 6%;  left: 8%;  animation: jny-float1 5.5s ease-in-out infinite; }
.jny-vis-card--2 { top: 30%; left: 36%; animation: jny-float2 5.5s ease-in-out infinite 1.4s; }
.jny-vis-card--3 { top: 55%; left: 5%;  animation: jny-float1 5.5s ease-in-out infinite 2.8s; }
.jny-vis-card--4 { top: 76%; left: 33%; animation: jny-float2 5.5s ease-in-out infinite 0.7s; }
.jny-vis-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.jny-vis-card--1 .jny-vis-dot { background: var(--navy, #0F2837); box-shadow: 0 0 8px rgba(15,40,55,0.35); }
.jny-vis-card--2 .jny-vis-dot { background: var(--sage, #91B9B4); box-shadow: 0 0 8px rgba(145,185,180,0.5); }
.jny-vis-card--3 .jny-vis-dot { background: var(--orange, #FF9619); box-shadow: 0 0 8px rgba(255,150,25,0.45); }
.jny-vis-card--4 .jny-vis-dot { background: #6E1946; box-shadow: 0 0 8px rgba(110,25,70,0.35); }
.jny-vis-card__num {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.18rem;
}
.jny-vis-card--1 .jny-vis-card__num { color: var(--navy, #0F2837); }
.jny-vis-card--2 .jny-vis-card__num { color: #3a8a85; }
.jny-vis-card--3 .jny-vis-card__num { color: #a05800; }
.jny-vis-card--4 .jny-vis-card__num { color: #6E1946; }
.jny-vis-card__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy, #0F2837);
  margin-bottom: 0.12rem;
  letter-spacing: -0.01em;
}
.jny-vis-card__phase {
  display: block;
  font-size: 0.72rem;
  color: #7a909a;
}
.jny-vis-line {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, rgba(145,185,180,0.5), rgba(145,185,180,0.15));
  left: 22%;
}
.jny-vis-line--1 { top: 18%; height: 16%; }
.jny-vis-line--2 { top: 42%; height: 16%; }
.jny-vis-line--3 { top: 66%; height: 13%; }

@keyframes jny-float1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes jny-float2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes jny-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jny-vis-card, .jny-vis-orb { animation: none; }
}

/* ── 2. Challenges ─────────────────────────────────────────────── */
.jny-challenges {
  padding: 6rem 2rem;
  background: transparent;
}
.jny-challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.jny-ch-card {
  background: rgba(255,255,255,0.88);
  border: 1.5px solid rgba(15,40,55,0.08);
  border-radius: 20px;
  padding: 2rem 2rem 2rem 2.25rem;
  transition: box-shadow 0.28s, border-color 0.28s, transform 0.28s;
  position: relative;
  overflow: hidden;
}
.jny-ch-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  border-radius: 0 20px 20px 0;
  transition: opacity 0.3s;
  opacity: 0;
}
.jny-ch-card:hover {
  box-shadow: 0 14px 44px rgba(15,40,55,0.09);
  border-color: rgba(15,40,55,0.13);
  transform: translateY(-3px);
}
.jny-ch-card:hover::after { opacity: 1; }
.jny-ch-card--sage::after  { background: var(--sage, #91B9B4); }
.jny-ch-card--orange::after { background: var(--orange, #FF9619); }
.jny-ch-card--navy::after  { background: var(--navy, #0F2837); }
.jny-ch-card--burg::after  { background: #6E1946; }

.jny-ch-icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.jny-ch-card--sage  .jny-ch-icon { background: rgba(145,185,180,0.14); }
.jny-ch-card--orange .jny-ch-icon { background: rgba(255,150,25,0.11); }
.jny-ch-card--navy  .jny-ch-icon { background: rgba(15,40,55,0.07); }
.jny-ch-card--burg  .jny-ch-icon { background: rgba(110,25,70,0.08); }

.jny-ch-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy, #0F2837);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.jny-ch-desc {
  font-size: 0.9rem;
  color: #5a7080;
  line-height: 1.72;
}

/* ── 3. Timeline ───────────────────────────────────────────────── */
.jny-timeline {
  padding: 6rem 2rem;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.jny-timeline::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: radial-gradient(ellipse at top left, rgba(145,185,180,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.jny-timeline > .container { position: relative; z-index: 1; }

.jny-steps-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  position: relative;
}
.jny-steps-row::after {
  content: '';
  position: absolute;
  top: 23px;
  right: 25%;
  left: 25%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(145,185,180,0.45) 10%,
    rgba(145,185,180,0.45) 90%,
    transparent 100%
  );
  z-index: 0;
}
.jny-steps-row + .jny-steps-row {
  margin-top: 1.75rem;
}
.jny-steps-row + .jny-steps-row::after { display: none; }

.jny-step {
  position: relative;
  z-index: 1;
}
.jny-step__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.jny-step__num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy, #0F2837);
  color: var(--orange, #FF9619);
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #F8F7F3, 0 0 0 5px rgba(145,185,180,0.28);
  transition: box-shadow 0.22s;
}
.jny-step:hover .jny-step__num {
  box-shadow: 0 0 0 4px #F8F7F3, 0 0 0 6px var(--sage, #91B9B4);
}
.jny-step__phase {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage, #91B9B4);
  line-height: 1.3;
}
.jny-step__card {
  background: #fff;
  border: 1px solid rgba(15,40,55,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: box-shadow 0.22s, border-color 0.22s;
}
.jny-step:hover .jny-step__card {
  box-shadow: 0 8px 30px rgba(15,40,55,0.09);
  border-color: rgba(145,185,180,0.3);
}
.jny-step__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy, #0F2837);
  margin-bottom: 0.55rem;
  line-height: 1.4;
}
.jny-step__badge {
  display: inline-block;
  border-radius: 100px;
  padding: 0.18rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  margin-bottom: 0.65rem;
}
.jny-badge--ai    { background: rgba(15,40,55,0.08);   color: var(--navy, #0F2837); }
.jny-badge--edu   { background: rgba(145,185,180,0.18); color: #2d6a65; }
.jny-badge--inc   { background: rgba(255,150,25,0.13);  color: #a05800; }
.jny-badge--lab   { background: rgba(110,25,70,0.09);   color: #6E1946; }
.jny-badge--acc   { background: rgba(255,150,25,0.16);  color: #925200; }
.jny-badge--fund  { background: rgba(110,25,70,0.12);   color: #5a1038; }
.jny-badge--mkt   { background: rgba(110,25,70,0.1);    color: #6E1946; }

.jny-step__desc {
  font-size: 0.84rem;
  color: #5a7080;
  line-height: 1.68;
}

/* ── 4. Products ───────────────────────────────────────────────── */
.jny-products {
  padding: 6rem 2rem;
  background: transparent;
}
.jny-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
/* Content-count variants (same card design, balanced layout) */
.jny-products-grid--duo  { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.jny-products-grid--quad { grid-template-columns: repeat(2, 1fr); }
.jny-prod-card {
  background: rgba(255,255,255,0.88);
  border: 1.5px solid rgba(15,40,55,0.08);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.28s, border-color 0.28s, transform 0.28s;
}
.jny-prod-card:hover {
  box-shadow: 0 16px 48px rgba(15,40,55,0.1);
  border-color: rgba(15,40,55,0.13);
  transform: translateY(-4px);
}
.jny-prod-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
  align-self: flex-start;
}
.pcat--ai   { background: rgba(15,40,55,0.08);   color: var(--navy, #0F2837); }
.pcat--edu  { background: rgba(145,185,180,0.18); color: #2d6a65; }
.pcat--inc  { background: rgba(255,150,25,0.14);  color: #9a5500; }
.pcat--mkt  { background: rgba(110,25,70,0.1);    color: #6E1946; }

.jny-prod-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy, #0F2837);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
  font-style: normal;
}
.jny-prod-desc {
  font-size: 0.875rem;
  color: #5a7080;
  line-height: 1.72;
  flex: 1;
  margin-bottom: 1.5rem;
}
.jny-prod-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy, #0F2837);
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}
.jny-prod-link:hover { color: var(--sage, #91B9B4); gap: 0.65rem; }

/* ── 5. Final CTA (light — unified with the page canvas) ───────── */
.jny-cta {
  position: relative;
  padding: 7rem 2rem;
  background: transparent;
  text-align: center;
  overflow: hidden;
}
.jny-cta::before {
  content: '';
  position: absolute;
  top: -45%; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 500px;
  background: radial-gradient(ellipse, rgba(255,150,25,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.jny-cta::after {
  content: '';
  position: absolute;
  bottom: -30%; right: 3%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(145,185,180,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.jny-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}
.jny-cta__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(145,185,180,0.13);
  border: 1px solid rgba(145,185,180,0.38);
  color: #3d7a76;
  padding: 0.38rem 1rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
  letter-spacing: 0.03em;
}
.jny-cta__pill .category-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
.jny-cta__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: var(--navy, #0F2837);
  margin-bottom: 1.2rem;
  line-height: 1.2;
  text-wrap: balance;
}
.jny-cta__sub {
  font-size: 1.05rem;
  color: #4a6070;
  line-height: 1.82;
  margin-bottom: 2.75rem;
  max-width: 48ch;
  margin-inline: auto;
}
.jny-cta__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.jny-cta-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.82rem 2rem;
  border: 2px solid rgba(15,40,55,0.22);
  color: var(--navy, #0F2837);
  background: transparent;
  border-radius: 10px;
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.jny-cta-outline:hover {
  border-color: rgba(15,40,55,0.45);
  background: rgba(15,40,55,0.04);
}

/* ── Scroll reveal ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-jny] {
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  [data-jny="up"]   { transform: translateY(26px); }
  [data-jny="fade"] { }
  [data-jny="scale"]{ transform: scale(0.96); }
  [data-jny].jny-in { opacity: 1; transform: none; }
  [data-jny-d="1"] { transition-delay: 0.08s; }
  [data-jny-d="2"] { transition-delay: 0.16s; }
  [data-jny-d="3"] { transition-delay: 0.24s; }
  [data-jny-d="4"] { transition-delay: 0.32s; }
  [data-jny-d="5"] { transition-delay: 0.40s; }
  [data-jny-d="6"] { transition-delay: 0.48s; }
}
@media (prefers-reduced-motion: reduce) {
  [data-jny] { opacity: 1; transform: none; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .jny-products-grid { grid-template-columns: repeat(2, 1fr); }
  .jny-intro__layout { grid-template-columns: 1fr 320px; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .jny-intro  { padding: 5rem 0 4rem; }
  .jny-challenges { padding: 4.5rem 1.5rem; }
  .jny-timeline   { padding: 4.5rem 1.5rem; }
  .jny-products   { padding: 4.5rem 1.5rem; }
  .jny-cta        { padding: 5rem 1.5rem; }
  .jny-intro__layout { grid-template-columns: 1fr; }
  .jny-intro__visual { display: none; }
  .jny-intro__title { font-size: 2.1rem; }
  .jny-challenges-grid { grid-template-columns: 1fr; }
  .jny-steps-row  { grid-template-columns: 1fr; gap: 1.25rem; }
  .jny-steps-row::after { display: none; }
  .jny-steps-row + .jny-steps-row { margin-top: 1.25rem; }
  .jny-products-grid,
  .jny-products-grid--duo,
  .jny-products-grid--quad { grid-template-columns: 1fr; max-width: none; }
  .jny-phase-strip   { display: none; }
  .jny-intro__ctas   { flex-direction: column; align-items: flex-start; }
  .jny-cta__buttons  { flex-direction: column; align-items: center; }
  .jny-cta-outline   { width: 100%; justify-content: center; max-width: 280px; }
  .jny-cta__sub      { margin-inline: 0; }
}
@media (max-width: 480px) {
  .jny-intro { padding: 4rem 0 3rem; }
  .jny-intro__title { font-size: 1.85rem; }
  .jny-intro__ctas { flex-direction: column; align-items: flex-start; }
  .jny-btn-nav { width: 100%; justify-content: center; }
}

/* ── Header: transparent at top, frosted glass on scroll ──── */
body:not(.home) .site-header.theme-light {
  transition: background 0.3s ease, backdrop-filter 0.3s ease,
              -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease,
              border-color 0.3s ease;
}
body:not(.home) .site-header.theme-light:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
/* Scrolled header uses the shared unified OSUS glass (pages.css) — no page override. */