/* =============================================================
   SUBHANKAR THEME — styles.css
   Design System: Subhankar Theme (derived from Collax Theme)
   Author: Portfolio Redesign — Phase 1
   Sections:
     01. Design Tokens (CSS variables)
     02. Reset & Base
     03. Accessibility Utilities
     04. Custom Cursor
     05. Hero Section
     06. Clients Marquee
     07. Section Globals
     08. About Section
     09. AI Tools Section
     10. Projects Section
     11. Skills Section
     12. Companies Orbit Section
     13. Process Section
     14. Chronicles Section
     15. CTA Section
     16. Scroll Reveal Animations
     17. Video Popup
     18. Responsive — Tablet (max 991px)
     19. Responsive — Mobile (max 767px)
     20. Reduced Motion
================================================================ */

/* ---------------------------------------------------------------
   01. DESIGN TOKENS
--------------------------------------------------------------- */
:root {
  /* Brand — Subhankar Theme */
  --tp-theme-1:           #5956E9;
  --tp-theme-2:           #423EF3;
  --tp-theme-primary:     #FFDC60;
  --tp-common-white:      #ffffff;
  --tp-common-black:      #0D0D12;
  --tp-grey-1:            #F7F8FD;
  --tp-text-body:         #6B7280;
  --tp-border-1:          #E8ECF2;

  /* Semantic aliases */
  --accent-violet:        #5956E9;
  --accent-yellow:        #FFDC60;
  --accent-glow:          rgba(89, 86, 233, 0.12);
  --text-primary:         #0D0D12;
  --text-secondary:       #6B7280;
  --text-tertiary:        #9CA3AF;

  /* Surfaces */
  --surface-1:            #FAFAFA;
  --surface-2:            #F4F4F6;
  --surface-dark:         #0D0D12;
  --surface-card:         #ffffff;

  /* Border radius — per Subhankar Theme §17 rule 6 */
  --radius-sm:            10px;   /* buttons */
  --radius-md:            16px;
  --radius-lg:            24px;   /* cards */
  --radius-xl:            32px;

  /* Shadows */
  --shadow-card:          0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-hover:         0 4px 24px rgba(89,86,233,.14), 0 1px 4px rgba(0,0,0,.08);

  /* Transitions — per Subhankar Theme §17 rule 10 */
  --transition:           0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:      0.2s ease-out;
  --transition-btn:       0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* Typography */
  --ff-body:              'DM Sans', sans-serif;
}


/* ---------------------------------------------------------------
   02. RESET & BASE
--------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--ff-body);
  color: var(--text-primary);
  background: var(--tp-common-white);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: none; }

::selection { background: var(--tp-common-black); color: #ffffff; }


/* ---------------------------------------------------------------
   03. ACCESSIBILITY UTILITIES
--------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--accent-violet);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  z-index: 100000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}

/* Visible focus states for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-violet);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---------------------------------------------------------------
   04. CUSTOM CURSOR (desktop / pointer only)
--------------------------------------------------------------- */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-violet);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: transform 0.1s ease, opacity 0.3s ease;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(89, 86, 233, 0.4);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.3s ease,
    height 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.cursor-ring.is-hovering {
  width: 56px;
  height: 56px;
  border-color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.06);
}

/* Hide on touch devices */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring { display: none !important; }
}


/* ---------------------------------------------------------------
   05. HERO SECTION
--------------------------------------------------------------- */
.pr-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 140px 0 80px;
  background: var(--tp-common-white);
  clip-path: inset(0 0 0 0);
}

/* Dot-grid background */
.pr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(89, 86, 233, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 86, 233, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
  pointer-events: none;
}

/* Noise overlay */
.pr-hero__noise {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* Ambient gradient blobs */
.pr-hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.5;
  max-width: 100vw;
  overflow: hidden;
}
.pr-hero__blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(89, 86, 233, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: blobFloat1 12s ease-in-out infinite;
}
.pr-hero__blob--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 220, 96, 0.2) 0%, transparent 70%);
  bottom: 0;
  left: -100px;
  animation: blobFloat2 15s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-30px, 40px) scale(1.05); }
  66%       { transform: translate(20px, -20px) scale(0.95); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(40px, -30px) scale(1.08); }
}

/* --- Hero inner grid --- */
.pr-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --- Badges / kicker pill --- */
.pr-hero__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.pr-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.08);
  border: 1px solid rgba(89, 86, 233, 0.15);
  padding: 6px 14px;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}
.pr-hero__kicker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ph-shimmer 3.5s ease-in-out 1.8s infinite;
}
.pr-hero__kicker--yellow {
  background: rgba(255, 220, 96, 0.1);
  border-color: rgba(255, 220, 96, 0.3);
  color: #7a6200;
}
.pr-hero__kicker--yellow::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,220,96,.45) 50%, transparent 100%);
}

.kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: kickerPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.kicker-dot--yellow { background: var(--accent-yellow); }
.kicker-dot--violet { background: var(--accent-violet); }

@keyframes kickerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* --- Headline --- */
.pr-hero__headline {
  font-family: var(--ff-body);
  font-size: clamp(36px, 4vw, 72px);
  line-height: 1.06;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 22px;
  letter-spacing: -0.025em;
}
.pr-hero__headline em {
  font-style: italic;
  color: var(--accent-violet);
}

/* --- Sub-heading --- */
.pr-hero__sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 36px;
  font-weight: 400;
  max-width: 480px;
}

/* --- Action buttons --- */
.pr-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text-primary);
  color: #ffffff;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.btn-primary-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.btn-primary-hero:hover::before { transform: scaleX(1); }
.btn-primary-hero span,
.btn-primary-hero i { position: relative; z-index: 1; }
.btn-primary-hero:hover { color: #ffffff; }

.btn-ghost-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid var(--tp-border-1);
  transition: var(--transition);
}
.btn-ghost-hero:hover {
  border-color: var(--accent-violet);
  color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.04);
}
.btn-ghost-hero--inline { display: inline-flex; }

/* --- Hero right: portrait image --- */
.pr-hero__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-hero__img-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.pr-hero__img-frame img {
  width: 100%;
  border-radius: var(--radius-xl);
}

/* --- Floating tag pills --- */
.pr-hero__tag {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--tp-border-1);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.pr-hero__tag--1 { top: 36px; left: -16px; animation: floatA 5s ease-in-out infinite; }
.pr-hero__tag--2 { bottom: 80px; right: -8px; animation: floatB 6s ease-in-out infinite; }
.pr-hero__tag--3 { bottom: 28px; left: 16px; animation: floatC 7s ease-in-out infinite; }

.tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-dot--violet { background: var(--accent-violet); }
.tag-dot--green  { background: #22c55e; }
.tag-figma-icon  { color: #F24E1E; }

@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* --- Quick links bar --- */
.pr-hero__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.pr-hero__link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-right: 1px solid var(--tp-border-1);
  background: #ffffff;
  min-height: 68px;
}
.pr-hero__link-item:last-child { border-right: none; }
.pr-hero__link-item:hover {
  color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.04);
}
.pr-hero__link-item i { font-size: 18px; flex-shrink: 0; }

/* Icon brand colors */
.pr-icon-linkedin  { color: #0A66C2; }
.pr-icon-behance   { color: #053EFF; }
.pr-icon-youtube   { color: #FF0000; }
.pr-icon-violet    { color: var(--accent-violet); }

/* --- Hero entrance animations --- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

.hero-anim-1 { animation: heroFadeUp 0.8s 0.20s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-anim-2 { animation: heroFadeUp 0.8s 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-anim-3 { animation: heroFadeUp 0.8s 0.52s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-anim-4 { animation: heroFadeUp 0.8s 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-anim-5 { animation: heroFadeUp 0.8s 0.78s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-anim-right { animation: heroFadeRight 0.9s 0.50s cubic-bezier(0.16, 1, 0.3, 1) both; }


/* ---------------------------------------------------------------
   06. CLIENTS MARQUEE STRIP
--------------------------------------------------------------- */
.pr-clients {
  overflow: hidden;
  background: var(--surface-dark);
  position: relative;
  isolation: isolate;
}
.pr-clients__inner {
  padding: 40px 0;
}
.pr-clients__label {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 24px;
}

.pr-marquee-wrap {
  overflow: hidden;
  width: 100%;
}
.pr-marquee-track {
  display: flex;
  gap: 0;
  animation: marqueeScroll 24s linear infinite;
  width: max-content;
}
.pr-marquee-track:hover { animation-play-state: paused; }

.pr-marquee-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.pr-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  cursor: default;
  white-space: nowrap;
}
.pr-client-chip:hover { color: rgba(255, 255, 255, 0.95); }

.chip-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
}
.chip-icon svg { width: 100%; height: 100%; }
.chip-icon--sap       { color: #1C64BE; }
.chip-icon--coursera  { color: #0056D2; }
.chip-icon--uipath    { color: #d54d23; }
.chip-icon--alstom    { color: #DB000C; }
.chip-icon--udemy     { color: #BE32F5; }
.chip-icon--acct,
.chip-icon--factile   { color: rgba(255,255,255,0.7); }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ---------------------------------------------------------------
   07. SECTION GLOBALS
--------------------------------------------------------------- */
.pr-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: 20px;
}
.pr-section-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--accent-violet);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Modifiers */
.pr-section-label--center { justify-content: center; }
.pr-section-label--yellow {
  color: rgba(255, 220, 96, 0.9);
}
.pr-section-label--yellow::before {
  background: rgba(255, 220, 96, 0.9);
}

.pr-section-title {
  font-family: var(--ff-body);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 20px;
}
.pr-section-title em {
  font-style: italic;
  color: var(--accent-violet);
}
.pr-section-title--white { color: #ffffff; }

.em--yellow { color: var(--accent-yellow); }

.pr-section-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 540px;
}
.pr-section-body--center { margin: 0 auto; }


/* ---------------------------------------------------------------
   08. ABOUT SECTION
--------------------------------------------------------------- */
.pr-about {
  padding: 120px 0;
  background: var(--tp-common-white);
}
.pr-about__left { padding-right: 40px; }

.pr-about__img-stack {
  position: relative;
  height: 480px;
}
.pr-about__img-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pr-about__img-main img { width: 100%; display: block; }

.pr-about__img-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: var(--shadow-hover);
  background: var(--surface-1);
  padding: 24px;
}
.pr-about__img-accent-inner {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}
.pr-about__img-accent-inner strong {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-violet);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pr-about__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ---------------------------------------------------------------
   09. AI TOOLS SECTION
--------------------------------------------------------------- */
.pr-ai-tools {
  padding: 100px 0;
  background: var(--surface-dark);
  overflow: hidden;
  position: relative;
}

.pr-ai-tools__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pr-ai-tools__glow--1 {
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(89, 86, 233, 0.2) 0%, transparent 70%);
}
.pr-ai-tools__glow--2 {
  bottom: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 220, 96, 0.1) 0%, transparent 70%);
}

.pr-ai-tools__container {
  position: relative;
  z-index: 1;
}

.pr-ai-tools__intro-body {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
  margin: 0 auto;
}

.pr-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.pr-ai-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: var(--transition);
  cursor: default;
}
.pr-ai-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(89, 86, 233, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(89, 86, 233, 0.2);
}

.pr-ai-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pr-ai-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pr-ai-card__icon--claude     { background: linear-gradient(135deg, #CC785C, #D4A27F); }
.pr-ai-card__icon--gemini     { background: linear-gradient(135deg, #1A73E8, #4285F4); }
.pr-ai-card__icon--chatgpt    { background: linear-gradient(135deg, #19C37D, #0DA37F); }
.pr-ai-card__icon--figma      { background: linear-gradient(135deg, #F24E1E, #FF7262); color: #ffffff; font-size: 18px; }
.pr-ai-card__icon--grok       { background: linear-gradient(135deg, #FF6B35, #FF9B35); }
.pr-ai-card__icon--midjourney { background: linear-gradient(135deg, #6366F1, #8B5CF6); }

.pr-ai-card__name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.pr-ai-card__role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.pr-ai-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}

.pr-ai-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pr-ai-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  border-width: 1px;
  border-style: solid;
}
.pr-ai-tag--claude     { background: rgba(204,120,92,0.15); color: rgba(204,120,92,0.9);  border-color: rgba(204,120,92,0.2);  }
.pr-ai-tag--gemini     { background: rgba(66,133,244,0.15);  color: rgba(66,133,244,0.9);  border-color: rgba(66,133,244,0.2);  }
.pr-ai-tag--chatgpt    { background: rgba(25,195,125,0.15);  color: rgba(25,195,125,0.9);  border-color: rgba(25,195,125,0.2);  }
.pr-ai-tag--figma      { background: rgba(242,78,30,0.15);   color: rgba(242,78,30,0.9);   border-color: rgba(242,78,30,0.2);   }
.pr-ai-tag--grok       { background: rgba(255,107,53,0.15);  color: rgba(255,107,53,0.9);  border-color: rgba(255,107,53,0.2);  }
.pr-ai-tag--midjourney { background: rgba(99,102,241,0.15);  color: rgba(99,102,241,0.9);  border-color: rgba(99,102,241,0.2);  }

.pr-ai-tools__tagline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.35);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}


/* ---------------------------------------------------------------
   10. PROJECTS SECTION
--------------------------------------------------------------- */
.pr-projects {
  padding: 120px 0;
  background: var(--surface-1);
}

.pr-projects__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 32px;
  flex-wrap: nowrap;
}
.pr-projects__header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.pr-projects__header .pr-section-title {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Filter tabs */
.pr-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pr-filter-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--tp-border-1);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.pr-filter-tab:hover,
.pr-filter-tab.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #ffffff;
}

/* Project grid */
.pr-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Base card */
.pr-project-card {
  background: #ffffff;
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}
.pr-project-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* Featured card: full-width horizontal */
.pr-project-card--featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 420px 1fr;
}

.pr-project-card__img {
  overflow: hidden;
  background: var(--surface-2);
  height: 220px;
  flex-shrink: 0;
}
.pr-project-card__img a { display: block; height: 100%; }
.pr-project-card--featured .pr-project-card__img {
  height: 100%;
  min-height: 240px;
}
.pr-project-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pr-project-card:hover .pr-project-card__img img {
  transform: scale(1.04);
}

.pr-project-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pr-project-card--featured .pr-project-card__body {
  justify-content: center;
  padding: 28px 32px;
}

.pr-project-card__category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: 6px;
}
.pr-project-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}
.pr-project-card--featured .pr-project-card__title {
  font-size: 22px;
  margin-bottom: 10px;
}
.pr-project-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 14px;
}
.pr-project-card--featured .pr-project-card__desc {
  font-size: 15px;
  line-height: 1.7;
}

/* Metric chips */
.pr-project-card__metrics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pr-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #3d3b9e;
  background: rgba(89, 86, 233, 0.07);
  border: 1px solid rgba(89, 86, 233, 0.18);
  padding: 4px 10px;
  border-radius: 100px;
}
.metric-val { color: var(--accent-violet); }

.pr-project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s;
  margin-top: auto;
}
.pr-project-card__link:hover {
  gap: 9px;
  color: var(--accent-violet);
}


/* ---------------------------------------------------------------
   11. SKILLS SECTION
--------------------------------------------------------------- */
.pr-skills {
  padding: 100px 0;
  background: var(--tp-common-white);
}
.pr-skills__intro { margin-bottom: 56px; }
.pr-skills__title {
  white-space: nowrap;
  font-size: clamp(32px, 3.5vw, 52px);
}

.pr-skills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.pr-skill-group {
  padding: 32px;
  background: var(--surface-1);
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.pr-skill-group:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: rgba(89, 86, 233, 0.2);
}
.pr-skill-group__icon {
  width: 44px;
  height: 44px;
  background: rgba(89, 86, 233, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent-violet);
  font-size: 18px;
}
.pr-skill-group__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}
.pr-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pr-skill-tag {
  font-size: 13px;
  font-weight: 500;
  color: #4B5563;
  background: #ffffff;
  border: 1px solid var(--tp-border-1);
  padding: 6px 14px;
  border-radius: 100px;
  transition: var(--transition);
}
.pr-skill-group:hover .pr-skill-tag {
  background: rgba(89, 86, 233, 0.06);
  border-color: rgba(89, 86, 233, 0.15);
  color: var(--accent-violet);
}




/* ---------------------------------------------------------------
   12. COMPANIES ORBIT SECTION
--------------------------------------------------------------- */
.pr-companies {
  padding: 100px 0;
  background: var(--tp-common-white);
  overflow: hidden;
}

.pr-companies__orb-stage {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

/* Pulsing core */
.pr-orb-core {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: orbCorePulse 3s ease-in-out infinite;
}
.pr-orb-core svg { width: 36px; height: 36px; }

@keyframes orbCorePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89,86,233,0.4), 0 0 0 0 rgba(89,86,233,0.2); }
  50%       { box-shadow: 0 0 0 20px rgba(89,86,233,0.1), 0 0 0 40px rgba(89,86,233,0.05); }
}

/* Orbit rings */
.pr-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(89, 86, 233, 0.15);
  top: 50%;
  left: 50%;
}
.pr-orbit--1 {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  animation: orbitSpin1 18s linear infinite;
}
.pr-orbit--2 {
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  animation: orbitSpin2 28s linear infinite;
}

@keyframes orbitSpin1 { from { transform: rotate(0deg); }    to { transform: rotate(360deg); }  }
@keyframes orbitSpin2 { from { transform: rotate(0deg); }    to { transform: rotate(-360deg); } }

/* Nodes on orbits */
.pr-orbit-node {
  position: absolute;
  width: 56px;
  height: 56px;
  background: #ffffff;
  border: 1.5px solid var(--tp-border-1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  transition: var(--transition);
  cursor: default;
}
.pr-orbit-node:hover {
  border-color: var(--accent-violet);
  box-shadow: var(--shadow-hover);
  transform: scale(1.15);
}

/* Counter-rotate so labels stay upright */
.pr-orbit--1 .pr-orbit-node { animation: counterSpin1 18s linear infinite; }
.pr-orbit--2 .pr-orbit-node { animation: counterSpin2 28s linear infinite; }
@keyframes counterSpin1 { from { transform: rotate(0deg); }    to { transform: rotate(-360deg); } }
@keyframes counterSpin2 { from { transform: rotate(0deg); }    to { transform: rotate(360deg); }  }

/* Node positions */
.pr-orbit--1 .node-0 { top: -28px; left: 50%; margin-left: -28px; }
.pr-orbit--1 .node-1 { bottom: -28px; left: 50%; margin-left: -28px; }
.pr-orbit--2 .node-0 { top: -28px; left: 50%; margin-left: -28px; }
.pr-orbit--2 .node-1 { right: -28px; top: 50%; margin-top: -28px; }
.pr-orbit--2 .node-2 { bottom: -28px; left: 50%; margin-left: -28px; }
.pr-orbit--2 .node-3 { left: -28px; top: 50%; margin-top: -28px; }

/* Orbit label colors */
.orbit-label         { font-size: 10px; font-weight: 700; }
.orbit-label--alstom   { color: #009de0; }
.orbit-label--sap      { color: #0070AD; }
.orbit-label--capgemini{ color: #0070AD; }
.orbit-label--udemy    { color: #E06F21; }
.orbit-label--coursera { color: #0056D2; }
.orbit-label--uipath   { color: #e84c39; }

/* Company cards below orbit */
.pr-companies__list {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.pr-company-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--surface-1);
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition);
}
.pr-company-card:hover {
  background: #ffffff;
  border-color: var(--accent-violet);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  color: var(--accent-violet);
}
.cc-icon {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-violet);
  border: 1px solid var(--tp-border-1);
}
.cc-icon--sap       { color: #0070AD; }
.cc-icon--alstom    { color: #DB000C; }
.cc-icon--udemy     { color: #BE32F5; }
.cc-icon--coursera  { color: #0056D2; }
.cc-icon--uipath    { color: #d54d23; }


/* ---------------------------------------------------------------
   13. DESIGN PROCESS SECTION
--------------------------------------------------------------- */
.pr-process {
  padding: 100px 0;
  background: var(--surface-dark);
  position: relative;
  overflow: hidden;
}
.pr-process__glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(89, 86, 233, 0.2) 0%, transparent 65%);
  pointer-events: none;
}

.pr-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.pr-step {
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.pr-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(89, 86, 233, 0.1), transparent);
  opacity: 0;
  transition: var(--transition);
}
.pr-step:hover::before { opacity: 1; }
.pr-step:hover {
  border-color: rgba(89, 86, 233, 0.4);
  transform: translateY(-4px);
}
.pr-step__num {
  font-size: 48px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.pr-step__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(89, 86, 233, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin-bottom: 20px;
}
.pr-step__title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px;
}
.pr-step__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}


/* ---------------------------------------------------------------
   14. CREATIVE CHRONICLES SECTION
--------------------------------------------------------------- */
.pr-chronicles {
  padding: 100px 0;
  background: var(--surface-1);
}

.pr-chronicles__slider-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  max-width: 100vw;
}
/* Fade edges */
.pr-chronicles__slider-wrap::before,
.pr-chronicles__slider-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
}
.pr-chronicles__slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--surface-1), transparent);
}
.pr-chronicles__slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--surface-1), transparent);
}

.pr-chronicles__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: chroniclesScroll 22s linear infinite;
}
.pr-chronicles__track:hover { animation-play-state: paused; }

@keyframes chroniclesScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pr-story-card {
  background: #ffffff;
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  flex-shrink: 0;
  width: 280px;
}
.pr-story-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: transparent;
}
.pr-story-card__img {
  overflow: hidden;
  height: 200px;
}
.pr-story-card__img a { display: block; height: 100%; }
.pr-story-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pr-story-card:hover .pr-story-card__img img { transform: scale(1.06); }

.pr-story-card__body { padding: 20px; }
.pr-story-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.08);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.pr-story-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
}
.pr-story-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.pr-story-card__title a:hover { color: var(--accent-violet); }


/* ---------------------------------------------------------------
   15. CTA SECTION
--------------------------------------------------------------- */
.pr-cta {
  padding: 120px 0;
  background: var(--tp-common-white);
  text-align: center;
}
.pr-cta__inner {
  max-width: 700px;
  margin: 0 auto;
}
.pr-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-violet);
  background: rgba(89, 86, 233, 0.08);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 32px;
}
.pr-cta__title {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.pr-cta__title em {
  font-style: italic;
  color: var(--accent-violet);
}
.pr-cta__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 48px;
}
.pr-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--btn-bg, var(--accent-violet));
  color: #ffffff;
  padding: 18px 32px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 20px var(--btn-shadow, rgba(89,86,233,.3));
}
.btn-cta-primary:hover {
  background: var(--btn-hover, #4340e0);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--btn-hover-shadow, rgba(89,86,233,.4));
  color: #ffffff;
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  padding: 18px 28px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid var(--btn-border, var(--tp-border-1));
  transition: var(--transition);
}
.btn-cta-secondary:hover {
  border-color: var(--btn-hover-color, var(--accent-violet));
  color: var(--btn-hover-color, var(--accent-violet));
  background: var(--btn-hover-bg, rgba(89,86,233,.04));
}
.btn-cta-primary:active {
  background: var(--btn-hover, #3938c8);
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--btn-shadow, rgba(89,86,233,.3));
  color: #fff;
}
.btn-cta-secondary:active {
  background: var(--btn-active-bg, rgba(89,86,233,.08));
  color: var(--btn-hover-color, var(--accent-violet));
  border-color: var(--btn-hover-color, var(--accent-violet));
}
.btn-cta-primary:focus-visible,
.btn-cta-secondary:focus-visible {
  outline: 3px solid var(--btn-bg, var(--accent-violet));
  outline-offset: 3px;
}


/* ---------------------------------------------------------------
   16. SCROLL REVEAL ANIMATIONS
--------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }


/* ---------------------------------------------------------------
   17. VIDEO POPUP
--------------------------------------------------------------- */
.sr-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.sr-popup-overlay.is-active { display: flex; }

.sr-popup-content {
  position: relative;
  width: 90%;
  max-width: 760px;
  background: #111;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sr-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-primary);
  z-index: 10;
  border: none;
  line-height: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.sr-popup-close:hover {
  background: var(--accent-violet);
  color: #ffffff;
  transform: scale(1.1);
}
.sr-popup-video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
}


/* ---------------------------------------------------------------
   18. RESPONSIVE — TABLET (max-width: 991px)
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero */
  .pr-hero {
    padding: 100px 0 60px;
    min-height: auto;
  }
  .pr-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pr-hero__right { order: 2; }
  .pr-hero__left  { order: 1; }
  .pr-hero__img-frame { max-width: 400px; margin: 0 auto; }
  .pr-hero__links { grid-template-columns: repeat(4, 1fr); margin-top: 36px; }
  .pr-hero__sub { max-width: 100%; }

  /* Sections */
  .pr-about { padding: 80px 0; }
  .pr-about__left { padding-right: 0; }
  .pr-about__img-stack { height: auto; margin-bottom: 32px; }
  .pr-about__img-main { position: static; width: 100%; }
  .pr-about__img-accent { display: none; }

  .pr-experience { padding: 80px 0; }

  .pr-ai-grid { grid-template-columns: repeat(2, 1fr); }

  .pr-projects__grid { grid-template-columns: repeat(2, 1fr); }
  .pr-project-card--featured {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }

  .pr-skills__grid { grid-template-columns: repeat(2, 1fr); }
  .pr-skills__title { white-space: normal; }

  .pr-process__steps { grid-template-columns: repeat(2, 1fr); }

  .pr-story-card { width: 240px; }

  .pr-companies { padding: 70px 0; }
}


/* ---------------------------------------------------------------
   19. RESPONSIVE — MOBILE (max-width: 767px)
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero */
  .pr-hero { padding: 90px 0 48px; min-height: auto; }
  .pr-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .pr-hero__right { order: 2; }
  .pr-hero__left  { order: 1; }
  .pr-hero__badges { margin-bottom: 18px; gap: 8px; }
  .pr-hero__kicker { font-size: 11px; padding: 5px 12px; }
  .pr-hero__headline { font-size: clamp(30px, 8.5vw, 44px); margin-bottom: 16px; }
  .pr-hero__sub { font-size: 15px; line-height: 1.65; margin-bottom: 28px; max-width: 100%; }
  .pr-hero__actions { flex-direction: column; gap: 10px; }
  .btn-primary-hero,
  .btn-ghost-hero { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
  .pr-hero__img-frame { max-width: 100%; }
  .pr-hero__img-frame img { border-radius: 20px; }
  .pr-hero__tag { display: none; }
  .pr-hero__links {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 28px;
    border-radius: 14px;
  }
  .pr-hero__link-item {
    padding: 16px 12px;
    min-height: 60px;
    font-size: 13px;
    border-right: 1px solid var(--tp-border-1);
    border-bottom: 1px solid var(--tp-border-1);
  }
  .pr-hero__link-item:nth-child(3),
  .pr-hero__link-item:nth-child(4) { border-bottom: none; }
  .pr-hero__link-item:nth-child(2),
  .pr-hero__link-item:nth-child(4) { border-right: none; }
  .pr-hero__link-item i   { font-size: 16px; }
  .pr-hero__link-item span{ font-size: 12px; }

  /* Section titles */
  .pr-section-title { font-size: clamp(22px, 6vw, 34px); }
  .pr-skills__title { white-space: normal !important; font-size: clamp(28px, 5vw, 48px) !important; }
  .pr-section-body  { font-size: 15px; }

  /* About */
  .pr-about { padding: 60px 0; }

  /* AI Tools */
  .pr-ai-grid { grid-template-columns: 1fr; }

  /* Projects */
  .pr-projects { padding: 60px 0; }
  .pr-projects__header { flex-direction: column; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; }
  .pr-projects__header .pr-section-title { white-space: normal; }
  .pr-projects__grid { grid-template-columns: 1fr; gap: 12px; }
  .pr-project-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
  .pr-project-card--featured .pr-project-card__body { padding: 20px; }
  .pr-project-card--featured .pr-project-card__title { font-size: 18px; }
  .pr-filter-tab { font-size: 12px; padding: 6px 14px; }

  /* Skills */
  .pr-skills { padding: 60px 0; }
  .pr-skills__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .pr-skill-group { padding: 20px; }

  /* Companies */
  .pr-companies { padding: 60px 0; }
  .pr-companies__orb-stage { height: 200px; }
  .pr-orbit--2 { display: none; }
  .pr-orbit--1 { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .pr-orbit--1 .node-0 { top: -24px; }
  .pr-orbit--1 .node-1 { bottom: -24px; }
  .pr-orb-core { width: 72px; height: 72px; }
  .pr-orb-core svg { width: 28px; height: 28px; }
  .pr-companies__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pr-companies__list::-webkit-scrollbar { display: none; }
  .pr-company-card { flex-shrink: 0; padding: 10px 14px; font-size: 13px; }

  /* Process */
  .pr-process { padding: 60px 0; }
  .pr-process__steps { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .pr-step { padding: 22px; }
  .pr-step__num { font-size: 36px; margin-bottom: 10px; }

  /* Chronicles */
  .pr-chronicles { padding: 60px 0; }
  .pr-story-card { width: 220px; }
  .pr-story-card__img { height: 100px; }

  /* CTA */
  .pr-cta { padding: 60px 0; }
  .pr-cta__title { font-size: clamp(26px, 7vw, 38px); }
  .pr-cta__sub { font-size: 15px; }
  .pr-cta__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-cta-primary,
  .btn-cta-secondary { justify-content: center; width: 100%; }

  /* Clients marquee */
  .pr-clients__inner { padding: 24px 0; }
}


/* ---------------------------------------------------------------
   20. REDUCED MOTION
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep layout-critical transitions at a safer minimal duration */
  .pr-project-card,
  .pr-step,
  .pr-skill-group,
  .pr-company-card,
  .pr-ai-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
    transform: none !important;
  }
}


/* =============================================================
   CSS_CHANGES.css — Subhankar Rout Portfolio
   Append the contents of this file to the BOTTOM of styles.css
   (after section 20. REDUCED MOTION).

   SECTIONS IN THIS PATCH:
     §01  Hero spacing fix (pr-hero--spaced modifier)
     §02  Responsive hero — tablet improvements
     §03  Responsive hero — mobile improvements
     §04  Responsive general — tablet improvements
     §05  Responsive general — mobile improvements
     §06  Creative Chronicles — Swiper carousel replacement
     §07  Chronicles pagination dots
     §08  Filter tabs — mobile scrollable
     §09  Projects grid — tablet & mobile
     §10  About section — responsive
     §11  AI Grid — mobile single column fix
     §12  Skills grid — gap & card padding
     §13  Process grid — mobile stack
     §14  CTA section — full-width buttons on mobile
     §15  Footer — responsive stack
     §16  Scroll-to-top button

   WHY APPENDED LAST:
   Appending to the bottom gives this patch the highest specificity
   priority without needing to restructure the existing file.
================================================================ */


/* ---------------------------------------------------------------
   §01  HERO SPACING FIX
   pr-hero--spaced is added to the <section> element in HTML.
   Uses !important to override any conflicting theme utility
   classes (e.g. bootstrap .pt-* or custom-animation.css overrides).
   The three breakpoints mirror the existing responsive structure.
--------------------------------------------------------------- */
.pr-hero--spaced {
  /* Desktop: header is ~80px tall; 140px gives 60px visual breathing room */
  padding-top: 180px !important;
}

@media only screen and (max-width: 991px) {
  /* Tablet: mobile header ~70px; 110px top gives 40px clearance */
  .pr-hero--spaced {
    padding-top: 160px !important;
  }
}

@media (max-width: 767px) {
  /* Mobile: header ~64px; 96px top gives 32px clearance */
  .pr-hero--spaced {
    padding-top: 120px !important;
  }
}


/* ---------------------------------------------------------------
   §02  RESPONSIVE HERO — TABLET (max-width: 991px) IMPROVEMENTS
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

  /* Stack inner grid: image above text removed to below on tablet */
  .pr-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Increase bottom padding of hero on tablet for the links bar */
  .pr-hero {
    padding-bottom: 56px;
  }

  /* Center the text content on tablet */
  .pr-hero__left {
    text-align: left;
  }

  /* Constrain image width on tablet */
  .pr-hero__img-frame {
    max-width: 380px;
    margin: 0 auto;
  }

  /* 4-column quick links on tablet (original had 4 cols, keep it) */
  .pr-hero__links {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
  }

  /* Reduce headline slightly */
  .pr-hero__headline {
    font-size: clamp(32px, 5vw, 52px);
  }
}


/* ---------------------------------------------------------------
   §03  RESPONSIVE HERO — MOBILE (max-width: 767px) IMPROVEMENTS
--------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Increase hero inner gap on very small screens */
  .pr-hero__inner {
    gap: 28px;
  }

  /* Headline: fluid clamp so it never breaks layout */
  .pr-hero__headline {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.1;
    margin-bottom: 14px;
  }

  /* Sub text */
  .pr-hero__sub {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  /* Kicker badge */
  .pr-hero__kicker {
    font-size: 11px;
    padding: 5px 11px;
  }
  .pr-hero__badges {
    margin-bottom: 16px;
  }

  /* Buttons: stack full-width */
  .pr-hero__actions {
    flex-direction: column;
    gap: 10px;
  }
  .btn-primary-hero,
  .btn-ghost-hero {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Image frame: allow full container width */
  .pr-hero__img-frame {
    max-width: 100%;
  }
  .pr-hero__img-frame img {
    border-radius: 20px;
  }

  /* Hide floating tag pills on mobile (they clip off-screen) */
  .pr-hero__tag {
    display: none;
  }

  /* Quick links bar: 2×2 grid on mobile */
  .pr-hero__links {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 24px;
    border-radius: 14px;
  }
  .pr-hero__link-item {
    padding: 15px 10px;
    min-height: 58px;
    font-size: 12px;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid var(--tp-border-1);
    border-bottom: 1px solid var(--tp-border-1);
  }
  .pr-hero__link-item:nth-child(2),
  .pr-hero__link-item:nth-child(4) { border-right: none; }
  .pr-hero__link-item:nth-child(3),
  .pr-hero__link-item:nth-child(4) { border-bottom: none; }
  .pr-hero__link-item i { font-size: 18px; }
  .pr-hero__link-item span { font-size: 11px; }
}


/* ---------------------------------------------------------------
   §04  RESPONSIVE GENERAL — TABLET improvements
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

  /* Container side padding */
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
  }

  /* Prevent any section from creating horizontal overflow */
  section {
    overflow-x: hidden;
  }

  /* About: collapse side-by-side into stacked */
  .pr-about {
    padding: 72px 0;
  }
  .pr-about__left {
    padding-right: 0;
  }
  .pr-about__img-stack {
    height: auto;
    margin-bottom: 32px;
  }
  .pr-about__img-main {
    position: static;
    width: 100%;
  }
  .pr-about__img-accent {
    /* Move accent quote beneath image on tablet */
    position: static;
    width: 100%;
    margin-top: 16px;
  }

  /* AI Grid: 2 columns on tablet */
  .pr-ai-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Section titles: allow wrapping */
  .pr-section-title {
    white-space: normal;
  }

  /* Process: 2 columns */
  .pr-process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}


/* ---------------------------------------------------------------
   §05  RESPONSIVE GENERAL — MOBILE (max-width: 767px)
--------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Container */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section globals */
  .pr-section-title {
    font-size: clamp(22px, 6vw, 34px);
    white-space: normal;
  }
  .pr-section-body {
    font-size: 15px;
  }
  .pr-section-label {
    font-size: 11px;
  }

  /* About */
  .pr-about {
    padding: 56px 0;
  }
  .pr-about__img-accent {
    display: block;
    position: static;
    width: 100%;
    margin-top: 12px;
    border: none;
    box-shadow: var(--shadow-card);
  }

  /* AI Tools */
  .pr-ai-tools {
    padding: 64px 0;
  }
  .pr-ai-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  .pr-ai-card {
    padding: 22px 18px;
  }
  .pr-ai-tools__tagline {
    font-size: 14px;
    text-align: center;
  }

  /* Skills */
  .pr-skills {
    padding: 56px 0;
  }
  .pr-skills__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .pr-skill-group {
    padding: 18px 16px;
  }
  .pr-skills__title {
    white-space: normal !important;
    font-size: clamp(28px, 6vw, 44px) !important;
  }

  /* Companies */
  .pr-companies {
    padding: 56px 0;
  }
  .pr-companies__orb-stage {
    height: 200px;
  }
  .pr-orbit--2 {
    display: none;
  }
  .pr-orbit--1 {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
  }
  .pr-orb-core {
    width: 68px;
    height: 68px;
  }
  .pr-orb-core svg {
    width: 26px;
    height: 26px;
  }
  .pr-companies__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pr-companies__list::-webkit-scrollbar {
    display: none;
  }
  .pr-company-card {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Process */
  .pr-process {
    padding: 56px 0;
  }
  .pr-process__steps {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .pr-step {
    padding: 20px 18px;
  }
  .pr-step__num {
    font-size: 36px;
    margin-bottom: 8px;
  }

  /* CTA */
  .pr-cta {
    padding: 64px 0;
  }
  .pr-cta__title {
    font-size: clamp(24px, 7vw, 38px);
  }
  .pr-cta__sub {
    font-size: 15px;
  }
  .pr-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-cta-primary,
  .btn-cta-secondary {
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
  }

  /* Clients marquee strip */
  .pr-clients__inner {
    padding: 20px 0;
  }
}


/* ---------------------------------------------------------------
   §06  CREATIVE CHRONICLES — Swiper Carousel

   The old .pr-chronicles__track + CSS animation approach is
   replaced by Swiper.js. These styles:
   a) Remove / neutralise the old track animation CSS.
   b) Size each slide to show ~3 cards on desktop, 2 on tablet,
      1.2 on mobile (the 0.2 "peek" signals more content = swipe).
   c) Keep all existing .pr-story-card styles intact.
   d) Add slide spacing via swiper's built-in spaceBetween config
      (set in JS), supplemented by minor CSS tweaks.
--------------------------------------------------------------- */

/* Section spacing (unchanged from original) */
.pr-chronicles {
  padding: 100px 0;
  background: var(--surface-1);
}

/* Slider wrapper: no longer needs max-width: 100vw overflow trick */
.pr-chronicles__slider-wrap {
  position: relative;
  margin-top: 56px;
  /* Allow swiper to breathe — edge fade handled via ::before/::after */
}

/* Edge fades — maintained from original for premium feel */
.pr-chronicles__slider-wrap::before,
.pr-chronicles__slider-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 30px; /* Stop above the dots */
  width: 60px;
  z-index: 3;
  pointer-events: none;
}
.pr-chronicles__slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--surface-1), transparent);
}
.pr-chronicles__slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--surface-1), transparent);
}

/* Swiper root element */
.pr-chronicles-swiper {
  width: 100%;
  /* Overflow visible so edge-peek effect works on tablet/mobile */
  overflow: visible !important;
  /* But we clip it at the wrapper level */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Clip overflow at the wrapper so edge-peek doesn't break layout */
.pr-chronicles__slider-wrap {
  overflow: hidden;
}

/*
  Each slide takes 1/3 of visible area on desktop.
  Swiper's slidesPerView: 3 + spaceBetween: 24 handles the math,
  but we ensure the card fills its slide slot.
*/
.pr-chronicles-swiper .swiper-slide {
  /* Let swiper control width — don't set it in CSS */
  height: auto;
  display: flex;
  align-items: stretch;
}

/* Story card fills its slide */
.pr-chronicles-swiper .swiper-slide .pr-story-card {
  width: 100%;
  flex-shrink: 0;
}

/* Story card sizing — keep original 280px max, but responsive */
.pr-story-card {
  background: #ffffff;
  border: 1px solid var(--tp-border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  width: 100%;
}
.pr-story-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: transparent;
}
.pr-story-card__img {
  overflow: hidden;
  height: 220px;
}
.pr-story-card__img a {
  display: block;
  height: 100%;
}
.pr-story-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pr-story-card:hover .pr-story-card__img img {
  transform: scale(1.06);
}
.pr-story-card__body {
  padding: 20px;
}

/* Neutralise old track animation (safety — in case old CSS isn't removed) */
.pr-chronicles__track {
  animation: none !important;
}


/* ---------------------------------------------------------------
   §07  CHRONICLES PAGINATION DOTS
   Custom-styled Swiper pagination bullets.
   Swiper injects .swiper-pagination-bullet elements inside the
   .pr-chronicles-dots container.
--------------------------------------------------------------- */
.pr-chronicles-dots {
  position: relative;
  bottom: auto !important;    /* Override Swiper's absolute positioning */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 28px;
  padding-bottom: 4px;
  /* Reset Swiper's default width override */
  width: 100% !important;
  z-index: 5;
}

/* Individual dot */
.pr-chronicles-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--tp-border-1);
  border-radius: 100px;
  opacity: 1;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              transform 0.2s ease;
  cursor: pointer;
  margin: 0 !important; /* Use gap instead of Swiper's margin */
}

/* Active dot — pill shape */
.pr-chronicles-dots .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--accent-violet);
  transform: scaleY(1);
}

/* Hover state */
.pr-chronicles-dots .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
  background: var(--text-tertiary);
  transform: scale(1.2);
}

/* Mobile: slightly smaller dots */
@media (max-width: 767px) {
  .pr-chronicles {
    padding: 56px 0;
  }
  .pr-chronicles__slider-wrap {
    margin-top: 36px;
  }
  .pr-chronicles-dots {
    padding-top: 20px;
  }
  .pr-story-card__img {
    height: 160px;
  }
}


/* ---------------------------------------------------------------
   §08  FILTER TABS — mobile: horizontally scrollable row
   Prevents tabs from wrapping / overflowing on small screens.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .pr-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
    /* Extend past the container on mobile for full bleed scroll */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .pr-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .pr-filter-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 7px 14px;
    white-space: nowrap;
  }
}


/* ---------------------------------------------------------------
   §09  PROJECTS GRID — tablet & mobile
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .pr-projects {
    padding: 72px 0;
  }
  .pr-projects__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
  }
  .pr-projects__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .pr-project-card--featured {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .pr-projects {
    padding: 56px 0;
  }
  .pr-projects__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 14px;
  }
  .pr-projects__header .pr-section-title {
    white-space: normal;
    font-size: clamp(22px, 6vw, 32px);
    margin-bottom: 0;
  }
  .pr-projects__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pr-project-card--featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .pr-project-card--featured .pr-project-card__body {
    padding: 18px 16px;
  }
  .pr-project-card--featured .pr-project-card__title {
    font-size: 17px;
  }
  /* Regular card: ensure image doesn't overflow */
  .pr-project-card__img img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}


/* ---------------------------------------------------------------
   §10  ABOUT SECTION — responsive improvements
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .pr-about__img-stack {
    height: auto;
    min-height: 260px;
    margin-bottom: 28px;
  }
  .pr-about__img-main {
    position: static;
    width: 100%;
  }
  .pr-about__img-accent {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
  .pr-about__left {
    padding-right: 0;
  }
  .pr-about__ctas {
    flex-wrap: wrap;
    gap: 10px;
  }
  .pr-about__ctas .btn-primary-hero,
  .pr-about__ctas .btn-ghost-hero {
    flex: 1 1 140px;
    justify-content: center;
  }
}


/* ---------------------------------------------------------------
   §11  AI GRID — ensure single column on mobile doesn't overflow
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .pr-ai-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pr-ai-card {
    padding: 20px 16px;
  }
  .pr-ai-card__desc {
    font-size: 13px;
  }
  .pr-ai-card__tags {
    flex-wrap: wrap;
    gap: 6px;
  }
}


/* ---------------------------------------------------------------
   §12  SKILLS GRID — spacing and card paddings
--------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .pr-skills__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .pr-skills__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pr-skill-tags {
    gap: 6px;
  }
  .pr-skill-tag {
    font-size: 12px;
    padding: 4px 10px;
  }
}


/* ---------------------------------------------------------------
   §13  PROCESS GRID — mobile single column
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .pr-step {
    padding: 20px 16px;
  }
  .pr-step__num {
    font-size: 32px;
  }
  .pr-step__title {
    font-size: 15px;
  }
  .pr-step__desc {
    font-size: 13px;
  }
}


/* ---------------------------------------------------------------
   §14  CTA — mobile layout
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .pr-cta__eyebrow {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 24px;
  }
  .pr-cta__inner {
    padding: 0 4px;
  }
}


/* ---------------------------------------------------------------
   §15  FOOTER — responsive stack improvements
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .tp-footer-area .black-bg {
    padding-top: 56px;
    padding-bottom: 24px;
  }
  .tp-footer-widget {
    margin-bottom: 28px;
  }
  .tp-footer-widget__list ul li {
    margin-bottom: 8px;
  }
  .tp-copyright-area {
    text-align: center;
  }
  .tp-copyright-right {
    text-align: center !important;
    margin-top: 8px;
  }
  .copyright-border {
    padding-top: 20px;
  }
}


/* ---------------------------------------------------------------
   §16  SCROLL-TO-TOP — left side, bottom-up entry via transform
   Using translateY instead of bottom so horizontal left/right
   values never participate in any transition.
--------------------------------------------------------------- */
.scroll-top {
  right: auto !important;
  left: 30px !important;
  bottom: 24px !important;          /* fixed at final Y — never changes  */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(100px) !important;
  transition: none !important;      /* kill theme's "transition: 1s ease" */
}
.scroll-top.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  /* transition kicks in only when .open is present */
  transition: transform 0.55s cubic-bezier(.22,1,.36,1),
              opacity 0.4s ease !important;
}

@media (max-width: 767px) {
  .scroll-top {
    left: 16px !important;
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

/* Default */
.pr-project-card__img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Show middle for animation project */
.pr-project-card--center .pr-project-card__img img{
    object-position:center;
}










/* ============================================================
   MOBILE NAV — meanmenu offcanvas fixes
   meanmenu injects a duplicate a.meanmenu-reveal hamburger button
   (three white spans) inside .mobile-menu/.mean-container inside
   the offcanvas panel. The real hamburger is .tp-menu-bar in the
   mobile header, so this duplicate must be hidden.
   mean-bar also adds 4px top/bottom padding above the cloned nav
   items; strip it to avoid a blank gap at the top of the menu list.
============================================================ */
.tpoffcanvas a.meanmenu-reveal { display: none !important; }
.tpoffcanvas .mean-bar { padding: 0; }
.tpoffcanvas .mean-nav > ul { display: block !important; }

/* Divider opacity */
.tpoffcanvas .mean-container .mean-nav ul li a { border-top-color: rgba(255,255,255,.4); }

/* + / - expand button — vertically centred inside its own row, immune to MeanMenu JS shift */
.tpoffcanvas .mean-container .mean-nav ul li a.mean-expand {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,.2) !important;
}

/* ============================================================
   MOBILE NAV — scroll lock (Module 09, script.js)
   style.css owns all .tpoffcanvas, .body-overlay, and
   .mobile-menu rules. Only the body overflow lock is added
   here since style.css has no body-level scroll-lock rule.
============================================================ */

/* Prevent background scroll while offcanvas is open.
   Applied / removed by script.js Module 09 via
   document.body.style.overflow — no extra class needed,
   but this comment keeps the intent documented. */

/* ============================================================
   OFFCANVAS — shared rules (all pages)
============================================================ */
.tpoffcanvas .tp-header-button { text-align: left; }

/* ============================================================
   NEWSLETTER FRAME — always hidden (form submits into it)
============================================================ */
#newsletter-frame { display: none; }


/* ================================================================
   §20  ABOUT PAGE  (about-us.html)
   All rules are scoped to .ab-page or prefixed .ab- so they
   never bleed into other pages.  Add new about-page styles here.
================================================================ */

/* —— Keyframes (about-specific) ————————————————————————————————— */
@keyframes ab-blobDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(-40px, 50px) scale(1.08); }
  70%      { transform: translate(30px,-25px) scale(.94); }
}
@keyframes ab-blobDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(50px,-40px) scale(1.1); }
}
@keyframes ab-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes ab-floatReverse {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}
@keyframes ab-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ab-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.85); opacity: .6; }
}
@keyframes ab-fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ab-lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes ab-gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ab-counterPulse {
  0%,100%  { box-shadow: 0 0 0 0 rgba(89,86,233,.4); }
  50%      { box-shadow: 0 0 0 16px rgba(89,86,233,0); }
}
@keyframes ab-arrowBounce {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(7px); }
}
@keyframes ab-dotBlink {
  0%,100% { opacity: .3; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.4); }
}
@keyframes ab-roadPulse {
  0%,100% { box-shadow: 0 0 0 10px rgba(89,86,233,.15), 0 0 0 22px rgba(89,86,233,.07); }
  50%     { box-shadow: 0 0 0 18px rgba(89,86,233,.1), 0 0 0 34px rgba(89,86,233,.04); }
}
@keyframes ab-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(89,86,233,.45); }
  70%  { box-shadow: 0 0 0 22px rgba(89,86,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(89,86,233,0); }
}
@keyframes ab-preloaderOut {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* —— Preloader ————————————————————————————————————————————————— */
.ab-page #ab-preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--tp-common-black);
  display: flex; align-items: center; justify-content: center;
  animation: ab-preloaderOut 1.5s ease forwards;
}
.ab-preloader-ring {
  width: 52px; height: 52px;
  border: 3px solid transparent;
  border-top-color: var(--tp-theme-1);
  border-right-color: var(--tp-theme-primary);
  border-radius: 50%;
  animation: ab-spin .75s linear infinite;
}

/* —— Header overrides (white/solid on about page) ——————————————— */
.ab-page #header-sticky.header-white,
.ab-page #header-sticky-mobile.header-white {
  background: var(--tp-common-white);
  box-shadow: 0 2px 30px rgba(0,0,0,.06);
}
/* ab-page header spacing now inherits from the global #header-sticky.header-white rule */
.ab-page #header-sticky.header-sticky,
.ab-page #header-sticky-mobile.header-sticky {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 99999 !important;
  background: var(--tp-common-white) !important;
  box-shadow: 0 2px 40px rgba(168,182,218,.3) !important;
}

/* —— Scroll-reveal primitives —————————————————————————————————— */
.ab-reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1);
}
.ab-reveal.from-left  { transform: translateX(-44px); }
.ab-reveal.from-right { transform: translateX(44px); }
.ab-reveal.ab-visible { opacity: 1; transform: none; }

.ab-stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.ab-stagger.ab-visible > *:nth-child(1) { opacity:1;transform:none;transition-delay:.08s }
.ab-stagger.ab-visible > *:nth-child(2) { opacity:1;transform:none;transition-delay:.18s }
.ab-stagger.ab-visible > *:nth-child(3) { opacity:1;transform:none;transition-delay:.28s }
.ab-stagger.ab-visible > *:nth-child(4) { opacity:1;transform:none;transition-delay:.38s }
.ab-stagger.ab-visible > *:nth-child(5) { opacity:1;transform:none;transition-delay:.48s }
.ab-stagger.ab-visible > *:nth-child(6) { opacity:1;transform:none;transition-delay:.58s }

/* —— Section globals ———————————————————————————————————————————— */
.ab-page .ab-section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--tp-theme-1);
  margin-bottom: 14px;
}
.ab-page .ab-section-label::before {
  content: ''; width: 28px; height: 2px;
  background: var(--tp-theme-1); border-radius: 2px; flex-shrink: 0;
}
.ab-page .ab-section-title {
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 700; color: var(--tp-common-black);
  line-height: 1.18; margin-bottom: 0; letter-spacing: -.02em;
}
.ab-page .ab-section-title em {
  font-style: normal; color: var(--tp-theme-1);
}

/* ================================================================
   §20.1  HERO
================================================================ */
.ab-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0D0D12 0%, #1a1930 55%, #0f1729 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 130px 0 90px;
}

.ab-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(89,86,233,.22) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
}

.ab-hero__blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(90px); opacity: .55;
}
.ab-hero__blob--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(89,86,233,.2) 0%, transparent 70%);
  top: -220px; right: -180px;
  animation: ab-blobDrift1 14s ease-in-out infinite;
}
.ab-hero__blob--2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(255,220,96,.18) 0%, transparent 70%);
  bottom: -60px; left: -120px;
  animation: ab-blobDrift2 18s ease-in-out infinite;
}
.ab-hero__blob--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(30,226,207,.15) 0%, transparent 70%);
  top: 40%; left: 8%;
  animation: ab-float 7s 1s ease-in-out infinite;
}

.ab-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 70px; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
  width: 100%;
}

.ab-hero__left { animation: ab-fadeUp .9s ease both; }

.ab-hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(89,86,233,.18); border: 1px solid rgba(89,86,233,.4);
  border-radius: 100px; padding: 7px 18px; margin-bottom: 26px;
  color: #a5b4fc; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
}
.ab-hero__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a5b4fc; animation: ab-pulse 1.8s ease-in-out infinite;
}

.ab-hero__headline {
  font-size: clamp(38px, 5.5vw, 82px);
  font-weight: 700; color: #fff;
  line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 22px;
}
.ab-hero__headline em {
  font-style: normal;
  background: linear-gradient(90deg, var(--tp-theme-primary), #f97316);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.ab-hero__headline em::after {
  content: '';
  position: absolute; bottom: -6px; left: 0; right: 0; height: 3px;
  background: var(--tp-theme-primary); border-radius: 2px;
  animation: ab-lineGrow 1s .9s ease both;
}

.ab-hero__sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,.55); margin-bottom: 40px; max-width: 460px;
}

.ab-hero__actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.ab-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--tp-theme-1); color: #fff;
  padding: 14px 28px; border-radius: var(--radius-sm,10px);
  font-size: 15px; font-weight: 600;
  transition: var(--transition,.35s cubic-bezier(.16,1,.3,1));
  position: relative; overflow: hidden;
}
.ab-btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: var(--tp-theme-2,#423EF3);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.ab-btn-primary:hover::before { transform: scaleX(1); }
.ab-btn-primary span, .ab-btn-primary i { position: relative; z-index: 1; }
.ab-btn-primary:hover { color: #fff; }

.ab-btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255,255,255,.75); padding: 14px 24px;
  border-radius: var(--radius-sm,10px); font-size: 15px; font-weight: 500;
  border: 1.5px solid rgba(255,255,255,.2);
  transition: all .3s ease;
}
.ab-btn-ghost:hover {
  border-color: rgba(255,255,255,.55); color: #fff;
  background: rgba(255,255,255,.06);
}

.ab-hero__right {
  position: relative;
  animation: ab-fadeUp 1s .2s ease both;
}
.ab-hero__img-frame {
  border-radius: 30px; overflow: hidden; position: relative; z-index: 1;
  box-shadow: 0 50px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
}
.ab-hero__img-frame img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
}
.ab-hero__img-decor {
  position: absolute; top: -22px; left: -22px; z-index: 0;
  width: calc(100% + 44px); height: calc(100% + 44px);
  border: 2px dashed rgba(89,86,233,.3); border-radius: 40px;
  animation: ab-spin 24s linear infinite;
}
.ab-hero__badge {
  position: absolute; bottom: -28px; right: -28px; z-index: 3;
  background: var(--tp-theme-primary); border-radius: 20px;
  padding: 22px 26px; text-align: center;
  box-shadow: 0 20px 50px rgba(255,220,96,.35);
  animation: ab-float 3.5s ease-in-out infinite;
}
.ab-hero__badge strong {
  display: block; font-size: 38px; font-weight: 700;
  color: var(--tp-common-black); line-height: 1;
}
.ab-hero__badge span {
  font-size: 12px; font-weight: 600; color: var(--tp-common-black); opacity: .7;
}
.ab-hero__glow {
  position: absolute; top: 30px; right: -50px; z-index: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(30,226,207,.5), transparent 70%);
  animation: ab-pulse 2.5s ease-in-out infinite;
}

.ab-hero__scroll-cue {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.3); font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; z-index: 3;
}
.ab-hero__scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation: ab-float 2s ease-in-out infinite;
}

/* ================================================================
   §20.2  STATS BAR
================================================================ */
.ab-stats {
  padding: 80px 0;
  background: var(--tp-common-black);
  position: relative; overflow: hidden;
}
.ab-stats::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(89,86,233,.18) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .5;
}
.ab-stats__grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 2px; position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}
.ab-stat-item {
  text-align: center; padding: 52px 24px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.ab-stat-item:last-child { border-right: none; }
.ab-stat-num {
  font-size: clamp(40px, 5vw, 66px); font-weight: 700;
  color: var(--tp-theme-primary); line-height: 1;
  display: block; margin-bottom: 10px;
  animation: ab-counterPulse 3s ease-in-out infinite;
}
.ab-stat-label {
  font-size: 13px; color: rgba(255,255,255,.45);
  font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
}

/* ================================================================
   §20.3  IDENTITY / WHO I AM
================================================================ */
.ab-identity {
  padding: 120px 0;
  background: var(--tp-common-white);
}
.ab-identity__grid {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: 90px; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}

.ab-identity__img-wrap { position: relative; }
.ab-identity__img-decor {
  position: absolute; top: -20px; left: -20px; z-index: 0;
  width: calc(100% + 40px); height: calc(100% + 40px);
  border: 2px dashed rgba(89,86,233,.2); border-radius: 38px;
  animation: ab-spin 22s linear infinite;
}
.ab-identity__img-frame {
  border-radius: 28px; overflow: hidden; position: relative; z-index: 1;
  box-shadow: 0 40px 100px rgba(89,86,233,.18);
}
.ab-identity__img-frame img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
}
.ab-identity__badge {
  position: absolute; bottom: -28px; right: -28px; z-index: 3;
  background: var(--tp-theme-primary); border-radius: 20px;
  padding: 22px 26px; text-align: center;
  box-shadow: 0 20px 50px rgba(255,220,96,.3);
  animation: ab-floatReverse 3.5s ease-in-out infinite;
}
.ab-identity__badge strong {
  display: block; font-size: 38px; font-weight: 700;
  color: var(--tp-common-black); line-height: 1;
}
.ab-identity__badge span {
  font-size: 12px; font-weight: 600; color: var(--tp-common-black); opacity: .7;
}
.ab-identity__dot {
  position: absolute; top: 28px; right: -44px; z-index: 0;
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(30,226,207,.45), transparent 70%);
  animation: ab-pulse 2.5s ease-in-out infinite;
}

.ab-identity__tag {
  display: inline-block;
  background: rgba(89,86,233,.08); color: var(--tp-theme-1);
  padding: 6px 18px; border-radius: 100px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px;
}
.ab-identity__name {
  font-size: clamp(32px, 4vw, 54px); font-weight: 700;
  color: var(--tp-common-black); line-height: 1.12;
  margin-bottom: 10px; letter-spacing: -.025em;
}
.ab-identity__role {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--tp-theme-1);
  margin-bottom: 24px;
}
.ab-identity__role i { font-size: 7px; color: rgba(30,226,207,.9); }

.ab-identity__bio {
  font-size: 16px; line-height: 1.85;
  color: var(--tp-text-body); margin-bottom: 32px;
}

.ab-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px;
}
.ab-meta-item {
  background: var(--tp-grey-1); border-radius: 16px;
  padding: 18px 20px; border-left: 3px solid var(--tp-theme-1);
  transition: box-shadow .3s ease, transform .3s ease;
}
.ab-meta-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(89,86,233,.1);
}
.ab-meta-item .ab-meta-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--tp-theme-1); margin-bottom: 5px;
}
.ab-meta-item .ab-meta-value {
  font-size: 14px; font-weight: 600; color: var(--tp-common-black);
}

.ab-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-social-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--tp-border-1); color: var(--tp-common-black);
  transition: all .3s ease;
}
.ab-social-pill:hover {
  border-color: var(--tp-theme-1); color: var(--tp-theme-1);
  transform: translateY(-3px);
}
.ab-social-pill.li:hover  { border-color: #0077B5; color: #0077B5; }
.ab-social-pill.ig:hover  { border-color: #E1306C; color: #E1306C; }
.ab-social-pill.be:hover  { border-color: #1769FF; color: #1769FF; }

/* ================================================================
   §20.4  STORY / MY JOURNEY
================================================================ */
.ab-story {
  padding: 110px 0;
  background: var(--tp-grey-1);
  position: relative; overflow: hidden;
}
.ab-story::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(89,86,233,.05), transparent 70%);
}
.ab-story__top {
  max-width: 1200px; margin: 0 auto; padding: 0 30px 60px;
}
.ab-story__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}
.ab-story__text p {
  font-size: 16px; line-height: 1.9;
  color: var(--tp-text-body); margin-bottom: 20px;
}
.ab-story__text a { color: var(--tp-theme-1); font-weight: 600; }
.ab-story__text a:hover { color: var(--tp-theme-2); }

.ab-highlight-cards { display: flex; flex-direction: column; gap: 18px; }
.ab-highlight-card {
  background: #fff; border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  border: 1px solid var(--tp-border-1);
  display: flex; gap: 18px; align-items: flex-start;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ab-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 54px rgba(89,86,233,.12);
  border-color: var(--tp-theme-1);
}
.ab-hc-icon {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ab-hc-icon.violet { background: rgba(89,86,233,.1); color: var(--tp-theme-1); }
.ab-hc-icon.yellow { background: rgba(255,220,96,.2); color: #b8900a; }
.ab-hc-icon.teal   { background: rgba(30,226,207,.15); color: #0a9e8f; }
.ab-hc-icon.pink   { background: rgba(253,52,110,.1); color: #FD346E; }
.ab-hc-body h4 {
  font-size: 15px; font-weight: 700;
  color: var(--tp-common-black); margin-bottom: 5px;
}
.ab-hc-body p {
  font-size: 13px; color: var(--tp-text-body); line-height: 1.65; margin: 0;
}

/* ================================================================
   §20.5  SKILLS & EDUCATION
================================================================ */
.ab-skills {
  padding: 120px 0;
  background: var(--tp-common-white);
}
.ab-skills__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}
.ab-skills__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; margin-top: 60px;
}
.ab-skill-col-title {
  font-size: 19px; font-weight: 700;
  color: var(--tp-common-black); margin-bottom: 28px;
}
.ab-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-skill-tag {
  padding: 8px 18px; border-radius: 100px;
  font-size: 14px; font-weight: 500;
  border: 1.5px solid var(--tp-border-1); color: var(--tp-common-black);
  transition: all .3s ease; cursor: default;
}
.ab-skill-tag:hover {
  background: var(--tp-theme-1); border-color: var(--tp-theme-1);
  color: #fff; transform: translateY(-2px);
}

.ab-timeline { position: relative; padding-left: 30px; }
.ab-timeline::before {
  content: '';
  position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--tp-theme-1), var(--tp-theme-primary));
  border-radius: 2px;
}
.ab-tl-item {
  position: relative; margin-bottom: 32px;
  padding-left: 4px;
}
.ab-tl-item::before {
  content: '';
  position: absolute; left: -25px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tp-theme-1); border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--tp-theme-1);
  animation: ab-ripple 3s ease-in-out infinite;
}
.ab-tl-item h4 {
  font-size: 16px; font-weight: 700; color: var(--tp-common-black); margin-bottom: 3px;
}
.ab-tl-item .ab-tl-sub {
  font-size: 13px; color: var(--tp-theme-1); font-weight: 600;
}
.ab-tl-item p {
  font-size: 14px; color: var(--tp-text-body); margin-top: 4px; line-height: 1.65;
}

/* ================================================================
   §20.6  HORIZONTAL JOURNEY / ROADMAP
================================================================ */
.ab-journey {
  padding: 120px 0 100px;
  background: var(--tp-common-black);
  position: relative; overflow: hidden;
}
.ab-journey::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(89,86,233,.12) 1px, transparent 1px);
  background-size: 36px 36px;
}
.ab-journey__top {
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
  text-align: center; position: relative; z-index: 2; margin-bottom: 16px;
}
.ab-journey__top .ab-section-label { color: var(--tp-theme-primary); justify-content: center; }
.ab-journey__top .ab-section-label::before { background: var(--tp-theme-primary); }
.ab-journey__top .ab-section-title { color: #fff; }
.ab-journey__top .ab-section-title em { color: var(--tp-theme-primary); }
.ab-journey__sub {
  color: rgba(255,255,255,.4); font-size: 16px; margin-top: 12px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

.ab-journey__scroll-hint {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 40px;
  color: rgba(255,255,255,.3); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  position: relative; z-index: 2;
}
.ab-journey__scroll-hint i { animation: ab-arrowBounce 1.5s ease-in-out infinite; }

.ab-journey__outer {
  position: relative; z-index: 2;
  overflow: hidden; padding: 20px 0 50px;
}
.ab-journey__outer::before,
.ab-journey__outer::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 10; pointer-events: none;
}
.ab-journey__outer::before { left:0;  background: linear-gradient(to right, var(--tp-common-black), transparent); }
.ab-journey__outer::after  { right:0; background: linear-gradient(to left,  var(--tp-common-black), transparent); }

.ab-journey__track {
  display: flex; gap: 0;
  overflow-x: auto;
  padding: 0 80px 24px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.ab-journey__track::-webkit-scrollbar { height: 4px; }
.ab-journey__track::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 4px; }
.ab-journey__track::-webkit-scrollbar-thumb { background: var(--tp-theme-1); border-radius: 4px; }
.ab-journey__track.grabbing { cursor: grabbing; }

.ab-journey__road-line {
  position: absolute; left: 80px; right: 80px; height: 4px;
  background: linear-gradient(to right, var(--tp-theme-1), var(--tp-theme-primary), rgba(30,226,207,.8), var(--tp-theme-1));
  background-size: 200% 100%;
  animation: ab-gradShift 4s ease infinite;
  border-radius: 4px;
  top: calc(50% + 40px);
  pointer-events: none; z-index: 3;
}

.ab-journey-item {
  flex: 0 0 280px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 8px; position: relative;
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.ab-journey-item.ab-jv { opacity: 1; transform: translateY(0); }
.ab-journey-item:nth-child(even) { flex-direction: column-reverse; }

.ab-journey-node {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--tp-theme-primary); border: 3px solid var(--tp-common-black);
  box-shadow: 0 0 0 4px var(--tp-theme-1);
  position: relative; z-index: 4; margin: 0;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ab-journey-item:hover .ab-journey-node {
  transform: scale(1.45);
  box-shadow: 0 0 0 6px var(--tp-theme-1), 0 0 22px rgba(89,86,233,.5);
}

.ab-journey-connector {
  width: 2px; height: 48px; flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(89,86,233,.5), rgba(255,220,96,.6));
}
.ab-journey-item:nth-child(even) .ab-journey-connector {
  background: linear-gradient(to top, rgba(89,86,233,.5), rgba(255,220,96,.6));
}

.ab-journey-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 22px;
  backdrop-filter: blur(8px);
  transition: all .3s ease; width: 100%; position: relative;
}
.ab-journey-card:hover {
  background: rgba(89,86,233,.12);
  border-color: rgba(89,86,233,.5);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(89,86,233,.25);
}
.ab-journey-item:nth-child(even) .ab-journey-card:hover { transform: translateY(6px); }
.ab-journey-item.ab-active .ab-journey-card {
  border-color: var(--tp-theme-primary);
  background: rgba(255,220,96,.07);
}
.ab-journey-item.ab-active .ab-journey-node {
  background: #fff; box-shadow: 0 0 0 5px var(--tp-theme-primary);
}

.ab-journey-icon  { font-size: 26px; margin-bottom: 10px; display: block; }
.ab-journey-year  {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--tp-theme-primary); margin-bottom: 8px;
  background: rgba(255,220,96,.1); padding: 3px 10px; border-radius: 100px;
}
.ab-journey-card h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; line-height: 1.35; }
.ab-journey-card p  { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.65; margin: 0; }

.ab-journey-spacer { height: 80px; }

.ab-journey-end {
  flex: 0 0 200px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 20px; text-align: center;
}
.ab-journey-end-dot {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tp-theme-1), rgba(30,226,207,.8));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 16px;
  animation: ab-roadPulse 2s ease-in-out infinite;
}
.ab-journey-end h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.ab-journey-end p  { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.6; }
.ab-journey-end-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.ab-journey-end-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tp-theme-primary); opacity: .3;
  animation: ab-dotBlink 1.4s ease-in-out infinite;
}
.ab-journey-end-dots span:nth-child(2) { animation-delay: .2s; }
.ab-journey-end-dots span:nth-child(3) { animation-delay: .4s; }

.ab-journey-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px; position: relative; z-index: 2;
}
.ab-journey-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: all .3s ease; cursor: pointer; border: none; padding: 0;
}
.ab-journey-dot.ab-active { background: var(--tp-theme-primary); width: 24px; border-radius: 4px; }

/* ================================================================
   §20.7  CONTACT / CTA
================================================================ */
.ab-contact {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--tp-grey-1), var(--tp-common-white));
}
.ab-contact__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 30px;
}
.ab-contact__grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start; margin-top: 56px;
}
.ab-contact__info-title {
  font-size: 26px; font-weight: 700;
  color: var(--tp-common-black); margin-bottom: 14px;
}
.ab-contact__info-text {
  font-size: 16px; color: var(--tp-text-body); line-height: 1.8; margin-bottom: 36px;
}
.ab-contact-links { display: flex; flex-direction: column; gap: 14px; }
.ab-contact-link {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  border: 1px solid var(--tp-border-1);
  transition: border-color .3s ease, transform .3s ease;
}
.ab-contact-link:hover { border-color: var(--tp-theme-1); transform: translateX(6px); }
.ab-cl-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(89,86,233,.1); display: flex; align-items: center;
  justify-content: center; color: var(--tp-theme-1); font-size: 18px; flex-shrink: 0;
}
.ab-cl-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--tp-common-black); }
.ab-cl-text span { font-size: 13px; color: var(--tp-text-body); }

.ab-form-wrap {
  background: #fff; border-radius: 28px; padding: 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,.07);
  border: 1px solid var(--tp-border-1);
}
.ab-form-wrap .ab-cf-title {
  font-size: 22px; font-weight: 700; color: var(--tp-common-black); margin-bottom: 30px;
}
.ab-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ab-form-field { margin-bottom: 0; }
.ab-form-field label {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--tp-common-black); margin-bottom: 7px;
}
.ab-form-field input,
.ab-form-field textarea {
  width: 100%; padding: 13px 17px; border-radius: 12px;
  border: 1.5px solid var(--tp-border-1); background: var(--tp-grey-1);
  font-family: var(--tp-ff-body); font-size: 14px;
  color: var(--tp-common-black); transition: border-color .3s ease; outline: none;
}
.ab-form-field input:focus,
.ab-form-field textarea:focus {
  border-color: var(--tp-theme-1); background: #fff;
}
.ab-form-field textarea { resize: vertical; min-height: 120px; }
.ab-form-mb { margin-bottom: 14px; }
.ab-form-submit {
  width: 100%; height: 54px; border-radius: 12px;
  background: var(--tp-theme-1); color: #fff;
  font-family: var(--tp-ff-body); font-size: 15px; font-weight: 700;
  border: none; cursor: pointer;
  transition: background .3s ease, transform .3s ease, color .3s ease;
  margin-top: 6px;
}
.ab-form-submit:hover {
  background: var(--tp-theme-primary); color: var(--tp-common-black);
  transform: translateY(-2px);
}

/* ================================================================
   §20.8  RESPONSIVE — ABOUT PAGE
================================================================ */
@media (max-width: 1024px) {
  .ab-hero__inner   { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  .ab-hero__sub     { margin-left: auto; margin-right: auto; }
  .ab-hero__actions { justify-content: center; }
  .ab-hero__right   { max-width: 380px; margin: 0 auto; }
  .ab-hero__badge   { right: -10px; }
  .ab-identity__grid { grid-template-columns: 1fr; gap: 56px; }
  .ab-identity__img-wrap { max-width: 300px; margin-left: auto; margin-right: auto; }
  .ab-identity__badge { right: 0; }
  .ab-story__grid   { grid-template-columns: 1fr; }
  .ab-stats__grid   { grid-template-columns: repeat(2,1fr); }
  .ab-skills__grid  { grid-template-columns: 1fr; }
  .ab-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ab-hero            { padding: 110px 0 70px; }
  .ab-hero__headline  { font-size: clamp(34px, 9vw, 52px); }
  .ab-stats__grid     { grid-template-columns: 1fr 1fr; }
  .ab-stat-item       { padding: 36px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .ab-stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06); }
  .ab-stat-item:last-child, .ab-stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .ab-form-row        { grid-template-columns: 1fr; }
  .ab-form-wrap       { padding: 28px 22px; }
  .ab-journey__track  { flex-direction: column; overflow-x: visible; padding: 0 20px; gap: 0; }
  .ab-journey__road-line { display: none; }
  .ab-journey-item,
  .ab-journey-item:nth-child(even) { flex-direction: row; flex: none; width: 100%; padding: 0 0 32px 56px; align-items: flex-start; opacity: 1; transform: none; }
  .ab-journey-node    { position: absolute; left: 16px; top: 8px; margin: 0; }
  .ab-journey-connector { display: none; }
  .ab-journey-card    { width: 100%; }
  .ab-journey-card:hover,
  .ab-journey-item:nth-child(even) .ab-journey-card:hover { transform: none; box-shadow: none; }
  .ab-journey__outer::before, .ab-journey__outer::after { display: none; }
  .ab-journey__outer  { padding-bottom: 0; }
  .ab-journey-spacer  { display: none; }
  .ab-hero__scroll-cue { display: none; }
}

/* ================================================================
   §20.9  COMPACT HERO (no image — about page variant)
================================================================ */
.ab-hero--compact {
  min-height: 0;
  padding-top: 150px;
  padding-bottom: 80px;
}
.ab-hero--compact .ab-hero__inner {
  grid-template-columns: 1fr;
  max-width: 780px;
  text-align: center;
  gap: 0;
}
.ab-hero--compact .ab-hero__sub {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.ab-hero--compact .ab-hero__actions {
  justify-content: center;
}
.ab-hero--compact .ab-hero__scroll-cue {
  display: none;
}
@media (max-width: 767px) {
  .ab-hero--compact {
    padding-top: 120px;
    padding-bottom: 56px;
  }
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL WHITE-HEADER NAV  (#header-sticky.header-white)
   Edit here → about.html AND pr-award.html update automatically
════════════════════════════════════════════════════════════════ */
#header-sticky.header-white {
  position: relative;
  z-index: 9999;
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
/* ── Row spacing ── */
#header-sticky.header-white .header-space-two {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* ── Nav list layout (flex-centered, consistent gap) ── */
#header-sticky.header-white .tp-main-menu ul {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
#header-sticky.header-white .tp-main-menu ul li {
  margin-right: 40px;
}
#header-sticky.header-white .tp-main-menu ul li:last-child {
  margin-right: 0;
}
/* ── Nav link height — unified 24px top/bottom on all white-header pages ── */
#header-sticky.header-white .tp-main-menu ul li a {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* ── Underline animation — recalibrate for 24px padding ── */
#header-sticky.header-white .tp-main-menu ul li a::after,
#header-sticky.header-white .tp-main-menu ul li a::before {
  bottom: 12px;
}
/* ── Home Page button ── */
#header-sticky.header-white .tp-header-button {
  text-align: right;
}
#header-sticky.header-white .tp-header-button .tp-btn {
  padding: 0 40px;
  min-width: 130px;
}
/* ── Dropdown: center under its li ── */
#header-sticky.header-white .tp-main-menu ul li ul.submenu {
  display: block;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 0;
}
/* ── Dropdown text (force white — survives body color cascade) ── */
#header-sticky.header-white .tp-main-menu ul li ul.submenu li a {
  color: var(--tp-common-white, #ffffff) !important;
  padding: 9px 22px !important;
  display: block;
  white-space: nowrap;
}
#header-sticky.header-white .tp-main-menu ul li ul.submenu li a:hover {
  color: var(--tp-theme-primary, #FFDC60) !important;
}

/* ── Global: mobile white-header centering (change here → reflects everywhere) ── */
#header-sticky-mobile.header-white {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
#header-sticky-mobile.header-white > .container-fluid {
  width: 100%;
}
#header-sticky-mobile.header-white .tp-logo {
  display: flex;
  align-items: center;
}

/* ================================================================
   §21  SHARED PAGE HERO  (.ph-hero)
   Edit here → about.html & pr-award.html update automatically
================================================================ */

/* ── Base ── */
.ph-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0D0D12 0%, #1a1930 55%, #0f1729 100%);
  padding-top: 80px;
  padding-bottom: 100px;
}

/* ── Dot-grid overlay ── */
.ph-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(89,86,233,.25) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Background layer (holds orbs + noise) ── */
.ph-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Orbs ── */
.ph-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ph-orb--a {
  width: 650px; height: 650px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(89,86,233,.32) 0%, transparent 70%);
  filter: blur(70px);
  animation: ph-float 9s ease-in-out infinite;
}
.ph-orb--b {
  width: 450px; height: 450px;
  top: 60px; right: -100px;
  background: radial-gradient(circle, rgba(255,220,96,.18) 0%, transparent 70%);
  filter: blur(60px);
  animation: ph-float 13s ease-in-out infinite reverse;
}
.ph-orb--c {
  width: 320px; height: 320px;
  bottom: -60px; left: 42%;
  background: radial-gradient(circle, rgba(139,92,246,.22) 0%, transparent 70%);
  filter: blur(55px);
  animation: ph-float 16s ease-in-out infinite 2s;
}

@keyframes ph-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(24px,-32px) scale(1.06); }
  66%      { transform: translate(-16px,18px) scale(.96); }
}

/* ── Noise grain ── */
.ph-hero__noise {
  position: absolute;
  inset: 0;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ── Content ── */
.ph-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* ── Eyebrow pill ── */
.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 20px;
  border-radius: 100px;
  background: rgba(89,86,233,.15);
  border: 1px solid rgba(89,86,233,.4);
  color: #a5b4fc;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  animation: ph-rise .65s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.ph-eyebrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ph-shimmer 3.5s ease-in-out 2s infinite;
}
.ph-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5956E9;
  box-shadow: 0 0 10px rgba(89,86,233,1), 0 0 20px rgba(89,86,233,.5);
  flex-shrink: 0;
  animation: ph-dot-pulse 2s ease-in-out infinite;
}
@keyframes ph-dot-pulse {
  0%,100% { transform: scale(1);   opacity: 1; box-shadow: 0 0 10px rgba(89,86,233,1), 0 0 20px rgba(89,86,233,.5); }
  50%      { transform: scale(1.6); opacity: .6; box-shadow: 0 0 16px rgba(89,86,233,.8), 0 0 30px rgba(89,86,233,.3); }
}
@keyframes ph-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ── Title ── */
.ph-hero__title {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #ffffff;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(30px);
  animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .28s forwards;
}
.ph-hero__title em {
  font-style: normal;
  color: var(--tp-theme-primary, #FFDC60);
  position: relative;
}
.ph-hero__title em::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 0;
  height: 3px;
  background: var(--tp-theme-primary, #FFDC60);
  border-radius: 2px;
  opacity: .35;
  transform: scaleX(0);
  transform-origin: left;
  animation: ph-underline .6s ease .9s forwards;
}
@keyframes ph-underline {
  to { transform: scaleX(1); }
}

/* ── Sub text ── */
.ph-hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.75;
  color: rgba(255,255,255,.58);
  max-width: 760px;
  margin: 0 auto 36px;
  opacity: 0;
  transform: translateY(22px);
  animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .48s forwards;
}

/* ── Actions ── */
.ph-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px);
  animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .68s forwards;
}

/* ── Buttons ── */
.ph-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  background: var(--tp-theme-1, #5956E9);
  color: #fff !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 8px 32px rgba(89,86,233,.45);
}
.ph-btn-primary:hover {
  background: #4340d0;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(89,86,233,.6);
}
.ph-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background .28s ease, border-color .28s ease, transform .28s ease, color .28s ease;
}
.ph-btn-ghost:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.45);
  color: #fff !important;
  transform: translateY(-3px);
}
.ph-btn-primary:active {
  background: #3938c8;
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(89,86,233,.35);
  color: #fff;
}
.ph-btn-ghost:active {
  background: rgba(255,255,255,.08);
  transform: translateY(0);
  color: #fff !important;
}
.ph-btn-primary:focus-visible,
.ph-btn-ghost:focus-visible {
  outline: 3px solid rgba(255,255,255,.8);
  outline-offset: 3px;
}

/* ── Scroll cue ── */
.ph-hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  text-align: center;
  /* centering via margin:auto — no transform needed, so animation is pure Y */
  opacity: 0;
  transform: translateY(22px);
  animation: ph-rise .6s ease 1.1s both;
}
.ph-hero__scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(89,86,233,.95), transparent);
  animation: ph-scroll-pulse 1.6s ease-in-out 1.4s infinite;
}
.ph-hero__scroll-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
@keyframes ph-scroll-pulse {
  0%,100% { transform: scaleY(1);   opacity: .6; }
  50%      { transform: scaleY(1.3); opacity: 1; }
}

/* ── Shared keyframe ── */
@keyframes ph-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .ph-hero { padding-top: 60px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .ph-hero { padding-top: 50px; padding-bottom: 55px; }
  .ph-hero__title { letter-spacing: -.022em; }
  .ph-hero__sub { font-size: .96rem; }
  .ph-btn-primary,
  .ph-btn-ghost { padding: 13px 26px; font-size: 14px; }
  .ph-orb--a { width: 380px; height: 380px; }
  .ph-orb--b { width: 260px; height: 260px; }
  .ph-hero__scroll { display: none; }
}


/* ================================================================
   §22  ROCKET JOURNEY  (.rj-*)
   Desktop: sticky horizontal scroll-driven timeline.
   Mobile:  vertical parallax cards with IntersectionObserver.
================================================================ */

.rj-section {
  background: #0D0D12;
  position: relative;
  overflow: clip; /* clip ≠ hidden: clips visually but doesn't block sticky */
}

.rj-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(89,86,233,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,86,233,.042) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 25%, transparent 100%);
  pointer-events: none; z-index: 0;
}

.rj-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .11;
  pointer-events: none; z-index: 0;
}
.rj-orb--a { width: 600px; height: 600px; background: #5956E9; top: -180px; left: -200px; }
.rj-orb--b { width: 400px; height: 400px; background: #1EE2CF; bottom: -100px; right: -120px; }

/* ── Section header ── */
.rj-header {
  text-align: center;
  padding: 80px 24px 40px;
  position: relative; z-index: 5;
}

.rj-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: #FFDC60; margin-bottom: 18px;
}
.rj-label-line {
  display: block; width: 32px; height: 1px;
  background: rgba(255,220,96,.45);
}

.rj-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700; color: #ffffff;
  line-height: 1.12; letter-spacing: -.025em;
  margin-bottom: 16px;
}
.rj-title em { font-style: normal; color: #FFDC60; }

.rj-sub {
  font-size: 16px; color: rgba(255,255,255,.35);
  max-width: 460px; margin: 0 auto 24px; line-height: 1.75;
}

.rj-scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.18); margin-top: 4px;
}
.rj-scroll-hint svg { animation: rjArrowBounce 1.6s ease-in-out infinite; }
@keyframes rjArrowBounce {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(7px); }
}

/* ── Sticky outer ── */
.rj-sticky-outer {
  position: relative;
  height: 300vh; /* JS overrides after render; 300vh is a reasonable fallback */
}

/* ── Sticky inner — JS switches between relative / fixed / absolute ── */
.rj-sticky-inner {
  position: relative;
  height: 100vh; overflow: hidden;
  width: 100%;
}

/* ── Road ── */
.rj-road {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(89,86,233,.3) 8%,
    rgba(255,220,96,.4) 50%, rgba(30,226,207,.3) 92%, transparent 100%);
  z-index: 2; transform: translateY(-50%);
}
.rj-road-glow {
  position: absolute; inset: -5px 0;
  background: inherit; filter: blur(7px); opacity: .45;
}

/* ── Track ── */
.rj-track {
  display: flex; height: 100%;
  padding: 0 5vw 0 8vw;
  will-change: transform;
  position: relative; z-index: 3;
}

/* ── Card wrap ── */
.rj-card-wrap {
  flex: 0 0 220px;
  position: relative; height: 100%;
}

/* ── Card positions: odd above road, even below ── */
.rj-card-wrap:nth-child(odd) .rj-card {
  position: absolute;
  bottom: calc(50% + 30px);
  left: 10px; right: 10px;
}
.rj-card-wrap:nth-child(even) .rj-card {
  position: absolute;
  top: calc(50% + 30px);
  left: 10px; right: 10px;
}

/* ── Card base ── */
.rj-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; padding: 20px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: default;
  transition:
    transform .45s cubic-bezier(.34,1.56,.64,1),
    border-color .35s ease, box-shadow .35s ease,
    background .35s ease, opacity .35s ease;
}

/* Connector lines card ↔ road */
.rj-card-wrap:nth-child(odd) .rj-card::after {
  content: ''; position: absolute;
  bottom: -30px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,220,96,.45), rgba(89,86,233,.2));
}
.rj-card-wrap:nth-child(even) .rj-card::after {
  content: ''; position: absolute;
  top: -30px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 30px;
  background: linear-gradient(to top, rgba(255,220,96,.45), rgba(89,86,233,.2));
}

/* ── Active state ── */
.rj-card.is-active {
  background: rgba(89,86,233,.12);
  border-color: rgba(89,86,233,.5);
  box-shadow: 0 0 40px rgba(89,86,233,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.rj-card-wrap:nth-child(odd)  .rj-card.is-active { transform: translateY(-6px); }
.rj-card-wrap:nth-child(even) .rj-card.is-active { transform: translateY(6px); }
.rj-card:not(.is-active) { opacity: .42; }

/* ── Card icon ── */
.rj-card-icon {
  font-size: 26px; margin-bottom: 9px; display: block;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  filter: grayscale(.5);
}
.rj-card.is-active .rj-card-icon { transform: scale(1.15); filter: grayscale(0); }

/* ── Year pill ── */
.rj-card-year {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: #FFDC60;
  background: rgba(255,220,96,.07); border: 1px solid rgba(255,220,96,.2);
  border-radius: 40px; padding: 3px 10px; margin-bottom: 9px;
}
.rj-year-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #FFDC60; flex-shrink: 0;
  animation: rjYearPulse 1.8s ease-in-out infinite;
}
@keyframes rjYearPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.5); }
}

.rj-card h4 {
  font-size: 13px; font-weight: 700;
  color: #ffffff; line-height: 1.35; margin-bottom: 6px;
}
.rj-card p {
  font-size: 11.5px; color: rgba(255,255,255,.35);
  line-height: 1.72; margin: 0;
  transition: color .35s ease;
}
.rj-card.is-active p { color: rgba(255,255,255,.58); }

/* ── Achievement badge ── */
.rj-card-badge {
  position: absolute; top: -11px; right: -11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #FFDC60, #f97316);
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,220,96,.35);
  transform: scale(0) rotate(-20deg);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.rj-card.is-active .rj-card-badge { transform: scale(1) rotate(0deg); }

/* ── Node on road ── */
.rj-node {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: #FFDC60; border: 2px solid #0D0D12;
  box-shadow: 0 0 0 3px rgba(89,86,233,.5);
  z-index: 15; pointer-events: none;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.rj-card-wrap.is-active .rj-node {
  transform: translate(-50%, -50%) scale(1.6);
  box-shadow: 0 0 0 3px #5956E9, 0 0 18px rgba(255,220,96,.55);
  animation: rjNodeRipple 1.8s ease-in-out infinite;
}
@keyframes rjNodeRipple {
  0%   { box-shadow: 0 0 0 3px #5956E9, 0 0 0 0 rgba(255,220,96,.5); }
  70%  { box-shadow: 0 0 0 3px #5956E9, 0 0 0 12px rgba(255,220,96,0); }
  100% { box-shadow: 0 0 0 3px #5956E9, 0 0 0 0 rgba(255,220,96,0); }
}

/* ── Rocket ── */
.rj-rocket {
  position: absolute; top: calc(50% - 16px); left: -100px;
  z-index: 20; width: 80px; height: 32px;
  pointer-events: none; will-change: left;
  filter: drop-shadow(0 0 10px rgba(89,86,233,.9)) drop-shadow(0 0 22px rgba(255,220,96,.5));
}
.rj-rocket-svg { width: 100%; height: 100%; overflow: visible; }
.rj-flame-outer {
  transform-origin: 19px 16px;
  animation: rjFlameO .3s ease-in-out infinite alternate;
}
.rj-flame-inner {
  transform-origin: 17px 16px;
  animation: rjFlameI .22s ease-in-out infinite alternate;
}
@keyframes rjFlameO {
  from { transform: scaleX(.7) scaleY(.6); }
  to   { transform: scaleX(1.2) scaleY(1.35); }
}
@keyframes rjFlameI {
  from { transform: scaleX(.8); opacity: .65; }
  to   { transform: scaleX(1.3); opacity: 1; }
}

/* ── Progress bar ── */
.rj-progress {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 10;
  padding: 10px 18px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
}
.rj-progress-track {
  width: 160px; height: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 2px; overflow: hidden;
}
.rj-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5956E9, #FFDC60, #1EE2CF);
  border-radius: 2px; transition: width .1s linear;
}
.rj-progress-pct {
  font-size: 11px; font-weight: 700;
  color: rgba(255,220,96,.6); min-width: 32px;
}

/* ── End cap ── */
.rj-endcap {
  flex: 0 0 240px; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 36px; text-align: center;
  position: relative; z-index: 5;
}
.rj-endcap-orb {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, #5956E9, #1EE2CF);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 14px;
  animation: rjEndPulse 2.5s ease-in-out infinite;
}
@keyframes rjEndPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89,86,233,.4), 0 0 0 0 rgba(30,226,207,.2); }
  50%      { box-shadow: 0 0 0 18px rgba(89,86,233,.08), 0 0 0 36px rgba(30,226,207,.04); }
}
.rj-endcap-dots {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 14px;
}
.rj-endcap-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFDC60; opacity: .25;
  animation: rjDotBlink 1.4s ease-in-out infinite;
}
.rj-endcap-dots span:nth-child(2) { animation-delay: .22s; }
.rj-endcap-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes rjDotBlink {
  0%, 100% { opacity: .18; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.55); }
}
.rj-endcap-title {
  font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.rj-endcap-sub {
  font-size: 13px; color: rgba(255,255,255,.32); line-height: 1.7;
}

/* ── Responsive: desktop/mobile toggle ── */
@media (max-width: 991px) {
  .rj-sticky-outer { display: none !important; }
  .rj-header { padding: 60px 20px 40px; }
  .rj-scroll-hint { display: none; }
}
@media (min-width: 992px) {
  .rj-mobile-timeline { display: none !important; }
}

/* ── Mobile timeline ── */
.rj-mobile-timeline {
  padding: 20px 20px 80px;
  position: relative;
}
.rj-mobile-timeline::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 48px;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(89,86,233,.4), rgba(255,220,96,.5) 50%,
    rgba(30,226,207,.3) 90%, transparent);
}
.rj-ml-item {
  display: flex; gap: 18px; padding: 0 0 32px 0;
  position: relative;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.rj-ml-item.rj-ml-visible { opacity: 1; transform: none; }
.rj-ml-dot {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #0D0D12; border: 2px solid rgba(255,220,96,.6);
  box-shadow: 0 0 0 3px rgba(89,86,233,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; z-index: 2; position: relative; margin-top: 2px;
}
.rj-ml-content {
  flex: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 16px 14px;
}
.rj-ml-year {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #FFDC60; display: block; margin-bottom: 4px;
}
.rj-ml-title {
  font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px;
}
.rj-ml-desc {
  font-size: 12px; color: rgba(255,255,255,.38);
  line-height: 1.68; margin: 0;
}
.rj-ml-endcap {
  text-align: center; padding: 16px 0 0;
}
.rj-ml-endcap .rj-endcap-orb { margin: 0 auto 10px; }


/* ============================================================
   §23  PR PAGE — Press Release & Awards
   Classes prefixed  pr-  (page body: .pr-page)
============================================================ */

/* ── Preloader ── */
.pr-page #pr-preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: #0D0D12;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s, visibility .4s;
}
.pr-page #pr-preloader.pr-loaded { opacity: 0; visibility: hidden; }

/* ── Scroll-reveal base ── */
[data-pr-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-pr-reveal].pr-visible { opacity: 1; transform: none; }

/* ── Stats strip ── */
.pr-stats { background: #0D0D12; padding: 64px 0; border-top: 1px solid rgba(255,255,255,.06); }
.pr-stats__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.pr-stat { text-align: center; padding: 24px 16px; position: relative; }
.pr-stat + .pr-stat::before {
  content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.1);
}
.pr-stat__num {
  display: block; font-size: 54px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg,#5956E9 0%,#FFDC60 60%,#1EE2CF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 10px;
}
.pr-stat__lbl {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* ── Featured In marquee ── */
.pr-featured { padding: 56px 0; background: #f7f8fc; overflow: hidden; border-bottom: 1px solid #ebebf3; }
.pr-featured__hd {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #aaa; margin-bottom: 36px;
}
.pr-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.pr-marquee__track {
  display: flex; width: max-content;
  animation: prScroll 26s linear infinite;
}
.pr-marquee__track:hover { animation-play-state: paused; }
.pr-marquee__item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 44px; font-size: 16px; font-weight: 700;
  color: #888; white-space: nowrap;
  border-right: 1px solid #e0e0eb; transition: color .2s;
}
.pr-marquee__item:hover { color: #5956E9; }
.pr-marquee__item i { font-size: 13px; color: #ccc; }
@keyframes prScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Showcase section ── */
.pr-showcase { padding: 90px 0 110px; background: #fff; }

/* ── Section header ── */
.pr-hd { text-align: center; margin-bottom: 52px; }
.pr-hd__label {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #5956E9; margin-bottom: 14px;
}
.pr-hd__title { font-size: 42px; font-weight: 800; color: #0D0D12; line-height: 1.12; margin-bottom: 16px; }
.pr-hd__title em { font-style: normal; color: #5956E9; }
.pr-hd__sub { font-size: 16px; color: #777; max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* ── Filter bar ── */
.pr-filterbar { display: flex; justify-content: center; gap: 8px; margin-bottom: 52px; flex-wrap: wrap; }
.pr-filter {
  padding: 9px 24px; border-radius: 40px; border: 1.5px solid #dde0ee;
  background: transparent; font-size: 13px; font-weight: 700;
  color: #666; cursor: pointer; transition: all .22s; letter-spacing: .02em;
}
.pr-filter.active, .pr-filter:hover {
  background: #5956E9; border-color: #5956E9; color: #fff;
  box-shadow: 0 4px 16px rgba(89,86,233,.28);
}

/* ── Card grid ── */
.pr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.pr-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(16,24,40,.07);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s;
}
.pr-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(89,86,233,.15); }
.pr-card.hidden { display: none !important; }
.pr-card__fig { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #f0f1f8; }
.pr-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.pr-card:hover .pr-card__img { transform: scale(1.05); }
.pr-card__overlay {
  position: absolute; inset: 0; background: rgba(13,13,18,.6);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; transition: opacity .28s;
}
.pr-card:hover .pr-card__overlay { opacity: 1; }
.pr-card__act {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.pr-card__act:hover { background: #5956E9; color: #fff; transform: scale(1.1); }
.pr-card__act--play { width: 56px; height: 56px; font-size: 18px; }
.pr-card__badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; font-weight: 800; padding: 4px 11px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .07em;
}
.pr-badge--pr    { background: #5956E9; color: #fff; }
.pr-badge--awd   { background: #FFDC60; color: #4a3800; }
.pr-badge--video { background: #FF3B30; color: #fff; }
.pr-card__body { padding: 20px 22px 22px; }
.pr-card__title { font-size: 15px; font-weight: 700; color: #0D0D12; line-height: 1.35; margin: 0 0 10px; }
.pr-card__title a { color: inherit; text-decoration: none; transition: color .2s; }
.pr-card__title a:hover { color: #5956E9; }
.pr-card__meta { font-size: 12px; color: #999; display: flex; align-items: center; gap: 7px; }
.pr-card__meta i { color: #5956E9; font-size: 12px; }

/* ── Lightbox ── */
.pr-lb { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pr-lb[hidden] { display: none; }
.pr-lb__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.pr-lb__panel { position: relative; max-width: 92vw; max-height: 92vh; z-index: 1; animation: prLbIn .25s ease; }
@keyframes prLbIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
.pr-lb__img { max-width: 100%; max-height: 88vh; border-radius: 10px; display: block; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.pr-lb__close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  font-size: 14px; color: #333;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: background .2s, color .2s; z-index: 2;
}
.pr-lb__close:hover { background: #5956E9; color: #fff; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .pr-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .pr-stats__grid { grid-template-columns: repeat(2,1fr); }
  .pr-stat + .pr-stat::before { display: none; }
  .pr-hd__title { font-size: 34px; }
}
@media (max-width: 575px) {
  .pr-grid { grid-template-columns: 1fr; }
  .pr-hd__title { font-size: 28px; }
  .pr-stat__num { font-size: 42px; }
  .pr-showcase { padding: 60px 0 80px; }
}
.rj-ml-endcap .rj-endcap-title { font-size: 16px; margin-bottom: 4px; }

/* ============================================================
   §23  PR PAGE — Press Release & Awards
   Classes prefixed  pr-  (page body: .pr-page)
============================================================ */

/* ── Preloader (reuse ab-preloader-ring) ── */
.pr-page #pr-preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: #0D0D12;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s, visibility .4s;
}
.pr-page #pr-preloader.pr-loaded {
  opacity: 0; visibility: hidden;
}

/* ── Scroll-reveal base ── */
[data-pr-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-pr-reveal].pr-visible {
  opacity: 1;
  transform: none;
}

/* ── Stats strip ── */
.pr-stats {
  background: #0D0D12;
  padding: 64px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pr-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.pr-stat {
  text-align: center;
  padding: 24px 16px;
  position: relative;
}
.pr-stat + .pr-stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.1);
}
.pr-stat__num {
  display: block;
  font-size: 54px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #5956E9 0%, #FFDC60 60%, #1EE2CF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.pr-stat__lbl {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* ── Featured In marquee ── */
.pr-featured {
  padding: 56px 0;
  background: #f7f8fc;
  overflow: hidden;
  border-bottom: 1px solid #ebebf3;
}
.pr-featured__hd {
  text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #aaa;
  margin-bottom: 36px;
}
.pr-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.pr-marquee__track {
  display: flex; gap: 0;
  width: max-content;
  animation: prScroll 24s linear infinite;
}
.pr-marquee__track:hover { animation-play-state: paused; }
.pr-marquee__item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 44px;
  font-size: 16px; font-weight: 700;
  color: #888; letter-spacing: .01em;
  white-space: nowrap;
  border-right: 1px solid #e0e0eb;
  transition: color .2s;
}
.pr-marquee__item:hover { color: #5956E9; }
.pr-marquee__item i {
  font-size: 14px; color: #bbb;
}
@keyframes prScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Section wrapper ── */
.pr-showcase {
  padding: 90px 0 110px;
  background: #fff;
}

/* ── Section header ── */
.pr-hd {
  text-align: center;
  margin-bottom: 52px;
}
.pr-hd__label {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #5956E9;
  margin-bottom: 14px;
}
.pr-hd__title {
  font-size: 42px; font-weight: 800;
  color: #0D0D12; line-height: 1.12;
  margin-bottom: 16px;
}
.pr-hd__title em { font-style: normal; color: #5956E9; }
.pr-hd__sub {
  font-size: 16px; color: #777;
  max-width: 520px; margin: 0 auto;
  line-height: 1.7;
}

/* ── Filter bar ── */
.pr-filterbar {
  display: flex; justify-content: center;
  gap: 8px; margin-bottom: 52px;
  flex-wrap: wrap;
}
.pr-filter {
  padding: 9px 24px;
  border-radius: 40px;
  border: 1.5px solid #dde0ee;
  background: transparent;
  font-size: 13px; font-weight: 700;
  color: #666; cursor: pointer;
  transition: all .22s;
  letter-spacing: .02em;
}
.pr-filter.active,
.pr-filter:hover {
  background: #5956E9;
  border-color: #5956E9;
  color: #fff;
  box-shadow: 0 4px 16px rgba(89,86,233,.28);
}

/* ── Card grid ── */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pr-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(16,24,40,.07);
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s;
}
.pr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(89,86,233,.15);
}
.pr-card.hidden { display: none !important; }

.pr-card__fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f0f1f8;
}
.pr-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.pr-card:hover .pr-card__img { transform: scale(1.05); }

.pr-card__overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,18,.6);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  opacity: 0;
  transition: opacity .28s;
}
.pr-card:hover .pr-card__overlay { opacity: 1; }

.pr-card__act {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.pr-card__act:hover {
  background: #5956E9; color: #fff;
  transform: scale(1.1);
}
.pr-card__act--play {
  width: 56px; height: 56px; font-size: 18px;
}

.pr-card__badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; font-weight: 800;
  padding: 4px 11px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .07em;
}
.pr-badge--pr    { background: #5956E9; color: #fff; }
.pr-badge--awd   { background: #FFDC60; color: #4a3800; }
.pr-badge--video { background: #FF3B30; color: #fff; }

.pr-card__body {
  padding: 20px 22px 22px;
}
.pr-card__title {
  font-size: 15px; font-weight: 700;
  color: #0D0D12; line-height: 1.35;
  margin: 0 0 10px;
}
.pr-card__title a {
  color: inherit; text-decoration: none;
  transition: color .2s;
}
.pr-card__title a:hover { color: #5956E9; }
.pr-card__meta {
  font-size: 12px; color: #999;
  display: flex; align-items: center; gap: 7px;
}
.pr-card__meta i { color: #5956E9; font-size: 12px; }

/* ── Lightbox ── */
.pr-lb {
  position: fixed; inset: 0; z-index: 200000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pr-lb[hidden] { display: none; }
.pr-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.9);
}
.pr-lb__panel {
  position: relative;
  max-width: 92vw; max-height: 92vh;
  z-index: 1;
  animation: prLbIn .25s ease;
}
@keyframes prLbIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.pr-lb__img {
  max-width: 100%; max-height: 88vh;
  border-radius: 10px; display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.pr-lb__close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  font-size: 14px; color: #333;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: background .2s, color .2s;
  z-index: 2;
}
.pr-lb__close:hover { background: #5956E9; color: #fff; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .pr-grid        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pr-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .pr-stat + .pr-stat::before { display: none; }
  .pr-hd__title   { font-size: 34px; }
}
@media (max-width: 575px) {
  .pr-grid        { grid-template-columns: 1fr; }
  .pr-hd__title   { font-size: 28px; }
  .pr-stat__num   { font-size: 42px; }
  .pr-showcase    { padding: 60px 0 80px; }
}


/* ============================================================
   §24  404 NOT FOUND PAGE
============================================================ */

/* Full-viewport section — reuses ph-hero dark bg + orbs */
.nf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0D0D12;
  padding: 120px 20px 80px;
}

/* ── Orbs (same as ph-hero) ── */
.nf-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .55;
}
.nf-orb--a {
  width: 600px; height: 600px;
  top: -160px; left: -140px;
  background: radial-gradient(circle, rgba(89,86,233,.45) 0%, transparent 70%);
  animation: ph-float 10s ease-in-out infinite;
}
.nf-orb--b {
  width: 420px; height: 420px;
  bottom: -80px; right: -100px;
  background: radial-gradient(circle, rgba(255,220,96,.3) 0%, transparent 70%);
  animation: ph-float 14s ease-in-out infinite reverse;
}
.nf-orb--c {
  width: 280px; height: 280px;
  top: 50%; left: 52%;
  background: radial-gradient(circle, rgba(89,86,233,.2) 0%, transparent 70%);
  animation: ph-float 8s ease-in-out 2s infinite;
}

/* Noise grain overlay */
.nf-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Content ── */
.nf-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

/* Giant 404 */
.nf-num {
  font-size: clamp(120px, 20vw, 220px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -4px;
  background: linear-gradient(135deg, #5956E9 0%, #a5b4fc 40%, #FFDC60 75%, #5956E9 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nf-gradient 5s ease-in-out infinite;
  margin: 0 0 8px;
  position: relative;
}
/* Soft glow behind the number */
.nf-num::before {
  content: '404';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #5956E9, #FFDC60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(40px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

@keyframes nf-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Eyebrow pill */
.nf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.nf-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ph-shimmer 3.5s ease-in-out 2s infinite;
}
.nf-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FFDC60;
  animation: ph-dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Title + sub */
.nf-title {
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 16px;
}
.nf-title em {
  font-style: normal;
  background: linear-gradient(90deg, #a5b4fc, #FFDC60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nf-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  max-width: 460px;
  margin: 0 auto 40px;
}

/* CTA buttons */
.nf-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: #5956E9;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(89,86,233,.4);
}
.nf-btn-primary:hover {
  background: #4542d0;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(89,86,233,.5);
}
.nf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: transparent;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.nf-btn-ghost:hover {
  border-color: rgba(255,255,255,.45);
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* Floating astronaut illustration — pure CSS */
.nf-astro {
  margin: 48px auto 0;
  width: 160px;
  height: 160px;
  position: relative;
  animation: nf-float 5s ease-in-out infinite;
}
@keyframes nf-float {
  0%,100% { transform: translateY(0);   }
  50%      { transform: translateY(-18px); }
}
.nf-astro__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.1);
  animation: nf-spin 20s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }
.nf-astro__ring::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #5956E9;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(89,86,233,.8);
}
.nf-astro__body {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(89,86,233,.3) 0%, rgba(165,180,252,.15) 100%);
  border: 1px solid rgba(165,180,252,.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}

/* Divider line before footer */
.nf-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.07);
  margin: 0;
}

/* Responsive */
@media (max-width: 575px) {
  .nf-num  { letter-spacing: -2px; }
  .nf-sub  { font-size: 14px; }
  .nf-btn-primary,
  .nf-btn-ghost { padding: 12px 24px; font-size: 13px; width: 100%; justify-content: center; }
  .nf-actions { flex-direction: column; }
  .nf-astro { width: 120px; height: 120px; }
  .nf-astro__body { font-size: 38px; }
}


/* ============================================================
   §25  S4 CINESPHERE PAGE  (.s4c-page)
   Cinematic dark theme — accent: #FFDC60 gold + #E63946 red
============================================================ */

/* ── Scroll-reveal base ── */
[data-s4c-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-s4c-reveal].s4c-visible {
  opacity: 1;
  transform: none;
}

/* ── Story section ── */
.s4c-story {
  background: #fff;
  padding: 96px 0 100px;
}
.s4c-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Left: video thumb + quote */
.s4c-video-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}
.s4c-video-wrap img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
}
.s4c-video-wrap:hover img { transform: scale(1.04); }

.s4c-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  transition: background .3s;
  text-decoration: none;
}
.s4c-play:hover { background: rgba(0,0,0,.45); }
.s4c-play__btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #FFDC60;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: #0D0D12;
  box-shadow: 0 0 0 12px rgba(255,220,96,.25);
  transition: transform .25s, box-shadow .25s;
}
.s4c-play:hover .s4c-play__btn {
  transform: scale(1.1);
  box-shadow: 0 0 0 18px rgba(255,220,96,.18);
}

.s4c-quote {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 4px solid #FFDC60;
  background: #fafafa;
  border-radius: 0 12px 12px 0;
}
.s4c-quote p {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
  font-style: italic;
  margin: 0;
}

/* Right: brand copy */
.s4c-story__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: #E63946;
  margin-bottom: 20px;
}
.s4c-story__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: #E63946;
  border-radius: 2px;
}
.s4c-story__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #0D0D12;
  line-height: 1.15;
  margin-bottom: 24px;
}
.s4c-story__title em {
  font-style: normal;
  background: linear-gradient(90deg, #E63946, #FFDC60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s4c-story__body p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
}
.s4c-story__body p:last-child { margin-bottom: 0; }

/* ── Stats bar ── */
.s4c-stats {
  background: #0D0D12;
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.s4c-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.s4c-stat {
  text-align: center;
  padding: 20px 16px;
  position: relative;
}
.s4c-stat + .s4c-stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.1);
}
.s4c-stat__num {
  display: block;
  font-size: 52px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #FFDC60 0%, #5956E9 60%, #FFDC60 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nf-gradient 4s ease infinite;
  margin-bottom: 10px;
}
.s4c-stat__lbl {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}

/* ── Three pillars ── */
.s4c-pillars {
  background: #f7f8fc;
  padding: 90px 0 100px;
}
.s4c-pillars__hd {
  text-align: center;
  margin-bottom: 56px;
}
.s4c-pillars__label {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #E63946;
  margin-bottom: 14px;
}
.s4c-pillars__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: #0D0D12;
  line-height: 1.15;
}
.s4c-pillars__title em {
  font-style: normal;
  background: linear-gradient(90deg, #E63946, #FFDC60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s4c-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.s4c-pillar {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px 38px;
  box-shadow: 0 2px 20px rgba(16,24,40,.06);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.s4c-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #E63946, #FFDC60);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.s4c-pillar:hover::before { transform: scaleX(1); }
.s4c-pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(230,57,70,.12);
}
.s4c-pillar__icon {
  font-size: 40px;
  margin-bottom: 22px;
  display: block;
  line-height: 1;
}
.s4c-pillar__num {
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #E63946;
  margin-bottom: 12px;
}
.s4c-pillar__title {
  font-size: 22px; font-weight: 800;
  color: #0D0D12;
  margin-bottom: 14px;
}
.s4c-pillar__body {
  font-size: 14px; line-height: 1.75;
  color: #666;
}

/* ── CTA band ── */
.s4c-cta {
  position: relative;
  background: linear-gradient(145deg, #eef0ff 0%, var(--tp-grey-1) 50%, #fffbee 100%);
  padding: 96px 0 108px;
  overflow: hidden;
}
.s4c-cta__orb-a {
  position: absolute;
  width: 500px; height: 500px;
  top: -150px; left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89,86,233,.12) 0%, transparent 70%);
  filter: blur(80px);
  animation: ph-float 9s ease-in-out infinite;
  pointer-events: none;
}
.s4c-cta__orb-b {
  position: absolute;
  width: 380px; height: 380px;
  bottom: -80px; right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,96,.18) 0%, transparent 70%);
  filter: blur(70px);
  animation: ph-float 12s ease-in-out infinite reverse;
  pointer-events: none;
}

/* Two-column grid */
.s4c-cta__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
}
/* Pill badges row */
.s4c-cta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.s4c-cta__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-violet);
  border: 1px solid rgba(89,86,233,.2);
  background: rgba(89,86,233,.06);
  padding: 5px 14px;
  border-radius: 100px;
  position: relative; overflow: hidden;
}
.s4c-cta__tag::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(89,86,233,.18), transparent);
  transform: translateX(-100%);
  animation: ph-shimmer 3.5s ease-in-out 2s infinite;
}
.s4c-cta__nonprofit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: #92650a;
  border: 1px solid rgba(180,120,0,.2);
  background: rgba(255,193,7,.07);
  padding: 5px 14px;
  border-radius: 100px;
}

.s4c-cta__title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 18px;
}
.s4c-cta__title em {
  font-style: italic;
  color: var(--accent-violet);
}
.s4c-cta__sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* Social proof chip */
.s4c-cta__proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--tp-border-1);
  border-radius: 14px;
  margin-bottom: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.s4c-cta__proof-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-violet), #7B79F7);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.s4c-cta__proof-text {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.35;
}
.s4c-cta__proof-text strong {
  display: block;
  font-size: 17px; font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.s4c-cta__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Visual: outer wrapper */
.s4c-cta__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}

/* Dark cinema stage card */
.s4c-cta__stage {
  position: relative;
  width: 340px;
  border-radius: 28px;
  background: linear-gradient(160deg, #16161e 0%, #0D0D12 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 52px 32px 44px;
  border: 1px solid rgba(255,220,96,.2);
  box-shadow:
    0 40px 100px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,220,96,.12),
    inset 0 -1px 0 rgba(255,220,96,.05);
  overflow: hidden;
}
/* Top gold glow inside card */
.s4c-cta__stage::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,96,.12) 0%, transparent 70%);
  pointer-events: none;
}
/* Bottom subtle gold bar */
.s4c-cta__stage::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,220,96,.5), transparent);
  border-radius: 2px;
}

/* Spinning rings inside the stage — always behind the logo */
.s4c-cta__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.s4c-cta__ring--c {
  width: 380px; height: 380px;
  border: 1px dashed rgba(89,86,233,.12);
  animation: ph-spin-slow 45s linear infinite;
}
.s4c-cta__ring--a {
  width: 300px; height: 300px;
  border: 1.5px solid rgba(255,220,96,.28);
  animation: ph-spin-slow 28s linear infinite;
}
.s4c-cta__ring--b {
  width: 228px; height: 228px;
  border: 2px solid rgba(255,220,96,.55);
  animation: ph-spin-slow 18s linear infinite reverse;
}

/* Logo circle — sits above rings */
.s4c-cta__logo-wrap {
  position: relative;
  z-index: 3;
  width: 190px; height: 190px;
  border-radius: 50%;
  overflow: hidden;
  background-size: 130%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0D0D12;
  box-shadow:
    0 0 0 4px rgba(255,220,96,.7),
    0 0 0 9px rgba(255,220,96,.15),
    0 16px 48px rgba(0,0,0,.5);
  flex-shrink: 0;
}


/* Floating badges — positioned relative to .s4c-cta__visual */
.s4c-cta__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--tp-border-1);
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap;
  z-index: 5;
}
.s4c-cta__badge i { font-size: 13px; }
.s4c-cta__badge--tl {
  top: 10px; left: -8px;
  color: var(--accent-violet);
}
.s4c-cta__badge--tl i { color: #FFDC60; }
.s4c-cta__badge--br {
  bottom: 10px; right: -8px;
  color: var(--text-secondary);
}
.s4c-cta__badge--br i { color: var(--accent-violet); }

@keyframes ph-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .s4c-story__grid { grid-template-columns: 1fr; gap: 48px; }
  .s4c-pillars__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .s4c-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .s4c-stat + .s4c-stat::before { display: none; }
}
@media (max-width: 575px) {
  .s4c-story { padding: 64px 0 72px; }
  .s4c-pillars__grid { grid-template-columns: 1fr; }
  .s4c-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .s4c-pillar { padding: 28px 24px; }
  .s4c-cta { padding: 72px 0 80px; }
  .s4c-cta__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .s4c-cta__badges, .s4c-cta__proof, .s4c-cta__actions { justify-content: center; }
  .s4c-cta__visual { order: -1; padding: 20px 16px; }
  .s4c-cta__stage { width: 280px; padding: 40px 24px 36px; }
  .s4c-cta__ring--c { width: 300px; height: 300px; }
  .s4c-cta__ring--a { width: 240px; height: 240px; }
  .s4c-cta__ring--b { width: 182px; height: 182px; }
  .s4c-cta__logo-wrap { width: 152px; height: 152px; }
  .s4c-cta__badge { display: none; }
  .s4c-cta__actions { flex-direction: column; align-items: center; }
  .s4c-cta__actions .btn-cta-primary,
  .s4c-cta__actions .btn-cta-secondary { width: 100%; max-width: 320px; justify-content: center; }
}


/* ── S4 Music section ── */
.s4c-music {
  background: #0D0D12;
  padding: 96px 0 108px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.s4c-music__hd {
  text-align: center;
  margin-bottom: 60px;
}
.s4c-music__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFDC60;
  margin-bottom: 16px;
}
.s4c-music__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}
.s4c-music__title em {
  font-style: normal;
  background: linear-gradient(90deg, #FFDC60, #E63946);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s4c-music__sub {
  font-size: 15px; color: rgba(255,255,255,.45);
  line-height: 1.7; max-width: 480px; margin: 0 auto;
}

/* Platform distribution grid */
.s4c-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.s4c-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: calc(25% - 12px);
  min-width: 160px;
  padding: 32px 20px 26px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease, box-shadow .3s ease;
}
.s4c-platform:hover {
  transform: translateY(-7px);
  text-decoration: none;
}
.s4c-platform__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  margin-bottom: 2px;
  transition: transform .3s ease;
}
.s4c-platform:hover .s4c-platform__icon { transform: scale(1.1); }
.s4c-platform__name {
  font-size: 15px; font-weight: 700;
  color: #fff; line-height: 1.2;
}
.s4c-platform__cta {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.38);
  display: flex; align-items: center; gap: 5px;
  transition: color .2s;
}
.s4c-platform__cta i { font-size: 10px; }
.s4c-platform:not(.s4c-platform--apple):hover .s4c-platform__cta { color: rgba(255,255,255,.8); }
.s4c-platform:not(.s4c-platform--apple):active { transform: translateY(-2px); }
.s4c-platform:focus-visible {
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 4px;
}

/* Per-platform accent colours */
.s4c-platform--spotify  .s4c-platform__icon { background: rgba(29,185,84,.15);  color: #1DB954; }
.s4c-platform--spotify:hover  { background: rgba(29,185,84,.07);  box-shadow: 0 18px 48px rgba(29,185,84,.2); }
.s4c-platform--amazon   .s4c-platform__icon { background: rgba(255,153,0,.15);  color: #FF9900; }
.s4c-platform--amazon:hover   { background: rgba(255,153,0,.07);  box-shadow: 0 18px 48px rgba(255,153,0,.2); }
.s4c-platform--jio      .s4c-platform__icon { background: rgba(43,197,180,.15); color: #2BC5B4; }
.s4c-platform--jio:hover      { background: rgba(43,197,180,.07); box-shadow: 0 18px 48px rgba(43,197,180,.2); }
.s4c-platform--wynk     .s4c-platform__icon { background: rgba(176,38,255,.15); color: #B026FF; }
.s4c-platform--wynk:hover     { background: rgba(176,38,255,.07); box-shadow: 0 18px 48px rgba(176,38,255,.2); }
.s4c-platform--ytmusic  .s4c-platform__icon { background: rgba(255,0,0,.15);    color: #FF4040; }
.s4c-platform--ytmusic:hover  { background: rgba(255,0,0,.07);    box-shadow: 0 18px 48px rgba(255,0,0,.2); }
.s4c-platform--apple    .s4c-platform__icon { background: rgba(250,36,60,.15);  color: #FA243C; }
.s4c-platform--apple    { opacity: .5; cursor: not-allowed; pointer-events: none; }
.s4c-platform--resso    .s4c-platform__icon { background: rgba(255,45,85,.15);  color: #FF2D55; }
.s4c-platform--resso:hover    { background: rgba(255,45,85,.07);  box-shadow: 0 18px 48px rgba(255,45,85,.2); }

/* Responsive platform grid */
@media (max-width: 991px) {
  .s4c-platform { width: calc(33.33% - 11px); }
}
@media (max-width: 767px) {
  .s4c-platform { width: calc(50% - 8px); min-width: 0; }
  .s4c-music { padding: 72px 0 80px; }
}
@media (max-width: 400px) {
  .s4c-platform { width: 100%; }
}


/* ============================================================
   §26  ODICODER PAGE  (.oc-page)
   Tech-blue palette — accent: #4361EE blue + #CC44FF magenta
============================================================ */

/* ── Scroll reveal ── */
[data-oc-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
[data-oc-reveal].oc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stats strip ── */
.oc-stats {
  background: #0A0A14;
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oc-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.oc-stat {
  text-align: center;
  padding: 20px 16px;
  position: relative;
}
.oc-stat + .oc-stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.1);
}
.oc-stat__num {
  display: block;
  font-size: 52px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #4361EE 0%, #CC44FF 60%, #4361EE 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nf-gradient 4s ease infinite;
  margin-bottom: 10px;
}
.oc-stat__lbl {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}

/* ── Brand story ── */
.oc-story {
  background: var(--tp-common-white);
  padding: 96px 0 108px;
}
.oc-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.oc-video-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(67,97,238,.15);
}
.oc-video-wrap img {
  width: 100%; display: block;
  border-radius: 20px;
}
.oc-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.oc-play__btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #4361EE;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  padding-left: 4px;
  box-shadow: 0 8px 32px rgba(67,97,238,.5);
  transition: transform .3s ease, box-shadow .3s ease;
}
.oc-play:hover .oc-play__btn {
  transform: scale(1.12);
  box-shadow: 0 12px 40px rgba(67,97,238,.6);
}
.oc-play:active .oc-play__btn { transform: scale(1); }
.oc-quote {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-left: 3px solid #4361EE;
  background: rgba(67,97,238,.04);
  border-radius: 0 12px 12px 0;
}
.oc-quote p {
  font-size: 14px; line-height: 1.75;
  color: var(--text-secondary);
  font-style: italic; margin: 0;
}
.oc-story__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #4361EE;
  margin-bottom: 14px;
}
.oc-story__title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800; color: var(--text-primary);
  line-height: 1.15; margin-bottom: 24px; letter-spacing: -.02em;
}
.oc-story__title em {
  font-style: italic;
  background: linear-gradient(90deg, #4361EE, #CC44FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oc-story__body p {
  font-size: 15px; line-height: 1.8;
  color: var(--text-secondary); margin-bottom: 16px;
}
.oc-story__body p:last-child { margin-bottom: 0; }
.oc-story__links {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px;
}
.oc-story__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #4361EE;
  border: 1.5px solid rgba(67,97,238,.25);
  background: rgba(67,97,238,.05);
  padding: 8px 16px; border-radius: 100px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.oc-story__link:hover {
  background: rgba(67,97,238,.1); border-color: rgba(67,97,238,.5);
  transform: translateY(-2px); color: #4361EE;
}
.oc-story__link:active { transform: translateY(0); }

/* ── What We Teach (Pillars) ── */
.oc-pillars {
  background: var(--tp-grey-1);
  padding: 96px 0 108px;
}
.oc-pillars__hd { text-align: center; margin-bottom: 56px; }
.oc-pillars__label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #4361EE; margin-bottom: 14px;
}
.oc-pillars__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800; color: var(--text-primary);
  line-height: 1.15; letter-spacing: -.02em;
}
.oc-pillars__title em {
  font-style: italic;
  background: linear-gradient(90deg, #4361EE, #CC44FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oc-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.oc-pillar {
  background: var(--tp-common-white);
  border-radius: 20px; padding: 32px 28px;
  border: 1px solid var(--tp-border-1);
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.oc-pillar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4361EE, #CC44FF);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.oc-pillar:hover::before { transform: scaleX(1); }
.oc-pillar:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(67,97,238,.12); }
.oc-pillar__icon { font-size: 38px; margin-bottom: 20px; display: block; line-height: 1; }
.oc-pillar__num {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #4361EE; margin-bottom: 10px;
}
.oc-pillar__title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; line-height: 1.25; }
.oc-pillar__body { font-size: 14px; line-height: 1.75; color: var(--text-secondary); }

/* ── Community CTA ── */
.oc-cta {
  position: relative;
  background: linear-gradient(145deg, #eef1ff 0%, var(--tp-grey-1) 50%, #f5eeff 100%);
  padding: 96px 0 108px; overflow: hidden;
}
.oc-cta__orb-a {
  position: absolute; width: 500px; height: 500px;
  top: -150px; left: -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(67,97,238,.1) 0%, transparent 70%);
  filter: blur(80px); animation: ph-float 9s ease-in-out infinite; pointer-events: none;
}
.oc-cta__orb-b {
  position: absolute; width: 380px; height: 380px;
  bottom: -80px; right: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(204,68,255,.12) 0%, transparent 70%);
  filter: blur(70px); animation: ph-float 12s ease-in-out infinite reverse; pointer-events: none;
}
.oc-cta__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px; align-items: center;
}
.oc-cta__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.oc-cta__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: #4361EE;
  border: 1px solid rgba(67,97,238,.2); background: rgba(67,97,238,.06);
  padding: 5px 14px; border-radius: 100px;
  position: relative; overflow: hidden;
}
.oc-cta__tag::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(67,97,238,.18), transparent);
  transform: translateX(-100%); animation: ph-shimmer 3.5s ease-in-out 2s infinite;
}
.oc-cta__free {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #1a7f37;
  border: 1px solid rgba(26,127,55,.2); background: rgba(26,127,55,.06);
  padding: 5px 14px; border-radius: 100px;
}
.oc-cta__title {
  font-size: clamp(28px, 3.5vw, 48px); font-weight: 800;
  color: var(--text-primary); line-height: 1.15; margin-bottom: 18px;
}
.oc-cta__title em {
  font-style: italic;
  background: linear-gradient(90deg, #4361EE, #CC44FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oc-cta__sub { font-size: 16px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 28px; }
.oc-cta__proof {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px; background: #fff;
  border: 1px solid var(--tp-border-1); border-radius: 14px;
  margin-bottom: 40px; box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.oc-cta__proof-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #4361EE, #CC44FF);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0;
}
.oc-cta__proof-text { font-size: 14px; color: var(--text-secondary); line-height: 1.35; }
.oc-cta__proof-text strong {
  display: block; font-size: 17px; font-weight: 800;
  color: var(--text-primary); line-height: 1.1;
}
.oc-cta__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Logo stage */
.oc-cta__visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.oc-cta__stage {
  position: relative; width: 340px; border-radius: 28px;
  background: linear-gradient(160deg, #0e0e1c 0%, #0A0A14 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 32px 44px;
  border: 1px solid rgba(67,97,238,.25);
  box-shadow: 0 40px 100px rgba(0,0,0,.4), inset 0 1px 0 rgba(67,97,238,.15), inset 0 -1px 0 rgba(204,68,255,.08);
  overflow: hidden;
}
.oc-cta__stage::before {
  content: ''; position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(67,97,238,.15) 0%, transparent 70%);
  pointer-events: none;
}
.oc-cta__stage::after {
  content: ''; position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(67,97,238,.6), rgba(204,68,255,.5), transparent);
  border-radius: 2px;
}
.oc-cta__ring {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.oc-cta__ring--c {
  width: 380px; height: 380px;
  border: 1px dashed rgba(67,97,238,.12);
  animation: ph-spin-slow 45s linear infinite;
}
.oc-cta__ring--a {
  width: 300px; height: 300px;
  border: 1.5px solid rgba(67,97,238,.3);
  animation: ph-spin-slow 28s linear infinite;
}
.oc-cta__ring--b {
  width: 228px; height: 228px;
  border: 2px solid rgba(204,68,255,.5);
  animation: ph-spin-slow 18s linear infinite reverse;
}
.oc-cta__logo-wrap {
  position: relative; z-index: 3;
  width: 190px; height: 190px; border-radius: 50%;
  overflow: hidden;
  background-size: 110%; background-position: center;
  background-repeat: no-repeat; background-color: #fff;
  box-shadow: 0 0 0 4px rgba(67,97,238,.7), 0 0 0 9px rgba(67,97,238,.15), 0 16px 48px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.oc-cta__badge {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: #fff; border: 1px solid var(--tp-border-1); border-radius: 100px;
  padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap; z-index: 5;
}
.oc-cta__badge i { font-size: 13px; }
.oc-cta__badge--tl { top: 10px; left: -8px; color: #4361EE; }
.oc-cta__badge--tl i { color: #CC44FF; }
.oc-cta__badge--br { bottom: 10px; right: -8px; color: var(--text-secondary); }
.oc-cta__badge--br i { color: #4361EE; }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .oc-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .oc-story__grid { grid-template-columns: 1fr; gap: 48px; }
  .oc-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .oc-stat + .oc-stat::before { display: none; }
  .oc-cta__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .oc-cta__badges, .oc-cta__proof, .oc-cta__actions { justify-content: center; }
  .oc-cta__visual { order: -1; padding: 20px 16px; }
  .oc-cta__stage { width: 280px; padding: 40px 24px 36px; }
  .oc-cta__ring--c { width: 300px; height: 300px; }
  .oc-cta__ring--a { width: 240px; height: 240px; }
  .oc-cta__ring--b { width: 182px; height: 182px; }
  .oc-cta__logo-wrap { width: 152px; height: 152px; }
  .oc-cta__badge { display: none; }
}
@media (max-width: 767px) {
  .oc-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .oc-stat__num { font-size: 38px; }
  .oc-pillars__grid { grid-template-columns: 1fr; }
  .oc-story { padding: 64px 0 72px; }
  .oc-pillars { padding: 64px 0 72px; }
  .oc-cta { padding: 72px 0 80px; }
  .oc-cta__actions { flex-direction: column; align-items: center; }
  .oc-cta__actions .btn-cta-primary,
  .oc-cta__actions .btn-cta-secondary { width: 100%; max-width: 320px; justify-content: center; }
}

/* =============================================================
   §27  ODIDESIGNER PAGE
   Classes prefixed  od-  (page body: .od-page)
   Palette: Pink-Purple #B5179E + Deep Purple #7209B7
============================================================= */

/* ── Scroll reveal ── */
[data-od-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
[data-od-reveal].od-visible { opacity: 1; transform: translateY(0); }

/* ── Stats strip ── */
.od-stats { background: #0A0A14; padding: 56px 0; }
.od-stats__grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  position: relative; z-index: 1;
}
.od-stat { text-align: center; padding: 32px 20px; position: relative; }
.od-stat + .od-stat::before {
  content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.08);
}
.od-stat__num {
  display: block; font-size: clamp(36px, 5vw, 58px); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #B5179E 0%, #7209B7 55%, #B5179E 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: nf-gradient 4s ease infinite;
  margin-bottom: 8px;
}
.od-stat__lbl { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* ── Brand Story ── */
.od-story { padding: 96px 0 108px; background: var(--tp-common-white); }
.od-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

.od-video-wrap { position: relative; border-radius: 20px; overflow: hidden; }
.od-video-wrap img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.od-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,18,.35);
}
.od-play__btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #B5179E; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 0 0 12px rgba(181,23,158,.25);
  transition: transform .3s ease, box-shadow .3s ease;
  padding-left: 4px;
}
.od-play:hover .od-play__btn { transform: scale(1.1); box-shadow: 0 0 0 18px rgba(181,23,158,.18); }
.od-quote {
  margin: 24px 0 0; padding: 20px 24px; border-left: 3px solid #B5179E;
  background: rgba(181,23,158,.05); border-radius: 0 12px 12px 0;
}
.od-quote p { font-size: 15px; line-height: 1.75; color: var(--tp-text-body); font-style: italic; margin: 0; }

.od-story__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #B5179E; margin-bottom: 14px;
}
.od-story__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.1; color: var(--tp-common-black); margin-bottom: 20px; letter-spacing: -.025em; }
.od-story__title em { font-style: normal; color: #B5179E; }
.od-story__body p { font-size: 15px; line-height: 1.85; color: var(--tp-text-body); margin-bottom: 14px; }
.od-story__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.od-story__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--tp-border-1); color: var(--tp-common-black);
  text-decoration: none; transition: all .3s ease;
}
.od-story__link:hover { border-color: #B5179E; color: #B5179E; transform: translateY(-2px); }

/* ── Pillars ── */
.od-pillars { padding: 88px 0 100px; background: var(--tp-grey-1); }
.od-pillars__hd { text-align: center; margin-bottom: 56px; }
.od-pillars__label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #B5179E; margin-bottom: 14px; }
.od-pillars__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.12; color: var(--tp-common-black); letter-spacing: -.025em; }
.od-pillars__title em { font-style: normal; color: #B5179E; }
.od-pillars__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.od-pillar {
  background: #fff; border-radius: 20px; padding: 32px 26px 28px;
  border: 1px solid var(--tp-border-1);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.od-pillar:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(181,23,158,.12); border-color: rgba(181,23,158,.3); }
.od-pillar__icon { display: block; font-size: 32px; margin-bottom: 16px; }
.od-pillar__num { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #B5179E; margin-bottom: 10px; }
.od-pillar__title { font-size: 17px; font-weight: 700; color: var(--tp-common-black); margin-bottom: 10px; line-height: 1.3; }
.od-pillar__body { font-size: 14px; line-height: 1.75; color: var(--tp-text-body); }

/* ── Community CTA ── */
.od-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #fef0ff 0%, var(--tp-grey-1) 50%, #f0f0ff 100%);
  padding: 96px 0 108px;
}
.od-cta__orb-a {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(181,23,158,.12) 0%, transparent 70%);
  filter: blur(70px); top: -160px; left: -160px; pointer-events: none;
}
.od-cta__orb-b {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(114,9,183,.1) 0%, transparent 70%);
  filter: blur(60px); bottom: -100px; right: -80px; pointer-events: none;
}
.od-cta__grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1fr 380px; gap: 64px; align-items: center;
}
.od-cta__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.od-cta__tag, .od-cta__free {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700;
}
.od-cta__tag { background: rgba(181,23,158,.1); color: #B5179E; border: 1px solid rgba(181,23,158,.25); }
.od-cta__free { background: rgba(114,9,183,.08); color: #7209B7; border: 1px solid rgba(114,9,183,.2); }
.od-cta__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.1; color: var(--tp-common-black); letter-spacing: -.025em; margin-bottom: 16px; }
.od-cta__title em { font-style: normal; color: #B5179E; }
.od-cta__sub { font-size: 16px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 24px; max-width: 480px; }
.od-cta__proof { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.od-cta__proof-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(181,23,158,.1); color: #B5179E; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.od-cta__proof-text { font-size: 14px; color: var(--text-secondary); }
.od-cta__proof-text strong { color: var(--tp-common-black); font-size: 15px; }
.od-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.od-cta__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.od-cta__stage {
  position: relative; width: 340px; border-radius: 28px;
  background: linear-gradient(160deg, #180818 0%, #0A0A14 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 32px 44px;
  border: 1px solid rgba(181,23,158,.25);
  box-shadow: 0 40px 100px rgba(0,0,0,.4), inset 0 1px 0 rgba(181,23,158,.15), inset 0 -1px 0 rgba(114,9,183,.08);
  overflow: hidden;
}
.od-cta__stage::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(181,23,158,.15) 0%, transparent 70%);
  pointer-events: none;
}
.od-cta__stage::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(181,23,158,.6), rgba(114,9,183,.5), transparent);
  border-radius: 2px;
}
.od-cta__ring { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.od-cta__ring--c { width: 380px; height: 380px; border: 1px dashed rgba(181,23,158,.12); animation: ph-spin-slow 45s linear infinite; }
.od-cta__ring--a { width: 300px; height: 300px; border: 1.5px solid rgba(181,23,158,.3); animation: ph-spin-slow 28s linear infinite; }
.od-cta__ring--b { width: 228px; height: 228px; border: 2px solid rgba(114,9,183,.5); animation: ph-spin-slow 18s linear infinite reverse; }
.od-cta__logo-wrap {
  position: relative; z-index: 3;
  width: 190px; height: 190px; border-radius: 50%; overflow: hidden;
  background-size: 110%; background-position: center;
  background-repeat: no-repeat; background-color: #fff;
  box-shadow: 0 0 0 4px rgba(181,23,158,.7), 0 0 0 9px rgba(181,23,158,.15), 0 16px 48px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.od-cta__badge {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: #fff; border: 1px solid var(--tp-border-1); border-radius: 100px;
  padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap; z-index: 5;
}
.od-cta__badge i { font-size: 13px; }
.od-cta__badge--tl { top: 10px; left: -8px; color: #B5179E; }
.od-cta__badge--tl i { color: #7209B7; }
.od-cta__badge--br { bottom: 10px; right: -8px; color: var(--text-secondary); }
.od-cta__badge--br i { color: #B5179E; }

/* ── Responsive ── */
@media (max-width: 1199px) { .od-pillars__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 991px) {
  .od-story__grid { grid-template-columns: 1fr; gap: 48px; }
  .od-stats__grid { grid-template-columns: repeat(2,1fr); }
  .od-stat + .od-stat::before { display: none; }
  .od-cta__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .od-cta__badges, .od-cta__proof, .od-cta__actions { justify-content: center; }
  .od-cta__visual { order: -1; padding: 20px 16px; }
  .od-cta__stage { width: 280px; padding: 40px 24px 36px; }
  .od-cta__ring--c { width: 300px; height: 300px; }
  .od-cta__ring--a { width: 240px; height: 240px; }
  .od-cta__ring--b { width: 182px; height: 182px; }
  .od-cta__logo-wrap { width: 152px; height: 152px; }
  .od-cta__badge { display: none; }
  .od-cta__sub { max-width: 100%; }
}
@media (max-width: 767px) {
  .od-stats__grid { grid-template-columns: repeat(2,1fr); }
  .od-stat__num { font-size: 38px; }
  .od-pillars__grid { grid-template-columns: 1fr; }
  .od-story { padding: 64px 0 72px; }
  .od-pillars { padding: 64px 0 72px; }
  .od-cta { padding: 72px 0 80px; }
  .od-cta__actions { flex-direction: column; align-items: center; }
  .od-cta__actions .btn-cta-primary,
  .od-cta__actions .btn-cta-secondary { width: 100%; max-width: 320px; justify-content: center; }
}



/* ================================================================
   §20.5  PRELOADER  (shared: index.html, pr.html)
================================================================ */
#pr-preloader {
  position: fixed;
  inset: 0;
  background: var(--tp-common-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#pr-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ab-preloader-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(89, 86, 233, 0.12);
  border-top-color: var(--accent-violet, #5956E9);
  animation: preloaderSpin 0.75s linear infinite;
}
@keyframes preloaderSpin { to { transform: rotate(360deg); } }


/* ================================================================
   §21  HOME PAGE  (index.html)
   All rules are prefixed  .hm-  and scoped to body.hm-page
   so they never affect any other page.
================================================================ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes hm-blobDrift1  { 0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-50px,60px) scale(1.09)}75%{transform:translate(35px,-30px) scale(.93)} }
@keyframes hm-blobDrift2  { 0%,100%{transform:translate(0,0) scale(1)}55%{transform:translate(55px,-45px) scale(1.12)} }
@keyframes hm-float       { 0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)} }
@keyframes hm-floatSlow   { 0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(4deg)} }
@keyframes hm-spin        { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes hm-spinReverse { from{transform:rotate(0deg)}to{transform:rotate(-360deg)} }
@keyframes hm-pulse       { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.6} }
@keyframes hm-fadeUp      { from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)} }
@keyframes hm-fadeIn      { from{opacity:0}to{opacity:1} }
@keyframes hm-lineGrow    { from{width:0}to{width:100%} }
@keyframes hm-gradShift   { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes hm-shimmer     { 0%{background-position:-200% 0}100%{background-position:200% 0} }
@keyframes hm-marquee     { from{transform:translateX(0)}to{transform:translateX(-50%)} }
@keyframes hm-marqueeR    { from{transform:translateX(-50%)}to{transform:translateX(0)} }
@keyframes hm-dotBlink    { 0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)} }
@keyframes hm-countPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(89,86,233,.4)}50%{box-shadow:0 0 0 18px rgba(89,86,233,0)} }
@keyframes hm-ripple      { 0%{box-shadow:0 0 0 0 rgba(89,86,233,.45)}70%{box-shadow:0 0 0 22px rgba(89,86,233,0)}100%{box-shadow:0 0 0 0 rgba(89,86,233,0)} }
@keyframes hm-rotate3d    { 0%{transform:perspective(800px) rotateY(0deg) rotateX(4deg)}50%{transform:perspective(800px) rotateY(6deg) rotateX(-2deg)}100%{transform:perspective(800px) rotateY(0deg) rotateX(4deg)} }
@keyframes hm-glowPulse   { 0%,100%{box-shadow:0 0 30px rgba(89,86,233,.3)}50%{box-shadow:0 0 60px rgba(89,86,233,.6)} }
@keyframes hm-tagFloat1   { 0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-3deg)} }
@keyframes hm-tagFloat2   { 0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes hm-tagFloat3   { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(-1deg)} }

/* ── Scroll-reveal helpers ────────────────────────────────────── */
.hm-reveal {
  opacity:0; transform:translateY(44px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
.hm-reveal.from-left  { transform:translateX(-44px); }
.hm-reveal.from-right { transform:translateX(44px); }
.hm-reveal.hm-visible { opacity:1; transform:none; }

.hm-stagger > * {
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.hm-stagger.hm-visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.06s}
.hm-stagger.hm-visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.16s}
.hm-stagger.hm-visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.26s}
.hm-stagger.hm-visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.36s}
.hm-stagger.hm-visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.46s}
.hm-stagger.hm-visible > *:nth-child(6){opacity:1;transform:none;transition-delay:.56s}

/* ── Section globals ──────────────────────────────────────────── */
.hm-page .hm-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--tp-theme-1); margin-bottom:14px;
}
.hm-page .hm-label::before {
  content:''; width:28px; height:2px;
  background:var(--tp-theme-1); border-radius:2px; flex-shrink:0;
}
.hm-page .hm-section-title {
  font-size:clamp(28px,3.5vw,50px); font-weight:700; color:var(--tp-common-black);
  line-height:1.16; letter-spacing:-.02em; margin:0;
}
.hm-page .hm-section-title em { font-style:normal; color:var(--tp-theme-1); }
.hm-page .hm-section-title span.hm-yellow { color:var(--tp-theme-primary); -webkit-text-fill-color:var(--tp-theme-primary); }

/* ── Button system ────────────────────────────────────────────── */
.hm-btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--tp-theme-1); color:#fff;
  padding:15px 30px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; position:relative; overflow:hidden;
  transition:color var(--transition); border:none; cursor:pointer;
}
.hm-btn-primary::before {
  content:''; position:absolute; inset:0;
  background:var(--tp-theme-2); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.hm-btn-primary:hover::before { transform:scaleX(1); }
.hm-btn-primary span,.hm-btn-primary i { position:relative; z-index:1; }
.hm-btn-primary:hover { color:#fff; }

.hm-btn-yellow {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--tp-theme-primary); color:var(--tp-common-black);
  padding:15px 30px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:700; position:relative; overflow:hidden;
  transition:all var(--transition); border:none; cursor:pointer;
}
.hm-btn-yellow:hover { background:#ffe980; color:var(--tp-common-black); transform:translateY(-2px); }

.hm-btn-ghost {
  display:inline-flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.75); padding:15px 26px;
  border:1.5px solid rgba(255,255,255,.22); border-radius:var(--radius-sm);
  font-size:15px; font-weight:500; transition:all .3s ease;
}
.hm-btn-ghost:hover { border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.06); }

.hm-btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  color:var(--tp-theme-1); padding:14px 26px;
  border:1.5px solid var(--tp-theme-1); border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; transition:all .3s ease;
}
.hm-btn-outline:hover { background:var(--tp-theme-1); color:#fff; }

/* ================================================================
   §21.1  HERO
================================================================ */
.hm-hero {
  min-height:88vh;
  background:linear-gradient(140deg, #0A0A10 0%, #141228 50%, #0d1520 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:center; padding:90px 0 60px;
}

/* dot grid */
.hm-hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(89,86,233,.18) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
}

.hm-hero__blob {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px);
}
.hm-hero__blob--1 {
  width:800px; height:800px;
  background:radial-gradient(circle,rgba(89,86,233,.18) 0%,transparent 70%);
  top:-280px; right:-200px;
  animation:hm-blobDrift1 16s ease-in-out infinite;
}
.hm-hero__blob--2 {
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(255,220,96,.15) 0%,transparent 70%);
  bottom:-80px; left:-150px;
  animation:hm-blobDrift2 20s ease-in-out infinite;
}
.hm-hero__blob--3 {
  width:320px; height:320px;
  background:radial-gradient(circle,rgba(30,226,207,.12) 0%,transparent 70%);
  top:35%; left:6%;
  animation:hm-float 8s 1.5s ease-in-out infinite;
}

.hm-hero__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:70px; align-items:center;
  max-width:1200px; margin:0 auto; padding:0 30px; width:100%;
}

/* — LEFT ————————————————————————————————— */
.hm-hero__left { animation:hm-fadeUp .9s .1s ease both; }

.hm-hero__kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(89,86,233,.16); border:1px solid rgba(89,86,233,.38);
  border-radius:100px; padding:7px 18px; margin-bottom:18px;
  color:#a5b4fc; font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.hm-hero__kicker-dot {
  width:6px; height:6px; min-width:6px; border-radius:50%; background:#a5b4fc;
  flex-shrink:0; animation:hm-pulse 1.8s ease-in-out infinite;
}

.hm-hero__headline {
  font-size:clamp(36px,5.2vw,78px);
  font-weight:700; color:#fff;
  line-height:1.06; letter-spacing:-.03em; margin:0 0 20px;
}
.hm-hero__headline .hm-name {
  display:block; position:relative;
  background:linear-gradient(90deg, #fff 0%, var(--tp-theme-primary) 55%, #f97316 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
  animation:hm-gradShift 4s ease infinite;
}
.hm-hero__headline .hm-name::after {
  content:''; position:absolute; bottom:-8px; left:0;
  width:20px; height:2px; border-radius:2px;
  background:var(--tp-theme-primary);
  animation:hm-lineGrow 1.2s 1s ease both;
}

.hm-hero__roles {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
}
.hm-hero__role-pill {
  padding:6px 16px; border-radius:100px;
  font-size:13px; font-weight:500; border:1.5px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);
}
.hm-hero__role-pill.active {
  border-color:var(--tp-theme-1); color:var(--tp-theme-primary);
  background:rgba(89,86,233,.15);
}

.hm-hero__tagline {
  font-size:16px; line-height:1.75;
  color:rgba(255,255,255,.48); margin-bottom:30px; max-width:460px;
}

.hm-hero__ctas {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:30px;
}

/* quick-link pills */
.hm-hero__links {
  display:flex; flex-wrap:wrap; gap:10px;
}
.hm-hero__link-pill {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6);
  font-size:13px; font-weight:500; transition:all .3s ease;
}
.hm-hero__link-pill img { width:20px; height:20px; object-fit:contain; border-radius:4px; }
.hm-hero__link-pill:hover { border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06); }

/* — RIGHT ———————————————————————————————— */
.hm-hero__right {
  position:relative; animation:hm-fadeUp 1s .25s ease both;
  display:flex; align-items:center; justify-content:center;
}
.hm-hero__portrait-wrap { position:relative; z-index:2; }
.hm-hero__portrait-ring {
  position:absolute; inset:-18px; border-radius:50%;
  border:2px dashed rgba(89,86,233,.3);
  animation:hm-spin 26s linear infinite;
}
.hm-hero__portrait-ring--2 {
  inset:-42px; border-color:rgba(255,220,96,.15);
  animation:hm-spinReverse 36s linear infinite;
}
.hm-hero__portrait-frame {
  width:360px; height:360px; border-radius:50%; overflow:hidden;
  border:4px solid rgba(89,86,233,.3);
  box-shadow:0 0 0 12px rgba(89,86,233,.08), 0 40px 100px rgba(0,0,0,.6);
  animation:hm-glowPulse 4s ease-in-out infinite;
  background:linear-gradient(140deg,#0E0E1A,#141228);
}
.hm-hero__portrait-frame img {
  width:100%; height:100%; object-fit:cover;
  object-position:center 15%;
  transform:scale(1.12);
  transform-origin:center 20%;
}
/* floating tags */
.hm-hero__tag {
  position:absolute; z-index:3;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  border-radius:14px; padding:11px 16px;
  color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.hm-hero__tag--tl { top:-10px; left:-70px; animation:hm-tagFloat1 4s ease-in-out infinite; }
.hm-hero__tag--tr { top:20px; right:-80px; animation:hm-tagFloat2 5s .5s ease-in-out infinite; }
.hm-hero__tag--bl { bottom:40px; left:-90px; animation:hm-tagFloat3 4.5s 1s ease-in-out infinite; }
.hm-hero__tag--br { bottom:-10px; right:-60px; animation:hm-tagFloat1 3.5s .8s ease-in-out infinite; }
.hm-hero__tag-icon { font-size:18px; }
.hm-hero__tag-dot  { width:8px; height:8px; border-radius:50%; background:#4ade80; flex-shrink:0; animation:hm-pulse 2s ease-in-out infinite; }

.hm-hero__scroll-cue {
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.28); font-size:11px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; z-index:3;
}
.hm-hero__scroll-line {
  width:1px; height:50px;
  background:linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation:hm-float 2.2s ease-in-out infinite;
}

/* ================================================================
   §21.2  STATS TICKER — dark ribbon
================================================================ */
.hm-stats-ribbon {
  background:var(--tp-common-black); padding:64px 0;
  position:relative; overflow:hidden;
}
.hm-stats-ribbon::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(89,86,233,.14) 1px, transparent 1px);
  background-size:34px 34px; opacity:.5;
}
.hm-stats-ribbon__grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; max-width:1200px; margin:0 auto; padding:0 30px;
  position:relative; z-index:1;
}
.hm-stat {
  text-align:center; padding:44px 20px;
  border-right:1px solid rgba(255,255,255,.06);
}
.hm-stat:last-child { border-right:none; }
.hm-stat__num {
  font-size:clamp(42px,5vw,68px); font-weight:700;
  color:var(--tp-theme-primary); line-height:1; display:block;
  margin-bottom:10px; animation:hm-countPulse 3.5s ease-in-out infinite;
}
.hm-stat__label {
  font-size:13px; color:rgba(255,255,255,.42);
  font-weight:500; text-transform:uppercase; letter-spacing:1.5px;
}

/* ================================================================
   §21.3  ABOUT / IDENTITY STRIP
================================================================ */
.hm-about {
  padding:120px 0; background:var(--tp-common-white);
}
.hm-about__grid {
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:90px; align-items:center;
  max-width:1200px; margin:0 auto; padding:0 30px;
}
.hm-about__img-wrap { position:relative; }
.hm-about__img-decor {
  position:absolute; top:-22px; left:-22px;
  width:calc(100% + 44px); height:calc(100% + 44px);
  border:2px dashed rgba(89,86,233,.18); border-radius:38px;
  animation:hm-spin 24s linear infinite;
}
.hm-about__img-frame {
  border-radius:28px; overflow:hidden; position:relative; z-index:1;
  box-shadow:0 40px 100px rgba(89,86,233,.15);
}
.hm-about__img-frame img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; display:block; }
.hm-about__badge {
  position:absolute; bottom:-28px; right:-28px; z-index:3;
  background:var(--tp-theme-primary); border-radius:20px; padding:20px 24px;
  text-align:center; box-shadow:0 20px 48px rgba(255,220,96,.3);
  animation:hm-float 3.5s ease-in-out infinite;
}
.hm-about__badge strong { display:block; font-size:36px; font-weight:700; color:var(--tp-common-black); line-height:1; }
.hm-about__badge span   { font-size:12px; font-weight:600; color:var(--tp-common-black); opacity:.7; }

.hm-about__tag {
  display:inline-block; background:rgba(89,86,233,.08); color:var(--tp-theme-1);
  padding:6px 18px; border-radius:100px; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:18px;
}
.hm-about__name {
  font-size:clamp(30px,3.8vw,52px); font-weight:700; color:var(--tp-common-black);
  line-height:1.12; margin-bottom:10px; letter-spacing:-.025em;
}
.hm-about__role {
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600; color:var(--tp-theme-1); margin-bottom:22px;
}
.hm-about__bio {
  font-size:16px; line-height:1.85; color:var(--tp-text-body); margin-bottom:28px;
}
.hm-meta-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:32px; }
.hm-meta-card {
  background:var(--tp-grey-1); border-radius:16px; padding:16px 18px;
  border-left:3px solid var(--tp-theme-1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.hm-meta-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(89,86,233,.1); }
.hm-meta-card .lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--tp-theme-1); margin-bottom:4px; }
.hm-meta-card .val { font-size:14px; font-weight:600; color:var(--tp-common-black); }
.hm-about__actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ================================================================
   §21.4  SKILLS MARQUEE STRIP
================================================================ */
.hm-marquee-strip {
  padding:56px 0; background:var(--tp-grey-1); overflow:hidden;
}
.hm-marquee-strip__label {
  text-align:center; margin-bottom:32px;
  font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--tp-text-body);
}
.hm-marquee-wrap { position:relative; overflow:hidden; }
.hm-marquee-fade-l { position:absolute; left:0; top:0; bottom:0; width:120px; z-index:2; background:linear-gradient(to right,var(--tp-grey-1),transparent); pointer-events:none; }
.hm-marquee-fade-r { position:absolute; right:0; top:0; bottom:0; width:120px; z-index:2; background:linear-gradient(to left,var(--tp-grey-1),transparent); pointer-events:none; }
.hm-marquee-track {
  display:flex; gap:14px; width:max-content;
  animation:hm-marquee 28s linear infinite;
}
.hm-marquee-track:hover { animation-play-state:paused; }
.hm-skill-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:100px;
  background:#fff; border:1.5px solid var(--tp-border-1);
  font-size:14px; font-weight:500; color:var(--tp-common-black);
  white-space:nowrap; flex-shrink:0;
  transition:all .3s ease; cursor:default;
}
.hm-skill-chip:hover { background:var(--tp-theme-1); border-color:var(--tp-theme-1); color:#fff; transform:translateY(-3px); }
.hm-skill-chip i { font-size:12px; color:var(--tp-theme-1); }
.hm-skill-chip:hover i { color:#fff; }

/* second row — reversed */
.hm-marquee-track--r { animation:hm-marqueeR 32s linear infinite; }
.hm-marquee-strip .hm-marquee-wrap + .hm-marquee-wrap { margin-top:12px; }

/* ================================================================
   §21.5  FEATURED WORK PREVIEW STRIP
================================================================ */
.hm-work {
  padding:120px 0; background:var(--tp-common-white);
}
.hm-work__inner { max-width:1200px; margin:0 auto; padding:0 30px; }
.hm-work__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:52px; flex-wrap:wrap; }

.hm-work-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.hm-work-card {
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--tp-grey-1); border:1px solid var(--tp-border-1);
  transition:transform .4s var(--transition), box-shadow .4s var(--transition);
  position:relative;
}
.hm-work-card:hover { transform:translateY(-8px); box-shadow:0 28px 72px rgba(89,86,233,.18); }
.hm-work-card:hover .hm-wc-overlay { opacity:1; }
.hm-work-card--tall { grid-row:span 2; }
.hm-wc-img { width:100%; overflow:hidden; }
.hm-wc-img img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s var(--transition); }
.hm-work-card--tall .hm-wc-img { height:100%; }
.hm-work-card:not(.hm-work-card--tall) .hm-wc-img { aspect-ratio:4/3; }
.hm-work-card:hover .hm-wc-img img { transform:scale(1.05); }
.hm-wc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,13,18,.92) 0%, rgba(13,13,18,.2) 100%);
  opacity:0; transition:opacity .4s ease;
  display:flex; align-items:flex-end; padding:28px;
}
.hm-wc-meta h4 { font-size:18px; font-weight:700; color:#fff; margin-bottom:6px; }
.hm-wc-meta p  { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.hm-wc-arrow {
  width:44px; height:44px; border-radius:50%; background:var(--tp-theme-primary);
  display:flex; align-items:center; justify-content:center;
  color:var(--tp-common-black); font-size:16px; margin-left:auto; flex-shrink:0;
}

/* ================================================================
   §21.6  CREATIVE CHRONICLES (story cards)
================================================================ */
.hm-chronicles {
  padding:110px 0; background:var(--tp-grey-1);
}
.hm-chronicles__inner { max-width:1200px; margin:0 auto; padding:0 30px; }
.hm-chronicles__head { margin-bottom:52px; }
.hm-chronicles__sub { font-size:16px; color:var(--tp-text-body); margin-top:10px; }

.hm-chronicle-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.hm-chronicle-card {
  border-radius:var(--radius-md); overflow:hidden;
  background:var(--tp-common-white); border:1px solid var(--tp-border-1);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hm-chronicle-card:hover { transform:translateY(-8px); box-shadow:0 22px 60px rgba(89,86,233,.13); border-color:var(--tp-theme-1); }
.hm-cc-img { overflow:hidden; aspect-ratio:4/3; }
.hm-cc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hm-chronicle-card:hover .hm-cc-img img { transform:scale(1.06); }
.hm-cc-body { padding:20px; }
.hm-cc-body h4 { font-size:14px; font-weight:700; color:var(--tp-common-black); line-height:1.4; }
.hm-cc-body h4 a { color:inherit; }
.hm-cc-body h4 a:hover { color:var(--tp-theme-1); }

/* ================================================================
   §21.7  BOOK SPOTLIGHT
================================================================ */
.hm-book {
  padding:80px 0; background:var(--tp-common-black); position:relative; overflow:hidden;
}
.hm-book::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(89,86,233,.12) 1px, transparent 1px);
  background-size:40px 40px;
}
.hm-book__blob {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px);
}
.hm-book__blob--1 { width:500px; height:500px; top:-150px; right:-100px; background:radial-gradient(circle,rgba(89,86,233,.15),transparent 70%); animation:hm-blobDrift1 14s ease-in-out infinite; }
.hm-book__blob--2 { width:350px; height:350px; bottom:-80px; left:-60px; background:radial-gradient(circle,rgba(255,220,96,.12),transparent 70%); animation:hm-blobDrift2 18s ease-in-out infinite; }

.hm-book__inner {
  max-width:1200px; margin:0 auto; padding:0 30px;
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:90px; align-items:center; position:relative; z-index:2;
}
.hm-book__cover-wrap { position:relative; }
.hm-book__cover-ring {
  position:absolute; inset:-24px; border-radius:30px;
  border:2px dashed rgba(255,220,96,.2);
  animation:hm-spin 22s linear infinite;
}
.hm-book__cover {
  border-radius:22px; overflow:hidden; position:relative; z-index:1;
  box-shadow:0 50px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  animation:hm-rotate3d 7s ease-in-out infinite;
}
.hm-book__cover img { width:100%; display:block; max-height:440px; object-fit:contain; }
.hm-book__badge {
  position:absolute; bottom:-24px; right:-24px; z-index:3;
  background:var(--tp-theme-primary); border-radius:16px; padding:18px 22px;
  text-align:center; box-shadow:0 18px 46px rgba(255,220,96,.35);
  animation:hm-float 3.5s ease-in-out infinite;
}
.hm-book__badge strong { display:block; font-size:32px; font-weight:700; color:var(--tp-common-black); line-height:1; }
.hm-book__badge span   { font-size:11px; font-weight:600; color:var(--tp-common-black); opacity:.7; }

.hm-book .hm-label   { color:var(--tp-theme-primary); }
.hm-book .hm-label::before { background:var(--tp-theme-primary); }
.hm-book .hm-section-title { color:#fff; }
.hm-book .hm-section-title em { color:var(--tp-theme-primary); }
.hm-book__desc { font-size:16px; line-height:1.85; color:rgba(255,255,255,.5); margin:20px 0 36px; }
.hm-book__chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.hm-book__chip {
  padding:7px 16px; border-radius:100px;
  border:1.5px solid rgba(255,220,96,.3); color:rgba(255,220,96,.8);
  font-size:13px; font-weight:500;
}
.hm-book__actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ================================================================
   §21.8  YOUTUBE / CINEMATIC SECTION
================================================================ */
.hm-yt {
  padding:110px 0; background:var(--tp-common-white);
}
.hm-yt__inner { max-width:1200px; margin:0 auto; padding:0 30px; }
.hm-yt__head { margin-bottom:52px; }
.hm-yt__grid {
  display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:center;
}

.hm-yt-embed {
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.15); position:relative;
  aspect-ratio:16/9; background:#000;
}
.hm-yt-embed iframe { width:100%; height:100%; border:none; display:block; }
.hm-yt-embed__badge {
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); border-radius:8px;
  padding:6px 14px; font-size:12px; font-weight:600; color:#fff;
  display:flex; align-items:center; gap:6px;
}
.hm-yt-embed__badge i { color:#FF0000; }

.hm-yt-info { display:flex; flex-direction:column; gap:22px; }
.hm-yt-card {
  background:var(--tp-grey-1); border-radius:var(--radius-md); padding:24px;
  border:1px solid var(--tp-border-1);
  display:flex; gap:18px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hm-yt-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(89,86,233,.1); border-color:var(--tp-theme-1); }
.hm-yt-card__icon {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.hm-yt-card__icon.red   { background:rgba(255,0,0,.1); color:#FF0000; }
.hm-yt-card__icon.violet{ background:rgba(89,86,233,.1); color:var(--tp-theme-1); }
.hm-yt-card__icon.yellow{ background:rgba(255,220,96,.2); color:#b8900a; }
.hm-yt-card h4 { font-size:15px; font-weight:700; color:var(--tp-common-black); margin-bottom:4px; }
.hm-yt-card p  { font-size:13px; color:var(--tp-text-body); line-height:1.65; margin:0; }
.hm-yt-card a  { color:var(--tp-theme-1); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.hm-yt-card a:hover { color:var(--tp-theme-2); }

/* ================================================================
   §21.9  MEDIA SLIDER (Instagram)
================================================================ */
.hm-media {
  padding:80px 0 100px; background:var(--tp-grey-1); overflow:hidden;
}
.hm-media__inner { max-width:1200px; margin:0 auto; padding:0 30px; }
.hm-media__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.hm-media__ig-link {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--tp-theme-1); font-size:14px; font-weight:600;
  transition:gap .3s ease;
}
.hm-media__ig-link:hover { gap:14px; }

.hm-media-slider { overflow:hidden; border-radius:var(--radius-lg); }
.hm-media-swiper { overflow:hidden; }
.hm-media-slide { border-radius:var(--radius-md); overflow:hidden; }
.hm-media-slide img { width:100%; aspect-ratio:1; object-fit:cover; display:block; transition:transform .5s ease; }
.hm-media-slide:hover img { transform:scale(1.06); }

/* ================================================================
   §21.10  NEWSLETTER CTA
================================================================ */
.hm-cta {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #5956E9 0%, #3f3cc0 60%, #1e1c6e 100%);
  background-size:200% 200%;
  animation:hm-gradShift 8s ease infinite;
}
.hm-cta::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:40px 40px;
}
.hm-cta__inner {
  max-width:720px; margin:0 auto; padding:0 30px;
  text-align:center; position:relative; z-index:1;
}
.hm-cta__icon {
  width:70px; height:70px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin:0 auto 24px;
  animation:hm-float 3s ease-in-out infinite;
}
.hm-cta__title {
  font-size:clamp(28px,4vw,48px); font-weight:700; color:#fff;
  line-height:1.2; margin-bottom:14px; letter-spacing:-.025em;
}
.hm-cta__sub { font-size:17px; color:rgba(255,255,255,.65); margin-bottom:40px; }
.hm-cta-form { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hm-cta-form input {
  flex:1 1 260px; max-width:340px;
  padding:15px 22px; border-radius:var(--radius-sm);
  border:none; background:rgba(255,255,255,.14); backdrop-filter:blur(8px);
  font-family:var(--ff-body); font-size:15px; color:#fff; outline:none;
  border:1.5px solid rgba(255,255,255,.25); transition:border-color .3s;
}
.hm-cta-form input::placeholder { color:rgba(255,255,255,.5); }
.hm-cta-form input:focus { border-color:rgba(255,255,255,.6); }
.hm-cta-form button {
  padding:15px 28px; border-radius:var(--radius-sm);
  background:var(--tp-theme-primary); color:var(--tp-common-black);
  font-family:var(--ff-body); font-size:15px; font-weight:700;
  border:none; cursor:pointer; transition:all .3s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.hm-cta-form button:hover { background:#ffe980; transform:translateY(-2px); }

/* ================================================================
   §21.11  RESPONSIVE
================================================================ */
@media (max-width:1024px) {
  .hm-hero__inner        { grid-template-columns:1fr; gap:50px; text-align:center; }
  .hm-hero__tagline      { margin-left:auto; margin-right:auto; }
  .hm-hero__ctas,
  .hm-hero__links        { justify-content:center; }
  .hm-hero__right        { order:-1; }
  .hm-hero__tag--tl,
  .hm-hero__tag--bl      { display:none; }
  .hm-hero__tag--tr      { right:10px; top:-30px; }
  .hm-hero__tag--br      { right:10px; bottom:-30px; }
  .hm-about__grid        { grid-template-columns:1fr; gap:60px; }
  .hm-about__badge       { right:0; }
  .hm-work-grid          { grid-template-columns:1fr; }
  .hm-work-card--tall    { grid-row:auto; }
  .hm-chronicle-grid     { grid-template-columns:1fr 1fr; }
  .hm-book__inner        { grid-template-columns:1fr; gap:60px; }
  .hm-book__cover        { max-width:340px; margin:0 auto; }
  .hm-yt__grid           { grid-template-columns:1fr; }
  .hm-stats-ribbon__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .hm-hero                { padding:100px 0 60px; }
  .hm-hero__portrait-frame{ width:260px; height:260px; }
  .hm-hero__tag           { display:none; }
  .hm-stats-ribbon__grid  { grid-template-columns:1fr 1fr; }
  .hm-stat                { padding:30px 14px; border-right:none; border-bottom:1px solid rgba(255,255,255,.06); }
  .hm-stat:nth-child(odd) { border-right:1px solid rgba(255,255,255,.06); }
  .hm-stat:last-child,
  .hm-stat:nth-last-child(2):nth-child(odd){ border-bottom:none; }
  .hm-chronicle-grid      { grid-template-columns:1fr; }
  .hm-cta-form            { flex-direction:column; align-items:stretch; }
  .hm-cta-form input      { flex:0 0 auto; max-width:100%; height:48px; padding:0 18px; font-size:14px; }
  .hm-cta-form button     { flex:0 0 auto; height:48px; padding:0 22px; font-size:14px; justify-content:center; }
  .hm-hero__scroll-cue    { display:none; }
  .hm-about__img-decor    { display:none; }
  .hm-work-grid           { grid-template-columns:1fr; gap:18px; }
}


/* =============================================================
   §28  DESIGNUX PAGE
   Classes prefixed  dx-  (page body: .dx-page)
   Palette: Coral #FF3366 + Indigo #4776E6
   Hinglish content — movement / brand page
============================================================= */

/* ── Scroll reveal ── */
[data-dx-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
[data-dx-reveal].dx-visible { opacity: 1; transform: translateY(0); }

/* ── Hero (full dark) ── */
.dx-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0D0D12 0%, #160816 55%, #0f0f24 100%);
  padding-top: 80px; padding-bottom: 120px;
}
.dx-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,51,102,.18) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 20%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.dx-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dx-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.dx-orb--a {
  width: 600px; height: 600px; top: -160px; left: -100px;
  background: radial-gradient(circle, rgba(255,51,102,.3) 0%, transparent 70%);
  filter: blur(80px); animation: ph-float 9s ease-in-out infinite;
}
.dx-orb--b {
  width: 440px; height: 440px; top: 80px; right: -80px;
  background: radial-gradient(circle, rgba(71,118,230,.25) 0%, transparent 70%);
  filter: blur(60px); animation: ph-float 13s ease-in-out infinite reverse;
}
.dx-orb--c {
  width: 300px; height: 300px; bottom: -40px; left: 45%;
  background: radial-gradient(circle, rgba(255,51,102,.15) 0%, transparent 70%);
  filter: blur(55px); animation: ph-float 16s ease-in-out infinite 2s;
}
.dx-hero__noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.dx-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 820px; margin: 0 auto;
}

.dx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 20px; border-radius: 100px;
  background: rgba(255,51,102,.12); border: 1px solid rgba(255,51,102,.35);
  color: #ff7fa3; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 28px;
  opacity: 0; transform: translateY(18px);
  animation: ph-rise .65s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.dx-eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF3366; box-shadow: 0 0 10px #FF3366, 0 0 20px rgba(255,51,102,.5);
  animation: ph-dot-pulse 2s ease-in-out infinite;
}

.dx-hero__analogy {
  font-size: clamp(14px, 1.8vw, 17px); color: rgba(255,255,255,.5);
  margin-bottom: 10px; font-weight: 400;
  opacity: 0; animation: ph-rise .7s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.dx-hl { color: rgba(255,255,255,.75); font-weight: 600; }

.dx-hero__title {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.035em;
  color: #fff; margin-bottom: 22px;
  opacity: 0; animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .32s forwards;
}
.dx-hero__title em {
  font-style: normal;
  background: linear-gradient(90deg, #FF3366, #ff7fa3, #FF3366);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: nf-gradient 3s ease infinite;
}

.dx-hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.78;
  color: rgba(255,255,255,.58); max-width: 620px; margin: 0 auto 36px;
  opacity: 0; animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .48s forwards;
}
.dx-hero__sub strong { color: rgba(255,255,255,.82); }

.dx-hero__actions {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 40px;
  opacity: 0; animation: ph-rise .8s cubic-bezier(.22,1,.36,1) .64s forwards;
}

.dx-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; background: #FF3366; color: #fff !important;
  border-radius: 50px; font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: 0 8px 32px rgba(255,51,102,.45);
  transition: background .28s, transform .28s, box-shadow .28s;
}
.dx-btn-primary:hover { background: #e0194e; transform: translateY(-3px); box-shadow: 0 14px 40px rgba(255,51,102,.6); }
.dx-btn-primary:active { background: #c4163f; transform: translateY(0); box-shadow: 0 2px 12px rgba(255,51,102,.4); }
.dx-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82) !important; border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px; font-weight: 500; font-size: 15px; text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background .28s, border-color .28s, transform .28s;
}
.dx-btn-ghost:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45); color: #fff !important; transform: translateY(-3px); }
.dx-btn-ghost:active { background: rgba(255,255,255,.08); transform: translateY(0); }
.dx-btn-primary:focus-visible, .dx-btn-ghost:focus-visible { outline: 3px solid #FF3366; outline-offset: 3px; }

.dx-hero__tag-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: ph-rise .7s ease .8s forwards;
}
.dx-tag {
  padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
.dx-tag--active {
  background: rgba(255,51,102,.18); border-color: rgba(255,51,102,.45);
  color: #ff7fa3; font-weight: 700;
}

.dx-hero__scroll {
  position: absolute; bottom: 24px; left: 0; right: 0;
  width: fit-content; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3; text-align: center;
  opacity: 0; animation: ph-rise .6s ease 1.1s both;
}
.dx-hero__scroll-line {
  display: block; width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(255,51,102,.9), transparent);
  animation: ph-scroll-pulse 1.6s ease-in-out 1.4s infinite;
}
.dx-hero__scroll-text { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); }

/* ── Concept section ── */
.dx-concept { padding: 96px 0 108px; background: #fff; }
.dx-concept__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.dx-concept__label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FF3366; margin-bottom: 14px; }
.dx-concept__title { font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; color: var(--tp-common-black); letter-spacing: -.025em; margin-bottom: 20px; }
.dx-concept__title em { font-style: normal; color: #FF3366; }
.dx-concept__body p { font-size: 15px; line-height: 1.85; color: var(--tp-text-body); margin-bottom: 14px; }
.dx-concept__body strong { color: var(--tp-common-black); }
.dx-concept__body em { font-style: italic; color: #FF3366; }

.dx-analogy-cards { display: flex; flex-direction: column; gap: 14px; }
.dx-analogy-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--tp-grey-1); border: 1px solid var(--tp-border-1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dx-analogy-card:hover { transform: translateX(6px); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
.dx-analogy-card--highlight {
  background: rgba(255,51,102,.06); border-color: rgba(255,51,102,.3);
}
.dx-analogy-card--highlight:hover { box-shadow: 0 8px 28px rgba(255,51,102,.15); }
.dx-analogy-card__icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.dx-analogy-card div { display: flex; flex-direction: column; gap: 3px; }
.dx-analogy-card strong { font-size: 16px; font-weight: 700; color: var(--tp-common-black); }
.dx-analogy-card--highlight strong { color: #FF3366; }
.dx-analogy-card span { font-size: 13px; color: var(--text-secondary); }

/* ── Three Paths ── */
.dx-paths { padding: 88px 0 100px; background: var(--tp-grey-1); }
.dx-paths__hd { text-align: center; margin-bottom: 56px; }
.dx-paths__label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FF3366; margin-bottom: 14px; }
.dx-paths__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; line-height: 1.12; color: var(--tp-common-black); letter-spacing: -.025em; margin-bottom: 12px; }
.dx-paths__title em { font-style: normal; color: #FF3366; }
.dx-paths__sub { font-size: 15px; color: var(--text-secondary); max-width: 480px; margin: 0 auto; line-height: 1.7; }
.dx-paths__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.dx-path {
  background: #fff; border-radius: 22px; padding: 36px 28px 32px;
  border: 1px solid var(--tp-border-1); text-align: center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s;
}
.dx-path:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(255,51,102,.1); border-color: rgba(255,51,102,.25); }
.dx-path__num {
  display: inline-block; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,51,102,.1); color: #FF3366;
  font-size: 13px; font-weight: 800; line-height: 36px; text-align: center;
  margin: 0 auto 18px;
}
.dx-path__icon { display: block; font-size: 36px; margin-bottom: 14px; }
.dx-path__title { font-size: 22px; font-weight: 800; color: var(--tp-common-black); margin-bottom: 12px; }
.dx-path__body { font-size: 14px; line-height: 1.8; color: var(--tp-text-body); }

/* ── CTA ── */
.dx-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #fff0f4 0%, var(--tp-grey-1) 50%, #f0f2ff 100%);
  padding: 96px 0 108px;
}
.dx-cta__orb-a {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,51,102,.12) 0%, transparent 70%);
  filter: blur(70px); top: -160px; left: -160px; pointer-events: none;
}
.dx-cta__orb-b {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(71,118,230,.1) 0%, transparent 70%);
  filter: blur(60px); bottom: -100px; right: -80px; pointer-events: none;
}
.dx-cta__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: center;
}
.dx-cta__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.dx-cta__tag, .dx-cta__free {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700;
}
.dx-cta__tag { background: rgba(255,51,102,.1); color: #FF3366; border: 1px solid rgba(255,51,102,.25); }
.dx-cta__free { background: rgba(71,118,230,.08); color: #4776E6; border: 1px solid rgba(71,118,230,.2); }
.dx-cta__title { font-size: clamp(24px, 3vw, 40px); font-weight: 800; line-height: 1.12; color: var(--tp-common-black); letter-spacing: -.025em; margin-bottom: 16px; }
.dx-cta__title em { font-style: normal; color: #FF3366; }
.dx-cta__sub { font-size: 16px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 24px; max-width: 480px; }
.dx-cta__manifesto {
  background: rgba(255,51,102,.05); border-left: 3px solid #FF3366;
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 32px;
  display: flex; flex-direction: column; gap: 6px;
}
.dx-cta__manifesto span { font-size: 14px; font-style: italic; color: var(--tp-text-body); line-height: 1.65; }
.dx-cta__manifesto cite { font-size: 12px; font-weight: 600; color: #FF3366; font-style: normal; }
.dx-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.dx-cta__visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.dx-cta__stage {
  position: relative; width: 340px; border-radius: 28px;
  background: linear-gradient(160deg, #1a0810 0%, #0D0D12 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 32px 44px;
  border: 1px solid rgba(255,51,102,.25);
  box-shadow: 0 40px 100px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,51,102,.15), inset 0 -1px 0 rgba(71,118,230,.08);
  overflow: hidden;
}
.dx-cta__stage::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,51,102,.18) 0%, transparent 70%);
  pointer-events: none;
}
.dx-cta__stage::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,51,102,.6), rgba(71,118,230,.5), transparent);
  border-radius: 2px;
}
.dx-cta__ring { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.dx-cta__ring--c { width: 380px; height: 380px; border: 1px dashed rgba(255,51,102,.12); animation: ph-spin-slow 45s linear infinite; }
.dx-cta__ring--a { width: 300px; height: 300px; border: 1.5px solid rgba(255,51,102,.3); animation: ph-spin-slow 28s linear infinite; }
.dx-cta__ring--b { width: 228px; height: 228px; border: 2px solid rgba(71,118,230,.5); animation: ph-spin-slow 18s linear infinite reverse; }
.dx-cta__logo-wrap {
  position: relative; z-index: 3;
  width: 190px; height: 190px; border-radius: 50%;
  background: linear-gradient(135deg, #1a0810, #0D0D12);
  box-shadow: 0 0 0 4px rgba(255,51,102,.7), 0 0 0 9px rgba(255,51,102,.15), 0 16px 48px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.dx-cta__monogram {
  font-size: 52px; font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(135deg, #FF3366, #ff7fa3, #4776E6);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: nf-gradient 3s ease infinite;
  line-height: 1;
}
.dx-cta__badge {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: #fff; border: 1px solid var(--tp-border-1); border-radius: 100px;
  padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap; z-index: 5;
}
.dx-cta__badge i { font-size: 13px; }
.dx-cta__badge--tl { top: 10px; left: -8px; color: #4776E6; }
.dx-cta__badge--tl i { color: #FF3366; }
.dx-cta__badge--br { bottom: 10px; right: -8px; color: #FF3366; }
.dx-cta__badge--br i { color: #FF3366; }


/* ============================================================
   PR PAGE — Mobile card image & grid fix (FINAL)
============================================================ */

/* Image fill fix — position absolute so height:100% always works */
.pr-card__fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f0f1f8;
  /* Fallback for browsers where aspect-ratio collapses */
  min-height: 180px;
}

.pr-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Grid: 2 col on tablet */
@media (max-width: 991px) {
  .pr-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Grid: 1 col on mobile (767px catches all phones, not 575px) */
@media (max-width: 767px) {
  .pr-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pr-card__fig {
    min-height: 220px;
  }
  .pr-showcase {
    padding: 56px 0 72px;
  }
  .pr-filterbar {
    gap: 6px;
    margin-bottom: 32px;
  }
  .pr-filter {
    font-size: 12px;
    padding: 7px 16px;
  }
  .pr-hd__title {
    font-size: 26px;
  }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .dx-concept__grid { grid-template-columns: 1fr; gap: 48px; }
  .dx-paths__grid { grid-template-columns: 1fr; gap: 16px; }
  .dx-path { text-align: left; display: flex; gap: 20px; padding: 24px 22px; align-items: flex-start; }
  .dx-path__num { flex-shrink: 0; margin: 0; }
  .dx-path__icon { display: none; }
  .dx-cta__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .dx-cta__badges, .dx-cta__actions { justify-content: center; }
  .dx-cta__manifesto { text-align: left; }
  .dx-cta__visual { order: -1; padding: 20px 16px; }
  .dx-cta__stage { width: 280px; padding: 40px 24px 36px; }
  .dx-cta__ring--c { width: 300px; height: 300px; }
  .dx-cta__ring--a { width: 240px; height: 240px; }
  .dx-cta__ring--b { width: 182px; height: 182px; }
  .dx-cta__logo-wrap { width: 152px; height: 152px; }
  .dx-cta__monogram { font-size: 40px; }
  .dx-cta__badge { display: none; }
  .dx-cta__sub { max-width: 100%; }
  .dx-hero__tag-row { gap: 8px; }
}
@media (max-width: 767px) {
  .dx-hero { padding-bottom: 80px; }
  .dx-hero__analogy { font-size: 13px; }
  .dx-concept { padding: 64px 0 72px; }
  .dx-paths { padding: 64px 0 72px; }
  .dx-cta { padding: 72px 0 80px; }
  .dx-cta__actions { flex-direction: column; align-items: center; }
  .dx-cta__actions .btn-cta-primary,
  .dx-cta__actions .btn-cta-secondary { width: 100%; max-width: 320px; justify-content: center; }
  .dx-tag { font-size: 11px; padding: 5px 12px; }
  .dx-hero__actions { flex-direction: column; align-items: center; }
  .dx-btn-primary, .dx-btn-ghost { width: 100%; max-width: 300px; justify-content: center; }
}

/* ================================================================
   §22  HOME PAGE — WHO I AM (three disciplines)
================================================================ */
.hm-who {
  padding: 110px 0;
  background: #fff;
  position: relative;
}
.hm-who__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: start;
}

/* Portrait */
.hm-who__portrait-img {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.11);
  position: relative;
}
.hm-who__portrait-img img { width: 100%; display: block; }
.hm-who__portrait-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 4px;
}
.hm-who__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--tp-common-black);
  display: block;
}
.hm-who__portrait-meta span {
  font-size: 13px;
  color: var(--tp-text-body);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hm-who__portrait-meta span i { color: var(--tp-theme-1); font-size: 11px; }

/* Intro text */
.hm-who__intro { margin-bottom: 36px; }
.hm-who__bio {
  font-size: 15px;
  line-height: 1.8;
  color: var(--tp-text-body);
  margin-top: 14px;
  max-width: 540px;
}

/* Discipline rows */
.hm-disc-rows { display: flex; flex-direction: column; }
.hm-disc-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--tp-border-1);
  transition: background .2s ease;
  cursor: default;
}
.hm-disc-rows .hm-disc-row:last-child { border-bottom: 1px solid var(--tp-border-1); }

.hm-disc-row__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--tp-theme-1);
  opacity: .7;
}
.hm-disc-row__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--tp-grey-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--tp-theme-1);
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
.hm-disc-row:hover .hm-disc-row__icon {
  background: var(--tp-theme-1);
  color: #fff;
}
.hm-disc-row__body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--tp-common-black);
  margin: 0 0 3px;
  letter-spacing: -.01em;
}
.hm-disc-row__body span {
  font-size: 13px;
  color: var(--tp-text-body);
  line-height: 1.5;
}
.hm-disc-row__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-theme-1);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease, opacity .2s ease;
  opacity: .7;
}
.hm-disc-row__cta:hover { gap: 10px; opacity: 1; color: var(--tp-theme-1); }

@media (max-width: 991px) {
  .hm-who__inner { grid-template-columns: 1fr; gap: 48px; }
  .hm-who__portrait { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
  .hm-who__portrait-img { margin-bottom: 0; }
}
@media (max-width: 576px) {
  .hm-who { padding: 72px 0; }
  .hm-who__portrait { grid-template-columns: 1fr; }
  .hm-disc-row { grid-template-columns: 28px 1fr; gap: 14px; }
  .hm-disc-row__icon { display: none; }
  .hm-disc-row__cta { display: none; }
}

/* New-release teaser strip below the bestseller book */
.hm-book__new-teaser {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hm-book__new-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.hm-book__new-dots {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,220,96,.35) 0,
    rgba(255,220,96,.35) 4px,
    transparent 4px,
    transparent 10px
  );
}
.hm-book__new-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tp-theme-primary);
  background: rgba(255,220,96,.1);
  border: 1px solid rgba(255,220,96,.28);
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.hm-book__new-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 14px 18px;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.hm-book__new-row:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,220,96,.25);
}
.hm-book__new-cover {
  width: 48px; height: 62px;
  border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.hm-book__new-cover img { width: 100%; height: 100%; object-fit: cover; }
.hm-book__new-info { flex: 1; }
.hm-book__new-info strong {
  display: block;
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 3px; line-height: 1.3;
}
.hm-book__new-info span {
  font-size: 12px; color: rgba(255,255,255,.45);
}
.hm-book__new-row > .fal {
  color: rgba(255,255,255,.4); font-size: 16px; flex-shrink: 0;
  transition: color .2s, transform .2s;
}
.hm-book__new-row:hover > .fal {
  color: var(--tp-theme-primary); transform: translateX(4px);
}

/* ================================================================
   §23  HOME PAGE — DARK SECTION COLOUR OVERRIDES
   Slightly off-black charcoal (#111119) instead of near-pure #0D0D12
================================================================ */
.hm-page .hm-book { background: #111119; }
.hm-page .black-bg { background: #111119 !important; }

/* ================================================================
   §24  HOME PAGE — ABOUT v2 (editorial / premium)
================================================================ */
.hm-ab2 {
  padding: 100px 0 100px;
  background: #F7F8FC;
  overflow: hidden;
}
.hm-ab2__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center;
}

/* ---- Photo column ---- */
.hm-ab2__photo {
  position: relative;
  flex-shrink: 0;
}
.hm-ab2__photo-frame {
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 28px 72px rgba(0,0,0,.13);
}
.hm-ab2__photo-frame img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Yellow accent stripe on top-left corner */
.hm-ab2__photo-accent {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 80px;
  height: 80px;
  border-top: 4px solid var(--tp-theme-primary, #FFDC60);
  border-left: 4px solid var(--tp-theme-primary, #FFDC60);
  border-radius: 12px 0 0 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- Content column ---- */
.hm-ab2__content .hm-label {
  margin-bottom: 16px;
}
.hm-ab2__name {
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  color: #1A1A2E;
  margin: 0 0 20px;
  letter-spacing: -1px;
}
.hm-ab2__name em {
  font-style: normal;
  background: linear-gradient(90deg, #7B5CF5, #4FAFF5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hm-ab2__bio {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 36px;
  max-width: 460px;
}

/* ---- Achievement rows ---- */
.hm-ab2__achievements {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 36px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.hm-ab2__ach {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .2s;
}
.hm-ab2__ach:last-child { border-bottom: none; }
.hm-ab2__ach:hover { background: #F7F8FC; }
.hm-ab2__ach-icon {
  font-size: 22px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: #F1F0FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hm-ab2__ach div { display: flex; flex-direction: column; gap: 2px; }
.hm-ab2__ach strong {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A2E;
  display: block;
}
.hm-ab2__ach span {
  font-size: 12.5px;
  color: #777;
  display: block;
}

/* ---- CTA row ---- */
.hm-ab2__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Responsive: tablet ---- */
@media (max-width: 991px) {
  .hm-ab2__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }
  .hm-ab2__photo-frame img { height: 400px; }
}

/* ---- Floating tags around photo ---- */
.hm-ab2__ftag {
  position: absolute; z-index: 4;
  background: #fff;
  border: 1.5px solid rgba(89,86,233,.13);
  box-shadow: 0 8px 28px rgba(89,86,233,.14);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  color: #1a1a2e;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.hm-ab2__ftag span { font-size: 16px; }
.hm-ab2__ftag--tl { top: -18px;  left: -44px;  animation: hm-tagFloat1 4s ease-in-out infinite; }
.hm-ab2__ftag--tr { top:  28px;  right: -52px; animation: hm-tagFloat2 5s .5s ease-in-out infinite; }
.hm-ab2__ftag--bl { bottom: 60px; left: -52px; animation: hm-tagFloat3 4.5s 1s ease-in-out infinite; }
.hm-ab2__ftag--br { bottom: -18px; right: -36px; animation: hm-tagFloat1 3.5s .8s ease-in-out infinite; }

/* ---- Responsive: tablet ---- */
@media (max-width: 991px) {
  .hm-ab2__ftag--tl,
  .hm-ab2__ftag--bl { display: none; }
  .hm-ab2__ftag--tr { right: -10px; top: -20px; }
  .hm-ab2__ftag--br { right:  -10px; bottom: -20px; }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
  .hm-ab2 { padding: 70px 0; }
  .hm-ab2__inner { padding: 0 20px; gap: 36px; }
  .hm-ab2__photo-frame img { height: 300px; }
  .hm-ab2__name { font-size: 36px; }
  .hm-ab2__photo-accent { width: 56px; height: 56px; top: -10px; left: -10px; }
  .hm-ab2__ftag { display: none; }
}

/* ============================================================
   BOOK PAGES — hero spacing overrides (transparent header)
============================================================ */
.tur-page .tp-hero-space,
.bk-page .tp-hero-space,
.oyml-page .tp-hero-space {
  padding-top: 140px;
  padding-bottom: 40px;
}

/* ============================================================
   NEW UNCHARTED ROMANCE — .nur-page  (new_uncrted_romance.html)
============================================================ */

/* -- Hero -------------------------------------------------- */
.nur-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #f4f4ff 0%, #ebebff 50%, #f8f3ff 100%);
  padding: 200px 0 160px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Big watermark text */
.nur-hero::after {
  content: 'ROMANCE';
  position: absolute;
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 900;
  color: rgba(89,86,233,.035);
  letter-spacing: -.04em;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-family: var(--ff-body);
}

/* Grain texture overlay */
.nur-hero__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: .025; pointer-events: none; z-index: 0;
}

/* Ambient orbs */
.nur-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.nur-hero__blob--1 {
  width: 620px; height: 620px;
  background: rgba(89,86,233,.11);
  top: -180px; right: -150px;
  animation: nurBlobA 10s ease-in-out infinite;
}
.nur-hero__blob--2 {
  width: 400px; height: 400px;
  background: rgba(255,220,96,.2);
  bottom: -110px; left: 40px;
  animation: nurBlobB 14s ease-in-out infinite reverse;
}
.nur-hero__blob--3 {
  width: 260px; height: 260px;
  background: rgba(200,100,230,.07);
  top: 35%; left: 36%;
  animation: nurBlobA 18s ease-in-out infinite 3s;
}
@keyframes nurBlobA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-28px, 22px) scale(1.06); }
}
@keyframes nurBlobB {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(22px,-26px) scale(1.09); }
}

.nur-hero .container { position: relative; z-index: 1; width: 100%; }

.nur-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}

/* Scroll indicator */
.nur-hero__scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
}
.nur-hero__scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--tp-theme-1), transparent);
  animation: nurScrollAnim 2s ease-in-out infinite;
}
@keyframes nurScrollAnim { 0%,100%{opacity:1} 50%{opacity:.35} }
.nur-hero__scroll-text {
  font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Left content */
.nur-hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px 7px 12px;
  background: rgba(89,86,233,.07);
  border: 1px solid rgba(89,86,233,.22);
  border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tp-theme-1);
  margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.nur-hero__kicker > * { position: relative; z-index: 1; }
.nur-hero__kicker::after {
  content: ''; position: absolute; inset: 0; width: 200%;
  background: linear-gradient(90deg, transparent, rgba(89,86,233,.14), transparent);
  transform: translateX(-100%);
  animation: ph-shimmer 3.5s ease-in-out 1.5s infinite;
}
.nur-hero__kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tp-theme-1);
  animation: nurPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes nurPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Author byline chip */
.nur-author-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 400; color: var(--text-secondary);
  margin-bottom: 16px;
}
.nur-author-chip__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tp-theme-1) 0%, #8b7cf7 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
  letter-spacing: .02em;
}
.nur-author-chip strong { font-weight: 600; color: var(--text-primary); }
.nur-author-chip__sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-tertiary); flex-shrink: 0;
}

.nur-hero__title {
  font-family: var(--ff-body);
  font-size: clamp(46px, 6.2vw, 82px);
  font-weight: 700; line-height: 1.04;
  letter-spacing: -.03em; color: var(--text-primary);
  margin-bottom: 22px;
}
.nur-hero__title em { font-style: italic; color: var(--tp-theme-1); }

.nur-hero__tagline {
  font-size: 17px; line-height: 1.75;
  color: var(--text-secondary); max-width: 460px; margin-bottom: 38px;
}

.nur-hero__ctas {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 0;
}
.nur-know-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; transition: color var(--transition-fast);
}
.nur-know-more:hover { color: var(--tp-theme-1); }

/* Platform buy-bar */
.nur-hero__buy-bar {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(89,86,233,.14);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(89,86,233,.08), 0 1px 0 rgba(255,255,255,.8);
  margin-top: 72px;
}
.nur-hero__buy-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px; gap: 6px;
  text-decoration: none;
  border-right: 1px solid rgba(89,86,233,.1);
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.nur-hero__buy-item:last-child { border-right: none; }
.nur-hero__buy-item:hover { background: rgba(89,86,233,.05); color: var(--tp-theme-1); }
.nur-hero__buy-item i { font-size: 22px; }
.nur-hero__buy-item .nur-c-amazon   { color: #ff9d08; }
.nur-hero__buy-item .nur-c-flipkart { color: #F8AE3B; }
.nur-hero__buy-item .nur-c-apple    { color: #888; }
.nur-hero__buy-item .nur-c-google   { color: #4285F4; }

/* Colour helpers */
.nur-c-amazon   { color: #ff9d08; }
.nur-c-flipkart { color: #F8AE3B; }
.nur-c-apple    { color: #888; }
.nur-c-google   { color: #4285F4; }

/* Right: visual with floating tags */
.nur-hero__visual {
  display: flex; justify-content: center; align-items: center;
  position: relative;
}
.nur-hero__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(89,86,233,.14); pointer-events: none;
}
.nur-hero__ring--1 { width: 460px; height: 460px; }
.nur-hero__ring--2 {
  width: 600px; height: 600px;
  border-style: dashed; opacity: .32;
  animation: nurSpin 48s linear infinite;
}
@keyframes nurSpin { to { transform: rotate(360deg); } }

.nur-hero__book-wrap {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
}
.nur-hero__book-img {
  max-width: 340px; width: 100%;
  filter: drop-shadow(0 40px 70px rgba(89,86,233,.26));
  animation: nurFloat 5s ease-in-out infinite;
}
@keyframes nurFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

/* Bestseller badge */
.nur-book-badge {
  position: absolute; top: -14px; right: -20px;
  background: var(--accent-yellow); color: var(--text-primary);
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 24px rgba(255,220,96,.55); z-index: 3;
  animation: nurBadgePop 3.5s ease-in-out infinite;
  padding: 6px;
}
@keyframes nurBadgePop { 0%,100%{transform:scale(1) rotate(-6deg)} 50%{transform:scale(1.07) rotate(-6deg)} }
.nur-book-badge strong { font-size: 15px; display: block; }

/* Floating achievement tags */
.nur-hero__ftag {
  position: absolute; z-index: 2;
  background: #fff; border: 1px solid rgba(89,86,233,.12);
  border-radius: 50px; padding: 9px 16px 9px 12px;
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  box-shadow: 0 6px 24px rgba(89,86,233,.1), 0 1px 0 rgba(255,255,255,.9);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.nur-hero__ftag--tl { top: 30px;  left: -90px;  animation: nurTag1 4s ease-in-out infinite; }
.nur-hero__ftag--tr { top: 30px;  right: -90px; animation: nurTag2 4s ease-in-out infinite; }
.nur-hero__ftag--bl { bottom: 70px; left: -90px;  animation: nurTag3 4.5s ease-in-out infinite; }
.nur-hero__ftag--br { bottom: 70px; right: -90px; animation: nurTag4 4.5s ease-in-out infinite; }
@keyframes nurTag1 { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-8px)} }
@keyframes nurTag2 { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(6px)} }
@keyframes nurTag3 { 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(4px)} }
@keyframes nurTag4 { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-10px)} }

/* -- Stats strip ------------------------------------------ */
.nur-strip { background: var(--surface-dark); padding: 20px 0; overflow: hidden; }
.nur-strip__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 0; padding: 0 40px;
}
.nur-strip__item {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: 14px; font-weight: 500; padding: 0 28px;
}
.nur-strip__item i { color: var(--accent-yellow); font-size: 15px; }
.nur-strip__sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,.15); flex-shrink: 0;
}

/* -- Section heading (eyebrow style) ---------------------- */
.nur-sect-hd { text-align: center; margin-bottom: 56px; }
.nur-sect-hd__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tp-theme-1); margin-bottom: 14px;
}
.nur-sect-hd__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tp-theme-1); }
.nur-sect-hd__title {
  font-family: var(--ff-body);
  font-size: clamp(28px,4vw,42px); font-weight: 700;
  letter-spacing: -.02em; color: var(--text-primary);
  margin-bottom: 12px; line-height: 1.15;
}
.nur-sect-hd__title em { font-style: italic; color: var(--tp-theme-1); }
.nur-sect-hd__sub {
  font-size: 15px; color: var(--text-secondary);
  max-width: 520px; margin: 0 auto; line-height: 1.7;
}

/* -- Product Details --------------------------------------- */
.nur-details { background: #fff; padding: 100px 0 80px; }

.nur-details__grid {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 64px; align-items: start; margin-bottom: 64px;
}
.nur-details__img img {
  width: 100%; border-radius: var(--radius-md);
  box-shadow: 0 20px 56px rgba(0,0,0,.11);
}
.nur-details__title {
  font-family: var(--ff-body);
  font-size: 30px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); margin-bottom: 8px;
}
.nur-details__subtitle {
  font-size: 15px; line-height: 1.65;
  color: var(--text-secondary); margin-bottom: 22px;
}
.nur-details__price {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.nur-details__price-now { font-size: 30px; font-weight: 700; color: var(--text-primary); }
.nur-details__price-old { font-size: 16px; color: var(--text-tertiary); text-decoration: line-through; }
.nur-details__free {
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; background: #e8f5e9; color: #2e7d32;
}
.nur-genre-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px;
}
.nur-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.nur-genre-tag {
  font-size: 13px; font-weight: 500; padding: 5px 14px; border-radius: 20px;
  background: rgba(89,86,233,.06); color: var(--tp-theme-1);
  border: 1px solid rgba(89,86,233,.18);
}

/* -- Review form ------------------------------------------ */
.nur-review { background: var(--surface-1); padding: 80px 0 100px; }
.nur-review__head { text-align: center; margin-bottom: 44px; }
.nur-review__head h2 {
  font-family: var(--ff-body);
  font-size: 32px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); margin-bottom: 8px;
}
.nur-review__head p { font-size: 15px; color: var(--text-secondary); }

/* -- Responsive ------------------------------------------- */
@media (max-width: 1200px) {
  .nur-hero__ftag--tl { left: -60px; }
  .nur-hero__ftag--tr { right: -60px; }
  .nur-hero__ftag--bl { left: -60px; }
  .nur-hero__ftag--br { right: -60px; }
  .nur-hero__ring--1 { width: 380px; height: 380px; }
  .nur-hero__ring--2 { width: 500px; height: 500px; }
  .nur-hero__book-img { max-width: 300px; }
}
@media (max-width: 991px) {
  .nur-hero { padding: 170px 0 100px; }
  .nur-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .nur-hero__visual { order: -1; }
  .nur-hero__tagline { max-width: 100%; }
  .nur-hero__ctas { justify-content: center; }
  .nur-hero__ftag { display: none; }
  .nur-book-badge { right: 10px; }
  .nur-hero__buy-bar { margin-top: 48px; }
  .nur-strip__item { font-size: 13px; padding: 0 16px; }
  .nur-details__grid { grid-template-columns: 1fr; }
  .nur-details__img { max-width: 260px; margin: 0 auto; }
  .nur-author-chip { justify-content: center; }
  .nur-hero__kicker { display: inline-flex; }
}
@media (max-width: 767px) {
  .nur-hero__buy-bar { flex-wrap: wrap; }
  .nur-hero__buy-item { flex: 1 1 calc(50% - 1px); border-bottom: 1px solid rgba(89,86,233,.1); }
  .nur-hero__buy-item:nth-child(2) { border-right: none; }
  .nur-hero__buy-item:nth-child(3), .nur-hero__buy-item:nth-child(4) { border-bottom: none; }
}
@media (max-width: 575px) {
  .nur-hero { padding: 150px 0 80px; }
  .nur-hero::after { display: none; }
  .nur-hero__ring { display: none; }
  .nur-hero__book-img { max-width: 220px; }
  .nur-hero__scroll { display: none; }
  .nur-hero__noise { display: none; }
  .nur-hero__buy-bar { flex-direction: column; margin-top: 32px; }
  .nur-hero__buy-item { flex-direction: row; border-right: none; border-bottom: 1px solid rgba(89,86,233,.08); padding: 14px 20px; }
  .nur-hero__buy-item:last-child { border-bottom: none; }
  .nur-strip__sep { display: none; }
  .nur-strip__inner { gap: 12px; flex-direction: column; padding: 0 20px; }
  .nur-strip__item { padding: 0; }
  .nur-details { padding: 70px 0 60px; }
  .nur-review { padding: 60px 0 80px; }
}