:root {
    --page-bg: #0b0715;
    --page-fg: #ffffff;
    --maxw: 1200px;
    --nav-bg: #1a0f2a;
    --nav-fg: #ffffff;
    --nav-muted: #e9e3ffcc;
    --nav-accent: #c6b9ff;
    --nav-ring: #ffffff33;
    --maxw: 1200px;
    --bg: #0b0616;
    /* page background */
    --panel: #1b1033;
    /* card base */
    --panel-2: #24124d;
    /* deeper edge */
    --text: #e9e4ff;
    /* primary text */
    --muted: #a99fd1;
    /* secondary text */
    --accent: #8a5cf6;
    /* primary accent */
    --accent-2: #c23bff;
    /* secondary accent */
    --ring: #c69cff;
    /* focus ring */

  }

  /* Fonts: body = Roboto, headings = Charsenz */
  /* Roboto from Google Fonts (regular + 500 + 700). If you prefer local hosting, download and add files to Public/assets/fonts and update the @font-face rules. */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

  /* Local Charsenz face (assumption: place files at Public/assets/fonts/) */
  @font-face {
    font-family: 'Charsenz';
    src: url('../assets/fonts/charsenz.otf') format('opentype'),
         url('../assets/fonts/charsenz.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-heading: 'Charsenz', system-ui, -apple-system, 'Segoe UI', 'Roboto', Arial, sans-serif;
  }

  /* Apply heading font globally */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
  }

  /* Utility font classes */
  .charsenz {
    font-family: var(--font-heading) !important;
  }

  .roboto {
    font-family: var(--font-body) !important;
  }

  body.page-bg {
    background: var(--page-bg) !important;
    color: var(--page-fg);
    margin: 0;
  }

  .hero section {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--page-bg);
    overflow: hidden;

  }

  .container {
    display: flex;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px;
    align-items: center;
  }

 @media (max-width: 1400px) {
   .container {
    max-width: 1320px;
   }
 }
  @media (max-width: 1200px) {
   .container {
        max-width: 1140px;
   }
 }
  @media (max-width: 992px) {
   .container {
        max-width: 960px;
   }
 }
  @media (max-width: 768px) {
   .container {
    max-width: 720px;
   }
 }
  @media (max-width: 576px) {
   .container {
        max-width: 540px;
   }
 }

  .logo-container {
    flex: 1;
    min-height: 400px;
    position: relative;
  }

  .text-content {
    flex: 1;

  }

  .tagline {
    font-size: 3.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    width: 450px;
  }

  .highlight-img {
    position: relative;
    display: inline-block;
    line-height: 1;
    /* keeps the ellipse tight */
    padding: 6px 14px;
    /* space so the image can sit around the word */
    color: #a259ff;
    /* purple word, like your target */
    font-weight: 500;
  }

  .highlight-img img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* center under the text */
    width: 125%;
    /* tweak to fit your PNG shape */
    height: auto;
    /* sit behind the text */
    pointer-events: none;
    user-select: none;
  }



  .team-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #555;
  }

  .description {
    line-height: 1.6;
    margin-bottom: 20px;
  }

  canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .arrow-note {
    position: absolute;
    top: 40px;
    left: 410px;
    color: #fff;
    width: 210px;
    font-size: 2.25rem;
    font-weight: 100;
    line-height: 1.15;
  }

  .arrow-note span {
    color: #a259ff;
    /*font-weight: bold;*/
  }

  .arrow-note::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -107px;
    width: 94px;
    height: 63px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    border-radius: 50% 50% 0 0;
    transform: rotate(-30deg);
  }

  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      padding: 20px;
    }

    .text-content {
      padding: 20px 0;
    }
  }


  /****/

  * {
    box-sizing: border-box
  }

  body {
    margin: 0;
    background:
      #0b0715;
    color:
      var(--nav-fg);
    font-family: var(--font-body);
  }

  body.nav-open {
    overflow: hidden
  }

  .site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(1.1);
    box-shadow: 0 1px 0 #00000066
  }

  .site-nav__bar {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg)
  }

  .site-nav__inner {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
  }

  /* brand left */
  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 56px;
    text-decoration: none
  }

  .brand img.logo3d {
    width: 90px;
    height: 90px;
    display: block;
    object-fit: contain;
  }

  .brand .brand-name {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
  }

  /* nav right */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 42px;
    margin-left: auto
  }

  .nav-links a {
    position: relative;
    text-decoration: none;
    color: var(--nav-muted);
    font-weight: 400;
    letter-spacing: .2px;
    outline-offset: 6px;
    font-size: 1.7rem;
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--nav-fg)
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    height: 2px;
    width: 90%;
    /* wider underline */
    background: linear-gradient(90deg, #fff, var(--nav-accent) 60%, #9a84ff);
    border-radius: 999px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .22s ease
  }

  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after {
    transform: translateX(-50%) scaleX(1)
  }

  .burger {
    display: none;
    appearance: none;
    background: none;
    border: 0;
    color: var(--nav-fg);
    width: 40px;
    height: 40px;
    border-radius: 8px
  }

  .burger svg {
    width: 28px;
    height: 28px
  }

  @media (max-width: 860px) {
    .nav-links {
      position: fixed;
      inset: 88px 0 auto 0;
      background: var(--nav-bg);
      display: grid;
      gap: 10px;
      padding: 18px 20px;
      border-top: 1px solid #00000066;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease;
    }

    body.nav-open .nav-links {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0)
    }

    .burger {
      display: block;
      margin-left: auto
    }
  }

  /*Cards*/

  html,
  body {
    height: 100%
  }

  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);

    /* Base color under everything */
    background-color: var(--bg);

    /* Gradient layers */
    background-image:
      radial-gradient(60vw 60vw at 75% 25%, rgba(139, 92, 246, 0.15), transparent 60%),
      radial-gradient(40vw 40vw at 30% 60%, rgba(194, 59, 255, 0.10), transparent 60%);

    /* Make sure nothing tiles or repeats */
    background-repeat: no-repeat;
    background-size: cover;
    /* or 100% 100%, to fill */
    background-attachment: fixed;
    /* optional: keeps gradients fixed while scrolling */
    background-blend-mode: screen;
    /* optional: smooth blending */
  }

  /* Remove any horizontal scrollbar “lines” */
  html,
  body {
    overflow-x: hidden;
  }

  .section-title {
    font-family: var(--font-heading);
    letter-spacing: .5px;
    font-size: clamp(28px, 2.6vw, 44px);
    text-align: center;
    margin-bottom: 2rem;
  }

  /*-------------------------------------------------------------------------------------------------------*/
  /* Card */
  .neo-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0)),
      linear-gradient(135deg, var(--panel), var(--panel-2));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: transform .35s ease, box-shadow .35s ease;
    max-height: 245px !important;
  }

  .neo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(90, 54, 200, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* Glow blob */
  .neo-card::before {
    content: "";
    position: absolute;
    inset: auto auto -40% -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(closest-side, rgba(170, 110, 255, .35), transparent 70%);
    filter: blur(40px);
    transform: rotate(-8deg);
  }

  .neo-card .content {
    position: relative;
    z-index: 2;
  }

  /*---------------*/
  /*work neo card*/
  /* Card */
  .Wneo-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0)),
      linear-gradient(135deg, var(--panel), var(--panel-2));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: transform .35s ease, box-shadow .35s ease;
    padding: 25px 30px !important;
    padding-bottom: 35px !important;
  }

  .Wneo-card {
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform .15s ease, box-shadow .35s ease;
  }

  .Wneo-card:hover {
    /*transform: translateY(-4px);*/
    box-shadow: 0 20px 50px rgba(90, 54, 200, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* Glow blob */
  .Wneo-card::before {
    content: "";
    position: absolute;
    inset: auto auto -40% -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(closest-side, rgba(170, 110, 255, .35), transparent 70%);
    filter: blur(40px);
    transform: rotate(-8deg);
    pointer-events: none;
  }

  .Wneo-card .content {
    position: relative;
    z-index: 2;
  }

  /**/


  .icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .0) 60%),
      linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 30px rgba(139, 92, 246, .45), inset 0 0 18px rgba(255, 255, 255, .25);
  }

  .icon-wrap svg {
    width: 34px;
    height: 34px;
    color: white;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  }

  .card-title {
    font-weight: 400;
    margin: 0;
    font-size: 2rem;
  }

  .card-sub {
    color: var(--muted);
    font-size: .925rem;
    line-height: 1.5;
  }

  .btn-neon {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: transparent !important;
    --bs-btn-border-color: rgba(255, 255, 255, .2) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: rgba(255, 255, 255, .06) !important;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .35) !important;
    --bs-btn-focus-shadow-rgb: 198, 156, 255 !important;
    border-radius: 999px !important;
    padding: .55rem 1.1rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--bs-btn-border-color) !important;
    backdrop-filter: blur(6px) !important;
  }

  .btn-neon .dot {
    width: 6px !important;
    height: 6px !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: .5rem !important;
  }

  /* View all link */
  .view-all {
    color: #bfaaff;
    text-decoration: none;
    font-weight: 400;
  }

  .view-all:hover {
    color: #fff;
    text-decoration: underline;
  }

  /* Focus rings */
  .btn,
  a,
  button {
    outline: none !important;
  }

  .btn:focus-visible,
  a:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(198, 156, 255, .35) !important;
  }

  /* Util */
  .gap-18 {
    gap: 18px;
  }

  .icon-size {
    width: 240px !important;
    height: 143px !important;
  }

  .img-size {
    max-width: 100%;
    height: 100%;
  }

  :root {
    --card-bg-1: #1b0f2e;
    --card-bg-2: #2c184a;
    --accent: #7c3aed;
    --accent-2: #a78bfa;
    --text: #e9e3ff;
    --muted: #b7aef1;
  }


  .project-section {
    padding: 80px 20px;
    position: relative;
  }

  .project-card {
    margin-bottom: 60px;
  }

  .project-image {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid #333;
    max-width: 100%;
    height: auto;
  }

  .project-title {
    font-size: 2rem;
    font-weight: 700;
    color: #b8baff;
  }

  .project-description {
    color: #d0d0d0;
    font-size: 1.1rem;
    line-height: 1.8;
  }

  .view-btn {
    background: linear-gradient(to right, #6f42c1, #0d6efd);
    border: none;
    padding: 12px 28px;
    color: white;
    font-weight: 400;

    border-radius: 8px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .view-btn:hover {
    background: linear-gradient(to right, #5a32a3, #0b5ed7);
  }

  .description-box {
    background-color: rgba(111, 66, 193, 0.25);
    border-radius: 20px;
    padding: 25px;
  }

  .description-box:hover {
    transform: scale(1.05);
    z-index: 1000;
  }

  /* ====== CATEGORY BAR (no glass rail) ====== */
  .category-bar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .cat-link {
    background: none;
    border: 0;
    color: #b1a6c6;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: clamp(1rem, 2.2vw, 2rem);
    padding: .25rem .5rem .65rem;
    position: relative;
    outline: none;
    transition: color .15s ease, transform .15s ease;
  }

  .cat-link:focus-visible {
    text-decoration: none;
    box-shadow: none;
  }

  .cat-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 22px;
    height: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, #ffffff 0%, #b8baff 60%, #6f42c1 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(167, 139, 250, .65);
    transition: transform .22s ease;
  }

  .cat-link:hover {
    color: #fff;
  }

  .cat-link:hover::after,
  .cat-link.active::after {
    transform: translateX(-50%) scaleX(1);
  }

  .cat-link.active {
    color: #fff;
    text-shadow: 0 0 18px rgba(167, 139, 250, .35);
  }

  @media (max-width: 576px) {
    .category-bar .nav {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .category-bar .nav::-webkit-scrollbar {
      display: none;
    }
  }

  /* ====== Service card ====== */
  .service-card {
    position: relative;
    border-radius: 24px;
    /* allow badge to rise above the card on hover */
    overflow: visible;
    border: 1px solid rgba(167, 139, 250, .16);
    background: linear-gradient(180deg, rgba(124, 58, 237, .06), rgba(124, 58, 237, .02)), radial-gradient(120% 140% at 10% 10%, var(--card-bg-2) 0%, var(--card-bg-1) 38%, #120a22 100%);
    box-shadow: 0 10px 35px rgba(124, 58, 237, .25), inset 0 0 0 1px rgba(167, 139, 250, .08);
  }

  .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 20%);
    pointer-events: none;
  }

  .service-card .orb {
    position: absolute;
    inset: -40% -10% auto auto;
    width: 40vmax;
    height: 40vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(124, 58, 237, .25), rgba(124, 58, 237, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
  }

  .service-card .left-badge {
    width: 150px;
    height: 150px;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(124, 58, 237, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    position: relative;
  }

  .left-badge-img{
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
    /* keep the image in flow so transforms can overflow the card */
    position: relative;
    z-index: 2;
    transform-origin: center bottom;
    transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease;
    will-change: transform;
  }

  /* when the parent card is hovered, lift and scale the badge image up out of the card */
 .left-badge-img:hover{
    transform: translateY(-48px) scale(1.28);
    z-index: 10;
  }
  .service-card .title {
    font-weight: 500;
    letter-spacing: .2px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(124, 58, 237, .35);
  }

  .service-card .tagline {
    color: var(--muted);
  }

  .service-card .tool {
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    isolation: isolate;
    position: relative;
    background: radial-gradient(100% 100% at 70% 30%, rgba(167, 139, 250, .25), rgba(124, 58, 237, .15) 50%, rgba(124, 58, 237, .06) 100%);
    border: 1px solid rgba(167, 139, 250, .22);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 12px 28px rgba(124, 58, 237, .25);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }

  .service-card .tool:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28), 0 18px 36px rgba(124, 58, 237, .35);
    border-color: rgba(167, 139, 250, .35);
  }

  .service-card .tool svg {
    width: 44px;
    height: 44px;
  }

  .service-card .spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4b5fd;
    opacity: .9;
    filter: blur(.3px);
  }

  @media (max-width: 576px) {
    .service-card .left-badge {
      width: 100px;
      height: 100px;
    }

   

    .service-card .tool {
      width: 72px;
      height: 72px;
    }

    .service-card .tool svg {
      width: 36px;
      height: 36px;
    }
  }

  /* ====== BIG two-image stack with hover swap ====== */
  .swap-stack {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    /* keeps a nice rectangle */
    max-height: 64vh !important;
  }

  .swap-stack .stack-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid #2d2751;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
    transition: transform .55s cubic-bezier(.22, .8, .26, .99),
      filter .55s ease, opacity .55s ease;
    will-change: transform, filter, opacity;
  }

  /* Default state: back sits slightly left/up; front sits right/down & a hair smaller */
  .swap-stack .back {
    transform: translate(-6%, -8%) scale(1.02);
    z-index: 1 !important;
    filter: brightness(.92) saturate(.95);
  }

  .swap-stack .front {
    transform: translate(8%, 6%) scale(.96);
    z-index: 2 !important;
  }

  /* On hover: they trade places smoothly; back comes to front */
  .swap-stack:hover .back {
    transform: translate(8%, 6%) scale(1.02);
    z-index: 3 !important;
    filter: none;
  }

  .swap-stack:hover .front {
    transform: translate(-6%, -8%) scale(.94);
    z-index: 1 !important;
    filter: brightness(.9) saturate(.9);
  }

  /* Tweak on larger screens for a bit more drama */
  @media (min-width: 992px) {
    .swap-stack .back {
      transform: translate(-7%, -10%) scale(1.03);
    }

    .swap-stack .front {
      transform: translate(10%, 8%) scale(.95);
    }

    .swap-stack:hover .back {
      transform: translate(10%, 8%) scale(1.03);
    }

    .swap-stack:hover .front {
      transform: translate(-7%, -10%) scale(.93);
    }
  }

  .nav-links a.active {
    color: var(--nav-fg);
  }

  .nav-links a.active::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* ===== Preview grid under each project description ===== */
  .gallery-preview {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }

  .preview-tile {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #2d2751;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    aspect-ratio: 1 / 1;
    /* square tiles, media inside keeps its own ratio */
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .preview-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .55);
  }

  .preview-tile img,
  .preview-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* floating “open gallery” icon */
  .open-gallery {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    text-decoration: none;
    background: radial-gradient(100% 100% at 70% 30%, rgba(167, 139, 250, .25), rgba(124, 58, 237, .15) 50%, rgba(124, 58, 237, .06));
    border: 1px solid rgba(167, 139, 250, .35);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 10px 24px rgba(124, 58, 237, .25);
    color: #e9e4ff;
    font-weight: 400;
  }

  .open-gallery:hover {
    transform: translateY(-2px);
  }

  /* Make decorative overlays ignore the mouse so buttons/links work */
  .Wneo-card::before,
  .neo-card::before {
    pointer-events: none;
  }

  /* ===== Full gallery page masonry ===== */
  .masonry {
    column-count: 3;
    column-gap: 16px;
  }

  @media (max-width: 992px) {
    .masonry {
      column-count: 2;
    }
  }

  @media (max-width: 576px) {
    .masonry {
      column-count: 1;
    }
  }

  .masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #2d2751;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
      linear-gradient(135deg, var(--panel, #1b1033), var(--panel-2, #21123e));
  }

  .masonry-item img,
  .masonry-item video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* visible, clickable icon */
  .open-gallery {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    text-decoration: none;
    color: #e9e4ff;
    /* ensures SVG is visible */
    background: radial-gradient(100% 100% at 70% 30%, rgba(167, 139, 250, .25), rgba(124, 58, 237, .15) 50%, rgba(124, 58, 237, .06));
    border: 1px solid rgba(167, 139, 250, .35);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 10px 24px rgba(124, 58, 237, .25);
    z-index: 2;
  }

  .open-gallery svg {
    width: 18px;
    height: 18px;
    display: block;
  }


  /* ====== CATEGORY BAR (no glass rail) ====== */
  .category1-bar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .cat-link1 {
    background: none;
    border: 0;
    color: #b1a6c6;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: clamp(1rem, 2.2vw, 2rem);
    padding: .25rem .5rem .65rem;
    position: relative;
    outline: none;
    transition: color .15s ease, transform .15s ease;
  }

  .cat-link1:focus-visible {
    text-decoration: none;
    box-shadow: none;
  }

  .cat-link1::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 22px;
    height: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, #ffffff 0%, #b8baff 60%, #6f42c1 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(167, 139, 250, .65);
    transition: transform .22s ease;
  }

  .cat-link1:hover {
    color: #fff;
  }

  .cat-link1:hover::after,
  .cat-link1.active::after {
    transform: translateX(-50%) scaleX(1);
  }

  .cat-link1.active {
    color: #fff;
    text-shadow: 0 0 18px rgba(167, 139, 250, .35);
  }

  @media (max-width: 576px) {
    .category1-bar .nav {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .category1-bar .nav::-webkit-scrollbar {
      display: none;
    }
  }

  /*_____________________________________________*/
  /* === HoloFusion Section === */
  .hf-section {
    position: relative;
    isolation: isolate;
  }

  .hf-head {
    text-align: center;
    margin-bottom: 96px;
  }

  .hf-kicker {
    display: inline-block;
    font: weight 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .hf-title {
    margin: 6px 0 0;
    font-weight: 800;
    font-size: clamp(28px, 2.8vw, 48px);
    color: var(--text);
    text-shadow: 0 2px 18px rgba(124, 58, 237, .25);
  }

  /* animated blob backdrop */
  .hf-blob {
    position: absolute;
    inset: auto -10% -25% -10%;
    height: 44vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(138, 92, 246, .22), rgba(194, 59, 255, .12) 40%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    animation: hfFloat 16s ease-in-out infinite;
  }

  @keyframes hfFloat {
    0% {
      transform: translateY(0) scale(1);
    }

    50% {
      transform: translateY(-16px) scale(1.06);
    }

    100% {
      transform: translateY(0) scale(1);
    }
  }

  /* chips */
  .hf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }

  .hf-chip {
    background: radial-gradient(100% 100% at 70% 30%, rgba(167, 139, 250, .25), rgba(124, 58, 237, .10) 50%, rgba(124, 58, 237, .02) 100%);
    border: 1px solid rgba(167, 139, 250, .28);
    color: var(--text);
    font-weight: 700;
    letter-spacing: .2px;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 8px 20px rgba(124, 58, 237, .22);
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
  }

  .hf-chip:active {
    transform: translateY(1px) scale(.98);
  }

  /* tiles */
  .hf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 576px) {
    .hf-grid {
      grid-template-columns: 1fr;
    }
  }

  .hf-tile {
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
      linear-gradient(135deg, var(--panel), var(--panel-2));
    border: 1px solid rgba(167, 139, 250, .18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: transform .18s ease, box-shadow .2s ease;
  }

  .hf-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(90, 54, 200, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  .hf-tile-title {
    display: block;
    font-weight: 800;
    color: #fff;
  }

  .hf-tile-sub {
    display: block;
    color: var(--muted);
    font-size: .95rem;
  }

  /* scroll reveal (simple, no lib) */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* optional: re-use your Wneo-card tilt affordances on larger screens */
  @media (hover:hover) {
    .Wneo-card:hover {
      transform: translateY(-2px);
    }
  }


  /**/
  /* === HERO: fill viewport and center === */
  .hero,
  #hero,
  .section-hero {
    position: relative;
    min-height: 90vh;
    /* Fill the page */
    display: grid;
    place-items: center;
    /*
  padding-top: clamp(60px, 8vh, 120px);
  padding-bottom: clamp(36px, 6vh, 72px);*/
  }

  /* Scroll indicator */
  .scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: clamp(100px, 100vh, 170px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    transition: opacity .2s ease, transform .2s ease;
    animation: scrollPulse 1.8s ease-in-out infinite;
  }

  .scroll-indicator:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }

  @keyframes scrollPulse {

    0%,
    100% {
      transform: translateX(-50%) translateY(0);
      opacity: .8;
    }

    50% {
      transform: translateX(-50%) translateY(8px);
      opacity: 1;
    }
  }

  /* === HoloFusion title: same motion vibe as blob; gradient + float === */
  .hf-title {
    margin: 6px 0 0;
    font-weight: 400;
    font-size: clamp(32px, 3.4vw, 56px);
    line-height: 1.02;
  }

  .hf-title-gradient {
    background: linear-gradient(120deg,
        #d6b4fe 0%,
        #a78bfa 20%,
        #7c3aed 45%,
        #c93cff 70%,
        #d6b4fe 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 10px 24px rgba(124, 58, 237, .25);
    animation: hfHue 14s linear infinite, hfFloat 16s ease-in-out infinite;
  }

  @keyframes hfHue {
    0% {
      background-position: 0% 50%;
      filter: hue-rotate(0deg);
    }

    50% {
      background-position: 100% 50%;
      filter: hue-rotate(12deg);
    }

    100% {
      background-position: 0% 50%;
      filter: hue-rotate(0deg);
    }
  }

  /* Connector under the title to "merge" the head with content */
  .hf-connector {
    display: block;
    width: min(220px, 40%);
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .65), rgba(201, 60, 255, .7), transparent);
    filter: drop-shadow(0 8px 16px rgba(124, 58, 237, .35));
    animation: hfFloat 16s ease-in-out infinite;
  }

  /* Blob already exists; keep same animation name to sync with title */
  @keyframes hfFloat {
    0% {
      transform: translateY(0) scale(1);
    }

    50% {
      transform: translateY(-16px) scale(1.06);
    }

    100% {
      transform: translateY(0) scale(1);
    }
  }

  /* === Flat "dust" circles (no blur) === */
  .hf-dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    /* behind section content, above page bg */
    overflow: hidden;
  }

  .hf-dust .dot {
    position: absolute;
    width: var(--s, 8px);
    height: var(--s, 8px);
    border-radius: 50%;
    background: rgba(167, 139, 250, .18);
    /* flat */
    opacity: .55;
    animation: dustDrift var(--t, 12s) ease-in-out infinite;
  }

  @keyframes dustDrift {

    0%,
    100% {
      transform: translateY(0) translateX(0);
    }

    50% {
      transform: translateY(-10px) translateX(6px);
    }
  }

  /* === Stronger merge between head + card group === */
  .hf-section {
    position: relative;
    isolation: isolate;
  }

  .hf-section .Wneo-card {
    position: relative;
  }

  .hf-section .Wneo-card::before {
    content: "";
    position: absolute;
    inset: -1px -1px -1px -1px;
    border-radius: inherit;
    background: radial-gradient(120% 50% at 10% 0%,
        rgba(124, 58, 237, .16),
        rgba(201, 60, 255, .08) 40%,
        transparent 70%);
    z-index: -1;
    animation: hfFloat 16s ease-in-out infinite;
  }

  /* Reveal keeps working; give it a smidge faster start under the head */
  .hf-head+.row .reveal {
    transition-delay: .05s;
  }


  /*Animation*/
  /* === HoloFusion card: hover pop-over + scale + type growth === */
  .hf-card {
    position: relative;
    /* create a stacking context we can raise */
    transform-origin: left center;
    /* scale from the inside edge */
    will-change: transform;
    transition:
      transform .35s cubic-bezier(.22, .8, .26, .99),
      filter .35s ease,
      z-index .05s linear;
  }

  /* allow the scaled card to overlap its grid column cleanly */
  .hf-section .row>[class*="col-"] {
    overflow: visible;
  }

  .hf-card .Wneo-card {
    z-index: 1 !important;
  }

  .hf-card .Wneo-card:hover {
    z-index: 999 !important;
  }

  /* images sit below by default; the card rises above them on hover */
  .swap-stack {
    position: relative;
    z-index: 1;
  }

  .hf-card:hover {
    transform: translateY(-2px) scale(1.12);
    /* subtle lift + scale */
    z-index: 50;
    /* above .swap-stack children (z up to 3) */
    filter: none;
  }

  /* grow body text a touch on hover (without being jarring) */
  .hf-card .card-sub {
    transition: font-size .25s ease, line-height .25s ease;
  }

  .hf-card:hover .card-sub {
    font-size: 1.08rem;
    /* adjust to taste */
    line-height: 1.7;
  }

  /* respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {

    .hf-card,
    .hf-card .card-sub {
      transition: none;
    }

    .hf-card:hover {
      transform: none;
    }
  }


  /* === Scroll reveal on containers (won't fight tilt) === */
  .reveal-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .26, .99);
    will-change: transform, opacity;
  }

  .reveal-item.from-left {
    transform: translateX(-42px);
  }

  .reveal-item.from-right {
    transform: translateX(42px);
  }

  .reveal-item.is-visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-item {
      transition: none;
      transform: none;
    }
  }

  /* Images stack higher by default */
  .swap-stack {
    position: relative;
    z-index: 5;
  }

  .swap-stack .stack-img {
    z-index: 6;
  }

  /* Cards live below images by default */
  .hf-card,
  .Wneo-card {
    position: relative;
    z-index: 1;
  }

  /* Reveal wrappers must be able to rise when a hovered card is inside */
  .reveal,
  .reveal-item {
    position: relative;
    z-index: 1;
    /* below image stacks by default */
    overflow: visible;
    /* ensure scaled card isn't clipped */
  }

  /* Modern CSS: if a hovered card is inside, raise the wrapper above images */
  .reveal:has(.Wneo-card:hover),
  .reveal:has(.hf-card:hover),
  .reveal-item:has(.Wneo-card:hover),
  .reveal-item:has(.hf-card:hover) {
    z-index: 9999;
  }


  /*contact us*/
  /* Contact: field visuals (match palette) */
  .contact-section .form-control {
    border-radius: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, .18);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  }

  .contact-section .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, .35);
    outline: none;
  }

  .contact-section label {
    font-weight: 600;
    color: var(--muted);
  }

  /* ========== Contact enter animation ========== */
  .contact-enter {
    /* do NOT apply transforms to ancestors to avoid creating a blocking stacking context */
    contain: layout paint;
    /* keep it cheap for the browser */
  }

  .contact-enter [data-anim] {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    filter: blur(6px);
    will-change: transform, opacity, filter;
    transition:
      opacity .6s cubic-bezier(.22, .8, .26, .99),
      transform .6s cubic-bezier(.22, .8, .26, .99),
      filter .6s ease;
    transition-delay: var(--d, 0s);
  }

  .contact-enter.is-visible [data-anim] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .contact-enter [data-anim] {
      transition: opacity .3s ease;
      transform: none;
      filter: none;
    }
  }

  .contact-section.container {
    max-width: 1600px;
    /* or whatever width you prefer */
  }

  .pad.nno {
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 30px !important;
  }

  #contact .Wneo-card {
    padding: 18px 20px !important;
    padding-bottom: 22px !important;
  }

  #contact .row.g-3 {
    row-gap: 0.75rem;
    /* default is 1rem */
  }

  #contact .form-control {
    padding: 10px;
    /* default 14px */
  }

  /*gallery */
  html,
  body {
    height: 100%
  }

  body.gal {
    margin: 0;
    background: radial-gradient(1200px 700px at 70% -150px, rgba(124, 58, 237, .12), transparent 60%), var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .container2 {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 16px;
  }

  .pg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-bottom: 12px;
  }

  .project-title {
    font-weight: 500;
    letter-spacing: .2px;
    color: var(--text);
    font-size: clamp(22px, 2.2vw, 34px);
    margin: 0;
  }

  .back-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #e9e4ff;
    text-decoration: none;
    background: radial-gradient(100% 100% at 70% 30%, rgba(167, 139, 250, .25), rgba(124, 58, 237, .15) 50%, rgba(124, 58, 237, .06));
    border: 1px solid rgba(167, 139, 250, .35);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 10px 24px rgba(124, 58, 237, .25);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(124, 58, 237, .35);
  }

  .back-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(198, 156, 255, .35);
  }

  .project-description {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 20px;
  }


  .masonry {
    column-gap: 16px;
  }

  .masonry {
    column-count: 3;
  }

  @media (max-width: 1024px) {
    .masonry {
      column-count: 2;
    }
  }

  @media (max-width: 640px) {
    .masonry {
      column-count: 1;
    }
  }

  .tile {
    break-inside: avoid;
    margin: 0 0 16px;
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }

  .tile img,
  .tile video {
    display: block;
    width: 100%;
    height: auto;
  }

  .tile .caption {
    padding: 10px 12px;
    font-size: .95rem;
    color: #d8d6f6;
  }


  .visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .mb-0 {
    margin-bottom: 0
  }

  .mb-2 {
    margin-bottom: .5rem
  }

  .mb-3 {
    margin-bottom: 1rem
  }

  .mb-4 {
    margin-bottom: 1.5rem
  }

  /* ===== Project Type (select) overrides ===== */
  /* These forceful overrides are placed at the end of main.css.
       Bootstrap is loaded after main.css in contact.html, so we use
       !important to ensure these styles take effect without changing
       stylesheet order. If you later move this file after Bootstrap,
       you can remove the !important flags. */
  #contact select.form-select {
    background: linear-gradient(180deg, #2c184a, #1b0f2e) !important;
    color: #f6f3ff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.45) !important;
    padding-right: 2.5rem !important;
    /* room for custom arrow */
    border-radius: 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 1.2em !important;
  }

  /* white caret using inline SVG - encoded */
  #contact select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23ffffff' d='M7 10L0 0h14z'/%3E%3C/svg%3E") !important;
  }

  #contact select.form-select:focus {
    border-color: #9a7bff !important;
    box-shadow: 0 0 0 0.25rem rgba(154, 123, 255, 0.18) !important;
    outline: none !important;
  }

  /* Option styling (note: browser support varies) */
  #contact select.form-select option {
    background: #24124d !important;
    color: #e9e4ff !important;
  }

  /* ===== Mneo (duplicate of Wneo) ===== */
  /* These rules mirror the Wneo-card styles but for Mneo-card selectors */
  .Mneo-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0)),
      linear-gradient(135deg, var(--panel), var(--panel-2));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: transform .35s ease, box-shadow .35s ease;
    padding: 25px 30px !important;
    padding-bottom: 35px !important;
  }

  .Mneo-card {
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform .15s ease, box-shadow .35s ease;
  }

  .Mneo-card:hover {
    /*transform: translateY(-4px);*/
    box-shadow: 0 20px 50px rgba(90, 54, 200, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* Glow blob */
  .Mneo-card::before {
    content: "";
    position: absolute;
    inset: auto auto -40% -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(closest-side, rgba(170, 110, 255, .35), transparent 70%);
    filter: blur(40px);
    transform: rotate(-8deg);
    pointer-events: none;
  }

  .Mneo-card .content {
    position: relative;
    z-index: 2;
  }

  /* hf-section variants */
  .hf-section .Mneo-card {
    position: relative;
  }

  .hf-section .Mneo-card::before {
    content: "";
    position: absolute;
    inset: -1px -1px -1px -1px;
    border-radius: inherit;
    background: radial-gradient(120% 50% at 10% 0%,
        rgba(124, 58, 237, .16),
        rgba(201, 60, 255, .08) 40%,
        transparent 70%);
    z-index: -1;
    animation: hfFloat 16s ease-in-out infinite;
  }

  /* hf-card variants */
  .hf-card .Mneo-card {
    z-index: 1 !important;
  }

  .hf-card .Mneo-card:hover {
    z-index: 999 !important;
  }

  /* optional: re-use tilt affordances */
  @media (hover:hover) {
    .Mneo-card:hover {
      transform: translateY(-2px);
    }
  }

  /* allow the scaled card to overlap its grid column cleanly for Mneo */
  .hf-section .row>[class*="col-"] .Mneo-card {
    overflow: visible;
  }


  /* video */
 
  /* شيل زر التشغيل/الإيقاف */
.custom-video::-webkit-media-controls-play-button {
    display: none !important;
}

/* شيل الشريط الزمني */
.custom-video::-webkit-media-controls-timeline {
    display: none !important;
}

/* شيل الوقت (الحالي والمتبقي) */
.custom-video::-webkit-media-controls-current-time-display,
.custom-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}




  video::-webkit-media-controls-volume-slider-container {
    display: block !important;
  }


  video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, transparent) !important; }