* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Poppins', sans-serif; color: #1A1A2E; overflow-x: hidden; }

        /* ============================================================
           PREMIUM SECTION TREATMENTS — CSS-only additions
           No existing rules were modified below this block
        ============================================================ */

        /* ── Services section: rich layered background ── */
        #services {
            position: relative;
            /* Base colour kept intentionally light so the pattern reads */
            background-color: #F7F7FA;
            /* Edge separation: inset top shadow instead of a hard border */
            box-shadow: inset 0 6px 24px -6px rgba(26, 26, 46, 0.07);
        }

        /* SVG dot-grid pattern layer */
        #services::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                radial-gradient(circle, rgba(255, 107, 0, 0.13) 1px, transparent 1px);
            background-size: 28px 28px;
            background-position: 0 0;
            /* Fade the pattern away from the edges so it's never harsh */
            -webkit-mask-image:
                radial-gradient(ellipse 90% 90% at 50% 50%,
                    black 30%, transparent 100%);
            mask-image:
                radial-gradient(ellipse 90% 90% at 50% 50%,
                    black 30%, transparent 100%);
        }

        /* Warm-orange → dark-navy gradient overlay */
        #services::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                linear-gradient(
                    160deg,
                    rgba(255, 107, 0, 0.035) 0%,
                    rgba(255, 133, 51, 0.02) 40%,
                    rgba(26, 26, 46, 0.04) 100%
                );
        }

        /* Make inner content sit above the pseudo-element layers */
        #services > * { position: relative; z-index: 1; }

        /* Hairline top accent strip — the "floor" separator */
        #services .section-accent-strip {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 107, 0, 0.35) 25%,
                rgba(255, 107, 0, 0.55) 50%,
                rgba(255, 107, 0, 0.35) 75%,
                transparent 100%
            );
            z-index: 2;
        }

        /* ── Portfolio (#work) section: milder version ── */
        #work {
            position: relative;
            background-color: #F5F5F8;
            box-shadow: inset 0 4px 18px -4px rgba(26, 26, 46, 0.055);
        }

        #work::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            /* Diagonal line pattern — subtler than dot grid */
            background-image: repeating-linear-gradient(
                -45deg,
                rgba(255, 107, 0, 0.045) 0px,
                rgba(255, 107, 0, 0.045) 1px,
                transparent 1px,
                transparent 22px
            );
            -webkit-mask-image:
                radial-gradient(ellipse 85% 85% at 50% 50%,
                    black 20%, transparent 100%);
            mask-image:
                radial-gradient(ellipse 85% 85% at 50% 50%,
                    black 20%, transparent 100%);
        }

        #work::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                linear-gradient(
                    140deg,
                    rgba(255, 107, 0, 0.025) 0%,
                    rgba(26, 26, 46, 0.03) 100%
                );
        }

        #work > * { position: relative; z-index: 1; }

        #work .section-accent-strip {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 107, 0, 0.25) 30%,
                rgba(255, 107, 0, 0.4) 50%,
                rgba(255, 107, 0, 0.25) 70%,
                transparent 100%
            );
            z-index: 2;
        }

        /* ── Testimonials section: softest version — keeps bg-white feel ── */
        #testimonials {
            position: relative;
            /* Stays white; only the overlay adds the premium warmth */
        }

        #testimonials::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            /* Very fine dot grid, near-invisible — just adds micro texture */
            background-image:
                radial-gradient(circle, rgba(255, 107, 0, 0.07) 1px, transparent 1px);
            background-size: 36px 36px;
            -webkit-mask-image:
                radial-gradient(ellipse 70% 70% at 50% 50%,
                    black 0%, transparent 100%);
            mask-image:
                radial-gradient(ellipse 70% 70% at 50% 50%,
                    black 0%, transparent 100%);
        }

        #testimonials::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                linear-gradient(
                    180deg,
                    rgba(255, 248, 240, 0.55) 0%,
                    rgba(255, 255, 255, 0) 30%,
                    rgba(255, 255, 255, 0) 70%,
                    rgba(255, 248, 240, 0.45) 100%
                );
        }

        #testimonials > * { position: relative; z-index: 1; }

        #testimonials .section-accent-strip {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 107, 0, 0.15) 35%,
                rgba(255, 107, 0, 0.3) 50%,
                rgba(255, 107, 0, 0.15) 65%,
                transparent 100%
            );
            z-index: 2;
        }

        #rainCanvas {
            position: absolute !important;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 500;
            display: block;
            will-change: transform;
        }

        .floating-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.12;
            animation: floatShape 8s ease-in-out infinite;
        }
        .floating-shape:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
        .floating-shape:nth-child(3) { animation-delay: -5s; animation-duration: 12s; }
        @keyframes floatShape {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-25px) rotate(10deg); }
        }

        .hero-slider { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 24px; }
        .hero-slide {
            position: absolute; inset: 0;
            opacity: 0;
            transition: opacity 1s ease, transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
            transform: scale(1.02);
        }
        .hero-slide.slide-from-right { transform: translateX(100%); }
        .hero-slide.slide-from-left { transform: translateX(-100%); }
        .hero-slide.diagonal { transform: translate(20%, 15%) scale(0.95); }
        .hero-slide.fade-only { transform: scale(1); }
        .hero-slide.active { opacity: 1; transform: translate(0, 0) scale(1); }
        .hero-slide img { width: 100%; height: 100%; object-fit: cover; }

        .story-slider-container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 24px; }
        .story-slide {
            position: absolute; inset: 0;
            opacity: 0;
            transition: opacity 1s ease, transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
            transform: scale(1.02);
        }
        .story-slide.slide-from-right { transform: translateX(100%); }
        .story-slide.slide-from-left { transform: translateX(-100%); }
        .story-slide.diagonal { transform: translate(20%, 15%) scale(0.95); }
        .story-slide.active { opacity: 1; transform: translate(0, 0) scale(1); }
        .story-slide img { width: 100%; height: 100%; object-fit: cover; }

        .why-slider-container { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 28px; }
        .why-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
        .why-slide.active { opacity: 1; }
        .why-slide img { width: 100%; height: 100%; object-fit: cover; }

        .testimonial-single-slider { overflow: hidden; width: 100%; position: relative; }
        .testimonial-track-single { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); gap: 0; }
        .testimonial-card-single {
            flex: 0 0 100%;
            background: white;
            border-radius: 28px;
            padding: 2rem 1.8rem;
            box-shadow: 0 20px 35px -12px rgba(0,0,0,0.08);
            border: 1px solid #f0f0f0;
            transition: all 0.2s ease;
        }
        .testimonial-card-single:hover { transform: translateY(-4px); box-shadow: 0 25px 40px -15px rgba(255,107,0,0.12); }

        .portfolio-overlay-fixed {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: #FF6B00;
            padding: 1.2rem;
            color: white;
            transition: transform 0.3s ease;
        }
        .portfolio-title, .portfolio-category { color: white; }

        .service-card { transition: transform 0.35s ease, box-shadow 0.35s ease; cursor: pointer; }
        .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(255, 107, 0, 0.12); }
        .service-card:hover .service-icon-wrap { background: #FF6B00; color: white; }
        .service-icon-wrap { transition: all 0.35s ease; }

        .btn-primary {
            background: linear-gradient(135deg, #FF6B00, #FF8533);
            color: white; border: none; border-radius: 50px;
            padding: 14px 36px; font-weight: 600; font-size: 15px;
            cursor: pointer; transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(255, 107, 0, 0.3);
            display: inline-flex; align-items: center; gap: 8px;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 107, 0, 0.45); }
        .btn-secondary {
            background: transparent; color: #FF6B00;
            border: 2px solid #FF6B00; border-radius: 50px;
            padding: 12px 32px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .btn-secondary:hover { background: #FF6B00; color: white; transform: translateY(-2px); }
        .btn-white {
            background: white; color: #FF6B00;
            border: none; border-radius: 50px;
            padding: 14px 36px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            white-space: nowrap;
        }
        .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

        .nav-link {
            position: relative; color: #555566; font-weight: 500;
            transition: color 0.3s ease; text-decoration: none;
        }
        .nav-link:hover { color: #FF6B00; }
        .nav-link::after {
            content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px;
            background: #FF6B00; transition: all 0.3s ease; transform: translateX(-50%);
        }
        .nav-link:hover::after { width: 80%; }

        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .mobile-menu.open { transform: translateX(0); }
        .footer-link { color: #999; font-size: 14px; transition: color 0.3s ease; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 5px 0; }
        .footer-link:hover { color: #FF6B00; }

        .portfolio-grid-fixed {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }
        .portfolio-item-fixed {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 4/3;
        }
        .portfolio-image-fixed img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .portfolio-item-fixed:hover .portfolio-image-fixed img { transform: scale(1.05); }

        .growth-positive { color: #10B981; }
        .growth-negative { color: #EF4444; }

        @media (max-width: 640px) {
            .btn-white { white-space: normal; padding: 12px 24px; font-size: 14px; text-align: center; }
            .why-slider-container { height: 280px; }
            .testimonial-card-single { padding: 1.5rem; }
        }

        .price-modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
        @media (min-width: 1025px) {
             #modalScrollContainer {
                overflow-x: auto !important;
                overflow-y: hidden !important;
                white-space: nowrap !important;
                padding-bottom: 1rem !important;
            }
            .modal-slide-container { overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; white-space: nowrap; padding-bottom: 1rem; }
            .package-slider-track { display: flex !important; flex-direction: row !important; gap: 1.5rem; white-space: normal; }
            .package-card { flex: 0 0 calc(33.333% - 1rem); min-width: 320px; display: inline-block; white-space: normal; }
            .modal-slide-container::-webkit-scrollbar { height: 6px; }
            .modal-slide-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
            .modal-slide-container::-webkit-scrollbar-thumb { background: #FF6B00; border-radius: 10px; }
        }
        @media (min-width: 768px) and (max-width: 1024px) {
            .package-slider-track { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; transform: none !important; transition: none !important; }
            .package-card { flex: none !important; width: 100%; }
            .modal-slide-container { overflow-y: auto !important; overflow-x: hidden !important; }
        }
        @media (max-width: 767px) {
            .package-slider-track { display: grid !important; grid-template-columns: 1fr; gap: 1.25rem; }
            .package-card { flex: none !important; width: 100%; }
            .modal-slide-container { overflow-y: auto !important; overflow-x: hidden !important; }
        }
        .price-badge { background: linear-gradient(135deg, #FF6B00, #FF8533); }
        .more-packages-btn { transition: all 0.2s ease; }
        .more-packages-btn:hover { transform: translateX(4px); }

        .cookie-banner {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: white;
            box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
            z-index: 1100;
            transform: translateY(100%);
            transition: transform 0.4s ease;
            border-top: 1px solid #f0f0f0;
        }
        .cookie-banner.show { transform: translateY(0); }

        .service-modal-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            z-index: 1200;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 1rem;
        }
        .service-modal-overlay.active { opacity: 1; visibility: visible; }
        .service-modal {
            background: white; border-radius: 24px;
            max-width: 500px; width: 100%;
            max-height: 80vh; overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            transform: scale(0.95); transition: transform 0.3s ease;
        }
        .active .service-modal { transform: scale(1); }
        .service-modal-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 1.5rem 1.5rem 0.5rem 1.5rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .service-modal-header h3 { font-size: 1.5rem; font-weight: 700; color: #1A1A2E; }
        .service-modal-close {
            width: 2.5rem; height: 2.5rem; border-radius: 9999px;
            background: #f5f5f5; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background 0.2s;
        }
        .service-modal-close:hover { background: #e5e5e5; }
        .service-modal-body { padding: 1.5rem; }
        .service-modal-body ul { list-style: none; }
        .service-modal-body li {
            display: flex; align-items: flex-start; gap: 0.75rem;
            margin-bottom: 0.75rem; color: #555566; font-size: 0.95rem;
        }