/* ===================================================
   WorkNest - Agency Grade Home Styling (Hero + Section 2)
   Theme: Pure Deep Plum, Dusty Rose & Soft Blush (Zero Green)
   =================================================== */
 
/* =========================================
   1. HERO SECTION
   ========================================= */
.hero-agency-clean {
  position: relative;
  min-height: 86vh;
  background: radial-gradient(circle at 80% 20%, #f6f7fa 0%, #ffffff 60%);
  padding: 70px 0 95px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
 
.ambient-soft-glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(223, 227, 236, 0.6) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
}
 
.hero-left-wrap {
  position: relative;
  z-index: 3;
}
 
.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid var(--color-blush-border);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(22, 26, 57, 0.04);
  margin-bottom: 24px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
 
.hero-tag-badge:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--color-rose-accent);
  box-shadow: 0 8px 25px rgba(226, 122, 52, 0.2);
  color: var(--color-rose-accent);
}
 
.brand-dot-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  background: var(--color-rose-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-rose-accent);
}
 
.brand-dot-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--color-rose-accent);
  border-radius: 50%;
  animation: brandPing 1.8s ease-out infinite;
}
 
.hero-main-title {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  line-height: 1.15;
  color: var(--color-plum-dark);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
 
.hero-main-title .gradient-text {
  background: linear-gradient(135deg, var(--color-plum-dark) 0%, var(--color-rose-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transition: var(--transition-smooth);
}
 
.hero-main-title .gradient-text:hover {
  filter: drop-shadow(0 4px 12px rgba(226, 122, 52, 0.3));
}
 
.hero-main-title .future-cursive {
  font-family: var(--font-cursive);
  color: var(--color-rose-accent);
  font-size: 1.35em;
  font-weight: 700;
  display: inline-block;
  transform: rotate(-3deg);
  margin-left: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
 
.hero-main-title .future-cursive:hover {
  transform: rotate(0deg) scale(1.1);
  color: var(--color-plum-dark);
}
 
.hero-lead-paragraph {
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 35px;
}
 
.hero-action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 45px;
}
 
.btn-brand-solid {
  background: var(--color-plum-dark);
  color: #ffffff !important;
  padding: 14px 34px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--color-plum-dark);
  box-shadow: 0 10px 25px rgba(22, 26, 57, 0.18);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
 
.btn-brand-solid i {
  transition: transform 0.3s ease;
}
 
.btn-brand-solid:hover {
  background: var(--color-plum-medium);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 35px rgba(22, 26, 57, 0.28);
}
 
.btn-brand-solid:hover i {
  transform: translate(3px, -3px);
}
 
.btn-brand-outline {
  background: #ffffff;
  color: var(--color-plum-dark) !important;
  border: 1.8px solid var(--color-blush-border);
  padding: 13px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition-smooth);
}
 
.btn-brand-outline:hover {
  background: var(--color-blush-bg);
  border-color: var(--color-rose-accent);
  color: var(--color-rose-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(226, 122, 52, 0.15);
}
 
.hero-trust-flex {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 25px;
  border-top: 1px solid var(--color-blush-border);
}
 
.trust-badge-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
  cursor: pointer;
}
 
.trust-badge-card i {
  color: var(--color-rose-accent);
  font-size: 1.15rem;
  transition: transform 0.3s ease;
}
 
.trust-badge-card span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  transition: color 0.3s ease;
}
 
.trust-badge-card:hover {
  background: #ffffff;
  border-color: var(--color-blush-border);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(22, 26, 57, 0.08);
}
 
.trust-badge-card:hover i {
  transform: scale(1.25) rotate(-8deg);
  color: var(--color-plum-dark);
}
 
.trust-badge-card:hover span {
  color: var(--color-rose-accent);
}
 
/* Right Side Hub */
.hero-hub-container {
  position: relative;
  z-index: 3;
  padding: 20px;
}
 
.main-hub-card {
  background: #ffffff;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 30px;
  padding: 32px;
  box-shadow: 0 25px 65px rgba(22, 26, 57, 0.07);
  transition: var(--transition-smooth);
  position: relative;
}
 
.main-hub-card:hover {
  transform: translateY(-5px);
  border-color: rgba(226, 122, 52, 0.4);
  box-shadow: 0 35px 80px rgba(22, 26, 57, 0.12);
}
 
.hub-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f3f5f8;
}
 
.hub-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
 
.hub-identity:hover {
  transform: translateX(4px);
}
 
.hub-logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-plum-dark), var(--color-rose-accent));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(22, 26, 57, 0.18);
  transition: transform 0.4s ease;
}
 
.hub-identity:hover .hub-logo-icon {
  transform: rotate(15deg) scale(1.08);
}
 
.hub-name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-plum-dark);
  line-height: 1.2;
}
 
.hub-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
 
.admissions-pill-brand {
  background: #f5f7fa;
  color: var(--color-plum-dark);
  border: 1px solid #dfe2ea;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
  cursor: pointer;
}
 
.admissions-pill-brand:hover {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 26, 57, 0.2);
}
 
.hub-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
 
.skill-interactive-box {
  background: #f9fafc;
  border: 1px solid #e0e4ed;
  border-radius: 20px;
  padding: 18px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}
 
.skill-icon-holder {
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1.5px solid #dfe2ea;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-plum-dark);
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(22, 26, 57, 0.04);
  transition: all 0.4s ease;
}
 
.skill-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-plum-dark);
  margin-bottom: 3px;
  transition: color 0.3s ease;
}
 
.skill-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
 
.skill-interactive-box:hover {
  background: #ffffff;
  border-color: var(--color-rose-accent);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 35px rgba(226, 122, 52, 0.18);
}
 
.skill-interactive-box:hover .skill-icon-holder {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 6px 15px rgba(22, 26, 57, 0.25);
}
 
.skill-interactive-box:hover .skill-title {
  color: var(--color-rose-accent);
}
 
.floating-sat-badge {
  position: absolute;
  background: #ffffff;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 22px;
  padding: 14px 22px;
  box-shadow: 0 18px 40px rgba(22, 26, 57, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
 
.floating-sat-badge:hover {
  transform: scale(1.05) translateY(-4px) !important;
  border-color: var(--color-rose-accent);
  box-shadow: 0 22px 50px rgba(226, 122, 52, 0.25);
}
 
.sat-pos-top-right {
  top: -18px;
  right: -20px;
  animation: floatBrand 4.5s ease-in-out infinite;
}
 
.sat-icon-circle-plum {
  width: 44px;
  height: 44px;
  background: var(--color-plum-dark);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}
 
.floating-sat-badge:hover .sat-icon-circle-plum {
  transform: rotate(10deg);
}
 
.sat-pos-bottom-left {
  bottom: -22px;
  left: -20px;
  animation: floatBrand 5s ease-in-out infinite 1s;
}
 
.sat-icon-circle-rose {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-rose-accent), var(--color-plum-dark));
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}
 
.floating-sat-badge:hover .sat-icon-circle-rose {
  transform: rotate(-10deg);
}
 
.tag-inperson-brand {
  background: #f5f7fa;
  color: var(--color-rose-accent);
  border: 1px solid #dfe2ea;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 50px;
  transition: var(--transition-smooth);
}
 
.floating-sat-badge:hover .tag-inperson-brand {
  background: var(--color-rose-accent);
  color: #ffffff;
  border-color: var(--color-rose-accent);
}
 
/* =========================================
   2. SECTION 2: IS WORKNEST RIGHT FOR YOU?
   ========================================= */
.section-audience {
  position: relative;
  background-color: #ffffff;
  padding: 100px 0;
  overflow: hidden;
}
 
/* Subtle background accent blob */
.audience-glow-ambient {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(241, 243, 248, 0.7) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}
 
.section-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5f7fa;
  border: 1px solid var(--color-blush-border);
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-rose-accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  transition: var(--transition-smooth);
  cursor: pointer;
}
 
.section-tag-pill:hover {
  transform: translateY(-2px);
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
}
 
.section-heading-lg {
  font-family: var(--font-heading);
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-plum-dark);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
 
.section-subtext {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto;
}
 
/* The 6-Card Interactive Persona Bento */
.audience-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 24px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  cursor: pointer;
}
 
/* Watermark Number in background (01, 02, etc.) */
.card-watermark-num {
  position: absolute;
  top: 15px;
  right: 22px;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: rgba(22, 26, 57, 0.05);
  line-height: 1;
  transition: var(--transition-smooth);
  pointer-events: none;
}
 
/* Card Icon Box */
.card-icon-frame {
  width: 52px;
  height: 52px;
  background: #f5f7fa;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-plum-dark);
  font-size: 1.4rem;
  margin-bottom: 22px;
  transition: all 0.4s ease;
}
 
.card-title-audience {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}
 
.card-desc-audience {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 20px;
}
 
/* Interactive Card Footer (Action Indicator) */
.card-path-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-rose-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  transition: var(--transition-smooth);
}
 
.card-path-link i {
  transition: transform 0.3s ease;
}
 
/* =========================================
   CARD HOVER EFFECTS (Full Interaction)
   ========================================= */
.audience-card:hover {
  background: #fcfdfe;
  border-color: var(--color-rose-accent);
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(226, 122, 52, 0.16);
}
 
.audience-card:hover .card-watermark-num {
  color: rgba(226, 122, 52, 0.18);
  transform: scale(1.1);
}
 
.audience-card:hover .card-icon-frame {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 8px 20px rgba(22, 26, 57, 0.25);
}
 
.audience-card:hover .card-title-audience {
  color: var(--color-rose-accent);
}
 
.audience-card:hover .card-path-link {
  opacity: 1;
  color: var(--color-plum-dark);
}
 
.audience-card:hover .card-path-link i {
  transform: translateX(6px);
}
 
/* Bottom Disclaimer / Transparency Banner */
.disclaimer-banner {
  background: #f8f9fb;
  border: 1.5px dashed var(--color-blush-border);
  border-radius: 20px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 50px;
  transition: var(--transition-smooth);
}
 
.disclaimer-banner:hover {
  background: #ffffff;
  border-color: var(--color-rose-accent);
  box-shadow: 0 10px 30px rgba(22, 26, 57, 0.05);
}
 
.disclaimer-icon {
  width: 44px;
  height: 44px;
  background: var(--color-plum-dark);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
 
.disclaimer-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
 
.disclaimer-text strong {
  color: var(--color-plum-dark);
}
 
/* Global Keyframes */
@keyframes floatBrand {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
 
@keyframes brandPing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
 
/* Responsive */
@media (max-width: 991.98px) {
  .hero-main-title { font-size: 2.8rem; }
  .section-heading-lg { font-size: 2.3rem; }
  .hero-hub-container { margin-top: 45px; }
  .floating-sat-badge { position: static; margin-bottom: 15px; }
  .disclaimer-banner { flex-direction: column; text-align: center; }
}
 
 
/* ===================================================
   SECTION 3: COURSES SHOWCASE STYLES & ANIMATIONS
   =================================================== */
 
.section-courses-showcase {
  position: relative;
  background-color: #f9fafb;
  padding: 100px 0;
  overflow: hidden;
}
 
.courses-ambient-glow {
  position: absolute;
  top: 15%;
  right: -80px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(226, 122, 52, 0.12) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
}
 
/* Course Card Base */
.course-card-premium {
  position: relative;
  background: #ffffff;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 26px;
  padding: 34px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(22, 26, 57, 0.03);
}
 
/* Glowing Top Border Sweep on Hover */
.course-glow-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, var(--color-plum-dark), var(--color-rose-accent));
  transition: width 0.45s ease;
}
 
/* Card Top Header */
.course-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
 
.course-tag-pill {
  background: #f5f7fa;
  color: var(--color-plum-dark);
  border: 1px solid #dfe2ea;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
}
 
.course-icon-badge {
  width: 48px;
  height: 48px;
  background: #f5f7fa;
  border: 1.5px solid var(--color-blush-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-plum-dark);
  font-size: 1.35rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 
.course-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color 0.3s ease;
}
 
.course-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 22px;
}
 
/* Tool Badges Wrap */
.course-tools-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
 
.tool-tag {
  background: #ffffff;
  border: 1px solid var(--color-blush-border);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-plum-dark);
  transition: all 0.25s ease;
  cursor: pointer;
}
 
.tool-tag:hover {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: translateY(-2px);
}
 
/* Action Link with Expanding Circle Arrow */
.course-action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid #f3f5f8;
  color: var(--color-plum-dark);
  font-weight: 700;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}
 
.link-circle-btn {
  width: 38px;
  height: 38px;
  background: #f5f7fa;
  border: 1px solid #dfe2ea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-plum-dark);
  font-size: 1rem;
  transition: all 0.35s ease;
}
 
/* =========================================
   CARD HOVER EFFECTS
   ========================================= */
.course-card-premium:hover {
  transform: translateY(-10px);
  border-color: rgba(226, 122, 52, 0.4);
  box-shadow: 0 25px 50px rgba(22, 26, 57, 0.12);
  background: #ffffff;
}
 
.course-card-premium:hover .course-glow-line {
  width: 100%;
}
 
.course-card-premium:hover .course-icon-badge {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 8px 22px rgba(22, 26, 57, 0.25);
}
 
.course-card-premium:hover .course-title {
  color: var(--color-rose-accent);
}
 
.course-card-premium:hover .course-tag-pill {
  background: var(--color-rose-accent);
  color: #ffffff;
  border-color: var(--color-rose-accent);
}
 
.course-card-premium:hover .course-action-link {
  color: var(--color-rose-accent);
}
 
.course-card-premium:hover .link-circle-btn {
  background: var(--color-plum-dark);
  color: #ffffff;
  border-color: var(--color-plum-dark);
  transform: translate(3px, -3px) rotate(45deg);
}
 
/* Wide Dropshipping Card */
.course-card-wide {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafd 100%);
}
 
/* Help Box (Career Guidance) */
.course-help-card {
  background: linear-gradient(135deg, var(--color-plum-dark) 0%, #1c234b 100%);
  border-radius: 26px;
  padding: 34px 28px;
  height: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 35px rgba(22, 26, 57, 0.2);
  transition: var(--transition-smooth);
}
 
.course-help-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(22, 26, 57, 0.35);
}
 
.help-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-rose-accent);
  margin-bottom: 20px;
}
 
.help-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}
 
.help-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e0e4ed;
  margin-bottom: 25px;
}
 
.course-help-card .btn-brand-outline {
  background: #ffffff;
  color: var(--color-plum-dark) !important;
  border-color: #ffffff;
}
 
.course-help-card .btn-brand-outline:hover {
  background: var(--color-rose-accent);
  color: #ffffff !important;
  border-color: var(--color-rose-accent);
}
 
/* Wide Dropshipping Card Perfect Alignment */
.course-card-wide {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafd 100%);
  padding: 34px 32px !important;
}
 
.course-card-wide .btn-brand-solid {
  padding: 14px 26px !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 20px rgba(22, 26, 57, 0.2);
}
 
.course-card-wide .btn-brand-solid:hover {
  transform: translateY(-3px) scale(1.02);
}
 
/* ===================================================
   SECTION 4: NEXT-LEVEL AUTHORITY STAGE (Dark Plum)
   =================================================== */
.nx-stage{position:relative;overflow:hidden;padding:140px 0 120px;background:#0b0d1d;color:#fff}
.nx-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.nx-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:nxAurora 14s ease-in-out infinite}
.nx-aurora i:nth-child(1){width:520px;height:520px;background:#e27a34;top:-160px;left:-120px}
.nx-aurora i:nth-child(2){width:460px;height:460px;background:#29326c;bottom:-140px;right:-100px;animation-delay:-5s}
.nx-aurora i:nth-child(3){width:320px;height:320px;background:#fba164;top:40%;left:45%;opacity:.22;animation-delay:-9s}
.nx-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.3px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%)}
.nx-marquee{position:absolute;top:30px;left:0;width:100%;overflow:hidden;white-space:nowrap;pointer-events:none}
.nx-marquee-track{display:inline-flex;animation:nxDrift 40s linear infinite}
.nx-marquee-track span{font-family:var(--font-heading);font-size:6rem;font-weight:900;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.12);letter-spacing:4px}
.nx-wrap{position:relative;z-index:3}
 
.nx-head{text-align:center;margin-bottom:80px}
.nx-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:50px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);font-size:.8rem;font-weight:700;letter-spacing:1.2px;margin-bottom:28px}
.nx-title{font-family:var(--font-heading);font-size:clamp(2.6rem,6vw,5rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:22px;color:#fff}
.nx-line{display:block;overflow:hidden;padding:.04em 0 .1em}
.nx-line>span{display:inline-block;transform:translateY(115%) rotate(4deg);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.nx-head.in .nx-line>span{transform:none}
.nx-line:nth-child(2)>span{transition-delay:.15s}.nx-line:nth-child(3)>span{transition-delay:.3s}
.nx-title em{font-style:normal;background:linear-gradient(100deg,#fcb485,#e27a34,#dee4f1,#e27a34);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:nxShift 4s linear infinite}
.nx-script{font-family:var(--font-cursive);color:#fcb485;font-size:1.25em}
.nx-sub{max-width:680px;margin:0 auto;color:rgba(255,255,255,.68);line-height:1.8;font-size:1.08rem}
 
.nx-rv{opacity:0;transform:translateY(50px);transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),background .35s,border-color .35s}
.nx-rv.in{opacity:1;transform:none}
.nx-zoom{transform:scale(.85) rotateY(-15deg)}
 
.nx-label{font-size:.78rem;font-weight:800;letter-spacing:1.5px;color:#fcb485;margin-bottom:18px}
.nx-label i{margin-right:8px}
.nx-tabs{display:flex;flex-direction:column;gap:14px}
.nx-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;text-align:left;padding:18px 22px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer}
.nx-tab.in:hover{transform:translateX(10px);border-color:var(--color-rose-accent)}
.nx-tab.in.on{transform:translateX(16px);background:linear-gradient(120deg,rgba(226,122,52,.55),rgba(41,50,108,.55));border-color:var(--color-rose-accent);box-shadow:0 14px 40px rgba(226,122,52,.25)}
.nx-ti{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.3rem;transition:.4s}
.nx-tab.on .nx-ti{background:var(--color-rose-accent);transform:rotate(-10deg) scale(1.12)}
.nx-tab b{display:block;font-size:1.05rem}.nx-tab small{opacity:.65;font-size:.78rem}
.nx-tab::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff}
.nx-tab.on::after{animation:nxFill 5s linear forwards}
 
.nx-scene{position:relative;perspective:1400px;padding:34px}
.nx-card{position:relative;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .15s ease-out}
.nx-face{position:relative;overflow:hidden;border-radius:30px;padding:34px;background:linear-gradient(135deg,#fff,#f5f7fb 60%,#eaedf4);color:var(--color-plum-dark);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(226,122,52,.35)}
.nx-card.flip .nx-face{animation:nxFlip .9s cubic-bezier(.16,1,.3,1)}
.nx-foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;background:conic-gradient(from var(--fa,0deg) at var(--fx,50%) var(--fy,50%),#e2e7f3,#e2e7f3,#dfe4f1,#e2e7f3)}
.nx-laser{position:absolute;left:0;top:0;width:100%;height:3px;opacity:0;z-index:5;background:linear-gradient(90deg,transparent,#fba164,#e27a34,transparent);box-shadow:0 0 18px #fba164,0 0 30px #e27a34}
.nx-laser.go{animation:nxLaser .9s cubic-bezier(.4,0,.2,1) forwards}
.nx-top,.nx-mid,.nx-chips,.nx-foot{position:relative;z-index:2}
.nx-top{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1.5px dashed #dfe2ea;margin-bottom:24px;flex-wrap:wrap}
.nx-emblem{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--color-plum-dark);color:#fff;font-size:1.3rem}
.nx-auth{flex:1;min-width:150px}.nx-auth b{display:block;font-size:.72rem;letter-spacing:1px}.nx-auth small{font-size:.74rem;color:var(--text-muted)}
.nx-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px;background:#fff;border:1px solid var(--color-blush-border);font-size:.72rem;font-weight:800}
.nx-mid{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.nx-qr{width:66px;height:66px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--color-blush-border);font-size:2.3rem}
.nx-k{font-size:.7rem;font-weight:800;letter-spacing:1.5px;color:var(--text-muted)}
.nx-course{font-family:var(--font-heading);font-size:1.7rem;font-weight:700;margin:2px 0 6px;min-height:2.1rem}
.nx-meta{font-size:.78rem;color:var(--text-muted)}.nx-meta strong{color:var(--color-rose-accent);font-family:'Courier New',monospace}
.nx-meta strong:last-child{color:var(--color-plum-dark);font-family:inherit}
.nx-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.nx-chips span{padding:6px 14px;border-radius:50px;background:#fff;border:1px solid var(--color-blush-border);font-size:.78rem;font-weight:700;transition:.3s}
.nx-chips span:hover{transform:translateY(-3px);background:var(--color-plum-dark);color:#fff}
.nx-chips i{color:var(--color-rose-accent);margin-right:4px}
.nx-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;border-top:1.5px dashed #dfe2ea}
.nx-bars{position:relative;flex:1;height:30px;overflow:hidden;background:repeating-linear-gradient(90deg,#161a39 0 2px,transparent 2px 5px,#161a39 5px 6px,transparent 6px 11px,#161a39 11px 14px,transparent 14px 17px);opacity:.75}
.nx-bars::after{content:"";position:absolute;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:nxScan 2.2s ease-in-out infinite}
.nx-seal{position:relative;width:54px;height:54px;display:grid;place-items:center;animation:nxSpin 20s linear infinite}
.nx-seal i{position:absolute;font-size:3.3rem;color:var(--color-rose-accent)}
.nx-seal span{position:relative;z-index:2;font-size:.56rem;font-weight:900;color:#fff;text-align:center;line-height:1}
.nx-stamp{position:absolute;z-index:6;right:92px;bottom:56px;padding:6px 14px;border:3px solid #e27a34;border-radius:10px;color:#e27a34;font-weight:900;letter-spacing:2px;font-size:1rem;opacity:0;transform:rotate(-14deg) scale(2.6);pointer-events:none;background:rgba(255,255,255,.6)}
.nx-stamp.slam{animation:nxSlam .5s cubic-bezier(.2,1.5,.4,1) forwards}
 
.nx-orb{position:absolute;z-index:4;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.5rem;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);animation:nxBob 5s ease-in-out infinite;transition:background .4s,box-shadow .4s}
.nx-orb.on{background:var(--color-rose-accent);box-shadow:0 0 35px var(--color-rose-accent)}
.o1{top:-6px;left:2%}.o2{top:8%;right:-8px;animation-delay:-1.2s}.o3{bottom:6%;left:-10px;animation-delay:-2.4s}.o4{bottom:-8px;right:8%;animation-delay:-3.6s}
 
.nx-proof{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:100px}
.nx-proof::before{content:"";position:absolute;top:27px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,var(--color-rose-accent),rgba(255,255,255,.1));transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.16,1,.3,1) .3s}
.nx-proof.in::before{transform:scaleX(1)}
.nx-step{text-align:center;padding:0 8px}
.nx-step.in:hover{transform:translateY(-8px)}
.nx-node{position:relative;width:54px;height:54px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#0b0d1d;border:2px solid var(--color-rose-accent);font-family:var(--font-heading);font-weight:800;color:var(--color-rose-accent);transition:.4s}
.nx-node::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--color-rose-accent);animation:brandPing 2.4s ease-out infinite}
.nx-step:hover .nx-node{background:var(--color-rose-accent);color:#fff;transform:scale(1.15) rotate(10deg)}
.nx-step h4{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;margin-bottom:8px}
.nx-step p{margin:0;font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.65)}
 
@keyframes nxAurora{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-50px) scale(1.2)}}
@keyframes nxDrift{to{transform:translateX(-50%)}}
@keyframes nxShift{to{background-position:250% 0}}
@keyframes nxFill{to{width:100%}}
@keyframes nxFlip{0%{transform:rotateY(-100deg) scale(.88);opacity:.2}100%{transform:none;opacity:1}}
@keyframes nxLaser{0%{top:0;opacity:1}100%{top:100%;opacity:0}}
@keyframes nxSlam{0%{opacity:0;transform:rotate(-14deg) scale(2.6)}100%{opacity:1;transform:rotate(-14deg) scale(1)}}
@keyframes nxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes nxScan{0%{left:-40px}100%{left:100%}}
@keyframes nxSpin{to{transform:rotate(360deg)}}
 
@media (max-width:991.98px){
  .nx-proof{grid-template-columns:1fr}.nx-proof::before{display:none}
  .nx-orb{display:none}.nx-marquee-track span{font-size:3.5rem}
  .nx-tab.in:hover,.nx-tab.in.on{transform:none}.nx-scene{margin-top:30px;padding:0}.nx-stamp{right:20px}
}
@media (prefers-reduced-motion:reduce){.nx-rv,.nx-line>span{opacity:1;transform:none;transition:none}}
 
/* ===================================================
   FUN ANIMATIONS LAYER (home-fx.js ke sath kaam karta hai)
   =================================================== */
.fx-progress{position:fixed;top:0;left:0;width:100%;height:4px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--color-plum-dark),var(--color-rose-accent));z-index:10000;pointer-events:none}
 
/* Scroll reveal */
.fx-up,.fx-left,.fx-zoom{opacity:0;filter:blur(8px);transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),filter .8s ease var(--d,0ms)}
.fx-up{transform:translateY(55px) scale(.97)}
.fx-left{transform:translateX(-55px)}
.fx-zoom{transform:perspective(1000px) rotateY(-20deg) scale(.86)}
.fx-in{opacity:1;filter:none;transform:none}
 
/* Hero page-load entrance */
.hero-left-wrap>*{animation:fxRise .9s cubic-bezier(.16,1,.3,1) backwards}
.hero-left-wrap>*:nth-child(2){animation-delay:.12s}
.hero-left-wrap>*:nth-child(3){animation-delay:.24s}
.hero-left-wrap>*:nth-child(4){animation-delay:.36s}
.hero-left-wrap>*:nth-child(5){animation-delay:.48s}
.hero-hub-container{animation:fxPop 1.1s cubic-bezier(.16,1,.3,1) .3s backwards}
 
/* Moving gradient text */
.hero-main-title .gradient-text,.section-heading-lg .gradient-text,.kinetic-mega-title .gradient-text{background-size:220% 220%;animation:fxGrad 5s ease-in-out infinite}
 
/* Shine sweep on main buttons */
.btn-brand-solid{position:relative;overflow:hidden}
.btn-brand-solid::after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:fxShine 3.4s ease-in-out infinite;pointer-events:none}
 
/* Mouse spotlight inside cards */
.audience-card::after,.course-card-premium::after,.skill-interactive-box::after,.main-hub-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(226,122,52,.17),transparent 60%)}
.audience-card:hover::after,.course-card-premium:hover::after,.skill-interactive-box:hover::after,.main-hub-card:hover::after{opacity:1}
 
/* Floating shapes in hero */
.fx-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.fx-shapes i{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(226,122,52,.28),rgba(22,26,57,.1));animation:fxDrift 9s ease-in-out infinite}
.fx-shapes i.ring{background:none;border:2px solid rgba(226,122,52,.3)}
 
/* Hologram sheen follows mouse smoothly */
.pass-holo-overlay{transition:opacity .4s ease,transform .25s ease-out}
 
/* Custom cursor + click sparkles */
.fx-cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:2px solid var(--color-rose-accent);border-radius:50%;pointer-events:none;z-index:10001;opacity:0;transition:width .25s,height .25s,background .25s}
.fx-cursor.fx-big{width:56px;height:56px;background:rgba(226,122,52,.15)}
.fx-spark{position:fixed;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--color-rose-accent);pointer-events:none;z-index:10002;animation:fxSpark .75s ease-out forwards}
 
@keyframes fxRise{from{opacity:0;transform:translateY(40px)}}
@keyframes fxPop{from{opacity:0;transform:translateY(60px) scale(.9) rotate(2deg)}}
@keyframes fxGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fxShine{0%,60%{left:-80%}100%{left:140%}}
@keyframes fxDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(28px,-40px) rotate(180deg)}}
@keyframes fxSpark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
 
@media (prefers-reduced-motion:reduce){
  .fx-up,.fx-left,.fx-zoom{opacity:1;filter:none;transform:none}
  .hero-left-wrap>*,.hero-hub-container,.btn-brand-solid::after,.fx-shapes i{animation:none}
}
 /* ===================================================
   SECTION 5: THE WORKSPACE STUDIO ENGINE (BESPOKE)
   Theme: Pure Deep Plum, Dusty Rose & Luxury Ambient Tech
   =================================================== */
 
.section-cowork-bespoke {
  position: relative;
  background-color: #ffffff;
  padding: 110px 0 120px 0;
  overflow: hidden;
}
 
.cowork-bespoke-glow {
  position: absolute;
  top: 20%;
  left: -80px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(226, 122, 52, 0.12) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}
 
/* Master Unified Stage Container (Zero Floating Card Grid) */
.cowork-unified-stage {
  background: #ffffff;
  border: 2px solid var(--color-blush-border);
  border-radius: 32px;
  box-shadow: 0 25px 70px rgba(22, 26, 57, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
 
/* 1. Left Control Rail */
.space-nav-rail {
  background: #f7f8fb;
  padding: 40px 32px;
  height: 100%;
  border-right: 2px solid var(--color-blush-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
 
.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1.5px dashed var(--color-blush-border);
}
 
.rail-caption {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-plum-dark);
}
 
.rail-indicator-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rose-accent);
  box-shadow: 0 0 10px var(--color-rose-accent);
}
 
/* Interactive Space Rows */
.space-select-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
 
.space-row-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
  transition: color 0.3s ease;
}
 
.space-row-content {
  flex-grow: 1;
}
 
.space-row-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  margin-bottom: 2px;
  transition: color 0.3s ease;
}
 
.space-row-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
}
 
.space-row-arrow {
  color: var(--text-muted);
  font-size: 1rem;
  transition: transform 0.3s ease;
}
 
/* Hover & Active States */
.space-select-row:hover {
  transform: translateX(6px);
  border-color: var(--color-blush-border);
}
 
.space-select-row.active {
  background: var(--color-plum-dark);
  border-color: var(--color-plum-dark);
  box-shadow: 0 10px 25px rgba(22, 26, 57, 0.22);
  transform: translateX(8px);
}
 
.space-select-row.active .space-row-num {
  color: var(--color-rose-accent);
}
 
.space-select-row.active .space-row-title {
  color: #ffffff;
}
 
.space-select-row.active .space-row-sub {
  color: #d6d8dd;
}
 
.space-select-row.active .space-row-arrow {
  color: var(--color-rose-accent);
  transform: translateX(4px);
}
 
/* 2. Right Display Engine */
.space-display-engine {
  background: #ffffff;
  padding: 40px 42px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s ease;
  position: relative;
}
 
/* Top Engine Bar & Shift Toggle */
.engine-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1.5px dashed var(--color-blush-border);
  margin-bottom: 30px;
}
 
.engine-code {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}
 
.shift-toggle-group {
  display: flex;
  gap: 8px;
  background: #f5f7fa;
  border: 1px solid var(--color-blush-border);
  padding: 4px;
  border-radius: 50px;
}
 
.btn-shift-toggle {
  background: transparent;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  transition: all 0.3s ease;
  cursor: pointer;
}
 
.btn-shift-toggle.active {
  background: var(--color-plum-dark);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 26, 57, 0.2);
}
 
/* Display Main Content */
.space-category-tag {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-rose-accent);
  display: block;
  margin-bottom: 6px;
}
 
.display-main-heading {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-plum-dark);
  margin-bottom: 14px;
}
 
.display-main-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 580px;
  margin-bottom: 32px;
}
 
/* Perks Matrix */
.engine-perks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 35px;
}
 
.perk-box {
  background: #fafafc;
  border: 1px solid var(--color-blush-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
}
 
.perk-box:hover {
  background: #ffffff;
  border-color: var(--color-rose-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(226, 122, 52, 0.12);
}
 
.perk-icon {
  font-size: 1.4rem;
  color: var(--color-rose-accent);
}
 
.perk-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
 
.perk-value {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-plum-dark);
}
 
/* Action Footer */
.engine-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1.5px dashed var(--color-blush-border);
}
 
.shift-note-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 380px;
}
 
/* =========================================
   NIGHT THEME ATMOSPHERE (TOGGLE ON/OFF)
   ========================================= */
.space-display-engine.night-theme-active {
  background: linear-gradient(135deg, #0f1228 0%, #0b0d1d 100%);
  color: #ffffff;
}
 
.space-display-engine.night-theme-active .engine-top-bar,
.space-display-engine.night-theme-active .engine-action-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
 
.space-display-engine.night-theme-active .engine-code {
  color: #c4b5fd;
}
 
.space-display-engine.night-theme-active .display-main-heading {
  color: #ffffff;
}
 
.space-display-engine.night-theme-active .display-main-desc {
  color: #f2c3a4;
}
 
.space-display-engine.night-theme-active .perk-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
 
.space-display-engine.night-theme-active .perk-value {
  color: #ffffff;
}
 
.space-display-engine.night-theme-active .shift-note-wrap {
  color: #e0e4ed;
}
 
/* Responsive */
@media (max-width: 991.98px) {
  .space-nav-rail { border-right: none; border-bottom: 2px solid var(--color-blush-border); }
  .engine-perks-grid { grid-template-columns: 1fr; }
  .engine-action-footer { flex-direction: column; gap: 18px; text-align: center; }
  .shift-note-wrap { max-width: 100%; }
}
 
/* ============================================================================
   WORKNEST REDESIGN LAYER  (hero · audience · courses · LIGHT credential · cowork)
   Sab kuch upar wali CSS ke baad load hota hai, is liye purani rules override hoti hain.
   Colours wohi hain: plum / rose / blush  (green nahi).
   ============================================================================ */
:root {
  --wn-plum: var(--color-plum-dark, #161a39);
  --wn-rose: var(--color-rose-accent, #e27a34);
  --wn-border: var(--color-blush-border, #dfe2ea);
  --wn-muted: var(--text-muted, #5f6980);
  --wn-lilac: #e8ebf3;
  --wn-peach: #e2e7f3;
  --wn-blush: #f4f5f9;
}
@keyframes whRise { from { opacity: 0; transform: translateY(46px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes whFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes whMorph { 0%,100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 33% { border-radius: 42% 58% 46% 54% / 56% 44% 56% 44%; } 66% { border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%; } }
@keyframes whSpin { to { transform: rotate(360deg); } }
@keyframes whCounter { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes whTwinkle { 0%,100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(25deg); } }
@keyframes whLine { to { transform: scaleX(1); } }
@keyframes whBorderMove { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
@keyframes whFill { from { width: 18%; } to { width: var(--w, 80%); } }
@keyframes whTick { to { transform: translateX(-50%); } }
@keyframes whDots { to { background-position: 28px 28px; } }
@keyframes whDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } }
@keyframes whShine { from { left: -80%; } to { left: 140%; } }
@keyframes whPulseRing { 0% { transform: scale(.85); opacity: .65; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes whWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
 
/* ============================ 1. HERO ============================ */
.hero-agency-clean {
  background:
    radial-gradient(circle at 84% 58%, #edf0f8 0, rgba(237,240,248,0) 46%),
    radial-gradient(circle at 6% 88%, #f1f3f7 0, rgba(241,243,247,0) 38%),
    #fff;
}
/* header aur hero ke beech koi patti na dikhe: upar se safed fade, neeche section 2 mein blend */
.hero-agency-clean::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,0) 100%);
}
.hero-agency-clean::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(226,122,52,.28) 1.4px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
  animation: whDots 14s linear infinite;
}
.hero-main-title .wh-w { display: inline-block; animation: whRise .9s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i) * .09s + .3s); }
.hero-main-title .future-cursive { position: relative; }
.hero-main-title .future-cursive::after {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: 2px; height: 7px; border-radius: 8px; z-index: -1;
  background: linear-gradient(90deg, #cdd6ea, var(--wn-rose), #cdd6ea); transform: scaleX(0); transform-origin: left; animation: whLine .9s cubic-bezier(.16,1,.3,1) 1.5s forwards;
}
.hero-lead-paragraph { color: var(--wn-muted); }
.btn-brand-solid { background: linear-gradient(135deg, var(--wn-plum), #29326c); }
.btn-brand-solid:hover i, .btn-brand-outline:hover i { animation: whWiggle .6s ease; }
.trust-badge-card { background: #fff; border: 1.5px solid var(--wn-border); border-radius: 18px; box-shadow: 0 8px 20px rgba(22,26,57,.05); }
.trust-badge-card:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 18px 32px rgba(226,122,52,.22); }
 
.hero-hub-container { padding: 34px 26px; }
.wh-blob { position: absolute; z-index: 0; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none;
  background: linear-gradient(135deg, #e4e9f4, #e9ecf3 60%, #e8ecf5); opacity: .7; filter: blur(14px); animation: whMorph 14s ease-in-out infinite; }
.wh-orbit-wrap { position: absolute; z-index: 1; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; }
.wh-orbit { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(226,122,52,.35); animation: whSpin 48s linear infinite; }
.wh-node { position: absolute; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-size: 1.15rem; color: var(--wn-rose);
  background: #fff; border: 1.5px solid var(--wn-border); box-shadow: 0 12px 24px rgba(226,122,52,.22); animation: whCounter 48s linear infinite; }
.wh-n1 { left: 100%; top: 50%; } .wh-n2 { left: 50%; top: 100%; } .wh-n3 { left: 0; top: 50%; } .wh-n4 { left: 50%; top: 0; }
.wh-spark { position: absolute; z-index: 5; color: var(--wn-rose); animation: whTwinkle 3s ease-in-out infinite; pointer-events: none; }
.wh-spark.s1 { top: 6%; left: 4%; font-size: 1.4rem; } .wh-spark.s2 { top: 44%; right: -2%; font-size: 1rem; animation-delay: 1s; color: #9c4c16; }
.wh-spark.s3 { bottom: 10%; right: 12%; font-size: 1.3rem; animation-delay: 1.8s; } .wh-spark.s4 { top: 20%; left: -3%; font-size: .9rem; animation-delay: .6s; color: #e99b67; }
 
.main-hub-card { z-index: 3; border: 3px solid transparent; animation: whBorderMove 6s ease-in-out infinite alternate;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #e27a34, #d6dce9, #f0bb98, #fcc199, #e27a34) border-box; background-size: 100% 100%, 300% 100%; background-repeat: no-repeat; }
.hub-logo-icon { animation: whWiggle 4s ease-in-out infinite; }
.skill-interactive-box { border: 1.5px solid transparent; overflow: hidden; }
.skill-interactive-box:nth-child(1) { background: linear-gradient(145deg, #f4f6fb, #ebeff7); }
.skill-interactive-box:nth-child(2) { background: linear-gradient(145deg, #f2f5fa, #e5e9f1); }
.skill-interactive-box:nth-child(3) { background: linear-gradient(145deg, #f0f3f9, #e0e5f2); }
.skill-interactive-box:nth-child(4) { background: linear-gradient(145deg, #f3f5fa, #e5e8f1); }
.skill-interactive-box:hover { transform: translateY(-8px) rotate(-1.2deg); border-color: var(--wn-rose); box-shadow: 0 18px 34px rgba(226,122,52,.28); }
.wh-bar { display: block; height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(22,26,57,.08); overflow: hidden; }
.wh-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--wn-rose), #9c4c16); animation: whFill 3.6s ease-in-out infinite alternate; }
.skill-interactive-box:nth-child(2) .wh-bar i { --w: 66%; animation-delay: -.8s; } .skill-interactive-box:nth-child(3) .wh-bar i { --w: 90%; animation-delay: -1.6s; } .skill-interactive-box:nth-child(4) .wh-bar i { --w: 74%; animation-delay: -2.4s; }
.wh-ticker { position: relative; margin-top: 20px; overflow: hidden; border-radius: 16px; background: var(--wn-blush); border: 1px solid var(--wn-border); padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wh-ticker-track { display: inline-flex; white-space: nowrap; animation: whTick 22s linear infinite; }
.wh-ticker span { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px; font-size: .78rem; font-weight: 700; color: var(--wn-plum); }
.wh-ticker span i { color: var(--wn-rose); font-size: .8rem; }
.floating-sat-badge { background: rgba(255,255,255,.95); border-radius: 24px; }
.sat-pos-bottom-left { animation: whFloat 5.5s ease-in-out infinite; animation-delay: -2s; }
@media (max-width: 991.98px) { .wh-orbit-wrap, .wh-spark { display: none; } .hero-main-title { font-size: 2.7rem; } }
 
/* ============================ 2. AUDIENCE ============================ */
.section-audience { background: linear-gradient(180deg, #fff 0%, #fafbfd 100%); }
.section-audience::before { content: ""; position: absolute; top: 40px; right: 40px; width: 260px; height: 260px; z-index: 1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(rgba(226,122,52,.35) 1.6px, transparent 1.7px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: whDots 16s linear infinite; }
.audience-glow-ambient { animation: whDrift 12s ease-in-out infinite; }
.section-tag-pill { box-shadow: 0 6px 16px rgba(226,122,52,.12); }
.audience-card { border-radius: 28px; box-shadow: 0 10px 28px rgba(22,26,57,.04); }
.audience-card::before { content: ""; position: absolute; right: -50px; top: -50px; width: 140px; height: 140px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(226,122,52,.2), transparent 70%); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.audience-card:hover::before { transform: scale(3.2); }
.audience-card > * { position: relative; z-index: 1; }
.audience-card:hover { transform: translateY(-12px) rotate(-.6deg); border-color: var(--wn-rose); box-shadow: 0 32px 56px rgba(226,122,52,.22); }
.card-icon-frame { animation: whFloat 5s ease-in-out infinite; transition: transform .5s cubic-bezier(.3,1.6,.5,1), background .3s ease, color .3s ease; }
.col-lg-4:nth-child(2n) .card-icon-frame { animation-delay: -1.6s; } .col-lg-4:nth-child(3n) .card-icon-frame { animation-delay: -3.2s; }
.audience-card:hover .card-icon-frame { transform: rotate(-10deg) scale(1.12); }
.disclaimer-banner { position: relative; overflow: hidden; border-radius: 26px; }
.disclaimer-banner::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; transform: skewX(-18deg); pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); animation: whShine 5s ease-in-out infinite; }
.disclaimer-icon { animation: whWiggle 4s ease-in-out infinite; }
 
/* ============================ 3. COURSES ============================ */
.section-courses-showcase { background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%); }
.courses-ambient-glow { animation: whDrift 14s ease-in-out infinite; }
.course-card-premium { border-radius: 30px; }
.course-card-premium::before { content: ""; position: absolute; left: -60px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(226,122,52,.16), transparent 70%); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.course-card-premium:hover::before { transform: scale(2.6) translate(20px,-20px); }
.course-card-premium > * { position: relative; z-index: 1; }
.course-card-premium .course-glow-line { position: absolute; z-index: 2; }
.course-card-premium:hover { transform: translateY(-12px); box-shadow: 0 34px 60px rgba(226,122,52,.22); border-color: var(--wn-rose); }
.course-icon-badge { animation: whFloat 5s ease-in-out infinite; }
.course-card-premium:hover .course-icon-badge { transform: rotate(-10deg) scale(1.12); }
.tool-tag { transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s ease, color .3s ease; }
.tool-tag:hover { transform: translateY(-4px) scale(1.07); }
.course-help-card, .course-card-wide { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.course-help-card:hover, .course-card-wide:hover { transform: translateY(-8px); box-shadow: 0 30px 56px rgba(226,122,52,.22); }
.help-icon { animation: whWiggle 4s ease-in-out infinite; }
 
/* ====================== 4. CREDENTIAL SECTION — LIGHT ====================== */
.nx-stage { background: linear-gradient(180deg, #fff 0%, #f6f7fa 42%, #edeff5 100%); color: var(--wn-plum); }
.nx-aurora i:nth-child(1) { background: #d0d7e6; opacity: .6; }
.nx-aurora i:nth-child(2) { background: #dde2ed; opacity: .7; }
.nx-aurora i:nth-child(3) { background: #d7deee; opacity: .55; }
.nx-grid { background-image: radial-gradient(rgba(226,122,52,.26) 1.2px, transparent 1.3px); }
.nx-marquee-track span { -webkit-text-stroke: 1.5px rgba(226,122,52,.2); }
.nx-chip { background: #fff; border: 1.5px solid var(--wn-border); color: var(--wn-rose); box-shadow: 0 10px 24px rgba(226,122,52,.14); }
.nx-title { color: var(--wn-plum); }
.nx-title em { background-image: linear-gradient(100deg, #e27a34, #9c4c16, #eaa06e, #e27a34); }
.nx-script { color: var(--wn-rose); }
.nx-sub { color: #545d71; }
.nx-label { color: var(--wn-rose); }
.nx-tab { background: #fff; border: 1.5px solid var(--wn-border); color: var(--wn-plum); box-shadow: 0 10px 24px rgba(22,26,57,.05); }
.nx-tab.in:hover { border-color: var(--wn-rose); box-shadow: 0 16px 34px rgba(226,122,52,.22); }
.nx-tab.in.on { background: linear-gradient(120deg, #e27a34, #9c4c16); color: #fff; border-color: transparent; box-shadow: 0 20px 44px rgba(226,122,52,.38); }
.nx-ti { background: #f3f4f8; color: var(--wn-rose); }
.nx-tab.on .nx-ti { background: #fff; color: var(--wn-rose); }
.nx-tab small { color: #6e7993; opacity: 1; }
.nx-tab.on small { color: rgba(255,255,255,.88); }
.nx-tab::after { background: rgba(255,255,255,.9); }
 
.nx-scene { padding: 56px 40px 40px; }
.nx-card::before { content: ""; position: absolute; left: 50%; top: -58px; width: 34px; height: 84px; margin-left: -17px; z-index: -1; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(226,122,52,0), #e27a34 35%, #b05619); }
.nx-face { border-radius: 38px; padding: 42px 36px 30px; border: 2px solid #fff;
  background: radial-gradient(circle at 10% 6%, #fff 0, transparent 42%), radial-gradient(circle at 92% 94%, #ebeff7 0, transparent 46%), linear-gradient(135deg, #fcfcfd 0%, #f3f5fa 48%, #eff2f8 100%);
  box-shadow: 0 34px 70px rgba(226,122,52,.28), 0 0 0 1.5px #e2e6ef, inset 0 0 0 6px rgba(255,255,255,.7); }
.nx-face::before { content: ""; position: absolute; z-index: 3; top: 14px; left: 50%; width: 58px; height: 12px; margin-left: -29px; border-radius: 10px; background: #e3e7f1; box-shadow: inset 0 2px 4px rgba(226,122,52,.35); }
.nx-face::after { content: ""; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(226,122,52,.18), transparent 70%); pointer-events: none; }
.nx-spk { position: absolute; z-index: 4; color: var(--wn-rose); animation: whTwinkle 3s ease-in-out infinite; pointer-events: none; }
.nx-spk.a { left: 22px; bottom: 96px; font-size: 1.1rem; } .nx-spk.b { right: 34px; top: 64px; font-size: .9rem; animation-delay: 1.2s; color: #e99b67; } .nx-spk.c { left: 46%; bottom: 20px; font-size: .8rem; animation-delay: 2s; }
.nx-top { border-bottom: 2px dashed #dadfea; padding-top: 4px; }
.nx-emblem { background: linear-gradient(135deg, #e27a34, #9c4c16); box-shadow: 0 10px 22px rgba(226,122,52,.4); animation: whFloat 4s ease-in-out infinite; }
.nx-pill { box-shadow: 0 6px 14px rgba(226,122,52,.15); }
.nx-qr { border-radius: 18px; box-shadow: 0 10px 22px rgba(226,122,52,.18); color: var(--wn-plum); }
.nx-course { color: var(--wn-plum); }
.nx-chips span:nth-child(1) { background: #f4f6fb; } .nx-chips span:nth-child(2) { background: #f2f5fa; } .nx-chips span:nth-child(3) { background: #f0f3f9; }
.nx-chips span:hover { background: linear-gradient(135deg, #e27a34, #9c4c16); }
.nx-foot { border-top: 2px dashed #dadfea; }
.nx-orb { background: #fff; color: var(--wn-rose); border: 1.5px solid var(--wn-border); box-shadow: 0 14px 28px rgba(226,122,52,.2); }
.nx-orb.on { background: linear-gradient(135deg, #e27a34, #9c4c16); color: #fff; border-color: transparent; box-shadow: 0 16px 38px rgba(226,122,52,.5); }
 
.nx-proof { margin-top: 120px; }
.nx-proof::before { top: 0; z-index: 0; background: linear-gradient(90deg, #e27a34, #dadfea); }
.nx-step { position: relative; z-index: 1; background: #fff; border: 1.5px solid var(--wn-border); border-radius: 28px; padding: 0 24px 30px; box-shadow: 0 14px 34px rgba(22,26,57,.06);
  transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0ms), transform .45s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; }
.nx-step.in:hover { transform: translateY(-12px); border-color: var(--wn-rose); box-shadow: 0 30px 56px rgba(226,122,52,.24); }
.nx-node { margin: -27px auto 20px; background: #fff; box-shadow: 0 10px 22px rgba(226,122,52,.28); }
.nx-step:hover .nx-node { background: linear-gradient(135deg, #e27a34, #9c4c16); color: #fff; }
.nx-step h4 { color: var(--wn-plum); }
.nx-step p { color: #545d71; }
@media (max-width: 991.98px) { .nx-proof { margin-top: 60px; } .nx-step { margin-top: 24px; } .nx-scene { padding: 56px 0 10px; } }
 
/* ============================ 5. COWORK ============================ */
.section-cowork-bespoke { background: linear-gradient(180deg, #fff 0%, #fafbfd 100%); }
.cowork-bespoke-glow { animation: whDrift 13s ease-in-out infinite; }
.cowork-unified-stage { transition: box-shadow .4s ease, transform .4s ease; }
.cowork-unified-stage:hover { box-shadow: 0 34px 80px rgba(226,122,52,.2); }
.space-select-row { transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.space-select-row:hover { transform: translateX(8px); box-shadow: 0 14px 30px rgba(226,122,52,.18); }
.space-row-num { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.space-select-row:hover .space-row-num, .space-select-row.active .space-row-num { transform: rotate(-8deg) scale(1.12); }
.perk-box { transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s ease, border-color .3s ease; }
.perk-box:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 34px rgba(226,122,52,.22); }
.perk-icon { display: inline-block; animation: whFloat 5s ease-in-out infinite; }
.rail-indicator-pulse { position: relative; }
 
@media (prefers-reduced-motion: reduce) {
  .hero-agency-clean::before, .wh-blob, .wh-orbit, .wh-node, .wh-spark, .main-hub-card, .main-hub-card, .hub-logo-icon, .wh-bar i, .wh-ticker-track,
  .section-audience::before, .audience-glow-ambient, .card-icon-frame, .disclaimer-banner::after, .disclaimer-icon, .courses-ambient-glow, .course-icon-badge, .help-icon,
  .nx-spk, .nx-emblem, .cowork-bespoke-glow, .perk-icon, .sat-pos-bottom-left { animation: none !important; }
  .hero-main-title .wh-w { animation: none; } .hero-main-title .future-cursive::after { animation: none; transform: scaleX(1); }
}
 
 
/* ====================== CREDENTIAL SECTION — COMPACT FIT ====================== */
.nx-stage { padding: 84px 0 70px; }
.nx-marquee { top: 14px; opacity: .8; }
.nx-marquee-track span { font-size: 2.6rem; letter-spacing: 3px; -webkit-text-stroke: 1.2px rgba(226,122,52,.16); }
.nx-head { margin-bottom: 38px; }
.nx-chip { margin-bottom: 16px; padding: 7px 18px; font-size: .74rem; }
.nx-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.12; margin-bottom: 12px; }
.nx-line { padding: .02em 0 .06em; }
.nx-line:nth-child(2), .nx-line:nth-child(3) { display: inline-block; margin: 0 .12em; }   /* 3 lines -> 2 lines */
.nx-script { font-size: 1.12em; }
.nx-sub { max-width: 620px; font-size: .98rem; line-height: 1.7; }
 
.nx-stage .row.g-5 { --bs-gutter-x: 2.4rem; --bs-gutter-y: 1.4rem; }
.nx-label { margin-bottom: 12px; font-size: .72rem; }
.nx-tabs { gap: 10px; }
.nx-tab { padding: 12px 18px; gap: 14px; border-radius: 18px; }
.nx-ti { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
.nx-tab b { font-size: .98rem; }
.nx-tab small { font-size: .74rem; }
.nx-tab.in.on { transform: translateX(8px); }
.nx-tab.in:hover { transform: translateX(5px); }
 
.nx-scene { max-width: 560px; margin: 0 auto; padding: 46px 28px 26px; }
.nx-card::before { top: -34px; width: 22px; height: 44px; margin-left: -11px; border-radius: 6px 6px 0 0; }
.nx-face { border-radius: 30px; padding: 30px 26px 22px; box-shadow: 0 24px 50px rgba(226,122,52,.26), 0 0 0 1.5px #e2e6ef, inset 0 0 0 5px rgba(255,255,255,.7); }
.nx-face::before { top: 10px; width: 46px; height: 9px; margin-left: -23px; }
.nx-top { padding-bottom: 14px; margin-bottom: 16px; gap: 10px; }
.nx-emblem { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 11px; }
.nx-auth b { font-size: .68rem; } .nx-auth small { font-size: .7rem; }
.nx-pill { padding: 5px 11px; font-size: .66rem; }
.nx-mid { gap: 14px; margin-bottom: 16px; }
.nx-qr { width: 54px; height: 54px; font-size: 1.9rem; border-radius: 14px; }
.nx-course { font-size: 1.32rem; min-height: 1.7rem; margin: 1px 0 4px; }
.nx-meta { font-size: .72rem; }
.nx-chips { gap: 8px; margin-bottom: 16px; }
.nx-chips span { padding: 5px 11px; font-size: .72rem; }
.nx-foot { padding-top: 12px; gap: 14px; }
.nx-bars { height: 22px; }
.nx-seal { width: 42px; height: 42px; } .nx-seal i { font-size: 2.6rem; } .nx-seal span { font-size: .48rem; }
.nx-stamp { right: 70px; bottom: 42px; padding: 4px 10px; font-size: .85rem; border-width: 2.5px; }
 
/* orbs: card ke kinaron par chipke, bikhre hue nahi */
.nx-orb { width: 46px; height: 46px; border-radius: 15px; font-size: 1.2rem; }
.o1 { top: 14px; left: 4px; } .o2 { top: 30%; right: 0; } .o3 { bottom: 24%; left: 0; } .o4 { bottom: 6px; right: 14px; }
 
.nx-proof { margin-top: 54px; gap: 22px; }
.nx-step { padding: 0 18px 22px; border-radius: 22px; }
.nx-node { width: 46px; height: 46px; margin: -23px auto 14px; font-size: .95rem; }
.nx-step h4 { font-size: 1.02rem; margin-bottom: 6px; }
.nx-step p { font-size: .86rem; line-height: 1.6; }
 
@media (max-width: 991.98px) {
  .nx-stage { padding: 64px 0 50px; }
  .nx-marquee-track span { font-size: 2rem; }
  .nx-scene { padding: 44px 0 10px; }
  .nx-tab.in.on, .nx-tab.in:hover { transform: none; }
  .nx-proof { margin-top: 40px; gap: 34px; }
}
@media (max-width: 575.98px) {
  .nx-line:nth-child(2), .nx-line:nth-child(3) { display: block; margin: 0; }
  .nx-title { font-size: 1.9rem; }
}
 
 
/* ===================================================
   IMAGES LAYER  (hero photo · audience · courses · cowork)
   Images yahan se aati hain: assets/img/home/
   Apni asli photo lagane ke liye same naam se file replace karein
   (ya index.php mein src ka extension .jpg / .webp kar dein).
   =================================================== */
.hub-photo, .card-photo, .course-photo, .space-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ebf3, #f4f5f9);   /* image na ho to bhi khali na dikhe */
}
.hub-photo img, .card-photo img, .course-photo img, .space-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}
 
/* ---- Hero: photo inside the hub card ---- */
.hub-photo {
  height: 150px;
  margin-bottom: 18px;
  border-radius: 20px;
  border: 1.5px solid var(--wn-border);
  box-shadow: 0 10px 24px rgba(22, 26, 57, .08);
}
.hub-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(22, 26, 57, .55) 100%);
}
.main-hub-card:hover .hub-photo img { transform: scale(1.07); }
.hub-photo-tag {
  position: absolute; z-index: 2; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 50px;
  font-size: .74rem; font-weight: 700; color: var(--wn-plum);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(22, 26, 57, .18);
}
.hub-photo-tag i { color: var(--wn-rose); }
 
/* ---- Audience cards: photo on top, full width ---- */
.card-photo {
  height: 150px;
  margin: -32px -28px 22px;          /* card ke padding ko cancel karke edge-to-edge */
}
.card-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 26, 57, .28) 0%, transparent 55%);
}
.audience-card:hover .card-photo img { transform: scale(1.1) rotate(.6deg); }
/* watermark number ab photo ke upar float karta hai */
.audience-card > .card-watermark-num {
  position: absolute; z-index: 3; top: 12px; right: 20px;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(22, 26, 57, .45);
}
.audience-card:hover > .card-watermark-num { color: #fff; transform: scale(1.12); }
 
/* ---- Course cards: thumbnail between tag row and title ---- */
.course-photo {
  height: 150px;
  margin-bottom: 20px;
  border-radius: 18px;
  border: 1.5px solid var(--wn-border);
}
.course-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(22, 26, 57, .3) 100%);
}
.course-card-premium:hover .course-photo img { transform: scale(1.1); }
.course-photo-side { height: 120px; margin-bottom: 16px; }
 
/* ---- Coworking: workspace photo in display engine ---- */
.space-photo {
  height: 160px;
  margin-bottom: 26px;
  border-radius: 20px;
  border: 1.5px solid var(--wn-border);
}
.space-photo img { transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, filter .5s ease; }
.space-display-engine:hover .space-photo img { transform: scale(1.06); }
.space-display-engine.night-theme-active .space-photo { border-color: rgba(255, 255, 255, .14); }
.space-display-engine.night-theme-active .space-photo img { filter: brightness(.78) saturate(1.15); }
 
@media (max-width: 991.98px) {
  .hub-photo { height: 130px; }
  .space-photo { height: 140px; }
}
@media (max-width: 575.98px) {
  .card-photo, .course-photo { height: 130px; }
  .course-photo-side { height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-photo img, .card-photo img, .course-photo img, .space-photo img { transition: none !important; transform: none !important; }
}
 
 
/* ===================================================
   HERO: affiliation logos strip (partner-strip)
   =================================================== */
.partner-strip { position: relative; overflow: hidden; margin-top: 26px; padding: 16px 24px 14px; background: #ffffff; border: 1.5px solid var(--color-blush-border, #dfe2ea); border-radius: 24px; box-shadow: 0 14px 30px rgba(22, 26, 57, .07); animation: partnerIn .9s cubic-bezier(.16, 1, .3, 1) .7s backwards; transition: border-color .35s, box-shadow .35s, transform .35s; }
.partner-strip:hover { border-color: var(--color-rose-accent, #ea580c); box-shadow: 0 20px 40px rgba(234, 88, 12, .15); transform: translateY(-3px); }
.partner-strip::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(234, 88, 12, .12), transparent); transform: skewX(-20deg); animation: partnerShine 6s ease-in-out infinite; pointer-events: none; }
.partner-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-rose-accent, #ea580c); }
.partner-label i { font-size: 1.05rem; }
.partner-logos { display: grid; grid-template-columns: .85fr 1.6fr .8fr 1.4fr; gap: 10px; align-items: stretch; }
.partner-logo { position: relative; display: grid; place-items: center; min-width: 0; height: 84px; padding: 10px 12px; background: #ffffff; border: 1.5px solid var(--color-blush-border, #dfe2ea); border-radius: 18px; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), border-color .3s, box-shadow .3s; animation: partnerPop .8s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.partner-logo:nth-child(1) { animation-delay: .9s; } .partner-logo:nth-child(2) { animation-delay: 1.02s; } .partner-logo:nth-child(3) { animation-delay: 1.14s; } .partner-logo:nth-child(4) { animation-delay: 1.26s; }
.partner-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 54px; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.partner-logo:hover { transform: translateY(-8px) scale(1.07); background: #ffffff; border-color: var(--color-rose-accent, #ea580c); box-shadow: 0 16px 30px rgba(234, 88, 12, .2); }
.partner-logo img { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.partner-logo:hover img { transform: scale(1.06); }
@keyframes partnerPop { from { opacity: 0; transform: translateY(26px) scale(.7); } }
@keyframes partnerIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes partnerShine { 0%, 55% { left: -60%; } 100% { left: 150%; } }
@media (max-width: 575.98px) { .partner-strip { padding: 14px 14px 12px; } .partner-logos { grid-template-columns: 1fr 1fr; } .partner-logo { height: 76px; } .partner-logo img { max-height: 46px; } }
@media (prefers-reduced-motion: reduce) { .partner-strip, .partner-strip::after, .partner-logo { animation: none; } }