/* ╔══════════════════════════════════════════════════════════════╗
       ║   JUPITAR — IMMERSIVE EXPERIENCE ENGINE                      ║
       ╚══════════════════════════════════════════════════════════════╝ */

    /* ── PRELOADER ── */
    .preloader {
        display: none !important; /* Instant load - no loading screen */
    }
    .preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
    .preloader-logo {
        height: 52px; width: auto;
        animation: logo-breathe 1.4s ease-in-out infinite;
        filter: drop-shadow(0 0 24px rgba(255,62,19,0.7));
    }
    @keyframes logo-breathe {
        0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,62,19,0.6)); }
        50%      { transform: scale(1.06); filter: drop-shadow(0 0 50px rgba(255,62,19,1)); }
    }
    .preloader-bar-wrap { width: 220px; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
    .preloader-bar {
        height: 100%; background: linear-gradient(90deg, #ffffff, #FF3E13);
        transform: scaleX(0); transform-origin: left;
        animation: preload-fill 1.4s cubic-bezier(.77,0,.175,1) forwards;
    }
    @keyframes preload-fill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
    .preloader-text {
        font-size: 10px; font-weight: 700; letter-spacing: 4px;
        color: rgba(255,255,255,0.3); text-transform: uppercase;
        animation: text-flicker 0.8s steps(2) infinite;
    }
    @keyframes text-flicker { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

    /* ── CUSTOM CURSOR ── */
    .c-cursor { position: fixed; pointer-events: none; z-index: 99997; top: 0; left: 0; will-change: transform; }
    .c-cursor-dot {
        width: 10px; height: 10px; background: #FF3E13; border-radius: 50%;
        position: absolute; transform: translate(-50%,-50%);
        box-shadow: 0 0 12px rgba(255,62,19,0.9), 0 0 24px rgba(255,62,19,0.4);
        transition: width .2s, height .2s, background .2s, box-shadow .2s;
    }
    .c-cursor-ring {
        width: 40px; height: 40px; border: 1.5px solid rgba(255,62,19,0.45);
        border-radius: 50%; position: absolute; transform: translate(-50%,-50%);
        transition: width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1), border-color .3s, opacity .3s;
    }
    body.cursor-hover .c-cursor-dot { width: 18px; height: 18px; box-shadow: 0 0 20px rgba(255,62,19,1), 0 0 50px rgba(255,62,19,0.5); }
    body.cursor-hover .c-cursor-ring { width: 66px; height: 66px; border-color: rgba(255,62,19,0.7); }
    body.cursor-dark .c-cursor-dot { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.9); }
    body.cursor-dark .c-cursor-ring { border-color: rgba(255,255,255,0.4); }

    /* ── HERO CANVAS (constellation) ── */
    #hero-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }

    /* ── HERO SPLIT-WORD ANIMATION ── */
    .hero-split-line {
        font-family: 'Teko', sans-serif;
        overflow: hidden; display: block; line-height: 1.05;
    }
    .hero-split-word {
        font-family: 'Teko', sans-serif;
        display: inline-block;
    } /* GSAP handles transform */

    /* ── NOISE / GRAIN OVERLAY ── */
    .noise-overlay {
        position: absolute; inset: 0; pointer-events: none; z-index: 3;
        opacity: 0.04; mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        animation: noise-anim 0.25s steps(4) infinite;
    }
    @keyframes noise-anim {
        0%   { background-position: 0 0; }
        25%  { background-position: -4px 6px; }
        50%  { background-position: 8px -4px; }
        75%  { background-position: -6px -8px; }
        100% { background-position: 4px 2px; }
    }

    /* ── SCROLL INDICATOR (hero bottom) ── */
    .scroll-indicator {
        position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
        z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px;
        color: rgba(255,255,255,0.4); font-size: 9px; font-weight: 700;
        letter-spacing: 3px; text-transform: uppercase; pointer-events: none;
        animation: scroll-ind-pulse 2.5s ease-in-out infinite;
    }
    .scroll-indicator-line {
        width: 1px; height: 48px;
        background: linear-gradient(180deg, rgba(255,62,19,0.8), transparent);
        animation: line-extend 2.5s ease-in-out infinite;
    }
    @keyframes scroll-ind-pulse { 0%,100% { opacity: 0.35; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.8; transform: translateX(-50%) translateY(-4px); } }
    @keyframes line-extend { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } }
    @media (max-width: 768px) { .scroll-indicator { display: none; } }

    /* ── DUAL MARQUEE ── */
    .marquee-strip-b {
        background: #ffffff; padding: 10px 0; overflow: hidden; white-space: nowrap;
        border-top: 1px solid #eef1f5;
    }
    .marquee-inner-b {
        display: inline-flex; gap: 0;
        animation: marquee-run-rev 30s linear infinite;
    }
    .marquee-inner-b span {
        display: inline-flex; align-items: center; gap: 16px;
        padding: 0 28px;
        font-size: 11px; font-weight: 600;
        color: #6b7280;
        text-transform: uppercase; letter-spacing: 2px;
    }
    .marquee-inner-b span::after { content: '◆'; font-size: 6px; opacity: 0.55; color: #FF3E13; }
    @keyframes marquee-run-rev {
        from { transform: translateX(-50%); }
        to   { transform: translateX(0%); }
    }

    /* ── SERVICE SPOTLIGHT (cursor follower) ── */
    .service-spotlight-cursor {
        position: fixed; width: 500px; height: 500px;
        background: radial-gradient(circle, rgba(255,62,19,0.08) 0%, transparent 65%);
        border-radius: 50%; pointer-events: none; z-index: 2;
        transform: translate(-50%,-50%); opacity: 0;
        transition: opacity 0.5s ease; will-change: transform;
    }

    /* ── HERO TITLE SIZE BOOST ── */
    .hero-title-big {
        font-family: 'Teko', sans-serif !important;
        font-size: clamp(2.4rem, 5.5vw, 5.5rem) !important;
        letter-spacing: -0.025em; line-height: 0.95 !important;
        font-weight: 700 !important;
    }

    /* ── ROTATING GRADIENT BORDER on service cards ── */
    .gradient-border-hover { position: relative; isolation: isolate; }
    .gradient-border-hover::after {
        content: ''; position: absolute; inset: -1px;
        border-radius: inherit; z-index: -1;
        background: conic-gradient(from 0deg,transparent 60%,rgba(255,62,19,0.5) 80%,transparent 100%);
        opacity: 0; transition: opacity 0.3s;
        animation: spin-border 2.5s linear infinite paused;
    }
    @keyframes spin-border { to { transform: rotate(360deg); } }
    .gradient-border-hover:hover::after { opacity: 1; animation-play-state: running; }

    /* ── COUNTER RINGS (Why Us) ── */
    .counter-ring-svg { pointer-events: none; }
    .ring-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3; }
    .ring-fill  {
        fill: none; stroke: #FF3E13; stroke-width: 3; stroke-linecap: round;
        stroke-dasharray: 283; stroke-dashoffset: 283;
        transition: stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1);
        transform: rotate(-90deg); transform-origin: center;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce) {
        .c-cursor, .preloader, .noise-overlay { display: none !important; }
        .hero-split-word { transform: none !important; opacity: 1 !important; }
    }

    /* Hero Slider Styles - Fully Responsive with Fixed Header Spacing
       The hero is full-bleed (its dark background sits behind the fixed
       navbar), so the navbar clearance is done with padding-top, not margin. */
    .hero-slider {
        position: relative;
        height: 80vh;
        min-height: 700px;
        max-height: 780px;
        overflow: hidden;
        margin-top: 0;
        padding-top: 85px;
    }

    @media (max-width: 1024px) {
        .hero-slider {
            height: 76vh;
            min-height: 640px;
            max-height: 700px;
            margin-top: 0;
            padding-top: 85px;
        }
    }

    /* Phones: the hero sizes to the TALLEST slide (see the .slide grid stacking
       below) so it never clips content and never jumps height between slides.
       Padding clears the fixed navbar. */
    @media (max-width: 768px) {
        .hero-slider {
            display: grid;
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
            max-height: none;
            margin-top: 0;
            padding: 96px 0 68px 0;
        }
    }

    @media (max-width: 640px) {
        .hero-slider {
            height: auto;
            min-height: 0;
            margin-top: 0;
            padding: 92px 0 64px 0;
        }
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 500px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    /* Phones: stack all slides in the SAME grid cell. Every slide keeps its
       layout (visibility:hidden, not display:none) so the hero is always as
       tall as the TALLEST slide — constant height, no jump when the slide
       changes — while the top-aligned content can never be pushed up behind
       the navbar or clipped. */
    @media (max-width: 768px) {
        .slide {
            grid-area: 1 / 1 / 2 / 2;
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            height: auto;
            min-height: 0;
        }
        .hero-slider .slide > .relative {
            align-items: flex-start;
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .hero-slider .slide .grid {
            gap: 18px;
        }
    }

    @media (max-width: 640px) {
        .slide {
            min-height: 0;
        }
    }

    .slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    /* Slide backgrounds with darker overlays for better text visibility */
    .slide-1 {
        background: linear-gradient(135deg, rgba(11, 25, 48, 0.92) 0%, rgba(36, 59, 83, 0.88) 100%),
                    #ffffff;
    }

    .slide-2 {
        background: linear-gradient(135deg, rgba(255, 62, 19, 0.90) 0%, rgba(230, 56, 15, 0.85) 100%),
                    #FF3E13;
    }

    .slide-3 {
        background: linear-gradient(135deg, rgba(11, 25, 48, 0.92) 0%, rgba(72, 101, 129, 0.88) 100%),
                    #ffffff;
    }

    .slide-4 {
        background: linear-gradient(135deg, rgba(36, 59, 83, 0.90) 0%, rgba(255, 62, 19, 0.85) 100%),
                    #243b53;
    }

    /* Animated Website Mockup - Real Image with Auto-Scroll */
    .website-mockup {
        width: 100%;
        max-width: 420px;
        height: 500px;
        max-height: 500px;
        background: linear-gradient(135deg, #f1f5f9 0%, #16213e 100%);
        border-radius: 20px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.1);
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }

    @media (max-width: 1024px) {
        .website-mockup {
            max-width: 360px;
            height: 440px;
            max-height: 440px;
        }
    }

    @media (max-width: 768px) {
        .website-mockup {
            max-width: 300px;
            height: 330px;
            max-height: 330px;
        }
    }

    @media (max-width: 640px) {
        .website-mockup {
            max-width: 250px;
            height: 290px;
            max-height: 290px;
        }
    }

    .website-header {
        height: 40px;
        background: linear-gradient(180deg, #2d2d44 0%, #1f1f35 100%);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: flex;
        align-items: center;
        padding: 0 12px;
        gap: 6px;
        position: relative;
        z-index: 10;
    }

    .browser-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .browser-url {
        flex: 1;
        height: 22px;
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
        margin-left: 12px;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .browser-url::before {
        content: '🔒';
        font-size: 9px;
        margin-right: 6px;
    }

    .browser-url-text {
        font-size: 9px;
        color: rgba(255,255,255,0.5);
        font-family: 'SF Mono', monospace;
    }

    .website-content {
        height: calc(100% - 40px);
        overflow: hidden;
        position: relative;
        background: #ffffff;
    }

    /* Real Website Image with Smooth Auto-Scroll */
    .website-screenshot {
        position: absolute;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        /* Promote the scrolling image to its own GPU layer. Without this the
           whole mockup (incl. its 60px-blur box-shadow) was repainted on every
           frame, which is what made the scroll look slow and laggy. */
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        animation: website-auto-scroll 8s ease-in-out infinite;
    }

    .website-screenshot img {
        width: 100%;
        height: auto;
        display: block;
    }

    @keyframes website-auto-scroll {
        0%, 4% {
            transform: translate3d(0, 0, 0);
        }
        48%, 52% {
            transform: translate3d(0, calc(-100% + 460px), 0);
        }
        96%, 100% {
            transform: translate3d(0, 0, 0);
        }
    }

    @media (max-width: 1024px) {
        @keyframes website-auto-scroll {
            0%, 4% {
                transform: translate3d(0, 0, 0);
            }
            48%, 52% {
                transform: translate3d(0, calc(-100% + 400px), 0);
            }
            96%, 100% {
                transform: translate3d(0, 0, 0);
            }
        }
    }

    @media (max-width: 768px) {
        /* Shorter travel on phones, so speed it up to keep the same feel */
        .website-screenshot {
            animation-duration: 6s;
        }
        @keyframes website-auto-scroll {
            0%, 4% {
                transform: translate3d(0, 0, 0);
            }
            48%, 52% {
                transform: translate3d(0, calc(-100% + 360px), 0);
            }
            96%, 100% {
                transform: translate3d(0, 0, 0);
            }
        }
    }

    @media (max-width: 640px) {
        .website-screenshot {
            animation-duration: 5s;
        }
        @keyframes website-auto-scroll {
            0%, 4% {
                transform: translate3d(0, 0, 0);
            }
            48%, 52% {
                transform: translate3d(0, calc(-100% + 320px), 0);
            }
            96%, 100% {
                transform: translate3d(0, 0, 0);
            }
        }
    }

    /* Law Firm Website - Kumar Partners Style */
    .law-nav {
        height: 60px;
        background: #1a365d;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border-bottom: 3px solid #c9a227;
    }

    .law-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .law-logo-icon {
        width: 36px;
        height: 36px;
        background: #c9a227;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .law-logo-icon::after {
        content: '⚖️';
        font-size: 18px;
    }

    .law-logo-text {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
    }

    .law-logo-sub {
        font-size: 8px;
        color: #c9a227;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .law-nav-links {
        display: flex;
        gap: 15px;
    }

    .law-nav-link {
        width: 50px;
        height: 8px;
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
    }

    .law-nav-link.active {
        background: #c9a227;
    }

    /* Hero Section - Professional Law Firm */
    .law-hero {
        height: 220px;
        background: linear-gradient(135deg, #1a365d 0%, #2d4a6f 50%, #1a365d 100%);
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 25px;
        overflow: hidden;
    }

    .law-hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="80" cy="50" r="120" fill="rgba(201,162,39,0.1)"/></svg>');
        background-size: cover;
    }

    .law-hero-content {
        z-index: 1;
        max-width: 60%;
    }

    .law-hero-badge {
        display: inline-block;
        padding: 4px 12px;
        background: rgba(201,162,39,0.2);
        border: 1px solid #c9a227;
        border-radius: 20px;
        font-size: 8px;
        color: #c9a227;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .law-hero-title {
        font-size: 24px;
        font-weight: 800;
        color: #111827;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .law-hero-subtitle {
        font-size: 11px;
        color: rgba(255,255,255,0.7);
        margin-bottom: 18px;
        line-height: 1.5;
    }

    .law-hero-btns {
        display: flex;
        gap: 10px;
    }

    .law-hero-btn {
        height: 32px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
    }

    .law-hero-btn.primary {
        width: 100px;
        background: #c9a227;
        color: #1a365d;
    }

    .law-hero-btn.secondary {
        width: 80px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.5);
        color: #111827;
    }

    .law-hero-image {
        position: absolute;
        right: 15px;
        bottom: 0;
        width: 130px;
        height: 160px;
        background: linear-gradient(180deg, transparent 0%, rgba(26,54,93,0.9) 100%);
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }

    .law-hero-figure {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .law-hero-person {
        width: 80px;
        height: 120px;
        background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
        border-radius: 40px 40px 0 0;
    }

    /* Practice Areas Section */
    .law-practices {
        padding: 30px 20px;
        background: #f8fafc;
    }

    .law-section-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .law-section-label {
        font-size: 9px;
        color: #c9a227;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 5px;
    }

    .law-section-heading {
        font-size: 18px;
        font-weight: 700;
        color: #1a365d;
    }

    .law-practices-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .law-practice-card {
        background: white;
        border-radius: 8px;
        padding: 15px 10px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .law-practice-card:hover {
        border-bottom-color: #c9a227;
    }

    .law-practice-icon {
        width: 40px;
        height: 40px;
        margin: 0 auto 10px;
        background: linear-gradient(135deg, #1a365d, #2d4a6f);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .law-practice-name {
        font-size: 10px;
        font-weight: 600;
        color: #1a365d;
        line-height: 1.3;
    }

    /* About/Stats Section */
    .law-about {
        padding: 30px 20px;
        background: #1a365d;
        display: flex;
        gap: 25px;
        align-items: center;
    }

    .law-about-content {
        flex: 1;
    }

    .law-about-title {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 10px;
    }

    .law-about-text {
        font-size: 10px;
        color: rgba(255,255,255,0.7);
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .law-about-stats {
        display: flex;
        gap: 20px;
    }

    .law-stat {
        text-align: center;
    }

    .law-stat-number {
        font-size: 22px;
        font-weight: 800;
        color: #c9a227;
    }

    .law-stat-label {
        font-size: 8px;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
    }

    /* Team Section */
    .law-team {
        padding: 30px 20px;
        background: white;
    }

    .law-team-grid {
        display: flex;
        gap: 15px;
        justify-content: center;
    }

    .law-team-member {
        text-align: center;
    }

    .law-team-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 auto 10px;
        background: linear-gradient(135deg, #374151, #1f2937);
        border: 2px solid #c9a227;
    }

    .law-team-name {
        font-size: 10px;
        font-weight: 600;
        color: #1a365d;
        margin-bottom: 2px;
    }

    .law-team-role {
        font-size: 8px;
        color: #6b7280;
    }

    /* Contact CTA */
    .law-cta {
        padding: 25px 20px;
        background: linear-gradient(135deg, #c9a227, #d4af37);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .law-cta-text {
        color: #1a365d;
    }

    .law-cta-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .law-cta-subtitle {
        font-size: 10px;
        opacity: 0.8;
    }

    .law-cta-btn {
        width: 100px;
        height: 36px;
        background: #1a365d;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        color: #111827;
    }

    /* Footer */
    .law-footer {
        padding: 30px 20px;
        background: #0f172a;
    }

    .law-footer-top {
        display: flex;
        gap: 30px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .law-footer-col {
        flex: 1;
    }

    .law-footer-heading {
        font-size: 10px;
        font-weight: 600;
        color: #c9a227;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .law-footer-link {
        height: 6px;
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
        margin-bottom: 8px;
    }

    .law-footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .law-footer-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .law-footer-logo-icon {
        width: 28px;
        height: 28px;
        background: #c9a227;
        border-radius: 4px;
    }

    .law-footer-logo-text {
        font-size: 11px;
        font-weight: 600;
        color: #111827;
    }

    .law-footer-social {
        display: flex;
        gap: 8px;
    }

    .law-footer-social-icon {
        width: 24px;
        height: 24px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
    }

    /* Mobile Phone Mockup - Real App Interface Screenshot */
    .phone-mockup {
        width: 100%;
        max-width: 420px;
        background: transparent;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    @media (max-width: 1024px) {
        .phone-mockup {
            max-width: 360px;
        }
    }

    @media (max-width: 768px) {
        .phone-mockup {
            max-width: 280px;
        }
    }

    @media (max-width: 640px) {
        .phone-mockup {
            max-width: 260px;
        }
    }

    .phone-mockup-image {
        width: 100%;
        height: auto;
        display: block;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        animation: phone-float 6s ease-in-out infinite;
        object-fit: contain;
        border-radius: 8px;
    }

    @keyframes phone-float {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        25% {
            transform: translateY(-12px) scale(1.02);
        }
        50% {
            transform: translateY(0) scale(1);
        }
        75% {
            transform: translateY(-8px) scale(1.01);
        }
    }


    /* Team Collaboration / Live Chat Mockup */
    .team-mockup {
        width: 100%;
        max-width: 460px;
        height: auto;
        max-height: 500px;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    @media (max-width: 1024px) {
        .team-mockup {
            max-width: 380px;
            max-height: 440px;
        }
    }

    @media (max-width: 768px) {
        .team-mockup {
            max-width: 100%;
            max-height: 350px;
        }
    }

    @media (max-width: 640px) {
        .team-mockup {
            max-height: 310px;
        }
    }

    /* Chat Header */
    .chat-header {
        padding: 18px 20px;
        background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .chat-header-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #111827;
        font-weight: 700;
        position: relative;
    }

    .chat-header-avatar::after {
        content: '';
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 12px;
        height: 12px;
        background: #22c55e;
        border-radius: 50%;
        border: 2px solid #ffffff;
    }

    .chat-header-info {
        flex: 1;
    }

    .chat-header-name {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 3px;
    }

    .chat-header-status {
        font-size: 12px;
        color: #22c55e;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .chat-header-status::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #22c55e;
        border-radius: 50%;
    }

    .chat-header-actions {
        display: flex;
        gap: 10px;
    }

    .chat-header-action {
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-header-action-icon {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,0.7);
        border-radius: 3px;
    }

    /* Chat Messages Area */
    .chat-messages {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    @media (max-width: 768px) {
        .chat-messages {
            padding: 15px;
            gap: 12px;
        }
    }

    @media (max-width: 640px) {
        .chat-messages {
            padding: 12px;
            gap: 10px;
        }
    }

    .chat-message {
        display: flex;
        gap: 10px;
        max-width: 85%;
        animation: message-slide-in 0.5s ease-out;
    }

    @keyframes message-slide-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chat-message.incoming {
        align-self: flex-start;
    }

    .chat-message.outgoing {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .chat-msg-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .chat-msg-avatar.support {
        background: linear-gradient(135deg, #FF3E13, #e6380f);
    }

    .chat-msg-avatar.customer {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }

    .chat-msg-bubble {
        padding: 12px 16px;
        border-radius: 18px;
        position: relative;
    }

    .chat-message.incoming .chat-msg-bubble {
        background: white;
        border-bottom-left-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .chat-message.outgoing .chat-msg-bubble {
        background: linear-gradient(135deg, #ffffff, #e2e8f0);
        border-bottom-right-radius: 4px;
        color: #111827;
    }

    .chat-msg-text {
        font-size: 13px;
        line-height: 1.5;
        color: inherit;
    }

    @media (max-width: 768px) {
        .chat-msg-text {
            font-size: 12px;
        }
    }

    @media (max-width: 640px) {
        .chat-msg-text {
            font-size: 11px;
            line-height: 1.4;
        }
    }

    .chat-msg-time {
        font-size: 10px;
        margin-top: 6px;
        opacity: 0.6;
    }

    @media (max-width: 640px) {
        .chat-msg-time {
            font-size: 9px;
            margin-top: 4px;
        }
    }

    .chat-message.incoming .chat-msg-text {
        color: #374151;
    }

    /* Typing Indicator */
    .chat-typing {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
    }

    .chat-typing-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
    }

    .chat-typing-bubble {
        background: white;
        padding: 12px 16px;
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        display: flex;
        gap: 4px;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .chat-typing-dot {
        width: 7px;
        height: 7px;
        background: #9ca3af;
        border-radius: 50%;
        animation: typing-bounce 1.4s infinite;
    }

    .chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing-bounce {
        0%, 60%, 100% { transform: translateY(0); }
        30% { transform: translateY(-6px); }
    }

    /* Chat Input */
    .chat-input-area {
        padding: 15px 20px;
        background: white;
        border-top: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .chat-input-actions {
        display: flex;
        gap: 8px;
    }

    .chat-input-action {
        width: 36px;
        height: 36px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-input-action-icon {
        width: 16px;
        height: 16px;
        background: #9ca3af;
        border-radius: 3px;
    }

    .chat-input-field {
        flex: 1;
        height: 44px;
        background: #f3f4f6;
        border-radius: 22px;
        padding: 0 18px;
        display: flex;
        align-items: center;
    }

    .chat-input-placeholder {
        font-size: 13px;
        color: #9ca3af;
    }

    .chat-send-btn {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(255,62,19,0.3);
    }

    .chat-send-icon {
        width: 0;
        height: 0;
        border-left: 10px solid white;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        margin-left: 3px;
    }

    /* Legacy classes for backwards compatibility */
    .team-header {
        display: none;
    }

    .team-avatar {
        display: none;
    }

    .chat-message-legacy {
        display: none;
    }

    @keyframes pulse-avatar {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    @keyframes message-appear {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 1; }
    }

    /* Automation Dashboard Mockup */
    .automation-mockup {
        width: 100%;
        max-width: 480px;
        height: auto;
        max-height: 500px;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    @media (max-width: 1024px) {
        .automation-mockup {
            max-width: 400px;
            max-height: 440px;
        }
    }

    @media (max-width: 768px) {
        .automation-mockup {
            max-width: 100%;
            max-height: 350px;
        }
    }

    @media (max-width: 640px) {
        .automation-mockup {
            max-height: 310px;
        }
    }

    /* Dashboard Header */
    .dashboard-header {
        padding: 20px 25px;
        background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    @media (max-width: 768px) {
        .dashboard-header {
            padding: 18px 20px;
            flex-direction: column;
            gap: 15px;
            align-items: flex-start;
        }
    }

    @media (max-width: 640px) {
        .dashboard-header {
            padding: 15px;
            gap: 12px;
        }
    }

    .dashboard-title {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dashboard-icon {
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-icon::after {
        content: '⚡';
        font-size: 20px;
    }

    .dashboard-title-text {
        color: #111827;
    }

    .dashboard-title-main {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .dashboard-title-sub {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
    }

    .dashboard-stats {
        display: flex;
        gap: 20px;
    }

    .dashboard-stat {
        text-align: center;
    }

    .dashboard-stat-value {
        font-size: 24px;
        font-weight: 800;
        color: #111827;
    }

    .dashboard-stat-label {
        font-size: 10px;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
    }

    /* Dashboard Content */
    .dashboard-content {
        flex: 1;
        padding: 20px 25px;
        overflow-y: auto;
    }

    @media (max-width: 768px) {
        .dashboard-content {
            padding: 15px 18px;
        }
    }

    @media (max-width: 640px) {
        .dashboard-content {
            padding: 12px 15px;
        }
    }

    .dashboard-section-title {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dashboard-section-title::before {
        content: '';
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
        border-radius: 2px;
    }

    /* Automation Cards */
    .automation-card {
        background: white;
        border-radius: 16px;
        padding: 18px;
        margin-bottom: 15px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    @media (max-width: 768px) {
        .automation-card {
            padding: 15px;
            margin-bottom: 12px;
            border-radius: 14px;
        }
    }

    @media (max-width: 640px) {
        .automation-card {
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 12px;
        }
    }

    .automation-card:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .automation-card:hover {
            transform: translateY(-1px);
        }
    }

    .automation-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .automation-card-info {
        display: flex;
        gap: 12px;
    }

    .automation-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #111827;
        flex-shrink: 0;
    }

    .automation-card-icon.invoice {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

    .automation-card-icon.email {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
    }

    .automation-card-icon.data {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .automation-card-details {
        flex: 1;
    }

    .automation-card-title {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
    }

    .automation-card-desc {
        font-size: 12px;
        color: #6b7280;
    }

    .automation-card-status {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }

    .automation-card-status.running {
        background: #dcfce7;
        color: #16a34a;
    }

    .automation-card-status.active {
        background: #dbeafe;
        color: #2563eb;
    }

    .automation-card-status.queued {
        background: #fef3c7;
        color: #d97706;
    }

    /* Progress Section */
    .automation-progress-section {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .automation-progress {
        flex: 1;
        height: 8px;
        background: #e5e7eb;
        border-radius: 4px;
        overflow: hidden;
    }

    .automation-bar {
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, #FF3E13, #e6380f);
        animation: progress-fill 4s ease-in-out infinite;
        position: relative;
    }

    .automation-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer-bar 2s infinite;
    }

    @keyframes shimmer-bar {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .automation-percentage {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
        min-width: 45px;
        text-align: right;
    }

    .automation-card-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
    }

    .automation-metric {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .automation-metric-icon {
        width: 16px;
        height: 16px;
        background: #f3f4f6;
        border-radius: 4px;
    }

    .automation-metric-text {
        font-size: 11px;
        color: #6b7280;
    }

    .automation-metric-value {
        font-weight: 600;
        color: #374151;
    }

    @keyframes progress-fill {
        0% { width: 15%; }
        25% { width: 40%; }
        50% { width: 65%; }
        75% { width: 85%; }
        100% { width: 15%; }
    }

    /* Slider Navigation - Responsive */
    .slider-nav {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        gap: 10px;
        padding: 8px 16px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(8px);
        border-radius: 24px;
    }

    @media (max-width: 768px) {
        .slider-nav {
            bottom: 25px;
            gap: 8px;
            padding: 10px 18px;
            background: rgba(0, 0, 0, 0.5);
        }
    }

    @media (max-width: 640px) {
        .slider-nav {
            bottom: 20px;
            gap: 6px;
            padding: 8px 14px;
        }
    }

    .slider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    @media (max-width: 768px) {
        .slider-dot {
            width: 12px;
            height: 12px;
        }
    }

    .slider-dot:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.2);
    }

    .slider-dot.active {
        background: #FF3E13;
        border-color: #FF3E13;
        width: 32px;
        border-radius: 6px;
    }

    @media (max-width: 768px) {
        .slider-dot.active {
            width: 36px;
        }
    }

    /* Improved Slider Arrows - Better Design */
    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #111827;
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .slider-arrow {
            width: 46px;
            height: 46px;
            font-size: 16px;
            border-radius: 10px;
        }
    }

    @media (max-width: 640px) {
        .slider-arrow {
            width: 42px;
            height: 42px;
            font-size: 14px;
            border-radius: 8px;
        }
    }

    .slider-arrow:hover {
        background: #FF3E13;
        color: #111827;
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 6px 20px rgba(255, 62, 19, 0.4);
    }

    .slider-arrow.prev {
        left: 20px;
    }

    .slider-arrow.next {
        right: 20px;
    }

    @media (max-width: 768px) {
        .slider-arrow.prev {
            left: 15px;
        }
        .slider-arrow.next {
            right: 15px;
        }
    }

    @media (max-width: 640px) {
        .slider-arrow.prev {
            left: 8px;
        }
        .slider-arrow.next {
            right: 8px;
        }
    }

    /* Slide Content Animation - Responsive */
    .slide-content {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease 0.3s;
        padding: 30px 0;
    }

    .slide.active .slide-content {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 768px) {
        .slide-content {
            padding: 15px 0;
            transform: translateY(15px);
        }
    }

    @media (max-width: 640px) {
        .slide-content {
            padding: 10px 0;
            transform: translateY(10px);
        }
    }

    /* Text visibility — all slides now dark bg, use white text */
    .slide-1 h1,
    .slide-1 p,
    .slide-1 h1 span {
        color: white !important;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 4px 25px rgba(0, 0, 0, 0.3);
    }
    .slide-2 h1,
    .slide-2 p,
    .slide-2 h1 span {
        color: white !important;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6), 0 4px 30px rgba(0, 0, 0, 0.4);
    }

    .slide-3 h1,
    .slide-3 p,
    .slide-3 h1 span {
        color: white !important;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6), 0 4px 30px rgba(0, 0, 0, 0.4);
    }

    /* Override gradient text in slides to be white */
    .slide h1 .gradient-text-static,
    .slide h1 .gradient-text {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: white !important;
        color: white !important;
    }

    /* Badge colors — all slides dark bg, white badges */
    .slide-1 .badge-text,
    .slide-1 .inline-flex {
        color: white !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

    .slide-1 .inline-flex span,
    .slide-1 .inline-flex i {
        color: white !important;
    }

    .slide-2 .badge-text,
    .slide-2 .inline-flex {
        color: white !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }

    .slide-2 .inline-flex span,
    .slide-2 .inline-flex i {
        color: white !important;
    }

    .slide-3 .badge-text,
    .slide-3 .inline-flex {
        color: white !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }

    .slide-3 .inline-flex span,
    .slide-3 .inline-flex i {
        color: white !important;
    }

    /* BPO service badges in slide 2 */
    .slide-2 .flex-wrap span {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #374151 !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }



    /* Orbit animation */
    @keyframes orbit {
        from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
        to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
    }
    @keyframes orbit-reverse {
        from { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
        to { transform: rotate(0deg) translateX(200px) rotate(0deg); }
    }
    @keyframes orbit-large {
        from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
        to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
    }

    .orbit-1 { animation: orbit 20s linear infinite; }
    .orbit-2 { animation: orbit-reverse 25s linear infinite; }
    .orbit-3 { animation: orbit-large 30s linear infinite; }

    /* Blob morphing */
    @keyframes blob-morph {
        0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
        25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.1); }
        50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; transform: rotate(180deg) scale(1); }
        75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; transform: rotate(270deg) scale(1.1); }
    }
    .blob-animate { animation: blob-morph 15s ease-in-out infinite; }

    /* Particle animation */
    @keyframes particle-float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
        25% { transform: translate(30px, -40px) rotate(90deg); opacity: 0.3; }
        50% { transform: translate(-20px, -80px) rotate(180deg); opacity: 0.7; }
        75% { transform: translate(40px, -40px) rotate(270deg); opacity: 0.4; }
    }
    .particle { animation: particle-float 8s ease-in-out infinite; }

    /* Floating icons enhanced */
    @keyframes float-bounce {
        0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
        25% { transform: translateY(-15px) rotate(5deg) scale(1.05); }
        50% { transform: translateY(-25px) rotate(0deg) scale(1); }
        75% { transform: translateY(-10px) rotate(-5deg) scale(1.05); }
    }
    .float-bounce { animation: float-bounce 5s ease-in-out infinite; }

    /* Glow pulse */
    @keyframes glow-pulse {
        0%, 100% { box-shadow: 0 0 20px rgba(217, 70, 239, 0.3); }
        50% { box-shadow: 0 0 40px rgba(217, 70, 239, 0.6), 0 0 60px rgba(6, 182, 212, 0.3); }
    }
    .glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

    /* Wiggle animation */
    @keyframes wiggle {
        0%, 100% { transform: rotate(-3deg); }
        50% { transform: rotate(3deg); }
    }
    .wiggle { animation: wiggle 2s ease-in-out infinite; }

    /* Scale pulse */
    @keyframes scale-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    .scale-pulse { animation: scale-pulse 3s ease-in-out infinite; }

    /* Slide in animations */
    @keyframes slide-up-fade {
        0% { transform: translateY(30px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    /* Shimmer effect */
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    .shimmer {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        background-size: 200% 100%;
        animation: shimmer 3s infinite;
    }

    /* Rotate slow */
    @keyframes rotate-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .rotate-slow { animation: rotate-slow 20s linear infinite; }

    /* Bounce in */
    @keyframes bounce-in {
        0% { transform: scale(0.8); opacity: 0; }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); opacity: 1; }
    }

    /* Float horizontal */
    @keyframes float-horizontal {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(20px); }
    }
    .float-horizontal { animation: float-horizontal 4s ease-in-out infinite; }

    /* Diagonal float */
    @keyframes float-diagonal {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(15px, -15px); }
    }
    .float-diagonal { animation: float-diagonal 5s ease-in-out infinite; }

    /* ========== SERVICE ICON ANIMATIONS ========== */

    /* Website - Browser with code typing */
    .service-icon-website {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .browser-window {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    }
    .browser-header {
        display: flex;
        gap: 3px;
        margin-bottom: 4px;
    }
    .browser-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
    }
    .browser-content {
        background: rgba(255,255,255,0.15);
        border-radius: 6px;
        height: calc(100% - 14px);
        padding: 4px;
        overflow: hidden;
    }
    @keyframes code-typing {
        0%, 100% { width: 0; }
        50% { width: 100%; }
    }
    .code-line {
        height: 4px;
        background: rgba(255,255,255,0.6);
        border-radius: 2px;
        margin-bottom: 3px;
        animation: code-typing 2s ease-in-out infinite;
    }
    .code-line:nth-child(2) { width: 70%; animation-delay: 0.3s; }
    .code-line:nth-child(3) { width: 85%; animation-delay: 0.6s; }

    /* Mobile Apps - Phone with app icons */
    .service-icon-mobile {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .phone-frame {
        width: 36px;
        height: 56px;
        background: linear-gradient(135deg, #d946ef, #a21caf);
        border-radius: 8px;
        padding: 4px;
        margin: 4px auto;
        box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
    }
    .phone-screen {
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.15);
        border-radius: 4px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
        padding: 4px;
    }
    @keyframes app-pop {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    .app-icon {
        width: 10px;
        height: 10px;
        background: rgba(255,255,255,0.7);
        border-radius: 3px;
        animation: app-pop 1.5s ease-in-out infinite;
    }
    .app-icon:nth-child(2) { animation-delay: 0.2s; }
    .app-icon:nth-child(3) { animation-delay: 0.4s; }
    .app-icon:nth-child(4) { animation-delay: 0.6s; }

    /* Digital Marketing - Chart growing */
    .service-icon-marketing {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .chart-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        border-radius: 12px;
        padding: 8px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
    }
    @keyframes chart-grow {
        0%, 100% { transform: scaleY(0.3); }
        50% { transform: scaleY(1); }
    }
    .chart-bar {
        width: 8px;
        background: rgba(255,255,255,0.8);
        border-radius: 3px 3px 0 0;
        transform-origin: bottom;
        animation: chart-grow 2s ease-in-out infinite;
    }
    .chart-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
    .chart-bar:nth-child(2) { height: 32px; animation-delay: 0.2s; }
    .chart-bar:nth-child(3) { height: 24px; animation-delay: 0.4s; }
    .chart-bar:nth-child(4) { height: 40px; animation-delay: 0.6s; }

    /* Graphic Design - Paint palette */
    .service-icon-design {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .palette {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f97316, #ea580c);
        border-radius: 50% 50% 50% 20%;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    }
    @keyframes color-pop {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.3); opacity: 1; }
    }
    .color-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: color-pop 2s ease-in-out infinite;
    }
    .color-dot:nth-child(1) { background: #ef4444; animation-delay: 0s; }
    .color-dot:nth-child(2) { background: #22c55e; animation-delay: 0.3s; }
    .color-dot:nth-child(3) { background: #3b82f6; animation-delay: 0.6s; }
    .color-dot:nth-child(4) { background: #eab308; animation-delay: 0.9s; }

    /* AI Automation - Neural network */
    .service-icon-ai {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .neural-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #10b981, #059669);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    }
    @keyframes neural-pulse {
        0%, 100% { opacity: 0.3; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.1); }
    }
    @keyframes data-flow {
        0% { transform: translateX(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateX(100%); opacity: 0; }
    }
    .neural-node {
        position: absolute;
        width: 8px;
        height: 8px;
        background: rgba(255,255,255,0.9);
        border-radius: 50%;
        animation: neural-pulse 1.5s ease-in-out infinite;
    }
    .neural-node:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
    .neural-node:nth-child(2) { top: 50%; left: 10%; animation-delay: 0.3s; }
    .neural-node:nth-child(3) { top: 80%; left: 25%; animation-delay: 0.6s; }
    .neural-node:nth-child(4) { top: 20%; right: 20%; animation-delay: 0.2s; }
    .neural-node:nth-child(5) { top: 55%; right: 15%; animation-delay: 0.5s; }
    .neural-node:nth-child(6) { top: 75%; right: 25%; animation-delay: 0.8s; }
    .neural-line {
        position: absolute;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        animation: data-flow 2s linear infinite;
    }
    .neural-line:nth-child(7) { top: 30%; left: 0; width: 100%; animation-delay: 0s; }
    .neural-line:nth-child(8) { top: 60%; left: 0; width: 100%; animation-delay: 0.5s; }

    /* Live Chat - Chat bubbles */
    .service-icon-chat {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .chat-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        border-radius: 12px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    }
    @keyframes bubble-pop {
        0% { transform: scale(0) translateX(-10px); opacity: 0; }
        50% { transform: scale(1.1) translateX(0); opacity: 1; }
        100% { transform: scale(1) translateX(0); opacity: 1; }
    }
    @keyframes bubble-pop-right {
        0% { transform: scale(0) translateX(10px); opacity: 0; }
        50% { transform: scale(1.1) translateX(0); opacity: 1; }
        100% { transform: scale(1) translateX(0); opacity: 1; }
    }
    .chat-bubble {
        height: 10px;
        background: rgba(255,255,255,0.8);
        border-radius: 8px;
        animation: bubble-pop 2s ease-in-out infinite;
    }
    .chat-bubble:nth-child(1) { width: 60%; align-self: flex-start; animation-delay: 0s; }
    .chat-bubble:nth-child(2) { width: 50%; align-self: flex-end; animation: bubble-pop-right 2s ease-in-out infinite; animation-delay: 0.5s; }
    .chat-bubble:nth-child(3) { width: 70%; align-self: flex-start; animation-delay: 1s; }

    @keyframes typing-dots {
        0%, 60%, 100% { transform: translateY(0); }
        30% { transform: translateY(-4px); }
    }
    .typing-indicator {
        display: flex;
        gap: 3px;
        align-self: flex-end;
    }
    .typing-dot {
        width: 5px;
        height: 5px;
        background: rgba(255,255,255,0.6);
        border-radius: 50%;
        animation: typing-dots 1.4s infinite;
    }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }

    /* Content Moderation - Shield with checkmark */
    .service-icon-moderation {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .shield-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f43f5e, #e11d48);
        border-radius: 12px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(244, 63, 94, 0.4);
        position: relative;
        overflow: hidden;
    }
    @keyframes shield-scan {
        0%, 100% { top: -100%; opacity: 0; }
        50% { top: 100%; opacity: 0.5; }
    }
    .shield-container::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shield-scan 2s ease-in-out infinite;
    }
    .shield-icon {
        font-size: 28px;
        color: white;
    }

    /* Data Annotation - Tags with animation */
    .service-icon-annotation {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .annotation-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        border-radius: 12px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    }
    @keyframes tag-bounce {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    .annotation-tag {
        width: 16px;
        height: 8px;
        background: rgba(255,255,255,0.8);
        border-radius: 4px;
        animation: tag-bounce 1.5s ease-in-out infinite;
    }
    .annotation-tag:nth-child(2) { animation-delay: 0.2s; width: 20px; }
    .annotation-tag:nth-child(3) { animation-delay: 0.4s; width: 14px; }
    .annotation-tag:nth-child(4) { animation-delay: 0.6s; width: 18px; }

    /* Online Survey - Clipboard with checkboxes */
    .service-icon-survey {
        position: relative;
        width: 64px;
        height: 64px;
    }
    .survey-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        border-radius: 12px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    }
    @keyframes checkbox-fill {
        0%, 40% { transform: scale(0); }
        60% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
    .survey-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .survey-checkbox {
        width: 10px;
        height: 10px;
        border: 2px solid rgba(255,255,255,0.8);
        border-radius: 2px;
        position: relative;
    }
    .survey-checkbox::after {
        content: '✓';
        position: absolute;
        top: -3px;
        left: 0;
        font-size: 10px;
        color: #111827;
        transform: scale(0);
        animation: checkbox-fill 2s ease-in-out infinite;
    }
    .survey-item:nth-child(1) .survey-checkbox::after { animation-delay: 0s; }
    .survey-item:nth-child(2) .survey-checkbox::after { animation-delay: 0.3s; }
    .survey-item:nth-child(3) .survey-checkbox::after { animation-delay: 0.6s; }
    .survey-line {
        height: 6px;
        background: rgba(255,255,255,0.6);
        border-radius: 3px;
        flex: 1;
    }

    /* Portfolio image styles - Creative Design */
    .portfolio-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px;
    }
    .portfolio-card:hover .portfolio-image {
        transform: scale(1.05);
        padding: 15px;
    }
    .portfolio-thumbnail {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(12, 30, 60, 0.08);
    }
    .portfolio-card:hover .portfolio-thumbnail {
        box-shadow: 0 20px 60px rgba(12, 30, 60, 0.2), 0 0 0 3px rgba(255, 60, 16, 0.2);
        transform: translateY(-8px);
        border-color: rgba(255, 60, 16, 0.3);
    }
    .portfolio-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
    }
    .portfolio-card:hover .portfolio-overlay {
        opacity: 0;
    }
    .portfolio-info {
        position: relative;
        z-index: 10;
    }

    /* Decorative corner elements */
    .corner-accent {
        position: absolute;
        width: 40px;
        height: 40px;
        transition: all 0.4s ease;
        z-index: 5;
    }
    .corner-accent::before,
    .corner-accent::after {
        content: '';
        position: absolute;
        background: currentColor;
        transition: all 0.4s ease;
    }
    .corner-accent::before {
        width: 100%;
        height: 3px;
        border-radius: 2px;
    }
    .corner-accent::after {
        width: 3px;
        height: 100%;
        border-radius: 2px;
    }
    .corner-accent.top-left {
        top: 10px;
        left: 10px;
        color: rgba(12, 30, 60, 0);
    }
    .corner-accent.top-left::before { top: 0; left: 0; }
    .corner-accent.top-left::after { top: 0; left: 0; }
    .corner-accent.bottom-right {
        bottom: 10px;
        right: 10px;
        color: rgba(255, 60, 16, 0);
    }
    .corner-accent.bottom-right::before { bottom: 0; right: 0; }
    .corner-accent.bottom-right::after { bottom: 0; right: 0; }
    .portfolio-card:hover .corner-accent.top-left {
        color: rgba(12, 30, 60, 0.6);
        top: 15px;
        left: 15px;
    }
    .portfolio-card:hover .corner-accent.bottom-right {
        color: rgba(255, 60, 16, 0.6);
        bottom: 15px;
        right: 15px;
    }

    /* Staggered grid layout */
    .portfolio-item-1 { transform: translateY(20px); }
    .portfolio-item-2 { transform: translateY(-10px); }
    .portfolio-item-3 { transform: translateY(30px); }
    .portfolio-item-4 { transform: translateY(0px); }
    .portfolio-item-5 { transform: translateY(15px); }
    .portfolio-item-6 { transform: translateY(-15px); }

    /* ============================================================
       CINEMATIC REDESIGN — PARALLAX & SCROLL ANIMATION SYSTEM
       ============================================================ */

    /* Scroll-reveal base states — JS adds .is-visible */
    .reveal-up   { opacity:0; transform:translateY(50px);  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
    .reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
    .reveal-right{ opacity:0; transform:translateX(50px);  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
    .reveal-scale{ opacity:0; transform:scale(.90);        transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
    .reveal-zoom { opacity:0; transform:scale(.75);        transition:opacity .7s cubic-bezier(.34,1.56,.64,1), transform .7s cubic-bezier(.34,1.56,.64,1); will-change:opacity,transform; }
    .is-visible  { opacity:1 !important; transform:none !important; }

    .delay-100 { transition-delay:.1s!important; }
    .delay-200 { transition-delay:.2s!important; }
    .delay-300 { transition-delay:.3s!important; }
    .delay-400 { transition-delay:.4s!important; }
    .delay-500 { transition-delay:.5s!important; }
    .delay-600 { transition-delay:.6s!important; }
    .delay-700 { transition-delay:.7s!important; }

    /* Parallax wrappers */
    .parallax-section { position:relative; overflow:hidden; }

    /* Cinematic section top stripe */
    .section-cinematic { position:relative; }
    .section-cinematic::before {
        content:'';
        position:absolute;
        top:0; left:0; right:0;
        height:3px;
        background:linear-gradient(90deg,transparent,#ffffff 20%,#FF3E13 50%,#ffffff 80%,transparent);
        z-index:10;
    }

    /* Hero particle field */
    .particle-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
    .p-dot {
        position:absolute;
        border-radius:50%;
        background:rgba(255,255,255,.6);
        animation:pdrift linear infinite;
    }
    @keyframes pdrift {
        0%   { transform:translateY(110%) rotate(0deg);   opacity:0; }
        5%   { opacity:1; }
        95%  { opacity:.5; }
        100% { transform:translateY(-110%) rotate(720deg); opacity:0; }
    }

    /* Large section number watermark */
    .section-number {
        font-size:clamp(80px,12vw,160px);
        font-weight:900;
        line-height:1;
        color:transparent;
        -webkit-text-stroke:2px rgba(12,30,60,.05);
        position:absolute;
        user-select:none;
        pointer-events:none;
        z-index:0;
    }

    /* Glowing orbs */
    .orb {
        border-radius:50%;
        filter:blur(80px);
        opacity:.45;
        position:absolute;
        pointer-events:none;
        animation:orb-drift 12s ease-in-out infinite;
    }
    @keyframes orb-drift {
        0%,100% { transform:translate(0,0) scale(1); }
        33%     { transform:translate(30px,-20px) scale(1.1); }
        66%     { transform:translate(-20px,15px) scale(.95); }
    }

    /* Scroll progress bar */
    #scroll-progress {
        position:fixed;
        top:0; left:0;
        height:3px;
        background:linear-gradient(90deg,#ffffff,#FF3E13,#243b53);
        z-index:9999;
        width:0%;
        transition:width .1s linear;
        pointer-events:none;
    }

    /* Button micro-animations */
    .btn-primary, .btn-secondary, .btn-outline {
        position:relative;
        overflow:hidden;
        transition:all .3s cubic-bezier(.34,1.56,.64,1) !important;
    }
    .btn-primary::after, .btn-secondary::after {
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
        transform:translateX(-100%);
        transition:transform .5s ease;
    }
    .btn-primary:hover::after, .btn-secondary:hover::after { transform:translateX(100%); }
    .btn-primary:hover, .btn-secondary:hover {
        transform:translateY(-3px) scale(1.03);
        box-shadow:0 12px 30px rgba(255,62,19,.4);
    }
    .btn-outline:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 30px rgba(11,25,48,.2); }

    /* Tilt cards */
    .tilt-card { transform-style:preserve-3d; transition:transform .4s ease, box-shadow .4s ease; }

    /* Portfolio image zoom */
    .portfolio-thumbnail img { transition:transform .7s cubic-bezier(.16,1,.3,1); }
    .portfolio-card:hover .portfolio-thumbnail img { transform:scale(1.07); }

    /* Horizontal scroll reveal */
    .h-scroll-reveal { opacity:0; transform:translateX(40px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
    .h-scroll-reveal.is-visible { opacity:1; transform:translateX(0); }

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce) {
        .reveal-up,.reveal-left,.reveal-right,.reveal-scale,.reveal-zoom,
        .p-dot,.orb { animation:none!important; transition:none!important; transform:none!important; opacity:1!important; }
    }

    /* ============================================================
       DRAMATIC VISUAL OVERHAUL — SECTION BACKGROUNDS & EFFECTS
       ============================================================ */

    /* ── Animated gradient mesh background ── */
    @keyframes mesh-shift {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* ── Hero improvements ── */
    .hero-slider {
        margin-top: 0;
    }
    /* Slide 1: Dark navy — consistent with dark slides, white text works */
    .slide-1 {
        background: linear-gradient(135deg, #0b1a30 0%, #1a2d4a 45%, #243b56 100%) !important;
    }
    .slide-2 {
        background: linear-gradient(135deg, #1a0a02 0%, #3d1200 40%, #FF3E13 100%) !important;
    }
    .slide-3 {
        background: linear-gradient(135deg, #060d1a 0%, #0a1929 50%, #112244 100%) !important;
    }

    /* ── Hero animated mesh layer ── */
    .hero-mesh {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,62,19,0.18) 0%, transparent 70%),
            radial-gradient(ellipse 50% 60% at 80% 70%, rgba(36,59,83,0.35) 0%, transparent 70%),
            radial-gradient(ellipse 40% 40% at 50% 50%, rgba(11,25,48,0.1) 0%, transparent 70%);
        animation: mesh-breathe 8s ease-in-out infinite;
        pointer-events: none;
        z-index: 1;
    }
    @keyframes mesh-breathe {
        0%,100% { opacity: 0.7; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.05); }
    }

    /* ── Grid lines overlay ── */
    .hero-grid-lines {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        z-index: 1;
    }

    /* ── SERVICES SECTION — Dark cinematic ── */
    #services {
        background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%) !important;
        position: relative;
    }

    /* ── Services card hover glow ── */
    #services .card-premium:hover {
        box-shadow: 0 24px 60px rgba(0,0,0,0.15), 0 0 0 2px rgba(255,62,19,0.15), 0 0 40px rgba(255,62,19,0.08) !important;
        transform: translateY(-12px) !important;
    }

    /* ── STATS BAND ── */
    .stats-band {
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
        padding: 64px 0;
        position: relative;
        overflow: hidden;
    }
    .stats-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 40% 80% at 10% 50%, rgba(255,62,19,0.12) 0%, transparent 60%),
            radial-gradient(ellipse 40% 80% at 90% 50%, rgba(36,59,83,0.3) 0%, transparent 60%);
        pointer-events: none;
    }
    .stats-band::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,62,19,0.6) 50%, transparent);
    }
    .stat-item {
        text-align: center;
        position: relative;
    }
    .stat-item::after {
        content: '';
        position: absolute;
        right: 0; top: 20%; bottom: 20%;
        width: 1px;
        background: rgba(12,30,60,0.12);
    }
    .stat-item:last-child::after { display: none; }
    .stat-num {
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 900;
        line-height: 1;
        background: linear-gradient(135deg, #0c1e3c 0%, #FF3E13 60%, #ff6b44 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 8px;
        display: block;
    }
    .stat-lbl {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* ── MARQUEE SERVICES STRIP ── */
    .marquee-strip {
        background: #FF3E13;
        padding: 14px 0;
        overflow: hidden;
        white-space: nowrap;
    }
    .marquee-inner {
        display: inline-flex;
        gap: 0;
        animation: marquee-run 20s linear infinite;
    }
    .marquee-inner span {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 0 32px;
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .marquee-inner span::after {
        content: '★';
        font-size: 10px;
        opacity: 0.7;
    }
    @keyframes marquee-run {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* ── DARK SECTION — WHY US ── */
    .why-us-dark {
        background: linear-gradient(160deg, #f8fafc 0%, #ffffff 45%, #f1f5f9 100%) !important;
        position: relative;
    }
    .why-us-dark::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
        background-size: 80px 80px;
        pointer-events: none;
    }
    .why-us-dark h2,
    .why-us-dark h3,
    .why-us-dark p {
        color: rgba(255,255,255,0.85) !important;
    }
    .why-us-dark .card-premium {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.1) !important;
        backdrop-filter: blur(12px);
    }
    .why-us-dark .card-premium h3 { color: white !important; }
    .why-us-dark .card-premium p  { color: rgba(255,255,255,0.6) !important; }
    .why-us-dark .card-premium:hover {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,62,19,0.4) !important;
        box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,62,19,0.2) !important;
    }
    .why-us-dark .section-number { -webkit-text-stroke-color: rgba(255,255,255,0.03) !important; }

    /* Stat cards in dark section */
    .why-us-dark .stat-card {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(20px);
    }
    .why-us-dark .stat-card:hover {
        background: rgba(255,62,19,0.12) !important;
        border-color: rgba(255,62,19,0.3) !important;
    }

    /* ── PORTFOLIO — dramatic dark hero ── */
    #portfolio {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    /* Portfolio card shine on hover */
    .portfolio-card {
        position: relative;
    }
    .portfolio-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent 40%, rgba(255,62,19,0.03) 100%);
        border-radius: 20px;
        opacity: 0;
        transition: opacity .4s ease;
        z-index: 1;
        pointer-events: none;
    }
    .portfolio-card:hover::before { opacity: 1; }

    /* ── TESTIMONIALS dark ── */
    .testimonials-dark {
        background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%) !important;
        position: relative;
    }

    /* Testimonial card accent line */
    .testimonial-card {
        position: relative;
        border-left: 3px solid transparent;
        transition: all .4s ease;
    }
    .testimonial-card::before {
        content: '"';
        position: absolute;
        top: -10px;
        left: 24px;
        font-size: 80px;
        font-weight: 900;
        color: rgba(255,62,19,0.1);
        line-height: 1;
        font-family: Georgia, serif;
        pointer-events: none;
    }
    .testimonial-card:hover {
        border-left-color: #FF3E13 !important;
        transform: translateY(-6px) !important;
        box-shadow: -4px 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,62,19,0.1) !important;
    }

    /* ── Founder section styled ── */
    .founder-section {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    /* ═══════════════════════════════════════════════════════════
       REDESIGNED FOUNDER SECTION - IMMERSIVE & PARALLAX
       ═══════════════════════════════════════════════════════════ */

    /* Founder particles animation */
    .founder-particle {
        position: absolute;
        background: radial-gradient(circle, rgba(99,102,241,0.7), transparent);
        border-radius: 50%;
        animation: founder-particle-float 10s infinite ease-in-out;
    }
    @keyframes founder-particle-float {
        0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
        25% { transform: translate(30px, -50px) scale(1.2); opacity: 0.8; }
        50% { transform: translate(-20px, -100px) scale(0.8); opacity: 0.4; }
        75% { transform: translate(40px, -60px) scale(1.1); opacity: 0.7; }
    }

    /* Parallax grid */
    .founder-parallax-grid {
        will-change: transform;
    }

    /* Floating orbs */
    .founder-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        pointer-events: none;
        opacity: 0.6;
        animation: founder-orb-drift 25s infinite ease-in-out;
    }
    .founder-orb-1 {
        width: 350px; height: 350px;
        background: radial-gradient(circle, rgba(99,102,241,0.08), transparent);
        top: -150px; left: -150px;
        animation-delay: 0s;
    }
    .founder-orb-2 {
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(168,85,247,0.06), transparent);
        bottom: -200px; right: -200px;
        animation-delay: 8s;
    }
    .founder-orb-3 {
        width: 250px; height: 250px;
        background: radial-gradient(circle, rgba(6,182,212,0.05), transparent);
        top: 50%; left: 50%;
        animation-delay: 16s;
    }
    @keyframes founder-orb-drift {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(50px, -30px) scale(1.1); }
        66% { transform: translate(-30px, 40px) scale(0.9); }
    }

    /* Founder badge */
    .founder-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 20px;
        background: rgba(99,102,241,0.12);
        border: 1px solid rgba(99,102,241,0.35);
        border-radius: 50px;
        backdrop-filter: blur(10px);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        color: rgba(165,180,252,0.95);
        text-transform: uppercase;
    }
    .founder-badge-dot {
        width: 8px; height: 8px;
        background: #FF3E13;
        border-radius: 50%;
        animation: founder-badge-pulse 2s infinite;
        box-shadow: 0 0 14px rgba(255,62,19,0.7);
    }
    @keyframes founder-badge-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0.7; }
    }

    /* Founder card - 3D effect */
    .founder-card {
        position: relative;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(99,102,241,0.2);
        border-radius: 24px;
        padding: 32px;
        backdrop-filter: blur(20px);
        overflow: hidden;
        transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .founder-card::before {
        content: '';
        position: absolute;
        top: 0; left: -50%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
        transform: translateX(-100%);
        transition: transform 0.8s;
    }
    .founder-card:hover::before {
        transform: translateX(100%);
    }
    .founder-card-glow {
        position: absolute;
        top: -2px; left: -2px; right: -2px; bottom: -2px;
        background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(255,62,19,0.4), rgba(168,85,247,0.4));
        border-radius: 24px;
        opacity: 0;
        z-index: -1;
        filter: blur(15px);
        transition: opacity 0.5s;
    }
    .founder-card:hover .founder-card-glow {
        opacity: 0.5;
    }

    /* Founder header */
    .founder-header {
        margin-bottom: 20px;
    }
    .founder-name {
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 900;
        color: #111827;
        line-height: 1.1;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #ffffff 30%, #FF3E13 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .founder-title {
        font-size: 17px;
        font-weight: 700;
        color: #FF3E13;
        letter-spacing: 1px;
        margin-bottom: 14px;
    }
    .founder-divider {
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #FF3E13, rgba(99,102,241,0.6), transparent);
        border-radius: 2px;
    }

    /* Founder bio */
    .founder-bio {
        font-size: 15px;
        line-height: 1.75;
        color: rgba(255,255,255,0.72);
        margin-bottom: 24px;
    }
    .founder-highlight {
        color: #111827;
        font-weight: 700;
        background: linear-gradient(135deg, #FF3E13, #fb923c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Timeline */
    .founder-timeline {
        margin-bottom: 24px;
    }
    .timeline-item-new {
        display: flex;
        gap: 14px;
        margin-bottom: 12px;
        padding: 14px 16px;
        background: rgba(255,255,255,0.03);
        border-left: 2px solid rgba(255,62,19,0.6);
        border-radius: 0 10px 10px 0;
        transition: all 0.3s;
    }
    .timeline-item-new:hover {
        background: rgba(99,102,241,0.08);
        transform: translateX(6px);
        box-shadow: -3px 0 16px rgba(99,102,241,0.25);
    }
    .timeline-icon {
        width: 40px; height: 40px;
        background: linear-gradient(135deg, #FF3E13, #fb923c);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
        font-size: 16px;
        flex-shrink: 0;
    }
    .timeline-content h4 {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 4px;
    }
    .timeline-content p {
        font-size: 13px;
        color: rgba(255,255,255,0.55);
    }

    /* Founder stats */
    .founder-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .stat-item-new {
        text-align: center;
        padding: 16px 12px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        transition: all 0.3s;
    }
    .stat-item-new:hover {
        background: rgba(99,102,241,0.1);
        transform: translateY(-4px);
        border-color: rgba(99,102,241,0.3);
    }
    .stat-item-new.stat-highlight {
        background: rgba(255,62,19,0.1);
        border-color: rgba(255,62,19,0.3);
    }
    .stat-item-new.stat-highlight:hover {
        background: rgba(255,62,19,0.15);
        border-color: rgba(255,62,19,0.5);
    }
    .stat-value {
        font-size: 28px;
        font-weight: 900;
        background: linear-gradient(135deg, #ffffff 20%, #FF3E13 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 4px;
        line-height: 1.1;
    }
    .stat-label {
        font-size: 11px;
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Logo section */
    .founder-logos-section {
        position: relative;
    }
    .founder-logos-header {
        text-align: center;
        margin-bottom: 24px;
    }
    .logos-subtitle {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 3px;
        color: rgba(255,255,255,0.35);
        margin-bottom: 8px;
    }
    .logos-title {
        font-size: clamp(24px, 3.5vw, 36px);
        font-weight: 900;
        color: #111827;
        margin-bottom: 12px;
    }
    .logos-underline {
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #FF3E13, rgba(99,102,241,0.8));
        margin: 0 auto;
        border-radius: 2px;
    }

    /* Logo grid */
    .founder-logos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 20px;
    }

    /* Logo cards with 3D effect */
    .logo-card {
        position: relative;
        perspective: 1000px;
        cursor: pointer;
    }
    .logo-card-inner {
        position: relative;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        padding: 22px 18px;
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        transform-style: preserve-3d;
    }
    .logo-card-inner:hover {
        transform: translateY(-8px) rotateX(4deg);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(99,102,241,0.15);
        border-color: rgba(99,102,241,0.4);
        background: rgba(255,255,255,0.08);
    }
    .logo-featured .logo-card-inner {
        min-height: 125px;
        background: rgba(255,255,255,0.07);
        border-width: 1px;
    }
    .logo-shine {
        position: absolute;
        top: 0; left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transition: left 0.6s;
        pointer-events: none;
    }
    .logo-card-inner:hover .logo-shine {
        left: 100%;
    }
    .logo-img {
        max-height: 52px;
        max-width: 100%;
        object-fit: contain;
        filter: brightness(0.9);
        transition: all 0.3s;
    }
    .logo-featured .logo-img {
        max-height: 60px;
    }
    .logo-card-inner:hover .logo-img {
        filter: brightness(1.1) drop-shadow(0 0 14px rgba(255,255,255,0.4));
        transform: scale(1.08);
    }
    .logo-label {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255,255,255,0.65);
        letter-spacing: 0.5px;
    }

    /* Trust badge */
    .founder-trust-badge {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 20px;
        background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(255,62,19,0.1));
        border: 1px solid rgba(99,102,241,0.25);
        border-radius: 16px;
        backdrop-filter: blur(10px);
    }
    .trust-badge-icon {
        width: 48px; height: 48px;
        background: linear-gradient(135deg, #FF3E13, #fb923c);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #111827;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(255,62,19,0.3);
    }
    .trust-badge-content h4 {
        font-size: 15px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 4px;
    }
    .trust-badge-content p {
        font-size: 13px;
        color: rgba(255,255,255,0.65);
    }

    /* Founder wave */
    .founder-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%230a0e1a' d='M0,64L48,58.7C96,53,192,43,288,48C384,53,480,75,576,80C672,85,768,75,864,64C960,53,1056,43,1152,48C1248,53,1344,75,1392,85.3L1440,96L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
    }

    /* ═══════════════════════════════════════════════════════════
       REDESIGNED PORTFOLIO SECTION - 3D & PARALLAX
       ═══════════════════════════════════════════════════════════ */

    /* Portfolio background animation */
    .portfolio-bg-animation {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255,62,19,0.08), transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(139,92,246,0.08), transparent 50%);
        animation: portfolio-bg-pulse 20s infinite ease-in-out;
    }
    @keyframes portfolio-bg-pulse {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.1); }
    }

    /* Floating shapes */
    .portfolio-shape {
        position: absolute;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        opacity: 0.1;
        animation: portfolio-shape-morph 15s infinite ease-in-out;
    }
    .portfolio-shape-1 {
        width: 300px; height: 300px;
        background: linear-gradient(135deg, #FF3E13, #fb923c);
        top: 10%; left: 5%;
        animation-delay: 0s;
    }
    .portfolio-shape-2 {
        width: 400px; height: 400px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        bottom: 10%; right: 10%;
        animation-delay: 5s;
    }
    .portfolio-shape-3 {
        width: 250px; height: 250px;
        background: linear-gradient(135deg, #10b981, #06b6d4);
        top: 50%; right: 5%;
        animation-delay: 10s;
    }
    @keyframes portfolio-shape-morph {
        0%, 100% {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            transform: rotate(0deg) scale(1);
        }
        25% {
            border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;
            transform: rotate(90deg) scale(1.1);
        }
        50% {
            border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%;
            transform: rotate(180deg) scale(0.9);
        }
        75% {
            border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
            transform: rotate(270deg) scale(1.05);
        }
    }

    /* Portfolio grid overlay */
    .portfolio-grid-overlay {
        will-change: transform;
    }

    /* Portfolio badge */
    .portfolio-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 28px;
        background: rgba(255,62,19,0.15);
        border: 2px solid rgba(255,62,19,0.4);
        border-radius: 50px;
        backdrop-filter: blur(10px);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 2px;
        color: #FF3E13;
        text-transform: uppercase;
        margin-bottom: 24px;
    }

    /* Portfolio heading */
    .portfolio-heading {
        font-size: clamp(40px, 7vw, 72px);
        font-weight: 900;
        line-height: 1;
        margin-bottom: 24px;
    }
    .portfolio-heading-line {
        display: block;
        color: #111827;
    }
    .portfolio-gradient-text {
        background: linear-gradient(135deg, #FF3E13, #8b5cf6, #3b82f6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 200%;
        animation: portfolio-gradient-shift 5s infinite;
    }
    @keyframes portfolio-gradient-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* Portfolio subtitle */
    .portfolio-subtitle {
        font-size: 20px;
        color: rgba(255,255,255,0.6);
        max-width: 600px;
        margin: 0 auto;
    }

    /* 3D Portfolio Grid */
    .portfolio-grid-3d {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 40px;
        perspective: 2000px;
        perspective-origin: center;
    }

    /* Portfolio 3D Card */
    .portfolio-card-3d {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .portfolio-card-link {
        display: block;
        text-decoration: none;
    }
    .portfolio-card-inner {
        position: relative;
        background: rgba(255,255,255,0.06);
        border-radius: 24px;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        transform-style: preserve-3d;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .portfolio-card-3d:hover .portfolio-card-inner {
        transform: translateZ(30px);
        box-shadow: 0 40px 80px rgba(0,0,0,0.5),
                    0 0 60px rgba(255,62,19,0.3),
                    inset 0 0 40px rgba(255,255,255,0.05);
    }

    /* Animated border */
    .portfolio-card-border {
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 2px;
        background: linear-gradient(135deg, #FF3E13, #8b5cf6, #3b82f6);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s;
    }
    .portfolio-card-3d:hover .portfolio-card-border {
        opacity: 1;
        animation: portfolio-border-rotate 3s linear infinite;
    }
    @keyframes portfolio-border-rotate {
        to { transform: rotate(360deg); }
    }

    /* Image wrapper */
    .portfolio-image-wrapper {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
    }
    .portfolio-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .portfolio-card-3d:hover .portfolio-img {
        transform: scale(1.1);
    }

    /* Image overlay */
    .portfolio-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,62,19,0.9), rgba(139,92,246,0.9));
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s;
    }
    .portfolio-card-3d:hover .portfolio-image-overlay {
        opacity: 1;
    }
    .portfolio-icon-view {
        width: 80px; height: 80px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #FF3E13;
        transform: translateY(20px);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .portfolio-card-3d:hover .portfolio-icon-view {
        transform: translateY(0) rotate(45deg);
    }

    /* Portfolio info */
    .portfolio-info-3d {
        padding: 28px;
        background: rgba(10,14,26,0.6);
    }
    .portfolio-category {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: rgba(255,62,19,0.15);
        border: 1px solid rgba(255,62,19,0.3);
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        color: #FF3E13;
        margin-bottom: 16px;
    }
    .portfolio-title-3d {
        font-size: 24px;
        font-weight: 900;
        color: #ffffff;
        margin-bottom: 12px;
        transition: color 0.3s;
    }
    .portfolio-card-3d:hover .portfolio-title-3d {
        color: #FF3E13;
    }
    .portfolio-desc {
        font-size: 14px;
        color: rgba(255,255,255,0.6);
        line-height: 1.6;
        margin-bottom: 16px;
    }

    /* Tech stack */
    .portfolio-tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tech-tag {
        padding: 6px 12px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,0.7);
        transition: all 0.3s;
    }
    .tech-tag:hover {
        background: rgba(255,62,19,0.2);
        border-color: rgba(255,62,19,0.5);
        color: #FF3E13;
    }

    /* Portfolio CTA button */
    .portfolio-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 20px 48px;
        background: linear-gradient(135deg, #FF3E13, #fb923c);
        border-radius: 50px;
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        text-decoration: none;
        box-shadow: 0 10px 40px rgba(255,62,19,0.4);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .portfolio-cta-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 60px rgba(255,62,19,0.6);
    }
    .portfolio-cta-btn i {
        transition: transform 0.4s;
    }
    .portfolio-cta-btn:hover i {
        transform: translateX(5px);
    }

    /* Portfolio wave */
    .portfolio-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23030712' d='M0,32L48,37.3C96,43,192,53,288,58.7C384,64,480,64,576,58.7C672,53,768,43,864,42.7C960,43,1056,53,1152,58.7C1248,64,1344,64,1392,64L1440,64L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
        .founder-logos-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .portfolio-grid-3d {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
    }

    @media (max-width: 768px) {
        .founder-card { padding: 22px; }
        .founder-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .founder-logos-grid { gap: 12px; }
        .logo-card-inner { padding: 16px; min-height: 95px; }
        .portfolio-grid-3d { grid-template-columns: 1fr; }
    }

    /* ── Founder section styled ── */
    .founder-section {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    /* ── CTA section upgrades ── */
    .cta-section-bg {
        background: linear-gradient(135deg, #030a1a 0%, #0f0a1e 50%, #1a0505 100%) !important;
        position: relative;
        overflow: hidden;
    }
    /* ── Floating service badge in hero ── */
    .hero-badge-float {
        position: absolute;
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 12px;
        padding: 10px 16px;
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        pointer-events: none;
        animation: badge-float 5s ease-in-out infinite;
    }
    @keyframes badge-float {
        0%,100% { transform: translateY(0) rotate(-1deg); }
        50%      { transform: translateY(-12px) rotate(1deg); }
    }
    .hero-badge-float .dot {
        width: 8px; height: 8px;
        background: #22c55e;
        border-radius: 50%;
        animation: dot-pulse 2s infinite;
    }
    @keyframes dot-pulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
        50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    }
    /* Decorative floating badges sit awkwardly over the mockup on phones */
    @media (max-width: 640px) {
        .hero-badge-float { display: none; }
    }

    /* ── Hero headline glowing accent ── */
    .hero-glow-line {
        display: inline-block;
        position: relative;
    }
    .hero-glow-line::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #FF3E13, #ff6b44, #FF3E13);
        background-size: 200% 100%;
        animation: line-glow 2s linear infinite;
        border-radius: 2px;
    }
    @keyframes line-glow {
        0%   { background-position: 0% 0%; box-shadow: 0 0 8px rgba(255,62,19,0.5); }
        50%  { background-position: 100% 0%; box-shadow: 0 0 20px rgba(255,62,19,0.8); }
        100% { background-position: 200% 0%; box-shadow: 0 0 8px rgba(255,62,19,0.5); }
    }

    /* ── Feature icon glow ── */
    #services .service-icon-moderation .shield-container,
    #services .service-icon-annotation .annotation-container,
    #services .service-icon-chat .chat-container,
    #services .service-icon-survey .survey-container,
    #services .neural-container,
    #services .browser-window,
    #services .phone-frame,
    #services .chart-container,
    #services .palette {
        transition: box-shadow .4s ease, transform .4s ease;
    }
    #services a:hover .service-icon-moderation .shield-container { box-shadow: 0 8px 30px rgba(244,63,94,0.5) !important; transform: scale(1.1); }
    #services a:hover .service-icon-annotation .annotation-container { box-shadow: 0 8px 30px rgba(99,102,241,0.5) !important; transform: scale(1.1); }
    #services a:hover .service-icon-chat .chat-container { box-shadow: 0 8px 30px rgba(139,92,246,0.5) !important; transform: scale(1.1); }
    #services a:hover .neural-container { box-shadow: 0 8px 30px rgba(16,185,129,0.5) !important; transform: scale(1.1); }
    #services a:hover .browser-window { box-shadow: 0 8px 30px rgba(59,130,246,0.5) !important; transform: scale(1.1); }
    #services a:hover .phone-frame { box-shadow: 0 8px 30px rgba(217,70,239,0.5) !important; transform: scale(1.1); }
    #services a:hover .chart-container { box-shadow: 0 8px 30px rgba(6,182,212,0.5) !important; transform: scale(1.1); }
    #services a:hover .palette { box-shadow: 0 8px 30px rgba(249,115,22,0.5) !important; transform: scale(1.1); }

    /* ── Founder trust badges ── */
    .trust-logo-card {
        transition: all .4s cubic-bezier(.34,1.56,.64,1);
    }
    .trust-logo-card:hover {
        transform: translateY(-8px) scale(1.05) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 0 0 2px rgba(255,62,19,0.2) !important;
    }

    /* ============================================================
       CINEMATIC SCENE SYSTEM — SECTION-BY-SECTION STORYTELLING
       ============================================================ */

    /* Scene transitions — angled dividers */
    .scene-cut-bottom::after {
        content: '';
        position: absolute;
        bottom: -2px; left: 0; right: 0;
        height: 80px;
        background: inherit;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
        z-index: 5;
    }
    .scene-cut-top::before {
        content: '';
        position: absolute;
        top: -2px; left: 0; right: 0;
        height: 80px;
        background: inherit;
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
        z-index: 5;
    }

    /* ── SCENE 1: SERVICES — Clean professional light background ── */
    #services {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        position: relative;
    }
    #services .section-number { -webkit-text-stroke-color: rgba(12,30,60,0.04) !important; }
    #services .orb { display: none; }

    /* Light subtle grid for services section */
    #services::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(12,30,60,0.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(12,30,60,0.025) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        z-index: 0;
    }
    /* Subtle radial accent */
    #services::after {
        content: '';
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(255,62,19,0.04) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    /* Service card — clean visible style for light section */
    #services .card-premium {
        background: rgba(255,255,255,0.97) !important;
        border: 1px solid rgba(12,30,60,0.07) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        position: relative;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(.16,1,.3,1) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    }
    #services .card-premium::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, transparent 60%);
        pointer-events: none;
        z-index: 0;
    }
    #services .card-premium h3 { color: #1f2937 !important; }
    #services .card-premium p  { color: #6b7280 !important; }

    /* Service card hover — colored glow per service (light background version) */
    #services a:nth-child(1) .card-premium:hover { border-color: rgba(244,63,94,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(244,63,94,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(2) .card-premium:hover { border-color: rgba(99,102,241,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(99,102,241,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(3) .card-premium:hover { border-color: rgba(139,92,246,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(139,92,246,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(4) .card-premium:hover { border-color: rgba(245,158,11,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(245,158,11,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(5) .card-premium:hover { border-color: rgba(16,185,129,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(16,185,129,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(6) .card-premium:hover { border-color: rgba(59,130,246,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(59,130,246,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(7) .card-premium:hover { border-color: rgba(217,70,239,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(217,70,239,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(8) .card-premium:hover { border-color: rgba(6,182,212,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(6,182,212,0.12) !important; transform: translateY(-12px) !important; }
    #services a:nth-child(9) .card-premium:hover { border-color: rgba(249,115,22,0.4) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 30px rgba(249,115,22,0.12) !important; transform: translateY(-12px) !important; }

    #services .card-premium .flex.items-center.gap-2 span { color: #4b5563 !important; }
    #services .card-premium .flex.items-center.gap-2 i { color: #6b7280; }

    /* Services section header text — light section bg, use dark colors */
    #services h2 span:not(.gradient-text) { color: #111827 !important; }
    #services h2.reveal-up { color: #111827 !important; }
    #services p.reveal-up { color: #6b7280 !important; }
    #services .inline-flex span { color: #111827 !important; }
    #services .inline-flex i { color: #FF3E13 !important; }
    #services .rounded-full.bg-gradient-to-r { background: rgba(12,30,60,0.06) !important; border: 1px solid rgba(12,30,60,0.12) !important; }

    /* Clip-path reveal for service section heading line */
    .services-headline-line {
        overflow: hidden;
        display: block;
    }
    .services-headline-line span {
        display: inline-block;
        transform: translateY(100%);
        animation: line-reveal 1s cubic-bezier(.16,1,.3,1) forwards;
    }
    @keyframes line-reveal {
        to { transform: translateY(0); }
    }

    /* ── SCENE 2: FOUNDER — Cinematic split ── */
    .founder-section {
        background: linear-gradient(135deg, #f8fafc 0% 50%, #f8fafc 50% 100%) !important;
        position: relative;
        width: 100%;
        overflow: visible;
    }
    .founder-section > .grid {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .founder-section > .grid > div {
        width: 100%;
        min-height: 600px;
        overflow: hidden;
    }
    @media (max-width: 1024px) {
        .founder-section { background: #f8fafc !important; }
        .founder-section > .grid {
            grid-template-columns: 1fr !important;
        }
    }
    .founder-left-panel {
        background: transparent;
    }
    .founder-right-panel {
        background: transparent;
    }

    /* Timeline dots */
    .timeline-item {
        position: relative;
        padding-left: 28px;
        padding-bottom: 20px;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0; top: 6px;
        width: 12px; height: 12px;
        background: #FF3E13;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(255,62,19,0.2);
    }
    .timeline-item::after {
        content: '';
        position: absolute;
        left: 5px; top: 20px;
        width: 2px;
        height: calc(100% - 14px);
        background: linear-gradient(180deg, #FF3E13, rgba(255,62,19,0));
    }
    .timeline-item:last-child::after { display: none; }

     /* ── SCENE 3: PORTFOLIO — Dark cinematic gallery ── */
     #portfolio {
         background: #f8fafc !important;
         position: relative;
         width: 100%;
         padding: 128px 0 !important;
     }
     #portfolio::before {
         content: '';
         position: absolute;
         inset: 0;
         background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,62,19,0.06) 0%, transparent 70%);
         pointer-events: none;
         z-index: 0;
     }
     #portfolio h2, #portfolio p.reveal-up { color: white !important; }
     #portfolio .gradient-text { /* keep */ }
     #portfolio .inline-flex { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; }
     #portfolio .inline-flex span, #portfolio .inline-flex i { color: rgba(255,255,255,0.8) !important; }

     #portfolio .max-w-7xl {
         width: 100%;
         max-width: 100%;
         padding: 0 16px;
     }

     @media (min-width: 640px) {
         #portfolio .max-w-7xl {
             padding: 0 24px;
         }
     }

     @media (min-width: 1024px) {
         #portfolio .max-w-7xl {
             max-width: 1280px;
             margin-left: auto;
             margin-right: auto;
             padding: 0 32px;
         }
     }

     /* Portfolio card dark glass */
     #portfolio .portfolio-thumbnail {
         background: rgba(255,255,255,0.03) !important;
         border: 1px solid rgba(255,255,255,0.08) !important;
         box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
         overflow: hidden;
         position: relative;
     }
     #portfolio .portfolio-thumbnail::after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(255,62,19,0), rgba(255,62,19,0.15));
         opacity: 0;
         transition: opacity 0.4s ease;
         z-index: 2;
         pointer-events: none;
     }
     #portfolio .portfolio-card:hover .portfolio-thumbnail::after { opacity: 1; }
     #portfolio .portfolio-card:hover .portfolio-thumbnail {
         border-color: rgba(255,62,19,0.4) !important;
         box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,62,19,0.2), 0 0 40px rgba(255,62,19,0.1) !important;
     }

     /* Portfolio card info dark */
     #portfolio .portfolio-info h3 { color: white !important; }
     #portfolio .portfolio-info p { color: rgba(255,255,255,0.5) !important; }
     #portfolio .portfolio-card:hover .portfolio-info h3 { color: #FF3E13 !important; }

     /* Clip-path reveal on portfolio items */
     .clip-reveal {
         clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
         transition: clip-path 0.9s cubic-bezier(.77,0,.175,1);
     }
     .clip-reveal.is-visible {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     }

     /* Portfolio item category badge dark */
     #portfolio span[class*="rounded-full"] { opacity: 0.9; }

     #portfolio .max-w-6xl {
         width: 100%;
         max-width: 100%;
         margin: 0 auto;
     }

     @media (min-width: 1024px) {
         #portfolio .max-w-6xl {
             max-width: 1152px;
             margin-left: auto;
             margin-right: auto;
         }
     }

     #portfolio .grid {
         width: 100%;
         display: grid;
     }

     #portfolio .portfolio-item-1,
     #portfolio .portfolio-item-2,
     #portfolio .portfolio-item-3,
     #portfolio .portfolio-item-4,
     #portfolio .portfolio-item-5,
     #portfolio .portfolio-item-6 {
         width: 100%;
         overflow: hidden;
     }

     #portfolio .portfolio-card {
         width: 100%;
         display: block;
     }

    /* ── SCENE 4: WHY US — Dark cinematic section ── */
    #why-us {
        position: relative;
    }

    /* Why Us glow card */
    .whyus-glow-card {
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }
    .whyus-glow-card:hover {
        box-shadow: 0 0 40px rgba(255,62,19,0.3), 0 20px 40px rgba(0,0,0,0.4);
        transform: translateY(-3px);
    }

    /* Feature card — for dark why-us background */
    .feature-card-cinema {
        background: rgba(255,255,255,0.04) !important;
        border-left: 3px solid currentColor;
        backdrop-filter: blur(8px);
        transform: translateX(-60px);
        opacity: 0;
        transition: all 0.5s cubic-bezier(.16,1,.3,1);
    }
    .feature-card-cinema.is-visible {
        transform: translateX(0);
        opacity: 1;
    }
    .feature-card-cinema:hover {
        background: rgba(255,255,255,0.07) !important;
        transform: translateX(5px) !important;
    }

    /* posh section shimmer for service cards */
    @keyframes card-shimmer-sweep {
        0%   { left: -100%; }
        100% { left: 200%; }
    }
    .shimmer-card {
        position: relative;
        overflow: hidden;
    }
    .shimmer-card::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
        transform: skewX(-20deg);
        animation: card-shimmer-sweep 4s ease-in-out infinite;
        pointer-events: none;
        z-index: 10;
    }

    /* ── Posh section entrance: clip-path wipe ── */
    .wipe-in-up {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        transition: clip-path 1s cubic-bezier(.77,0,.18,1);
    }
    .wipe-in-up.is-visible {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    /* ── Posh counter number glow ── */
    @keyframes num-glow {
        0%,100% { text-shadow: 0 0 0 transparent; }
        50% { text-shadow: 0 0 20px rgba(255,62,19,0.6), 0 0 40px rgba(255,62,19,0.3); }
    }
    .num-glow-anim { animation: num-glow 3s ease-in-out infinite; }

    /* ── Posh service section icon spin-glow on scroll ── */
    @keyframes section-icon-enter {
        0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
        60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    .icon-enter.is-visible .service-icon-moderation .shield-container,
    .icon-enter.is-visible .service-icon-annotation .annotation-container,
    .icon-enter.is-visible .service-icon-chat .chat-container,
    .icon-enter.is-visible .service-icon-survey .survey-container,
    .icon-enter.is-visible .neural-container,
    .icon-enter.is-visible .browser-window,
    .icon-enter.is-visible .phone-frame,
    .icon-enter.is-visible .chart-container,
    .icon-enter.is-visible .palette,
    .icon-enter.is-visible .oc-lobster svg {
        animation: section-icon-enter 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
    }

    /* ── Posh stat number count-up glow ── */
    .stat-num-glow {
        transition: text-shadow 0.5s ease;
    }
    .stat-num-glow:hover {
        text-shadow: 0 0 30px rgba(255,62,19,0.5);
    }

    /* ── Testimonial quote mark float ── */
    @keyframes quote-float {
        0%,100% { transform: translateY(0) rotate(-5deg); }
        50%     { transform: translateY(-8px) rotate(5deg); }
    }
    .quote-float {
        animation: quote-float 6s ease-in-out infinite;
        display: inline-block;
    }

    /* ── CEO section: avatar ring pulse ── */
    @keyframes ring-pulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(255,62,19,0.3); }
        50%     { box-shadow: 0 0 0 12px rgba(255,62,19,0); }
    }
    .ceo-avatar-ring { animation: ring-pulse 3s ease-in-out infinite; }

    /* ── Stats band number shine ── */
    .stat-num-shine {
        position: relative;
        display: inline-block;
    }
    .stat-num-shine::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: num-shine 3s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes num-shine {
        0%   { left: -100%; }
        100% { left: 200%; }
    }

    /* ── Hero AI Particle Canvas ── */
    #hero-ai-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    /* Mouse ripple effect */
    .mouse-ripple {
        position: fixed;
        pointer-events: none;
        z-index: 1;
        border-radius: 50%;
        border: 1px solid rgba(255,62,19,0.6);
        transform: translate(-50%,-50%) scale(0);
        animation: ripple-burst 0.8s ease-out forwards;
    }
    @keyframes ripple-burst {
        0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
        100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
    }

    /* Stats cards cinema — dark section version */
    .stat-card-cinema {
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(12px);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    .stat-card-cinema::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, #FF3E13, #ff6b44, transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }
    .stat-card-cinema:hover::before { transform: scaleX(1); }
    .stat-card-cinema:hover {
        background: rgba(255,62,19,0.1) !important;
        border-color: rgba(255,62,19,0.3) !important;
        transform: translateY(-6px) !important;
        box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 20px rgba(255,62,19,0.1) !important;
    }
    .stat-card-cinema .gradient-text {
        background: linear-gradient(135deg, #0c1e3c 20%, #FF3E13 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    .stat-card-cinema .text-gray-600 { color: #6b7280 !important; }

    /* ── SCENE 5: TESTIMONIALS — Cinematic dark quotes ── */
    .testimonials-dark {
        background: #f0f4f8 !important;
        position: relative;
    }
    .testimonials-dark::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, transparent, #FF3E13 50%, transparent);
    }

    /* Quote card dramatic redesign */
    .quote-card-cinema {
        background: white !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        border-radius: 20px !important;
        padding: 26px 22px 22px !important;
        position: relative;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(.16,1,.3,1) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    }
    .quote-card-cinema::before {
        content: '\201C';
        position: absolute;
        top: 12px; left: 16px;
        font-size: 72px;
        font-weight: 900;
        font-family: Georgia, serif;
        line-height: 1;
        color: rgba(255,62,19,0.12);
        pointer-events: none;
    }
    .quote-card-cinema::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #FF3E13, #243b53);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }
    .quote-card-cinema:hover::after { transform: scaleX(1); }
    .quote-card-cinema:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,62,19,0.1) !important;
    }
    .quote-card-cinema p { color: #374151 !important; font-style: normal !important; }
    .quote-card-cinema .fas.fa-star { animation: none !important; }

    /* ── CTA scene ── */
    .cta-section-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,62,19,0.15) 0%, transparent 60%),
            radial-gradient(ellipse 60% 80% at 80% 50%, rgba(36,59,83,0.4) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
        animation: cta-breathe 6s ease-in-out infinite;
    }
    @keyframes cta-breathe {
        0%,100% { opacity: 0.7; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.05); }
    }
    .cta-section-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }

    /* Horizontal scroll-triggered line animation */
    @keyframes draw-line {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
    .draw-line {
        transform-origin: left;
        animation: draw-line 1.2s cubic-bezier(.77,0,.175,1) forwards;
    }

    /* Stagger children animation */
    .stagger-children > * {
        opacity: 0;
        transform: translateY(30px);
    }
    .stagger-children.animated > *:nth-child(1) { animation: stagger-item .7s .1s cubic-bezier(.16,1,.3,1) forwards; }
    .stagger-children.animated > *:nth-child(2) { animation: stagger-item .7s .2s cubic-bezier(.16,1,.3,1) forwards; }
    .stagger-children.animated > *:nth-child(3) { animation: stagger-item .7s .3s cubic-bezier(.16,1,.3,1) forwards; }
    .stagger-children.animated > *:nth-child(4) { animation: stagger-item .7s .4s cubic-bezier(.16,1,.3,1) forwards; }
    .stagger-children.animated > *:nth-child(5) { animation: stagger-item .7s .5s cubic-bezier(.16,1,.3,1) forwards; }
    .stagger-children.animated > *:nth-child(6) { animation: stagger-item .7s .6s cubic-bezier(.16,1,.3,1) forwards; }
    @keyframes stagger-item {
        to { opacity: 1; transform: translateY(0); }
    }

    /* Floating accent numbers in dark sections */
    .accent-number {
        font-size: clamp(120px, 20vw, 200px);
        font-weight: 900;
        position: absolute;
        opacity: 0.03;
        color: #111827;
        pointer-events: none;
        line-height: 1;
        user-select: none;
    }

    /* ═══ PORTFOLIO CAROUSEL — Premium 4-Item Slider ═══ */
    .portfolio-carousel-wrap {
        position: relative;
        overflow: hidden;
        margin: 0 -10px;
        padding: 0 10px;
    }
    .portfolio-carousel-track {
        display: flex;
        gap: 19px;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;
    }
    .portfolio-carousel-slide {
        min-width: calc(25% - 14px);
        flex-shrink: 0;
    }
    @media (max-width: 1024px) {
        .portfolio-carousel-slide {
            min-width: calc(33.333% - 13px);
        }
        .portfolio-carousel-track { gap: 14px; }
    }
    @media (max-width: 768px) {
        .portfolio-carousel-slide {
            min-width: calc(50% - 10px);
        }
        .portfolio-carousel-track { gap: 12px; }
    }
    @media (max-width: 480px) {
        .portfolio-carousel-slide {
            min-width: calc(66.666% - 8px);
        }
        .portfolio-carousel-track { gap: 12px; }
    }

    /* Portfolio Card — Portrait 2:3 aspect ratio (1024x1536) */
    .portfolio-card-slide {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 3px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .portfolio-card-slide:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,62,19,0.15);
    }
    .portfolio-card-image-wrap {
        position: relative;
        width: 100%;
        padding-top: 123%; /* 18% reduction from 150% — crops bottom of tall images */
        overflow: hidden;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    }
    .portfolio-card-image-wrap img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top; /* crop from bottom, keep top visible */
        transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .portfolio-card-slide:hover .portfolio-card-image-wrap img {
        transform: scale(1.08);
    }
    .portfolio-card-body {
        padding: 14px 16px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
    }
    .portfolio-card-name {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: #0B1930;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .portfolio-card-category {
        font-size: 9px;
        font-weight: 600;
        color: #FF3E13;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .portfolio-card-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 10px;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(135deg, #FF3E13, #e6380f);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 3px 11px rgba(255,62,19,0.25);
        border: none;
        cursor: pointer;
        text-decoration: none;
        width: 100%;
    }
    .portfolio-card-btn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 19px rgba(255,62,19,0.4);
        color: #ffffff;
    }
    .portfolio-card-btn i {
        font-size: 9px;
        transition: transform 0.3s ease;
    }
    .portfolio-card-btn:hover i {
        transform: translateX(3px);
    }

    /* Portfolio filter tabs */
    .portfolio-filter-btn {
        padding: 6px 17px;
        border-radius: 50px;
        font-size: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1.5px solid rgba(0,0,0,0.08);
        background: transparent;
        color: #6b7280;
        font-family: 'Inter', system-ui, sans-serif;
    }
    .portfolio-filter-btn:hover {
        border-color: #FF3E13;
        color: #FF3E13;
        background: rgba(255,62,19,0.04);
    }
    .portfolio-filter-btn.active {
        background: #FF3E13;
        border-color: #FF3E13;
        color: #ffffff;
        box-shadow: 0 3px 11px rgba(255,62,19,0.3);
    }

    /* Portfolio carousel arrows */
    .portfolio-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ffffff;
        border: none;
        box-shadow: 0 3px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #0B1930;
        font-size: 12px;
    }
    .portfolio-arrow:hover {
        background: #FF3E13;
        color: #ffffff;
        box-shadow: 0 6px 19px rgba(255,62,19,0.35);
        transform: translateY(-50%) scale(1.08);
    }
    .portfolio-arrow.prev { left: -4px; }
    .portfolio-arrow.next { right: -4px; }
    @media (max-width: 768px) {
        .portfolio-arrow {
            width: 30px;
            height: 30px;
            font-size: 10px;
        }
        .portfolio-arrow.prev { left: -4px; }
        .portfolio-arrow.next { right: -4px; }
    }

    /* Portfolio dots */
    .portfolio-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 22px;
    }
    .portfolio-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0,0,0,0.12);
        border: none;
        cursor: pointer;
        transition: all 0.4s ease;
        padding: 0;
    }
    .portfolio-dot:hover {
        background: rgba(255,62,19,0.4);
        transform: scale(1.2);
    }
    .portfolio-dot.active {
        width: 25px;
        border-radius: 4px;
        background: #FF3E13;
    }