/* ============================================================
   VIJAYPATH — Branch-specific layout overrides
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   HERO — premium two-column composition
   Left: eyebrow / headline / copy / CTAs / trust row
   Right: one dominant portrait, two overlapping supporting cards, two badges
   Background: three blurred colour fields + a masked dot grid, all decorative.
   ══════════════════════════════════════════════════════════════════════════ */
.rc-app .hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
  color: var(--vp-ink);
  /* Top pad stays small: the fixed .site-topbar already sits above this. */
  padding: 30px 36px 64px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbff 45%, #fff6f3 100%);
}
.rc-app .hero::after{ display:none }
.rc-app .hero__bg, .rc-app .hero__wave, .rc-app .hero__note{ display:none }

/* ── decorative background ── */
.rc-app .hero__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.rc-app .hero__blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5 }
.rc-app .hero__blob--purple{ width:520px; height:520px; top:-180px; left:-140px;
  background:radial-gradient(circle, rgba(93,56,222,.38), transparent 70%);
  animation: heroDrift 22s ease-in-out infinite; }
.rc-app .hero__blob--orange{ width:460px; height:460px; bottom:-200px; right:-120px;
  background:radial-gradient(circle, rgba(255,80,40,.30), transparent 70%);
  animation: heroDrift 26s ease-in-out infinite reverse; }
.rc-app .hero__blob--cyan{ width:380px; height:380px; top:38%; right:34%;
  background:radial-gradient(circle, rgba(10,199,229,.22), transparent 70%);
  animation: heroDrift 30s ease-in-out infinite; }
.rc-app .hero__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(93,56,222,.16) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%, #000, transparent 75%);
          mask-image:radial-gradient(70% 60% at 30% 40%, #000, transparent 75%);
  opacity:.55;
}
@keyframes heroDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(26px,-22px,0) scale(1.06) }
}

/* ── layout ── */
.rc-app .hero__inner{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.rc-app .hero__content{ z-index:1; animation: heroRise .7s cubic-bezier(.22,.7,.24,1) both }

/* ── eyebrow ── */
.rc-app .hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; margin-bottom:18px; border-radius:999px;
  background:rgba(93,56,222,.08); border:1px solid rgba(93,56,222,.16);
  color:var(--navy); font-size:12.5px; font-weight:600; letter-spacing:.3px;
}
.rc-app .hero__eyebrow-dot{ width:7px; height:7px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 4px rgba(255,80,40,.18) }

/* ── headline ── */
.rc-app .hero__title{
  font-size: clamp(34px, 4.9vw, 68px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--vp-ink);
  margin: 0 0 18px;
  text-align: left;
  text-shadow: none; -webkit-text-fill-color: unset;
  background: none; -webkit-background-clip: unset;
}
.rc-app .hero__title .highlight{
  color: var(--brand-accent);
  background:none; -webkit-background-clip:unset; -webkit-text-fill-color:unset;
}

.rc-app .hero__subtitle{
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  line-height: 1.72;
  color: var(--vp-muted);
  max-width: 540px;
  margin: 0 0 28px;
  text-align: left;
  opacity: 1;
}

/* ── CTAs: three deliberately different weights ── */
.rc-app .hero__course-btns{
  display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin:0 0 26px;
}
.rc-app .hero__course-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 21px; border-radius:var(--radius-pill);
  font-size:15.5px; font-weight:500; text-decoration:none;
  transition:transform .28s cubic-bezier(.22,.7,.24,1), box-shadow .28s, background .28s, border-color .28s, color .28s;
}
.rc-app .hero__course-btn svg{ width:18px; height:18px; flex:none }

.rc-app .hero__course-btn--primary{
  color:#fff; border:1px solid transparent;
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  box-shadow:0 14px 30px -14px rgba(255,80,40,.95), inset 0 1px 0 rgba(255,255,255,.28);
}
.rc-app .hero__course-btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -16px rgba(255,80,40,1), inset 0 1px 0 rgba(255,255,255,.34);
}
.rc-app .hero__course-btn-arrow{ width:16px; height:16px; opacity:.85;
  transition:transform .28s cubic-bezier(.22,.7,.24,1) }
.rc-app .hero__course-btn--primary:hover .hero__course-btn-arrow{ transform:translateX(4px) }

.rc-app .hero__course-btn--outline{
  background:rgba(255,255,255,.86); color:var(--vp-ink);
  border:1px solid rgba(15,23,42,.14);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -18px rgba(30,39,47,.6);
}
.rc-app .hero__course-btn--outline:hover{
  transform:translateY(-3px);
  border-color:var(--navy); color:var(--navy);
  box-shadow:0 18px 34px -18px rgba(93,56,222,.7);
}

/* third action reads as a link, so the hierarchy is unmistakable */
.rc-app .hero__course-btn--ghost{
  background:none; border:1px solid transparent; color:var(--navy);
  font-weight:600; padding-left:10px; padding-right:10px;
}
.rc-app .hero__course-btn--ghost svg{ width:16px; height:16px;
  transition:transform .28s cubic-bezier(.22,.7,.24,1) }
.rc-app .hero__course-btn--ghost:hover{ color:var(--orange) }
.rc-app .hero__course-btn--ghost:hover svg{ transform:translateX(4px) }

/* ── trust row: qualitative, no invented numbers ── */
.rc-app .hero__trust{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 18px;
}
.rc-app .hero__trust li{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:500; color:var(--vp-muted);
}
.rc-app .hero__trust svg{ width:14px; height:14px; color:#16a34a; flex:none }

/* ══ right: image composition ══ */
.rc-app .hero__photos{
  position:relative;
  height:clamp(400px, 40vw, 540px);
  animation: heroRise .8s .1s cubic-bezier(.22,.7,.24,1) both;
}
.rc-app .hero__photo-card{
  position:absolute; margin:0; overflow:hidden;
  border-radius:24px; background:#fff;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 60px -28px rgba(30,39,47,.5), 0 6px 18px -12px rgba(93,56,222,.35);
  transition:transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s;
}
.rc-app .hero__photo-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.rc-app .hero__photo-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 40px 70px -28px rgba(30,39,47,.6), 0 8px 22px -12px rgba(93,56,222,.45);
}

/* dominant portrait */
.rc-app .hero__photo-card--main{
  top:0; right:2%; width:56%; height:82%;
  border-radius:28px;
  animation: heroPop .7s .15s cubic-bezier(.22,.7,.24,1) both;
}
/* object-position keeps faces high in frame so cover never crops them */
.rc-app .hero__photo-card--main img{ object-position:50% 18% }

.rc-app .hero__photo-card--boy{
  bottom:0; left:6%; width:40%; height:56%;
  transform:rotate(-1.5deg);
  animation: heroPop .7s .3s cubic-bezier(.22,.7,.24,1) both;
}
.rc-app .hero__photo-card--boy img{ object-position:50% 12% }
.rc-app .hero__photo-card--boy:hover{ transform:translateY(-6px) rotate(-1.5deg) scale(1.015) }

.rc-app .hero__photo-card--grp{
  top:6%; left:0; width:34%; height:26%;
  transform:rotate(1.5deg);
  animation: heroPop .7s .45s cubic-bezier(.22,.7,.24,1) both;
}
.rc-app .hero__photo-card--grp:hover{ transform:translateY(-6px) rotate(1.5deg) scale(1.015) }

/* ── floating badges ── */
.rc-app .hero__badge{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:16px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border:1px solid rgba(93,56,222,.12);
  box-shadow:0 18px 38px -20px rgba(30,39,47,.55);
  transition:transform .3s cubic-bezier(.22,.7,.24,1), box-shadow .3s;
}
.rc-app .hero__badge:hover{ transform:translateY(-4px);
  box-shadow:0 26px 46px -20px rgba(30,39,47,.6) }
.rc-app .hero__badge-ico{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none;
}
.rc-app .hero__badge-ico svg{ width:17px; height:17px }
.rc-app .hero__badge-txt{ display:flex; flex-direction:column; line-height:1.25 }
.rc-app .hero__badge-txt strong{ font-size:13.5px; font-weight:600; color:var(--vp-ink) }
.rc-app .hero__badge-txt small{ font-size:11.5px; color:var(--vp-muted) }

.rc-app .hero__badge--trophy{ top:12%; right:-1%;
  animation: heroPop .6s .6s cubic-bezier(.22,.7,.24,1) both, heroFloat 6s 1.3s ease-in-out infinite }
.rc-app .hero__badge--trophy .hero__badge-ico{
  background:linear-gradient(135deg, var(--orange), var(--orange-dark)) }
.rc-app .hero__badge--book{ bottom:12%; right:6%;
  animation: heroPop .6s .75s cubic-bezier(.22,.7,.24,1) both, heroFloat 7s 1.6s ease-in-out infinite reverse }
.rc-app .hero__badge--book .hero__badge-ico{
  background:linear-gradient(135deg, var(--navy-dark), var(--navy)) }

/* ── entrance / idle motion ── */
@keyframes heroRise { from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes heroPop  { from{ opacity:0; transform:translateY(22px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes heroFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* Motion is decoration here — everything stays legible without it. */
@media (prefers-reduced-motion: reduce){
  .rc-app .hero__content,
  .rc-app .hero__photos,
  .rc-app .hero__photo-card,
  .rc-app .hero__badge,
  .rc-app .hero__blob{ animation:none !important }
  .rc-app .hero__course-btn:hover,
  .rc-app .hero__photo-card:hover,
  .rc-app .hero__badge:hover{ transform:none }
}


/* ── Scrolling strip ── */
.rc-app .vp-strip{
  background: var(--brand-primary);
  color: #fff;
  padding: 12px 36px;
  text-align: center;
  font-size: 16px;
}
.rc-app .vp-strip a{ color: #fff; text-decoration: underline; margin-left: 8px }

/* ── Stats section ── */
.rc-app .vp-stats{ padding: 60px 36px; background: #fff }
.rc-app .vp-stats h2{ text-align: center; font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--vp-ink); margin-bottom: 12px }
.rc-app .vp-stats p{ text-align: center; color: var(--vp-muted); font-size: 18px; margin-bottom: 40px }
.rc-app .stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.rc-app .stat-card{
  background: var(--stat-card-grain);
  border-radius: 15px;
  padding: 30px;
  text-align: left;
}
.rc-app .stat-card .stat-icon{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
  color: var(--brand-accent);
}
.rc-app .stat-card .stat-icon svg{ width: 22px; height: 22px }

/* ── Icon accent system ──────────────────────────────────────────────────
   One icon family throughout: the project's existing inline Lucide-style
   strokes (24x24, stroke-width 2, currentColor). No icon font is loaded and
   none is added — only the CONTAINER treatment changes here.

   Accent alternates purple / orange across cards so the grid reads as a set
   rather than one repeated colour, while staying inside the brand palette.
   ──────────────────────────────────────────────────────────────────────── */
.rc-app .stat-grid--5 .stat-card:nth-child(odd) .stat-icon{
  color: var(--navy);
  background: rgba(93,56,222,.09);
  box-shadow: 0 8px 18px -10px rgba(93,56,222,.65), inset 0 0 0 1px rgba(93,56,222,.12);
}
.rc-app .stat-grid--5 .stat-card:nth-child(even) .stat-icon{
  color: var(--orange);
  background: rgba(255,80,40,.09);
  box-shadow: 0 8px 18px -10px rgba(255,80,40,.7), inset 0 0 0 1px rgba(255,80,40,.12);
}
/* Size/radius are set in the STATS CARDS block later in this file — it declares the
   same selector at the same specificity and wins by order. Only the transition
   lives here. */
.rc-app .stat-grid--5 .stat-card .stat-icon{
  transition: transform .26s cubic-bezier(.22,.7,.24,1), box-shadow .26s;
}
.rc-app .stat-grid--5 .stat-card:hover .stat-icon{ transform: scale(1.05) }
.rc-app .stat-grid--5 .stat-card:nth-child(odd):hover .stat-icon{
  box-shadow: 0 14px 26px -10px rgba(93,56,222,.85), inset 0 0 0 1px rgba(93,56,222,.2) }
.rc-app .stat-grid--5 .stat-card:nth-child(even):hover .stat-icon{
  box-shadow: 0 14px 26px -10px rgba(255,80,40,.9), inset 0 0 0 1px rgba(255,80,40,.2) }
.rc-app .stat-card h3{ font-size: clamp(28px, 3.5vw, 40px); font-weight: 500; color: var(--vp-ink); margin-bottom: 4px }
.rc-app .stat-card p{ text-align: left; color: var(--vp-muted); font-size: 16px; margin: 0 }

/* ── Prepare / Features section ── */
.rc-app .vp-prepare{ padding: 80px 36px; background: var(--prepare-grain) }
.rc-app .vp-prepare h2{ font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--vp-ink); margin-bottom: 12px }
.rc-app .feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 30px auto 0;
}
.rc-app .feature-card{
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  height: 100%;
}
.rc-app .feature-card .feature-ico{
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 10px;
  background: #fff3f3;
  color: var(--brand-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rc-app .feature-card .feature-ico svg{ width: 28px; height: 28px }

/* Same accent system as the stat tiles, so both sections read as one family. */
.rc-app .feature-card{
  border: 1px solid rgba(93,56,222,.08);
  transition: transform .26s cubic-bezier(.22,.7,.24,1), box-shadow .26s, border-color .26s;
}
.rc-app .feature-card .feature-ico{
  width: 58px; height: 58px; min-width: 58px; border-radius: 16px;
  transition: transform .26s cubic-bezier(.22,.7,.24,1), box-shadow .26s;
}
.rc-app .feature-card .feature-ico svg{ width: 27px; height: 27px }
.rc-app .feature-grid .feature-card:nth-child(odd) .feature-ico{
  color: var(--navy);
  background: rgba(93,56,222,.09);
  box-shadow: 0 10px 20px -12px rgba(93,56,222,.7), inset 0 0 0 1px rgba(93,56,222,.12);
}
.rc-app .feature-grid .feature-card:nth-child(even) .feature-ico{
  color: var(--orange);
  background: rgba(255,80,40,.09);
  box-shadow: 0 10px 20px -12px rgba(255,80,40,.75), inset 0 0 0 1px rgba(255,80,40,.12);
}
.rc-app .feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(93,56,222,.16);
  box-shadow: 0 22px 44px -26px rgba(67,38,176,.55);
}
.rc-app .feature-card:hover .feature-ico{ transform: scale(1.05) }
.rc-app .feature-grid .feature-card:nth-child(odd):hover .feature-ico{
  box-shadow: 0 16px 28px -12px rgba(93,56,222,.9), inset 0 0 0 1px rgba(93,56,222,.2) }
.rc-app .feature-grid .feature-card:nth-child(even):hover .feature-ico{
  box-shadow: 0 16px 28px -12px rgba(255,80,40,.95), inset 0 0 0 1px rgba(255,80,40,.2) }

@media (prefers-reduced-motion: reduce){
  .rc-app .feature-card:hover,
  .rc-app .feature-card:hover .feature-ico,
  .rc-app .stat-grid--5 .stat-card:hover .stat-icon{ transform: none }
}
.rc-app .feature-card h5{ font-size: 18px; font-weight: 500; color: var(--vp-ink); margin-bottom: 4px }
.rc-app .feature-card p{ font-size: 14px; color: var(--vp-muted); line-height: 1.5; margin: 0 }

/* ══════════════════════════════════════════════════════════════════════════
   WHY CHOOSE US — dark premium band
   Centred header (eyebrow / heading / subtitle) over a 4-up glass card row.
   Background: two blurred colour fields, a masked dot grid and one soft arc.
   ══════════════════════════════════════════════════════════════════════════ */
.rc-app .vp-why{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 6.5vw, 92px) clamp(20px, 4vw, 36px);
  background: var(--vp-ink);
  color: #e8e4f5;
}

/* ── decorative depth ── */
.rc-app .vp-why__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.rc-app .vp-why__aura{ position:absolute; border-radius:50%; filter:blur(100px) }
.rc-app .vp-why__aura--purple{
  width:560px; height:560px; top:-200px; left:-160px;
  background:radial-gradient(circle, rgba(122,92,240,.40), transparent 70%);
}
.rc-app .vp-why__aura--orange{
  width:420px; height:420px; bottom:-180px; right:-120px;
  background:radial-gradient(circle, rgba(255,80,40,.26), transparent 70%);
}
.rc-app .vp-why__grid-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000, transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 35%, #000, transparent 78%);
}
/* one wide, very faint curve for depth behind the cards */
.rc-app .vp-why__arc{
  position:absolute; left:50%; top:52%; transform:translateX(-50%);
  width:130%; aspect-ratio:2.4/1; border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  border-bottom-color:transparent;
}

/* ── layout ── */
.rc-app .vp-why__inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto }

/* ── header ── */
.rc-app .vp-why__head{ text-align:center; max-width:760px; margin:0 auto clamp(34px, 4vw, 52px) }
.rc-app .vp-why__eyebrow{
  display:inline-block; margin-bottom:14px;
  padding:7px 16px; border-radius:999px;
  background:rgba(122,92,240,.18); border:1px solid rgba(122,92,240,.34);
  color:#cbbcff;
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
}
.rc-app .vp-why h2{
  color:#fff;
  font-size:clamp(28px, 3.6vw, 44px); font-weight:600;
  line-height:1.14; letter-spacing:-.015em; margin:0 0 12px;
}
.rc-app .vp-why__accent{
  background:linear-gradient(100deg, #b9a6f5, var(--orange, #ff5028));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.rc-app .vp-why .why-sub{
  color:#b9b1d6; font-size:clamp(15px, 1.25vw, 16px); line-height:1.7; margin:0;
}

/* ── cards: 4-up, never one orphan on a second row ── */
.rc-app .why-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}
.rc-app .why-item{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 24px 28px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.9);
  transition:transform .26s cubic-bezier(.22,.7,.24,1), box-shadow .26s,
             border-color .26s, background .26s;
}
/* bottom accent, revealed on hover */
.rc-app .why-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  background:linear-gradient(90deg, #7a5cf0, var(--orange, #ff5028));
  transform:scaleX(0); transform-origin:left;
  transition:transform .34s cubic-bezier(.22,.7,.24,1);
}
.rc-app .why-item:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 32px 60px -30px rgba(0,0,0,1);
}
.rc-app .why-item:hover::after{ transform:scaleX(1) }

/* ── icon container: alternating purple / orange ── */
.rc-app .why-item .why-ico{
  width:56px; height:56px; min-width:56px;
  border-radius:16px;
  display:grid; place-items:center;
  margin-bottom:18px;
  transition:transform .26s cubic-bezier(.22,.7,.24,1), box-shadow .26s;
}
.rc-app .why-grid .why-item:nth-child(odd) .why-ico{
  color:#cbbcff;
  background:rgba(122,92,240,.20);
  box-shadow:inset 0 0 0 1px rgba(122,92,240,.30), 0 10px 22px -14px rgba(122,92,240,.9);
}
.rc-app .why-grid .why-item:nth-child(even) .why-ico{
  color:#ffb4a1;
  background:rgba(255,80,40,.18);
  box-shadow:inset 0 0 0 1px rgba(255,80,40,.30), 0 10px 22px -14px rgba(255,80,40,.9);
}
.rc-app .why-item:hover .why-ico{ transform:scale(1.05) }

/* ── card copy ── */
.rc-app .vp-why .why-item h5{
  color:#fff; font-size:17.5px; font-weight:600; line-height:1.3; margin:0 0 8px;
}
.rc-app .vp-why .why-item p{
  color:#b9b1d6; font-size:14px; line-height:1.68; margin:0;
}

/* ── responsive ── */
@media (max-width: 1080px){
  .rc-app .why-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 620px){
  .rc-app .vp-why{ padding:clamp(44px, 12vw, 64px) 18px }
  .rc-app .why-grid{ grid-template-columns:1fr; gap:14px }
  .rc-app .why-item{ padding:22px 20px 24px }
  .rc-app .why-item .why-ico{ width:50px; height:50px; min-width:50px; margin-bottom:14px }
  .rc-app .vp-why .why-item h5{ font-size:16.5px }
  .rc-app .vp-why__arc{ display:none }
}

@media (prefers-reduced-motion: reduce){
  .rc-app .why-item:hover,
  .rc-app .why-item:hover .why-ico{ transform:none }
  .rc-app .why-item::after{ transition:none }
}

/* Outranks the global SVG clamp in responsive-normalize.css — see icon notes. */
.rc-app .vp-why .why-grid .why-item .why-ico svg:not([width]):not([data-large]):not(.svg-noclamp){
  width: 26px; height: 26px; flex: none;
}

/* ── Footer CTA ── */
.rc-app .vp-footer-cta{
  padding: 80px 36px;
  background: var(--footer-cta-grain);
}
.rc-app .vp-footer-cta h2{ font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--vp-ink) }
.rc-app .vp-footer-cta p{ color: var(--vp-muted); font-size: 18px; margin-bottom: 30px }

/* ── Courses section override ── */
.rc-app .trending-section{ background: var(--courses-grain) }

/* ── Testimonial cards ── */
.rc-app .tm-card{
  background: var(--testimonial-grain);
  border-radius: 15px;
}

/* ── Header nav overrides ── */
.rc-app .header__link{
  font-weight: 500;
}
.rc-app .header__logo img{
  height: 28px;
  width: auto;
}

/* ── Footer overrides ── */
.rc-app .footer__tagline{
  color: #cfcadf;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 340px;
}
.rc-app .footer__social{
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.rc-app .footer__social a{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: grid;
  place-items: center;
  color: #cfcadf;
  transition: all .25s ease;
}
.rc-app .footer__social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,80,40,.12);
}
.rc-app .footer__social a svg{ width: 18px; height: 18px }
.rc-app .footer__bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
}

/* ── Mobile responsive ── */
@media (max-width: 991px) {
  .rc-app .hero__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rc-app .hero__title{ text-align: center }
  .rc-app .hero__subtitle{ text-align: center; max-width: 100%; margin: 0 auto 26px }
  .rc-app .hero__course-btns{ justify-content: center }
  .rc-app .hero__eyebrow,
  .rc-app .hero__trust{ justify-content: center }
  /* Order matches the brief: headline, copy, CTA, trust, then the images.

     width:100% is LOAD-BEARING, not tidiness. The auto left/right margins below
     cancel this grid item's default justify-self:stretch, so the box falls back to
     shrink-to-fit — and every child here is position:absolute, so there is no
     in-flow content to shrink-wrap. It resolved to width:0, which collapsed the
     cards (sized in % of the parent) to 2px slivers: the images were loading
     perfectly but rendered as invisible hairlines, leaving a tall empty band with
     only the trophy badge floating in it. */
  .rc-app .hero__photos{
    width: 100%;
    max-width: 520px; margin: 34px auto 0;
    height: clamp(340px, 62vw, 430px);
  }
  /* The trophy badge sits outside the card edge on desktop; pull both inside so
     nothing can push the page wider once the column stacks. */
  .rc-app .hero__badge--trophy{ right: 2% }
  .rc-app .hero__badge--book{ right: 4% }
  .rc-app .stat-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
  .rc-app .feature-grid{ grid-template-columns: 1fr }
  /* .why-grid intentionally omitted: the Why section owns its own 4->2->1
     breakpoints above (1080px / 620px). A 1fr rule here would win on order
     and collapse the tablet layout to a single column. */
}
@media (max-width: 575px) {
  .rc-app .hero{ padding: 22px 18px 44px }
  .rc-app .hero__course-btn{ width: 100%; justify-content: center }
  .rc-app .hero__course-btn--ghost{ width: auto }
  .rc-app .hero__trust{ gap: 8px 16px; font-size: 13px }
  .rc-app .hero__photos{ height: clamp(300px, 78vw, 380px); margin-top: 28px }
  /* Simplify the stack on the smallest screens: the group card and the second
     badge add clutter rather than information at this width. */
  .rc-app .hero__photo-card--grp,
  .rc-app .hero__badge--book{ display: none }
  .rc-app .hero__photo-card--main{ width: 62%; height: 86%; right: 0 }
  .rc-app .hero__photo-card--boy{ width: 46%; height: 54%; left: 0 }
  .rc-app .hero__badge--trophy{ top: 4%; right: 0; padding: 9px 13px }
  .rc-app .hero__badge-ico{ width: 30px; height: 30px }
  /* Scale the decorative fields to the viewport. They are clipped by
     .hero__glow either way, but a 520px blob on a 320px screen is wasted paint
     and leaves the element geometry wider than the screen. Lighter blur too:
     large-radius blur is the expensive part on low-end phones. */
  .rc-app .hero__blob{ filter: blur(64px); opacity: .45 }
  .rc-app .hero__blob--purple{ width: 62vw; height: 62vw; top: -14vw; left: -18vw }
  .rc-app .hero__blob--orange{ width: 56vw; height: 56vw; bottom: -16vw; right: -14vw }
  .rc-app .hero__blob--cyan{ display: none }
  .rc-app .vp-stats,
  .rc-app .vp-prepare,
  .rc-app .vp-why,
  .rc-app .vp-footer-cta{ padding: 48px 20px }
  .rc-app .stat-grid{ grid-template-columns: 1fr 1fr }
}


/* ============================================================
   FOUNDER / VISIONARY  (home, sits just above the stats band)
   ------------------------------------------------------------
   Section intro (eyebrow / heading / lead) above one premium card:
   55% portrait composition, 45% copy.

   The portrait is a transparent PNG (images/vijaypath-founder.png) cut out from
   the supplied JPEG. That alpha channel is what lets it stand over the purple
   shape: the earlier JPEG had an opaque white box, and the blend-mode trick used
   to hide it also tinted the subject purple. If this photo is ever replaced,
   replace it with a PNG that has real transparency.
   ============================================================ */
.rc-app .vp-founder{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px, 7vw, 96px) clamp(20px, 4vw, 36px) clamp(56px, 6vw, 88px);
  background: linear-gradient(180deg, #fbfaff 0%, #f7f4ff 50%, #fff8f5 100%);
}

/* ── background wash ── */
.rc-app .vp-founder__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.rc-app .vp-founder__aura{ position:absolute; border-radius:50%; filter:blur(90px) }
.rc-app .vp-founder__aura--purple{
  width:520px; height:520px; top:-160px; left:-140px;
  background:radial-gradient(circle, rgba(93,56,222,.26), transparent 70%);
}
.rc-app .vp-founder__aura--orange{
  width:440px; height:440px; bottom:-180px; right:-120px;
  background:radial-gradient(circle, rgba(255,80,40,.20), transparent 70%);
}
.rc-app .vp-founder__grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(93,56,222,.13) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(65% 60% at 50% 40%, #000, transparent 78%);
          mask-image:radial-gradient(65% 60% at 50% 40%, #000, transparent 78%);
  opacity:.5;
}

/* ── section intro ── */
.rc-app .vp-founder__intro{
  position:relative; z-index:1;
  max-width:720px; margin:0 auto clamp(34px, 4vw, 52px); text-align:center;
}
.rc-app .vp-founder__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:7px 16px; border-radius:999px;
  background:rgba(93,56,222,.08); border:1px solid rgba(93,56,222,.16);
  color:var(--navy);
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
}
.rc-app .vp-founder__heading{
  margin:0 0 12px;
  font-size:clamp(28px, 3.6vw, 44px); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; color:var(--vp-ink);
}
.rc-app .vp-founder__lead{
  margin:0; color:var(--vp-muted);
  font-size:clamp(15px, 1.3vw, 17px); line-height:1.7;
}

/* ── the card ── */
.rc-app .vp-founder__card{
  position: relative; z-index:1;
  max-width: 1140px; margin: 0 auto;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(93,56,222,.10);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 34px 76px -44px rgba(67,38,176,.45),
    0 10px 26px -18px rgba(30,39,47,.22);
  transition: transform .45s cubic-bezier(.22,.7,.24,1), box-shadow .45s;
}
.rc-app .vp-founder__card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 44px 92px -44px rgba(67,38,176,.55),
    0 14px 32px -18px rgba(30,39,47,.28);
}

/* ── left: portrait composition ── */
.rc-app .vp-founder__media{
  position: relative;
  min-height: 400px;
  padding-bottom: 66px;          /* clear band for the credential chip */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(165deg, #ffffff 0%, #f4efff 58%, #ebe3ff 100%);
}
/* layered depth: a soft ring behind the organic blob */
.rc-app .vp-founder__ring{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  width:76%; aspect-ratio:1/1; border-radius:50%;
  border:1px solid rgba(93,56,222,.16);
  box-shadow:0 0 0 18px rgba(93,56,222,.045);
}
.rc-app .vp-founder__blob{
  position: absolute;
  left: -14%; bottom: -12%;
  width: 88%; aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, #b9a6f5 0%, #7a5cf0 55%, #5d38de 100%);
  border-radius: 46% 54% 38% 62% / 55% 44% 56% 45%;
  opacity: .92;
  animation: vpFounderDrift 18s ease-in-out infinite;
}
/* 3 classes (0,3,0) to outrank responsive-normalize.css img[width][height] (0,2,1) */
.rc-app .vp-founder .vp-founder__photo{
  position: relative; z-index: 1;
  display: block;
  width: 90%; max-width: 380px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(30,39,47,.28));
}
/* floating credential strip */
.rc-app .vp-founder__chip{
  position:absolute; z-index:2; left:50%; bottom:20px; transform:translateX(-50%);
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid rgba(93,56,222,.14);
  box-shadow:0 16px 32px -18px rgba(30,39,47,.5);
  color:var(--navy); font-size:11.5px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase;
  animation: vpFounderFloat 7s 1s ease-in-out infinite;
}

/* ── dotted accents ── */
.rc-app .vp-founder__dots{
  position: absolute;
  width: 84px; height: 84px;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 13px 13px;
  pointer-events: none;
}
.rc-app .vp-founder__dots--left{ left:14px; top:22%; color:rgba(93,56,222,.26) }
.rc-app .vp-founder__dots--right{ right:26px; top:26px; color:rgba(93,56,222,.18) }

/* ── right: copy ── */
.rc-app .vp-founder__body{
  position: relative;
  padding: clamp(30px, 3.6vw, 52px);
  display: flex; flex-direction: column; justify-content: center;
}
.rc-app .vp-founder__badge{
  align-self: flex-start;
  display: inline-block; margin-bottom: 18px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(93,56,222,.10); color: var(--navy);
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase;   /* beats the site-wide capitalize */
}
.rc-app .vp-founder__name{
  margin: 0 0 8px;
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 700;
  line-height: 1.12; letter-spacing:-.015em; color: var(--vp-ink);
}
.rc-app .vp-founder__role{
  margin: 0 0 20px;
  color: var(--navy); font-size: 17px; font-weight: 600;
}
.rc-app .vp-founder__text{
  margin: 0; max-width: 56ch;
  color: var(--vp-muted); font-size: 16px; line-height: 1.8;
}

/* ── mission quote ── */
.rc-app .vp-founder__quote{
  position: relative;
  margin: 26px 0 0;
  padding: 22px 24px 20px 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(93,56,222,.06), rgba(255,80,40,.045));
  border: 1px solid rgba(93,56,222,.12);
  border-left: 3px solid var(--navy);
}
.rc-app .vp-founder__quote::before{
  content: "\201C";
  position: absolute; left: 16px; top: 4px;
  color: rgba(93,56,222,.32);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58px; line-height: 1;
}
.rc-app .vp-founder__quote blockquote{
  margin: 0 0 10px;
  color: var(--vp-ink);
  font-size: 17px; font-style: italic; font-weight: 500; line-height: 1.7;
}
.rc-app .vp-founder__quote figcaption{
  color: var(--navy); font-size: 14.5px; font-weight: 700;
}

/* ══ motion ══
   Directional scroll-reveal built on the shared .reveal class: only the STARTING
   transform is overridden, because .reveal--in resets transform to none. */
.rc-app .vp-founder__media--in{ transform: translateX(-34px) }
.rc-app .vp-founder__body--in{ transform: translateX(28px) }

@keyframes vpFounderFloat{ 0%,100%{ transform:translateX(-50%) translateY(0) }
                           50%   { transform:translateX(-50%) translateY(-7px) } }
@keyframes vpFounderDrift{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }
                           50%   { transform:translate3d(10px,-12px,0) scale(1.04) } }

@media (prefers-reduced-motion: reduce){
  .rc-app .vp-founder__chip,
  .rc-app .vp-founder__blob{ animation: none !important }
  .rc-app .vp-founder__card:hover{ transform: none }
  .rc-app .vp-founder__media--in,
  .rc-app .vp-founder__body--in{ transform: none }
}

/* ── responsive ── */
@media (max-width: 900px){
  .rc-app .vp-founder__card{ grid-template-columns: 1fr }
  .rc-app .vp-founder__media{ min-height: 340px; padding-top: 26px }
  .rc-app .vp-founder .vp-founder__photo{ max-width: 300px }
  .rc-app .vp-founder__blob{ left: -12%; bottom: -20%; width: 78% }
  .rc-app .vp-founder__ring{ width: 66% }
  .rc-app .vp-founder__dots--left{ top: auto; bottom: 16px }
  .rc-app .vp-founder__text{ max-width: none }
  /* Stacked: reveal straight up so nothing slides in from off-screen. */
  .rc-app .vp-founder__media--in,
  .rc-app .vp-founder__body--in{ transform: translateY(28px) }
}
@media (max-width: 575px){
  .rc-app .vp-founder{ padding: 48px 16px 44px }
  .rc-app .vp-founder__card{ border-radius: 22px }
  .rc-app .vp-founder__media{ min-height: 300px; padding-bottom: 58px }
  .rc-app .vp-founder .vp-founder__photo{ max-width: 250px }
  .rc-app .vp-founder__chip{ font-size: 10.5px; padding: 8px 13px; letter-spacing: .8px }
  .rc-app .vp-founder__text{ font-size: 15px }
  .rc-app .vp-founder__quote{ padding: 20px 18px 18px 42px }
  .rc-app .vp-founder__quote::before{ left: 12px; font-size: 46px }
  .rc-app .vp-founder__quote blockquote{ font-size: 15.5px }
  .rc-app .vp-founder__dots{ width: 62px; height: 62px }
}


/* ============================================================
   STATS CARDS - polish pass
   ------------------------------------------------------------
   Appended after the base .stat-card rules above so these win at equal
   specificity. Five counters now, so the grid is pinned to 5 across on
   wide screens and steps down cleanly rather than leaving one orphan
   card on its own row.
   ============================================================ */
.rc-app .stat-grid--5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.rc-app .stat-grid--5 .stat-card{
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255,80,40,.10);
  background: linear-gradient(180deg, #ffffff 0%, #fff6f3 58%, #ffe7e0 100%);
  box-shadow: 0 12px 30px -22px rgba(30,39,47,.55);
  transition: transform .3s cubic-bezier(.22,.7,.24,1),
              box-shadow .3s cubic-bezier(.22,.7,.24,1),
              border-color .3s;
}
/* accent bar wipes in from the left on hover */
.rc-app .stat-grid--5 .stat-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.22,.7,.24,1);
}
.rc-app .stat-grid--5 .stat-card:hover{
  transform: translateY(-5px);
  border-color: rgba(255,80,40,.22);
  box-shadow: 0 26px 48px -28px rgba(255,80,40,.75), 0 8px 20px -16px rgba(30,39,47,.4);
}
.rc-app .stat-grid--5 .stat-card:hover::before{ transform: scaleX(1) }

.rc-app .stat-grid--5 .stat-card .stat-icon{
  width: 50px;
  height: 50px;
  margin-bottom: 34px;
  border-radius: 15px;
  background: #fff;
  color: var(--orange);
  box-shadow: 0 8px 18px -10px rgba(255,80,40,.75), inset 0 0 0 1px rgba(255,80,40,.10);
  transition: transform .3s cubic-bezier(.22,.7,.24,1);
}
.rc-app .stat-grid--5 .stat-card:hover .stat-icon{ transform: translateY(-2px) scale(1.05) }
.rc-app .stat-grid--5 .stat-card .stat-icon svg{ width: 21px; height: 21px }

.rc-app .stat-grid--5 .stat-card h3{
  margin-bottom: 6px;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--vp-ink);
  font-variant-numeric: tabular-nums;   /* digits keep their box while counting up */
}
.rc-app .stat-grid--5 .stat-card p{
  color: var(--vp-muted);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 1100px){
  .rc-app .stat-grid--5{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 700px){
  .rc-app .stat-grid--5{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
  .rc-app .stat-grid--5 .stat-card{ padding: 20px 18px }
  .rc-app .stat-grid--5 .stat-card .stat-icon{ margin-bottom: 22px }
}
@media (max-width: 420px){
  .rc-app .stat-grid--5 .stat-card h3{ font-size: 24px }
  .rc-app .stat-grid--5 .stat-card p{ font-size: 13.5px }
}


/* ── Icon glyph sizing — outranks the global SVG clamp ─────────────────────
   responsive-normalize.css loads last with
     svg:not([width]):not([data-large]):not(.svg-noclamp){width:clamp(16px,1.4vw,22px)}
   at (0,3,1). A 3-class selector ties and loses on order, so these need four
   classes plus the same :not() chain to take effect. ─────────────────────── */
.rc-app .vp-stats .stat-grid--5 .stat-card .stat-icon svg:not([width]):not([data-large]):not(.svg-noclamp){
  width: 25px; height: 25px; flex: none;
}
.rc-app .vp-prepare .feature-grid .feature-card .feature-ico svg:not([width]):not([data-large]):not(.svg-noclamp){
  width: 27px; height: 27px; flex: none;
}