@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');

/* ============================================================
   1. GLOBAL / BASE STYLES
   (Sabhi sections pe asar karne wali basic styles yahan hain)
   ============================================================ */

/* ⚠️ width:100vw + overflow-x:hidden hata diya hai.
   100vw scrollbar ki width bhi count karta hai -> horizontal scroll
   -> uske liye overflow-x:hidden lagta tha -> aur overflow:hidden
   position:sticky ko todta hai (cards stack nahi hote the).
   width:100% se dono problem khatam. */
/* First-paint layout — works before Tailwind CDN finishes compiling */
.site-loader {
    display: none;
}

html.site-loading body > :not(.site-loader) {
    visibility: hidden;
}

html.site-loading .site-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.72);
    background: #0a0a0a;
    font-size: 13px;
    letter-spacing: 0.08em;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.site-loader-spinner {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(125, 187, 64, 0.22);
    border-top-color: #7DBB40;
    border-radius: 50%;
    animation: site-loader-spin 0.8s linear infinite;
}

html.site-loading .site-loader.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes site-loader-spin {
    to { transform: rotate(360deg); }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.w-full { width: 100%; }
.min-h-screen { min-height: 100vh; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-white { color: #ffffff; }
.text-center { text-align: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
#hero { min-height: 100vh; background: #000; }
.client-pill-wrapper { opacity: 1; }

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:block { display: block; }
    .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
    .lg\:grid { display: grid; }
    .lg\:hidden { display: none; }
}

html {
    background-color: #0a0a0a;
    accent-color: #7DBB40;
}

/* Film-grain texture over the dark page. Same noise as before, but
   screen-blended at low opacity so it reads as grain on black
   instead of darkening a white page. */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.09;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

html, body {
    color: #ffffff;
    font-family: 'Satoshi', sans-serif !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    isolation: isolate;
    background-color: transparent;
     font-family: 'Manrope', sans-serif;
}

/* ============================================================
   SITE COLUMN — red-line layout
   Content (CTA, footer columns, sections) shares one centered
   max-width. Backgrounds stay full-bleed.
   ============================================================ */
:root {
    --site-max: 1400px;
    --site-gutter: 20px;
}

@media (min-width: 768px) {
    :root {
        --site-gutter: 24px;
    }
}
#hero h1 {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.05em;
}
.site-wrap {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

#services-section > .text-center,
#results-section > .text-center,
#clients-section,
#testimonials-section,
.stack-container,
.results-viewport,
.cta-panel,
.services-hero-content,
body > main,
footer > div:first-child {
    max-width: var(--site-max) !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#services-section > .text-center,
#results-section > .text-center,
#clients-section,
#testimonials-section,
.cta-section,
body > main,
footer > div:first-child {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}

.cta-panel {
    width: 100%;
}

/* Ambient brand-green haze on the dark page (fixed, blurry, behind UI) */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
}

body::before {
    width: min(620px, 90vw);
    height: min(620px, 90vw);
    top: -180px;
    left: -200px;
    background: radial-gradient(circle, rgba(125, 187, 64, 0.18) 0%, rgba(125, 187, 64, 0.05) 42%, transparent 70%);
    animation: site-glow-drift 18s ease-in-out infinite;
}

body::after {
    width: min(560px, 85vw);
    height: min(560px, 85vw);
    right: -180px;
    bottom: 8%;
    background: radial-gradient(circle, rgba(125, 187, 64, 0.14) 0%, rgba(90, 160, 50, 0.05) 45%, transparent 72%);
    animation: site-glow-drift 22s ease-in-out infinite reverse;
}

@keyframes site-glow-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(28px, -22px) scale(1.08); }
}

::selection,
*::selection,
::-moz-selection,
*::-moz-selection {
    background-color: #7DBB40 !important;
    color: #0a0a0a !important;
}

/* Smooth scroll — animates jumps to in-page anchors (nav links, "skip to
   section" etc.) instead of snapping instantly. Site-wide, no JS library
   needed. Skipped for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

*:focus-visible {
    outline: 2px solid #7DBB40;
    outline-offset: 2px;
}

/* Section headings — boxed uppercase label + bold white title */
.section-badge,
.cta-badge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 7px 14px !important;
    margin-bottom: 18px !important;
    border-radius: 0 !important;
    border: 1px solid #7DBB40 !important;
    background: transparent !important;
    color: #7DBB40 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.section-badge::before,
.cta-badge::before {
    content: '';
    position: absolute;
    inset: -2.5px;
    pointer-events: none;
    z-index: 1;
    display: block !important;
}

.section-badge::before {
    background:
        linear-gradient(#ffffff, #ffffff) top left / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) top right / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) bottom left / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) bottom right / 5px 5px no-repeat;
}

.cta-badge::before {
    background:
        linear-gradient(#ffffff, #ffffff) top left / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) top right / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) bottom left / 5px 5px no-repeat,
        linear-gradient(#ffffff, #ffffff) bottom right / 5px 5px no-repeat;
}

.section-badge::after,
.cta-badge::after {
    display: none !important;
}

.section-badge + h1,
.section-badge + h2,
.cta-title,
.career-closed-title,
.reveal-heading,
.team-copy-title {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.025em;
}

.section-badge + h1,
.section-badge + h2,
.reveal-heading,
.team-copy-title {
    color: #ffffff !important;
}

.cta-title,
.career-closed-title {
    color: #ffffff !important;
}

.section-badge + h1 .font-serif,
.section-badge + h2 .font-serif,
.reveal-heading .font-serif,
.team-copy-title .font-serif,
.team-copy-title span {
    color: #7DBB40 !important;
}

.section-badge + h1 .font-serif,
.section-badge + h2 .font-serif,
.section-badge + h1 em,
.section-badge + h2 em,
.section-badge + h1 span,
.section-badge + h2 span,
.cta-title em,
.career-closed-title em,
.reveal-heading .font-serif,
.reveal-heading span,
.team-copy-title span,
.team-copy-title .font-serif {
    font-family: 'Satoshi', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 👉 NAYI GLOBAL STYLE (jo poori site pe apply ho) yahan is line ke UPAR add karein */


/* ============================================================
   2. NAVBAR — centered glass pill (logo + links + CTA)
   ============================================================ */
.desktop-nav {
    background: rgb(10 10 10 / 35%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

@media (max-width: 767.98px) {
    nav.desktop-nav {
        background: #00000047;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: transparent;
    }
}

nav.desktop-nav > div a {
    font-size: 16px;
}

#mobile-menu > a:not(.bg-brand-red) {
    font-size: 17px;
}

/* 👉 NAYI NAVBAR STYLE yahan is line ke UPAR add karein */


/* ============================================================
   3. HERO / STATS MARQUEE SECTION
   HTML: "You're in good hands" partner-logo marquee
   ============================================================ */
@media (min-width: 768px) {
    nav.desktop-nav {
        left: 0;
        width: 100%;
        max-width: none;
        transform: none;
        min-height: 88px;
        padding-left: 3%;
        padding-right: 3%;
        /* background: rgba(10, 10, 10, 0.94); */
        border: 0;
        border-bottom: 0;
        border-radius: 0;
    }

    nav.desktop-nav > div {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        gap: clamp(24px, 3vw, 48px);
        padding: 12px 24px;
        background: rgba(14, 14, 14, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        white-space: nowrap;
    }

    nav.desktop-nav > div a {
        position: relative;
        padding: 4px 0;
        transition: color 0.2s ease;
    }

    nav.desktop-nav > div a::after {
        position: absolute;
        right: 0;
        bottom: -4px;
        left: 0;
        height: 2px;
        content: "";
        background: #7DBB40;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.22s ease;
    }

    nav.desktop-nav > div a:hover,
    nav.desktop-nav > div a.is-active {
        color: #7DBB40;
    }

    nav.desktop-nav > div a:hover::after,
    nav.desktop-nav > div a.is-active::after {
        transform: scaleX(1);
    }

    nav.desktop-nav .header-request-call {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        color: #7DBB40;
        background: rgba(125, 187, 64, 0.12);
        border: 1px solid #7DBB40;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    nav.desktop-nav .header-request-call:hover {
        color: #0a0a0a;
        background: #7DBB40;
    }

    nav.desktop-nav .header-request-call::before {
        content: "☎";
        font-size: 11px;
        line-height: 1;
    }
}
.mask-edges {
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-container {
    display: flex;
    width: max-content;
    /* Ekdum Slow Motion (120s) aur Left to Right Animation */
    animation: scroll-marquee-ltr 120s linear infinite;
}

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

.partner-marquee {
    animation-duration: 55s;
    align-items: center;
}

.partner-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 28px;
    opacity: 0.92;
    filter: brightness(1.08);
}

@media (min-width: 768px) {
    .partner-logo {
        height: 48px;
        max-width: 170px;
        margin: 0 40px;
    }
}

@keyframes scroll-marquee-ltr {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

/* Stat numbers — har number ka apna theme accent color,
   services/testimonial cards ke accent palette se hi liya gaya. */
.stat-color-1 { color: #3ee6d0; }
.stat-color-2 { color: #bef264; }
.stat-color-3 { color: #ff8cc8; }
.stat-color-4 { color: #93c5fd; }

/* Footer — social icons (Connect column) */
footer {
    width: 100%;
    background-color: #0a0a0a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.footer-social-icon:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
}

@media (min-width: 640px) {
    .footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 28px;
    }
}

@media (min-width: 1024px) {
    .footer-cols {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 20px;
    }
}

/* ============================================================
   SERVICES PAGE — FULL-SCREEN HERO GLOW
   HTML: service.html <section> ... <div class="services-hero-glow">
   Same recipe as .cta-glow (red radial blur), just bigger + a hint
   of purple, centered behind the "Our Service." headline.
   ============================================================ */
/* ============================================================
   SERVICES PAGE — HOVER: IMAGE CARDS DROP & SPRING-SETTLE
   HTML: service.html hero
     <section id="services-hero" class="services-hero">
       <div class="hero-image-canvas" id="heroImageCanvas">  ← JS spawns/removes
         <div class="services-hero-card" style="--x;--y;--r;--s;...">
           <img class="services-hero-card-image">
         </div>
       </div>
       <div class="services-hero-content">...</div>
     </section>

   JS (js/hero-image-canvas.js) owns all position/timing/count logic —
   this file only defines the 3 visual states a card moves through,
   driven purely by CSS custom properties the JS sets per card
   (--x/--y = resting point, --r = rotation, --s/--s-start = scale,
   --drop = how far above --y the card starts):

     (base, just appended) → offscreen-above, scaled down, opacity 0
     .is-visible            → drops to --x/--y, spring-overshoot settle
     .is-leaving             → fades + dips slightly, then JS removes the node

   Only transform/opacity are animated (translate3d + GPU-friendly),
   never top/left/width/height, so many cards can be visible at once
   without jank. Aspect-ratio matches the real images/services/*.png
   (2700×1992 ≈ 1.35:1) so object-fit:cover barely has to crop.
   ============================================================ */
.services-hero {
    /* mobile drag-to-spawn shouldn't fight the browser's own scroll */
    touch-action: pan-y;
}
.hero-image-canvas {
    z-index: 0;
    overflow: hidden;
}
.services-hero-card {
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 1.25 / 1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transform:
        translate3d(var(--x, 50%), calc(var(--y, 50%) - var(--drop, 160px)), 0)
        translate(-50%, -50%)
        scale(var(--s-start, 0.72))
        rotate(var(--r, 0deg));
    transition: transform 0.4s ease, opacity 0.25s ease;
}
.services-hero-card.is-visible {
    opacity: 1;
    transform:
        translate3d(var(--x, 50%), var(--y, 50%), 0)
        translate(-50%, -50%)
        scale(var(--s, 1))
        rotate(var(--r, 0deg));
    /* easeOutBack: overshoots past 100% then settles — the "bounce" */
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.services-hero-card.is-leaving {
    opacity: 0;
    transform:
        translate3d(var(--x, 50%), calc(var(--y, 50%) + 22px), 0)
        translate(-50%, -50%)
        scale(calc(var(--s, 1) * 0.88))
        rotate(var(--r, 0deg));
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.services-hero-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Reduced motion: JS never attaches listeners/spawns cards in this
   case, but this is a hard CSS backstop so the canvas is guaranteed
   empty/static — hero heading + CTA already carry the full page. */
@media (prefers-reduced-motion: reduce) {
    .hero-image-canvas {
        display: none;
    }
}

.services-hero-glow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    max-width: 160vw;
    max-height: 160vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 187, 64, 0.30) 0%, rgba(124, 58, 237, 0.14) 45%, transparent 70%);
    filter: blur(60px);
}

/* ============================================================
   HERO — FULL BACKGROUND VIDEO (YouTube embed, "cover" technique)
   HTML id: #hero
   Frame ko hamesha 16:9 me oversized rakha hai taaki poore section
   ko bina stretch/black-bars ke cover kare (jaisे CSS background
   video karte hain). Parent #hero ka overflow:hidden ise crop karta hai.

   width/height aur min-width/min-height DO consistent 16:9 candidate
   boxes hain — ek vw-based (100vw × 56.25vw), ek vh-based (177.78vh ×
   100vh). Browser jo bhi bada box hota hai wahi apne aap use karta hai
   (min-width/min-height se), aur dono candidates hamesha 16:9 hi hote
   hain, isliye result har viewport ratio par (landscape desktop se
   lekar tall mobile portrait tak) bina distort/gap ke poora cover
   karta hai — pehle width vh-based tha aur height vw-based (do ALAG
   candidates cross-mix ho rahe the), jo tall/narrow (mobile) screens
   par frame ko poora fill hone se rok raha tha.
   ============================================================ */
.hero-video-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;        /* 16:9 vw-candidate: width */
    height: 56.25vw;     /* 16:9 vw-candidate: width * (9/16) */
    min-width: 177.78vh; /* 16:9 vh-candidate: height * (16/9) */
    min-height: 100vh;   /* 16:9 vh-candidate: height */
    transform: translate(-50%, -50%);
}

.hero-video-frame iframe,
.hero-video-frame video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-video-overlay {
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #0a0a0a 100%);
}

/* Mobile: dedicated mobile clip (mobile vidio.mp4) plays here, made to
   fill the full viewport height like desktop — so #hero stays full-vh
   (Tailwind's .min-h-screen, untouched) and the frame just fills #hero
   edge-to-edge; object-fit: cover on the <video> itself (set above)
   handles the crop. #hero ID selector hai isliye specificity zyada hai,
   is rule ki zaroorat sirf video-frame ko full-fill karne ke liye hai.
   ============================================================ */
@media (max-width: 767px) {
    #hero {
        min-height: 100vh;
        height: 100vh;
        /* 100vh mobile browsers me address-bar hide hone wali (largest)
           viewport height use karta hai, jabki page load pe bar visible
           hoti hai — isliye #hero screen se lamba ho jaata tha aur video
           ka neeche wala hissa fold ke bahar chala jaata tha (yehi "video
           cut" dikhta tha). 100dvh actual visible viewport track karta
           hai, isliye fallback ke baad override kar rahe hain. */
        min-height: 100dvh;
        height: 100dvh;
    }
    .hero-video-frame {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        transform: none;
    }
    /* object-fit: cover (base rule, line ~270) already applies here — video
       poore mobile screen ko edge-to-edge fill karta hai, bina stretch/
       distort ke (aspect ratio maintain rehta hai), bas screen ke actual
       ratio se thoda alag hone par top/bottom minimal crop ho sakta hai —
       yehi standard hero-background-video behavior hai, koi black bars
       nahi rehte. */
}

/* 👉 NAYI HERO/STATS STYLE yahan is line ke UPAR add karein */


/* ============================================================
   4. SERVICES SECTION — STACKING CARDS
   HTML id: #services-section
   .stack-card = sirf sticky wrapper       (transform NAHI)
   .card-inner = card + scale animation
   .card-dim   = dim overlay (opacity animation, fade ke liye)
   ============================================================ */
.stack-container {
    width: 100%;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-gutter) 6vh;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.stack-card {
    width: 100%;
    position: sticky;
    top: calc(32px + (var(--index) * 18px));  /* stack ka sliher gap */
    z-index: var(--index);                     /* baad wala upar paint ho */
    scroll-margin-top: 100px;                   /* footer se #id link aane par fixed nav ke peeche na chhupe */
}

.card-inner {
    --card-ink: #ffffff;
    --card-muted: #9ca3af;
    --card-line: rgba(255, 255, 255, 0.1);
    width: 100%;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
    grid-template-areas: "content media";
    align-items: center;
    gap: 36px 48px;
    min-height: 520px;
    padding: 44px 48px;
    border-radius: 30px;
    background-color: #0d0d0d;
    border: 1px solid rgba(125, 187, 64, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    transform-origin: center top;
    will-change: transform;
    backface-visibility: hidden;
    transition: background-color 0.45s ease, border-color 0.45s ease,
                box-shadow 0.45s ease;
}

.card-inner.is-flip {
    grid-template-areas: "media content";
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
}

.card-inner:hover,
.card-inner:focus-within {
    background-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.7);
    --card-ink: #101010;
    --card-muted: #4b5145;
    --card-line: rgba(16, 16, 16, 0.12);
}

/* Accent glow — --accent har .stack-card par inline set hai */
.card-inner::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--accent, rgba(125, 187, 64, 0.3));
    filter: blur(90px);
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-inner:hover::before,
.card-inner:focus-within::before {
    opacity: 0.45;
    transform: scale(1.08);
}

/* film-grain on the card face */
.card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.card-inner:hover::after,
.card-inner:focus-within::after {
    opacity: 0.18;
    mix-blend-mode: multiply;
}

.card-index,
.card-content,
.card-media {
    position: relative;
    z-index: 1;
}

.card-index {
    position: absolute;
    top: 22px;
    right: 36px;
    z-index: 2;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(64px, 8vw, 110px);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    transition: color 0.45s ease;
}

.card-inner.is-flip .card-index {
    right: auto;
    left: 36px;
}

.card-inner:hover .card-index,
.card-inner:focus-within .card-index {
    color: rgba(125, 187, 64, 0.22);
}

/* dim overlay — opacity animate hoti hai, card transparent nahi hota */
.card-dim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(10, 10, 10, 0.72);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    will-change: opacity;
}

.card-content {
    grid-area: content;
    min-width: 0;
}

.card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #9ed45a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.45s ease;
}

.card-inner:hover .card-kicker,
.card-inner:focus-within .card-kicker {
    color: #4f7f24;
}

.card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(125, 187, 64, 0.12);
    border: 1px solid rgba(125, 187, 64, 0.35);
    transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.card-icon i {
    font-size: 1.05rem;
    color: #7DBB40;
}

.card-inner:hover .card-icon,
.card-inner:focus-within .card-icon {
    background: #7DBB40;
    transform: rotate(-6deg);
}

.card-inner:hover .card-icon i,
.card-inner:focus-within .card-icon i {
    color: #0a0a0a;
}

.card-content h3 {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--card-ink);
    transition: color 0.45s ease;
}

.card-content h3 a {
    color: inherit;
    text-decoration: none;
}

.card-content h3 a:hover {
    opacity: 0.85;
}

.card-content p {
    font-size: 1.05rem;
    color: var(--card-muted);
    line-height: 1.65;
    font-weight: 400;
    margin: 0 0 26px 0;
    max-width: 540px;
    transition: color 0.45s ease;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.features li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--card-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    font-weight: 500;
    color: var(--card-ink);
    transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7DBB40;
}

.card-inner:hover .features li,
.card-inner:focus-within .features li {
    background: rgba(16, 16, 16, 0.04);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--card-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.35s ease, gap 0.35s ease;
}

.card-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.card-cta:hover svg {
    transform: translateX(4px);
}

.card-media {
    grid-area: media;
    position: relative;
    min-height: 420px;
    align-self: stretch;
    border-radius: 22px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.45s ease;
}

.card-media::before,
.card-media::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 2;
    pointer-events: none;
    background: none;
    border-color: #7DBB40;
    border-style: solid;
}

.card-media::before {
    top: 12px;
    left: 12px;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 6px;
}

.card-media::after {
    right: 12px;
    bottom: 12px;
    border-width: 0 2px 2px 0;
    border-bottom-right-radius: 6px;
    height: 22px;
    background: none;
}

.card-inner:hover .card-media,
.card-inner:focus-within .card-media {
    transform: scale(1.03);
    border-color: rgba(125, 187, 64, 0.45);
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #7DBB40;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 8px 24px rgba(125, 187, 64, 0.35);
}

.play-btn:hover {
    background-color: #6AA636;
    transform: translate(-50%, -50%) scale(1.06);
}

.play-btn i {
    color: #fff;
    font-size: 1.3rem;
    margin-left: 4px;
}

.video-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 0.95rem;
}

.video-controls i { cursor: pointer; }

.progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    position: relative;
    margin: 0 10px;
}

.progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #7DBB40;
    border-radius: 2px;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -4px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}

/* SERVICES — MOBILE */
@media (max-width: 768px) {
    .stack-container {
        padding: 0 15px 4vh 15px;
        gap: 24px;
    }

    .stack-card {
        top: calc(16px + (var(--index) * 12px));
    }

    .card-inner::before {
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        filter: blur(70px);
    }

    /* Services page (blob cards): mobile pe swipe/sticky-stack effect
       off — bas normal simple stacked list, sirf desktop pe fancy hai */
    .stack-card:has(.blob) {
        position: relative;
        top: auto;
        z-index: auto;
    }

    .card-inner,
    .card-inner.is-flip {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "media";
        align-items: stretch;
        gap: 22px;
        padding: 24px;
        min-height: auto;
        border-radius: 24px;
    }

    .card-index {
        top: 14px;
        right: 18px;
        font-size: 64px;
    }

    .card-inner.is-flip .card-index {
        left: auto;
        right: 18px;
    }

    .card-content h3 {
        font-size: 1.7rem;
    }

    .card-content p {
        font-size: 0.95rem;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .features {
        margin-bottom: 20px;
    }

    .card-media {
        width: 100%;
        min-height: 210px;
        border-radius: 16px;
    }

    .play-btn { width: 52px; height: 52px; }
    .play-btn i { font-size: 1.1rem; }

    .video-controls {
        font-size: 0.8rem;
        gap: 10px;
        bottom: 15px;
        left: 15px;
        right: 15px;
    }
}

/* 👉 NAYI SERVICES STYLE yahan is line ke UPAR add karein */


/* ============================================================
   5. RESULTS SECTION — SCROLL-DRIVEN WAVE GALLERY
   HTML: #results-section > .rw-pin > .rw-stage
           > .rw-line (decorative sine stroke)
           > .results-track > .result-card
   Vertical scroll pins the stage and slides the track left.
   Each card's Y follows a traveling sine so the row rides the
   wave (js/main.js initResultsWave). No CSS marquee.
   ============================================================ */
.rw-pin {
    width: 100%;
}

.rw-stage {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.rw-line {
    position: absolute;
    left: -4%;
    right: -4%;
    top: 50%;
    width: 108%;
    height: 220px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

.rw-line path {
    fill: none;
    stroke: rgba(125, 187, 64, 0.38);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-dasharray: 10 14;
}

.results-track {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: max-content;
    padding: 80px 6vw;
    will-change: transform;
}

.result-card {
    flex: 0 0 auto;
    width: 280px;
    aspect-ratio: 5 / 6;
    margin-right: 28px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.7);
    backface-visibility: hidden;
    will-change: transform;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.result-card:hover {
    border-color: rgba(125, 187, 64, 0.55);
    box-shadow: 0 0 0 1px rgba(125, 187, 64, 0.25),
                0 26px 48px -20px rgba(0, 0, 0, 0.8);
}

.result-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 1024px) {
    .rw-stage { min-height: 620px; }
    .result-card { width: 320px; margin-right: 36px; }
}

@media (max-width: 768px) {
    .rw-stage { min-height: 420px; }
    .results-track { padding: 56px 16px; }
    .result-card {
        width: 200px;
        margin-right: 16px;
        border-radius: 18px;
    }
    .rw-line { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .rw-stage {
        min-height: auto;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .results-track {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 20px 16px 8px;
        transform: none !important;
    }
    .result-card {
        margin: 0 8px 16px;
        transform: none !important;
    }
    .result-card:nth-child(odd) { transform: translateY(-18px) !important; }
    .result-card:nth-child(even) { transform: translateY(18px) !important; }
}

/* 👉 NAYI RESULTS STYLE yahan is line ke UPAR add karein */


/* ============================================================
   6. CLIENTS SECTION — PILL "CHAOS" LAYOUT
   HTML id: #clients-section
   Hidden per request (logos already scroll in the partners marquee).
   ============================================================ */
#clients-section {
    display: none !important;
}
.pill-horizontal {
    width: 220px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.pill-horizontal.small { width: 190px; }
.pill-horizontal.large { width: 260px; }

.pill-horizontal:hover, .pill-vertical:hover {
    transform: translateY(-8px) scale(1.04);
}

.client-logo {
    object-fit: contain;
    max-height: 90px;
    max-width: 100%;
}

.pill-vertical {
    width: 90px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.client-logo-rotated {
    transform: rotate(-90deg);
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
}

/* CLIENTS — MOBILE FIX
   Pills the a fixed px width (220/190/260px) — on narrow phones that's
   wider than half the grid row (grid-cols-2), so logos overflowed their
   cell. Below 640px pills fill their grid cell instead. */
@media (max-width: 640px) {
    .pill-horizontal,
    .pill-horizontal.small,
    .pill-horizontal.large {
        width: 100%;
        height: 64px;
    }
    .client-logo {
        max-height: 64px;
    }
}

/* ============================================================
   TESTIMONIALS — two-row opposite-direction auto-scroll
   Row 1 scrolls right (scroll-marquee-ltr), Row 2 scrolls left
   (team-scroll-rtl) — both keyframes already defined above.
   ============================================================ */
.testimonial-viewport {
    width: 100%;
    overflow: hidden;
}

.testimonial-row {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.testimonial-row-right {
    animation: scroll-marquee-ltr 45s linear infinite;
}

.testimonial-row-left {
    animation: team-scroll-rtl 45s linear infinite;
}

.testimonial-marquee-wrap:hover .testimonial-row {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .testimonial-row-right,
    .testimonial-row-left {
        animation-duration: 30s;
    }
}

/* ============================================================
   TESTIMONIALS — uses the site-wide dark background
   ============================================================ */
#testimonials-section {
    position: relative;
    width: 100%;
    padding-top: 64px;
    padding-bottom: 72px;
    overflow: hidden;
}

#testimonials-section > * {
    position: relative;
    z-index: 1;
    max-width: none;
}

.testimonial-accent {
    position: relative;
    overflow: hidden;
}

.t-card {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    transition: border-color 0.3s ease;
}

.t-card:hover {
    border-color: rgba(125, 187, 64, 0.45);
}

@media (min-width: 640px) {
    .t-card {
        width: 360px;
        padding: 20px 20px 22px;
    }
}

.t-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.t-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    flex-shrink: 0;
}

.t-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.t-card-who {
    min-width: 0;
}

.t-card-name {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.t-card-role {
    display: block;
    margin-top: 2px;
    color: #7DBB40;
    font-size: 12px;
    line-height: 1.3;
}

.t-card-rule {
    width: 100%;
    height: 1px;
    margin: 12px 0 10px;
    background: rgba(255, 255, 255, 0.1);
}

.t-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.t-card-stars {
    color: #f5c518;
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 1;
}

.t-card-quote {
    margin: 0;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}

/* 👉 NAYI CLIENTS STYLE yahan is line ke UPAR add karein */


/* ============================================================
   6b. CTA SECTION — MESH GLOW CARD
   HTML: <section class="cta-section"> <div class="cta-mesh"> <div class="cta-panel">
   ============================================================ */
.cta-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    padding: 72px var(--site-gutter) 56px;
}

@media (min-width: 768px) {
    .cta-section {
        padding: 96px var(--site-gutter) 80px;
    }
}

.cta-mesh {
    position: absolute;
    inset: -18% -8% -8%;
    pointer-events: none;
    z-index: 0;
}

.cta-mesh::before,
.cta-mesh::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
}

.cta-mesh::before {
    width: min(880px, 110vw);
    height: min(560px, 78vw);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse at 38% 42%, rgba(125, 187, 64, 0.58) 0%, transparent 62%),
        radial-gradient(ellipse at 68% 58%, rgba(56, 189, 248, 0.28) 0%, transparent 58%);
    animation: cta-mesh-drift 18s ease-in-out infinite;
}

.cta-mesh::after {
    width: min(420px, 58vw);
    height: min(420px, 58vw);
    left: 6%;
    bottom: -8%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%);
    animation: cta-mesh-drift 22s ease-in-out infinite reverse;
}

@keyframes cta-mesh-drift {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.cta-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 32px;
    align-items: center;
    max-width: var(--site-max);
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding: 34px 24px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.72) 0%, rgba(6, 6, 8, 0.88) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(125, 187, 64, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
    .cta-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 64px;
        padding: 48px 56px;
    }
}

.cta-panel::before {
    content: '';
    position: absolute;
    left: 18%;
    top: -55%;
    transform: none;
    width: 55%;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(125, 187, 64, 0.28) 0%, transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}

.cta-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
    background-image: radial-gradient(rgba(255, 255, 255, 0.45) 0.8px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
}

.cta-main,
.cta-seal {
    position: relative;
    z-index: 1;
}

.cta-main {
    width: 100%;
}

/* eyebrow — green dot + label + hairline instead of the boxed badge */
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    color: #9ed45a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cta-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7DBB40;
    box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.2);
}

.cta-eyebrow-line {
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 187, 64, 0.7), rgba(125, 187, 64, 0));
}

.cta-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.14;
    margin: 0 0 14px;
    color: #fff;
}

.cta-title em {
    position: relative;
    display: inline-block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.06em;
    padding: 0 4px;
    color: #9ed45a;
}

/* hand-drawn underline that draws itself once on load */
.cta-underline {
    position: absolute;
    left: 0;
    bottom: -0.12em;
    width: 100%;
    height: 0.26em;
    overflow: visible;
    color: #7DBB40;
}

.cta-underline path {
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
    animation: cta-underline-draw 1.2s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes cta-underline-draw {
    to { stroke-dashoffset: 0; }
}

.cta-copy {
    font-size: clamp(14px, 1.6vw, 17px);
    color: rgba(255, 255, 255, 0.55);
    max-width: 520px;
    margin: 0;
    line-height: 1.65;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 13px 28px;
    border-radius: 999px;
    background: #7DBB40;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 32px rgba(125, 187, 64, 0.38);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.cta-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.cta-btn:hover {
    background: #6AA636;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(125, 187, 64, 0.5);
}

.cta-btn:hover svg {
    transform: translateX(4px);
}

/* secondary: direct phone line */
.cta-alt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.cta-alt i {
    color: #7DBB40;
    font-size: 12px;
}

.cta-alt:hover {
    border-color: rgba(125, 187, 64, 0.6);
    background: rgba(125, 187, 64, 0.08);
    color: #fff;
}

/* ------------------------------------------------------------
   Rotating seal — circular running text around a green core.
   The whole seal is the link; the ring text spins slowly and
   pauses on hover while the core arrow steps out.
   ------------------------------------------------------------ */
.cta-seal {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 168px;
    height: 168px;
    justify-self: start;
}

.cta-seal::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    pointer-events: none;
}

.cta-seal-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: cta-seal-spin 24s linear infinite;
}

.cta-seal-ring text {
    fill: rgba(255, 255, 255, 0.62);
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@keyframes cta-seal-spin {
    to { transform: rotate(360deg); }
}

.cta-seal:hover .cta-seal-ring {
    animation-play-state: paused;
}

.cta-seal-core {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #7DBB40;
    color: #fff;
    box-shadow: 0 12px 30px -6px rgba(125, 187, 64, 0.6), 0 0 0 8px rgba(125, 187, 64, 0.1);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease;
}

.cta-seal-core svg {
    width: 24px;
    height: 24px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cta-seal:hover .cta-seal-core {
    transform: scale(1.08);
    background: #6AA636;
}

.cta-seal:hover .cta-seal-core svg {
    transform: translate(3px, -3px);
}

@media (min-width: 900px) {
    .cta-seal {
        width: 196px;
        height: 196px;
        justify-self: end;
    }

    .cta-seal-core {
        width: 96px;
        height: 96px;
    }

    /* ticket-style perforation between the copy and the seal */
    .cta-seal::before {
        content: '';
        position: absolute;
        left: -32px;
        top: -22%;
        width: 1px;
        height: 144%;
        background: repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.22) 0 6px,
            transparent 6px 13px
        );
        pointer-events: none;
    }
}

@media (max-width: 700px) {
    .cta-panel {
        gap: 26px;
        padding: 28px 22px;
        border-radius: 22px;
    }

    .cta-seal {
        width: 142px;
        height: 142px;
    }

    .cta-seal-core {
        width: 72px;
        height: 72px;
    }

    .cta-seal-core svg {
        width: 20px;
        height: 20px;
    }

    /* viewBox units get scaled down with the smaller seal, so bump the
       ring text up to keep it legible */
    .cta-seal-ring text {
        font-size: 14px;
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-mesh::before,
    .cta-mesh::after,
    .cta-seal-ring,
    .cta-underline path,
    .cta-btn,
    .cta-btn svg,
    .cta-alt,
    .cta-seal-core,
    .cta-seal-core svg {
        animation: none;
        transition: none;
    }

    .cta-underline path {
        stroke-dashoffset: 0;
    }

    .cta-btn:hover,
    .cta-seal:hover .cta-seal-core {
        transform: none;
    }
}

/* ============================================================
   CAREER PAGE — NOT HIRING STATE
   ============================================================ */
.career-closed {
    display: flex;
    justify-content: center;
}

.career-closed-card {
    width: 100%;
    max-width: 760px;
    text-align: center;
    padding: 48px 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.72) 0%, rgba(6, 6, 8, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.career-closed-card .cta-badge {
    margin-bottom: 18px;
}

.career-closed-title {
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
}

.career-closed-title em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

.career-closed-copy {
    margin: 0 auto;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
    .career-closed-card {
        padding: 64px 48px;
    }
}

/* ============================================================
   6c. DECORATIVE GLOW — CTA aur Footer ke beech
   ============================================================ */
.gradient-glass-orb {
    position: absolute;
    left: 50%;
    top: -90px;
    transform: translateX(-50%);
    width: 240px;
    height: 240px;
    max-width: 55vw;
    max-height: 55vw;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(125, 187, 64, 0.55) 0%, rgba(56, 189, 248, 0.18) 48%, transparent 72%);
    filter: blur(36px);
    opacity: 0.85;
    pointer-events: none;
}

@media (max-width: 768px) {
    .gradient-glass-orb {
        top: -64px;
        width: 160px;
        height: 160px;
        filter: blur(28px);
    }
}

/* ============================================================
   CAREER PAGE — SHORTS CAROUSEL
   HTML: <div class="shorts-viewport"><div class="shorts-track">
   Same mask/scroll recipe as .team-viewport/.team-track, just
   vertical (9:16) cards — each an autoplay/muted/looped iframe
   (same recipe as index.html's #hero video).
   ============================================================ */
.shorts-viewport {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.shorts-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: team-scroll-rtl 55s linear infinite;
    will-change: transform;
}

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

@media (max-width: 768px) {
    .shorts-track { animation-duration: 38s; }
    .shorts-viewport {
        padding: 0 12px;
        -webkit-mask-image: linear-gradient(to right,
            transparent 0%, #000 7%, #000 93%, transparent 100%);
        mask-image: linear-gradient(to right,
            transparent 0%, #000 7%, #000 93%, transparent 100%);
    }
}

/* 👉 NAYI CTA STYLE yahan is line ke UPAR add karein */


/* ============================================================
   6d. TEAM SECTION — left copy + 2-col flip cards
   HTML id: #team-section
   ============================================================ */
.team-section {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.team-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
.team-copy {
    position: relative;
}
.team-copy-title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 16px;
}
.team-copy-title span {
    position: relative;
    display: inline-block;
}
.team-copy-title span::after {
    display: none;
    opacity: 0.9;
}
.team-points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.team-points li {
    position: relative;
    padding-left: 32px;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}
.team-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #7DBB40;
    box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.18);
}
.team-points li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    width: 7px;
    height: 4px;
    border-left: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
    transform: rotate(-45deg);
}
.team-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #7DBB40;
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.team-cta:hover {
    background: #6AA636;
    color: #0a0a0a;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 380px;
}

.team-flip {
    perspective: 1200px;
    height: 380px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}
.team-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-flip.is-flipped .team-flip-inner,
.team-flip:focus-visible .team-flip-inner {
    transform: rotateY(180deg);
}
.team-flip-front,
.team-flip-back {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.team-flip-front {
    background: #111;
}
.team-flip-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
.team-flip-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.team-flip-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 42%, transparent 70%);
    pointer-events: none;
}
.team-flip-meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.team-flip-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
}
.team-flip-name::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7DBB40;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(125, 187, 64, 0.25);
}
.team-flip-role {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    padding-left: 16px;
}
.team-flip-back {
    background: linear-gradient(160deg, #161616, #0d0d0d);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    text-align: center;
    gap: 22px;
}
.team-flip-summary {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.6;
    max-width: 240px;
}
.team-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.team-li-btn,
.team-ig-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-li-btn {
    background: #0A66C2;
    box-shadow: 0 10px 24px rgba(10, 102, 194, 0.45), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
}
.team-ig-btn {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 10px 24px rgba(214, 36, 159, 0.4), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
}
.team-li-btn:hover,
.team-ig-btn:hover {
    transform: translateY(-3px) scale(1.04);
    color: #fff;
}
.team-li-btn:hover {
    box-shadow: 0 14px 28px rgba(10, 102, 194, 0.55), 0 2px 0 rgba(255, 255, 255, 0.25) inset;
}
.team-ig-btn:hover {
    box-shadow: 0 14px 28px rgba(214, 36, 159, 0.5), 0 2px 0 rgba(255, 255, 255, 0.25) inset;
}

@media (min-width: 640px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .team-flip { height: 420px; }
}

@media (min-width: 1024px) {
    .team-split {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
        gap: 48px;
        align-items: start;
    }
    .team-copy {
        position: sticky;
        top: 120px;
    }
    .team-flip:hover .team-flip-inner {
        transform: rotateY(180deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-flip-inner,
    .team-li-btn,
    .team-ig-btn { transition: none; }
    .team-flip:hover .team-flip-inner,
    .team-flip.is-flipped .team-flip-inner {
        transform: none;
    }
    .team-flip-back {
        transform: none;
        position: relative;
        min-height: auto;
        padding-top: 0;
    }
}

/* 👉 leftover marquee helpers kept for other pages using .team-track */
.team-viewport {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}
.team-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: team-scroll-rtl 50s linear infinite;
}
@keyframes team-scroll-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   6e. SERVICES PAGE — BLOB CARDS (bright gradient service cards)
   HTML: <section class="blob g-*"> ... ".flip" = mirrored corners.
   Roarbank-style: page dark, cards bright pastel, dark text inside.
   ============================================================ */
.blob {
    position: relative;
    overflow: hidden;
    border-radius: 90px 190px;
    color: #111;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
    transform-origin: center top;
    will-change: transform;
    backface-visibility: hidden;
}
.blob.flip { border-radius: 190px 90px; }
.blob:hover { transform: translateY(-6px); }

/* dim overlay for the stack squeeze — opacity animate hoti hai (GSAP) */
.blob-dim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    will-change: opacity;
}

@media (max-width: 1279.98px) {
    .blob, .blob.flip { border-radius: 40px; }
}

.blob h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #0b0b0b; }
.blob p.lead { color: #2c2c2c; }

.blob .tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111;
}

.btn-black {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0b0b0b;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 38px;
    border-radius: 999px;
    transition: all 0.3s;
}
.btn-black:hover { background: #7DBB40; }

/* ============================================================
   SERVICES PAGE — SERVICE INDEX (numbered editorial rows)
   HTML: service.html <div id="services-list" class="svcx-list">
           > .svcx-row (one per service, keeps its deep-link id)
             > .svcx-sweep  (dark panel that slides up on hover)
             > .svcx-index  (serif numeral)
             > .svcx-icon   (icon chip)
             > .svcx-body   (.svcx-title / .svcx-sub / .svcx-text)
             > .svcx-btn    (per-service CTA)
   Replaces the old 3-col card grid: reads like a printed index on
   the dark background, and each row flips to a white panel with
   dark text on hover / keyboard focus.
   Responsive: stacked (mobile), index + icon inline (>=640px),
   full 4-track row with the CTA on the right (>=1024px).
   ============================================================ */
.svcx-list {
    --svcx-green: #7DBB40;
    --svcx-ink: #ffffff;
    --svcx-muted: #9ca3af;
    --svcx-line: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svcx-row {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 14px;
    padding: 26px 22px;
    border: 1px solid var(--svcx-line);
    border-radius: 22px;
    background: #0d0d0d;
    scroll-margin-top: 120px;
    transition: border-color 0.45s ease, box-shadow 0.45s ease,
                transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* every direct child sits above the sweeping panel */
.svcx-index,
.svcx-icon,
.svcx-body,
.svcx-btn {
    position: relative;
    z-index: 1;
}

/* mobile: "01 + icon" share the first line, copy and CTA span full width */
.svcx-index {
    align-self: center;
}

.svcx-icon {
    justify-self: start;
}

.svcx-body,
.svcx-btn {
    grid-column: 1 / -1;
}

/* white panel that sweeps up from the bottom */
.svcx-sweep {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(120% 160% at 92% 0%, rgba(125, 187, 64, 0.16), rgba(125, 187, 64, 0) 58%),
        linear-gradient(140deg, #ffffff 0%, #f3f7ec 55%, #ffffff 100%);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.svcx-row:hover,
.svcx-row:focus-within {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.85);
}

.svcx-row:hover .svcx-sweep,
.svcx-row:focus-within .svcx-sweep {
    transform: translateY(0);
}

.svcx-index {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.22);
    transition: color 0.45s ease;
}

.svcx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--svcx-line);
    border-radius: 14px;
    background: rgba(125, 187, 64, 0.14);
    color: var(--svcx-green);
    font-size: 17px;
    transition: background 0.45s ease, color 0.45s ease,
                border-color 0.45s ease, transform 0.45s ease;
}

.svcx-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--svcx-ink);
    transition: color 0.45s ease;
}

.svcx-sub {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--svcx-green);
    transition: color 0.45s ease;
}

.svcx-text {
    margin: 0;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--svcx-muted);
    transition: color 0.45s ease;
}

.svcx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: start;
    padding: 12px 22px;
    border: 1px solid var(--svcx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--svcx-ink);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.svcx-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s ease;
}

/* inverted state on the white panel (hover / focus anywhere in the row) */
.svcx-row:hover .svcx-index,
.svcx-row:focus-within .svcx-index {
    color: rgba(90, 143, 44, 0.85);
}

.svcx-row:hover .svcx-icon,
.svcx-row:focus-within .svcx-icon {
    background: var(--svcx-green);
    border-color: var(--svcx-green);
    color: #ffffff;
    transform: rotate(-6deg);
}

.svcx-row:hover .svcx-title,
.svcx-row:focus-within .svcx-title {
    color: #101010;
}

.svcx-row:hover .svcx-sub,
.svcx-row:focus-within .svcx-sub {
    color: #4f7f24;
}

.svcx-row:hover .svcx-text,
.svcx-row:focus-within .svcx-text {
    color: #4b5145;
}

.svcx-row:hover .svcx-btn,
.svcx-row:focus-within .svcx-btn {
    background: #101010;
    border-color: #101010;
    color: #ffffff;
}

.svcx-btn:hover svg,
.svcx-btn:focus-visible svg {
    transform: translateX(4px);
}

/* --- responsive --- */
@media (min-width: 640px) {
    .svcx-row {
        grid-template-columns: 40px 46px minmax(0, 1fr);
        align-items: start;
        gap: 12px 20px;
        padding: 28px 26px;
    }

    .svcx-index {
        align-self: start;
        padding-top: 9px;
        font-size: 28px;
    }

    .svcx-body {
        grid-column: 3;
    }

    .svcx-btn {
        grid-column: 3;
    }
}

@media (min-width: 1024px) {
    .svcx-list {
        gap: 14px;
    }

    .svcx-row {
        grid-template-columns: 52px 52px minmax(0, 1fr) auto;
        align-items: center;
        gap: 26px;
        padding: 30px 32px;
    }

    .svcx-index {
        align-self: center;
        padding-top: 0;
        font-size: 32px;
    }

    .svcx-icon {
        align-self: center;
        width: 52px;
        height: 52px;
        font-size: 19px;
    }

    .svcx-title {
        font-size: 25px;
    }

    .svcx-body {
        grid-column: 3;
    }

    .svcx-btn {
        grid-column: 4;
        align-self: center;
    }
}

@media (max-width: 480px) {
    .svcx-row {
        padding: 22px 20px;
        border-radius: 18px;
        gap: 14px;
    }

    .svcx-title {
        font-size: 20px;
    }

    .svcx-btn {
        width: 100%;
        padding: 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svcx-row,
    .svcx-sweep,
    .svcx-index,
    .svcx-icon,
    .svcx-title,
    .svcx-sub,
    .svcx-text,
    .svcx-btn,
    .svcx-btn svg {
        transition: none;
    }

    .svcx-row:hover,
    .svcx-row:focus-within {
        transform: none;
    }

    .svcx-row:hover .svcx-icon,
    .svcx-row:focus-within .svcx-icon {
        transform: none;
    }
}

/* gradients — har card alag */
.g-hero  { background: linear-gradient(120deg, #9ed7f5 0%, #7ee8e0 55%, #8ff0c8 100%); }
.g-lime  { background: linear-gradient(120deg, #f2f0a1 0%, #b9ee9c 55%, #9beec4 100%); }
.g-pink  { background: linear-gradient(120deg, #ffd9e8 0%, #ffb3cf 55%, #e9b8f5 100%); }
.g-snow  { background: linear-gradient(120deg, #eef1f6 0%, #e3e9f2 100%); }
.g-peach { background: linear-gradient(120deg, #ffd9b8 0%, #ffb3a8 55%, #ffc2d4 100%); }
.g-lav   { background: linear-gradient(120deg, #d8ccff 0%, #c3b5ff 55%, #a8c8ff 100%); }
.g-mint  { background: linear-gradient(120deg, #a8f0b8 0%, #8fe8d0 55%, #9ee2f5 100%); }

/* ---- visual 1: dark phone mock (card 1) ---- */
.phone {
    width: 240px; height: 440px; border-radius: 40px;
    background: #0d0d0d; border: 6px solid #1b1b1b;
    box-shadow: 0 40px 90px -25px rgba(0,0,0,.45);
    overflow: hidden; position: relative; transform: rotate(-5deg);
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.blob:hover .phone { transform: rotate(0) scale(1.03); }
.phone .notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 86px; height: 20px; border-radius: 999px; background: #1b1b1b; z-index: 5;
}
.spark { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin-top: 16px; }
.spark span { flex: 1; border-radius: 4px 4px 0 0; background: #7DBB40; }
.p-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    margin: 0 14px 10px; background: #151515; border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px; color: #fff;
}
.p-dot {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #0a0a0a; background: #7DBB40;
}

/* ---- visual 2: vertical "battery" ---- */
.battery-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.battery {
    width: 130px; height: 340px; border-radius: 70px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 70px -25px rgba(0,0,0,.35);
    background: rgba(255,255,255,.4);
}
.battery .top { flex: 1; background: rgba(20,120,70,.35); }
.battery .bottom {
    height: 42%; background: #c98af0; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 20px; color: #111; font-weight: 700;
    font-size: 12px; text-align: center;
}
.float-chip {
    position: absolute; left: -70px; top: 70px;
    background: #8fd6ff; color: #0b0b0b; font-weight: 800; font-size: 14px;
    padding: 8px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* ---- visual 3: profile card ---- */
.profile-card {
    width: 290px; background: #fff; border-radius: 28px; padding: 26px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.35);
    transform: rotate(3deg); transition: transform 0.6s; color: #111;
}
.blob:hover .profile-card { transform: rotate(0) scale(1.03); }
.avatar {
    width: 74px; height: 74px; border-radius: 999px;
    background: linear-gradient(135deg, #7DBB40, #ff8a5c);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 26px;
}

/* ---- visual 4: chat bubbles ---- */
.chat-stack { display: flex; flex-direction: column; gap: 14px; width: 320px; }
.bubble {
    padding: 14px 20px; border-radius: 22px; font-size: 14px; font-weight: 500;
    box-shadow: 0 15px 40px -15px rgba(0,0,0,.2); max-width: 85%;
}
.bubble.in { background: #fff; color: #111; border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.out { background: #0b0b0b; color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }

/* ---- visual 5: browser window ---- */
.browser {
    width: 360px; background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.35);
    transform: rotate(-2deg); transition: transform 0.6s; color: #111;
}
.blob:hover .browser { transform: rotate(0) scale(1.02); }
.browser .bar-top { display: flex; gap: 6px; padding: 12px 14px; background: #f1f1f1; }
.browser .bar-top span { width: 10px; height: 10px; border-radius: 999px; }
.score-ring {
    width: 96px; height: 96px; border-radius: 999px;
    background: conic-gradient(#16a34a 0% 98%, #e5e7eb 98% 100%);
    display: flex; align-items: center; justify-content: center;
}
.score-ring b {
    width: 74px; height: 74px; border-radius: 999px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #16a34a;
}

/* ---- visual 6: video player ---- */
.player {
    width: 230px; height: 400px; border-radius: 28px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, #1b1035, #3b1d5e 60%, #6b2d8f);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.45);
    transform: rotate(4deg); transition: transform 0.6s;
}
.blob:hover .player { transform: rotate(0) scale(1.03); }
.play-circle {
    position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 999px;
    background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
    color: #111; font-size: 22px;
}
.views-chip {
    position: absolute; top: 18px; left: 18px;
    background: #7DBB40; color: #fff; font-weight: 800; font-size: 12px;
    padding: 6px 12px; border-radius: 999px;
}

/* ---- visual 7: sleek black card ---- */
.black-card {
    width: 400px; height: 250px; border-radius: 26px;
    background: linear-gradient(145deg, #171717, #050505);
    box-shadow: 0 50px 100px -30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    position: relative; padding: 28px 30px;
    transform: rotate(-6deg); transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    color: #fff;
}
.blob:hover .black-card { transform: rotate(0) scale(1.03); }
.black-card .chip {
    width: 44px; height: 32px; border-radius: 7px;
    background: linear-gradient(135deg, #e6c46a, #b98a2f); margin-top: 26px;
}

/* ---- visual 7b: last card mockup — real phone screenshot, same
   tilt-then-straighten hover treatment as .phone/.black-card above. ---- */
.last-card-mockup {
    width: 230px; height: auto;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,.5));
    transform: rotate(-6deg); transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.blob:hover .last-card-mockup { transform: rotate(0) scale(1.03); }

/* ---- visual 8: generic stat/rank mini-card (SEO, Bulk SMS) — content-
   driven height (no fixed tall box like .phone/.player), so it never
   needs a separate mobile height override. ---- */
.mini-card {
    width: 320px; background: #fff; border-radius: 24px; padding: 24px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.35);
    transform: rotate(-3deg); transition: transform 0.6s; color: #111;
}
.blob:hover .mini-card { transform: rotate(0) scale(1.03); }
.mini-search {
    display: flex; align-items: center; gap: 10px;
    background: #f1f1f1; border-radius: 999px; padding: 10px 16px;
    font-size: 13px; color: #444; margin-bottom: 18px;
}
.mini-stat-label { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
.mini-stat-value { font-size: 26px; font-weight: 900; color: #111; margin-bottom: 2px; }
.mini-stat-sub { font-size: 11px; color: #6b7280; margin-bottom: 16px; }
.mini-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.mini-row:first-of-type { border-top: none; }
.mini-badge {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff; background: #7DBB40;
}
.mini-badge.ok { background: #16a34a; }
.mini-row-title { font-size: 13px; font-weight: 700; color: #111; }
.mini-row-meta { font-size: 11px; color: #6b7280; }

@media (max-width: 768px) {
    /* Height override, not just width — pehle sirf width shrink hoti thi,
       height 440px/400px/340px fixed reh jaati thi, isliye har card ka
       visual (doosra) half stack hone par bahut lamba/disproportionate
       dikhta tha. Ab dono axes ek saath, roughly same aspect ratio par
       scale hote hain. */
    .phone { width: 168px; height: 308px; }
    .player { width: 160px; height: 278px; }
    .battery { width: 96px; height: 250px; }
    .black-card { width: 100%; max-width: 320px; height: 200px; padding: 22px 24px; }
    .black-card .chip { margin-top: 16px; }
    .last-card-mockup { width: 170px; }
    .browser, .chat-stack, .mini-card { width: 100%; max-width: 320px; }
    .profile-card { width: 100%; max-width: 300px; padding: 20px; }
}

/* 👉 NAYI SERVICES-BLOB STYLE yahan is line ke UPAR add karein */


/* ============================================================
   7. ABOUT PAGE
   HTML: about.html <main> — hero reveal, counters, mission panel,
   spotlight value cards with rotating gradient border, process timeline.
   ============================================================ */

/* HERO — decorative glow behind heading */
.about-hero-glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    height: 620px;
    max-width: 160vw;
    background: radial-gradient(circle at center, rgba(125, 187, 64, 0.22) 0%, rgba(124, 58, 237, 0.1) 40%, transparent 68%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Word-by-word hero heading reveal target (js/main.js animates these) */
.reveal-word {
    display: inline-block;
}

/* HERO — stat counter cards */
.stat-mini-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 22px 14px;
    text-align: center;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.stat-mini-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Color comes from .stat-color-1..4 (defined above, in the HERO/STATS
   MARQUEE section) — the same per-stat accent colors already used for
   these exact 4 numbers in the homepage marquee, reused here instead of
   a new palette so the two sections read as one consistent stat style. */
.stat-mini-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
}

.stat-mini-label {
    color: #9ca3af;
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 6px;
}

/* MISSION — glass checklist panel */
.mission-glow {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 260px;
    height: 260px;
    max-width: 60vw;
    max-height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.mission-check {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(125, 187, 64, 0.12);
    border: 1px solid rgba(125, 187, 64, 0.35);
    color: #7DBB40;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* VALUES — rotating gradient "border-beam" wrapper (padding = border thickness) */
.value-card-wrap {
    position: relative;
    border-radius: 24px;
    padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), var(--accent-solid, #7DBB40), transparent 25%, transparent 75%, var(--accent-solid, #7DBB40));
    animation: beam-spin 5s linear infinite;
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes beam-spin {
    to { --angle: 360deg; }
}

.value-card {
    position: relative;
    background: #111111;
    border-radius: 23px;
    padding: 32px 28px;
    height: 100%;
    overflow: hidden;
}

/* Cursor-following spotlight glow (--spot-x/--spot-y set via mousemove in js/main.js) */
.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.07), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.value-card:hover::before {
    opacity: 1;
}

.value-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-solid, #7DBB40);
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.value-card h3, .value-card p {
    position: relative;
    z-index: 1;
}

/* PROCESS — connecting line, scroll-scrubbed fill (js/main.js) */
.process-line {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
}

.process-line-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7DBB40, #7c3aed, #22d3ee);
}

.process-step {
    position: relative;
    z-index: 1;
}

/* Color comes from --accent-solid (inline per .process-step below) — same
   4-color thread as the "What Drives Us" value cards right above this
   section, so the two 4-item grids read as one consistent color story
   instead of every step number being the same flat red. */
.step-number {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--accent-solid, #7DBB40);
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .about-hero-glow { height: 320px; }
    .value-card { padding: 26px 22px; }
}

/* ============================================================
   ABOUT PAGE — RIBBON (animated SVG-path typography strip)
   HTML id: #path-container, inside .ribbon-stage. The <path> is
   invisible (stroke="transparent") — it only defines the motion
   trajectory. js/about-ribbon.js positions each .ribbon-card every
   frame via getPointAtLength(); the stage has overflow:hidden and
   the path's start/end sit off-canvas, so the progress wrap has
   no visible jump. Colors reuse the site's existing accent palette
   (see services/testimonials/values sections) instead of introducing
   a new one; typography is Satoshi (site default) + Playfair Display
   italic for the "360" mark, matching the accent style used in
   headings across the site.
   ============================================================ */
.ribbon-stage {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    /* Same 1200:800 ratio as the SVG viewBox at every screen size — this is
       what actually keeps the curve's on-screen shape consistent (the JS
       scale math is width-only, so if this box's real aspect ratio drifts
       from 1200:800 the vertical framing drifts with it). min-height used
       to be 260px, which is TALLER than the pure 1200:800 ratio gives for
       any width under 390px — i.e. nearly every phone — so it was silently
       overriding the ratio and making the mobile stage a different shape
       than desktop. Kept low enough here that it never engages on a
       realistic screen, only as a last-resort floor. */
    aspect-ratio: 1200 / 800;
    max-height: 800px;
    min-height: 160px;
    overflow: hidden;
    border-radius: 32px;
    background:
        radial-gradient(circle at 25% 20%, rgba(124, 58, 237, 0.12), transparent 55%),
        radial-gradient(circle at 78% 78%, rgba(125, 187, 64, 0.12), transparent 55%),
        #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ribbon-path-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

/* The guide path is never painted — js/about-ribbon.js only reads its
   geometry (getTotalLength / getPointAtLength), so it doesn't need to be
   rendered at all. */
.ribbon-guide-svg {
    display: none;
}

#cards-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Cards — rounded to match the site's card language (.value-card,
   .result-card, .stack-card etc. all use 18-30px radii) instead of
   sharp 0px corners, with the same soft ambient shadow used on
   .journey/.stat-mini-card style surfaces rather than a hard offset one. */
/* 90px is the "reference" size this card was authored at — at every
   screen size js/about-ribbon.js applies a scale(...) transform (derived
   from the exact same ratio used to scale the curve itself) so the card
   shrinks in step with the path, instead of jumping to a separate fixed
   mobile size that would make cards a different size *relative to the
   curve* than on desktop. Since transform:scale also scales the card's
   rendered text, no separate mobile font-size is needed either. */
.ribbon-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform-origin: center center;
    border-radius: 14px;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

/* Backgrounds — the site's existing accent palette */
.ribbon-bg-red    { background-color: #7DBB40; }
.ribbon-bg-orange { background-color: #ff8a5c; }
.ribbon-bg-green  { background-color: #bef264; }
.ribbon-bg-cyan   { background-color: #3ee6d0; }
.ribbon-bg-blue   { background-color: #93c5fd; }
.ribbon-bg-pink   { background-color: #ff8cc8; }
.ribbon-bg-white  { background-color: #ffffff; }
.ribbon-bg-dark   { background-color: #111111; border: 1px solid rgba(255, 255, 255, 0.1); }

/* Typography — sized for the 90px reference card; the JS scale()
   transform on .ribbon-card shrinks this rendered text proportionally at
   smaller screen sizes, so these are the only font-size rules needed. */
.ribbon-text-word {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ribbon-text-bold-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.ribbon-text-block {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 7px;
    text-align: left;
    line-height: 1.55;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ribbon-text-num-block {
    font-size: 0.66rem;
    font-weight: 800;
    text-align: right;
    padding: 7px;
    line-height: 1.45;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    letter-spacing: 0.02em;
}

/* Text colors */
.ribbon-c-black  { color: #0a0a0a; }
.ribbon-c-white  { color: #ffffff; }
.ribbon-c-red    { color: #7DBB40; }
.ribbon-c-orange { color: #ff8a5c; }

@media (prefers-reduced-motion: reduce) {
    .ribbon-card { transition: none; }
}

/* ============================================================
   SERVICES PAGE — EXPERTISE MATRIX (company DNA)
   HTML: <section class="xm-section"> > .xm-inner
           > .xm-intro  (sticky rail: badge, title, proof, CTA)
           > .xm-grid   (bento: 4 pillar .xm-card + 1 .xm-card-accent)
   Replaces the old 5-row pill marquee: static, readable, and fully
   responsive — 1 column (mobile), 2 columns (>=640px), sticky rail +
   2-up bento (>=1024px), accent tile always spans the full grid.
   Palette is the site's existing white / #7DBB40 green on the dark
   background.
   ============================================================ */
.xm-section {
    --xm-green: #7DBB40;
    --xm-ink: #ffffff;
    --xm-muted: #9ca3af;
    --xm-line: rgba(255, 255, 255, 0.1);
    position: relative;
    padding: 56px 0 24px;
}

.xm-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start;
}

/* --- intro rail --- */
.xm-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 22px;
    border: 1px solid var(--xm-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--xm-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.xm-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--xm-green);
    box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.18);
}

.xm-title {
    margin: 0 0 16px;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--xm-ink);
}

.xm-title em {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--xm-green);
}

.xm-lede {
    margin: 0 0 30px;
    max-width: 46ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--xm-muted);
}

.xm-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 0 0 30px;
    padding: 22px 0;
    border-top: 1px solid var(--xm-line);
    border-bottom: 1px solid var(--xm-line);
}

.xm-proof-item {
    min-width: 120px;
}

.xm-proof-num {
    margin: 0;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--xm-ink);
}

.xm-proof-num span {
    color: var(--xm-green);
}

.xm-proof-label {
    margin: 7px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--xm-muted);
}

.xm-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--xm-green);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.xm-cta svg {
    width: 17px;
    height: 17px;
    transition: transform 0.3s ease;
}

.xm-cta:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-2px);
}

.xm-cta:hover svg {
    transform: translateX(4px);
}

/* --- bento grid --- */
.xm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.xm-card {
    position: relative;
    overflow: hidden;
    padding: 26px 24px 24px;
    border: 1px solid var(--xm-line);
    border-radius: 22px;
    background: #0d0d0d;
    box-shadow: 0 14px 34px -24px rgba(0, 0, 0, 0.75);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

/* green wash that sweeps in on hover */
.xm-card::after {
    content: '';
    position: absolute;
    inset: auto -30% -60% auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 187, 64, 0.22), rgba(125, 187, 64, 0) 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.xm-card:hover {
    transform: translateY(-4px);
    border-color: rgba(125, 187, 64, 0.55);
    box-shadow: 0 26px 48px -26px rgba(0, 0, 0, 0.8);
}

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

.xm-index {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 30px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.18);
    transition: color 0.4s ease;
}

.xm-card:hover .xm-index {
    color: rgba(125, 187, 64, 0.85);
}

.xm-card-title {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    padding-right: 52px;
    padding-bottom: 12px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--xm-ink);
}

/* hairline under the title that draws itself on hover */
.xm-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--xm-green);
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.xm-card:hover .xm-card-title::after {
    width: 76px;
}

.xm-card-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xm-muted);
}

.xm-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xm-tags li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--xm-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--xm-ink);
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.xm-tags-row {
    gap: 9px 10px;
}

.xm-tags li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--xm-green);
    transition: transform 0.3s ease;
}

.xm-tags li:hover {
    border-color: rgba(125, 187, 64, 0.6);
    transform: translateY(-2px);
}

.xm-tags li:hover::before {
    transform: scale(1.5);
}

/* --- accent tile (operating principles) --- */
.xm-card-accent {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(125, 187, 64, 0.3), rgba(125, 187, 64, 0) 62%),
        linear-gradient(140deg, #16200e 0%, #1b2412 55%, #0d1207 100%);
    border-color: rgba(125, 187, 64, 0.42);
    box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.8);
}

.xm-card-accent:hover {
    border-color: rgba(125, 187, 64, 0.6);
}

.xm-card-accent .xm-card-title { color: #fff; }
.xm-card-accent .xm-card-sub { color: rgba(255, 255, 255, 0.62); max-width: 58ch; }
.xm-card-accent .xm-index { color: rgba(255, 255, 255, 0.2); }

.xm-card-accent .xm-tags li {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
}

.xm-card-accent .xm-tags li:hover {
    border-color: rgba(125, 187, 64, 0.7);
}

/* --- responsive --- */
@media (min-width: 640px) {
    .xm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .xm-card-accent {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .xm-section {
        padding: 76px 0 32px;
    }

    .xm-inner {
        grid-template-columns: minmax(300px, 0.82fr) 1.35fr;
        gap: 54px;
    }

    .xm-intro {
        position: sticky;
        top: 118px;
    }

    .xm-card {
        padding: 30px 28px 28px;
    }

    .xm-card-title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .xm-card {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .xm-index {
        top: 16px;
        right: 18px;
        font-size: 25px;
    }

    .xm-card-title {
        font-size: 19px;
        padding-right: 44px;
    }

    .xm-tags li {
        padding: 6px 11px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xm-card,
    .xm-card::after,
    .xm-card-title::after,
    .xm-tags li,
    .xm-tags li::before,
    .xm-cta,
    .xm-cta svg,
    .xm-index {
        transition: none;
    }

    .xm-card:hover,
    .xm-cta:hover,
    .xm-tags li:hover {
        transform: none;
    }
}

/* ============================================================
   ABOUT PAGE — SUCCESS TIMELINE (company journey, 2022 → today)
   HTML: about.html <section class="success-timeline">
           <div class="success-timeline-panel">
             <div class="success-timeline-track" id="successTimelineTrack">
   JS (js/success-timeline.js) builds everything INSIDE the track:
   one continuous rail (.tl-rail, faint) running the full height of
   the track, a glowing progress fill (.tl-fill) on top of it that
   grows 0% -> 100% tied to scroll position via GSAP ScrollTrigger
   scrub, and one .milestone per story stacked in normal document
   flow below it (single column at every width — no separate desktop/
   mobile layouts to keep in sync). Each .milestone holds a .tl-dot
   sitting on the rail and a .success-card (year + title +
   description, no photos) beside it.

   This is a deliberately literal "progress bar for the journey":
   scrolling the section IS what advances the fill and lights up each
   dot/card in turn (own ScrollTrigger per milestone, toggling
   .is-active), so the scroll position visibly maps to how far through
   the company's history the reader has gotten.

   reduced-motion: fill jumps straight to 100% and every milestone
   starts .is-active — full static content, no scroll-linked reveal.
   ============================================================ */
.success-timeline-track {
    position: relative;
    z-index: 1;
    padding-left: 0;
}

/* Rail — centered zigzag axis on tablet/desktop. */
.success-timeline-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    background-color: #111111;
    border: 1px solid rgba(125, 187, 64, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.success-timeline-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.tl-rail {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, rgba(125, 187, 64, 0), rgba(125, 187, 64, 0.28) 6%, rgba(125, 187, 64, 0.28) 94%, rgba(125, 187, 64, 0));
    transform: translateX(-50%);
    border-radius: 2px;
}

.tl-fill {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 2px;
    height: 0%;
    background: linear-gradient(to bottom, #9ed45a, #7DBB40);
    box-shadow: 0 0 12px rgba(125, 187, 64, 0.55);
    transform: translateX(-50%);
    border-radius: 2px;
}
.tl-fill::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, 0);
    background: radial-gradient(circle at 34% 30%, #c6ea8a 0%, #7DBB40 55%, #5a8f2c 100%);
    box-shadow:
        0 0 0 5px rgba(125, 187, 64, 0.2),
        0 0 18px 4px rgba(125, 187, 64, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.6);
}

.milestone {
    position: relative;
    display: flex;
    padding-left: 0;
}
.milestone + .milestone {
    margin-top: 36px;
}
.milestone--left {
    justify-content: flex-start;
}
.milestone--right {
    justify-content: flex-end;
}

.tl-dot {
    position: absolute;
    top: 38px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #0a0a0a;
    border: 2px solid rgba(125, 187, 64, 0.4);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    z-index: 3;
}
.milestone.is-active .tl-dot {
    background: #7DBB40;
    border-color: #9ed45a;
    box-shadow: 0 0 0 5px rgba(125, 187, 64, 0.2), 0 0 16px 4px rgba(125, 187, 64, 0.5);
    transform: translate(-50%, -50%) scale(1.15);
}

/* Clean text card — no photo. Subtle panel with a thin accent rule
   under the year, same restrained visual language as the rest of
   the page (dark panel, hairline border, serif-italic accent).
   Inactive (not yet scrolled into its zone) starts muted/dim;
   .is-active (set by JS) brings it up to full brightness; hover/
   focus/tap lifts it further still. */
.success-card {
    position: relative;
    display: block;
    width: calc(50% - 24px);
    max-width: none;
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid rgba(125, 187, 64, 0.32);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    opacity: 0.45;
    filter: saturate(0.9);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
    cursor: pointer;
}

.milestone.is-active .success-card {
    opacity: 1;
    filter: saturate(1);
    border-color: rgba(125, 187, 64, 0.5);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.success-card:hover,
.success-card:focus-visible,
.success-card.is-open {
    transform: translateY(-6px);
    opacity: 1;
    filter: saturate(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
    border-color: rgba(125, 187, 64, 0.65);
    outline: none;
}

.success-card-caption {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 56px 28px 24px;
}
.success-card-year {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #7DBB40;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.01em;
}
.success-card-rule {
    display: block;
    width: 30px;
    height: 2px;
    margin: 14px 0;
    background: linear-gradient(90deg, #7DBB40, rgba(125, 187, 64, 0));
}
.success-card-title {
    font-family: 'Satoshi', sans-serif;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Toggle icon — same rotate-to-close-cross trick as the career-page
   job accordion (.job-icon), so this section matches that pattern. */
.success-card-icon {
    position: absolute;
    top: 24px;
    right: 22px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(125, 187, 64, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DBB40;
    font-size: 12px;
    transition: transform 0.35s ease, background 0.3s ease;
}
.success-card.is-open .success-card-icon {
    transform: rotate(45deg);
    background: rgba(125, 187, 64, 0.16);
    color: #9ed45a;
}

/* Description panel — collapsed by default, only the open card's
   panel expands. Pure-CSS grid-template-rows accordion, same trick
   as .job-panel on the career page. Only one card is .is-open at a
   time (js/success-timeline.js), first milestone open on load. */
.success-card-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}
.success-card.is-open .success-card-panel {
    grid-template-rows: 1fr;
}
.success-card-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.success-card-description {
    font-family: 'Satoshi', sans-serif;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.65;
    padding: 0 24px 28px;
}

@media (max-width: 700px) {
    .success-timeline-track {
        padding-left: 4px;
    }
    .tl-rail,
    .tl-fill {
        left: 12px;
    }
    .tl-dot {
        left: 12px;
        top: 28px;
    }
    .milestone {
        display: block;
        padding-left: 40px;
        justify-content: flex-start;
    }
    .milestone + .milestone {
        margin-top: 22px;
    }
    .success-card {
        width: 100%;
        max-width: none;
    }
    .success-card-caption { padding: 20px 46px 22px 18px; }
    .success-card-year { font-size: 24px; }
    .success-card-title { font-size: 15px; }
    .success-card-description { font-size: 12px; padding: 0 18px 22px; }
    .success-card-rule { margin: 10px 0; }
    .success-card-icon { top: 18px; right: 16px; width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .success-card,
    .tl-dot {
        transition: none;
    }
    /* Static fallback: full content visible, no muted/inactive state
       to wait on (JS also skips the scroll-linked reveal entirely). */
    .success-card {
        opacity: 1;
        filter: none;
    }
}

/* ============================================================
   ABOUT PAGE — NOTES / "HOW WE WORK" PRINCIPLES
   HTML: about.html <section id="notes-section" class="np-section">
           > .np-inner
             > .np-visual-col > .np-visual  (sticky layered photo:
               .np-frame tilted outline, .np-tick corner ticks,
               .np-photo image, .np-stat overlapping card)
             > .np-content   (badge, title, .np-list numbered rail)
   Replaces the old flat image + stacked text blocks. Numerals sit on
   a vertical green rail; each row fills its numeral and draws a
   hairline under the title on hover. Palette is the site's existing
   white / #7DBB40 green on the dark background.
   Responsive: single column (mobile/tablet), sticky split (>=1024px).
   ============================================================ */
.np-section {
    --np-green: #7DBB40;
    --np-ink: #ffffff;
    --np-muted: #9ca3af;
    --np-line: rgba(255, 255, 255, 0.1);
    position: relative;
    padding: 40px 0 24px;
}

.np-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
}

/* --- layered photo panel --- */
.np-visual {
    position: relative;
    margin: 0 0 34px;
    padding: 0;
}

.np-frame {
    position: absolute;
    inset: 14px -14px -18px 18px;
    border: 1px solid rgba(125, 187, 64, 0.55);
    border-radius: 28px;
    transform: rotate(-2.2deg);
    pointer-events: none;
}

.np-tick {
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
    z-index: 2;
}

.np-tick-tl {
    top: -8px;
    left: -8px;
    border-top: 2px solid var(--np-green);
    border-left: 2px solid var(--np-green);
    border-top-left-radius: 8px;
}

.np-tick-br {
    right: -8px;
    bottom: -8px;
    border-bottom: 2px solid var(--np-green);
    border-right: 2px solid var(--np-green);
    border-bottom-right-radius: 8px;
}

.np-photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 280px;
    border-radius: 24px;
    background: #111;
    box-shadow: 0 26px 54px -28px rgba(0, 0, 0, 0.85);
}

.np-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.np-visual:hover .np-photo img {
    transform: scale(1.045);
}

.np-stat {
    position: absolute;
    z-index: 3;
    right: 16px;
    bottom: -26px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(125, 187, 64, 0.32);
    border-radius: 18px;
    background: #111111;
    box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.9);
}

.np-stat-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 34px;
    line-height: 1;
    color: var(--np-green);
}

.np-stat-text {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--np-muted);
}

/* --- principle rail --- */
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--np-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--np-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.np-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--np-green);
    box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.18);
}

.np-title {
    margin: 0 0 30px;
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--np-ink);
}

.np-title em {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--np-green);
}

.np-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.np-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding-bottom: 26px;
}

/* vertical rail connecting the numerals */
.np-item::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(125, 187, 64, 0.5), rgba(255, 255, 255, 0.08));
}

.np-item:last-child {
    padding-bottom: 0;
}

.np-item:last-child::before {
    display: none;
}

.np-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(125, 187, 64, 0.45);
    border-radius: 50%;
    background: rgba(125, 187, 64, 0.1);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--np-green);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease,
                box-shadow 0.35s ease;
}

.np-item:hover .np-num {
    background: var(--np-green);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 10px 22px -12px rgba(125, 187, 64, 0.9);
}

.np-item-body {
    padding-top: 4px;
}

.np-item-title {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--np-ink);
}

/* hairline that draws itself under the title on hover */
.np-item-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--np-green);
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.np-item:hover .np-item-title::after {
    width: 72px;
}

.np-item-text {
    margin: 0;
    max-width: 56ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--np-muted);
}

/* --- responsive --- */
@media (min-width: 640px) {
    .np-stat {
        right: -14px;
        padding: 16px 22px;
    }

    .np-item-title {
        font-size: 20px;
    }
}

@media (min-width: 1024px) {
    .np-section {
        padding: 56px 0 32px;
    }

    .np-inner {
        grid-template-columns: 0.92fr 1.08fr;
        gap: 58px;
    }

    .np-visual {
        position: sticky;
        top: 118px;
        margin-bottom: 0;
    }

    .np-photo {
        aspect-ratio: 4 / 4.4;
    }
}

@media (max-width: 480px) {
    .np-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
    }

    .np-item::before {
        left: 19px;
        top: 44px;
    }

    .np-num {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .np-stat {
        right: 10px;
        bottom: -22px;
        padding: 12px 14px;
        gap: 10px;
    }

    .np-stat-num {
        font-size: 28px;
    }

    .np-stat-text {
        font-size: 11.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .np-photo img,
    .np-num,
    .np-item-title::after {
        transition: none;
    }

    .np-visual:hover .np-photo img,
    .np-item:hover .np-num {
        transform: none;
    }
}

/* 👉 NAYI ABOUT PAGE STYLE yahan is line ke UPAR add karein */


/* ============================================================
   8. BLOG PAGE
   HTML: blog.html <main> — filter pills, featured post (reuses
   .value-card-wrap beam-border), blog card grid, newsletter bar.
   ============================================================ */
.blog-filter-pill {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
}
.blog-filter-pill:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.blog-filter-pill.active { background: #7DBB40; border-color: #7DBB40; color: #fff; }

.blog-tag {
    display: inline-block;
    background: rgba(125, 187, 64, 0.12);
    border: 1px solid rgba(125, 187, 64, 0.3);
    color: #7DBB40;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 5px 12px;
    border-radius: 999px;
}

.blog-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.18); }

.blog-cover {
    height: 190px;
    overflow: hidden;
    position: relative;
}
.blog-cover .blog-tag { position: absolute; top: 16px; left: 16px; background: rgba(255, 255, 255, 0.35); border-color: rgba(10, 10, 10, 0.15); color: #0b0b0b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.blog-card-body { padding: 24px; }
.blog-card-body h3 { color: #fff; font-size: 18px; font-weight: 500; line-height: 1.35; margin-bottom: 10px; }
.blog-card-body p { color: #9ca3af; font-size: 14px; line-height: 1.6; }

.blog-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #6b7280;
    font-size: 12.5px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.blog-meta i { margin-right: 5px; }

/* Featured post — sits inside .value-card-wrap for the rotating beam border */
.featured-post {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 23px;
    overflow: hidden;
    background: #111111;
}
@media (min-width: 900px) {
    .featured-post { grid-template-columns: 1.1fr 1fr; }
}
.featured-post-cover {
    min-height: 220px;
    overflow: hidden;
}
.featured-post-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }

/* Newsletter strip */
.newsletter-bar { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) {
    .newsletter-bar { flex-direction: row; }
}
.newsletter-input {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
    color: #fff;
    font-size: 14px;
    flex: 1;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.newsletter-input:focus { outline: none; border-color: #7DBB40; box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.12); }
.newsletter-input::placeholder { color: #6b7280; }

/* 👉 NAYI BLOG PAGE STYLE yahan is line ke UPAR add karein */


/* ============================================================
   9. CAREER PAGE
   HTML: career.html <main> — perks reuse .value-card-wrap /
   .value-card from the About page, plus an open-positions accordion
   (pure-CSS grid-template-rows expand, no JS height calc needed).
   ============================================================ */
.job-item {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.job-item:hover { border-color: rgba(255, 255, 255, 0.16); }

.job-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.job-title { display: block; color: #fff; font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.job-meta-row { display: flex; flex-wrap: wrap; gap: 10px; color: #9ca3af; font-size: 12.5px; }
.job-meta-row span { display: flex; align-items: center; gap: 6px; }

.job-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DBB40;
    transition: transform 0.35s ease, background 0.3s ease;
}
.job-item.active .job-icon { transform: rotate(45deg); background: rgba(125, 187, 64, 0.12); }

/* grid-template-rows 0fr -> 1fr is the modern pure-CSS accordion trick —
   animates height without ever knowing the content's real height. */
.job-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}
.job-item.active .job-panel { grid-template-rows: 1fr; }
.job-panel-inner { overflow: hidden; min-height: 0; }
.job-panel-content { padding: 0 26px 26px; color: #9ca3af; font-size: 14px; line-height: 1.7; }

.job-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #7DBB40;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: gap 0.3s ease;
}
.job-apply-btn:hover { gap: 12px; }

/* ============================================================
   CAREER PAGE — job application modal (js/career-apply.js).
   Reuses .contact-input/.contact-label/.contact-textarea/
   .form-success (defined for the contact.html form) so the modal
   matches the rest of the site instead of introducing a new look.
   ============================================================ */
.job-apply-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.job-apply-modal.hidden { display: none; }
.job-apply-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}
.job-apply-modal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 32px 28px;
    animation: jobApplyPanelIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 640px) {
    .job-apply-modal-panel { padding: 40px; }
}
@keyframes jobApplyPanelIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.job-apply-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}
.job-apply-modal-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.job-apply-file-input { padding: 10px 16px !important; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-apply-file-input::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: #7DBB40;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ============================================================
   CAREER PAGE — ROLE CARDS (static grid, no slider / 3D)
   ============================================================ */
.career-3d-scene {
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    padding: 8px 0 8px;
}

.career-3d-carousel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    width: 100%;
    position: relative;
    animation: none;
    transform: none;
    perspective: none;
}

@media (min-width: 640px) {
    .career-3d-carousel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .career-3d-carousel .career-3d-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: calc(50% - 12px);
        justify-self: center;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .career-3d-carousel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .career-3d-carousel .career-3d-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }
}

.career-3d-card {
    --c3d-card-w: 100%;
    --c3d-card-h: auto;
    --c3d-bg: rgba(255, 255, 255, 0.1);
    --c3d-fg: #ffffff;
    --c3d-accent: #ffffff;
    --c3d-glow: rgba(255, 255, 255, 0.35);
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--c3d-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--c3d-fg);
    box-shadow: 0 24px 48px -16px var(--c3d-glow);
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    box-sizing: border-box;
    transform: none;
}

/* Glass sheen — a soft diagonal highlight across the card surface, on
   top of the backdrop-blur fill above, the same glassmorphism language
   as .gradient-glass-orb::after elsewhere on the site. Confined to the
   text zone (via .career-3d-card-content below) so it doesn't wash out
   the photo. */
.career-3d-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 60%);
    pointer-events: none;
}

/* Image zone — the actual role photo, "fitted" into its own top slot
   instead of stretched full-bleed behind the text. overflow:hidden
   lives HERE, not on .career-3d-card, so the corner clipping needed
   for the photo doesn't also clip the card's own box-shadow (that was
   an earlier bug).
   The source images are portrait (896x1024) but this zone used to be
   a short 44%-tall landscape strip — object-fit:cover on that mismatch
   zoomed in hard and cropped most of the image away, cutting the
   "Tools: ..." line off mid-sentence. Zone is taller now (68%) and the
   image uses object-fit:contain, so the WHOLE image is always visible,
   never cropped; the zone's own background fills any letterbox space
   so it still blends with the glass card instead of showing gaps. */
.career-3d-card-media {
    position: relative;
    width: 100%;
    height: 240px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.04);
}

.career-3d-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Soft fade at the bottom edge of the photo so it blends into the
   glass text zone below instead of a hard cut line. */
.career-3d-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 80%, rgba(0, 0, 0, 0.3) 100%);
}

/* Text zone — separate from the image entirely, so the role name/
   team/tags never overlap or clash with anything baked into the
   photo itself. Above the .career-3d-card::before glass sheen
   (absolute-positioned elements paint above static ones regardless
   of DOM order, so this needs its own stacking to stay legible). */
.career-3d-card-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
}

.career-3d-card-content h3 {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.career-3d-card-content h4 {
    margin: 0 0 12px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--c3d-accent, #ffffff);
}

/* Meta tags (employment type / location) — small pill badges instead
   of a plain caption line, same pill language as .blog-tag /
   .job-meta-row elsewhere on the site. */
.career-3d-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.career-3d-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.career-3d-controls,
.career-3d-btn {
    display: none;
}

@media (max-width: 640px) {
    .career-3d-scene {
        padding: 12px 0 20px;
    }
    .career-3d-card {
        border-radius: 18px;
    }
    .career-3d-card-media {
        height: 200px;
        border-radius: 18px 18px 0 0;
    }
    .career-3d-card-content { padding: 16px; }
    .career-3d-card-content h3 { font-size: 1rem; }
    .career-3d-card-content h4 { font-size: 0.8rem; }
}

/* 👉 NAYI CAREER PAGE STYLE yahan is line ke UPAR add karein */


/* ============================================================
   10. CONTACT PAGE
   HTML: contact.html <main> — dark form inputs with a focus glow,
   info glass cards, and a fake-submit success state (no backend
   is wired up here — see js/main.js for the intercepted submit).
   ============================================================ */
.contact-label { display: block; color: #9ca3af; font-size: 13px; font-weight: 500; margin-bottom: 8px; }

.contact-input, .contact-textarea, .contact-select {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-input::placeholder, .contact-textarea::placeholder { color: #6b7280; }
.contact-input:focus, .contact-textarea:focus, .contact-select:focus {
    outline: none;
    border-color: #7DBB40;
    box-shadow: 0 0 0 4px rgba(125, 187, 64, 0.12);
}
.contact-textarea { resize: vertical; min-height: 130px; }
.contact-select { appearance: none; -webkit-appearance: none; cursor: pointer; }

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 22px;
    transition: transform 0.35s ease, border-color 0.35s ease;
}
.contact-info-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.16); }

.contact-info-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(125, 187, 64, 0.12);
    border: 1px solid rgba(125, 187, 64, 0.3);
    color: #7DBB40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.form-success { display: none; text-align: center; padding: 50px 20px; }
.form-success.show { display: block; }
.form-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* ============================================================
   SCROLL TO TOP — fixed bottom-right, shown after scroll
   ============================================================ */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 45;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #7DBB40;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
    box-shadow: 0 10px 28px rgba(125, 187, 64, 0.38);
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: #6AA636;
}

@media (max-width: 640px) {
    .scroll-top-btn {
        right: 16px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}

/* 👉 NAYI CONTACT PAGE STYLE yahan is line ke UPAR add karein */


/* ============================================================
   11. ACCESSIBILITY — REDUCED MOTION OVERRIDES
   (Sabhi sections ke liye — user ke OS me "reduce motion" on ho to)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .stack-card { position: relative; top: auto; }
    .stack-container { padding-bottom: 40px; }
    .card-dim, .blob-dim { display: none; }
    .card-inner,
    .card-inner::before,
    .card-media,
    .card-icon,
    .card-cta svg { transition: none; }
    .card-inner:hover .card-media,
    .card-inner:focus-within .card-media,
    .card-inner:hover .card-icon,
    .card-inner:focus-within .card-icon { transform: none; }
    .marquee-container, .results-track, .team-track { animation: none; }
    .value-card-wrap { animation: none; }
    .process-line-fill { width: 100%; }
    .job-panel { transition: none; }
    body::before, body::after { animation: none; }
    .scroll-top-btn { transition: none; }
}

/* Selection highlight — last in file so it beats earlier utilities */
html ::selection,
html *::selection,
html ::-moz-selection,
html *::-moz-selection {
    background: #7DBB40 !important;
    background-color: #7DBB40 !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
}


/* ----------------------------------------new hero section -------------------------------------------- */




/* ================= FONT ================= */

#hero {
font-family: 'Manrope', sans-serif;
}


/* ================= HEADING BOX ================= */

.hero-heading-box {
position: relative;
display: inline-block;

padding: 12px 18px 14px 16px;

background: rgba(0, 0, 0, 0.28);

backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

border-left: 3px solid rgba(34, 197, 94, 0.9);

border-radius: 4px 14px 14px 4px;

box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.20);
}


/* ================= HEADING ================= */

.hero-heading {

margin: 0;

font-size: clamp(42px, 5vw, 70px);

line-height: 0.98;

font-weight: 800;

letter-spacing: -0.045em;

}


.heading-white {
display: block;
color: #ffffff;
}


/* ================= GREEN HIGHLIGHT ================= */

.heading-highlight {

position: relative;

display: inline-block;

color: #22c55e;

padding: 2px 12px 4px 8px;

margin-left: -8px;

background: rgba(34, 197, 94, 0.13);

border-radius: 7px;

text-shadow:
    0 0 25px rgba(34, 197, 94, 0.15);

}


/* ================= ARROW ================= */

.heading-arrow {

position: absolute;

width: 82px;
height: 50px;

right: -78px;
top: -22px;

overflow: visible;

animation: arrowFloat 2.2s ease-in-out infinite;

}


@keyframes arrowFloat {

0%, 100% {
    transform: translateY(0) rotate(0deg);
}

50% {
    transform: translateY(-5px) rotate(-2deg);
}

}


/* ================= DESCRIPTION ================= */

.hero-description-box {

margin-top: 18px;

max-width: 570px;

padding: 12px 16px;

background: rgba(0, 0, 0, 0.28);

backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);

border-radius: 8px;

border: 1px solid rgba(255, 255, 255, 0.08);

}


.hero-description-box p {

margin: 0;

color: rgba(255, 255, 255, 0.82);

font-size: 15px;

line-height: 1.7;

font-weight: 400;

}


/* ================= PRIMARY BUTTON ================= */

.hero-primary-btn {

display: inline-flex;

align-items: center;

gap: 12px;

padding: 13px 20px;

background: #22c55e;

color: #ffffff;

border-radius: 999px;

font-size: 14px;

font-weight: 700;

text-decoration: none;

transition: all 0.3s ease;

box-shadow:
    0 8px 25px rgba(34, 197, 94, 0.25);

}


.hero-primary-btn:hover {

background: #16a34a;

transform: translateY(-2px);

box-shadow:
    0 12px 30px rgba(34, 197, 94, 0.35);

}


.hero-btn-arrow {

font-size: 20px;

line-height: 1;

transition: transform 0.3s ease;

}


.hero-primary-btn:hover .hero-btn-arrow {

transform: translateX(5px);

}


/* ================= SECONDARY BUTTON ================= */

.hero-secondary-btn {

display: inline-flex;

align-items: center;

padding: 12px 20px;

color: #ffffff;

font-size: 14px;

font-weight: 600;

text-decoration: none;

border: 1px solid rgba(255, 255, 255, 0.3);

background: rgba(255, 255, 255, 0.07);

backdrop-filter: blur(8px);

border-radius: 999px;

transition: all 0.3s ease;

}


.hero-secondary-btn:hover {

background: rgba(255, 255, 255, 0.15);

border-color: rgba(255, 255, 255, 0.55);

transform: translateY(-2px);

}


/* ================= TABLET ================= */

@media (max-width: 900px) {

.hero-heading {

    font-size: 52px;

}

.heading-arrow {

    right: -65px;

    width: 70px;

}

}


/* ================= MOBILE ================= */

@media (max-width: 767px) {

#hero {

    min-height: 100svh;

    align-items: flex-start;

}


.hero-heading-box {

    margin-top: 5px;

    padding: 10px 12px;

}


.hero-heading {

    font-size: 40px;

    line-height: 1;

}


.heading-highlight {

    padding-right: 8px;

}


.heading-arrow {

    width: 58px;

    height: 38px;

    right: -48px;

    top: -20px;

}


.hero-description-box {

    max-width: 100%;

    margin-top: 15px;

    padding: 10px 13px;

}


.hero-description-box p {

    font-size: 13px;

    line-height: 1.6;

}


.hero-primary-btn,
.hero-secondary-btn {

    font-size: 13px;

    padding: 11px 17px;

}

}