/* ==========================================================================
   FIRST OWNER MEDIA — SERVICES PAGE
   White paper, blue ink. Paanch services ek deck ki tarah aati hain — har
   card upar chipak jaata hai aur agla uske upar sarak aata hai. Har service
   ka apna blue shade hai, aur jo service abhi live hai wahi rang poore page
   me (glow, progress, rail, buttons) chala jaata hai.
   Brand tokens styles.css se aate hain; yahan sirf is page ka layer hai.
   ========================================================================== */

.services-page {
  --sx-paper: #FFFFFF;
  --sx-paper-2: #F4F7FD;
  --sx-card: #FFFFFF;
  --sx-tile: #F7F9FE;
  --sx-line: rgba(5, 6, 10, 0.10);
  --sx-line-2: rgba(5, 6, 10, 0.16);
  --sx-ink: #05060A;
  --sx-muted: #5A6478;
  --sx-dim: #6B7486;

  --sx-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, sans-serif;
  --sx-serif: 'Instrument Serif', 'Instrument Fallback', Georgia, serif;
  --sx-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sx-top: 88px;
  --live: #1264F4;

  background: var(--sx-paper);
  color: var(--sx-ink);
}

.services-page .bg-dotted-texture { opacity: 0.3; }

html { scroll-behavior: smooth; }
.sx-svc { scroll-margin-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.sx-shell {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---- Header ---- */
.services-page .header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px) saturate(0.88);
  -webkit-backdrop-filter: blur(16px) saturate(0.88);
  border-bottom: 1px solid var(--sx-line);
}

/* ==========================================================================
   AMBIENT — live service ka halka glow
   ========================================================================== */
.sx-grain { display: none; }

.sx-glow {
  position: fixed;
  inset: -24% -10% auto -10%;
  height: 88vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 44% at 76% 20%, color-mix(in srgb, var(--live) 20%, transparent), transparent 68%),
    radial-gradient(42% 38% at 14% 6%, color-mix(in srgb, var(--live) 11%, transparent), transparent 70%);
  filter: blur(34px);
  transition: background 1.1s ease;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.sx-hero {
  position: relative;
  z-index: 2;
  padding: 64px 0 70px;
}

.sx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.sx-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sx-dim);
  text-decoration: none;
  transition: color 0.3s var(--sx-ease), gap 0.3s var(--sx-ease);
}
.sx-back svg { width: 15px; height: 15px; }
.sx-back:hover { color: var(--live); gap: 13px; }

.sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx-ink);
}

.sx-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: sxPulse 2.4s infinite;
}

@keyframes sxPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 45%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.sx-h1 {
  margin-top: 22px;
  font-family: var(--sx-display);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--sx-ink);
}

.sx-h1 em {
  font-family: var(--sx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.01em;
  color: var(--live);
  transition: color 0.8s ease;
}

.sx-l {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.24em 0.24em;
  margin: 0 -0.24em -0.24em;
}

.sx-l > span {
  display: block;
  transform: translateY(112%);
}

.sx-lede {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.72;
  color: var(--sx-muted);
}

/* ---- Buttons ---- */
.sx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.sx-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s var(--sx-ease), box-shadow 0.35s var(--sx-ease),
    background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.sx-btn svg { width: 16px; height: 16px; }

.sx-btn-solid {
  background: var(--live);
  color: #FFFFFF;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--live) 85%, transparent);
}
.sx-btn-solid:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--live) 88%, #000000);
  box-shadow: 0 22px 40px -16px color-mix(in srgb, var(--live) 90%, transparent);
}

.sx-btn-line {
  border: 1px solid var(--sx-line-2);
  background: #FFFFFF;
  color: var(--sx-ink);
}
.sx-btn-line:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--live) 45%, transparent);
  color: var(--live);
}

/* ---- Hero facts ---- */
.sx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--sx-line);
}

.sx-fact strong {
  display: block;
  font-family: var(--sx-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-fact span {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-dim);
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.sx-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-paper-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sx-ticker-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: sxTicker 38s linear infinite;
}

.sx-ticker-track span {
  font-family: var(--sx-display);
  font-size: clamp(1.1rem, 2.1vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(5, 6, 10, 0.14);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.sx-ticker-track i {
  font-size: 0.8rem;
  color: var(--live);
  opacity: 0.55;
}

.sx-ticker:hover .sx-ticker-track span { color: rgba(5, 6, 10, 0.3); }

@keyframes sxTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ==========================================================================
   WHY ONE PARTNER — halka blue band
   ========================================================================== */
.sx-why {
  position: relative;
  z-index: 3;
  margin-top: 40px;
  padding: 88px 0 92px;
  background: var(--sx-paper-2);
  border-top: 1px solid var(--sx-line);
  border-radius: 34px 34px 0 0;
}

.sx-chip-light {
  border-color: var(--sx-line);
  background: #FFFFFF;
}

.sx-why-title {
  margin-top: 20px;
  max-width: 20ch;
  font-family: var(--sx-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.sx-why-title em {
  font-family: var(--sx-serif);
  font-style: italic;
  font-weight: 400;
  color: #1264F4;
}

.sx-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.sx-why-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 28px;
  border: 1px solid var(--sx-line);
  border-radius: 22px;
  background: #FFFFFF;
  opacity: 0;
  transform: translateY(22px);
  transition: transform 0.45s var(--sx-ease), box-shadow 0.45s var(--sx-ease), border-color 0.4s ease;
}

.sx-why.is-in .sx-why-card {
  animation: sxIn 0.6s var(--sx-ease) calc(var(--i) * 0.09s) both;
}

.sx-why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1264F4, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--sx-ease);
}

.sx-why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(18, 100, 244, 0.3);
  box-shadow: 0 26px 50px -32px rgba(6, 12, 22, 0.5);
}

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

.sx-why-n {
  font-family: var(--sx-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1264F4;
}

.sx-why-card h3 {
  margin-top: 14px;
  font-family: var(--sx-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sx-why-card p {
  margin-top: 9px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--sx-muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.sx-cta {
  position: relative;
  z-index: 3;
  padding: 20px 0 60px;
  background: var(--sx-paper-2);
}

.sx-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 44px 46px;
  border-radius: 28px;
  background:
    radial-gradient(75% 130% at 92% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(120deg, #1264F4, #0B3FB0);
  color: #FFFFFF;
  box-shadow: 0 36px 70px -44px rgba(18, 100, 244, 0.9);
}

.sx-cta-title {
  font-family: var(--sx-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.sx-cta-sub {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.sx-cta .sx-actions { margin-top: 0; }

/* Blue band par buttons ulte ho jaate hain */
.sx-cta .sx-btn-solid {
  background: #FFFFFF;
  color: #0B3FB0;
  box-shadow: 0 16px 32px -18px rgba(3, 20, 60, 0.9);
}
.sx-cta .sx-btn-solid:hover { background: #EAF1FF; color: #0B3FB0; }

.sx-cta .sx-btn-line {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.36);
  color: #FFFFFF;
}
.sx-cta .sx-btn-line:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ==========================================================================
   PROGRESS BAR + SIDE RAIL  (dono JS banata hai)
   ========================================================================== */
.sx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1300;
  pointer-events: none;
}

.sx-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--live) 45%, #FFFFFF), var(--live));
  transition: background 0.7s ease;
}

.sx-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 11px;
  border-radius: 999px;
  border: 1px solid var(--sx-line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px -30px rgba(6, 12, 22, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.sx-rail.is-on { opacity: 1; pointer-events: auto; }

.sx-rail-dot {
  position: relative;
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(5, 6, 10, 0.18);
  transition: transform 0.4s var(--sx-ease), background 0.4s ease, box-shadow 0.4s ease;
}

.sx-rail-dot:hover { background: rgba(5, 6, 10, 0.35); transform: scale(1.25); }

.sx-rail-dot.is-active {
  background: var(--dot);
  transform: scale(1.6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent);
}

.sx-rail-label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(8px, -50%);
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--sx-ink);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--sx-ease);
}

.sx-rail-dot:hover .sx-rail-label,
.sx-rail-dot:focus-visible .sx-rail-label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
@keyframes sxIn { to { opacity: 1; transform: translateY(0); } }
@keyframes sxLine { to { transform: translateY(0); } }

.sx-hero .sx-back,
.sx-hero .sx-chip,
.sx-lede,
.sx-hero .sx-actions,
.sx-facts { opacity: 0; transform: translateY(20px); }

.sx-hero.is-in .sx-back    { animation: sxIn 0.5s var(--sx-ease) 0.02s both; }
.sx-hero.is-in .sx-chip    { animation: sxIn 0.55s var(--sx-ease) 0.08s both; }
.sx-hero.is-in .sx-l:nth-child(1) > span { animation: sxLine 0.95s var(--sx-ease) 0.14s both; }
.sx-hero.is-in .sx-l:nth-child(2) > span { animation: sxLine 0.95s var(--sx-ease) 0.26s both; }
.sx-hero.is-in .sx-lede    { animation: sxIn 0.6s var(--sx-ease) 0.36s both; }
.sx-hero.is-in .sx-actions { animation: sxIn 0.6s var(--sx-ease) 0.44s both; }
.sx-hero.is-in .sx-facts   { animation: sxIn 0.6s var(--sx-ease) 0.52s both; }



/* ==========================================================================
   RANG KA HISAAB
   --live poore page ka rang hai (glow, progress, rail, hero). Panel ke
   andar baitha button us panel ka apna shade lega, warna paanchon cards
   par ek hi button dikhta hai.
   ========================================================================== */
/* Why band aur CTA hamesha brand blue par wapas aate hain */
.sx-why,
.sx-cta { --live: #1264F4; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .sx-rail { display: none; }
}

@media (max-width: 1080px) {
  .sx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sx-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sx-shell { width: calc(100% - 32px); }
  .sx-hero { padding: 44px 0 52px; }

  .sx-why-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-why { padding: 60px 0 64px; border-radius: 26px 26px 0 0; }
  .sx-cta-inner { padding: 30px 24px; }
  .sx-facts { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-hero .sx-back,
  .sx-hero .sx-chip,
  .sx-lede,
  .sx-hero .sx-actions,
  .sx-facts,
  .sx-svc-head,
  .sx-svc-lead,
  .sx-col,
  .sx-why-card,
  .sx-svc .sx-list li,
  .sx-svc .sx-steps li,
  .sx-svc .sx-chips li {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .sx-l > span { transform: none; animation: none; }
  .sx-steps::before { transform: scaleY(1); transition: none; }
  .sx-ticker-track { animation: none; }
  .sx-rail-dot.is-active { transform: none; }
}

/* ==========================================================================
   HERO VIDEO STAGE
   Service ke naam se pehle kaam dikhta hai. Poster pehle aata hai, video
   tabhi load hota hai jab wo slide live hoti hai — page bhaari na ho.
   ========================================================================== */
.sx-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.sx-stage-frame {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  background: var(--sx-paper-2);
  box-shadow:
    0 40px 80px -44px rgba(6, 12, 22, 0.55),
    0 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Frame ke peeche live service ka halka rang */
.sx-stage-frame::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--live) 30%, transparent), transparent 66%);
  filter: blur(28px);
}

.sx-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s var(--sx-ease), transform 1.4s var(--sx-ease);
}

.sx-slide.is-live { opacity: 1; transform: scale(1); }

.sx-slide img,
.sx-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-slide video { opacity: 0; transition: opacity 0.6s ease; }
.sx-slide.is-playing video { opacity: 1; }

.sx-slide-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 46px 20px 20px;
  color: #FFFFFF;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.82));
}

.sx-slide-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.sx-slide-meta strong {
  font-family: var(--sx-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sx-slide-meta em {
  font-family: var(--sx-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.sx-stage-badge {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-ink);
}
.sx-stage-badge svg { width: 12px; height: 12px; color: var(--live); }

.sx-stage-dots {
  display: flex;
  gap: 8px;
}

.sx-stage-dot {
  width: 26px; height: 4px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(5, 6, 10, 0.14);
  transition: background 0.4s ease, width 0.4s var(--sx-ease);
}

.sx-stage-dot.is-live { width: 40px; background: var(--live); }

/* ==========================================================================
   WORK IN MOTION — reel wall
   ========================================================================== */
.sx-reels {
  position: relative;
  z-index: 2;
  padding: 20px 0 70px;
  overflow: hidden;
}

.sx-reels-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.sx-reels-title {
  margin-top: 18px;
  max-width: 18ch;
  font-family: var(--sx-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.sx-reels-title em {
  font-family: var(--sx-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--live);
}

.sx-reels-sub {
  margin-top: 14px;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sx-muted);
}

.sx-marquee {
  margin-top: 36px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sx-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: sxRoll 70s linear infinite;
}

.sx-marquee:hover .sx-marquee-track { animation-play-state: paused; }

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

.sx-vcard {
  position: relative;
  flex: 0 0 auto;
  width: 186px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  background: var(--sx-paper-2);
  text-decoration: none;
  transition: transform 0.45s var(--sx-ease), box-shadow 0.45s var(--sx-ease), border-color 0.4s ease;
}

.sx-vcard img,
.sx-vcard video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-vcard video { opacity: 0; transition: opacity 0.5s ease; }
.sx-vcard.is-playing video { opacity: 1; }

.sx-vcard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--live) 40%, transparent);
  box-shadow: 0 28px 50px -30px rgba(6, 12, 22, 0.6);
}

.sx-vcard-play {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--sx-ink);
  transition: opacity 0.4s ease, transform 0.4s var(--sx-ease);
}
.sx-vcard-play svg { width: 13px; height: 13px; }
.sx-vcard.is-playing .sx-vcard-play { opacity: 0; transform: scale(0.8); }

.sx-vcard-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 36px 14px 14px;
  color: #FFFFFF;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.8));
}

.sx-vcard-meta strong {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sx-vcard-meta span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- Reveal ---- */
.sx-stage { opacity: 0; transform: translateY(20px); }
.sx-hero.is-in .sx-stage { animation: sxIn 0.8s var(--sx-ease) 0.3s both; }

.sx-reels-head > div,
.sx-reels-head > .sx-btn { opacity: 0; transform: translateY(20px); }
.sx-reels.is-in .sx-reels-head > div { animation: sxIn 0.6s var(--sx-ease) 0.05s both; }
.sx-reels.is-in .sx-reels-head > .sx-btn { animation: sxIn 0.6s var(--sx-ease) 0.15s both; }

@media (max-width: 1080px) {
  .sx-stage-frame { width: min(300px, 100%); }
}

@media (max-width: 760px) {
  .sx-stage-frame { width: min(260px, 86%); }
  .sx-vcard { width: 150px; }
  .sx-reels { padding-bottom: 52px; }
  .sx-reels-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stage,
  .sx-reels-head > div,
  .sx-reels-head > .sx-btn { opacity: 1; transform: none; animation: none; }
  .sx-marquee-track { animation: none; }
  .sx-slide { transition: opacity 0.2s linear; transform: none; }
}

/* ==========================================================================
   FIVE SERVICES — flat editorial rows
   Koi card, koi box, koi pinning nahi. Har service ek khuli row hai jise
   sirf ek hairline alag karti hai: bada number, badi type, aur teen
   column. Jagah khud kaam karti hai — isliye page simple lagta hai aur
   padhne me tez chalta hai.
   ========================================================================== */
.sx-svc {
  position: relative;
  z-index: 2;
  padding: 78px 0 70px;
  border-top: 1px solid var(--sx-line);
}

.sx-svc:first-of-type { border-top: 0; }

/* Row ke upar us service ka accent — scroll par khinchta hai */
.sx-svc::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: min(1240px, calc(100% - 48px));
  right: 0;
  margin: 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--a), transparent 55%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--sx-ease);
}

.sx-svc.is-in::before { transform: scaleX(1); }

/* ---- Sar: number, naam, link ---- */
.sx-svc-head {
  display: grid;
  /* Do link hain — page ka aur WhatsApp ka — isliye do auto column */
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 20px;
}

.sx-svc-n {
  font-family: var(--sx-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--a) 26%, #FFFFFF);
  transition: color 0.5s ease;
}

.sx-svc:hover .sx-svc-n { color: var(--a); }

.sx-svc-name h2 {
  font-family: var(--sx-display);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sx-ink);
}

.sx-svc-name p {
  margin-top: 10px;
  font-family: var(--sx-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--a);
}

.sx-svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sx-line-2);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--sx-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s var(--sx-ease);
}
.sx-svc-link svg { width: 15px; height: 15px; }
.sx-svc-link:hover { color: var(--a); border-color: var(--a); gap: 12px; }

/* ---- Intro + numbers ---- */
.sx-svc-lead {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 20px 30px;
  margin-top: 34px;
}

.sx-svc-intro {
  grid-column: 2;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--sx-muted);
}

.sx-svc-stats {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.sx-svc-stats div { flex: 1 1 0; }

.sx-svc-stats dt {
  font-family: var(--sx-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-svc-stats dd {
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-dim);
}

/* ---- Teen column, bina kisi box ke ---- */
.sx-svc-cols {
  display: grid;
  grid-template-columns: 96px repeat(3, minmax(0, 1fr));
  gap: 20px 30px;
  margin-top: 44px;
}

.sx-col:first-of-type { grid-column: 2; }

.sx-col h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sx-line);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx-dim);
}

@media (max-width: 1000px) {
  .sx-svc-head,
  .sx-svc-lead,
  .sx-svc-cols { grid-template-columns: minmax(0, 1fr); }

  .sx-svc-head { grid-template-columns: auto minmax(0, 1fr); }
  .sx-svc-n { grid-row: span 1; }
  .sx-svc-link { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

  .sx-svc-cols { gap: 30px; }
  .sx-svc-intro { grid-column: auto; max-width: none; }
  .sx-col:first-of-type { grid-column: auto; }
  .sx-svc { padding: 54px 0 50px; }
}

@media (max-width: 620px) {
  .sx-svc-stats { flex-wrap: wrap; gap: 18px 22px; }
  .sx-svc-stats div { flex: 1 1 40%; }
}

/* ---- Reveal ---- */
.sx-svc-head,
.sx-svc-lead,
.sx-col { opacity: 0; transform: translateY(20px); }

.sx-svc.is-in .sx-svc-head { animation: sxIn 0.6s var(--sx-ease) 0.04s both; }
.sx-svc.is-in .sx-svc-lead { animation: sxIn 0.6s var(--sx-ease) 0.14s both; }
.sx-svc.is-in .sx-col:nth-of-type(1) { animation: sxIn 0.6s var(--sx-ease) 0.22s both; }
.sx-svc.is-in .sx-col:nth-of-type(2) { animation: sxIn 0.6s var(--sx-ease) 0.3s both; }
.sx-svc.is-in .sx-col:nth-of-type(3) { animation: sxIn 0.6s var(--sx-ease) 0.38s both; }

.sx-svc .sx-list li,
.sx-svc .sx-steps li,
.sx-svc .sx-chips li { opacity: 0; transform: translateY(12px); }

.sx-svc.is-in .sx-list li,
.sx-svc.is-in .sx-steps li,
.sx-svc.is-in .sx-chips li {
  animation: sxIn 0.5s var(--sx-ease) calc(0.32s + var(--li, 0) * 0.05s) both;
}

@media (prefers-reduced-motion: reduce) {
  .sx-svc::before { transform: scaleX(1); transition: none; }
  .sx-svc-head,
  .sx-svc-lead,
  .sx-col { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   LISTS — checklist, steps aur chips (ab bina box ke)
   ========================================================================== */
.sx-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.sx-list li {
  position: relative;
  padding-left: 25px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--sx-muted);
  transition: color 0.3s ease, transform 0.35s var(--sx-ease);
}

.sx-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--a) 14%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--a) 26%, transparent);
  transition: background 0.35s ease;
}

.sx-list li::after {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 5px; height: 2.5px;
  border-left: 1.6px solid var(--a);
  border-bottom: 1.6px solid var(--a);
  transform: rotate(-45deg);
}

.sx-list li:hover { color: var(--sx-ink); transform: translateX(3px); }
.sx-list li:hover::before { background: color-mix(in srgb, var(--a) 26%, #FFFFFF); }

/* Steps — ek patli timeline */
.sx-steps {
  position: relative;
  list-style: none;
  counter-reset: sxstep;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.sx-steps::before {
  content: "";
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 45%, transparent),
    color-mix(in srgb, var(--a) 6%, transparent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--sx-ease) 0.3s;
}

.sx-svc.is-in .sx-steps::before { transform: scaleY(1); }

.sx-steps li {
  counter-increment: sxstep;
  position: relative;
  padding-left: 34px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--sx-muted);
  transition: color 0.3s ease;
}

.sx-steps li::before {
  content: counter(sxstep, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border-radius: 8px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--a);
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--a) 28%, transparent);
  transition: background 0.35s ease, color 0.35s ease, transform 0.4s var(--sx-ease);
}

.sx-steps li:hover { color: var(--sx-ink); }
.sx-steps li:hover::before {
  background: var(--a);
  color: #FFFFFF;
  transform: scale(1.08);
}

/* Chips */
.sx-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.sx-chips li {
  padding: 9px 14px;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sx-muted);
  transition: transform 0.35s var(--sx-ease), border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.sx-chips li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--a) 34%, transparent);
  background: color-mix(in srgb, var(--a) 8%, #FFFFFF);
  color: var(--a);
}

@media (prefers-reduced-motion: reduce) {
  .sx-steps::before { transform: scaleY(1); transition: none; }
  .sx-list li:hover,
  .sx-chips li:hover { transform: none; }
}

/* Har service ka apna page bhi hai — head me uska link, WhatsApp ke bagal me */
.sx-svc-page {
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
  color: var(--a);
}
.sx-svc-page:hover { background: color-mix(in srgb, var(--a) 8%, transparent); }

/* ==========================================================================
   SERVICE ROWS — dobara gootha hua

   Pehle sab kuch ek hi bhaar ka tha: teen barabar column, chhote numbers,
   96px ka khaali gutter. Aankh ko pakadne ko kuch nahi tha. Ab teen cheez
   saaf uthti hain — naam, us service ke numbers, aur "what you get" —
   baaki unke sahare rehta hai.
   ========================================================================== */

.sx-svc {
  overflow: hidden;
  padding: clamp(58px, 6vw, 86px) 0 clamp(52px, 5vw, 74px);
  transition: background 0.6s var(--sx-ease);
}

/* Poore row par us service ke rang ki bahut halki rangat */
.sx-svc:hover { background: color-mix(in srgb, var(--a) 3.5%, transparent); }

/* ---- Number ab watermark hai, gutter nahi ---- */
.sx-svc-n {
  position: absolute;
  /* Title ki oonchai par rukta hai — neeche do link hain, unke peeche
     number aa jaata to dono padhne me shor karte. */
  top: clamp(38px, 4vw, 56px);
  right: max(24px, calc((100% - 1240px) / 2));
  z-index: 0;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.8;
  color: color-mix(in srgb, var(--a) 8%, transparent);
  pointer-events: none;
  user-select: none;
}

.sx-svc:hover .sx-svc-n { color: color-mix(in srgb, var(--a) 14%, transparent); }

.sx-shell > * { position: relative; z-index: 1; }

/* Number grid se nikal gaya — ab pehla column bhi nahi chahiye */
.sx-svc-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 16px 22px;
}

.sx-svc-name h2 { letter-spacing: -0.045em; }

.sx-svc-name p {
  margin-top: 12px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}

/* ---- Numbers ab row ki sabse tez cheez ---- */
.sx-svc-lead {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 26px;
}

.sx-svc-intro {
  grid-column: 1;
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.25vw, 1.1rem);
}

.sx-svc-stats {
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--a) 22%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--a) 5%, #FFFFFF);
  overflow: hidden;
}

.sx-svc-stats div {
  padding: 22px 26px;
  border-left: 1px solid color-mix(in srgb, var(--a) 16%, transparent);
}

.sx-svc-stats div:first-child { border-left: 0; }

.sx-svc-stats dt {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--a);
}

.sx-svc-stats dd {
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--sx-muted);
}

/* ---- Teen column, ab alag-alag bhaar ke ---- */
.sx-svc-cols {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: 26px 40px;
  margin-top: clamp(34px, 3.4vw, 50px);
}

/* Pehla column ab khud pehla hai — 96px wali chhalaang ki zarurat nahi */
.sx-col:first-of-type { grid-column: 1; }

.sx-col h3 { color: var(--a); }

/* "What you get" hi asli maal hai, isliye wo thoda bada padha jaaye */
.sx-col:first-of-type .sx-list li { font-size: 0.95rem; }

@media (max-width: 1000px) {
  .sx-svc-stats { flex-wrap: wrap; }
  .sx-svc-stats div { flex: 1 1 140px; }
  .sx-svc-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sx-svc-n { font-size: clamp(4.5rem, 18vw, 7rem); opacity: 0.8; }
}

@media (max-width: 640px) {
  .sx-svc-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sx-svc-stats div { padding: 18px 20px; }
  .sx-svc-stats div:nth-child(2) { border-left: 0; }
}

/* ==========================================================================
   ACCENT KO PADHNE LAAYAK BANAO

   Har service ka apna rang (--a) hai. Kuch — sky #0EA5E9, indigo #5B6BF5 —
   safed par 2.77 tak gir jaate hain, jabki chhote text ke liye 4.5 chahiye.
   Border, underline aur tile me wahi chamak rehti hai; sirf padhne wale
   text ka rang gehra kiya hai.
   ========================================================================== */

.services-page,
.sx-svc { --a-ink: color-mix(in srgb, var(--a, var(--color-blue-primary)) 74%, #000000); }

.sx-svc-name p,
.sx-col h3,
.sx-svc-link,
.sx-svc-link:hover,
.sx-svc:hover .sx-svc-n { color: var(--a-ink); }


/* Stage ke dot 4px unche hain — nishaan wahi, dabne ki jagah badi */
.sx-stage-dot { position: relative; }
.sx-stage-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
}

/* Akela link tha aur 19px ka — ungli ke liye upar-neeche jagah di.
   Dikhne me waisa hi, margin se naap wapas seedha kar diya. */
.sx-back { padding: 6px 0; margin-top: -6px; }