@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400,300&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. */
html, body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif !important;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* 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 #ff4533;
    outline-offset: 2px;
}

/* Section badge pills ("Our Services", "Results", "Team", etc.) — the
   multi-color gradient underline (.section-badge::after) that used to sit
   below every badge across the site has been removed site-wide per
   request. The `section-badge` class is still present in the HTML on all
   pages (harmless, no longer does anything) — only this rule was removed. */

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


/* ============================================================
   2. NAVBAR SECTION
   HTML: <nav aria-label="Main navigation" class="... desktop-nav ...">
   ============================================================ */
/* .desktop-nav class top navbar AND mobile dropdown menu (#mobile-menu)
   dono par lagti hai — glass effect (blur + dark bg) sab screen sizes
   par, dropdown ke liye zaroori hai taaki content ke upar readable rahe. */
.desktop-nav {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

/* Top header bar (the <nav> itself, not the dropdown) — mobile par
   pehle jaisa hi fully transparent floating bar, sirf logo + hamburger
   icon dikhte hain, koi pill/blur background nahi. Dropdown menu
   (#mobile-menu, a <div>) is override se untouched rehta hai. */
@media (max-width: 767.98px) {
    nav.desktop-nav {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: transparent;
    }
}

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


/* ============================================================
   3. HERO / STATS MARQUEE SECTION
   HTML: "You're in good hands" wala scrolling stats area
   ============================================================ */
.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;
}

@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-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);
}

/* ============================================================
   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(255, 69, 51, 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%, #000 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 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 6vh 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.stack-card {
    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 {
    position: relative;
    overflow: hidden;                           /* accent glow ko rounded corners tak clip karne ke liye */
    background-color: #0b0b0b;                 /* solid rakhna zaroori */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 450px;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.9);
    transform-origin: center top;
    will-change: transform;
    backface-visibility: hidden;
}

/* Accent glow — service.html ke us card ka gradient color yahan echo hota hai
   (--accent har .stack-card par inline set hai). z-index:-1 isliye taaki
   glow content/media ke PEECHE rahe, sirf background par bloom kare. */
.card-inner::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--accent, rgba(255, 69, 51, 0.3));
    filter: blur(90px);
    opacity: 0.85;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-inner:hover::before {
    opacity: 1;
    transform: scale(1.08);
}

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

.card-content {
    flex: 1;
    padding-right: 50px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.card-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: var(--accent, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--accent-solid, rgba(255, 255, 255, 0.08));
    transition: transform 0.4s ease;
}

.card-icon i {
    font-size: 1.15rem;
    color: var(--accent-solid, #ff4533);
}

.card-inner:hover .card-icon { transform: scale(1.08); }

.card-header h3 {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.card-content p {
    font-size: 1.05rem;
    color: #9ca3af;
    line-height: 1.6;
    font-weight: 400;
    margin: 0 0 32px 0;
    max-width: 460px;
}

.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.features li {
    font-size: 1rem;
    color: #e5e5e5;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}

.features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: var(--accent, rgba(255, 69, 51, 0.12));
    border: 1px solid var(--accent-solid, rgba(255, 69, 51, 0.35));
    color: var(--accent-solid, #ff4533);
    border-radius: 999px;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.card-media {
    flex: 1;
    min-height: 380px;
    align-self: stretch;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-media::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,0.92), transparent);
    pointer-events: none;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff4533;
    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(255, 69, 51, 0.35);
}

.play-btn:hover {
    background-color: #e63e2e;
    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: #ff4533;
    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 {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        min-height: auto;
        border-radius: 24px;
    }

    .card-content {
        padding-right: 0;
        margin-bottom: 24px;
    }

    .card-header { margin-bottom: 16px; }
    .card-header h3 { font-size: 1.8rem; }

    .card-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 12px;
    }

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

    .features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card-media {
        width: 100%;
        min-height: 220px;
        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 — RIGHT TO LEFT INFINITE SMOOTH MARQUEE
   HTML id: #results-section
   Card ke andar SIRF image hai (koi text nahi).
   Seamless loop ke liye: gap ki jagah margin-right use kiya hai,
   isse ek set ki width exact rehti hai aur -50% pe perfect join hota hai.
   ============================================================ */
/* BOX (container) me rakha hai — page ke baaki sections ke jaisa 1200px.
   👉 FULL-BLEED (edge to edge) chahiye to sirf max-width hata do:
      max-width: 100%;  (ya poori max-width line comment kar do) */
.results-viewport {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
    /* dono side fade — box ke andar bhi cards ghulte hue dikhein */
    -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%);
}

.results-track {
    display: flex;
    width: max-content;
    animation: results-scroll-rtl 156s linear infinite;
    will-change: transform;
}

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

@keyframes results-scroll-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.result-card {
    flex: 0 0 auto;
    width: 360px;
    aspect-ratio: 5 / 6;
    margin-right: 24px;          /* gap ki jagah — seam perfect rehta hai */
    border-radius: 26px;
    overflow: hidden;
    background-color: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.4s ease, border-color 0.4s ease;
    backface-visibility: hidden;
}

.result-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.18);
}

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

@media (max-width: 768px) {
    .result-card {
        width: 250px;
        margin-right: 16px;
        border-radius: 20px;
    }
    .results-track { animation-duration: 113s; }
    .results-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 RESULTS STYLE yahan is line ke UPAR add karein */


/* ============================================================
   6. CLIENTS SECTION — PILL "CHAOS" LAYOUT
   HTML id: #clients-section
   ============================================================ */
.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 — top accent bar
   Har card ka --accent-solid services section ke card accent palette
   se hi liya gaya hai (teal/lime/pink/sky/peach/lavender), taaki
   color-thread testimonials tak bhi chala jaye.
   ============================================================ */
.testimonial-accent {
    position: relative;
    overflow: hidden;
}
.testimonial-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent-solid, #ff4533);
    opacity: 0.9;
}

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


/* ============================================================
   6b. CTA SECTION — RADIAL GRADIENT GLOW
   HTML: <section class="cta-section"> ... <div class="cta-glow">
   Brand-red radial glow, box ke peeche blurred, purane sections
   jaisa hi dark theme (#0a0a0a card) maintain karta hai.
   ============================================================ */
.cta-glow {
    width: 700px;
    height: 700px;
    max-width: 140vw;
    max-height: 140vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 69, 51, 0.35) 0%, rgba(255, 69, 51, 0.12) 40%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .cta-glow {
        width: 500px;
        height: 500px;
    }
}

/* ============================================================
   6c. DECORATIVE GRADIENT GLASS ORB — CTA aur Footer ke beech
   HTML: <div class="gradient-orb-wrap"><div class="gradient-glass-orb">
   3-color blurred glow (red/purple/cyan) + upar ek frosted-glass
   disc (backdrop-blur) taaki glassmorphism wala effect aaye.
   ============================================================ */
.gradient-glass-orb {
    position: absolute;
    left: 50%;
    top: -104px;                 /* ~40% cta box ki taraf, ~60% footer ki taraf */
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    max-width: 60vw;
    max-height: 60vw;
    border-radius: 50%;
    background: conic-gradient(from 180deg at 50% 50%, #ff4533, #7c3aed 50%, #22d3ee, #ff4533);
    filter: blur(35px);
    opacity: 0.9;
    pointer-events: none;
}

.gradient-glass-orb::after {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
    .gradient-glass-orb {
        top: -72px;
        width: 180px;
        height: 180px;
        filter: blur(32px);
    }
}

/* ============================================================
   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: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    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 — auto-scrolling carousel (right to left, slow)
   HTML id: #team-section — same pattern as Results carousel,
   just slower + card-sized instead of aspect-ratio image cards.
   ============================================================ */
.team-viewport {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    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%);
}

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

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

@keyframes team-scroll-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
    .team-track { animation-duration: 32s; }
    .team-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%);
    }
}

/* ============================================================
   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: #ff4533; }

/* 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: #ff4533; }
.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: #ff4533;
}

/* ---- 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, #ff4533, #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: #ff4533; 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: #ff4533;
}
.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(255, 69, 51, 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(255, 69, 51, 0.12);
    border: 1px solid rgba(255, 69, 51, 0.35);
    color: #ff4533;
    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, #ff4533), transparent 25%, transparent 75%, var(--accent-solid, #ff4533));
    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, #ff4533);
    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, #ff4533, #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, #ff4533);
    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(255, 69, 51, 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: #ff4533; }
.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: #ff4533; }
.ribbon-c-orange { color: #ff8a5c; }

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

/* ============================================================
   ABOUT PAGE — COMPANY DNA (expertise pill marquee, 5 rows)
   HTML: <section class="company-marquee"> ... .company-marquee-row
   (viewport, uses the existing .mask-edges fade) > .company-marquee-track
   (the moving flex strip, content duplicated x2 for a seamless loop) >
   .company-marquee-pill. Animation reuses the site's existing
   scroll-marquee-ltr / team-scroll-rtl keyframes (already defined above
   for the homepage stats/results/team/testimonial marquees) instead of
   new ones — .company-marquee-right plays scroll-marquee-ltr (moves
   rightward), .company-marquee-left plays team-scroll-rtl (moves
   leftward). Pill colors (.cmp-c1..c8) are the site's existing accent
   palette, cycled — no new colors introduced.
   ============================================================ */
.company-marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.company-marquee-row {
    width: 100%;
    overflow: hidden;
}

.company-marquee-track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

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

.company-marquee-left  { animation-name: team-scroll-rtl; }
.company-marquee-right { animation-name: scroll-marquee-ltr; }

.company-marquee-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 14px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.company-marquee-pill:hover {
    transform: scale(1.05);
    filter: brightness(1.08);
}

/* Accent rotation — reuses the site's existing palette (see services/
   testimonials/ribbon sections). Bright/pastel backgrounds get dark
   text for contrast, dark/saturated backgrounds get white text — same
   rule already used for the ribbon cards. */
.cmp-c1 { background: #ff4533; color: #ffffff; } /* brand red */
.cmp-c2 { background: #bef264; color: #0a0a0a; } /* lime */
.cmp-c3 { background: #a78bfa; color: #ffffff; } /* lavender */
.cmp-c4 { background: #93c5fd; color: #0a0a0a; } /* sky */
.cmp-c5 { background: #ff8cc8; color: #0a0a0a; } /* pink */
.cmp-c6 { background: #3ee6d0; color: #0a0a0a; } /* teal */
.cmp-c7 { background: #ff8a5c; color: #0a0a0a; } /* peach */
.cmp-c8 { background: #111111; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); } /* dark */

@media (max-width: 1024px) {
    .company-marquee-pill { padding: 12px 22px; font-size: 13px; }
}

@media (max-width: 768px) {
    .company-marquee-rows { gap: 10px; }
    .company-marquee-track { gap: 10px; }
    .company-marquee-pill { padding: 9px 16px; font-size: 12px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .company-marquee-track { animation: 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;
    padding-left: 4px;
}

/* Rail — faint full-height guide line the fill draws over. Absolute
   with top:0;bottom:0 (not height:100%) so it reliably spans the
   track's real auto-height regardless of content length. */
.tl-rail {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 18px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22) 6%, rgba(255, 255, 255, 0.22) 94%, rgba(255, 255, 255, 0));
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Fill — the actual progress bar. Height animates 0% -> 100% via
   GSAP scrub as the section scrolls through view (js/success-
   timeline.js). ::after is a glowing marker riding its growing tip —
   pure CSS, repositions itself for free every time height changes. */
.tl-fill {
    position: absolute;
    top: 6px;
    left: 18px;
    width: 2px;
    height: 0%;
    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.55));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
    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%, #ffffff 0%, #e5e5e5 55%, #9ca3af 100%);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.16),
        0 0 18px 4px rgba(255, 255, 255, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.6);
}

.milestone {
    position: relative;
    padding-left: 54px;
}
.milestone + .milestone {
    margin-top: 30px;
}

/* Dot — sits on the rail, aligned with the card's year label. Dim
   until its own ScrollTrigger marks the milestone .is-active, then
   lights up in sync with the fill passing it. */
.tl-dot {
    position: absolute;
    top: 34px;
    left: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    border: 2px solid rgba(255, 255, 255, 0.22);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    z-index: 2;
}
.milestone.is-active .tl-dot {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 0 16px 4px rgba(255, 255, 255, 0.4);
    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: 100%;
    max-width: 480px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%), #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28);
    opacity: 0.4;
    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);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3);
}

.success-card:hover,
.success-card:focus-visible,
.success-card.is-open {
    transform: translateY(-6px);
    opacity: 1;
    filter: saturate(1.05);
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
    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: #ffffff;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.01em;
}
.success-card-rule {
    display: block;
    width: 30px;
    height: 2px;
    margin: 14px 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}
.success-card-title {
    font-family: 'Satoshi', sans-serif;
    color: #ffffff;
    font-size: 17px;
    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(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    transition: transform 0.35s ease, background 0.3s ease;
}
.success-card.is-open .success-card-icon {
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.12);
}

/* 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: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.65;
    padding: 0 24px 28px;
}

@media (max-width: 640px) {
    .success-card { 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; }
    .milestone { padding-left: 40px; }
    .milestone + .milestone { margin-top: 22px; }
    .tl-rail, .tl-fill { left: 12px; }
    .tl-dot { left: 12px; top: 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 SECTION, SHORTS EMBED GRID
   HTML: about.html "Built on expertise" block, 2-up grid of
   .short-embed cells — replaces the old static photo. Each cell is a
   plain autoplay/muted/looped YouTube Shorts iframe (same "cover"-
   ish recipe as index.html's #hero video, just per-cell instead of
   full-bleed) — pure video, no platform chrome, so it can crop
   cleanly to a 9:16 box.
   ============================================================ */
.short-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
}
.short-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}
.short-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: 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: #ff4533; border-color: #ff4533; color: #fff; }

.blog-tag {
    display: inline-block;
    background: rgba(255, 69, 51, 0.12);
    border: 1px solid rgba(255, 69, 51, 0.3);
    color: #ff4533;
    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: #ff4533; box-shadow: 0 0 0 4px rgba(255, 69, 51, 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: #ff4533;
    transition: transform 0.35s ease, background 0.3s ease;
}
.job-item.active .job-icon { transform: rotate(45deg); background: rgba(255, 69, 51, 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: #ff4533;
    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: #ff4533;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ============================================================
   CAREER PAGE — 3D ROLE CAROUSEL
   HTML: .career-3d-scene > .career-3d-carousel > .career-3d-card (x5).
   Pure CSS 3D transforms (perspective / rotateY / translateZ); rotation
   math + controls in js/career-3d-carousel.js (vanilla JS, no library).
   Cards are flat theme-color panels (--c3d-bg/--c3d-fg set inline per
   card, using the site's existing accent palette — the same colors as
   the ribbon cards / marquee pills) with an icon + text, not photos —
   the provided role images had their own baked-in title/skill-tag
   design that visually clashed with the HTML text overlay on top.
   ============================================================ */
.career-3d-scene {
    width: 100%;
    max-width: 320px;
    height: 470px;
    margin: 0 auto;
    perspective: 1300px;
    position: relative;
}

.career-3d-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    /* No CSS transition here — js/career-3d-carousel.js drives rotation
       every frame via requestAnimationFrame (continuous auto-spin +
       eased button/swipe nudges), so a competing CSS transition would
       just fight the per-frame updates and cause jitter. */
}

.career-3d-card {
    --c3d-card-w: 280px;
    --c3d-card-h: 430px;
    /* Neutral glass fill — same for every card (matching
       .gradient-glass-orb::after's frosted-disc recipe elsewhere on the
       site). Color variety lives only in --c3d-accent (icon symbol) and
       --c3d-glow (ambient shadow), not the glass surface itself. */
    --c3d-bg: rgba(255, 255, 255, 0.1);
    --c3d-fg: #ffffff;
    --c3d-accent: #ffffff;
    --c3d-glow: rgba(255, 255, 255, 0.35);
    position: absolute;
    width: var(--c3d-card-w);
    height: var(--c3d-card-h);
    left: 50%;
    top: 50%;
    margin-left: calc(var(--c3d-card-w) / -2);
    margin-top: calc(var(--c3d-card-h) / -2);
    border-radius: 22px;
    /* overflow was "hidden" — that also clips the card's own box-shadow
       at its edges, which is why the shadow wasn't showing at all. No
       photo to corner-clip anymore, so this can just be visible. */
    overflow: visible;
    /* Real glass: a translucent tinted fill + blur of whatever sits
       behind it (other cards / the black page), not a flat opaque
       color — that was just a colored card with a glassy icon bolted
       on, not actual glassmorphism. */
    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);
    /* Colored glow instead of a black shadow — a dark shadow has almost
       no contrast against this site's pure-black page background, so
       it read as "no shadow" even though it was technically there. */
    box-shadow: 0 30px 60px -12px var(--c3d-glow), 0 10px 25px -8px rgba(0, 0, 0, 0.6);
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    box-sizing: border-box;
}

/* 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: 68%;
    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 {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.career-3d-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.career-3d-btn:hover {
    background: #ff4533;
    border-color: #ff4533;
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .career-3d-scene {
        max-width: 240px;
        height: 380px;
    }
    .career-3d-card {
        --c3d-card-w: 220px;
        --c3d-card-h: 340px;
        border-radius: 18px;
    }
    .career-3d-card-media { 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: #ff4533;
    box-shadow: 0 0 0 4px rgba(255, 69, 51, 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(255, 69, 51, 0.12);
    border: 1px solid rgba(255, 69, 51, 0.3);
    color: #ff4533;
    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;
}

/* 👉 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; }
    .marquee-container, .results-track, .team-track { animation: none; }
    .value-card-wrap { animation: none; }
    .process-line-fill { width: 100%; }
    .job-panel { transition: none; }
}