/* ==========================================================================
   Swapnolipi — Enhancements v1
   Load LAST, after dark-mode.css

   1. Animated aurora hero background on every page
   2. Scroll performance (fixes jank + white flashing)
   3. Topbar removed on mobile
   4. Consistent capsule header, no side colour band
   5. Mobile responsive corrections
   6. Blog styles
   ========================================================================== */


/* ==========================================================================
   1. SCROLL PERFORMANCE  —  read this before changing anything below
   --------------------------------------------------------------------------
   The white flashing while scrolling was caused by body carrying a 4-layer
   gradient. A background on <body> propagates to the canvas and must be
   repainted across the whole scroll height on every frame. On mobile the
   browser paints in tiles, and tiles that have not been painted yet show
   through as white.

   Fix: move that gradient onto a FIXED pseudo-element. It occupies the
   viewport only, never scrolls, and therefore never repaints.
   ========================================================================== */

html {
  background: #07000a;              /* kills white overscroll bounce */
  scroll-behavior: smooth;
}

body {
  background: #07000a !important;   /* flat colour only — layers move to ::before */
  position: relative;
  overscroll-behavior-y: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 6%,  rgba(170,3,206,.16), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(170,3,206,.10), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(170,3,206,.12), transparent 45%),
    linear-gradient(180deg, #050005 0%, #0d0012 45%, #150019 100%);
}

/* Section glow pseudo-elements were painting large offscreen areas.
   contain:paint clips them so the browser stops considering them. */
.section,
.section-tight {
  contain: paint;
}

/* Infinite hover animation removed — it kept the compositor busy for as long
   as the pointer rested on a card. Static shadow reads the same. */
.job-card:hover,
.portfolio-item:hover,
.team-card:hover,
.service-card:hover {
  animation: none !important;
  box-shadow: 0 0 0 4px rgba(170, 3, 206, .18), 0 18px 40px rgba(0, 0, 0, .5);
}

/* Promote animated elements to their own compositor layer so their movement
   never triggers a repaint of anything underneath. */
.floating-card,
.site-header .nav {
  will-change: transform;
  transform: translateZ(0);
}


/* ==========================================================================
   2. ANIMATED AURORA — hero background on EVERY page
   --------------------------------------------------------------------------
   Movement comes from transform only. Animating transform runs on the GPU
   and skips layout and paint entirely, so this costs almost nothing even on
   a low-end phone. Animating background-position would repaint every frame.
   ========================================================================== */

.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, #05000a 0%, #12001a 55%, #1c0126 100%) !important;
}

/* Two drifting colour fields */
.hero::before,
.page-hero::before,
.hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  display: block !important;
  filter: blur(70px);
}

.hero::before,
.page-hero::before {
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  top: -22%;
  left: -14%;
  background: radial-gradient(circle, rgba(170, 3, 206, .55), transparent 68%);
  animation: auroraA 22s ease-in-out infinite alternate;
}

.hero::after,
.page-hero::after {
  width: 52vw;
  height: 52vw;
  max-width: 620px;
  max-height: 620px;
  bottom: -26%;
  right: -12%;
  background: radial-gradient(circle, rgba(255, 79, 216, .38), transparent 68%);
  animation: auroraB 27s ease-in-out infinite alternate;
}

/* Third field, added as a real element so it can sit between the two */
.aurora-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.aurora-veil::before {
  content: '';
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 540px;
  max-height: 540px;
  top: 24%;
  left: 42%;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(123, 0, 160, .42), transparent 70%);
  animation: auroraC 19s ease-in-out infinite alternate;
}

@keyframes auroraA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(14vw, 8vh, 0) scale(1.18); }
  100% { transform: translate3d(4vw, 18vh, 0) scale(.94); }
}

@keyframes auroraB {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  50%  { transform: translate3d(-16vw, -10vh, 0) scale(.88); }
  100% { transform: translate3d(-6vw, -20vh, 0) scale(1.14); }
}

@keyframes auroraC {
  0%   { transform: translate3d(0, 0, 0) scale(.9); }
  50%  { transform: translate3d(-12vw, 12vh, 0) scale(1.2); }
  100% { transform: translate3d(10vw, -8vh, 0) scale(1); }
}

/* Inner-page hero now matches the homepage hero */
.page-hero {
    margin-top:-85px;
  padding: 142px 0 68px;
  text-align: center;
}

.page-hero h1 {
  color: #fff;
  position: relative;
  z-index: 1;
}

.page-hero p {
  color: #cabdd4;
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}

.page-hero .breadcrumb,
.page-hero .eyebrow {
  position: relative;
  z-index: 1;
}

.page-hero .breadcrumb { color: #b6a6c2; }
.page-hero .breadcrumb a { color: #ff8ff0; }

.page-hero .eyebrow {
  background: rgba(170, 3, 206, .16);
  color: #ff9df0;
  border: 1px solid rgba(170, 3, 206, .4);
}

/* Keep hero content above the aurora */
.hero > .container,
.page-hero > .container { position: relative; z-index: 1; }


/* ==========================================================================
   3. HEADER — same capsule everywhere, no colour band at the sides
   --------------------------------------------------------------------------
   The band appeared because .site-header carried horizontal padding while
   the page background behind it differed per template. Header is now fully
   transparent and the capsule is the only painted surface.
   ========================================================================== */

.site-header,
.site-header.scrolled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 20px 0 !important;
}

.site-header .nav {
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(14, 8, 18, .72);
  border: 1px solid rgba(170, 3, 206, .38);
  border-radius: 999px;
  /* Blur reduced from 20px. Cost scales with radius, and the capsule is
     sticky, so the browser re-reads the backdrop on every scroll frame. */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
  transition: background .3s ease, box-shadow .3s ease;
}

.site-header.scrolled .nav {
  background: rgba(10, 5, 14, .88);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 26px rgba(170, 3, 206, .22);
  transform: translateZ(0);          /* no translateY — it caused a 2px jitter */
}


/* ==========================================================================
   4. TOPBAR — hidden on mobile
   ========================================================================== */

@media (max-width: 991px) {
  .topbar { display: none !important; }
}


/* ==========================================================================
   5. RESPONSIVE CORRECTIONS
   ========================================================================== */

@media (max-width: 991px) {
  .site-header { padding: 14px 14px 0 !important; }
  .site-header .nav { padding: 8px 10px 8px 16px; }
  .hero { padding-top: 116px; }
  .page-hero { padding: 128px 0 56px; }
}

@media (max-width: 767px) {
  .site-header { padding: 10px 12px 0 !important; }

  /* Blur is the single most expensive thing on a phone. Swap it for a solid
     panel below 767px — visually near-identical, dramatically cheaper. */
  .site-header .nav {
    background: rgba(9, 4, 12, .94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero { padding-top: 104px; padding-bottom: 60px; }
  .page-hero { padding: 112px 0 48px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero p { font-size: 15px; }

  .container { padding: 0 18px; }

  /* Aurora sized down — 60vw blobs were overflowing and forcing a wider
     paint area than the viewport. */
  .hero::before, .page-hero::before,
  .hero::after,  .page-hero::after { filter: blur(48px); }
  .hero::before, .page-hero::before { width: 92vw; height: 92vw; }
  .hero::after,  .page-hero::after  { width: 84vw; height: 84vw; }
  .aurora-veil::before { width: 80vw; height: 80vw; filter: blur(52px); }

  .hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.18; }
  .hero p  { font-size: 15.5px; }
  .hero-visual { margin-bottom: 26px; }

  /* Floating cards were overlapping the hero image at small widths */
  .floating-card { position: static !important; margin-top: 12px; animation: none; }
  .hero-visual .floating-card { display: inline-flex; }

  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
  .btn { padding: 13px 22px; font-size: 14.5px; }
  table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
  .hero { padding-top: 96px; }
  .page-hero { padding: 100px 0 40px; }
  .brand img { height: 28px; }
  .stats-grid { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */

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


/* ==========================================================================
   7. FOCUS VISIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ff8ff0;
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   8. BLOG
   ========================================================================== */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.blog-card {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(170, 3, 206, .45);
}

.blog-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(140deg, #12001a, #2c0035);
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.blog-card:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-cat {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(170, 3, 206, .2);
  color: #ff9df0;
}

.blog-card h3 {
  font-size: 18.5px;
  line-height: 1.35;
  color: #fff;
}

.blog-card h3 a:hover { color: #ff8ff0; }
.blog-card p { color: #b6a6c2; font-size: 14.5px; line-height: 1.65; }

.blog-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #8d7e99;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 96px; }

.widget {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 22px;
}

.widget h4 {
  font-size: 15.5px;
  color: #fff;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.widget-search { display: flex; gap: 8px; }

.widget-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .12);
  color: #f4eef7;
  font-family: inherit;
  font-size: 14px;
}

.widget-search input:focus { outline: none; border-color: #AA03CE; }

.cat-list { display: flex; flex-direction: column; gap: 2px; }

.cat-list a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #b6a6c2;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}

.cat-list a:hover,
.cat-list a.active { background: rgba(170, 3, 206, .2); color: #fff; }
.cat-list span { color: #7d6f89; font-size: 12.5px; }

.recent-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.recent-item:last-child { border-bottom: none; padding-bottom: 0; }

.recent-item img {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1c0126;
}

.recent-item h5 { font-size: 13.8px; line-height: 1.4; color: #e9e0ef; font-weight: 600; }
.recent-item h5:hover { color: #ff8ff0; }
.recent-item time { font-size: 11.5px; color: #8d7e99; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tag-cloud a {
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: #b6a6c2;
  transition: background .2s ease, color .2s ease;
}

.tag-cloud a:hover { background: var(--grad); color: #fff; }

/* Single post */
.post-body { max-width: 760px; color: #c4b6cf; font-size: 16.5px; line-height: 1.82; }
.post-body > * + * { margin-top: 20px; }
.post-body h2 { font-size: 27px; color: #fff; margin-top: 42px; }
.post-body h3 { font-size: 21px; color: #fff; margin-top: 32px; }
.post-body a { color: #ff8ff0; text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body img { border-radius: 16px; margin: 30px 0; }

.post-body blockquote {
  border-left: 3px solid #AA03CE;
  padding: 6px 0 6px 22px;
  color: #e0d3e8;
  font-size: 18px;
  font-style: italic;
}

.post-body code {
  background: rgba(255, 255, 255, .08);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 14.5px;
}

.post-body pre {
  background: #0a0010;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
}

.post-hero-img { border-radius: 22px; overflow: hidden; margin-bottom: 34px; max-width: 900px; }
.post-hero-img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.post-share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .09); }
.post-share span { font-size: 14px; color: #b6a6c2; }

.post-share a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  font-size: 14px;
  transition: background .25s ease;
}

.post-share a:hover { background: var(--grad); }

/* Table of contents */
.toc { background: rgba(170, 3, 206, .08); border: 1px solid rgba(170, 3, 206, .25); border-radius: 16px; padding: 20px 22px; }
.toc h4 { font-size: 14.5px; color: #fff; margin-bottom: 10px; }
.toc ol { padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.toc li { list-style: decimal; }
.toc a { color: #c4b6cf; font-size: 14px; }
.toc a:hover { color: #ff8ff0; }

/* Pagination */
.pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

.pagination a,
.pagination span {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #b6a6c2;
  font-size: 14.5px;
  font-weight: 600;
}

.pagination a:hover { background: rgba(170, 3, 206, .25); color: #fff; }
.pagination .current { background: var(--grad); color: #fff; border-color: transparent; }

@media (max-width: 991px) {
  .blog-layout { grid-template-columns: 1fr; gap: 40px; }
  .blog-sidebar { position: static; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .post-body { font-size: 16px; }
  .post-body h2 { font-size: 23px; }
  .post-body h3 { font-size: 19px; }
}


/* ==========================================================================
   9. NAV DENSITY
   Eight nav items plus the CTA is tight between 992px and 1200px.
   Tighten the spacing there rather than dropping a link.
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1200px) {
  .site-header .nav-links a { padding: 10px 11px; font-size: 14px; }
  .site-header .nav-cta { padding: 9px 16px; font-size: 12.5px; }
  .site-header .nav { padding: 9px 12px 9px 18px; }
}


/* ==========================================================================
   10. HOMEPAGE ABOUT SECTION — mobile overflow
   --------------------------------------------------------------------------
   .info-strip dropped to 2 columns at 992px and stayed there. At 390px each
   column is roughly 160px, but the CIN value (U62099WB2024PTC274879) is 21
   characters at 700 weight and cannot fit. Grid items default to
   min-width:auto, so instead of wrapping, the cell pushed the grid wider than
   the viewport — which is what produced the horizontal scrollbar and the
   cut-off cards.

   Two fixes are needed together: min-width:0 to let the cell shrink, and an
   explicit wrap rule so the long unbroken string can break.
   ========================================================================== */

.info-strip > * { min-width: 0; }

.info-box .val {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .info-strip {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .info-box { padding: 14px 16px; }
}

/* Same class is used on the About page, so it is covered there too. */
.about-hero { min-width: 0; }
.about-hero > * { min-width: 0; }


/* ==========================================================================
   11. MOBILE ORDER — text before image
   --------------------------------------------------------------------------
   style.css set .hero-visual{order:-1} at 992px, which pushed the image above
   the headline on phones. The headline and call to action should come first:
   it is what the visitor is there to read, and it keeps the primary button
   above the fold.
   ========================================================================== */

@media (max-width: 992px) {
  .hero-grid   { display: flex; flex-direction: column; }
  .hero-copy   { order: 1; }
  .hero-visual { order: 2 !important; margin-top: 30px; }

  /* Homepage and About page intro block — same treatment.
     Delete this rule if you would rather keep the image on top. */
  .about-hero            { display: flex; flex-direction: column; }
  .about-hero > div:has(img),
  .about-hero > img      { order: 2; }
  .about-hero > div:not(:has(img)) { order: 1; }
}

/* :has() is unsupported on older browsers. This fallback assumes the image
   block is the first child, which is how every template here is written. */
@supports not (selector(:has(img))) {
  @media (max-width: 992px) {
    .about-hero > *:first-child { order: 2; }
    .about-hero > *:nth-child(2) { order: 1; }
  }
}


/* ==========================================================================
   12. GLOBAL OVERFLOW GUARD
   Long unbroken strings (IDs, URLs, emails) are the usual cause of a stray
   horizontal scrollbar on phones.
   ========================================================================== */

@media (max-width: 767px) {
  .section, .section-tight, .container { max-width: 100%; }
  .stat-num, .fc-value, .contact-row .val,
  .footer-col ul li, .footer-bottom span { overflow-wrap: anywhere; }
}


/* ==========================================================================
   13. HERO HEADLINE LEGIBILITY
   --------------------------------------------------------------------------
   The animated gradient on .grad-text ran through pure #000 in the middle of
   its colour ramp. Because the hero sits on a near-black background, the
   accent words faded to invisible for roughly a third of every six-second
   cycle. Replaced with a ramp that stays light across its whole range.
   ========================================================================== */

.hero h1 .grad-text {
  /*background: linear-gradient(90deg, #ff8ff0, #d94ce8, #AA03CE, #d94ce8, #ff8ff0) !important;*/
  background-size: 300% 100% !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}