body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;

            /* Cinematic feel */
            filter: brightness(0.6) contrast(1.1) saturate(0.9) blur(6px);

            z-index: -1;
        }

        /* Luxury buttons */
        .btn-primary {
            padding: 14px 32px;
            border-radius: 999px;
            background: white;
            color: black;
            font-weight: 500;
            transition: transform .3s ease;
        }

        .btn-outline {
            padding: 14px 32px;
            border-radius: 999px;
            border: 1px solid #444;
            color: white;
            transition: transform .3s ease;
        }

        .btn-primary:hover,
        .btn-outline:hover {
            transform: translateY(-3px);
        }

        #hero-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .noise {
            position: absolute;
            inset: 0;
            background-image: url("https://grainy-gradients.vercel.app/noise.svg");
            opacity: 0.08;
            z-index: 5;
        }


        .glow-text {
            position: relative;
        }

        .glow-text::after {
            content: "";
            position: absolute;
            inset: -40px;
            background: radial-gradient(circle at 20% 30%,
                    rgba(255, 255, 255, 0.08),
                    transparent 60%);
            filter: blur(40px);
            z-index: -1;
        }

        .project-img {
            height: 420px;
            /* same height for all projects */
        }

        .project-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* image crop hogi, stretch nahi */
        }

        /* Tablets */
        @media (max-width: 1024px) {
            .project-img {
                height: 360px;
            }
        }

        @media (max-width: 640px) {
            .hero-img {
                filter: blur(6px);
                transform: scale(1.08);
            }
        }

        /* Mobile */
        @media (max-width: 768px) {

            /* Hero text resize */
            .hero-title {
                font-size: 2.5rem;
                /* ~40px */
                line-height: 1.2;
            }

            .hero-sub {
                font-size: 1rem;
            }

            /* Buttons stack */
            .hero-cta {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-primary,
            .btn-outline {
                width: 100%;
                text-align: center;
            }

            /* Projects image height */
            .project-img {
                height: 260px;
            }

            /* About / authority spacing */
            .about-title {
                font-size: 2.2rem;
            }
        }

        /* Small mobile */
        @media (max-width: 480px) {

            .hero-title {
                font-size: 2rem;
                /* ~32px */
            }

            .about-title {
                font-size: 1.9rem;
            }

            .project-img {
                height: 220px;
            }

            .glow-text::after {
                inset: -20px;
                /* glow thoda controlled */
                filter: blur(30px);
            }
        }

        .service-card {
            padding: 40px;
            border-radius: 24px;
            background: #111;
            border: 1px solid #1f1f1f;
            transition: transform 0.4s ease, border-color 0.4s ease;
        }

        .service-card:hover {
            transform: translateY(-6px);
            border-color: #444;
        }

        /* PRICING BASE */
        .price-card {
            position: relative;
            padding: 3rem;
            border-radius: 28px;
            background: radial-gradient(circle at top left,
                    rgba(255, 255, 255, 0.08),
                    rgba(0, 0, 0, 0.95));
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
            transition: transform 0.4s ease, border-color 0.4s ease;
        }

        .price-card:hover {
            transform: translateY(-6px);
            border-color: rgba(255, 255, 255, 0.35);
        }

        /* FEATURED */
        .price-card.featured {
            background: radial-gradient(circle at top,
                    rgba(255, 255, 255, 0.14),
                    rgba(0, 0, 0, 0.95));
            border: 1px solid rgba(255, 255, 255, 0.45);
        }

        /* PRICE TEXT */
        .price {
            font-size: 2.75rem;
            font-weight: 600;
        }

        /* BADGE */
        .badge {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: black;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 500;
        }

        .price-card.selected {
            border-color: white;
            box-shadow: 0 30px 80px rgba(255, 255, 255, 0.06);
        }

        #loader {
            position: fixed;
            inset: 0;
            background: black;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            will-change: transform, opacity;
        }

        .loader-text {
            letter-spacing: 0.3em;
            opacity: 0.85;
        }

        .loader-brand {
            letter-spacing: 0.35em;
        }

        .loader-bar {
            width: 0%;
            transform-origin: left;
        }

        .loader-brand span {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            will-change: transform, opacity;
        }

        .loader-bar {
            width: 0%;
        }

        .loader-percent {
            font-variant-numeric: tabular-nums;
        }

        #page-transition {
            will-change: transform;
        }

        .demo-card {
            transition: transform 0.4s ease;
        }

        .demo-card:hover {
            transform: translateY(-4px);
        }

        #energy-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: white;
          
            box-shadow:
              0 0 20px rgba(255, 255, 255, 0.9),
              0 0 60px rgba(255, 255, 255, 0.6);
          
            pointer-events: none;
            z-index: 9999;
          
            transform: translate3d(-50%, -50%, 0);
            will-change: transform;
          }
          
          /* 🚫 MOBILE: cursor hide */
          @media (max-width: 767px) {
            #energy-cursor {
              display: none !important;
            }
          }
          


        .energy-text {
            line-height: 1.15;
            letter-spacing: +0.02em;

            /* 🔥 WORD BREAK FIX */
            word-break: keep-all;
            overflow-wrap: normal;
            white-space: normal;
        }

        .energy-text span {
            display: inline-block;
            will-change: transform;
        }

        #nebula {
            position: relative;
        }

        #nebula canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        #nebula-text {
            will-change: transform, opacity;
        }

        .webgl-canvas {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
        }

        .btn-primary,
        .btn-outline {
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .btn-primary:hover,
        .btn-outline:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
        }

        @media (max-width: 768px) {
            #hero {
                background: radial-gradient(circle at top,
                        rgba(255, 255, 255, 0.12),
                        #000 60%);
            }
        }

        /* Desktop: show WebGL, hide image */
        @media (min-width: 768px) {
            .project-fallback {
                display: none;
            }
        }

        /* Mobile: show image, hide WebGL */
        @media (max-width: 767px) {
            .webgl-canvas {
                display: none;
            }

            .project-fallback {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 1rem;
            }
        }
        /* ===== PREMIUM REVIEWS ===== */

.review-glass {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  }
  
  .review-input {
    width: 100%;
    padding: 16px 18px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    color: white;
    outline: none;
  }
  
  .review-input::placeholder {
    color: rgba(255,255,255,0.4);
  }
  
  .star-rating {
    display: flex;
    gap: 10px;
    font-size: 2rem;
    cursor: pointer;
  }
  
  .star-rating span {
    color: rgba(255,255,255,0.25);
    transition: color 0.25s ease, transform 0.25s ease;
  }
  
  .star-rating span.active {
    color: #facc15;
    transform: scale(1.1);
  }
  
  /* REVIEW CARD */
  .review-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 80px rgba(0,0,0,0.45);
  }
  
  #editor img {
    filter: contrast(1.05) brightness(0.95);
  }