/* ==========================================================================
   FIRST OWNER MEDIA - EXACT REFERENCE IMAGE SLIDER & ANIMATION STYLES
   ========================================================================== */

/* ==========================================================================
   HARD REFRESH KA JHATKA — fallback font aur icon ki jagah

   Web font aane se pehle browser system font se likhta hai. Segoe UI
   Plus Jakarta Sans se ~8% chaudi hai, aur bold me ~15% — isliye font
   aate hi headline ka naap badalta tha aur poora page khisak jaata tha.

   Neeche wala face wahi system font hai, bas size-adjust se naap milaya
   hua. Swap ab bhi hota hai, par aankh ko dikhta nahi.
   ========================================================================== */

@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Roboto'), local('Arial');
  font-weight: 100 500;
  font-style: normal;
  size-adjust: 92.6%;
}

@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Segoe UI Bold'), local('Segoe UI'), local('Helvetica Neue'),
       local('Arial Bold'), local('Arial');
  font-weight: 600 1000;
  font-style: normal;
  size-adjust: 90.9%;
}


/* Instrument Serif (headline ke italic shabd) ka fallback Georgia hai, jo
   ~10% chaudi hai — isi wajah se 'plainly' agli line par chala jaata tha
   aur headline teen line ka ho jaata tha. */
@font-face {
  font-family: 'Instrument Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  font-style: normal;
  size-adjust: 90.9%;
}

@font-face {
  font-family: 'Instrument Fallback';
  src: local('Georgia Italic'), local('Georgia'), local('Times New Roman Italic'), local('Times');
  font-style: italic;
  size-adjust: 88.9%;
}

/* Lucide <i data-lucide="..."> ko <svg> se badal deta hai. Tab tak us <i>
   ki koi jagah nahi hoti, isliye script aate hi arrows "pop" karke
   aas-paas ka text dhakel dete the.

   :where() jaan-bujh ke hai — iski specificity zero hai, to jahan kisi
   class ne icon ka naap likha hai wahi jeetta hai; baaki jagah 1em. */
:where(i[data-lucide]) {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
}


:root {
  --color-bg: #FFFFFF;
  --color-text-main: #050505;
  --color-text-muted: #64748B;
  --color-blue-primary: #1264F4;
  --color-blue-secondary: #EBF3FF;
  --color-blue-glow: rgba(18, 100, 244, 0.18);
  --color-border: #E2E8F0;
  
  --font-main: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, sans-serif;
  --font-handwriting: 'Caveat', cursive;
  
  --shadow-img: 0 20px 50px rgba(5, 5, 5, 0.12);
  --shadow-img-hover: 0 30px 60px rgba(18, 100, 244, 0.25);
  
  --radius-btn: 12px;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* BACKGROUND GRID TEXTURE */
.bg-dotted-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(#CBD5E1 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.text-blue { color: var(--color-blue-primary); }
.text-bold { font-weight: 700; }

/* LEFT CONNECT TAB */
.connect-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
}

.connect-tab-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-blue-primary);
  color: #FFFFFF;
  padding: 14px 18px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 10px 25px var(--color-blue-glow);
  transition: all 0.35s var(--ease-premium);
}

.connect-tab .tab-label-full { display: none; white-space: nowrap; }
.connect-tab:hover .connect-tab-inner { padding-right: 24px; background-color: #0A52D4; }
.connect-tab:hover .tab-label-short { display: none; }
.connect-tab:hover .tab-label-full { display: inline-block; }

/* HEADER */
.header {
  position: relative;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  z-index: 50;
}

.header-container {
  max-width: 1380px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo { text-decoration: none; display: flex; flex-direction: column; }
.brand-name { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: var(--color-text-main); }
.brand-tagline { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-text-muted); margin-top: 2px; }

.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-link { text-decoration: none; color: var(--color-text-main); font-size: 0.938rem; font-weight: 600; transition: color 0.25s ease; display: flex; align-items: center; gap: 4px; }
.nav-link:hover { color: var(--color-blue-primary); }
.nav-btn-contact { padding: 8px 18px; border-radius: 30px; border: 1.5px solid var(--color-text-main); transition: all 0.25s var(--ease-premium); }
.nav-btn-contact:hover { background-color: var(--color-text-main); color: #FFFFFF; }
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-text-main); }

/* MAIN HERO LAYOUT */
.hero-section {
  position: relative;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  padding: 20px 0 60px 0;
  z-index: 10;
}

.hero-container {
  max-width: 1380px;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  gap: 40px;
}

/* DYNAMIC SLIDING TEXT LEFT SIDE */
.hero-left {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slides-text-container {
  position: relative;
  width: 100%;
  min-height: 400px;
}

.slide-text-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(25px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.slide-text-item.active-slide {
  position: relative;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.hero-headline {
  font-size: clamp(2.75rem, 5.2vw, 4.25rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text-main);
  margin-bottom: 20px;
}

.headline-line { display: block; overflow: hidden; }
.line-inner { display: inline-block; }

.blue-underline {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 14px;
  background-color: var(--color-blue-secondary);
  border-radius: 4px;
  z-index: -1;
  transform: scaleX(1);
}

.hero-description {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: #334155;
  font-weight: 500;
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.55;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.3s var(--ease-premium);
  border: none;
}

.btn-primary {
  background-color: var(--color-blue-primary);
  color: #FFFFFF;
  padding: 16px 32px;
  box-shadow: 0 10px 25px var(--color-blue-glow);
}

.btn-primary:hover {
  background-color: #0B53D0;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(18, 100, 244, 0.28);
}

.btn-primary .btn-arrow { transition: transform 0.3s var(--ease-premium); }
.btn-primary:hover .btn-arrow { transform: translateX(5px); }

.btn-secondary { background: transparent; color: var(--color-text-main); padding: 14px 20px; }
.play-icon-wrap { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease-premium); }
.play-icon { width: 16px; height: 16px; fill: var(--color-text-main); color: var(--color-text-main); margin-left: 2px; }

.btn-secondary:hover .play-icon-wrap { background-color: var(--color-blue-primary); border-color: var(--color-blue-primary); }
.btn-secondary:hover .play-icon { fill: #FFFFFF; color: #FFFFFF; }

.hero-micro-services { max-width: 500px; }
.micro-divider { width: 100%; height: 1px; background-color: var(--color-border); margin-bottom: 16px; }
.micro-items { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-text-muted); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* SLIDER DOTS NAVIGATION */
.hero-slider-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: #CBD5E1;
  cursor: pointer;
  transition: all 0.3s var(--ease-premium);
}

.slider-dot.active {
  width: 36px;
  border-radius: 12px;
  background-color: var(--color-blue-primary);
}

/* RIGHT COLUMN: ANIMATED EXACT REFERENCE IMAGES */
.hero-right {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-visual-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9) translateY(30px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}

.slide-visual-item.active-visual {
  opacity: 1;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

.image-frame {
  position: relative;
  width: 100%;
  max-width: 680px;
  transition: transform 0.45s var(--ease-premium);
}

.image-frame:hover { transform: translateY(-6px) scale(1.015) !important; }

/* Visual page par free float kare - image ka white background blend ho jaye,
   koi card / border / rounded box na dikhe (reference design jaisa). */
.hero-ref-img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
}

/* RESPONSIVE STYLES */
@media (max-width: 992px) {
  .hero-container { grid-template-columns: 1fr; gap: 40px; }
  .hero-left { text-align: center; align-items: center; min-height: auto; }
  .hero-description { max-width: 600px; }
  .hero-cta-group { justify-content: center; }
  .hero-micro-services { margin: 0 auto; }
  .hero-slider-nav { justify-content: center; }
  .hero-right { height: 420px; }
}

@media (max-width: 640px) {
  .connect-tab { display: none; }
  .hero-headline { font-size: 2.2rem; }
  .hero-cta-group { flex-direction: column; width: 100%; gap: 10px; }
  .btn-cta { width: 100%; }
  .hero-right { height: 320px; }
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s ease;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 16px 32px rgba(37, 211, 102, 0.45);
}

.whatsapp-icon { width: 26px; height: 26px; }

@media (max-width: 640px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ==========================================================================
   HERO POLISH — reference design ke hisaab se fixes
   ========================================================================== */

/* Blue highlight ab headline ke peeche hi rahega (pehle page me neeche
   chala jaata tha kyunki iska koi positioned parent hi nahi tha). */
.highlight-container {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.blue-underline {
  bottom: 0.08em;
  height: 0.26em;
  border-radius: 2px;
}

/* LEFT CONNECT TAB — reference jaisa patla vertical strip,
   taaki CTA button ke upar na chadhe. */
.connect-tab-inner {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  gap: 10px;
  padding: 20px 10px;
  border-radius: 0 10px 10px 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.connect-tab .tab-icon { width: 18px; height: 18px; transform: rotate(180deg); }
.connect-tab:hover .connect-tab-inner { padding: 26px 10px; }
.connect-tab:hover .tab-label-short { display: inline-block; }
.connect-tab .tab-label-full { display: none !important; }

/* VISUAL SIZE — hero ke andar poora fit ho, neeche se cut na ho */
.image-frame { max-width: 600px; }
.hero-right { height: 560px; }

@media (max-width: 992px) {
  .hero-right { height: 420px; }
  .image-frame { max-width: 460px; }
}

@media (max-width: 640px) {
  .hero-right { height: 330px; }
  .image-frame { max-width: 340px; }
}

/* Image ke edges soft kar do — na rectangle ka border dikhe,
   na left side ka bacha hua text. */
.hero-ref-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 96%, transparent 100%);
}

.image-frame {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 93%, transparent 100%);
}

/* Har slide ki height same rahe, warna dots aur text upar-neeche kudte hain */
.slides-text-container { min-height: 470px; }
.slide-text-item.active-slide { position: absolute; }

@media (max-width: 992px) {
  .slides-text-container { min-height: 420px; }
}

@media (max-width: 640px) {
  .slides-text-container { min-height: 380px; }
}

.slides-text-container { min-height: 505px; }
.hero-slider-nav { margin-top: 8px; }

/* ==========================================================================
   MOBILE / TABLET FIXES
   ========================================================================== */

/* Grid column ko content ke hisaab se failne mat do — warna page
   side me overflow hota hai. */
.hero-left,
.hero-right { min-width: 0; }

.hero-description,
.micro-items,
.hero-headline { max-width: 100%; }

@media (max-width: 992px) {
  .nav-menu { display: none; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; }
  .header { height: 72px; }
  .brand-name { font-size: 1.05rem; }
  .hero-section { padding: 10px 0 40px 0; min-height: auto; }
}

/* Mobile slide-out menu */
.nav-menu.is-open {
  display: flex;
  position: absolute;
  top: 72px;
  left: 5%;
  right: 5%;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(5, 5, 5, 0.10);
  z-index: 60;
}

@media (max-width: 640px) {
  .hero-headline { font-size: 2.15rem; line-height: 1.08; }
  .hero-description { font-size: 0.95rem; }
  .hero-cta-group { align-items: stretch; }
  .btn-cta { width: 100%; justify-content: center; }
  .micro-items { justify-content: center; gap: 6px 10px; font-size: 0.68rem; }
  .whatsapp-float { bottom: 16px; right: 16px; }
}

/* Chhoti screens par extra khaali jagah na bache */
@media (max-width: 992px) {
  .slides-text-container { min-height: 430px; }
}

@media (max-width: 640px) {
  .slides-text-container { min-height: 400px; }
}

@media (max-width: 992px) {
  .slides-text-container { min-height: 480px; }
}

/* ==========================================================================
   HERO TEXT REVEAL ANIMATION
   Har slide active hote hi: headline lines neeche se upar, phir
   paragraph, buttons aur tags ek-ek karke fade-up.
   ========================================================================== */

@keyframes lineRise {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeUp {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes sweepIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Default (inactive) state — sab chhupa hua */
.slide-text-item .line-inner,
.slide-text-item .hero-description,
.slide-text-item .hero-cta-group > *,
.slide-text-item .hero-micro-services {
  opacity: 0;
}

.slide-text-item .blue-underline {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Active slide — animation chalu */
.slide-text-item.active-slide .line-inner {
  animation: lineRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slide-text-item.active-slide .headline-line:nth-of-type(1) .line-inner { animation-delay: 0.05s; }
.slide-text-item.active-slide .headline-line:nth-of-type(2) .line-inner { animation-delay: 0.15s; }
.slide-text-item.active-slide .headline-line:nth-of-type(3) .line-inner { animation-delay: 0.25s; }

.slide-text-item.active-slide .blue-underline {
  animation: sweepIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.slide-text-item.active-slide .hero-description {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.slide-text-item.active-slide .hero-cta-group > *:nth-child(1) {
  animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.slide-text-item.active-slide .hero-cta-group > *:nth-child(2) {
  animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

.slide-text-item.active-slide .hero-micro-services {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* Animation band karne walon ke liye sab turant visible */
@media (prefers-reduced-motion: reduce) {
  .slide-text-item .line-inner,
  .slide-text-item .hero-description,
  .slide-text-item .hero-cta-group > *,
  .slide-text-item .hero-micro-services { opacity: 1; animation: none; }
  .slide-text-item .blue-underline { transform: scaleX(1); animation: none; }
}

/* ==========================================================================
   HERO VISUAL — poora image dikhe + entrance animation
   ========================================================================== */

/* Images ab clean hain, isliye sirf halka sa edge feather chahiye
   (rectangle ka border chhupane ke liye) — labels ab cut nahi honge. */
.hero-ref-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.image-frame {
  max-width: 660px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.hero-right { height: 600px; }

/* Slide active hote hi visual zoom-in hoke aata hai */
@keyframes visualReveal {
  from { opacity: 0; transform: scale(0.9) translateY(22px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.slide-visual-item .hero-ref-img { opacity: 0; }

.slide-visual-item.active-visual .hero-ref-img {
  animation: visualReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@media (max-width: 992px) {
  .image-frame { max-width: 520px; }
  .hero-right { height: 440px; }
}

@media (max-width: 640px) {
  .image-frame { max-width: 380px; }
  .hero-right { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-visual-item .hero-ref-img { opacity: 1; animation: none; }
}

/* ==========================================================================
   CREATIVE VISUAL STAGE
   Image ke peeche ek jeevit sa stage — dheere se ghoomte rings,
   saans lete glow blobs aur tairte hue dots.
   ========================================================================== */

.visual-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.slide-visual-item { z-index: 1; }

/* ---- Glow blobs ---- */
.stage-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: glowBreathe 9s ease-in-out infinite;
}

.stage-glow-1 {
  width: 46%;
  aspect-ratio: 1;
  top: 8%;
  left: 12%;
  background: radial-gradient(circle, rgba(18, 100, 244, 0.30), rgba(18, 100, 244, 0) 70%);
}

.stage-glow-2 {
  width: 38%;
  aspect-ratio: 1;
  bottom: 6%;
  right: 8%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.26), rgba(56, 189, 248, 0) 70%);
  animation-duration: 11s;
  animation-delay: -4s;
}

@keyframes glowBreathe {
  0%, 100% { opacity: 0.45; transform: scale(1) translate(0, 0); }
  50%      { opacity: 0.85; transform: scale(1.18) translate(14px, -18px); }
}

/* ---- Ghoomte hue dashed rings ---- */
.stage-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px dashed rgba(18, 100, 244, 0.22);
  animation: ringSpin 46s linear infinite;
}

.stage-ring-1 {
  width: 78%;
  aspect-ratio: 1;
  margin: -39% 0 0 -39%;
}

.stage-ring-2 {
  width: 104%;
  aspect-ratio: 1;
  margin: -52% 0 0 -52%;
  border-style: dotted;
  border-color: rgba(5, 5, 5, 0.10);
  animation-duration: 70s;
  animation-direction: reverse;
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* ---- Tairte hue dots ---- */
.stage-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-blue-primary);
  box-shadow: 0 0 0 6px rgba(18, 100, 244, 0.12);
  animation: dotDrift 7s ease-in-out infinite;
}

.stage-dot-1 { top: 12%; left: 6%; }
.stage-dot-2 { top: 26%; right: 4%; width: 7px; height: 7px; animation-duration: 9s; animation-delay: -3s; }
.stage-dot-3 { bottom: 18%; left: 2%; width: 8px; height: 8px; animation-duration: 8s; animation-delay: -5s; }
.stage-dot-4 { bottom: 8%; right: 14%; width: 6px; height: 6px; background: #38BDF8; animation-duration: 10s; animation-delay: -1.5s; }

@keyframes dotDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.9; }
  50%      { transform: translate(10px, -16px); opacity: 0.45; }
}

/* ---- Plus-shaped sparks ---- */
.stage-spark {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0.5;
  background:
    linear-gradient(var(--color-blue-primary), var(--color-blue-primary)) center/2px 100% no-repeat,
    linear-gradient(var(--color-blue-primary), var(--color-blue-primary)) center/100% 2px no-repeat;
  animation: sparkPulse 5s ease-in-out infinite;
}

.stage-spark-1 { top: 6%; right: 22%; }
.stage-spark-2 { bottom: 26%; right: 2%; width: 13px; height: 13px; animation-delay: -2.5s; }

@keyframes sparkPulse {
  0%, 100% { transform: scale(0.7) rotate(0deg);   opacity: 0.25; }
  50%      { transform: scale(1.15) rotate(90deg); opacity: 0.7; }
}

@media (max-width: 640px) {
  .stage-ring-2, .stage-spark, .stage-dot-3 { display: none; }
  .stage-glow { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-glow, .stage-ring, .stage-dot, .stage-spark { animation: none; }
  .stage-glow { opacity: 0.5; }
}

/* Image ab asli cutout hai (background transparent), isliye na blend mode
   chahiye na edge mask — peeche ka glow / rings saaf dikhte hain. */
.hero-ref-img {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
          mask-image: none;
}

.image-frame {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Glow thoda aur mehsoos ho, aur sparks andar ki taraf */
.stage-glow-1 {
  width: 54%;
  top: 4%;
  left: 8%;
  background: radial-gradient(circle, rgba(18, 100, 244, 0.38), rgba(18, 100, 244, 0) 70%);
}

.stage-glow-2 {
  width: 46%;
  bottom: 2%;
  right: 4%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.34), rgba(56, 189, 248, 0) 70%);
}

.stage-spark-1 { top: 9%; right: 26%; }
.stage-spark-2 { bottom: 24%; right: 8%; }

.stage-dot-2 { right: 8%; }
.stage-dot-4 { right: 18%; }

/* ==========================================================================
   VISUAL EDGE SOFTENING
   Sab images ke side edges halke fade — aur jin slides me concrete
   pedestal hai (marketing / software / web) unka neeche wala hard
   rectangle edge zyada fade, warna photo chipkaya hua lagta hai.
   ========================================================================== */

.hero-ref-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.slide-visual-item[data-visual="1"] .image-frame,
.slide-visual-item[data-visual="2"] .image-frame,
.slide-visual-item[data-visual="4"] .image-frame {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 99%);
}

/* 4 line wale headline (jaise "CUSTOM SOFTWARE. REAL BUSINESS VALUE.")
   ke liye jagah — warna dots text ke upar chadh jaate hain. */
.slides-text-container { min-height: 575px; }

@media (max-width: 992px) {
  .slides-text-container { min-height: 520px; }
}

@media (max-width: 640px) {
  .slides-text-container { min-height: 470px; }
}

/* ==========================================================================
   LIVE GROWTH HUB
   Slide 0 ka diagram ab flat image nahi — har card, line, node aur
   label alag element hai, isliye sab apni baari se animate hote hain.
   ========================================================================== */

.growth-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 790;
}

.hub-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- Rings ---- */
.hub-ring {
  fill: none;
  stroke: rgba(5, 5, 5, 0.16);
  stroke-width: 1.2;
  stroke-dasharray: 2 9;
  transform-origin: 410px 365px;
  opacity: 0;
}

.hub-ring-b { stroke-dasharray: 1.5 12; stroke: rgba(18, 100, 244, 0.22); }
.hub-ring-c { stroke-dasharray: 2 14; stroke: rgba(5, 5, 5, 0.10); }

/* ---- Spokes ---- */
.hub-spoke {
  stroke: #9AA5B4;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.hub-node {
  fill: #FFFFFF;
  stroke: var(--color-blue-primary);
  stroke-width: 3.5;
  opacity: 0;
  transform-origin: center;
}

/* ---- Doodles ---- */
.hub-swoosh {
  fill: none;
  stroke: var(--color-blue-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.hub-arrow {
  fill: none;
  stroke: #111111;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}

.hub-underline {
  fill: none;
  stroke: var(--color-blue-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}

/* ---- Center core ---- */
.hub-core {
  position: absolute;
  left: 46.6%;
  top: 46.2%;
  width: 20.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #3A3A3A, #111111 62%);
  box-shadow: 0 0 0 9px #F1F3F6, 0 0 0 11px #D9DEE6, 0 18px 34px rgba(5, 5, 5, 0.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
}

.hub-core-text {
  font-family: var(--font-handwriting);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.35vw, 1.6rem);
  line-height: 1.02;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.02em;
}

.hub-core-arrow {
  width: 42%;
  height: auto;
  fill: none;
  stroke: var(--color-blue-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}

/* ---- Service cards ---- */
.hub-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 15.5%;
  aspect-ratio: 1 / 0.92;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  border-radius: 18%;
  background: linear-gradient(155deg, #FFFFFF, #F4F6F9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 26px rgba(5, 5, 5, 0.14), 0 2px 5px rgba(5, 5, 5, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9%;
  padding: 6%;
  text-align: center;
}

.hub-icon {
  width: 30%;
  height: auto;
  aspect-ratio: 1;
  color: #111111;
  stroke-width: 2.2;
}

.hub-icon.icon-blue { color: var(--color-blue-primary); }

.hub-card-label {
  font-size: clamp(0.42rem, 1.02vw, 0.72rem);
  font-weight: 700;
  line-height: 1.16;
  color: #111111;
  letter-spacing: -0.01em;
}

/* ---- Handwritten notes ---- */
.hub-note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) translateY(10px);
  opacity: 0;
  font-family: var(--font-handwriting);
  font-weight: 700;
  font-size: clamp(0.65rem, 1.62vw, 1.12rem);
  line-height: 1.06;
  color: #111111;
  text-align: center;
  white-space: nowrap;
}

.hub-tagline {
  position: absolute;
  left: 78%;
  top: 81%;
  transform: translate(-50%, -50%) translateY(10px);
  opacity: 0;
  font-family: var(--font-handwriting);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.72vw, 1.2rem);
  line-height: 1.06;
  color: #111111;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   GROWTH HUB — ANIMATION SEQUENCE
   Rings → center → arrow → spokes draw → cards pop → notes → tagline.
   Uske baad sab dheere-dheere float / pulse karta rehta hai.
   ========================================================================== */

@keyframes hubRingIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes hubRingSpin { to { transform: rotate(360deg); } }
@keyframes hubCoreIn   { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hubDraw     { to { stroke-dashoffset: 0; } }
@keyframes hubNodeIn   { to { opacity: 1; } }
@keyframes hubCardIn   { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hubNoteIn   { to { opacity: 1; transform: translate(-50%, -50%) translateY(0); } }

@keyframes hubCorePulse {
  0%, 100% { box-shadow: 0 0 0 9px #F1F3F6, 0 0 0 11px #D9DEE6, 0 18px 34px rgba(5,5,5,0.26); }
  50%      { box-shadow: 0 0 0 12px #EEF3FD, 0 0 0 15px #CFE0FB, 0 20px 40px rgba(18,100,244,0.28); }
}

@keyframes hubCardFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-7px); }
}

@keyframes hubNodeBlink {
  0%, 100% { r: 7; }
  50%      { r: 9; }
}

/* Slide active hote hi sequence chalu */
.active-visual .hub-ring {
  animation:
    hubRingIn 0.7s ease-out both,
    hubRingSpin 60s linear 0.7s infinite;
}

.active-visual .hub-ring-b { animation-duration: 0.7s, 85s; animation-direction: normal, reverse; }
.active-visual .hub-ring-c { animation-duration: 0.7s, 110s; }

.active-visual .hub-core {
  animation:
    hubCoreIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both,
    hubCorePulse 4.5s ease-in-out 1.2s infinite;
}

.active-visual .hub-core-arrow {
  animation: hubDraw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}

.active-visual .hub-spoke {
  animation: hubDraw 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.75s + var(--i) * 0.1s);
}

.active-visual .hub-node {
  animation:
    hubNodeIn 0.3s ease-out both,
    hubNodeBlink 3s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--i) * 0.1s), calc(2s + var(--i) * 0.35s);
}

.active-visual .hub-card {
  animation:
    hubCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    hubCardFloat 5s ease-in-out infinite;
  animation-delay: calc(0.95s + var(--i) * 0.11s), calc(2.4s + var(--i) * 0.45s);
}

.active-visual .hub-swoosh {
  animation: hubDraw 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1.5s + var(--i) * 0.18s);
}

.active-visual .hub-arrow {
  animation: hubDraw 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1.7s + var(--i) * 0.12s);
}

.active-visual .hub-note {
  animation: hubNoteIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1.6s + var(--i) * 0.12s);
}

.active-visual .hub-underline { animation: hubDraw 0.6s ease-out 2.35s both; }
.active-visual .hub-tagline   { animation: hubNoteIn 0.5s ease-out 2.2s both; }

/* Hover par card thoda uthta hai */
.hub-card { transition: box-shadow 0.35s ease; }
.hub-card:hover { box-shadow: 0 22px 40px rgba(18, 100, 244, 0.22), 0 3px 8px rgba(5,5,5,0.1); }

@media (prefers-reduced-motion: reduce) {
  .active-visual .hub-ring,
  .active-visual .hub-core,
  .active-visual .hub-card,
  .active-visual .hub-note,
  .active-visual .hub-tagline,
  .active-visual .hub-node { animation: none; opacity: 1; }
  .active-visual .hub-core { transform: translate(-50%, -50%) scale(1); }
  .active-visual .hub-card { transform: translate(-50%, -50%) scale(1); }
  .active-visual .hub-note,
  .active-visual .hub-tagline { transform: translate(-50%, -50%); }
  .active-visual .hub-spoke,
  .active-visual .hub-swoosh,
  .active-visual .hub-arrow,
  .active-visual .hub-underline,
  .active-visual .hub-core-arrow { animation: none; stroke-dashoffset: 0; }
}

/* ---- HUB POLISH ---- */

/* Lucide ka SVG percentage height par collapse ho raha tha */
.hub-icon {
  width: 36%;
  height: 36%;
  aspect-ratio: auto;
  flex: 0 0 auto;
  stroke-width: 2;
}

.hub-card {
  width: 14.6%;
  aspect-ratio: 1 / 0.95;
  border-radius: 16%;
  gap: 7%;
  /* Reference jaisa 3D pillow look */
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.95) inset,
    0 -2px 0 rgba(5, 5, 5, 0.05) inset,
    0 3px 0 #E4E8EE,
    0 5px 0 #D7DDE6,
    0 18px 30px rgba(5, 5, 5, 0.16),
    0 4px 8px rgba(5, 5, 5, 0.07);
}

.hub-card:hover {
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.95) inset,
    0 3px 0 #DDE6F6,
    0 5px 0 #CBD9F2,
    0 24px 42px rgba(18, 100, 244, 0.24),
    0 4px 8px rgba(5, 5, 5, 0.08);
}

.hub-card-label {
  font-size: clamp(0.46rem, 1.12vw, 0.78rem);
  line-height: 1.14;
}

/* Core thoda chhota — cards ke saath overlap na ho */
.hub-core { width: 18.2%; }

/* Blue swoosh Web Development card ke upar se hatao */
.hub-swoosh[style*="--i:0"] { d: path("M548 232 C 600 196, 638 216, 616 262"); }

/* Percentage size lucide ke inline svg par theek se resolve nahi ho rahi thi,
   isliye viewport-based clamp — predictable aur scale bhi hota hai. */
.hub-icon {
  width: clamp(18px, 2.25vw, 34px);
  height: clamp(18px, 2.25vw, 34px);
  min-width: 18px;
  min-height: 18px;
}

/* Card ka box fix rakho — content ke hisaab se lamba na ho jaye */
.hub-card {
  aspect-ratio: auto;
  height: 15.6%;
  padding: 4%;
  gap: 5%;
  overflow: hidden;
}

.hub-icon {
  width: clamp(16px, 2.05vw, 30px);
  height: clamp(16px, 2.05vw, 30px);
}

.hub-card { width: 13%; height: 14%; }
.hub-core { width: 17.6%; }


/* ==========================================================================
   LIVE AI AUTOMATION FLOW
   Robot cutout image hai, baaki sab (cards, dashed lines, notes) asli
   elements — isliye poora flow step-by-step animate hota hai.
   ========================================================================== */

.ai-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 920 / 820;
}

.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flow-robot {
  position: absolute;
  left: -1%;
  top: 11%;
  width: 63%;
  height: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- SVG parts ---- */
.flow-ring {
  fill: none;
  stroke: rgba(5, 5, 5, 0.11);
  stroke-width: 1.2;
  stroke-dasharray: 2 12;
  transform-origin: 430px 420px;
  opacity: 0;
}

.flow-link {
  fill: none;
  stroke: #2B2B2B;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0;
}

.flow-node {
  fill: #FFFFFF;
  stroke: #2B2B2B;
  stroke-width: 2.4;
  opacity: 0;
}

.flow-loop {
  fill: none;
  stroke: #2FA8F5;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.flow-loop-head {
  fill: none;
  stroke: #2FA8F5;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.flow-orbit {
  fill: none;
  stroke: var(--color-blue-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 11;
  stroke-dashoffset: 0;
  opacity: 0;
}

.flow-oval {
  fill: none;
  stroke: #2FA8F5;
  stroke-width: 4;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.flow-underline {
  fill: none;
  stroke: #1B3FA8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}

.flow-spark {
  fill: none;
  stroke: #14245C;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
}

/* ---- Flow cards ---- */
.flow-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30%;
  transform: translate(-50%, -50%) translateX(18px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 7%;
  padding: 3.4% 4.5%;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(5, 5, 5, 0.10), 0 2px 5px rgba(5, 5, 5, 0.06);
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease-premium);
}

.flow-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(22px, 2.6vw, 38px);
  height: clamp(22px, 2.6vw, 38px);
  border-radius: 50%;
}

.flow-ico svg { width: 58%; height: 58%; stroke-width: 2.2; }

.ico-blue    { background: var(--color-blue-primary); color: #FFFFFF; }
.ico-green   { background: #25D366; color: #FFFFFF; }
.ico-dark    { background: transparent; color: #111111; }
.ico-dark svg,
.ico-outline svg { width: 78%; height: 78%; }
.ico-outline { background: transparent; color: var(--color-blue-primary); }

.flow-txt { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.flow-txt strong {
  font-size: clamp(0.5rem, 1.16vw, 0.84rem);
  font-weight: 700;
  color: #111111;
  white-space: nowrap;
}
.flow-txt small {
  font-size: clamp(0.42rem, 0.94vw, 0.68rem);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Handwritten notes ---- */
.flow-note {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  font-family: var(--font-handwriting);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.75vw, 1.24rem);
  line-height: 1.08;
  color: #111111;
  white-space: nowrap;
}

.flow-note-top  { left: 9%; top: 22%; transform: translateY(10px) rotate(-6deg); }
.flow-note-oval { left: 11.5%; top: 71%; }

/* ==========================================================================
   AI FLOW — ANIMATION SEQUENCE
   Ring → robot → note → cards ek-ek karke → dashed lines → loop arrow.
   Uske baad dashed lines me current behta rehta hai (flow chalu hai).
   ========================================================================== */

@keyframes flowFadeIn   { to { opacity: 1; } }
@keyframes flowRobotIn  { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flowCardIn   { to { opacity: 1; transform: translate(-50%, -50%) translateX(0); } }
@keyframes flowNoteIn   { to { opacity: 1; transform: translateY(0) rotate(-6deg); } }
@keyframes flowNoteIn2  { to { opacity: 1; transform: translateY(0); } }
@keyframes flowDraw     { to { stroke-dashoffset: 0; } }
@keyframes flowRingSpin { to { transform: rotate(360deg); } }
@keyframes flowRobotBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Dashed line me chalta hua current */
@keyframes flowDash { to { stroke-dashoffset: -160; } }

.active-visual .flow-ring {
  animation: flowFadeIn 0.7s ease-out both, flowRingSpin 75s linear 0.7s infinite;
}

.active-visual .flow-robot {
  animation:
    flowRobotIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both,
    flowRobotBob 5.5s ease-in-out 1.1s infinite;
}

.active-visual .flow-note-top {
  animation: flowNoteIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.active-visual .flow-underline { animation: flowDraw 0.55s ease-out 0.95s both; }

.active-visual .flow-orbit {
  animation: flowFadeIn 0.6s ease-out 0.7s both, flowDash 4s linear 1.3s infinite;
}

.active-visual .flow-card {
  animation: flowCardIn 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(0.75s + var(--i) * 0.16s);
}

/* Line pehle draw hoti hai, phir usme current behta hai */
.active-visual .flow-link {
  animation:
    flowFadeIn 0.35s ease-out both,
    flowDash 3.2s linear infinite;
  animation-delay: calc(0.95s + var(--i) * 0.16s), calc(1.5s + var(--i) * 0.16s);
}

.active-visual .flow-node {
  animation: flowFadeIn 0.3s ease-out both;
  animation-delay: calc(1.15s + var(--i) * 0.16s);
}

.active-visual .flow-loop      { animation: flowDraw 1s cubic-bezier(0.16, 1, 0.3, 1) 1.75s both; }
.active-visual .flow-loop-head { animation: flowFadeIn 0.3s ease-out 2.6s both; }
.active-visual .flow-oval      { animation: flowDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both; }
.active-visual .flow-note-oval { animation: flowNoteIn2 0.6s ease-out 2.05s both; }

.active-visual .flow-spark {
  animation: flowFadeIn 0.4s ease-out both;
  animation-delay: calc(1.35s + var(--i) * 0.14s);
}

.flow-card:hover {
  transform: translate(-50%, -50%) translateX(-4px);
  box-shadow: 0 18px 34px rgba(18, 100, 244, 0.20), 0 3px 7px rgba(5, 5, 5, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .active-visual .flow-ring,
  .active-visual .flow-robot,
  .active-visual .flow-card,
  .active-visual .flow-note,
  .active-visual .flow-node,
  .active-visual .flow-link,
  .active-visual .flow-orbit,
  .active-visual .flow-spark,
  .active-visual .flow-loop-head { animation: none; opacity: 1; }
  .active-visual .flow-robot { transform: none; }
  .active-visual .flow-card  { transform: translate(-50%, -50%); }
  .active-visual .flow-note-top { transform: rotate(-6deg); }
  .active-visual .flow-note-oval { transform: none; }
  .active-visual .flow-loop,
  .active-visual .flow-oval,
  .active-visual .flow-underline { animation: none; stroke-dashoffset: 0; }
}

/* ---- AI FLOW LAYOUT FIX — robot aur cards ka overlap hatao ---- */
.flow-robot { left: 1%; top: 16%; width: 55%; }
.flow-card  { width: 23.5%; gap: 6%; padding: 3% 4%; }
.flow-note-top  { left: 7.5%; top: 18%; }
.flow-note-oval { left: 8.5%; top: 72%; }

/* Card apne content ke hisaab se size ho — text bahar na nikle */
.flow-card {
  width: max-content;
  max-width: 34%;
}

/* Connector dashes thodi motti — chhote gap me bhi dikhein */
.flow-link { stroke-width: 3.4; stroke-dasharray: 6 8; }
.flow-node { stroke-width: 3; }
.flow-card { padding: 2.6% 3.6%; }

/* ==========================================================================
   LIVE MARKETING STAGE
   Laptop photo cutout + asli HTML cards, bars aur doodles.
   ========================================================================== */

.mkt-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1112 / 1080;
}

.mkt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.mkt-device {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- SVG bits ---- */
.mkt-swoosh {
  fill: none; stroke: #1E7BF5; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
.mkt-arrow {
  fill: none; stroke: #111; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 110; stroke-dashoffset: 110;
}
.mkt-underline {
  fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 130; stroke-dashoffset: 130;
}
.mkt-spark {
  fill: none; stroke: #14245C; stroke-width: 9; stroke-linecap: round; opacity: 0;
}

/* ---- Cards ---- */
.mkt-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) translateX(-16px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 8%;
  padding: 4.5% 5%;
  width: max-content;
  max-width: 30%;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(5, 5, 5, 0.13), 0 2px 6px rgba(5, 5, 5, 0.07);
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease-premium);
}

.mkt-card-right { transform: translate(-50%, -50%) translateX(16px); }
.mkt-card-stack { flex-direction: column; align-items: flex-start; gap: 10%; }

.mkt-brand { display: grid; place-items: center; width: clamp(20px, 2.5vw, 36px); }
.mkt-brand svg { width: 100%; height: auto; }
.brand-meta { fill: none; stroke: #0081FB; stroke-width: 3.4; stroke-linecap: round; }
.brand-ico { width: clamp(18px, 2.2vw, 32px); height: auto; color: #111; }

.mkt-name {
  font-size: clamp(0.5rem, 1.12vw, 0.82rem);
  font-weight: 600;
  color: #111;
  line-height: 1.16;
  white-space: nowrap;
}

.mkt-strong {
  font-size: clamp(0.52rem, 1.2vw, 0.9rem);
  font-weight: 800;
  color: #111;
  line-height: 1.18;
  white-space: nowrap;
}

.mkt-ico-blue { width: clamp(16px, 1.9vw, 28px); height: auto; color: var(--color-blue-primary); }
.mkt-ico-lg   { width: clamp(20px, 2.5vw, 36px); }

/* Mini bar chart — bars neeche se upar badhti hain */
.mkt-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: clamp(14px, 1.7vw, 24px);
}

.mkt-bars i {
  display: block;
  width: clamp(3px, 0.42vw, 6px);
  height: 0;
  border-radius: 2px;
  background: #111;
}

/* ---- Handwritten notes ---- */
.mkt-note {
  position: absolute;
  opacity: 0;
  transform: translateY(12px);
  font-family: var(--font-handwriting);
  font-weight: 700;
  line-height: 1.04;
  color: #111;
  white-space: nowrap;
}

.mkt-note-scale {
  left: 78%; top: 8%;
  font-size: clamp(0.85rem, 2.1vw, 1.5rem);
  transform: translateY(12px) rotate(-7deg);
}

.mkt-note-turn {
  left: 27.5%; top: 45.5%;
  font-size: clamp(0.75rem, 1.85vw, 1.3rem);
  transform: translateY(12px) rotate(-6deg);
}

/* ---- MARKETING ANIMATION SEQUENCE ---- */
@keyframes mktDeviceIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mktCardInL  { to { opacity: 1; transform: translate(-50%, -50%) translateX(0); } }
@keyframes mktBarGrow  { to { height: var(--b); } }
@keyframes mktNoteIn1  { to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
@keyframes mktNoteIn2  { to { opacity: 1; transform: translateY(0) rotate(-6deg); } }
@keyframes mktFade     { to { opacity: 1; } }
@keyframes mktDraw     { to { stroke-dashoffset: 0; } }
@keyframes mktFloat    { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }

.active-visual .mkt-device {
  animation: mktDeviceIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.active-visual .mkt-card {
  animation:
    mktCardInL 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) both,
    mktFloat 5.5s ease-in-out infinite;
  animation-delay: calc(0.55s + var(--i) * 0.13s), calc(2.2s + var(--i) * 0.5s);
}

/* Bars ek-ek karke upar badhti hain */
.active-visual .mkt-bars i {
  animation: mktBarGrow 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.active-visual .mkt-bars i:nth-child(1) { animation-delay: 1.15s; }
.active-visual .mkt-bars i:nth-child(2) { animation-delay: 1.27s; }
.active-visual .mkt-bars i:nth-child(3) { animation-delay: 1.39s; }

.active-visual .mkt-note-scale { animation: mktNoteIn1 0.6s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.active-visual .mkt-note-turn  { animation: mktNoteIn2 0.6s cubic-bezier(0.16,1,0.3,1) 1.25s both; }
.active-visual .mkt-underline  { animation: mktDraw 0.55s ease-out 0.9s both; }
.active-visual .mkt-arrow      { animation: mktDraw 0.5s ease-out 1.75s both; }

.active-visual .mkt-swoosh {
  animation: mktDraw 0.85s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: calc(1.5s + var(--i) * 0.2s);
}

.active-visual .mkt-spark {
  animation: mktFade 0.4s ease-out both;
  animation-delay: calc(1.0s + var(--i) * 0.14s);
}

.mkt-card:hover {
  box-shadow: 0 22px 40px rgba(18, 100, 244, 0.22), 0 3px 8px rgba(5,5,5,0.08);
}

@media (prefers-reduced-motion: reduce) {
  .active-visual .mkt-device,
  .active-visual .mkt-card,
  .active-visual .mkt-note,
  .active-visual .mkt-spark { animation: none; opacity: 1; }
  .active-visual .mkt-device { transform: none; }
  .active-visual .mkt-card { transform: translate(-50%, -50%); }
  .active-visual .mkt-note-scale { transform: rotate(-7deg); }
  .active-visual .mkt-note-turn { transform: rotate(-6deg); }
  .active-visual .mkt-bars i { animation: none; height: var(--b); }
  .active-visual .mkt-swoosh,
  .active-visual .mkt-arrow,
  .active-visual .mkt-underline { animation: none; stroke-dashoffset: 0; }
}

/* Photo wale slides thode lambe hain — visual area badha do */
.hero-right { height: 642px; }

@media (max-width: 992px) { .hero-right { height: 450px; } }
@media (max-width: 640px) { .hero-right { height: 350px; } }

.mkt-card { max-width: 26%; }
.mkt-note-turn { left: 29%; top: 46%; }

/* Concrete ka bottom edge halka fade — device images ab cutout hain */
.slide-visual-item[data-visual="1"] .image-frame,
.slide-visual-item[data-visual="2"] .image-frame,
.slide-visual-item[data-visual="4"] .image-frame {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}

/* SVG icons ko width+height dono explicit chahiye, warna collapse ho jaate hain */
.mkt-brand {
  width: clamp(22px, 2.6vw, 38px);
  height: clamp(22px, 2.6vw, 38px);
}
.mkt-brand > svg { width: 100%; height: 100%; }
.brand-ico {
  width: clamp(20px, 2.3vw, 34px);
  height: clamp(20px, 2.3vw, 34px);
}
.mkt-ico-blue {
  width: clamp(17px, 2vw, 30px);
  height: clamp(17px, 2vw, 30px);
}
.mkt-ico-lg {
  width: clamp(22px, 2.6vw, 38px);
  height: clamp(22px, 2.6vw, 38px);
}

/* Concrete ke hard side edges soft karo */
.mkt-device {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.mkt-note-turn { left: 30.5%; top: 46%; }

/* Card ke andar icons/bars shrink ho rahe the (flex-shrink) — rok do */
.mkt-brand,
.mkt-bars,
.brand-ico,
.mkt-ico-blue,
.mkt-ico-lg { flex: 0 0 auto; }

.mkt-card { max-width: 31%; }

/* ==========================================================================
   LIVE SOFTWARE STAGE
   ========================================================================== */

.sw-stage { position: relative; width: 100%; aspect-ratio: 1112 / 1080; }
.sw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.sw-device {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.sw-swoosh { fill: none; stroke: #1E7BF5; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.sw-arrow  { fill: none; stroke: #111; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.sw-spark  { fill: none; stroke: #14245C; stroke-width: 9; stroke-linecap: round; opacity: 0; }

.sw-card {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) translateX(-16px);
  opacity: 0;
  display: flex; align-items: center; gap: 9%;
  padding: 4.5% 5%;
  width: max-content; max-width: 30%;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(5,5,5,0.13), 0 2px 6px rgba(5,5,5,0.07);
  transition: box-shadow 0.35s ease;
}

.sw-card-wide { transform: translate(-50%, -50%) translateX(16px); }

.sw-ico    { flex: 0 0 auto; width: clamp(18px, 2.15vw, 32px); height: clamp(18px, 2.15vw, 32px); }
.sw-ico-sm { flex: 0 0 auto; width: clamp(13px, 1.5vw, 22px); height: clamp(13px, 1.5vw, 22px); color: #111; }
.ico-b     { color: var(--color-blue-primary); }

.sw-name {
  font-size: clamp(0.48rem, 1.1vw, 0.8rem);
  font-weight: 600; color: #111; line-height: 1.16; white-space: nowrap;
}
.sw-name-lg { font-weight: 700; }

.sw-bars { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 2px; height: clamp(13px, 1.6vw, 23px); }
.sw-bars i { display: block; width: clamp(3px, 0.4vw, 6px); height: 0; border-radius: 2px; background: #111; }

/* Checklist card */
.sw-check {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 4%;
  padding: 5% 6%;
  width: max-content;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(5,5,5,0.13), 0 2px 6px rgba(5,5,5,0.07);
}

.sw-check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(0.52rem, 1.2vw, 0.88rem);
  font-weight: 600; color: #111; white-space: nowrap;
  opacity: 0;
}

.sw-tick {
  flex: 0 0 auto;
  width: clamp(14px, 1.65vw, 24px); height: clamp(14px, 1.65vw, 24px);
  padding: 2px;
  border-radius: 50%;
  background: var(--color-blue-primary);
  color: #FFFFFF;
  stroke-width: 3.5;
  transform: scale(0.3);
}

.sw-note {
  position: absolute; opacity: 0; transform: translateY(12px);
  font-family: var(--font-handwriting); font-weight: 700;
  line-height: 1.04; color: #111; white-space: nowrap;
}

.sw-note-build { left: 77%; top: 6.5%; font-size: clamp(0.85rem, 2.05vw, 1.46rem); transform: translateY(12px) rotate(-8deg); }
.sw-note-turn  { left: 43%; top: 50%;  font-size: clamp(0.72rem, 1.75vw, 1.24rem); transform: translateY(12px) rotate(-5deg); }

/* ---- SOFTWARE ANIMATION ---- */
@keyframes swIn      { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes swCardIn  { to { opacity: 1; transform: translate(-50%, -50%) translateX(0); } }
@keyframes swRowIn   { to { opacity: 1; } }
@keyframes swTickIn  { to { transform: scale(1); } }
@keyframes swBar     { to { height: var(--b); } }
@keyframes swDraw    { to { stroke-dashoffset: 0; } }
@keyframes swFade    { to { opacity: 1; } }
@keyframes swNote1   { to { opacity: 1; transform: translateY(0) rotate(-8deg); } }
@keyframes swNote2   { to { opacity: 1; transform: translateY(0) rotate(-5deg); } }
@keyframes swFloat   { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }

.active-visual .sw-device { animation: swIn 0.95s cubic-bezier(0.16,1,0.3,1) 0.1s both; }

.active-visual .sw-card {
  animation: swCardIn 0.62s cubic-bezier(0.34,1.4,0.64,1) both, swFloat 5.5s ease-in-out infinite;
  animation-delay: calc(0.55s + var(--i) * 0.12s), calc(2.3s + var(--i) * 0.45s);
}

.active-visual .sw-bars i { animation: swBar 0.5s cubic-bezier(0.34,1.4,0.64,1) both; }
.active-visual .sw-bars i:nth-child(1) { animation-delay: 1.2s; }
.active-visual .sw-bars i:nth-child(2) { animation-delay: 1.32s; }
.active-visual .sw-bars i:nth-child(3) { animation-delay: 1.44s; }

/* Checklist ek-ek karke tick hoti hai */
.active-visual .sw-check-row {
  animation: swRowIn 0.4s ease-out both;
  animation-delay: calc(1.25s + var(--i) * 0.16s);
}
.active-visual .sw-tick {
  animation: swTickIn 0.42s cubic-bezier(0.34,1.7,0.64,1) both;
  animation-delay: calc(1.38s + var(--i) * 0.16s);
}

.active-visual .sw-note-build { animation: swNote1 0.6s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.active-visual .sw-note-turn  { animation: swNote2 0.6s cubic-bezier(0.16,1,0.3,1) 1.3s both; }
.active-visual .sw-arrow      { animation: swDraw 0.5s ease-out 1.8s both; }
.active-visual .sw-swoosh     { animation: swDraw 0.8s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(1.5s + var(--i) * 0.18s); }
.active-visual .sw-spark      { animation: swFade 0.4s ease-out both; animation-delay: calc(1.05s + var(--i) * 0.15s); }

.sw-card:hover { box-shadow: 0 22px 40px rgba(18,100,244,0.22), 0 3px 8px rgba(5,5,5,0.08); }

@media (prefers-reduced-motion: reduce) {
  .active-visual .sw-device, .active-visual .sw-card, .active-visual .sw-note,
  .active-visual .sw-spark, .active-visual .sw-check-row { animation: none; opacity: 1; }
  .active-visual .sw-device { transform: none; }
  .active-visual .sw-card { transform: translate(-50%, -50%); }
  .active-visual .sw-tick { animation: none; transform: scale(1); }
  .active-visual .sw-bars i { animation: none; height: var(--b); }
  .active-visual .sw-swoosh, .active-visual .sw-arrow { animation: none; stroke-dashoffset: 0; }
  .active-visual .sw-note-build { transform: rotate(-8deg); }
  .active-visual .sw-note-turn { transform: rotate(-5deg); }
}

/* ==========================================================================
   LIVE WEB STAGE
   ========================================================================== */

.wb-stage { position: relative; width: 100%; aspect-ratio: 1112 / 1080; }
.wb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.wb-device {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.wb-swoosh { fill: none; stroke: #1E7BF5; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.wb-arrow  { fill: none; stroke: #13307A; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.wb-spark  { fill: none; stroke: #1447D6; stroke-width: 9; stroke-linecap: round; opacity: 0; }

.wb-card {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) translateX(-16px);
  opacity: 0;
  display: flex; align-items: center; gap: 9%;
  padding: 4.5% 5%;
  width: max-content; max-width: 30%;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(5,5,5,0.13), 0 2px 6px rgba(5,5,5,0.07);
  transition: box-shadow 0.35s ease;
}

.wb-card-right { transform: translate(-50%, -50%) translateX(16px); }

.wb-ico { flex: 0 0 auto; width: clamp(19px, 2.25vw, 34px); height: clamp(19px, 2.25vw, 34px); color: #111; }
.wb-name { font-size: clamp(0.48rem, 1.12vw, 0.82rem); font-weight: 600; color: #111; line-height: 1.16; white-space: nowrap; }
.wb-bars { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 2px; height: clamp(13px, 1.6vw, 23px); }
.wb-bars i { display: block; width: clamp(3px, 0.4vw, 6px); height: 0; border-radius: 2px; background: #111; }

.wb-note {
  position: absolute; opacity: 0; transform: translateY(12px);
  font-family: var(--font-handwriting); font-weight: 700;
  line-height: 1.05; color: #13307A; white-space: nowrap;
}
.wb-note-ideas { left: 78%; top: 5%;  font-size: clamp(0.85rem, 2.05vw, 1.46rem); transform: translateY(12px) rotate(-7deg); }
.wb-note-built { left: 87.5%; top: 63.5%; font-size: clamp(0.72rem, 1.75vw, 1.24rem); transform: translateY(12px) rotate(-6deg); }

@keyframes wbIn     { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wbCardIn { to { opacity: 1; transform: translate(-50%, -50%) translateX(0); } }
@keyframes wbBar    { to { height: var(--b); } }
@keyframes wbDraw   { to { stroke-dashoffset: 0; } }
@keyframes wbFade   { to { opacity: 1; } }
@keyframes wbNote1  { to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
@keyframes wbNote2  { to { opacity: 1; transform: translateY(0) rotate(-6deg); } }
@keyframes wbFloat  { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }

.active-visual .wb-device { animation: wbIn 0.95s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.active-visual .wb-card {
  animation: wbCardIn 0.62s cubic-bezier(0.34,1.4,0.64,1) both, wbFloat 5.5s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i) * 0.15s), calc(2.3s + var(--i) * 0.5s);
}
.active-visual .wb-bars i { animation: wbBar 0.5s cubic-bezier(0.34,1.4,0.64,1) both; }
.active-visual .wb-bars i:nth-child(1) { animation-delay: 1.25s; }
.active-visual .wb-bars i:nth-child(2) { animation-delay: 1.37s; }
.active-visual .wb-bars i:nth-child(3) { animation-delay: 1.49s; }
.active-visual .wb-note-ideas { animation: wbNote1 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.active-visual .wb-note-built { animation: wbNote2 0.6s cubic-bezier(0.16,1,0.3,1) 1.35s both; }
.active-visual .wb-arrow  { animation: wbDraw 0.5s ease-out 1.85s both; }
.active-visual .wb-swoosh { animation: wbDraw 0.85s cubic-bezier(0.16,1,0.3,1) 1.55s both; }
.active-visual .wb-spark  { animation: wbFade 0.4s ease-out both; animation-delay: calc(1.05s + var(--i) * 0.14s); }

.wb-card:hover { box-shadow: 0 22px 40px rgba(18,100,244,0.22), 0 3px 8px rgba(5,5,5,0.08); }

@media (prefers-reduced-motion: reduce) {
  .active-visual .wb-device, .active-visual .wb-card,
  .active-visual .wb-note, .active-visual .wb-spark { animation: none; opacity: 1; }
  .active-visual .wb-device { transform: none; }
  .active-visual .wb-card { transform: translate(-50%, -50%); }
  .active-visual .wb-bars i { animation: none; height: var(--b); }
  .active-visual .wb-swoosh, .active-visual .wb-arrow { animation: none; stroke-dashoffset: 0; }
  .active-visual .wb-note-ideas { transform: rotate(-7deg); }
  .active-visual .wb-note-built { transform: rotate(-6deg); }
}

/* Right side cards container se bahar ja rahe the */
.wb-note-built { left: 82%; top: 63.5%; }
.wb-note-ideas { left: 76%; }

.wb-note-ideas { left: 79%; top: 4%; }
.wb-note-built { left: 84%; top: 67%; }

/* 4-line headline wali slides ke liye mobile par extra jagah */
@media (max-width: 992px) { .slides-text-container { min-height: 540px; } }
@media (max-width: 640px) { .slides-text-container { min-height: 540px; } }

/* ==========================================================================
   MARKETING — VECTOR LAPTOP + DASHBOARD
   Poora device ab SVG hai, isliye har hissa alag animate hota hai.
   ========================================================================== */

.mkt-vector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Purani photo ab use nahi ho rahi */
.mkt-device { display: none; }

.mkt-slab    { opacity: 0; transform-origin: 556px 790px; }
.mkt-laptop  { opacity: 0; transform-origin: 556px 620px; }

.mkt-stat-label { font: 600 19px var(--font-main); fill: #8A93A2; }
.mkt-stat-value { font: 800 44px var(--font-main); fill: #0B0D10; letter-spacing: -0.02em; }
.mkt-stat-delta { font: 700 17px var(--font-main); fill: #16A34A; }
.mkt-delta-blue { fill: var(--color-blue-primary); }
.mkt-stat-sub   { font: 500 15px var(--font-main); fill: #9AA3B2; }
.mkt-axis text  { font: 500 15px var(--font-main); fill: #A6AEBC; text-anchor: middle; }

.mkt-stat { opacity: 0; }

.mkt-grid line { stroke: #E9EDF3; stroke-width: 2; stroke-dasharray: 540; stroke-dashoffset: 540; }

.mkt-line {
  fill: none;
  stroke: var(--color-blue-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.mkt-area { opacity: 0; }

.mkt-dots circle {
  fill: #FFFFFF;
  stroke: var(--color-blue-primary);
  stroke-width: 4.5;
  opacity: 0;
  transform-origin: center;
}

.mkt-axis { opacity: 0; }

/* ---- Sequence ---- */
@keyframes mktSlabIn  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mktLidIn   { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mktStatIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mktDotIn   { to { opacity: 1; } }
@keyframes mktAreaIn  { to { opacity: 1; } }

.active-visual .mkt-slab   { animation: mktSlabIn 0.75s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.active-visual .mkt-laptop { animation: mktLidIn 0.85s cubic-bezier(0.16,1,0.3,1) 0.2s both; }

.active-visual .mkt-stat {
  animation: mktStatIn 0.55s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: calc(0.75s + var(--i) * 0.12s);
  transform-box: fill-box;
}

.active-visual .mkt-grid line { animation: mktDraw 0.6s ease-out 0.9s both; }
.active-visual .mkt-line      { animation: mktDraw 1.5s cubic-bezier(0.22,1,0.36,1) 1.15s both; }
.active-visual .mkt-area      { animation: mktAreaIn 0.9s ease-out 1.65s both; }
.active-visual .mkt-axis      { animation: mktAreaIn 0.5s ease-out 1.1s both; }

.active-visual .mkt-dots circle {
  animation: mktDotIn 0.32s ease-out both;
  animation-delay: calc(1.35s + var(--i) * 0.19s);
}

@media (prefers-reduced-motion: reduce) {
  .active-visual .mkt-slab, .active-visual .mkt-laptop, .active-visual .mkt-stat,
  .active-visual .mkt-area, .active-visual .mkt-axis,
  .active-visual .mkt-dots circle { animation: none; opacity: 1; transform: none; }
  .active-visual .mkt-line, .active-visual .mkt-grid line { animation: none; stroke-dashoffset: 0; }
}

/* Vector ke side edges soft — slab ka hard rectangle na dikhe */
.mkt-vector {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.mkt-shadow { opacity: 0; }
.active-visual .mkt-shadow { animation: mktAreaIn 0.7s ease-out 0.7s both; }

/* Notes laptop ke upar na chadhein */
.mkt-note-scale { left: 82%; top: 6%; }
.mkt-note-turn  { left: 33%; top: 46%; }

.mkt-plant { fill: none; stroke: none; opacity: 0; }
.active-visual .mkt-plant { animation: mktAreaIn 0.9s ease-out 1.9s both; }
.mkt-card { max-width: 27%; }

/* ==========================================================================
   DIAGONAL SCROLLING RIBBONS (upar aur neeche)
   Blue band jo tirchi hai aur usme text lagataar chalta rehta hai.
   ========================================================================== */

.ticker {
  position: relative;
  z-index: 5;
  width: 112%;
  margin-left: -6%;
  overflow: hidden;
  background-color: #1E4FF5;
  padding: 14px 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(18, 100, 244, 0.16);
}

.ticker-top    { transform: rotate(-2.2deg); margin-top: -6px; margin-bottom: 26px; }
.ticker-bottom { transform: rotate(2deg); margin-top: 40px; margin-bottom: -6px; }

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 38s linear infinite;
}

.ticker-track-reverse { animation-name: tickerScrollReverse; animation-duration: 44s; }

.ticker-row {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
  white-space: nowrap;
}

.tk-bold {
  font-family: var(--font-main);
  font-size: clamp(1.05rem, 1.9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-transform: uppercase;
}

.tk-script {
  font-family: var(--font-handwriting);
  font-size: clamp(1.1rem, 2.1vw, 2rem);
  font-weight: 700;
  color: #B9CEFF;
}

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

@media (max-width: 640px) {
  .ticker { padding: 10px 0; }
  .ticker-row { gap: 28px; padding-right: 28px; }
  .ticker-top { margin-bottom: 18px; }
  .ticker-bottom { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Tirchi hone ki wajah se band ka kona upar nikal jaata tha — jagah do */
.ticker-top { margin-top: 34px; }

/* Ribbon ke tirche kone kat na jayein — dono taraf jagah */
.ticker-top    { margin-top: 50px; margin-bottom: 10px; }
.ticker-bottom { margin-top: 18px; margin-bottom: 46px; }

/* Ribbons ke baad hero ko itni height ki zarurat nahi rahi */
.hero-section { min-height: auto; padding: 8px 0 24px 0; }

/* Mobile par har slide apni height le — fixed height se gap bach jaata tha */
@media (max-width: 992px) {
  .slides-text-container { min-height: 0; }
  .slide-text-item.active-slide { position: relative; }
}

@media (max-width: 992px) {
  .hero-slider-nav { margin-top: 26px; }
}

/* ==========================================================================
   STICKY HEADER
   Logo aur nav upar chipke rehte hain, scroll karne par blur + shadow.
   ========================================================================== */

/* Header scroll par chhota hota hai, isse page ki lambai badalti hai
   aur browser ka scroll-anchoring scroll ko wapas kheench leta hai — us
   tug-of-war se header kaanpta tha. Anchoring band, JS me do alag nishaan. */
html, body { overflow-anchor: none; }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              box-shadow 0.35s ease, border-color 0.35s ease, height 0.35s var(--ease-premium);
}

.header.is-stuck {
  /* Scroll par header ko thos rakha hai. Pehle 0.82 tha, to neeche se
     guzarta colourful content header me se chamakta tha. */
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px) saturate(0.82);
  -webkit-backdrop-filter: blur(18px) saturate(0.82);
  box-shadow: 0 8px 26px rgba(5, 5, 5, 0.07);
  border-bottom-color: rgba(5, 5, 5, 0.06);
  height: 74px;
}

/* ==========================================================================
   SERVICES DROPDOWN
   ========================================================================== */

.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

/* Caret ab apna alag button hai — "Services" text seedha page par le jaata hai */
.dropdown-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  transition: color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}

.dropdown-caret-btn:hover { color: var(--color-blue-primary); }
.dropdown-caret-btn:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 2px; }

.dropdown-caret { transition: transform 0.3s var(--ease-premium); }
.nav-item-dropdown.is-open .dropdown-caret { transform: rotate(180deg); }
.nav-item-dropdown.is-open .dropdown-toggle,
.nav-item-dropdown.is-open .dropdown-caret-btn { color: var(--color-blue-primary); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 340px;
  padding: 10px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(5, 5, 5, 0.06);
  box-shadow: 0 24px 50px rgba(5, 5, 5, 0.13), 0 4px 10px rgba(5, 5, 5, 0.05);

  /* band state */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(0.97);
  transform-origin: top center;
  transition:
    opacity 0.28s var(--ease-premium),
    transform 0.34s var(--ease-premium),
    visibility 0s linear 0.34s;
}

/* Chhota sa pointer */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: #FFFFFF;
  border-left: 1px solid rgba(5, 5, 5, 0.06);
  border-top: 1px solid rgba(5, 5, 5, 0.06);
  border-radius: 3px 0 0 0;
}

/* Toggle aur menu ke beech ka gap hover me na toote */
.dropdown-menu::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.nav-item-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 0.28s var(--ease-premium),
    transform 0.34s var(--ease-premium),
    visibility 0s linear 0s;
}

/* ---- Items ---- */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;

  opacity: 0;
  transform: translateY(9px);
}

.nav-item-dropdown.is-open .dropdown-item {
  animation: ddItemIn 0.42s var(--ease-premium) both;
  animation-delay: calc(0.06s + var(--i) * 0.045s);
}

@keyframes ddItemIn { to { opacity: 1; transform: translateY(0); } }

.dropdown-item:hover { background: #F2F6FE; }

/* Aakhri item — poore services page ka raasta */
.dd-item-all {
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid rgba(5, 5, 5, 0.07);
  border-radius: 0 0 12px 12px;
}

.dd-ico-all { background: var(--color-text-main); color: #FFFFFF; }
.dropdown-item:hover .dd-ico-all { background: var(--color-blue-primary); }

.dd-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s var(--ease-premium);
}

.dd-ico svg { width: 19px; height: 19px; }

.dropdown-item:hover .dd-ico {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.06);
}

.dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-text strong { font-size: 0.875rem; font-weight: 700; color: var(--color-text-main); }
.dd-text small  { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }

.dd-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--color-blue-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-premium);
}

.dropdown-item:hover .dd-arrow { opacity: 1; transform: translateX(0); }

.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--color-blue-primary);
  outline-offset: 2px;
}

/* Mobile: menu ke andar hi khul jaye */
@media (max-width: 992px) {
  .dropdown-menu {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 4px 0 0 0;
    display: none;
  }
  .dropdown-menu::before, .dropdown-menu::after { display: none; }
  .nav-item-dropdown.is-open .dropdown-menu { display: block; transform: none; }
  .nav-item-dropdown { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item-dropdown.is-open .dropdown-item { animation: none; opacity: 1; transform: none; }
  .dropdown-menu { transition: opacity 0.01ms linear, visibility 0s; }
}

/* Header ko flex container banane se andar ka wrapper shrink ho raha tha —
   ab header block hai aur wrapper khud center hota hai. */
.header { display: block; }

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1380px;
  height: 100%;
  margin-inline: auto;
}

.nav-menu { flex: 0 0 auto; white-space: nowrap; }
.brand-logo { flex: 0 0 auto; }
.nav-menu > * { flex: 0 0 auto; }
.nav-link { white-space: nowrap; }

/* ==========================================================================
   HEADER LAYOUT — ek jagah se pura control (purane rules override karke)
   ========================================================================== */

.header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  height: 90px;
}

.header-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 90%;
  max-width: 1380px;
  height: 100%;
  margin: 0 auto;
}

/* Desktop par nav hamesha ek line me — mobile wale rules yahan na lagein */
@media (min-width: 993px) {
  .nav-menu,
  .nav-menu.is-open {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
    width: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    left: auto;
    right: auto;
    top: auto;
  }
  .mobile-menu-toggle { display: none; }
}

.nav-menu > * { flex: 0 0 auto; }
.nav-link { white-space: nowrap; }

/* ==========================================================================
   HEADER SABSE UPAR, RIBBON USKE NEECHE
   ========================================================================== */

/* Ab ribbon header ke neeche hai, isliye upar itni jagah ki zarurat nahi */
.ticker-top {
  margin-top: 26px;
  margin-bottom: 14px;
}

/* Header page ke bilkul top par chipka rahega */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 92px;
}

/* Scroll par compact ho jaye */
.header.is-stuck { height: 74px; }

/* Logo aur nav dono vertically center */
.header-container { align-items: center; }

.brand-logo { justify-content: center; gap: 3px; }
.brand-name { line-height: 1.1; }
.brand-tagline { line-height: 1.1; }

@media (max-width: 992px) {
  .header { height: 74px; }
  .header.is-stuck { height: 66px; }
  .ticker-top { margin-top: 18px; margin-bottom: 10px; }
}

/* Ribbon tirchi hai — header ke neeche na ghuse isliye poori clearance */
.ticker-top { margin-top: 40px; margin-bottom: 16px; }

@media (max-width: 992px) {
  .ticker-top { margin-top: 30px; margin-bottom: 12px; }
}

/* ==========================================================================
   LOGO — bada, thoda neeche, aur nav ke saath aligned
   ========================================================================== */

.header { height: 112px; }
.header.is-stuck { height: 88px; }

/* Poori row thodi neeche — logo aur nav dono saath me shift hote hain */
.header-container { padding-top: 10px; }
.header.is-stuck .header-container { padding-top: 4px; }

.brand-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.brand-name {
  font-size: clamp(1.32rem, 1.78vw, 1.68rem);
  font-weight: 900;
  letter-spacing: -0.022em;
  line-height: 1;
}

.brand-tagline {
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: 0;
}

/* Nav bhi thoda bada taaki logo ke saath balance rahe */
.nav-link { font-size: 1rem; }
.nav-btn-contact { padding: 10px 22px; }

@media (max-width: 992px) {
  .header { height: 88px; }
  .header.is-stuck { height: 76px; }
  .header-container { padding-top: 6px; }
  .brand-name { font-size: 1.26rem; }
  .brand-tagline { font-size: 0.64rem; letter-spacing: 0.17em; }
}

/* ==========================================================================
   HEADLINE TYPOGRAPHY — display grotesque + italic serif accent
   Pehli lines heavy sans me, aur blue wali line italic serif me —
   ye contrast headline ko generic ke bajaye designed feel deta hai.
   ========================================================================== */

:root {
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, sans-serif;
  --font-accent: 'Instrument Serif', 'Instrument Fallback', Georgia, 'Times New Roman', serif;
}

.hero-headline {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.headline-line { padding-bottom: 0.04em; }

/* Blue wali line — italic serif, bada aur thoda optical adjust */
.hero-headline .text-blue {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1.14em;
  letter-spacing: -0.012em;
  text-transform: none;
  padding-right: 0.06em;
}

/* Serif italic ke liye line ki height thodi zyada chahiye */
.headline-line:has(.text-blue) { line-height: 1.02; padding-bottom: 0.1em; }

/* ---- Hand-drawn underline (flat blue bar ki jagah) ---- */
.blue-underline {
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: 0.02em;
  width: auto;
  height: 0.2em;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C 38 4.2, 74 11.6, 110 6.4 S 172 3.8, 197 8.2' fill='none' stroke='%231264F4' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  z-index: -1;
}

/* Serif accent ab Title Case me hai — spacing aur size dobara tune */
.hero-headline .text-blue {
  font-size: 1.22em;
  letter-spacing: -0.005em;
}

.headline-line:has(.text-blue) {
  line-height: 0.92;
  padding-bottom: 0.14em;
  margin-top: -0.02em;
}

.blue-underline {
  left: 0.01em;
  right: 0.05em;
  bottom: 0.12em;
  height: 0.16em;
}

/* Underline ab baseline ke neeche — text ko cross na kare */
.blue-underline { bottom: -0.04em; height: 0.15em; }

/* Lambi accent line wrap ho to underline sirf aakhri word ke neeche */
.ul-wrap { position: relative; display: inline-block; }

/* Headline thodi compact — 4 line wali slide bhi fit ho jaye */
.hero-headline { font-size: clamp(2.75rem, 5.15vw, 4.2rem); }
.hero-headline .text-blue { font-size: 1.16em; }

/* ==========================================================================
   HERO ALIGNMENT FIXES
   ========================================================================== */

/* 1) Grid me 46%+54% ke saath 40px gap jodne se right column container se
      40px bahar nikal raha tha. fr units me gap apne aap adjust hota hai. */
.hero-container {
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 40px;
  align-items: start;
}

/* 2) Text upar se start ho aur dots hamesha column ke bottom par —
      pehle chhoti slides par text aur dots ke beech badi khaali jagah bachti thi. */
.hero-left {
  position: relative;
  justify-content: flex-start;
  min-height: 100%;
  padding-bottom: 34px;
}

.slides-text-container { min-height: 0; }

.hero-slider-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: 0;
}

/* 3) Divider aur tags poori column width lein, taaki upar wale text se
      line-up karein */
.hero-micro-services { max-width: 100%; }

/* Visual bhi upar se align ho */
.hero-right { align-self: start; }

@media (max-width: 992px) {
  .hero-container { grid-template-columns: minmax(0, 1fr); }
  .hero-left { padding-bottom: 0; min-height: 0; }
  .hero-slider-nav { position: static; margin-top: 26px; }
  .hero-micro-services { max-width: 600px; }
}

/* Headline ribbon ke neeche se comfortable clearance le */
.hero-section { padding-top: 26px; }

@media (max-width: 992px) { .hero-section { padding-top: 14px; } }

/* Left ka text block column me vertically center — visual ke saath balance rahe.
   Dots neeche pinned hi rahenge, isliye padding-bottom unke liye reserve hai. */
.hero-left {
  justify-content: center;
  padding-bottom: 46px;
}

/* Slides absolute hain, isliye container ko poori height do aur har slide
   ke content ko uske andar vertically center karo. */
.hero-left { justify-content: stretch; padding-bottom: 0; }

.slides-text-container {
  position: relative;
  height: 100%;
  min-height: 0;
}

.slide-text-item,
.slide-text-item.active-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

@media (max-width: 992px) {
  .slides-text-container { height: auto; }
  .slide-text-item.active-slide { position: relative; inset: auto; padding-bottom: 0; }
}

/* height:100% resolve nahi ho raha tha — flex se poori height bharwao */
.hero-left { justify-content: flex-start; }

.slides-text-container {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

@media (max-width: 992px) {
  .slides-text-container { flex: 0 0 auto; }
}

/* Padding hatao taaki text ka center visual ke center se exactly mile —
   dots absolute hain, isliye overlap nahi hoga. */
@media (min-width: 993px) {
  .slide-text-item,
  .slide-text-item.active-slide { padding-bottom: 0; }
}

/* ==========================================================================
   HORIZONTAL OVERFLOW FIX
   body par overflow-x:hidden kaam nahi karta — wo viewport ko propagate ho
   jaata hai aur body khud visible reh jaati hai. Isliye html par bhi chahiye.
   Iske bina page side me scroll hota tha aur sab kuch off-center dikhta tha.
   ========================================================================== */

/* clip = hidden jaisa hi clip karta hai, par scroll container nahi banata.
   hidden se html/body scroll container ban jaate the aur header ka
   position:sticky kaam karna band kar deta tha. Purane browsers clip ko
   ignore kar denge aur upar wali hidden line par reh jayenge. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

/* 100vw scrollbar ki width bhi count karta hai — isliye 100% */
.bg-dotted-texture { width: 100%; }

/* Visual apni poori column width le — taaki uska right edge nav ke
   right edge se exactly line-up kare. Height width ke saath scale hoti hai. */
@media (min-width: 993px) {
  .hero-right {
    height: auto;
    aspect-ratio: 1 / 0.97;
  }

  .image-frame { width: 100%; max-width: 100%; }
}

/* ==========================================================================
   WORK PORTFOLIO
   ========================================================================== */

.portfolio {
  position: relative;
  z-index: 10;
  padding: 96px 0 24px;
}

.pf-container {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
}

/* ---- Section head ---- */
.pf-head { max-width: 760px; margin-bottom: 42px; }

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pf-eyebrow svg { width: 15px; height: 15px; }

.pf-title {
  margin: 20px 0 16px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--color-text-main);
}

.pf-title-accent {
  position: relative;
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1.18em;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-blue-primary);
  z-index: 0;
}

.pf-underline {
  position: absolute;
  left: 0.01em;
  right: 0.04em;
  bottom: -0.02em;
  height: 0.16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C 38 4.2, 74 11.6, 110 6.4 S 172 3.8, 197 8.2' fill='none' stroke='%231264F4' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
}

.pf-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 620px;
}

/* ---- Filter chips ---- */
.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.pf-chip {
  padding: 10px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-text-main);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, transform 0.28s var(--ease-premium);
}

.pf-chip:hover { border-color: var(--color-blue-primary); color: var(--color-blue-primary); }

.pf-chip.is-active {
  background: var(--color-text-main);
  border-color: var(--color-text-main);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.pf-chip:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 2px; }

/* ---- Grid ---- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.pf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(5, 5, 5, 0.06);
  box-shadow: 0 10px 26px rgba(5, 5, 5, 0.06);
  overflow: hidden;
  cursor: pointer;

  opacity: 0;
  transform: translateY(26px);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.pf-card.is-in {
  animation: pfCardIn 0.6s var(--ease-premium) both;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes pfCardIn { to { opacity: 1; transform: translateY(0); } }

.pf-card:hover {
  box-shadow: 0 26px 52px rgba(18, 100, 244, 0.16), 0 4px 10px rgba(5, 5, 5, 0.06);
  border-color: rgba(18, 100, 244, 0.22);
}

/* Filter se hide */
.pf-card.is-hidden { display: none; }

/* ---- Thumbnail ---- */
.pf-thumb {
  position: relative;
  aspect-ratio: 320 / 200;
  padding: 16px;
  background: linear-gradient(150deg, #EEF3FD 0%, #F7F9FC 55%, #EAF0FA 100%);
  border-bottom: 1px solid rgba(5, 5, 5, 0.05);
  overflow: hidden;
}

.pf-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.55s var(--ease-premium);
}

.pf-card:hover .pf-thumb svg { transform: scale(1.045); }

.pf-thumb-brand { background: linear-gradient(150deg, #F2F3F6 0%, #FAFBFC 60%, #ECEEF2 100%); }
.pf-thumb-flow  { background: linear-gradient(150deg, #EAF6FF 0%, #F7FBFF 55%, #E6F1FD 100%); }

/* Thumbnail ke parts */
.pf-sk        { fill: #DCE2EC; }
.pf-sk2       { fill: #E6EAF1; }
.pf-sk-dark   { fill: #1A1D22; }
.pf-sk-blue   { fill: var(--color-blue-primary); }
.pf-sk-blue-fill { fill: var(--color-blue-primary); }
.pf-sk-green  { fill: #25D366; }
.pf-sk-photo  { fill: #C6CEDB; }
.pf-dot       { fill: #C2C9D4; }
.pf-node      { fill: #FFFFFF; stroke: var(--color-blue-primary); stroke-width: 3.5; }
.pf-line      { fill: none; stroke: var(--color-blue-primary); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.pf-fill      { fill: rgba(18, 100, 244, 0.14); }
.pf-bar       { fill: #CBD3E0; }
.pf-bar-hi    { fill: var(--color-blue-primary); }
.pf-dash      { fill: none; stroke: #2B2B2B; stroke-width: 2.6; stroke-dasharray: 5 6; stroke-linecap: round; }
.pf-loop      { fill: none; stroke: #2FA8F5; stroke-width: 4; stroke-linecap: round; }
.pf-sw1       { fill: var(--color-blue-primary); }
.pf-sw2       { fill: #1A1D22; }
.pf-sw3       { fill: #CBD3E0; }
.pf-mark      { fill: #FFFFFF; font: 800 26px var(--font-main); text-anchor: middle; letter-spacing: -0.02em; }

/* ---- Card body ---- */
.pf-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 22px 22px;
}

.pf-tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: #F1F4F9;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pf-name {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--color-text-main);
}

.pf-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pf-stats {
  display: flex;
  gap: 18px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pf-stats strong {
  display: block;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--color-blue-primary);
  letter-spacing: -0.02em;
}

/* ---- Corner arrow ---- */
.pf-go {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-text-main);
  box-shadow: 0 6px 16px rgba(5, 5, 5, 0.12);
  opacity: 0;
  transform: translate(6px, -6px) scale(0.85);
  transition: opacity 0.32s ease, transform 0.42s var(--ease-premium),
              background 0.32s ease, color 0.32s ease;
}

.pf-go svg { width: 19px; height: 19px; }

.pf-card:hover .pf-go {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  background: var(--color-blue-primary);
  color: #FFFFFF;
}

/* ---- Note ---- */
.pf-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.pf-note svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ==========================================================================
   CLIENT STRIP  (Who we ran it for)
   ========================================================================== */

.cl-strip { margin-top: 54px; }

.cl-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.cl-strip-label,
.cl-strip-link {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cl-strip-label { color: var(--color-text-muted); }

.cl-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-blue-primary);
  text-decoration: none;
  transition: gap 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
}

.cl-strip-link svg { width: 14px; height: 14px; }
.cl-strip-link:hover { gap: 11px; opacity: 0.82; }
.cl-strip-link:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 3px; }

/* ---- Row: hairline gaps card ke beech divider ka kaam karte hain ---- */
.cl-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(5, 5, 5, 0.07);
  border-radius: 6px;
  overflow: hidden;
}

.cl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 20px;
  min-height: 200px;
  background: #F7FAFC;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

/* Top accent bar - hover par poori width tak khulti hai */
.cl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-blue-primary);
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-premium);
}

.cl-card:hover { background: #FFFFFF; }
.cl-card:hover::before { transform: scaleX(1); }
.cl-card:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: -2px; }

.cl-num {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #94A3B8;
}

.cl-name {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
}

.cl-cat {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.cl-count {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.cl-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  transition: background 0.3s var(--ease-premium), color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.cl-go svg { width: 15px; height: 15px; }

.cl-card:hover .cl-go {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

/* ---- Reveal ---- */
.cl-strip-head,
.cl-card { opacity: 0; transform: translateY(16px); }

.portfolio.is-in .cl-strip-head { animation: pfCardIn 0.6s var(--ease-premium) 0.1s both; }
.portfolio.is-in .cl-card {
  animation: pfCardIn 0.6s var(--ease-premium) calc(0.18s + var(--i) * 0.08s) both;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .cl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cl-strip { margin-top: 38px; }
  .cl-strip-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cl-row { grid-template-columns: minmax(0, 1fr); }
  .cl-card { min-height: 0; padding: 22px 20px 18px; }
  .cl-foot { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-strip-head, .cl-card { opacity: 1; transform: none; animation: none; }
  .cl-card::before { transform: scaleX(1); }
}

/* ---- Section head reveal ---- */
.pf-head > *, .pf-filters {
  opacity: 0;
  transform: translateY(18px);
}

.portfolio.is-in .pf-eyebrow  { animation: pfCardIn 0.55s var(--ease-premium) 0.05s both; }
.portfolio.is-in .pf-title    { animation: pfCardIn 0.6s var(--ease-premium) 0.13s both; }
.portfolio.is-in .pf-sub      { animation: pfCardIn 0.6s var(--ease-premium) 0.22s both; }
.portfolio.is-in .pf-meta     { animation: pfCardIn 0.6s var(--ease-premium) 0.3s both; }
.portfolio.is-in .pf-filters  { animation: pfCardIn 0.6s var(--ease-premium) 0.3s both; }
.portfolio.is-in .pf-underline { animation: pfSweep 0.6s var(--ease-premium) 0.55s both; }

@keyframes pfSweep { to { transform: scaleX(1); } }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .portfolio { padding: 64px 0 16px; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pf-filters { gap: 8px; }
  .pf-chip { padding: 9px 16px; font-size: 0.84rem; }
  .pf-go { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-head > *, .pf-filters { opacity: 1; transform: none; animation: none; }
  .pf-underline { transform: scaleX(1); animation: none; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  position: relative;
  z-index: 10;
  padding: 92px 0 10px;
}

.sv-container {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
}

/* ---- Head ---- */
.sv-head { max-width: 760px; margin-bottom: 46px; }

.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sv-eyebrow svg { width: 15px; height: 15px; }

.sv-title {
  margin: 20px 0 16px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--color-text-main);
}

.sv-title-accent {
  position: relative;
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  font-size: 1.18em;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-blue-primary);
  z-index: 0;
}

.sv-underline {
  position: absolute;
  left: 0.01em;
  right: 0.04em;
  bottom: -0.02em;
  height: 0.16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C 38 4.2, 74 11.6, 110 6.4 S 172 3.8, 197 8.2' fill='none' stroke='%231264F4' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
}

.sv-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 620px;
}

/* ---- Grid ---- */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 28px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(5, 5, 5, 0.06);
  box-shadow: 0 10px 26px rgba(5, 5, 5, 0.05);
  cursor: pointer;
  overflow: hidden;

  opacity: 0;
  transform: translateY(26px);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-premium);
}

.sv-card.is-in {
  animation: svCardIn 0.6s var(--ease-premium) both;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes svCardIn { to { opacity: 1; transform: translateY(0); } }

.sv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(18, 100, 244, 0.16), 0 4px 10px rgba(5, 5, 5, 0.05);
  border-color: rgba(18, 100, 244, 0.22);
}

/* Hover par upar se blue wash */
.sv-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-blue-primary), #38BDF8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-premium);
}

.sv-card:hover::before { transform: scaleX(1); }

.sv-num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #EDF1F7;
  letter-spacing: -0.04em;
  transition: color 0.35s ease;
}

.sv-card:hover .sv-num { color: var(--color-blue-secondary); }

.sv-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  transition: background 0.32s ease, color 0.32s ease, transform 0.42s var(--ease-premium);
}

.sv-ico svg { width: 24px; height: 24px; }

.sv-card:hover .sv-ico {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: translateY(-3px) rotate(-6deg);
}

.sv-name {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text-main);
}

.sv-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.sv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.sv-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-main);
}

.sv-list svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  padding: 2px;
  border-radius: 50%;
  background: var(--color-blue-primary);
  color: #FFFFFF;
  stroke-width: 3.5;
}

.sv-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-blue-primary);
}

.sv-go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--ease-premium);
}

.sv-card:hover .sv-go svg { transform: translateX(5px); }

/* ---- CTA card ---- */
.sv-card-cta {
  background: linear-gradient(150deg, #101318 0%, #1B2230 60%, #16233F 100%);
  border-color: rgba(255, 255, 255, 0.08);
  justify-content: center;
}

.sv-card-cta .sv-name { color: #FFFFFF; }
.sv-card-cta .sv-desc { color: rgba(255, 255, 255, 0.66); }
.sv-card-cta:hover { box-shadow: 0 26px 52px rgba(5, 5, 5, 0.28); }

.sv-ico-light {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.sv-card-cta:hover .sv-ico-light { background: var(--color-blue-primary); color: #FFFFFF; }

.sv-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: #0B0D10;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-premium);
}

.sv-cta-btn svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-premium); }
.sv-cta-btn:hover { background: var(--color-blue-primary); color: #FFFFFF; }
.sv-cta-btn:hover svg { transform: translateX(5px); }

/* ---- Head reveal ---- */
.sv-head > * { opacity: 0; transform: translateY(18px); }

.services.is-in .sv-eyebrow { animation: svCardIn 0.55s var(--ease-premium) 0.05s both; }
.services.is-in .sv-title   { animation: svCardIn 0.6s var(--ease-premium) 0.13s both; }
.services.is-in .sv-sub     { animation: svCardIn 0.6s var(--ease-premium) 0.22s both; }
.services.is-in .sv-underline { animation: svSweep 0.6s var(--ease-premium) 0.5s both; }

@keyframes svSweep { to { transform: scaleX(1); } }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .services { padding: 62px 0 6px; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sv-card { padding: 26px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-card, .sv-head > * { opacity: 1; transform: none; animation: none; }
  .sv-underline { transform: scaleX(1); animation: none; }
}

/* ==========================================================================
   SECTION SPACING — gaps kam aur consistent
   ========================================================================== */

/* Ribbon ke baad itni badi khaali jagah ki zarurat nahi thi */
.ticker-bottom { margin-top: 16px; margin-bottom: 32px; }

.services { padding: 44px 0 8px; }

/* Services se Portfolio ka break */
.portfolio { padding: 56px 0 60px; }

@media (max-width: 720px) {
  .ticker-bottom { margin-top: 12px; margin-bottom: 24px; }
  .services  { padding: 34px 0 6px; }
  .portfolio { padding: 44px 0 48px; }
}

/* ==========================================================================
   SERVICES — CREATIVE ANIMATION LAYER
   ========================================================================== */

/* ---- Peeche dheere drift karte blurred blobs ---- */
.services { position: relative; overflow: hidden; }

.services::before,
.services::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.services::before {
  width: 460px; height: 460px;
  top: -120px; left: -140px;
  background: radial-gradient(circle, rgba(18,100,244,0.20), rgba(18,100,244,0) 70%);
  animation: svBlobA 16s ease-in-out infinite;
}

.services::after {
  width: 400px; height: 400px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(56,189,248,0.20), rgba(56,189,248,0) 70%);
  animation: svBlobB 21s ease-in-out infinite;
}

@keyframes svBlobA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(70px, 50px) scale(1.14); }
}
@keyframes svBlobB {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-60px,-46px) scale(1.18); }
}

.sv-container { position: relative; z-index: 1; }
.sv-grid { perspective: 1100px; }

/* ---- Card reveal: neeche se 3D me khulta hai ---- */
.sv-card {
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes svCardIn {
  from {
    opacity: 0;
    transform: perspective(1000px) translateY(34px) rotateX(11deg) scale(0.955);
  }
  to {
    opacity: 1;
    /* Final state me variables — isliye hover ka tilt isi ke andar chalta hai */
    transform:
      perspective(1000px)
      translateY(var(--lift, 0px))
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      scale(var(--sc, 1));
  }
}

/* Hover ka lift ab CSS transform se nahi, variable se hota hai */
.sv-card:hover { transform: none; }

/* ---- Cursor follow spotlight ---- */
.sv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(18, 100, 244, 0.13),
    rgba(18, 100, 244, 0) 62%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.sv-card:hover::after { opacity: 1; }

.sv-card > * { position: relative; z-index: 1; }

/* ---- Checklist ek-ek karke tick hoti hai ---- */
.sv-list li {
  opacity: 0;
  transform: translateX(-8px);
}

.sv-card.is-in .sv-list li {
  animation: svTickIn 0.42s var(--ease-premium) both;
  animation-delay: calc(var(--i) * 0.08s + 0.4s + var(--li) * 0.1s);
}

@keyframes svTickIn { to { opacity: 1; transform: translateX(0); } }

.sv-list svg { transform: scale(0.4); }

.sv-card.is-in .sv-list li svg {
  animation: svTickPop 0.4s cubic-bezier(0.34, 1.7, 0.64, 1) both;
  animation-delay: calc(var(--i) * 0.08s + 0.48s + var(--li) * 0.1s);
}

@keyframes svTickPop { to { transform: scale(1); } }

/* ---- Number slide-in ---- */
.sv-num {
  opacity: 0;
  transform: translateX(14px);
}

.sv-card.is-in .sv-num {
  animation: svNumIn 0.5s var(--ease-premium) both;
  animation-delay: calc(var(--i) * 0.08s + 0.28s);
}

@keyframes svNumIn { to { opacity: 1; transform: translateX(0); } }

/* ---- Har icon ka apna idle motion ---- */
.sv-card:nth-child(1) .sv-ico svg { animation: svWiggle 4.4s ease-in-out infinite; transform-origin: 55% 60%; }
.sv-card:nth-child(2) .sv-ico svg { animation: svNib 5.2s ease-in-out infinite; transform-origin: 70% 30%; }
.sv-card:nth-child(3) .sv-ico svg { animation: svBeat 3.8s ease-in-out infinite; }
.sv-card:nth-child(4) .sv-ico svg { animation: svSpin 11s linear infinite; }
.sv-card:nth-child(5) .sv-ico svg { animation: svBeat 3.2s ease-in-out infinite; }

@keyframes svWiggle {
  0%, 72%, 100% { transform: rotate(0deg); }
  78%  { transform: rotate(-11deg); }
  84%  { transform: rotate(9deg); }
  90%  { transform: rotate(-5deg); }
}

@keyframes svNib {
  0%, 68%, 100% { transform: rotate(0deg) translateY(0); }
  78%  { transform: rotate(-14deg) translateY(-2px); }
  88%  { transform: rotate(6deg) translateY(1px); }
}

@keyframes svBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

@keyframes svSpin { to { transform: rotate(360deg); } }

/* AI wale icon ke around pulsing ring */
.sv-card:nth-child(5) .sv-ico {
  position: relative;
  animation: svRing 3.2s ease-in-out infinite;
}

@keyframes svRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 100, 244, 0.28); }
  55%      { box-shadow: 0 0 0 11px rgba(18, 100, 244, 0); }
}

/* ---- Hover par arrow aur ::before line pehle se hain, thoda aur ---- */
.sv-card:hover .sv-go { letter-spacing: 0.01em; }
.sv-go { transition: letter-spacing 0.35s var(--ease-premium); }

/* ---- CTA card ka button shimmer ---- */
.sv-card-cta { overflow: hidden; }

.sv-cta-btn { position: relative; overflow: hidden; }

.sv-cta-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(18,100,244,0.22), transparent);
  animation: svShimmer 3.6s ease-in-out infinite;
}

@keyframes svShimmer {
  0%, 62% { left: -70%; }
  100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .services::before, .services::after,
  .sv-ico svg, .sv-card:nth-child(5) .sv-ico,
  .sv-cta-btn::before { animation: none; }
  .sv-list li, .sv-num { opacity: 1; transform: none; animation: none; }
  .sv-list svg { transform: scale(1); animation: none; }
}

/* `.sv-card > *` wale rule ne .sv-num ka absolute position tod diya tha —
   isliye number card ke top-left me flow me aa gaya tha. */
.sv-num {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
}

/* Tilt thoda subtle */
.sv-card { transition: box-shadow 0.4s ease, border-color 0.4s ease; }

/* ==========================================================================
   SERVICE DETAIL MODAL
   ========================================================================== */

.sd-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sd-overlay[hidden] { display: none; }

.sd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sd-overlay.is-open .sd-backdrop { opacity: 1; }

.sd-panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 40px 90px rgba(5, 5, 5, 0.28);
  overflow: hidden;

  opacity: 0;
  transform: translateY(28px) scale(0.965);
  transition: opacity 0.4s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.sd-overlay.is-open .sd-panel { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Close ---- */
.sd-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.28s ease, transform 0.35s var(--ease-premium);
}

.sd-close svg { width: 19px; height: 19px; }
.sd-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

/* ---- Head ---- */
.sd-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 32px;
  background: linear-gradient(135deg, #101318 0%, #17203044 0%, #101822 55%, #13253F 100%);
  background-color: #101318;
  color: #FFFFFF;
}

.sd-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--color-blue-primary);
  color: #FFFFFF;
}

.sd-ico svg { width: 28px; height: 28px; }

.sd-head-text { min-width: 0; }

.sd-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.48);
}

.sd-title {
  margin: 4px 0 5px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.12rem;
  color: #8FB6FF;
}

/* ---- Scroll body ---- */
.sd-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 32px 8px;
}

.sd-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

/* ---- Stats ---- */
.sd-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.sd-stat {
  padding: 16px 18px;
  border-radius: 14px;
  background: #F4F7FC;
  border: 1px solid rgba(5, 5, 5, 0.05);
}

.sd-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-blue-primary);
  line-height: 1.05;
}

.sd-stat span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- Columns ---- */
.sd-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-bottom: 26px;
}

.sd-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-main);
}

.sd-col-title svg { width: 16px; height: 16px; color: var(--color-blue-primary); }

.sd-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.sd-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-main);
}

.sd-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-blue-primary);
}

.sd-steps { list-style: none; counter-reset: sd; display: flex; flex-direction: column; gap: 12px; }

.sd-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  counter-increment: sd;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-main);
}

.sd-steps li::before {
  content: counter(sd);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  font-size: 0.74rem;
  font-weight: 800;
}

/* ---- Fit chips ---- */
.sd-block { margin-bottom: 26px; }

.sd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.sd-chips li {
  padding: 8px 14px;
  border-radius: 999px;
  background: #F1F4F9;
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-main);
}

/* ---- Footer ---- */
.sd-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 32px 26px;
  border-top: 1px solid var(--color-border);
  background: #FFFFFF;
}

.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-premium);
}

.sd-btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease-premium); }

.sd-btn-primary { background: var(--color-blue-primary); color: #FFFFFF; }
.sd-btn-primary:hover { background: #0A52D4; transform: translateY(-2px); }
.sd-btn-primary:hover svg { transform: translateX(5px); }

.sd-btn-ghost { background: #F1F4F9; color: var(--color-text-main); }
.sd-btn-ghost:hover { background: #E6ECF6; transform: translateY(-2px); }

/* ---- Content stagger ---- */
.sd-overlay .sd-scroll > *,
.sd-overlay .sd-foot > * {
  opacity: 0;
  transform: translateY(14px);
}

.sd-overlay.is-open .sd-scroll > *,
.sd-overlay.is-open .sd-foot > * {
  animation: sdIn 0.5s var(--ease-premium) both;
}

.sd-overlay.is-open .sd-intro  { animation-delay: 0.14s; }
.sd-overlay.is-open .sd-stats  { animation-delay: 0.2s; }
.sd-overlay.is-open .sd-cols   { animation-delay: 0.27s; }
.sd-overlay.is-open .sd-block  { animation-delay: 0.34s; }
.sd-overlay.is-open .sd-foot > * { animation-delay: 0.4s; }

@keyframes sdIn { to { opacity: 1; transform: translateY(0); } }

/* Stat tiles apni baari se */
.sd-overlay.is-open .sd-stat {
  animation: sdIn 0.45s var(--ease-premium) both;
  animation-delay: calc(0.26s + var(--i) * 0.07s);
}

/* Body scroll lock */
body.sd-locked { overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 780px) {
  .sd-overlay { padding: 12px; }
  .sd-panel { max-height: 92vh; border-radius: 18px; }
  .sd-head { padding: 24px 22px; gap: 14px; }
  .sd-ico { width: 52px; height: 52px; border-radius: 15px; }
  .sd-ico svg { width: 24px; height: 24px; }
  .sd-scroll { padding: 22px 22px 6px; }
  .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sd-foot { padding: 16px 22px 20px; }
  .sd-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-panel, .sd-backdrop { transition: opacity 0.01ms linear; transform: none; }
  .sd-overlay .sd-scroll > *, .sd-overlay .sd-foot > *, .sd-overlay .sd-stat {
    opacity: 1; transform: none; animation: none;
  }
}

/* Modal header ka gradient saaf karo */
.sd-head {
  background-image: linear-gradient(135deg, #0F1319 0%, #131C28 48%, #14294A 100%);
}

/* ==========================================================================
   CONTACT — phone aur WhatsApp
   ========================================================================== */

/* Header ka call link */
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  text-decoration: none;
}

.nav-call-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-premium);
}

.nav-call-ico svg { width: 17px; height: 17px; }

.nav-call:hover .nav-call-ico {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: rotate(-12deg) scale(1.06);
}

.nav-call-text { display: flex; flex-direction: column; line-height: 1.15; }

.nav-call-text small {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-call-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  white-space: nowrap;
}

.nav-call:hover .nav-call-text strong { color: var(--color-blue-primary); }

/* Connect tab ab link hai */
.connect-tab { text-decoration: none; display: block; }

/* Modal ka call button */
.sd-btn-call {
  background: #E8F7EE;
  color: #12703C;
}

.sd-btn-call:hover { background: #25D366; color: #FFFFFF; transform: translateY(-2px); }
.sd-btn-call svg { width: 16px; height: 16px; }

/* WhatsApp float par halka pulse — dhyan kheenche bina shor kiye */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: waPulse 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-float { position: fixed; }

/* Bade screens par hi number dikhe — chhoti screen par hamburger menu me */
@media (max-width: 1180px) and (min-width: 993px) {
  .nav-call-text small { display: none; }
  .nav-call-text strong { font-size: 0.88rem; }
}

@media (max-width: 992px) {
  .nav-call { padding: 10px 0; }
  .nav-call-text small { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; }
}

/* ==========================================================================
   FO LOGO MARK
   Original teal ki jagah theme ka blue — baaki shape wahi.
   ========================================================================== */

.fo-mark { display: block; height: auto; overflow: visible; }

.fo-f { fill: #0B0D10; }

.fo-o {
  fill: none;
  stroke: url(#foRingG);
  stroke-width: 14;
  /* Circumference ~182.2 — chhota sa gap right side par */
  stroke-dasharray: 170 12.2;
  stroke-dashoffset: -4;
  transform-origin: 95px 54px;
}

/* Header wala chhota mark */
.fo-mark-sm { width: 42px; }

@media (max-width: 992px) { .fo-mark-sm { width: 34px; } }

/* ==========================================================================
   INTRO PRELOADER
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.intro.is-done {
  opacity: 0;
  transform: translateY(-102%);
  pointer-events: none;
}

.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.fo-mark-lg { width: clamp(150px, 24vw, 250px); }

/* ---- F: left se right wipe ---- */
.fo-mark-lg .fo-f {
  clip-path: inset(0 100% 0 0);
  animation: foWipe 0.72s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.fo-mark-lg .fo-f-main { animation-delay: 0.15s; }
.fo-mark-lg .fo-f-bar  { animation-delay: 0.42s; }

@keyframes foWipe { to { clip-path: inset(0 0 0 0); } }

/* ---- O: ring khud ko draw karti hai, phir settle ---- */
.fo-mark-lg .fo-o {
  stroke-dasharray: 182.2;
  stroke-dashoffset: 182.2;
  animation:
    foDraw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both,
    foSettle 0.01s linear 1.55s both;
}

@keyframes foDraw {
  from { stroke-dashoffset: 182.2; transform: rotate(-120deg); }
  to   { stroke-dashoffset: 0;     transform: rotate(0deg); }
}

/* Draw hone ke baad asli gap wapas — logo ka signature notch */
@keyframes foSettle {
  to { stroke-dasharray: 170 12.2; stroke-dashoffset: -4; }
}

/* ---- Wordmark ---- */
.intro-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(12px);
  animation: foFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.45s both;
}

.intro-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
}

.intro-tag {
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
}

@keyframes foFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- Progress line ---- */
.intro-bar {
  width: clamp(120px, 18vw, 200px);
  height: 3px;
  border-radius: 999px;
  background: #E9EDF3;
  overflow: hidden;
  opacity: 0;
  animation: foFadeUp 0.4s ease 1.55s both;
}

.intro-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue-primary), #38BDF8);
  transform: scaleX(0);
  transform-origin: left center;
  animation: foProgress 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.5s both;
}

@keyframes foProgress { to { transform: scaleX(1); } }

/* Intro chalte waqt page scroll na ho */
body.intro-active { overflow: hidden; }

/* ---- Header ka logo ab mark ke saath ---- */
.brand-logo {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.brand-text { display: flex; flex-direction: column; gap: 5px; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  body.intro-active { overflow: auto; }
}

/* Header ke mark ka apna gradient id */
.fo-o-header { stroke: url(#foRingHeaderG); }

/* Logo par hover: ring halka ghoomta hai */
.brand-logo .fo-mark { transition: transform 0.5s var(--ease-premium); }
.brand-logo:hover .fo-o { animation: foNudge 0.7s var(--ease-premium); }

@keyframes foNudge {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Header me sirf wordmark — mark hata diya gaya hai */
.brand-logo { gap: 0; }
.brand-text { gap: 5px; }

/* ==========================================================================
   INTRO — ORIGINAL LOGO (white F + teal O, dark screen)
   Logo ka color/shape waisa hi hai jaisa design kiya gaya tha.
   ========================================================================== */

.intro {
  background: #3A3A3C;
}

.fo-mark {
  display: block;
  width: clamp(190px, 30vw, 330px);
  height: auto;
  overflow: visible;
}

.fo-f { fill: #FFFFFF; }

.fo-o {
  fill: none;
  stroke: #2A7A7A;
  stroke-width: 130;
  /* Circumference ~1822 — right side par patla sa notch */
  stroke-dasharray: 1767 55;
  stroke-dashoffset: 33;
  transform-origin: 975px 800px;
}

/* ---- F left se right wipe ---- */
.intro .fo-f {
  clip-path: inset(0 100% 0 0);
  animation: foWipe 0.72s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.intro .fo-f-main { animation-delay: 0.18s; }
.intro .fo-f-bar  { animation-delay: 0.46s; }

/* ---- O khud ko draw karti hai, phir notch aata hai ---- */
.intro .fo-o {
  stroke-dasharray: 1822;
  stroke-dashoffset: 1822;
  animation:
    foDraw 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both,
    foSettle 0.01s linear 1.65s both;
}

@keyframes foDraw {
  from { stroke-dashoffset: 1822; transform: rotate(-110deg); }
  to   { stroke-dashoffset: 0;    transform: rotate(0deg); }
}

@keyframes foSettle {
  to { stroke-dasharray: 1767 55; stroke-dashoffset: 33; }
}

/* ---- Dark screen ke liye text colors ---- */
.intro-name { color: #FFFFFF; }
.intro-accent { color: #4FB3B0; }
.intro-tag { color: rgba(255, 255, 255, 0.5); }

.intro-bar { background: rgba(255, 255, 255, 0.14); }
.intro-bar span { background: linear-gradient(90deg, #2A7A7A, #4FB3B0); }

/* Notch patla aur thoda upar — original jaisa */
.fo-o { stroke-dasharray: 1784 38; stroke-dashoffset: 20; }
@keyframes foSettle { to { stroke-dasharray: 1784 38; stroke-dashoffset: 20; } }

/* ==========================================================================
   INTRO — LOGO PAR KOI DRAW/WIPE ANIMATION NAHI
   Draw hote waqt logo adhoora dikhta tha (ring aadhi, F aadha) — yaani
   logo hi badla hua lagta tha. Ab wo hata diya: logo poora, final shape me
   hi aata hai, bas ek soft fade ke saath.
   ========================================================================== */

.intro .fo-f,
.intro .fo-o {
  animation: none !important;
  clip-path: none !important;
}

/* Ring hamesha apne final notch ke saath */
.intro .fo-o {
  stroke-dasharray: 1784 38;
  stroke-dashoffset: 20;
  transform: none;
}

/* Poora logo ek unit ki tarah soft fade-in */
.intro .fo-mark {
  opacity: 0;
  transform: translateY(10px);
  animation: foMarkIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes foMarkIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Wordmark thoda jaldi aa jaye, kyunki ab logo pe wait nahi karna */
.intro-word { animation-delay: 0.75s; }
.intro-bar  { animation-delay: 0.85s; }
.intro-bar span { animation: foProgress 1.1s cubic-bezier(0.5, 0, 0.2, 1) 0.4s both; }

@media (prefers-reduced-motion: reduce) {
  .intro .fo-mark { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   SERVICES SECTION — POLISH LAYER
   Head ka link, card ka corner arrow aur thoda richer hover.
   Baad me aata hai isliye upar ke rules par jeet jaata hai.
   ========================================================================== */

.sv-head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text-main);
  text-decoration: none;
  transition:
    background 0.35s var(--ease-premium),
    color 0.35s var(--ease-premium),
    border-color 0.35s var(--ease-premium),
    transform 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium);
}

.sv-head-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--ease-premium);
}

.sv-head-link:hover {
  background: var(--color-blue-primary);
  border-color: var(--color-blue-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--color-blue-glow);
}

.sv-head-link:hover svg { transform: translate(3px, -3px); }
.sv-head-link:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 3px; }

.services.is-in .sv-head-link { animation: svCardIn 0.6s var(--ease-premium) 0.3s both; }
.sv-head > .sv-head-link { opacity: 0; transform: translateY(18px); }

/* ---- Card ----
   Lift (translateY) yahan kaam nahi karta: .sv-card.is-in ka reveal animation
   `both` fill ke saath chalta hai, isliye uska transform lock rehta hai.
   Isliye depth shadow aur border se aati hai, transform se nahi. */
.sv-card {
  transition:
    box-shadow 0.45s var(--ease-premium),
    border-color 0.45s var(--ease-premium);
}

.sv-card:hover {
  border-color: rgba(18, 100, 244, 0.34);
  box-shadow: 0 26px 54px rgba(18, 100, 244, 0.16);
}

/* Corner arrow — hover par andar slide hota hai */
.sv-corner {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  opacity: 0;
  transform: translate(-6px, 6px) scale(0.85);
  transition:
    opacity 0.35s var(--ease-premium),
    transform 0.35s var(--ease-premium),
    background 0.35s var(--ease-premium),
    color 0.35s var(--ease-premium);
}

.sv-corner svg { width: 15px; height: 15px; }

.sv-card:hover .sv-corner {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  background: var(--color-blue-primary);
  color: #FFFFFF;
}

/* Mobile par hover nahi hota — arrow hamesha halka dikhe */
@media (hover: none) {
  .sv-corner { opacity: 0.55; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-head > .sv-head-link { opacity: 1; transform: none; animation: none; }
  .sv-corner { opacity: 1; transform: none; }
}

/* ==========================================================================
   SITE FOOTER
   Teeno page (index, work, services) par ek hi footer aata hai.
   ========================================================================== */

.site-foot {
  position: relative;
  z-index: 10;
  margin-top: 90px;
  padding: 68px 0 0;
  background: #07080C;
  color: #FFFFFF;
}

.site-foot-shell { width: min(92%, 1320px); margin: 0 auto; }

.site-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 52px;
}

/* ---- Brand block ---- */
.sf-brand-name {
  display: block;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.sf-brand-tag {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.sf-blurb {
  margin-top: 20px;
  max-width: 40ch;
  font-size: 0.93rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

.sf-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  background: var(--color-blue-primary);
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}

.sf-cta svg { width: 16px; height: 16px; }
.sf-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(18, 100, 244, 0.4); }

/* ---- Link columns ---- */
.sf-col-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.sf-links {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sf-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.3s var(--ease-premium), gap 0.3s var(--ease-premium);
}

.sf-links a svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-blue-primary); }
.sf-links a:hover { color: #FFFFFF; gap: 12px; }
.sf-links a:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 3px; }

/* ---- Bottom bar ---- */
.site-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

.site-foot-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.site-foot-bottom a:hover { color: #FFFFFF; }

@media (max-width: 900px) {
  .site-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .site-foot-top > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-foot { margin-top: 56px; padding-top: 48px; }
  .site-foot-top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 38px; }
  .sf-cta { width: 100%; justify-content: center; }
  .site-foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   NAV "CONTACT US" BUTTON
   Nav ka primary CTA — baaki links se alag dikhna chahiye.
   Baad me aata hai isliye upar ke outline wale rules par jeet jaata hai.
   ========================================================================== */

.nav-btn-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 7px;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #2E7BFF 0%, #1264F4 48%, #0B4CC9 100%);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow:
    0 6px 18px rgba(18, 100, 244, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium),
    filter 0.35s var(--ease-premium);
}

/* Hover par ek roshni ka jhonka left se right */
.nav-btn-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.34) 46%,
    transparent 72%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-premium);
}

.nav-btn-contact:hover,
.nav-btn-contact:focus-visible {
  color: #FFFFFF;
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 12px 30px rgba(18, 100, 244, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.nav-btn-contact:hover::before,
.nav-btn-contact:focus-visible::before { transform: translateX(120%); }

.nav-btn-contact:active { transform: translateY(0); }
.nav-btn-contact:focus-visible { outline: 2px solid var(--color-text-main); outline-offset: 3px; }

/* Arrow hover par thoda aage badhta hai */
.nav-btn-contact svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform 0.35s var(--ease-premium);
}

.nav-btn-contact:hover svg { transform: translateX(3px); }

/* Contact page par — dobara click karne ki zarurat nahi, bas halka ring */
.nav-btn-contact.is-current {
  box-shadow:
    0 6px 18px rgba(18, 100, 244, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 3px rgba(18, 100, 244, 0.2);
}

/* Contact page ke apne is-current rules is button par na lagein */
.contact-page .nav-btn-contact.is-current::after { display: none; }

@media (max-width: 992px) {
  .nav-btn-contact { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn-contact,
  .nav-btn-contact:hover { transform: none; }
  .nav-btn-contact::before { display: none; }
}

/* ==========================================================================
   PORTFOLIO GRID — 4 CLIENT CARDS
   3-column grid par 4 cards = doosri row me ek akela card. 4 columns se
   ek saaf row banti hai, aur tang hone par 2 par gir jaati hai.
   ========================================================================== */

@media (min-width: 1281px) {
  .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

@media (min-width: 721px) and (max-width: 1280px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* .pf-filters ka display:flex [hidden] ko haraa deta hai — isliye yeh.
   JS tab hide karta hai jab sirf ek hi category bachi ho. */
.pf-filters[hidden] { display: none !important; }

/* ==========================================================================
   HEADER — HALKA 3D
   Perspective nav par hai, transform har item par. Sirf hover/focus me
   chalta hai, idle header bilkul shaant rehta hai.
   ========================================================================== */

.header-container { perspective: 900px; }
.nav-menu { perspective: 800px; transform-style: preserve-3d; }

/* ---- Nav links: hover par thoda upar aur viewer ki taraf ---- */
.nav-menu .nav-link:not(.nav-btn-contact) {
  position: relative;
  padding: 6px 2px;
  transform-origin: center bottom;
  transition:
    transform 0.4s var(--ease-premium),
    color 0.3s var(--ease-premium);
}

.nav-menu .nav-link:not(.nav-btn-contact):hover,
.nav-menu .nav-link:not(.nav-btn-contact):focus-visible {
  transform: translateZ(16px) translateY(-1px) rotateX(9deg);
}

/* Neeche ek patli line center se khulti hai */
.nav-menu .nav-link:not(.nav-btn-contact)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease-premium);
}

.nav-menu .nav-link:not(.nav-btn-contact):hover::after,
.nav-menu .nav-link:not(.nav-btn-contact):focus-visible::after { transform: scaleX(1); }

/* Jo page khula hai uski line pehle se khuli rahe */
.nav-menu .nav-link.is-current::after { transform: scaleX(1); }

/* ---- Logo ka hover ----

   Pehle poora lockup Y-axis par ghoomta tha. Chaude wordmark par wo
   tilt skew jaisa padta tha — "MEDIA" doosri gehrai par chala jaata tha
   aur logo baaki header se kata hua lagta tha.

   Ab sab kuch apne hi tal me rehta hai: poora lockup baal bhar uthta
   hai, "MEDIA" ke neeche ek patli line baayein se khulti hai (wahi
   chaal jo nav links ki hai, isliye dono ek hi parivaar lagte hain),
   aur tagline thodi gehri ho jaati hai. */
.brand-logo {
  transform-origin: left center;
  transition: transform 0.45s var(--ease-premium);
}

.brand-logo:hover { transform: translateY(-1px); }

/* "MEDIA" ke neeche line — nav link wali hi chaal */
.brand-name .text-blue { position: relative; }

.brand-name .text-blue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-premium);
}

.brand-logo:hover .brand-name .text-blue::after,
.brand-logo:focus-visible .brand-name .text-blue::after { transform: scaleX(1); }

/* Tagline halki si gehri — letter-spacing ko haath nahi lagaya,
   warna logo chauda hota aur nav ko dhakel deta. */
.brand-tagline { transition: color 0.45s var(--ease-premium); }
.brand-logo:hover .brand-tagline { color: var(--color-text-main); }

/* ---- Contact button: dabane par sach me dabta hua lage ---- */
.nav-btn-contact { transform-origin: center bottom; }
.nav-btn-contact:active { transform: translateY(1px) rotateX(10deg) scale(0.985); }

/* ---- Services dropdown bhi usi depth se khule ---- */
.dropdown-menu {
  transform-origin: top center;
  transform: translateX(-50%) translateY(-10px) rotateX(-10deg) scale(0.97);
}

.nav-item-dropdown.is-open .dropdown-menu {
  transform: translateX(-50%) translateY(0) rotateX(0deg) scale(1);
}

/* Touch devices par hover atakta hai — wahan 3D band */
@media (hover: none) {
  .nav-menu .nav-link:not(.nav-btn-contact):hover,
  .brand-logo:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu .nav-link:not(.nav-btn-contact),
  .nav-menu .nav-link:not(.nav-btn-contact):hover,
  .brand-logo, .brand-logo:hover,
  .nav-btn-contact:active { transform: none; }
  .brand-name .text-blue::after { display: none; }
  .dropdown-menu { transform: translateX(-50%); }
  .nav-item-dropdown.is-open .dropdown-menu { transform: translateX(-50%); }
}

/* ==========================================================================
   SERVICES CARDS — REDESIGN LAYER
   Pehle ye cards generic feature-grid jaise lagte the (chhota number, blue
   check circles, flat footer). Ab editorial treatment: bada serif watermark
   number, hairline feature rows aur ek proper footer bar.
   Sabse aakhir me hai isliye upar ke teeno .sv- layers par jeet jaata hai.
   ========================================================================== */

.sv-grid { gap: 22px; }

.sv-card {
  padding: 32px 30px 26px;
  border-radius: 22px;
  border: 1px solid #E8ECF2;
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.04);
  gap: 0;
}

/* Hover lift keyframe ke --lift variable se hota hai, transform se nahi —
   warna reveal animation ka `both` fill use lock kar deta hai. */
.sv-card:hover { --lift: -6px; }

.sv-card:hover {
  border-color: rgba(18, 100, 244, 0.30);
  box-shadow: 0 28px 56px rgba(18, 100, 244, 0.15), 0 4px 12px rgba(5, 5, 5, 0.04);
}

/* Top accent — hover par poori width */
.sv-card::before { height: 3px; }

/* Purana corner arrow ab bade number se takrata tha */
.sv-corner { display: none; }

/* ---- Watermark number ---- */
.sv-num {
  top: 18px;
  right: 26px;
  font-family: 'Instrument Serif', 'Instrument Fallback', Georgia, serif;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #EDF1F7;
  transition: color 0.4s var(--ease-premium);
}
.sv-card:hover .sv-num { color: rgba(18, 100, 244, 0.20); }

/* ---- Icon ---- */
.sv-ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(18, 100, 244, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sv-card:hover .sv-ico {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(18, 100, 244, 0.28);
  border-color: var(--color-blue-primary);
}

/* ---- Text ---- */
.sv-name {
  margin-top: 20px;
  font-size: 1.24rem;
  letter-spacing: -0.03em;
}

.sv-desc {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ---- Feature rows: hairline separated, halka check ---- */
.sv-list {
  gap: 0;
  margin-top: 22px;
  padding-top: 4px;
  border-top: 0;
}

.sv-list li {
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid #EDF1F7;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.sv-list svg {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-blue-primary);
  stroke-width: 3;
}

/* ---- Footer bar ---- */
.sv-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sv-go svg {
  width: 32px;
  height: 32px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  transition: background 0.35s var(--ease-premium), color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.sv-card:hover .sv-go svg {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: translate(3px, -3px) rotate(-45deg);
}

/* ---- CTA card ---- */
.sv-card-cta {
  background:
    radial-gradient(520px circle at 80% 0%, rgba(18, 100, 244, 0.34), transparent 62%),
    linear-gradient(155deg, #0B0D12 0%, #141A26 100%);
  border-color: rgba(255, 255, 255, 0.10);
  justify-content: center;
  padding: 34px 30px;
}

/* Film grain — baaki dark bands jaisa hi */
.sv-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.55;
  pointer-events: none;
}

.sv-card-cta::before { display: none; }

.sv-card-cta .sv-name { margin-top: 22px; font-size: 1.3rem; }
.sv-card-cta .sv-desc { color: rgba(255, 255, 255, 0.62); }

.sv-ico-light {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.sv-card-cta:hover .sv-ico-light {
  box-shadow: 0 10px 24px rgba(18, 100, 244, 0.4);
  border-color: var(--color-blue-primary);
}

.sv-cta-btn {
  width: 100%;
  margin-top: 26px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 620px) {
  .sv-card { padding: 26px 24px 22px; }
  .sv-num { font-size: 2.8rem; right: 22px; }
  .sv-name { font-size: 1.14rem; }
}

/* WhatsApp ka asli mark inline SVG hai (lucide me ye icon nahi hai).
   Glyph 24x24 box me thoda chhota lagta hai, isliye size bada kiya. */
.whatsapp-icon { width: 29px; height: 29px; }

@media (max-width: 640px) {
  .whatsapp-icon { width: 26px; height: 26px; }
}

/* ==========================================================================
   SERVICE DETAIL MODAL — CREATIVE REFRESH
   Editorial layout: aurora header, watermark number, timeline steps,
   gradient stat tiles, glass footer.
   ========================================================================== */

/* ---- Overlay / backdrop ---- */
.sd-overlay { padding: 28px; }

.sd-backdrop {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20, 41, 74, 0.55) 0%, rgba(8, 11, 18, 0.78) 60%),
    rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ---- Panel ---- */
.sd-panel {
  width: min(980px, 100%);
  max-height: min(88vh, 860px);
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow:
    0 30px 60px -20px rgba(6, 12, 26, 0.45),
    0 70px 140px -40px rgba(6, 12, 26, 0.55);
  transform: translateY(40px) scale(0.94);
  transition:
    opacity 0.45s var(--ease-premium),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Thin gradient ring */
.sd-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(11, 92, 255, 0.35) 45%, rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}

/* ---- Header: aurora + watermark ---- */
.sd-head {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  gap: 20px;
  padding: 38px 38px 34px;
  overflow: hidden;
  background-image: linear-gradient(140deg, #0A0D13 0%, #0E1724 45%, #10233F 100%);
}

/* Aurora blobs */
.sd-head::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 200%;
  background:
    radial-gradient(38% 45% at 18% 25%, rgba(11, 92, 255, 0.42) 0%, transparent 65%),
    radial-gradient(34% 40% at 82% 18%, rgba(79, 179, 176, 0.32) 0%, transparent 68%),
    radial-gradient(45% 50% at 62% 95%, rgba(11, 92, 255, 0.20) 0%, transparent 70%);
  filter: blur(6px);
  animation: sdAurora 16s ease-in-out infinite alternate;
  z-index: -2;
}

@keyframes sdAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

/* Ghost watermark number */
.sd-head::after {
  content: attr(data-watermark);
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(7rem, 15vw, 11rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* Icon tile — glow + depth */
.sd-ico {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(145deg, #2B7BFF 0%, var(--color-blue-primary) 55%, #0847B8 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 14px 30px -10px rgba(11, 92, 255, 0.75);
}

.sd-ico::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 92, 255, 0.45) 0%, transparent 70%);
  z-index: -1;
  animation: sdGlow 3.4s ease-in-out infinite;
}

@keyframes sdGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

.sd-ico svg { width: 30px; height: 30px; }

/* Eyebrow with rule */
.sd-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.sd-num::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent);
}

.sd-title {
  margin: 10px 0 8px;
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 55%, #9FC4FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sd-tagline {
  font-size: 1.05rem;
  color: #7FA9F5;
}

/* ---- Close ---- */
.sd-close {
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sd-close:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: rotate(90deg) scale(1.05);
}

/* ---- Scroll body ---- */
.sd-scroll {
  padding: 34px 38px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 92, 255, 0.3) transparent;
}

.sd-scroll::-webkit-scrollbar { width: 8px; }
.sd-scroll::-webkit-scrollbar-track { background: transparent; }
.sd-scroll::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid #FFFFFF;
  background: rgba(11, 92, 255, 0.28);
}
.sd-scroll::-webkit-scrollbar-thumb:hover { background: rgba(11, 92, 255, 0.5); }

/* Lead paragraph — accent rule */
.sd-intro {
  position: relative;
  padding-left: 20px;
  margin-bottom: 30px;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--color-text-main);
}

.sd-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--color-blue-primary), rgba(11, 92, 255, 0.12));
}

/* ---- Stat tiles ---- */
.sd-stats { gap: 14px; margin-bottom: 34px; }

.sd-stat {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F6FD 100%);
  border: 1px solid rgba(11, 92, 255, 0.12);
  box-shadow: 0 6px 18px -12px rgba(11, 92, 255, 0.5);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s ease, border-color 0.4s ease;
}

.sd-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-primary), #4FB3B0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-premium);
}

.sd-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 92, 255, 0.3);
  box-shadow: 0 18px 34px -18px rgba(11, 92, 255, 0.55);
}

.sd-stat:hover::before { transform: scaleX(1); }

.sd-stat strong {
  font-size: 1.85rem;
  background: linear-gradient(120deg, var(--color-blue-primary), #3E9FD6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sd-stat span {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Two columns + divider ---- */
.sd-cols {
  position: relative;
  gap: 38px;
  margin-bottom: 32px;
}

.sd-cols::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border) 15%, var(--color-border) 85%, transparent);
}

.sd-col-title {
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

.sd-col-title svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 8px;
  background: var(--color-blue-secondary);
}

/* ---- Checklist ---- */
.sd-list { gap: 13px; }

.sd-list li {
  position: relative;
  gap: 12px;
  font-size: 0.93rem;
  line-height: 1.55;
}

.sd-list li::before {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(11, 92, 255, 0.14), rgba(79, 179, 176, 0.18));
  box-shadow: 0 0 0 1px rgba(11, 92, 255, 0.14) inset;
}

.sd-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--color-blue-primary);
  border-bottom: 2px solid var(--color-blue-primary);
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* ---- Steps as a timeline ---- */
.sd-steps { gap: 0; }

.sd-steps li {
  position: relative;
  gap: 16px;
  padding: 0 0 20px 0;
  font-size: 0.93rem;
  line-height: 1.55;
}

.sd-steps li:last-child { padding-bottom: 0; }

.sd-steps li::before {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(11, 92, 255, 0.22);
  color: var(--color-blue-primary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  box-shadow: 0 4px 12px -6px rgba(11, 92, 255, 0.6);
  transition: background 0.35s ease, color 0.35s ease, transform 0.4s var(--ease-premium);
}

/* Connector line */
.sd-steps li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(11, 92, 255, 0.28), rgba(11, 92, 255, 0.06));
}

.sd-steps li:last-child::after { display: none; }

.sd-steps li:hover::before {
  background: var(--color-blue-primary);
  color: #FFFFFF;
  transform: scale(1.08);
}

/* ---- Fit chips ---- */
.sd-block { margin-bottom: 30px; }

.sd-chips { gap: 10px; }

.sd-chips li {
  padding: 9px 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px -4px rgba(6, 12, 26, 0.18);
  font-size: 0.84rem;
  transition: transform 0.35s var(--ease-premium), border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.sd-chips li:hover {
  transform: translateY(-2px);
  background: var(--color-blue-secondary);
  border-color: rgba(11, 92, 255, 0.3);
  color: var(--color-blue-primary);
}

/* ---- Footer: glass ---- */
.sd-foot {
  gap: 14px;
  padding: 20px 38px 24px;
  border-top: 1px solid rgba(6, 12, 26, 0.07);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sd-btn {
  position: relative;
  overflow: hidden;
  padding: 15px 26px;
  font-size: 0.9rem;
}

/* Sheen sweep on hover */
.sd-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-premium);
  pointer-events: none;
}

.sd-btn:hover::before { transform: translateX(120%); }

.sd-btn-primary {
  background: linear-gradient(135deg, #2B7BFF 0%, var(--color-blue-primary) 60%, #0847B8 100%);
  box-shadow: 0 12px 26px -12px rgba(11, 92, 255, 0.85);
}

.sd-btn-primary:hover {
  background: linear-gradient(135deg, #3D87FF 0%, #0A52D4 60%, #073C9E 100%);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(11, 92, 255, 0.95);
}

.sd-btn-ghost {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.sd-btn-ghost:hover {
  background: #F4F7FD;
  border-color: rgba(11, 92, 255, 0.28);
  color: var(--color-blue-primary);
  transform: translateY(-3px);
}

.sd-btn-call {
  border: 1px solid rgba(18, 112, 60, 0.18);
  box-shadow: 0 10px 22px -14px rgba(37, 211, 102, 0.9);
}

.sd-btn-call:hover { transform: translateY(-3px); }

/* ---- Entrance choreography ---- */
.sd-overlay.is-open .sd-scroll > *,
.sd-overlay.is-open .sd-foot > * {
  animation: sdIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sd-overlay.is-open .sd-intro  { animation-delay: 0.16s; }
.sd-overlay.is-open .sd-stats  { animation-delay: 0.22s; }
.sd-overlay.is-open .sd-cols   { animation-delay: 0.3s; }
.sd-overlay.is-open .sd-block  { animation-delay: 0.38s; }
.sd-overlay.is-open .sd-foot > * { animation-delay: 0.46s; }

.sd-overlay.is-open .sd-stat {
  animation: sdIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.28s + var(--i) * 0.08s);
}

/* ---- Responsive ---- */
@media (max-width: 780px) {
  .sd-overlay { padding: 12px; }
  .sd-panel { border-radius: 22px; max-height: 93vh; }
  .sd-head { padding: 26px 22px 24px; gap: 14px; }
  .sd-head::after { font-size: 6rem; right: 10px; }
  .sd-ico { width: 54px; height: 54px; border-radius: 16px; }
  .sd-ico svg { width: 25px; height: 25px; }
  .sd-close { top: 16px; right: 16px; width: 36px; height: 36px; }
  .sd-scroll { padding: 24px 22px 6px; }
  .sd-intro { font-size: 1rem; padding-left: 16px; }
  .sd-cols::before { display: none; }
  .sd-foot { padding: 16px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-head::before, .sd-ico::before { animation: none; }
  .sd-btn::before { display: none; }
}

/* ==========================================================================
   PORTFOLIO CARDS — ab poora card ek link hai (work.html?brand=...)
   ========================================================================== */

.pf-card {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.45s var(--ease-premium);
}

.pf-card:hover { transform: translateY(-6px); }
.pf-card:active { transform: translateY(-2px); }

.pf-card:focus-visible {
  outline: 2px solid var(--color-blue-primary);
  outline-offset: 3px;
}

/* Card link hai, isliye arrow bhi hover par thoda aage badhe */
.pf-card:hover .pf-go svg { transform: translate(2px, -2px); }
.pf-go svg { transition: transform 0.35s var(--ease-premium); }

/* Card ka naam hover par accent le le — clickable lage */
.pf-card:hover .pf-name { color: var(--color-blue-primary); }
.pf-name { transition: color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .pf-card:hover, .pf-card:active { transform: none; }
}

/* ==========================================================================
   PORTFOLIO THUMB — CLIENT LOGO TILE
   Client ka logo ek rounded badge ki tarah tile par baithta hai. Logos ka
   shape alag-alag hai (Shobha square, Gliss wide) aur tile hamesha chaudi
   hai — stretch ya crop karne ke bajaye badge hi logo ke naap ka ban jaata
   hai. Har card apne vars deta hai:

     --pf-brand-bg   tile ka rang (logo ke background se milta hua)
     --pf-logo-ar    logo ka aspect ratio, jaise 1 ya 1693/929
     --pf-logo-w     badge ki chaudai, tile ke % me

   Logo file na mile to .no-logo lag jaata hai aur purana skeleton
   illustration wapas dikhne lagta hai.
   ========================================================================== */

.pf-thumb-logo {
  display: grid;
  place-items: center;
  padding: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 60%),
    var(--pf-brand-bg, #0B0B0B);
}

/* Light logo par white glow nahi chalta — wahan halki dark vignette */
.pf-thumb-logo.is-light {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0.05) 0%, transparent 60%),
    var(--pf-brand-bg, #F4F6FA);
}

/* Logo milte hi neeche wala illustration hat jaata hai */
.pf-thumb-logo svg { display: none; }

.pf-logo {
  position: relative;
  /* Width se size lo — tile ki height aspect-ratio se aati hai, isliye
     percentage height yahan resolve nahi hoti. */
  width: var(--pf-logo-w, 46%);
  height: auto;
  aspect-ratio: var(--pf-logo-ar, 1);
  display: block;
  object-fit: cover;
  /* Round mark wale logo 50% radius de dete hain, warna rounded square */
  border-radius: var(--pf-logo-radius, 16px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 34px -14px rgba(0, 0, 0, 0.9);
  transition: transform 0.6s var(--ease-premium), box-shadow 0.5s ease;
}

.is-light .pf-logo {
  box-shadow:
    0 0 0 1px rgba(20, 16, 5, 0.09),
    0 16px 30px -16px rgba(70, 55, 20, 0.5);
}

.pf-card:hover .pf-logo {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 24px 44px -14px rgba(0, 0, 0, 0.95);
}

.pf-card:hover .is-light .pf-logo {
  box-shadow:
    0 0 0 1px rgba(20, 16, 5, 0.16),
    0 22px 38px -16px rgba(70, 55, 20, 0.6);
}

/* Tile ke neeche halka fade — card body se juda hua lage */
.pf-thumb-logo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.pf-thumb-logo.is-light::after {
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(120, 95, 30, 0.06));
}

/* ---- Logo na mile to purana illustration ---- */
.pf-thumb-logo.no-logo {
  display: block;
  padding: 16px;
  background: linear-gradient(150deg, #EEF3FD 0%, #F7F9FC 55%, #EAF0FA 100%);
}

.pf-thumb-logo.no-logo .pf-logo { display: none; }
.pf-thumb-logo.no-logo svg { display: block; }
.pf-thumb-logo.no-logo::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-card:hover .pf-logo { transform: none; }
}

/* ==========================================================================
   NAV LINKS — 3D ROLL
   Har label ek cube ki upar wali face hai; hover par cube 90deg ghoomta hai
   aur neeche wali blue face saamne aa jaati hai. Text duplicate markup me
   nahi hai — ::after usi label ko data-label se uthata hai.
   ========================================================================== */

.nav-link { position: relative; }

/* Yahan pehle ek 3D roll tha — header par backdrop-filter hai, wo 3D ko
   chapta kar deta hai, isliye cube ka doosra chehra text ke neeche saaf
   dikhta tha aur naam do baar likha lagta tha. Ab sirf line rehti hai. */

/* Halki si line, hover par khinchti hai */
.nav-link:not(.nav-btn-contact)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-premium);
}

.nav-link:not(.nav-btn-contact):hover::before,
.nav-link:not(.nav-btn-contact):focus-visible::before { transform: scaleX(1); }

/* Current page ki line pehle se hai — dobara mat khinchо */
.nav-link.is-current::before { display: none; }

/* Caret ko bhi roll ke saath thoda saath dena */
.nav-item-dropdown .dropdown-caret-btn { transition: transform 0.5s var(--ease-premium); }
.nav-item-dropdown:hover .dropdown-caret-btn { transform: translateY(1px); }

/* ---- Contact pill: roll ke bajaye halka lift + sheen ---- */
.nav-btn-contact {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    background-color 0.35s ease,
    color 0.35s ease;
}

.nav-btn-contact::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.nav-btn-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(18, 100, 244, 0.32);
}

.nav-btn-contact:hover::after { animation: navSheen 0.85s var(--ease-premium) forwards; }

@keyframes navSheen {
  to { left: 120%; }
}

.nav-btn-contact svg { transition: transform 0.45s var(--ease-premium); }
.nav-btn-contact:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .nav-link::before,
  .nav-btn-contact,
  .nav-btn-contact svg { transition: none; animation: none; }
  .nav-link:hover { color: var(--color-blue-primary); }
}

/* ==========================================================================
   PORTFOLIO CARDS — POLISH LAYER
   Body me bahut khali jagah thi aur footer ka "2 / Creatives" do line me
   toot raha tha. Ab: bada naam, ek line ka footer, aur hover par brand ke
   apne rang ki halki roshni.
   ========================================================================== */

.pf-card {
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.05);
  isolation: isolate;
}

/* Brand ke apne rang ki roshni — har card ka --pf-brand-bg alag hai */
.pf-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--pf-brand-bg, transparent);
  opacity: 0;
  filter: blur(22px);
  transition: opacity 0.5s var(--ease-premium);
  pointer-events: none;
}

.pf-card:hover::after { opacity: 0.22; }

.pf-card:hover {
  box-shadow: 0 30px 60px rgba(5, 5, 5, 0.14);
  border-color: rgba(18, 100, 244, 0.28);
}

/* ---- Tile ---- */
.pf-thumb-logo { border-bottom: 0; }

/* Neeche halka sa vignette taaki tile body me ghul kar mile */
.pf-thumb-logo::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.10), transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.pf-thumb-logo.is-light::before { background: linear-gradient(to top, rgba(5, 5, 5, 0.06), transparent); }

/* ---- Body ---- */
.pf-body {
  gap: 8px;
  padding: 18px 22px 20px;
}

.pf-tag {
  padding: 5px 12px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  background: #EEF2F8;
  transition: background 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.pf-card:hover .pf-tag {
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
}

.pf-name {
  margin-top: 2px;
  font-size: 1.24rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.pf-desc {
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ---- Footer: ek hi line, count bayein, CTA dayein ---- */
.pf-stats {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #EDF1F7;
  font-size: 0.8rem;
}

.pf-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Count ab inline hai — pehle block tha isliye do line me tootta tha */
.pf-stats strong {
  display: inline;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.pf-stats::after {
  content: "See creatives";
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-primary);
  white-space: nowrap;
  opacity: 0.55;
  transform: translateX(-4px);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.pf-card:hover .pf-stats::after { opacity: 1; transform: translateX(0); }

/* ---- Corner arrow thoda aur solid ---- */
.pf-go {
  width: 42px;
  height: 42px;
  box-shadow: 0 8px 20px rgba(5, 5, 5, 0.16);
}

.pf-card:hover .pf-go { box-shadow: 0 10px 24px rgba(18, 100, 244, 0.42); }

@media (max-width: 620px) {
  .pf-name { font-size: 1.12rem; }
  .pf-stats::after { content: "Open"; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card::after,
  .pf-stats::after { transition: none; }
}

/* ==========================================================================
   REEL STAGE — shared hero component
   Services page ke stage ka aam version, taaki about/contact ke hero ki
   khaali dayein taraf bhi kaam chalta hua dikhe. Styles yahan hain (na ki
   about.css/contact.css me) taaki ek hi jagah se teeno page chale.
   ========================================================================== */

.rs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
  align-items: center;
  gap: 48px;
}

.rs-hero-copy { min-width: 0; }

.rs-stage {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 360px;
}

.rs-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #0B0D12;
  box-shadow: 0 30px 70px rgba(5, 6, 10, 0.26);
}

.rs-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s var(--ease-premium), transform 0.9s var(--ease-premium);
  pointer-events: none;
}

.rs-slide.is-live { opacity: 1; transform: none; pointer-events: auto; }

.rs-slide img,
.rs-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video tabhi dikhe jab wo sach me chal raha ho */
.rs-slide video { opacity: 0; transition: opacity 0.5s var(--ease-premium); }
.rs-slide.is-playing video { opacity: 1; }

/* Neeche scrim, taaki naam har frame par padha jaye */
.rs-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(to top, rgba(5, 6, 10, 0.88), transparent);
  pointer-events: none;
}

.rs-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
}

.rs-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.rs-meta strong {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rs-meta em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.rs-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: #05060A;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rs-badge svg { width: 13px; height: 13px; fill: currentColor; color: var(--color-blue-primary); }

.rs-next {
  position: absolute;
  top: 50%;
  right: -22px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text-main);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(5, 6, 10, 0.16);
  transform: translateY(-50%);
  transition: background 0.35s var(--ease-premium), color 0.35s var(--ease-premium),
              border-color 0.35s var(--ease-premium);
}

.rs-next svg { width: 19px; height: 19px; }

.rs-next:hover {
  background: var(--color-blue-primary);
  border-color: var(--color-blue-primary);
  color: #fff;
}

.rs-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.rs-dot {
  width: 22px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(5, 6, 10, 0.16);
  cursor: pointer;
  transition: background 0.35s var(--ease-premium), width 0.35s var(--ease-premium);
}

.rs-dot.is-on { width: 34px; background: var(--color-blue-primary); }

@media (max-width: 1024px) {
  .rs-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .rs-stage { max-width: 300px; margin-top: 8px; }
  .rs-next { right: -16px; width: 40px; height: 40px; }
}

@media (max-width: 560px) {
  .rs-stage { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-slide { transition: none; }
}

/* ==========================================================================
   WORK PORTFOLIO — CLIENT CARDS (v2)

   Pehle card chaude the aur upar ek bada logo-tile tha. Ab card khade
   hain: pehle brand ka naam bade akshar me, uske neeche client ka apna
   chhota logo, phir ek line ka parichay, uske baad blog ki jagah, aur
   sabse neeche ginti + link.

   Sab kuch .pf-v2 ke andar likha hai, isliye purane .pf-card wale rules
   in par nahi chadhte — naye markup me wo class hi nahi hai.
   ========================================================================== */

.pf-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.pf-v2 .pf-card {
  position: relative;          /* neeche wala stretched link isi par tikta hai */
  display: flex;
  flex-direction: column;
  min-height: 430px;           /* khada rakhta hai */
  padding: 26px 24px 20px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(5, 6, 10, 0.04);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium),
              box-shadow 0.45s var(--ease-premium), border-color 0.45s var(--ease-premium);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.pf-v2.is-in .pf-card,
.pf-v2 .pf-card.is-in { opacity: 1; transform: none; }

.pf-v2 .pf-card:hover {
  border-color: rgba(18, 100, 244, 0.38);
  box-shadow: 0 22px 46px rgba(5, 6, 10, 0.10);
  transform: translateY(-4px);
}

/* ---- Upar: kis kaam ka brand hai ---- */
.pf-v2 .pf-tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-blue-secondary);
  color: var(--color-blue-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Naam: sabse bada, sabse upar ---- */
.pf-v2 .pf-name {
  margin-top: 16px;
  font-size: 1.62rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--color-text-main);
}

/* ---- Naam ke neeche client ka apna logo, chhota ----
   Chip ki chaudai logo ke naap se banti hai: chauda logo chauda chip,
   chaukor logo chaukor chip. Isliye har brand apna jaisa dikhta hai. */
.pf-v2 .pf-mark {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--pf-brand-bg, #F1F5F9);
  border: 1px solid rgba(5, 6, 10, 0.06);
  overflow: hidden;
}

.pf-v2 .pf-mark img {
  height: 100%;
  width: auto;
  max-width: 196px;
  object-fit: contain;
  display: block;
}

/* ---- Ek line ka parichay ---- */
.pf-v2 .pf-desc {
  margin-top: 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ---- Blog ki jagah ----
   Abhi khali hai. Post aane par .pf-read-empty ki jagah .pf-read-link
   daal do — jagah pehle se bani hui hai, isliye card ka naap nahi badlega. */
.pf-read {
  margin-top: auto;            /* hamesha footer ke thoda upar */
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px dashed var(--color-border);
}

.pf-read-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94A3B8;
}

.pf-read-empty {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #94A3B8;
}

.pf-read-link {
  position: relative;          /* card ke stretched link ke upar rahe */
  z-index: 2;
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-main);
  text-decoration: none;
}

.pf-read-link:hover { color: var(--color-blue-primary); }

/* ---- Neeche: ginti aur link ---- */
.pf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.pf-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.pf-count strong {
  font-weight: 800;
  color: var(--color-text-main);
}

.pf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-primary);
  text-decoration: none;
}

.pf-link svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease-premium); }
.pf-v2 .pf-card:hover .pf-link svg { transform: translate(2px, -2px); }

/* Poora card clickable — bina JS ke. Blog link isse upar rehta hai
   (uspar z-index: 2 laga hai), isliye dono alag-alag kaam karte hain. */
.pf-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   CHHOTI SCREEN
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pf-v2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .pf-v2 { grid-template-columns: 1fr; gap: 14px; }
  .pf-v2 .pf-card { min-height: 0; padding: 22px 20px 18px; }
  .pf-v2 .pf-name { font-size: 1.45rem; }
  .pf-read { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-v2 .pf-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pf-v2 .pf-card:hover { transform: none; }
}

/* ==========================================================================
   CLIENT TREE
   Jad neeche baayen khune me, daaliyan nikalti hain, har sire se ek client
   latakta hai. Card ki jagah SVG ke sire se aati hai — stage ka
   aspect-ratio viewBox (1200x780) jaisa hi hai, isliye --x/--y ka
   percentage seedha us daali par baithta hai.

   Teen alag parat, jaan-bujh ke: .tr-fruit jhoolta hai, .tr-card 3D me
   uthta hai. Dono ek hi element par hote to chalti animation hover wale
   transform ko kha jaati.
   ========================================================================== */

.tr-stage {
  position: relative;
  /* Container se bahar nikal ke poore page ki chaudai — warna jad kinare
       se ~100px andar reh jaati hai aur ped tairta hua lagta hai.
  
       1520px par ruk jaata hai: page ka baaki hissa bhi rukta hai (content
       1320, heading 3rem), aur ped akela badhta rahe to wo baaki sab se
       bada dikhne lagta hai. Iske neeche har chaudai par ped kinare tak
       jaata hai. */
    width: min(100vw, 1520px);
    max-width: none;
    margin: 8px calc(50% - min(50vw, 760px)) 0;
  aspect-ratio: 1916 / 821;
  container-type: inline-size;
  perspective: 1100px;
}

.tr-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  /* Image ka apna halka neela background page ke safed se milta nahi,
     isliye upar-neeche ka kinara ghol do — warna ek seedhi lakeer dikhti hai. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* ---- Lakdi ---- */
.tr-trunk,
.tr-branch,
.tr-twig,
.tr-root {
  fill: none;
  stroke: #0F1420;
  stroke-linecap: round;
}

.tr-trunk { stroke-width: 23; stroke: url(#trBark); }
.tr-branch { stroke-width: 11; }
.tr-twig { stroke-width: 5; opacity: 0.5; }
.tr-root { stroke-width: 13; opacity: 0.45; }

/* Daaliyan scroll par ugti hain. 1400 kisi bhi path se lamba hai,
   isliye ek hi aankda sab par chal jaata hai. */
.tr-trunk, .tr-branch, .tr-twig, .tr-root {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.portfolio.is-in .tr-root   { animation: trGrow 0.7s var(--ease-premium) 0.05s forwards; }

/* Canopy ki roshni aur zameen ki chhaya */
.tr-canopy, .tr-shade { opacity: 0; }
.tr-shade { fill: rgba(5, 6, 10, 0.10); }
.portfolio.is-in .tr-canopy { animation: trFade 1.2s var(--ease-premium) 0.9s forwards; }
.portfolio.is-in .tr-shade  { animation: trFade 0.7s var(--ease-premium) 0.3s forwards; }
@keyframes trFade { to { opacity: 1; } }
.portfolio.is-in .tr-trunk  { animation: trGrow 0.9s var(--ease-premium) 0.15s forwards; }
.portfolio.is-in .tr-branch { animation: trGrow 1s var(--ease-premium) calc(0.5s + var(--b) * 0.16s) forwards; }
.portfolio.is-in .tr-twig   { animation: trGrow 0.8s var(--ease-premium) calc(0.9s + var(--b) * 0.16s) forwards; }

@keyframes trGrow { to { stroke-dashoffset: 0; } }

/* ---- Patte ---- */
.tr-leaves ellipse {
  fill: var(--color-blue-primary);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.portfolio.is-in .tr-leaves ellipse {
  animation: trLeaf 0.6s var(--ease-premium) calc(1.15s + var(--l) * 0.07s) forwards;
}

@keyframes trLeaf {
  from { opacity: 0; scale: 0.4; }
  to   { opacity: 0.22; scale: 1; }
}

/* ---- Latakta hua client ---- */
.tr-fruit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Image me baked card 182/1916 = 9.5% chaudai ka hai. cqw isliye ki
     card image ke saath hi chhota-bada ho aur usi ke upar baitha rahe. */
  width: 11.3cqw;
  margin-left: -5.65cqw;
  display: block;
  text-decoration: none;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  opacity: 0;
  z-index: 2;
}

/* Sab ek saath pop hote hain. Pehle --i se ek-ek karke aate the, to
   neeche wale do sabse aakhir me tapakte the aur page tab tak adhura
   lagta tha. */
.portfolio.is-in .tr-fruit {
  animation:
    trPop 0.62s cubic-bezier(0.34, 1.42, 0.5, 1) 0.35s both,
    trSwing 5.6s ease-in-out 0.97s infinite;
}

@keyframes trPop {
  from { opacity: 0; transform: translateY(-12px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes trSwing {
  0%, 100% { transform: rotate(-1.3deg); }
  50%      { transform: rotate(1.3deg); }
}

/* Daali se card tak ki dori */
.tr-rope {
  display: none;
  width: 1.5px;
  height: 38px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #0F1420, rgba(15, 20, 32, 0.45));
  border-radius: 2px;
}

.tr-rope::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -2.75px;
  border-radius: 50%;
  background: var(--color-blue-primary);
}

/* ---- Card ---- */
.tr-card {
  display: block;
  padding: 14px 14px 13px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(5, 6, 10, 0.12);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium),
              border-color 0.4s ease;
}

.tr-fruit:hover .tr-card {
  transform: translateZ(34px) rotateX(6deg);
  box-shadow: 0 30px 56px rgba(5, 6, 10, 0.2);
  border-color: rgba(18, 100, 244, 0.35);
}

.tr-fruit:focus-visible .tr-card {
  outline: 2px solid var(--color-blue-primary);
  outline-offset: 3px;
}

.tr-logo {
  display: grid;
  place-items: center;
  height: 54px;
  padding: 7px 12px;
  margin-bottom: 11px;
  border-radius: 10px;
  background: var(--bg, #F7FAFC);
  overflow: hidden;
}

.tr-logo img {
  /* Percent height grid item par indefinite reh jaati hai — image poori
     unchai le leti hai aur overflow use kaat deta hai. Isliye max-height
     px me (54 - 14 padding), aur baaki intrinsic. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}

/* Jiska logo nahi — naam ke do akshar, usi plate par */
.tr-mono {
  font-family: var(--font-display, inherit);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8B5E34;
}

.tr-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text-main);
}

.tr-tag {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tr-count {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #EDF1F7;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.tr-count b { color: var(--color-blue-primary); font-weight: 800; }

/* ==========================================================================
   Chhoti screen par ped ka koi matlab nahi — daali ke sire itni jagah me
   theek nahi baithte. Wahan wahi cards ek saadi grid me aa jaate hain.
   ========================================================================== */
@media (max-width: 900px) {
  .tr-stage {
    width: 100%;
    margin-inline: 0;
    aspect-ratio: auto;
    perspective: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
  }

  .tr-img { display: none; }

  .tr-fruit {
    position: static;
    width: auto;
    margin-left: 0;
    opacity: 1;
  }

  .portfolio.is-in .tr-fruit {
    animation: trPop 0.5s cubic-bezier(0.34, 1.42, 0.5, 1) 0.1s both;
  }

  .tr-rope { display: none; }
  .tr-fruit:hover .tr-card { transform: translateY(-4px); }

  /* Desktop par card ki nap cqw me hai (image ke saath scale ho). Yahan
     stage sirf ~400px chaudi hai, to cqw se text 3px ka reh jaata — isliye
     wapas px me. */
  .tr-card { padding: 14px 14px 13px; border-radius: 16px; }
  .tr-logo { height: 54px; padding: 7px 12px; margin-bottom: 11px; border-radius: 10px; }
  .tr-logo img { max-height: 40px; }
  .tr-name { font-size: 0.92rem; }
  .tr-tag { margin-top: 3px; font-size: 0.66rem; }
  .tr-count { margin-top: 10px; padding-top: 9px; font-size: 0.76rem; }
}

@media (max-width: 480px) {
  .tr-stage { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-trunk, .tr-branch, .tr-twig, .tr-root { stroke-dashoffset: 0; animation: none; }
  .tr-leaves ellipse { opacity: 0.22; animation: none; }
  .tr-canopy, .tr-shade { opacity: 1; animation: none; }
  .tr-fruit { opacity: 1; }
  .portfolio.is-in .tr-fruit { animation: none; }
}

/* Card ka poora naap image ke saath — cqw stage ki chaudai ka percent hai.
   Sirf desktop par: mobile me stage ~400px chaudi hoti hai, wahan cqw se
   text 3px ka reh jaata hai. */
@media (min-width: 901px) {
  /* Image me sabse uncha baked card 208/1916 = 10.85cqw ka hai (Shah ka
     naam do line me hai). Sab card utne hi unche, warna chhota card baked
     wale ko poora dhak nahi paata aur uska neechla hissa jhaankta hai. */
  .tr-card { padding: 0.75cqw 0.75cqw 0.7cqw; border-radius: 0.85cqw; min-height: 10.9cqw; }
  .tr-logo { height: 3.15cqw; padding: 0.38cqw 0.65cqw; margin-bottom: 0.6cqw; border-radius: 0.52cqw; }
  .tr-logo img { max-height: 2.2cqw; }
  .tr-logo { box-shadow: 0 0.16cqw 0.42cqw rgba(5, 6, 10, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
  .tr-name { font-size: 0.79cqw; }
  .tr-tag { margin-top: 0.16cqw; font-size: 0.56cqw; }
  .tr-count { margin-top: 0.55cqw; padding-top: 0.48cqw; font-size: 0.64cqw; }
}

/* Jin cards ke liye image me moti-dori nahi bani, unhe apni chahiye.
   Baaki chaar ki dori artwork me pehle se painted hai — wahan .tr-rope
   band rehti hai, warna do motiye dikhte. */
@media (min-width: 901px) {
  .tr-fruit.has-rope .tr-rope {
    display: block;
    width: 1.5px;
    height: 1.9cqw;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(70, 60, 48, 0.55), rgba(70, 60, 48, 0.28));
    border-radius: 2px;
  }

  .tr-fruit.has-rope .tr-rope::after {
    content: "";
    display: block;
    width: 0.62cqw;
    height: 0.62cqw;
    margin: -0.31cqw auto 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FFFFFF, #D8DDE4 62%, #AFB7C2);
    box-shadow: 0 0.1cqw 0.2cqw rgba(5, 6, 10, 0.28);
  }
}

/* ==========================================================================
   CLIENT TREE — CARD 3D + TAP

   Hover par card halka sa uthta hai aur uske andar ki cheezein alag
   gehrai par chali jaati hain. Asli effect click par hai: dabta hai,
   aage uchhalta hai, aur ungli ki jagah se ek lehar phailti hai.

   Pehle card cursor ke peeche lagataar ghoomta tha — wo shor lagta tha,
   isliye hover ab ek hi shaant jhukav par ruk jaata hai.
   ========================================================================== */

@media (min-width: 901px) {
  /* Apna vanishing point — stage wale se card apni jagah par nahi, poore
     stage ke beech ke hisaab se jhukta tha. */
  .tr-fruit { perspective: 680px; }

  /* Hover par jhoolna ruk jaata hai, warna uthna aur jhoolna aapas me
     ladte hain. */
  .portfolio.is-in .tr-fruit:hover { animation-play-state: paused; }

  .tr-card {
    position: relative;
    transform: translateZ(var(--tz, 0px)) rotateX(var(--rx, 0deg));
    transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium),
                border-color 0.4s ease;
  }

  .tr-fruit:hover .tr-card {
    --tz: 22px;
    --rx: 5deg;
    border-color: rgba(18, 100, 244, 0.35);
    box-shadow: 0 30px 56px rgba(5, 6, 10, 0.22);
  }

  /* ---- Andar ki parat: har cheez apni gehrai par ---- */
  .tr-logo,
  .tr-name,
  .tr-tag,
  .tr-count {
    transform: translateZ(var(--d, 0px));
    transition: transform 0.5s var(--ease-premium);
  }

  .tr-fruit:hover .tr-logo  { --d: 24px; }
  .tr-fruit:hover .tr-name  { --d: 15px; }
  .tr-fruit:hover .tr-tag   { --d: 11px; }
  .tr-fruit:hover .tr-count { --d: 8px; }

  /* Kinare par patli roshni — card ka mota-pan dikhati hai */
  .tr-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -1px 0 rgba(5, 6, 10, 0.06);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .tr-fruit:hover .tr-card::before { opacity: 1; }
}

/* ==========================================================================
   TAP — click par
   ========================================================================== */

.tr-card.is-tapped {
  animation: trTap 0.62s cubic-bezier(0.34, 1.5, 0.5, 1) both;
  border-color: var(--color-blue-primary);
  box-shadow: 0 0 0 3px rgba(18, 100, 244, 0.16),
              0 34px 62px rgba(5, 6, 10, 0.26);
}

@keyframes trTap {
  0%   { transform: translateZ(22px) rotateX(5deg) scale(1); }
  20%  { transform: translateZ(2px)  rotateX(1deg) scale(0.958); }
  52%  { transform: translateZ(58px) rotateX(-7deg) scale(1.04); }
  100% { transform: translateZ(22px) rotateX(5deg) scale(1); }
}

/* Lehar — ungli ki jagah se phailti hai. Card me overflow chhupa nahi
   hai, isliye apna gol aakar hi use rokta hai. */
.tr-ripple {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 100, 244, 0.45), rgba(18, 100, 244, 0) 70%);
  transform: scale(0);
  pointer-events: none;
  animation: trRipple 0.62s var(--ease-premium) forwards;
}

@keyframes trRipple {
  0%   { transform: scale(0); opacity: 0.9; }
  100% { transform: scale(24); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-card, .tr-logo, .tr-name, .tr-tag, .tr-count { transition: none; }
  .tr-card.is-tapped { animation: none; }
  .tr-ripple { display: none; }
}

/* ==========================================================================
   WORK PORTFOLIO — SECTION HEAD KO THODA VAJAN

   Neeche ka ped apne aap me bhara hua lagta hai, aur uske upar sirf
   teen line ka text tha — isliye sar sadaa lagta tha.

   Do cheezein jodi hain: heading ke peechhe ek bahut halki neeli roshni,
   jo neeche wale ped ke band se jaakar milti hai, aur heading ke theek
   neeche wahi ginti jiska daawa heading khud kar rahi hai.
   ========================================================================== */

.portfolio { isolation: isolate; }

.portfolio::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 78% at 22% 18%, rgba(18, 100, 244, 0.09), transparent 68%),
    radial-gradient(52% 62% at 88% 6%, rgba(18, 100, 244, 0.05), transparent 70%);
}

.pf-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* Stage 1520px par ruk jaati hai. Usse chaudi screen par image ke daayen-
   baayen kinare page ke background se milte hain aur ek seedhi lakeer
   dikhti hai — wahan side me bhi ghol do. Iske neeche image kinare tak
   jaati hai, to side ka fade nahi chahiye (warna jad hi ghul jaati). */
@media (min-width: 1521px) {
  .tr-img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ==========================================================================
   HOMEPAGE PORTFOLIO HEADING — bada title, saaf underline, ginti saamne

   Teen cheezein theek ki jaa rahi hain:
   1. Title chhota tha — ab poori chaudai leta hai
   2. Underline "real numbers." se aage nikal kar adhuri lakeer lagti thi
   3. Ginti chhote grey akshar me padi thi, jabki heading khud "real
      numbers" kehti hai — ab wahi sabse saaf dikhti hai
   ========================================================================== */

.pf-head { max-width: 900px; }

.pf-title {
  margin: 22px 0 18px;
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
}

/* Accent ko apni jagah milni chahiye — underline uske neeche baithti hai,
   isliye thoda neeche ka room chhod rahe hain */
.pf-title-accent {
  padding-bottom: 0.1em;
  font-size: 1.1em;
}

/* Underline ab text ke naap ki hai, uske aage nahi jaati, aur neeche ek
   saaf gap chhodti hai — pehle wo akshar se chipki hui lagti thi */
.pf-underline {
  left: 0.02em;
  right: 0.02em;
  bottom: 0;
  height: 0.13em;
  opacity: 0.9;
}

.pf-sub { max-width: 640px; font-size: clamp(1rem, 1.3vw, 1.1rem); }

/* ---- Ginti ---- */
.pf-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin-top: 34px;
  padding-top: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.pf-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 20px 0;
}

/* Beech me patli lakeer — har ginti apni jagah par */
.pf-stat + .pf-stat { padding-left: 26px; }
.pf-stat + .pf-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--color-border);
}

.pf-stat b {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--color-blue-primary);
}

/* "%" poore number jitna bada nahi hona chahiye */
.pf-stat b i {
  font-style: normal;
  font-size: 0.56em;
  vertical-align: 0.42em;
  margin-left: 1px;
  color: var(--color-text-main);
}

.pf-stat span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Reveal — heading ke baad ek-ek karke */
.pf-head > .pf-meta { opacity: 0; transform: translateY(18px); }
.portfolio.is-in .pf-meta { animation: pfCardIn 0.6s var(--ease-premium) 0.34s both; }

@media (max-width: 760px) {
  .pf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stat { padding: 18px 16px 16px 0; }
  .pf-stat:nth-child(3) { padding-left: 0; }
  .pf-stat:nth-child(3)::before { display: none; }
  .pf-stat:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 400px) {
  .pf-title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-head > .pf-meta { opacity: 1; transform: none; animation: none; }
}

/* Underline baayen se daayen khinchti hai. Pehle 0.55s ruk kar 0.6s leti
   thi — us beech me nazar padi to aadhi khinchi hui lakeer dikhti thi,
   jaisa kuch toota hua ho. Ab jaldi shuru hoti hai aur jaldi poori. */
.portfolio.is-in .pf-underline { animation: pfSweep 0.5s var(--ease-premium) 0.25s both; }

/* ==========================================================================
   MOBILE PAR UNGLI KE NAAP KE TARGETS

   Hamburger 24x24 ka tha — ungli ke liye chhota. Icon utna hi rehta hai,
   sirf uske aas-paas dabne ki jagah badhai hai. Slider ke dot bhi 12px
   the; unka nishaan wahi hai, hit area andekha bada kar diya.
   ========================================================================== */

.mobile-menu-toggle {
  padding: 10px;
  margin: -10px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--color-text-main);
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--color-blue-primary);
  outline-offset: 2px;
}

/* Dot dikhta 12px ka hi hai — dabne ki jagah 36px */
.slider-dot { position: relative; }
.slider-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
}

/* Footer ki list aur "Back to home" jaise akele link 19-22px ke the.
   Dikhne me kuch nahi badal raha — bas upar-neeche dabne ki jagah di hai,
   aur gap utni hi kam kar di taaki footer ka naap waisa hi rahe. */
@media (max-width: 720px) {
  .sf-links { gap: 5px; }
  .sf-links a { padding: 5px 0; }
  .site-foot-bottom a { padding: 4px 0; }
}

/* Patli lakeer wale dot — nishaan 4px ka, dabne ki jagah 36px */
.rs-dot { position: relative; }
.rs-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   AI AUTOMATION SECTION (home) — services wale card styles reuse karta hai.
   Reveal script sirf .services par chalta hai, isliye yahan sab kuch
   pehle se visible rakha hai.
   ========================================================================== */
.automations {
  position: relative;
  z-index: 10;
  padding: 72px 0 10px;
}
.automations .sv-head > * { opacity: 1; transform: none; }

/* Har card ki apni entry — sab ek jaise upar se aayein to boring lagta hai */
.automations .sv-card { opacity: 0; animation: none; }
/* fill-mode backwards: animation khatam hote hi transform chhod deta hai,
   taaki hover ka tilt (JS wala) inhi cards par kaam karta rahe */
.automations .sv-card.is-in {
  opacity: 1;
  animation: auIn 0.7s var(--ease-premium) backwards;
}
.automations .sv-card:nth-child(1).is-in { animation-name: auLeft; }
.automations .sv-card:nth-child(2).is-in { animation-name: auDown; }
.automations .sv-card:nth-child(3).is-in { animation-name: auRight; }
.automations .sv-card:nth-child(4).is-in { animation-name: auZoom; }
.automations .sv-card:nth-child(5).is-in { animation-name: auTilt; }
.automations .sv-card:nth-child(6).is-in { animation-name: auUp; }

@keyframes auLeft  { from { opacity: 0; transform: translateX(-46px); }        to { opacity: 1; transform: none; } }
@keyframes auRight { from { opacity: 0; transform: translateX(46px); }         to { opacity: 1; transform: none; } }
@keyframes auDown  { from { opacity: 0; transform: translateY(-38px); }        to { opacity: 1; transform: none; } }
@keyframes auUp    { from { opacity: 0; transform: translateY(38px); }         to { opacity: 1; transform: none; } }
@keyframes auZoom  { from { opacity: 0; transform: scale(0.86); }              to { opacity: 1; transform: none; } }
@keyframes auTilt  { from { opacity: 0; transform: rotate(-3.5deg) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes auIn    { from { opacity: 0; transform: translateY(30px); }         to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .automations { padding: 48px 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .automations .sv-card { opacity: 1; }
  .automations .sv-card.is-in { animation: none; }
}