/* ===== Sticky / Blurred Header ===== */
 :root {
   --hdr-bg: rgba(13, 13, 26, .45);
   --hdr-bg-solid: rgba(13, 13, 26, .75);
 }
 .site-header {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 1002;
   background: var(--hdr-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid #ffffff14;
   transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
 }
 .site-header .hdr-inner {
   padding-block: .6rem;
   /* default height */
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 /* links (bold/white like screenshot) */
 .site-header .nav-links {
   display: flex;
   gap: 0;
   /* no flex gap, spacing via li padding */
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .site-header .nav-links li {
   position: relative;
   padding: 0 16px;
 }
 /* add pipe separator to all li except last */
 .site-header .nav-links li:not(:last-child)::after {
   content: "|";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   color: #ffffff99;
   /* softer white */
   font-weight: 400;
   font-size: 15px;
   pointer-events: none;
 }
 .site-header .nav-links a {
   color: #f2f3ff;
   text-decoration: none;
   font-weight: 800;
   opacity: .95;
   display: inline-block;
 }
 .site-header .nav-links a:hover {
   opacity: 1;
 }
 .site-header .nav-links a.active {
   position: relative;
 }
 .site-header .nav-links a.active::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -12px;
   height: 2px;
   background: linear-gradient(90deg, #6c00ff, #ff00a8);
   border-radius: 999px;
 }
 /* search pill + CTA */
 .search-pill {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   color: #fff;
   border: 1px solid #ffffff2a;
   background: rgba(255, 255, 255, .06);
 }
 .btn-cta {
   background: linear-gradient(135deg, #6c00ff, #ff00a8);
   color: #fff;
   font-weight: 800;
   border: 0;
   border-radius: 14px;
   padding: .6rem 1rem;
   box-shadow: 0 10px 24px #4c00ff60;
 }
 .btn-cta:hover {
   color: #fff;
 }
 /* on scroll: darker/solid & subtle shadow, a bit tighter */
 .site-header.is-scrolled {
   background: var(--hdr-bg-solid);
   box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
 }
 .site-header.is-scrolled .hdr-inner {
   padding-block: .45rem;
 }
 /* spacer (height set via JS) */
 #header-spacer {
   height: var(--hdr-h, 64px);
 }
 /* ====== HERO V1 styles ====== */
 :root {
   --bg-left: #0d0d1a;
   --bg-right: #1b0048;
   --accent: #ff00a8;
   --violet: #6c00ff;
   --cyan: #00e7ff;
   --white: #fff;
   --muted: #cdd3ff;
 }
 * {
   box-sizing: border-box;
 }
 body {
   font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   background: #fff;
   color: #111;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: 700;
 }
 .lh-1 {
   color: #ffff;
 }
 /* container breathing on large */
 .container-xxl {
   padding-inline: clamp(16px, 5vw, 40px);
 }
 /* --- nav --- */
 #s-hero-v1 nav a {
   color: #e6e8ff;
   text-decoration: none;
   font-weight: 600;
   opacity: .9;
 }
 #s-hero-v1 nav a:hover {
   opacity: 1;
   color: #fff;
 }
 #s-hero-v1 .search {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   border: 1px solid #ffffff25;
   display: grid;
   place-items: center;
   color: #e6e8ff;
 }
 #s-hero-v1 .btn-cta {
   background: linear-gradient(135deg, var(--violet), var(--accent));
   color: #fff;
   font-weight: 700;
   border: 0;
   border-radius: 14px;
   padding: .65rem 1rem;
   box-shadow: 0 10px 24px #4c00ff60;
 }
 /* --- hero background --- */
 #s-hero-v1 {
   background: radial-gradient(800px 380px at 15% 25%, #6c00ff22 0%, transparent 60%),
     radial-gradient(800px 420px at 85% 25%, #ff00a822 0%, transparent 60%),
     linear-gradient(90deg, var(--bg-left), var(--bg-right));
   position: relative;
   padding-bottom: 0;
   background:
     /* radial-gradient(1400px 800px at 20% 35%, #6c00ff33 0%, transparent 60%),
    radial-gradient(1400px 900px at 80% 30%, #ff00a833 0%, transparent 60%),
    linear-gradient(180deg, #3a0ca3 0%, #a0028d 45%, #6b00ff 100%), */
     url("layer-3.png");
   background-size: cover;
   /* make sure it fits nicely */
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
 }
 #s-hero-v1 .hero-row {
   min-height: 620px;
   padding: 50px 0 20px;
 }
 /* --- left text --- */
 #s-hero-v1 .kicker {
   color: #c9d4ff;
   font-weight: 800;
   letter-spacing: .16em;
   margin-bottom: .4rem;
 }
 #s-hero-v1 .hero-title .outline {
   color: transparent;
   -webkit-text-stroke: 2.5px #ffffff70;
   text-stroke: 2.5px #ffffff70;
 }
 #s-hero-v1 .sub {
   margin-top: .8rem;
   font-weight: 600;
   letter-spacing: .08em;
   color: var(--muted);
 }
 #s-hero-v1 .btn-get-started {
   display: inline-block;
   padding: .85rem 1.6rem;
   border-radius: 40px;
   border: 1px solid #ffffff50;
   background: transparent;
   color: #fff;
   font-weight: 800;
   letter-spacing: .02em;
   transition: .2s ease;
 }
  @media (max-width: 494px) {
 #s-hero-v1 .btn-get-started {
margin-bottom: 3% !important;
 }
 }
 #s-hero-v1 .btn-get-started:hover {
   transform: translateY(-1px);
   border-color: #fff;
 }
 #s-hero-v1 .btn-get-started2 {
   display: inline-block;
   padding: .85rem 1.6rem;
   border-radius: 40px;
   border: 1px solid #ffffff50;
   background: transparent;
   color: #fff;
   font-weight: 800;
   letter-spacing: .02em;
   transition: .2s ease;
   background: linear-gradient(135deg, #6c00ff, #ff00a8);
 }
 #s-hero-v1 .btn-get-started2:hover {
   transform: translateY(-1px);
   border-color: #fff;
 }
 /* --- posters / parallax --- */
 /* #s-hero-v1 .hero-art {
   height: 520px;
 } */
 #s-hero-v1 .poster {
   position: absolute;
   width: 230px;
   height: 350px;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
   transform-origin: center center;
   transition: transform .08s linear;
   /* smooth tracking */
 }
 #s-hero-v1 .poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 #s-hero-v1 .p1 {
   right: 48%;
   top: 8%;
   transform: rotate(-8deg);
 }
 #s-hero-v1 .p2 {
   right: 18%;
   top: -6%;
   transform: rotate(9deg);
 }
 #s-hero-v1 .p3 {
   right: 2%;
   top: 24%;
   transform: rotate(-4deg);
 }
 #s-hero-v1 .poster:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .45));
 }
 /* dots (static) */
 #s-hero-v1 .dots {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
 }
 #s-hero-v1 .dots span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ffffff50;
   display: block;
 }
 #s-hero-v1 .dots .active {
   background: #fff;
 }
 /* --- marquee ribbon --- */
 #s-hero-v1 .ribbon {
   margin-top: 46px;
   background: linear-gradient(90deg, var(--violet), var(--accent), #ffb800);
   padding: 14px 0;
   position: relative;
   z-index: 5;
   overflow: hidden;
   /* hide overflow cleanly */
 }
 #s-hero-v1 .ribbon-track {
   display: flex;
   width: max-content;
   animation: ticker 18s linear infinite;
 }
 #s-hero-v1 .ribbon-inner {
   display: flex;
   gap: 60px;
   font-weight: 900;
   letter-spacing: .08em;
   font-size: clamp(16px, 2vw, 22px);
   /* bigger text */
   white-space: nowrap;
 }
 #s-hero-v1 .ribbon-inner span {
   display: inline-block;
   color: #fff;
   text-transform: uppercase;
 }
 @keyframes ticker {
   0% {
     transform: translateX(0);
   }
   100% {
     transform: translateX(-50%);
   }
 }
 /* bottom color seam like screenshot */
 #s-hero-v1 .hero-bottom-fade {
   height: 16px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, .25));
 }
 /* --- responsive --- */
 @media (max-width: 992px) {
   #s-hero-v1 .hero-art {
     height: 420px;
     margin-top: 30px;
   }
   #s-hero-v1 .poster {
     width: 190px;
     height: 290px;
   }
   #s-hero-v1 .p1 {
     right: 58%;
     top: 6%;
   }
   #s-hero-v1 .p2 {
     right: 22%;
     top: -6%;
   }
   #s-hero-v1 .p3 {
     right: 4%;
     top: 26%;
   }
   #s-hero-v1 .nav-links {
     display: none;
   }
 }
 @media (max-width: 576px) {
   #s-hero-v1 .hero-row {
     min-height: 520px;
   }
   #s-hero-v1 .poster {
     width: 150px;
     height: 230px;
   }
   #s-hero-v1 .p1 {
     right: 64%;
   }
   #s-hero-v1 .p2 {
     right: 26%;
   }
   #s-hero-v1 .p3 {
     right: 2%;
   }
 }
 /* ====== About / Noman Ashiq (scoped) ====== */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&family=Montserrat:wght@800;900&display=swap');
 :root {
   --violet: #6c00ff;
   --magenta: #ff00a8;
   --cyan: #00e7ff;
   --ink: #0b0e23;
   --ink-2: #12163a;
   --text: #ffffff;
   --muted: #cfd3ff;
 }
 #s-about-v1 {
   position: relative;
   background: radial-gradient(1100px 520px at 25% 20%, #6c00ff22 0%, transparent 70%),
     radial-gradient(1200px 620px at 85% 35%, #ff00a820 0%, transparent 70%),
     linear-gradient(180deg, #150e32 0%, #0c0f2b 100%);
   color: var(--text);
   padding: clamp(36px, 6vw, 60px) 0 clamp(40px, 7vw, 76px);
   font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 }
 #s-about-v1 .container-xxl {
   width: min(1200px, 92vw);
   margin-inline: auto;
 }
 #s-about-v1 .about-wrap {
   display: grid;
   grid-template-columns: 0.95fr 1.05fr;
   gap: clamp(20px, 3.5vw, 40px);
   align-items: center;
 }
 /* ---- Left (portrait) ---- */
 #s-about-v1 .portrait {
   position: relative;
   width: min(440px, 100%);
   aspect-ratio: 1/1.13;
   margin: 0;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(180deg, #2c3156, #171a34);
   box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
 }
 #s-about-v1 .portrait::after {
   /* gradient border effect */
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 26px;
   padding: 2px;
   background: linear-gradient(135deg, var(--violet), var(--magenta));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
 #s-about-v1 .portrait img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 /* Floating software chips */
 #s-about-v1 .badge {
   position: absolute;
   display: grid;
   place-items: center;
   width: 86px;
   height: 74px;
   border-radius: 18px;
   transform: rotate(-12deg);
   box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
 }
 /* ---- Right (copy) ---- */
 #s-about-v1 .name {
   margin: 0 0 12px 0;
   font-family: 'Montserrat', sans-serif;
   font-weight: 900;
   font-size: clamp(34px, 6vw, 56px);
   letter-spacing: .02em;
 }
 #s-about-v1 .name .first {
   color: #fff;
 }
 #s-about-v1 .name .last {
   background: linear-gradient(var(--magenta));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }
 #s-about-v1 .bio {
   color: #dde2ff;
   max-width: 64ch;
 }
 #s-about-v1 .bio p {
   margin: 8px 0;
   line-height: 1.75;
 }
 #s-about-v1 .bio strong {
   color: #fff;
 }
 #s-about-v1 .fiverr-link {
   color: var(--cyan);
   text-decoration: none;
   font-weight: 800;
 }
 #s-about-v1 .fiverr-link:hover {
   text-decoration: underline;
 }
 #s-about-v1 .fiverr-note {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-top: 18px;
 }
 #s-about-v1 .fiverr-note .small {
   color: #e6e9ffcc;
   font-size: 0.95rem;
 }
 #s-about-v1 .fiverr-wordmark {
   font-size: clamp(26px, 4vw, 40px);
   font-weight: 900;
   letter-spacing: .5px;
   color: #ffffff;
   opacity: .95;
 }
 /* Decorative background accents */
 #s-about-v1 .bg-glow {
   position: absolute;
   right: -10%;
   top: -10%;
   width: 45vw;
   height: 45vw;
   pointer-events: none;
   background: radial-gradient(closest-side, #6c00ff40, transparent 70%);
   filter: blur(8px);
 }
 #s-about-v1 .bg-streak {
   position: absolute;
   right: 6%;
   top: 34%;
   width: 46vw;
   height: 28vw;
   pointer-events: none;
   background: radial-gradient(closest-side, #00d1ff25, transparent 70%);
   transform: rotate(-6deg);
   filter: blur(10px);
 }
 /* ---- Responsive ---- */
 @media (max-width: 980px) {
   #s-about-v1 .about-wrap {
     grid-template-columns: 1fr;
   }
   #s-about-v1 .about-right {
     order: 2;
   }
   #s-about-v1 .about-left {
     order: 1;
     justify-self: center;
   }
   #s-about-v1 .fiverr-note {
     flex-direction: column;
     align-items: flex-start;
   }
 }
 /* ===== OUR SERVICES + PRICING (scoped) ===== */
 :root {
   --ink: #0b0e23;
   --bg: #ffffff;
   --muted: #3b4160;
   --violet: #6c00ff;
   --magenta: #ff00a8;
   --cyan: #00e7ff;
   --gold: #ffb800;
 }
 #s-services-v1 {
   background: #f8f9ff;
   color: #0b1023;
   font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   padding: clamp(36px, 6vw, 60px) 0;
 }
 #s-services-v1 .container-xxl {
   width: min(1200px, 92vw);
   margin-inline: auto;
 }
 /* Head */
 #s-services-v1 .head h3 {
   color: #1a2a78;
   font-weight: 800;
   letter-spacing: .06em;
   margin: 0;
   white-space: nowrap;
   /* prevent wrapping */
   /* margin: 0 0 10px 0; */
 }
 #s-services-v1 .head .bar {
   height: 12px;
   /* border-radius: 2px; */
   background: linear-gradient(90deg,
       #1d2b7f 0%,
       var(--violet) 40%,
       var(--magenta) 70%,
       var(--gold) 100%);
 }
 /* Services grid */
 #s-services-v1 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-bottom: clamp(34px, 5vw, 56px);
 }
 #s-services-v1 .svc-card {
   position: relative;
   background: #fff;
   border-radius: 18px;
   padding: 20px 22px 28px;
   box-shadow: 0 14px 40px rgba(31, 38, 135, .14);
   border: 1px solid #e9ecf6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease; /* smooth hover */
  cursor: pointer;
  transform: translateY(0);
 }
 /* Hover state */
#s-services-v1 .svc-card:hover {
  transform: translateY(-8px) scale(1.02); /* lift up slightly */
  box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* deeper shadow */
}
 #s-services-v1 .svc-card .svc-top {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px;
 }
 #s-services-v1 .svc-card .icon {
   font-size: 22px;
   display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
 }
#s-services-v1  .svc-card:hover .icon {
  transform: rotate(10deg) scale(1.1);
  color: var(--primary, #ff5722); /* fallback if you don't have a primary color variable */
}
 #s-services-v1 .svc-card h4 {
   margin: 0;
   font-size: 20px;
   font-weight: 800;
   color: #151a35;
 }
 #s-services-v1 .svc-card p {
   margin: 10px 0;
   color: #4a5070;
 }
 #s-services-v1 .svc-card .bullets {
   margin: 6px 0 0 18px;
   color: #394056;
 }
 #s-services-v1 .svc-card .bullets li {
   margin: 6px 0;
 }
 #s-services-v1 .svc-card .underline {
   position: absolute;
   left: 18px;
   right: 18px;
   bottom: 10px;
   height: 6px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--magenta), var(--gold));
 }
 #s-services-v1 .svc-card .underline.blue {
   background: linear-gradient(90deg, var(--cyan), var(--violet));
 }
 #s-services-v1 .svc-card .underline.purple {
   background: linear-gradient(90deg, var(--violet), var(--magenta));
 }
 /* Pricing grid */
 #s-services-v1 .pricing-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
 }
 #s-services-v1 .price-card {
   position: relative;
   background: #fff;
   border-radius: 22px;
   padding: 32px 28px;
   box-shadow: 0 26px 60px rgba(0, 0, 0, .12);
   border: 1px solid #eef1fb;
   background-image: radial-gradient(1200px 500px at 50% -20%, #ffffff 0%, #f2f3ff 55%, #eceeff 100%);
   box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
   transition: transform 0.35s ease, box-shadow 0.35s ease;
   transform-style: preserve-3d;
   perspective: 1000px;
   cursor: pointer;
   text-align: center;
   overflow: visible;
 }
 #s-services-v1 .price-card:hover {
   transform: translateY(-12px) scale(1.04) rotateX(4deg) rotateY(-4deg);
   box-shadow: 0 20px 50px rgba(0, 0, 0, .25),
     0 0 25px rgba(108, 0, 255, 0.25);
   /* subtle violet glow */
 }
 #s-services-v1 .price-card .tag {
   display: inline-block;
   padding: 10px 34px;
   font-weight: 800;
   font-size: 15px;
   color: #fff;
   border-radius: 12px;
   text-align: center;
   min-width: 130px;
   text-transform: uppercase;
   box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
 }
 #s-services-v1 .tag-dark {
   background: linear-gradient(135deg, #2a2344, #3d2d70);
 }
 #s-services-v1 .tag-violet {
   background: linear-gradient(135deg, #5a39ff, #9a50ff);
 }
 #s-services-v1 .tag-gold {
   background: linear-gradient(135deg, #ffeb99, #f1c232, #d4a017);
   color: #111;
   /* darker text for contrast */
 }
 #s-services-v1 .price-card .price {
   font-weight: 900;
   font-size: clamp(44px, 6vw, 64px);
   color: #151a35;
   margin: 16px 0 10px;
 }
 #s-services-v1 .price-card .ticks {
   list-style: none;
   padding: 0;
   margin: 0 0 16px 20px;
   color: #3b4160;
   text-align: left;
 }
 #s-services-v1 .price-card .ticks li {
   margin: 8px 0;
   padding-left: 22px;
   position: relative;
 }
 /* Default: all ticks get a star */
 #s-services-v1 .price-card .ticks li::before {
   content: '⭐';
   position: absolute;
   left: 0;
   top: 0;
   transform: translateY(-1px);
   color: #ff9b00;
   font-size: 14px;
 }
 /* Override first item: fire emoji */
 #s-services-v1 .price-card .ticks li:first-child::before {
   content: '🔥';
   color: #ff5722;
   /* optional: fire orange color */
   font-size: 15px;
   /* slightly bigger */
 }
 #s-services-v1 .btn-order {
   display: inline-block;
   width: 142px;
   height: 40px;
   border-radius: 999px;
   border: 0;
   background: #d5d5e0;
   color: #1c1c2e;
   font-weight: 800;
   letter-spacing: .02em;
 }
 /* container for tag + price */
 .price-card .price-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
   /* spacing before ticks */
 }
 /* pill tag */
 .price-card .tag {
   display: inline-block;
   margin-bottom: 14px;
   padding: 10px 34px;
   border-radius: 12px;
   font-weight: 800;
   font-size: 15px;
   text-transform: uppercase;
   white-space: nowrap;
   color: #fff;
 }
 /* different colors */
 .price-card .tag-dark {
   background: linear-gradient(135deg, #2a2344, #3d2d70);
 }
 .price-card .tag-violet {
   background: linear-gradient(135deg, #5a39ff, #9a50ff);
 }
 .price-card .tag-gold {
   background: linear-gradient(135deg, #ffeb99, #f1c232, #d4a017);
   color: #111;
 }
 /* price styling */
 .price-card .price {
   font-weight: 900;
   font-size: clamp(44px, 6vw, 64px);
   color: #151a35;
 }
 /* Responsive */
 @media (max-width: 980px) {
   #s-services-v1 .services-grid,
   #s-services-v1 .pricing-grid {
     grid-template-columns: 1fr;
   }
 }
 /* ====== PORTFOLIO (scoped) ====== */
 :root {
   --ink: #0b0e23;
   --muted: #b8c4ff;
   --violet: #6c00ff;
   --magenta: #ff00a8;
   --blue: #00a2ff;
   --green: #35c95a;
 }
 #s-portfolio-v1 {
   background: #ffffff;
   padding: clamp(36px, 6vw, 60px) 0 clamp(28px, 5vw, 44px);
   font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   color: var(--ink);
 }
 #s-portfolio-v1 .container-xxl {
   width: min(1200px, 92vw);
   margin-inline: auto;
 }
 /* Title with stroke like the design */
 #s-portfolio-v1 .title-outline {
   margin: 0 0 18px 0;
   text-align: center;
   font-family: 'Montserrat', sans-serif;
   font-weight: 900;
   font-size: clamp(44px, 10vw, 128px);
   color: transparent;
   -webkit-text-stroke: 2.5px #696e8a6e;
   letter-spacing: .04em;
 }
 /* Carousel */
 #s-portfolio-v1 .carousel {
   position: relative;
   overflow: hidden;
 }
 #s-portfolio-v1 .track {
   display: flex;
   align-items: center;
   gap: 18px;
   animation: slideLeft 22s linear infinite;
 }
 @keyframes slideLeft {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-50%);
   }
   /* relies on duplicated content */
 }
 /* Cards */
 #s-portfolio-v1 .card {
   flex: 0 0 240px;
   /* aspect-ratio: 2/3; */
   position: relative;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
   background: #e9edf6;
 }
 #s-portfolio-v1 .card img {
   width: 100%;
   height: 100%;
   object-fit: fill;
   display: block;
 }
 #s-portfolio-v1 .card .bar {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 6px;
 }
 #s-portfolio-v1 .bar.violet {
   background: linear-gradient(90deg, #6c00ff, #a27bff);
 }
 #s-portfolio-v1 .bar.magenta {
   background: linear-gradient(90deg, #ff00a8, #ff7bd1);
 }
 #s-portfolio-v1 .bar.blue {
   background: linear-gradient(90deg, #00a2ff, #5bd0ff);
 }
 #s-portfolio-v1 .bar.green {
   background: linear-gradient(90deg, #35c95a, #b1f3c2);
 }
 #s-portfolio-v1 .bar.purple {
   background: linear-gradient(90deg, #8a2be2, #d6b7ff);
 }
 /* Hover pause (optional) */
 #s-portfolio-v1 .carousel:hover .track {
   animation-play-state: paused;
 }
 /* Responsive */
 @media (max-width: 640px) {
   #s-portfolio-v1 .card {
     flex-basis: 200px;
   }
 }
 /* ====== Testimonials + Contact + Footer (scoped) ====== */
 :root {
   --violet: #6c00ff;
   --magenta: #ff00a8;
   --rose: #ff55b4;
   --cyan: #00e7ff;
   --ink: #0b0e23;
   --white: #fff;
   --muted: #d8dcff;
 }
 /* container width to match previous sections */
 .container-xxl {
   width: min(1200px, 92vw);
   margin-inline: auto;
 }
 #s-testimonials-v1 {
   position: relative;
   padding: clamp(34px, 6vw, 60px) 0 72px;
   color: var(--white);
   font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   /* Add image + gradient layers */
   background:
     url("Layer-2.png");
   /* 👈 your image here */
   background-size: cover;
   /* make sure it fits nicely */
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
 }
 /* faint collage in the back */
 #s-testimonials-v1 .bg-collage {
   position: absolute;
   inset: 0;
   background:
     url('https://images.unsplash.com/photo-1520975922284-352ddec1f5b6?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
   opacity: .16;
   filter: saturate(70%) blur(1px);
   pointer-events: none;
 }
 #s-testimonials-v1 .t-head {
   text-align: center;
   font-weight: 800;
   letter-spacing: .03em;
   margin: 4px 0 24px;
   font-size: clamp(20px, 3vw, 28px);
 }
 /* --- bubbles row --- */
 #s-testimonials-v1 .t-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-bottom: clamp(40px, 6vw, 68px);
 }
 #s-testimonials-v1 .bubble {
   position: relative;
   background: #fff;
   color: #0f1230;
   border-radius: 18px;
   padding: 20px 22px 18px;
   box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
   overflow: visible;
   isolation: isolate;
 }
 #s-testimonials-v1 .bubble:after {
   /* speech tail */
   content: "";
   position: absolute;
   right: 38px;
   bottom: -18px;
   width: 0;
   height: 0;
   border: 18px solid transparent;
   border-top-color: #fff;
   transform: rotate(45deg);
   filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18));
 }
 /* big teal quote marks */
 #s-testimonials-v1 .bubble::before {
   content: "“”";
   position: absolute;
   right: -8px;
   top: -26px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 900;
   font-size: 92px;
   line-height: 1;
   letter-spacing: -.04em;
   color: #00f0dc;
   opacity: .95;
   z-index: 0;
 }
 #s-testimonials-v1 blockquote {
   margin: 0;
   position: relative;
   z-index: 1;
 }
 #s-testimonials-v1 .sig {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 6px;
 }
 #s-testimonials-v1 .bubble p {
   margin: 0;
   color: #1c264a;
   line-height: 1.65;
   font-size: 14px;
 }
 
 #s-testimonials-v1 figcaption {
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   color: #8c94b8;
   font-weight: 200;
 }
 #s-testimonials-v1 figcaption img {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   object-fit: cover;
 }
 /* --- Contact --- */
 #s-testimonials-v1 .c-head {
   text-align: center;
   font-weight: 800;
   letter-spacing: .03em;
   font-size: clamp(20px, 3vw, 28px);
   margin: 26px 0 16px;
   color: #fff;
 }
 #s-testimonials-v1 .contact-card {
   width: min(740px, 92vw);
   margin: 0 auto;
   background: linear-gradient(180deg, #faf6ff 0%, #efe9ff 55%, #e8e5ff 100%);
   border: 1px solid #ffffffcc;
   border-radius: 22px;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
   padding: 18px 18px 20px;
 }
 @media (max-width: 902px) {
   #s-testimonials-v1 .contact-card {
     width: 400px;
     max-width: 100%;
   }
 }
 #s-testimonials-v1 .c-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 #s-testimonials-v1 .c-form input,
 #s-testimonials-v1 .c-form textarea {
   width: 100%;
   background: #fff;
   border: 1px solid #d8d9ee;
   border-radius: 10px;
   padding: 12px 14px;
   font: inherit;
   outline: none;
 }
 #s-testimonials-v1 .c-form textarea {
   grid-column: 1/-1;
   min-height: 130px;
 }
 #s-testimonials-v1 .btn-send {
   grid-column: 1/-1;
   justify-self: center;
   margin-top: 8px;
   padding: .9rem 2.2rem;
   border-radius: 14px;
   border: 0;
   color: #fff;
   font-weight: 800;
   letter-spacing: .02em;
   background: linear-gradient(135deg, var(--violet), var(--magenta));
   box-shadow: 0 18px 36px rgba(0, 0, 0, .25);
 }
 /* --- Footer --- */
 #site-footer-v1 {
   background: #140a2a;
   /* deep violet like your mock */
   color: #c6c9da;
   font-family: 'Poppins', system-ui, -apple-system;
   border-top: 1px solid #ffffff14;
 }
 /* top row */
 #site-footer-v1 .f-wrap {
   width: min(1200px, 92vw);
   margin-inline: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   padding: 18px 0;
 }
 /* left: two images */
 .footer-logos {
   display: flex;
   align-items: center;
   gap: 24px;
 }
 .footer-logo {
   height: 44px;
   /* desktop size */
   width: auto;
   display: block;
 }
 .footer-badge {
   height: 54px;
   width: auto;
   display: block;
 }
 /* right: links */
 #site-footer-v1 .f-links {
   display: flex;
   list-style: none;
   gap: 22px;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
 }
 #site-footer-v1 .f-links a {
   color: #e6e8ff;
   text-decoration: none;
   opacity: .9;
   font-weight: 600;
 }
 #site-footer-v1 .f-links a:hover {
   opacity: 1;
   text-decoration: underline;
 }
 /* centered copyright */
 #site-footer-v1 .copy {
   text-align: center;
   font-size: .95rem;
   color: #8f96b6;
   padding: 10px 0 18px;
   border-top: 1px solid #ffffff10;
 }
 /* responsiveness */
 @media (max-width: 992px) {
   .footer-logo {
     height: 38px;
   }
   .footer-badge {
     height: 48px;
   }
 }
 @media (max-width: 640px) {
   #site-footer-v1 .f-wrap {
     flex-direction: column;
     align-items: flex-start;
     gap: 14px;
   }
   .footer-logos {
     gap: 16px;
   }
   /* center everything on very small phones */
   @media (max-width: 420px) {
     #site-footer-v1 .f-wrap {
       align-items: center;
       text-align: center;
     }
     #site-footer-v1 .f-links {
       justify-content: center;
     }
   }
 }
 /* --- Responsive --- */
 @media (max-width: 1000px) {
   #s-testimonials-v1 .t-row {
     grid-template-columns: 1fr;
   }
 }
 @media (max-width: 640px) {
   #site-footer-v1 .f-wrap {
     flex-direction: column;
     align-items: flex-start;
   }
 }
 /* ===== Mobile Nav (scoped to header area) ===== */
 :root {
   --violet: #6c00ff;
   --magenta: #ff00a8;
 }
 /* base */
 .hamburger {
   display: none;
   position: relative;
   width: 42px;
   height: 42px;
   border: 1px solid #ffffff33;
   border-radius: 12px;
   background: transparent;
   cursor: pointer;
 }
 .hamburger span {
   position: absolute;
   left: 9px;
   right: 9px;
   height: 2px;
   background: #fff;
   border-radius: 2px;
   transition: transform .25s ease, opacity .2s ease, top .25s ease;
 }
 .hamburger span:nth-child(1) {
   top: 13px;
 }
 .hamburger span:nth-child(2) {
   top: 20px;
 }
 .hamburger span:nth-child(3) {
   top: 27px;
 }
 /* morph when active */
 .hamburger.is-active span:nth-child(1) {
   top: 20px;
   transform: rotate(45deg);
 }
 .hamburger.is-active span:nth-child(2) {
   opacity: 0;
 }
 .hamburger.is-active span:nth-child(3) {
   top: 20px;
   transform: rotate(-45deg);
 }
 /* off-canvas */
 .mnav {
   position: fixed;
   inset: 0 0 0 auto;
   width: min(84vw, 360px);
   background:
     linear-gradient(160deg, rgba(24, 18, 54, .75), rgba(10, 11, 30, .85)),
     linear-gradient(135deg, var(--violet), var(--magenta));
   background-blend-mode: overlay, normal;
   color: #fff;
   transform: translateX(100%);
   transition: transform .32s ease;
   z-index: 1001;
   backdrop-filter: blur(10px);
   box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
 }
 .mnav.open {
   transform: translateX(0);
 }
 .mnav[aria-hidden="true"] {
   visibility: hidden;
 }
 /* header inside drawer */
 .mnav-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 16px 8px;
 }
 .mnav-header .brand {
   display: flex;
   gap: 10px;
   align-items: center;
   font-weight: 800;
 }
 .mnav-header .hamburger {
   border-color: #ffffff40;
 }
 /* links */
 .mnav-links {
   list-style: none;
   padding: 8px 8px 0 8px;
   margin: 0;
 }
 .mnav-links li {
   margin: 2px 0;
 }
 .mnav-links a {
   display: block;
   padding: 12px 14px;
   margin: 6px 6px;
   border-radius: 12px;
   color: #e9eaff;
   text-decoration: none;
   font-weight: 600;
   border: 1px solid transparent;
 }
 .mnav-links a:hover {
   background: #ffffff12;
   border-color: #ffffff26;
 }
 /* drawer CTA */
 .mnav-cta {
   display: block;
   margin: 14px 14px 18px;
   text-align: center;
   border-radius: 14px;
   background: linear-gradient(135deg, var(--violet), var(--magenta));
   color: #fff;
   font-weight: 800;
   padding: 12px 16px;
 }
 /* overlay */
 .mnav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   backdrop-filter: blur(2px);
   z-index: 1000;
   opacity: 0;
   transition: opacity .25s ease;
 }
 .mnav-overlay.show {
   opacity: 1;
 }
 /* show hamburger & hide desktop menu at <= 992px (match your breakpoints) */
 @media (max-width: 992px) {
   .hamburger {
     display: block;
   }
   .menu {
     display: none !important;
   }
   /* your existing desktop nav list */
 }
 .slider3d {
   position: relative;
   width: 50vmin;
   height: 55vmin;
   /* a bit taller for posters */
   perspective: 300px;
   perspective-origin: 50% 45%;
   user-select: none;
 }
 .slider3d_wrap {
   position: relative;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   transition: transform .7s cubic-bezier(.22, .68, 0, 1);
   will-change: transform;
 }
 .slide {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
 }
  @media (max-width: 437px) {
   .slide {
     margin-top: 150px;
   }
  }
 .poster {
   width: 68%;
   height: 88%;
   border-radius: 18px;
   background: var(--img) center/cover no-repeat;
   box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
   transform: translateZ(0);
   transition: transform .5s ease, box-shadow .5s ease, filter .5s ease;
   position: relative;
   overflow: hidden;
 }
 /* glossy overlay like a print */
 .poster::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(140deg, rgba(255, 255, 255, .10), transparent 35%, transparent 70%, rgba(0, 0, 0, .25));
   pointer-events: none;
 }
 /* thin gradient strip at bottom (like the PSD) */
 .poster::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 6px;
   background: linear-gradient(90deg, #6c00ff, #ff00a8, #ffb800);
 }
 /* pose styles for positions */
 .slide.is-front .poster {
   transform: rotateZ(-4deg) scale(1.06);
   /* centered, slight counter tilt */
   box-shadow: 0 50px 120px rgba(0, 0, 0, .55);
   filter: saturate(1.05);
 }
 .slide.is-left .poster {
   transform: rotateZ(-12deg) scale(.92);
 }
 .slide.is-right .poster {
   transform: rotateZ(10deg) scale(.92);
 }
 /* the rest (back items) look smaller and dimmer */
 .slide.is-back .poster {
   transform: rotateZ(0deg) scale(.8);
   filter: brightness(.85) saturate(.9);
 }
 /* nav hit area (optional; hidden by default) */
 .slider3d_left,
 .slider3d_right {
   display: none;
 }
 /* responsive */
 @media (max-width:700px) {
   .slider3d {
     width: 80vmin;
     height: 80vmin;
   }
   .poster {
     width: 70%;
     height: 86%;
   }
 }
 /* ==== Hero Social Rail ==== */
 .hero-social {
   position: absolute;
   right: 12px;
   /* aligns near the posters */
   top: 40%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   z-index: 10;
 }
 @media (max-width: 991px) {
   .hero-social {
     top: 0%;
   }
 }
 @media (min-width: 1700px) {
   .hero-social {
     right: -200px;
   }
 }
 .hero-social .line {
   width: 1.5px;
   height: 160px;
   background: linear-gradient(to bottom, #fff 0%, transparent 100%);
   position: relative;
 }
 .hero-social .line::after {
   content: "";
   position: absolute;
   bottom: -14px;
   left: 50%;
   transform: translateX(-50%);
   width: 24px;
   height: 24px;
   border-bottom: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: translateX(-50%) rotate(45deg);
 }
 .hero-social .icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #fff;
   background: linear-gradient(135deg, #6c00ff, #ff00a8);
   box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
   font-size: 14px;
   transition: transform .2s ease, box-shadow .2s ease;
 }
 .hero-social .icon:hover {
   transform: translateY(-2px) scale(1.08);
   box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
 }
 .hero-social a {
   text-decoration: none !important;
 }
 /* hide or reposition on smaller screens */
 @media (max-width: 768px) {
   .hero-social {
     right: 4px;
     gap: 10px;
   }
   .hero-social .line {
     height: 120px;
   }
 }
 @media (max-width: 576px) {
   .hero-social {
     display: none;
   }
   /* optionally hide on very small phones */
 }
 nav .btn-cta {
   text-decoration: none !important;
 }
 /* Watch video button (theme-matched) */
 .btn-video {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   color: #fff;
   font-weight: 800;
   border-radius: 40px;
   padding: .85rem 1.2rem;
   background: transparent;
   border: 1px solid #ffffff50;
   transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
 }
 .btn-video:hover {
   transform: translateY(-1px);
   border-color: #fff;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
 }
 /* play dot */
 .btn-video .play {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: linear-gradient(135deg, #6c00ff, #ff00a8);
   position: relative;
   display: inline-block;
   flex: 0 0 28px;
 }
 .btn-video .play:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-45%, -50%);
   border-left: 7px solid #fff;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
 }
 /* dark translucent modal to match hero */
 .video-modal {
   background: #000;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid #ffffff22;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
 }
 /* Brand logo */
 .brand-logo {
   height: 42px;
   /* default size for desktops */
   width: auto;
   /* keep aspect ratio */
   display: block;
 }
   @media (min-width: 486px) {
   .btn-video {
margin: 0px 10px;
 }
 }
  @media (max-width: 486px) {
   .btn-video {
margin: 10px 0px;
 }
 }
 @media (max-width: 992px) {
   .brand-logo {
     height: 36px;
     /* slightly smaller on tablets */
   }
 }
 @media (max-width: 576px) {
   .brand-logo {
     height: 30px;
     /* smaller on phones */
   }
 }
 .stats-section {
   /* background: linear-gradient(135deg, #21024f, #0d0221); */
   border-radius: 20px;
   /* margin: 60px auto; */
   /* padding: 60px 20px; */
 }
 .stat-box {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 15px;
   padding: 30px 15px;
   transition: 0.3s;
   position: relative;
 }
 .stat-box:hover {
   transform: translateY(-8px);
   background: rgba(255, 0, 153, 0.2);
   box-shadow: 0 0 20px rgba(255, 0, 153, 0.4);
 }
 .stat-box .icon {
   font-size: 40px;
   margin-bottom: 15px;
   color: #ff0099;
   /* Neon pink */
 }
 .stat-box h3 {
   font-size: 32px;
   font-weight: 700;
   color: #fff;
   display: inline-block;
 }
 .stat-box span {
   font-size: 20px;
   font-weight: 600;
   color: #ff5e62;
   margin-left: 5px;
 }
 a{
  text-decoration: none !important;
 }
 .stat-box p {
   color: #bbb;
   margin: 5px 0 0;
 }
 /* Contact Section */
 .contact-section {
   background: linear-gradient(90deg, #21084f, #ff55bb);
   padding: 60px 50px;
   border-radius: 18px;
 }
  @media (max-width: 503px) {
   .contact-section {
   
   padding: 20px 10px;

 }
 }
 .section-title {
   font-size: 36px;
   font-weight: 700;
   color: #fff;
 }
 .section-title span {
   color: #ff0099;
   /* Neon Pink Accent */
 }
 .section-desc {
   color: #ccc;
   margin: 20px 0 40px;
   font-size: 16px;
 }
 .badge {
   background: linear-gradient(90deg, #9d00ff, #ff0099);
   color: #fff;
   font-size: 14px;
   padding: 6px 14px;
   border-radius: 20px;
   display: inline-block;
   margin-bottom: 15px;
 }
 /* Contact Info */
 .contact-info .info-box {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 15px 20px;
   border-radius: 12px;
   margin-bottom: 20px;
   transition: 0.3s;
 }
 .contact-info .info-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 15px rgba(255, 0, 153, 0.3);
 }
 .contact-info .icon {
   font-size: 28px;
   color: #ff0099;
   margin-right: 15px;
 }
 .contact-info h5 {
   color: #fff;
   font-weight: 600;
   margin: 0 0 5px;
 }
 .contact-info p {
   margin: 0;
   color: #aaa;
   font-size: 14px;
 }
 .contact-info a {
   color: #ff5e62;
   font-weight: 500;
   font-size: 15px;
   text-decoration: none !important;
 }
 /* Form */
 .form-wrapper {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 15px;
   padding: 30px;
   box-shadow: 0 0 25px rgba(157, 0, 255, 0.2);
 }
 .form-wrapper h4 {
   color: #fff;
   margin-bottom: 20px;
 }
 .form-control,
 .form-control:focus,
 .form-control::placeholder,
 select,
 textarea {
   /* background: #1a0636; */
   /* border: 1px solid rgba(255,255,255,0.2); */
   color: #717171;
   border-radius: 8px;
 }
 .form-control:focus,
 select:focus,
 textarea:focus {
   border-color: #ff0099;
   outline: none;
   box-shadow: 0 0 10px rgba(255, 0, 153, 0.4);
 }
 .btn-send {
   background: linear-gradient(90deg, #9d00ff, #ff0099);
   border: none;
   padding: 12px 25px;
   border-radius: 30px;
   color: #fff;
   font-weight: 600;
   font-size: 16px;
   transition: 0.3s;
 }
 .btn-send:hover {
   transform: translateY(-3px);
   box-shadow: 0 0 15px rgba(255, 0, 153, 0.6);
 }
 :root {
   --card-bg: #151515;
   --accent: #ff8a00;
   --gap: 1.25rem;
   /* space between cards */
   --duration: 30s;
   /* scroll speed (lower = faster) */
 }
 /* --- Heading styles --- */
 /* .section-title p.small-pill{
      display:inline-block; padding:.25rem .75rem; border:1px solid #262626;
      border-radius:999px; font-size:.85rem; color:#bbb; margin-bottom:.5rem;
    } */
 .section-title h2 {
   font-weight: 800;
   letter-spacing: .5px;
   margin-bottom: .5rem;
 }
 .section-title p {
   font-weight: 100;
   letter-spacing: .5px;
   margin-bottom: .5rem;
   font-size: 14px;
 }
 /* .section-title .accent{ color:var(--accent); } */
 /* --- Scroller (marquee) base --- */
 .scroller {
   overflow: hidden;
   mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
 }
 .scroller__track {
   display: flex;
   align-items: center;
   gap: var(--gap);
   width: max-content;
   /* fits content */
   animation: scroll-left var(--duration) linear infinite;
 }
 .scroller[data-direction="right"] .scroller__track {
   transform: translateX(-50%);
   animation-name: scroll-right;
 }
 /* Pause on hover */
 .scroller:hover .scroller__track {
   animation-play-state: paused;
 }
 @media (prefers-reduced-motion: reduce) {
   .scroller__track {
     animation-play-state: paused;
   }
 }
 /* keyframes: move exactly one copy width (we duplicate content) */
 @keyframes scroll-left {
   to {
     transform: translateX(-50%);
   }
 }
 @keyframes scroll-right {
   to {
     transform: translateX(0%);
   }
 }
 /* --- Logo cards --- */
 .logo-card {
   flex: 0 0 auto;
   min-width: 180px;
   /* ensures consistent spacing */
   padding: 18px 22px;
   background: var(--card-bg);
   border-radius: 16px;
   border: 1px solid #222;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .25s ease, border-color .25s ease, background .25s ease;
 }
 .logo-card img {
   height: 44px;
   width: auto;
   object-fit: contain;
   filter: brightness(0) invert(1);
   opacity: .95;
 }
 /* Responsive tweak */
 @media (min-width: 576px) {
   .logo-card {
     min-width: 200px;
   }
   .logo-card img {
     height: 50px;
   }
 }
 @media (min-width: 992px) {
   .logo-card {
     min-width: 220px;
   }
   .logo-card img {
     height: 56px;
   }
 }
 /* Premium page css started */
 .search-bar input {
   border-radius: 30px;
 }
 .item-box .card {
   border: none;
   border-radius: 12px;
   transition: all .3s ease;
 }
 .item-box .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
 }
 .item-box .card-placeholder {
   height: 200px;
   background: #f0f0f0;
   border-radius: 12px 12px 0 0;
 }
 .rating {
   color: #ffc107;
 }
 .feature-box {
   text-align: center;
   padding: 15px;
 }
 .feature-box i {
   color: #0d6efd;
   font-size: 1.2rem;
   margin-right: 8px;
 }
 .bottom-banner {
   text-align: center;
   font-weight: 700;
   font-size: 1.5rem;
   margin-top: 40px;
 }
 /* HERO */
 .hero {
   padding: 10rem 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   position: relative;
   padding-bottom: 0;
   background: url("Buy-Premium.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
 }
 .hero h1 {
   font-size: clamp(34px, 6.5vw, 64px);
   font-weight: 800;
   margin: 0;
   line-height: 1;
 }
 .hero p.lead {
   color: #333;
   margin-top: .6rem;
   font-weight: 500;
 }
 .hero-img {
   max-width: 320px;
   border-radius: 8px;
   display: block;
 }
 /* categories nav */
 .cats {
   overflow: auto;
   white-space: nowrap;
   padding-bottom: .6rem;
   margin-top: 1rem;
 }
 .cats a {
   display: inline-block;
   margin-right: .8rem;
   color: #222;
   text-decoration: none;
   font-weight: 600;
   padding: .25rem .6rem;
 }
 .cats a.active {
   color: #000;
   border-bottom: 3px solid #000;
 }
 /* chips */
 .chips {
   gap: .6rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: 1rem 0;
 }
 .chip {
   border-radius: 8px;
   padding: .5rem .75rem;
   border: 1px solid #e6e6e6;
   background: #fff;
   cursor: pointer;
   font-weight: 600;
   color: #333;
   font-size: .9rem;
 }
 .chip.active {
   background: #111;
   color: #fff;
   border-color: #111;
 }
 /* filters panel */
 .filters-panel {
   border: 1px solid #f0f0f0;
   padding: 12px;
   border-radius: 8px;
   background: #fafafa;
 }
 .filters-panel .form-check-label {
   font-weight: 600;
 }
 /* pagination */
 .pagination .page-link {
   border-radius: 8px;
   background: #111;
   color: #fff;
   border-color: #111;
 }
 .page-info {
   color: #666;
   font-size: .9rem;
   margin-left: 12px;
 }
 /* responsive tweaks */
 @media(max-width:991px) {
   .hero {
     padding: 2rem 0
   }
   .hero-img {
     max-width: 220px
   }
   .asset-thumb {
     height: 180px
   }
 }
 @media(max-width:576px) {
   .search-input {
     height: 56px;
     font-size: .98rem
   }
   .asset-thumb {
     height: 160px
   }
 }
 .search-bar input {
   border-radius: 30px;
 }
 .item-box .card {
   border: none;
   border-radius: 12px;
   transition: all .3s ease;
 }
 .item-box .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
 }
 .item-box .card-placeholder {
   height: 200px;
   background: #f0f0f0;
   border-radius: 12px 12px 0 0;
 }
 .rating {
   color: #ffc107;
 }
 .feature-box {
   text-align: center;
   padding: 15px;
 }
 .feature-box i {
   color: #0d6efd;
   font-size: 1.2rem;
   margin-right: 8px;
 }
 /* filters panel */
 .filters-panel {
   border: 1px solid #f0f0f0;
   padding: 12px;
   border-radius: 8px;
   background: #fafafa;
 }
 .filters-panel .form-check-label {
   font-weight: 600;
 }
 /* categories nav */
 .cats {
   overflow: auto;
   white-space: nowrap;
   padding-bottom: .6rem;
   margin-top: 1rem;
 }
 .cats a {
   display: inline-block;
   margin-right: .8rem;
   color: #222;
   text-decoration: none;
   font-weight: 600;
   padding: .25rem .6rem;
 }
 .cats a.active {
   color: #000;
   border-bottom: 3px solid #000;
 }
 /* chips */
 .chips {
   gap: .6rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: 1rem 0;
 }
 .chip {
   border-radius: 8px;
   padding: .5rem .75rem;
   border: 1px solid #e6e6e6;
   background: #fff;
   cursor: pointer;
   font-weight: 600;
   color: #333;
   font-size: .9rem;
   user-select: none;
 }
 .chip.active {
   background: #111;
   color: #fff;
   border-color: #111;
 }
 /* filters panel (inline simple panel for demo) */
 .filters-panel {
   border: 1px solid #f0f0f0;
   padding: 12px;
   border-radius: 8px;
   background: #fafafa;
   display: none;
 }
 .filters-panel.show {
   display: block;
 }
 /* pagination */
 .pagination .page-link {
   border-radius: 8px;
   background: #111;
   color: #fff;
   border: 1px solid #111;
   padding: 8px 14px;
   font-size: 0.95rem;
   font-weight: 500;
   transition: all 0.3s ease;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }
 .pagination .page-link:hover {
   background: #ffb400;
   /* golden hover */
   border-color: #ffb400;
   color: #111;
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
 }
 .pagination .page-item.active .page-link {
   background: linear-gradient(135deg, #ffb400, #ff6600);
   border-color: #ff6600;
   color: #fff;
   box-shadow: 0 4px 10px rgba(255, 102, 0, 0.5);
 }
 .pagination .page-item.disabled .page-link {
   background: #333;
   border-color: #333;
   color: #777;
   cursor: not-allowed;
   box-shadow: none;
 }
 .page-info {
   color: #555;
   font-size: 0.9rem;
   margin-left: 14px;
   font-style: italic;
 }
 /* Responsive layout for pricing cards */
 @media (max-width: 992px) {
   .pricing-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
 }
 @media (max-width: 600px) {
   .pricing-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }
   .price-card {
     width: 100%;
     max-width: 400px;
     margin: 0 auto;
   }
 }
 /* responsive tweaks */
 @media(max-width:991px) {
   .hero {
     padding: 2rem 0 0;
   }
   .hero-img {
     max-width: 220px;
   }
   .asset-thumb {
     height: 180px;
   }
 }
 @media(max-width:576px) {
   .search-input {
     height: 56px;
     font-size: .98rem;
   }
   .asset-thumb {
     height: 160px;
   }
 }
 /* glowing light effect */
 .cursor-light {
   position: fixed;
   top: 0;
   left: 0;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   pointer-events: none;
   background: radial-gradient(circle, rgba(255, 200, 0, 0.35) 0%, rgba(255, 200, 0, 0) 70%);
   transform: translate(-50%, -50%);
   mix-blend-mode: screen;
   /* blends light with bg */
   z-index: 100;
   filter: blur(20px);
   transition: background 0.6s ease, transform 0.15s ease-out;
   will-change: transform;
 }
 /* on hover anywhere */
 body:hover .cursor-light {
   background: radial-gradient(circle, rgba(0, 200, 255, 0.45) 0%, rgba(0, 200, 255, 0) 70%);
 }
 :root {
   --brand: #6c2bd9;
   /* primary */
   --brand-2: #e11d48;
   /* accent */
   --ink: #0f172a;
   /* text */
   --muted: #64748b;
   /* secondary text */
   --bg: #0b1020;
   /* top gradient start */
   --bg-2: #2a0658;
   /* top gradient end */
   --card: #ffffff;
   /* card bg */
 }
 body {
   font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   color: var(--ink)
 }
 /* hero45 */
 .hero45 {
   padding: 56px 0
 }
 .hero45 h1 {
   font-weight: 800;
   letter-spacing: .2px
 }
 .hero45 p {
   color: var(--muted);
   font-size: 1.05rem
 }
 /* Filter chips */
 .filters {
   gap: .75rem
 }
 .filter-btn {
   border: 1px solid #e2e8f0;
   padding: .6rem 1rem;
   border-radius: 999px;
   background: #fff;
   display: flex;
   align-items: center;
   gap: .5rem;
   font-weight: 600;
   color: #0f172a;
   box-shadow: 0 4px 14px rgba(0, 0, 0, .06)
 }
 .filter-btn.active {
   border-color: transparent;
   background: #eef2ff;
   color: #1e1b4b
 }
 /* Cards grid */
 .project-card {
   background: var(--card);
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 12px 28px rgba(2, 8, 23, .08);
   transition: transform .25s ease, box-shadow .25s ease
 }
 .project-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 40px rgba(2, 8, 23, .12)
 }
 .project-media {
   aspect-ratio: 1/1;
   background: #e5e7eb
 }
 .project-media.wide {
   aspect-ratio: 16/9
 }
 .project-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }
 .project-body {
   padding: 1rem
 }
  .project-body p {
    font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
   line-height: 1.2;
   color: #000;
 }
 .badge-cat {
   background: #f1f5f9;
   color: #0f172a
 }
 /* Featured band */
 .featured-title {
   font-weight: 800
 }
 /* CTA */
 .cta h2 {
   font-weight: 800
 }
 /* Utilities */
 .shadow-soft {
   box-shadow: 0 10px 30px rgba(2, 8, 23, .06)
 }
 @media (max-width: 575.98px) {
   .hero45 h1 {
     font-size: 1.9rem
   }
 }
/* =========================
   Hero Title Styling
========================= */
/* responsive font sizing example (adjust to your theme) */
/* .hero-title {
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.05;
} */
#s-hero-v1 .hero-title,
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  text-align: left;
  font-size: clamp(2rem, 6vw, 5rem); /* Fluid scaling */
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.outline {
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}
/* =========================
   Flip Animation
========================= */
/* =========================
   Flip CSS (works for any number of .step)
   Total cycle = 12s (kept as requested)
========================= */
#flipper {
  font-weight: 700;
  text-align: center;
  color: white;
}

#flipper .step {
  display: none; /* only one shows at a time */
  font-size: clamp(2rem, 6vw, 4rem); /* responsive text */
  line-height: 1.2;
}

#flipper .step.active {
  display: inline-block;
}

#flipper .outline {
  color: transparent;
  -webkit-text-stroke: 1px white; /* outlined text */
}

/* =========================
   Responsive Adjustments
========================= */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 3rem);
    text-align: center;
  }
}
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.2rem, 8vw, 2.5rem);
    text-align: center;
  }
}
/* Wave-shaped glass card */
.about-digihub-v4 {
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-wrapper {
  max-width: 1300px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.wave-card {
background: rgba(255, 255, 255, 0.05);
  padding: 50px;
  border-radius: 60px 20px 60px 20px; /* Unique curved corners */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  text-align: left;
  width: 100%;
  overflow: hidden;
  animation: fadeUp 1.2s ease;
  position: relative;
}
@keyframes fadeUp {
  0% { transform: translateY(25px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.wave-card h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #fff;
  font-weight: 700;
}
.wave-card h2 span {
  color: #ffa200;
}
.wave-card h3 {
  font-size: 1.4rem;
  margin: 20px 0 10px;
  color: #ffa200;
}
.wave-card p,
.wave-card ul {
  color: #eee;
  line-height: 1.7;
  font-size: 1.05rem;
}
.wave-card ul {
  padding-left: 20px;
}
.wave-card li {
  margin-bottom: 10px;
}
.about-hidden {
  display: none;
  margin-top: 15px;
}
.toggle-btn {
  margin-top: 25px;
  padding: 14px 32px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6600, #ff0099);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}




#site-footer-v1 .f-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Logos */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 15px;
}


/* Social icons inside circles */
.f-links {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.f-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); /* subtle background */
  color: #fff;
  font-size: 18px;
  transition: all 0.4s ease;
}

.f-links li a:hover {
  background: linear-gradient(135deg, #6c00ff, #ff00a8);
  color: #fff;
  transform: scale(1.1);
  text-decoration: none !important;
}

/* Copy */
.copy {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  #site-footer-v1 .f-wrap {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
  }

  .footer-logos {
    justify-content: center;
  }

  .f-links {
    justify-content: center;
  }
}