:root {
      --bg:   #050509;
      --surf: #0c0c14;
      --bdr:  rgba(255,255,255,0.07);
      --tx:   #e8e8ee;
      --mt:   #7a7a8c;
      --ac:   #ff6b3d;
      
      --ac2:  #e8b86d;
      --glow: rgba(255,107,61,0.13);
      --fd:   'Syne', sans-serif;
      --fb:   'DM Sans', sans-serif;
      --rad:  14px;
      --tr:   0.28s cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--tx);
      font-family: var(--fb);
      font-size: 15px;
      line-height: 1.65;
      overflow-x: hidden;
      cursor: none;
    }
    body::after {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.025; pointer-events: none; z-index: 9000;
    }
    a { color: var(--tx); text-decoration: none; }
    a:hover { color: var(--ac); }

    /* ── Cursor ── */
    #cursor { position:fixed;width:8px;height:8px;background:var(--ac);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .18s,height .18s; }
    #cursor-ring { position:fixed;width:30px;height:30px;border:1px solid rgba(255,107,61,.32);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .14s,height .14s; }

    #particles-js { position:fixed;inset:0;z-index:0; }
    .z1 { position:relative;z-index:1; }
    .sec { padding:80px 0; }

    /* ── NAVBAR ── */
    .navbar { background:rgba(5,5,9,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr);font-family:var(--fd);padding:.55rem 0; }
    .navbar-brand { font-weight:800;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,#fff 40%,var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
    .nav-link { font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mt)!important;padding:.38rem .55rem!important;transition:color var(--tr);cursor:none; }
    .nav-link:hover { color:var(--tx)!important; }

    /* ── BUTTONS ── */
    .btn-primary-soft, .btn-ghost { font-family:var(--fd);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;padding:.58rem 1.4rem;border-radius:999px;border-width:1px;cursor:none;transition:all var(--tr); }
    .btn-primary-soft { background:var(--ac);border-color:var(--ac);color:#050509; }
    .btn-primary-soft:hover { background:#ff8560;border-color:#ff8560;color:#050509;transform:translateY(-1px);box-shadow:0 5px 18px var(--glow); }
    .btn-ghost { background:transparent;border-color:rgba(255,255,255,.2);color:var(--tx); }
    .btn-ghost:hover { border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);color:#fff;transform:translateY(-1px); }

    /* ── SECTION LABELS & HEADINGS ── */
    .sec-label { display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ac);margin-bottom:10px; }
    .sec-label::before { content:'';display:inline-block;width:18px;height:1px;background:var(--ac); }
    .sec-heading { font-family:var(--fd);font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:700;line-height:1.2;letter-spacing:-.02em; }
    .sec-body { font-size:.87rem;color:var(--mt);line-height:1.78;max-width:520px; }

    /* ── HERO ── */
    .parallax-hero { position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background-image:url("assets/hero-bg.jpg");background-size:cover;background-position:center;background-attachment:fixed; }
    .parallax-hero::before { content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,9,.93) 0%,rgba(5,5,9,.5) 55%,rgba(5,5,9,.86) 100%);pointer-events:none; }
    .hero-inner { position:relative;z-index:2;padding-top:76px; }

    .hero-pill { display:inline-flex;align-items:center;gap:.38rem;padding:.22rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.09);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#999;margin-bottom:.9rem;background:rgba(255,255,255,.02); }
    .hero-pill-dot { width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 7px var(--ac);animation:blink 2.2s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

    .hero-subtitle { font-family:var(--fd);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ac);margin-bottom:.5rem; }
    .hero-title { font-family:var(--fd);font-size:clamp(2rem,4vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;text-transform:uppercase; }
    .hero-title .hi { color:var(--ac); }
    .hero-copy { font-size:.87rem;color:#9898aa;line-height:1.8;max-width:420px;margin-top:.9rem; }

    #heroVisualWrapper { border-radius:var(--rad);overflow:hidden;border:1px solid var(--bdr);background:radial-gradient(circle at 20% 0%,#1d1728 0%,#050509 60%);box-shadow:0 18px 50px rgba(0,0,0,.5); }
    #heroVideo { width:100%;display:block;object-fit:cover;min-height:290px; }

    .scroll-hint { position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.18);z-index:10; }
    .scroll-hint-line { width:1px;height:30px;background:linear-gradient(to bottom,rgba(255,107,61,.35),transparent);animation:sh 2.2s infinite; }
    @keyframes sh { 0%,100%{opacity:.3} 50%{opacity:.85} }

    /* ── TOOLS MARQUEE ── */
    .tools-strip { border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:#07070f;padding:11px 0; }
    .tools-label { font-family:var(--fd);font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;color:var(--mt);white-space:nowrap; }
    .marquee { overflow:hidden;white-space:nowrap; }
    .marquee-inner { display:inline-block;padding-left:100%;animation:mq 24s linear infinite; }
    @keyframes mq { from{transform:translateX(0)} to{transform:translateX(-100%)} }
    .tool-pill { display:inline-flex;align-items:center;gap:.38rem;padding:.28rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.09);font-size:.7rem;margin-right:.4rem;color:var(--mt);background:transparent;font-family:var(--fd);letter-spacing:.05em;transition:background var(--tr),color var(--tr),border-color var(--tr); }
    .tool-pill:hover { background:var(--ac);border-color:var(--ac);color:#050509; }
    .tool-dot { width:5px;height:5px;border-radius:50%;background:var(--ac); }

    /* ── STATS STRIP ── */
    .stats-strip { background:#0a0a12;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:40px 0; }
    .stat-number { font-family:var(--fd);font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--tx);line-height:1; }
    .stat-label { font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mt);margin-top:4px;font-family:var(--fd); }
    .stat-divider { width:1px;height:44px;background:var(--bdr); }

    /* ══════════════════════════════════════════
       PI-VISUAL STYLE GALLERY — MAIN ATTRACTION
       ══════════════════════════════════════════ */

    #work { padding: 0; }

    /* Top bar: label + "Full Archive" link */
    .gallery-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 60px 0 32px;
      border-bottom: 1px solid var(--bdr);
      margin-bottom: 0;
    }
    .gallery-topbar .sec-label { margin-bottom: 0; }

    /* Masonry-style CSS columns grid */
    .pi-gallery {
      columns: 3;
      column-gap: 3px;
      line-height: 0; /* removes gaps between inline images */
    }
    @media (max-width: 900px) { .pi-gallery { columns: 2; } }
    @media (max-width: 540px)  { .pi-gallery { columns: 1; } }

    .pi-item {
      break-inside: avoid;
      position: relative;
      overflow: hidden;
      margin-bottom: 3px;
      display: block;
      cursor: none;
    }

    .pi-item img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform .55s cubic-bezier(.4,0,.2,1), filter .55s ease;
      filter: brightness(.96);
    }

    /* Overlay — only appears on hover, fades in */
    .pi-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5,5,9,.68);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.2rem 1.1rem;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .pi-item:hover .pi-overlay { opacity: 1; }
    .pi-item:hover img { transform: scale(1.04); filter: brightness(.88); }

    .pi-overlay-tag {
      font-family: var(--fd);
      font-size: .58rem;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--ac);
      margin-bottom: .28rem;
    }
    .pi-overlay-title {
      font-family: var(--fd);
      font-size: .88rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: .18rem;
    }
    .pi-overlay-client {
      font-size: .68rem;
      color: rgba(255,255,255,.48);
      font-family: var(--fd);
      letter-spacing: .06em;
    }

    /* Glightbox icon dot */
    .pi-item .gl-icon {
      position: absolute;
      top: 1rem; right: 1rem;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,107,61,.18);
      border: 1px solid rgba(255,107,61,.35);
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity .3s ease;
      font-size: .65rem;
      color: var(--ac);
    }
    .pi-item:hover .gl-icon { opacity: 1; }

    /* Load-more button */
    .gallery-load-more {
      text-align: center;
      padding: 42px 0 60px;
      border-top: 1px solid var(--bdr);
    }

    /* ── PROCESS ── */
    #process { background:radial-gradient(ellipse at 80% 50%,#0e0c1b 0%,var(--bg) 65%); }
    .process-card { background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rad);padding:1.4rem 1.3rem;height:100%;position:relative;overflow:hidden;transition:border-color var(--tr),transform var(--tr); }
    .process-card:hover { border-color:rgba(255,107,61,.22);transform:translateY(-3px); }
    .process-card::after { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--ac),transparent);opacity:0;transition:opacity var(--tr); }
    .process-card:hover::after { opacity:1; }
    .process-num { font-family:var(--fd);font-size:.62rem;letter-spacing:.2em;color:var(--ac);margin-bottom:.7rem; }
    .process-icon { font-size:1.3rem;margin-bottom:.5rem; }
    .process-title { font-family:var(--fd);font-size:.84rem;font-weight:700;margin-bottom:.35rem; }
    .process-desc { font-size:.8rem;color:var(--mt);line-height:1.72; }

    /* ── SKILLS ── */
    #skills { background:radial-gradient(ellipse at 100% 100%,#0e0c1a 0%,var(--bg) 60%); }
    .skill-row { margin-bottom:1.1rem; }
    .skill-header { display:flex;justify-content:space-between;margin-bottom:.38rem; }
    .skill-name { font-family:var(--fd);font-size:.76rem;font-weight:600; }
    .skill-pct { font-family:var(--fd);font-size:.7rem;color:var(--ac); }
    .skill-bar { height:2px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden; }
    .skill-fill { height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ac),var(--ac2));width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1); }
    .skill-fill.on { width:var(--w); }
    .soft-pill { display:inline-flex;align-items:center;gap:.3rem;padding:.26rem .8rem;border-radius:999px;border:1px solid var(--bdr);font-size:.68rem;font-family:var(--fd);color:var(--mt);margin:.2rem;transition:all var(--tr); }
    .soft-pill:hover { border-color:var(--ac);color:var(--ac);background:var(--glow); }

    /* ── CLIENTS ── */
    .clients-section { position:relative;padding:68px 0;background-attachment:fixed;background-image:url("assets/clients-bg.jpg");background-size:cover;background-position:center; }
    .clients-section::before { content:'';position:absolute;inset:0;background:rgba(5,5,9,.88); }
    .clients-inner { position:relative;z-index:1; }
    .client-pill { display:inline-flex;align-items:center;padding:.34rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.09);font-size:.74rem;color:#aaa;margin:.22rem;background:rgba(8,8,16,.6);font-family:var(--fd);transition:border-color var(--tr),color var(--tr); }
    .client-pill:hover { border-color:var(--ac);color:var(--ac); }

    /* ── PARALLAX FEATURED PROJECT ── */
    .project-parallax { position:relative;min-height:520px;overflow:hidden;display:flex;align-items:center; }
    .pp-bg { position:absolute;inset:-15%;background-image:url("assets/11.jpg");background-size:cover;background-position:center;background-attachment:fixed;z-index:0; }
    .pp-bg::after { content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,9,0.90) 0%,rgba(5,5,9,0.60) 55%,rgba(5,5,9,0.82) 100%); }
    .pp-content { position:relative;z-index:2;width:100%; }
    .pp-pill { padding:.22rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);font-family:var(--fd);display:inline-block; }

    /* ── EXPERIMENTAL CTA ── */
    #experimental { position:relative;min-height:52vh;background-image:url("assets/hero-bg.jpg");background-attachment:fixed;background-size:cover;background-position:center;display:flex;align-items:center; }
    #experimental::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,5,9,.96) 0%,rgba(5,5,9,.76) 50%,rgba(5,5,9,.94) 100%); }
    .exp-inner { position:relative;z-index:2;text-align:center; }
    .exp-title { font-family:var(--fd);font-size:clamp(1.7rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:.9rem; }
    .exp-title span { color:var(--ac); }
    .exp-desc { font-size:.84rem;color:#888;max-width:460px;margin:0 auto 1.6rem;line-height:1.82; }
    .exp-tags { display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-bottom:1.8rem; }
    .exp-tag { padding:.24rem .72rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mt);font-family:var(--fd); }

    /* ── ABOUT / CONTACT CARDS ── */
    #about { background:var(--bg); }
    #contact { background:var(--bg); }
    .card-dark { background:radial-gradient(circle at top,#131020 0%,#050509 55%);border-radius:var(--rad);border:1px solid var(--bdr);padding:1.5rem 1.6rem; }

    /* ── FORM ── */
    .form-control, .form-select { background:rgba(255,255,255,.03)!important;border:1px solid var(--bdr)!important;color:var(--tx)!important;border-radius:9px!important;font-size:.82rem;padding:.5rem .8rem;transition:border-color var(--tr); }
    .form-control:focus, .form-select:focus { border-color:var(--ac)!important;box-shadow:0 0 0 3px var(--glow)!important;outline:none; }
    .form-select option { background:#0d0d18; }
    .form-label { font-family:var(--fd);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);margin-bottom:.32rem; }

    /* ── FOOTER ── */
    footer { border-top:1px solid var(--bdr);color:var(--mt);font-size:.72rem;font-family:var(--fd); }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease; }
    .reveal.on { opacity:1;transform:none; }
    .rd1 { transition-delay:.08s; }
    .rd2 { transition-delay:.16s; }
    .rd3 { transition-delay:.24s; }

    /* ── MOBILE ── */
    @media (max-width:767px) {
      body { cursor:auto; }
      #cursor, #cursor-ring { display:none; }
      .parallax-hero, .clients-section, #experimental { background-attachment:scroll; }
      .pp-bg { background-attachment:scroll; }
      .stat-divider { display:none; }
    }

    /* GLightbox overrides */
    .glightbox-clean .gslide-description { background: #050509; }
    .glightbox-clean .gdesc-inner { padding: 1rem 1.4rem; }
    
    .parallax-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* FULL BACKGROUND VIDEO */
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* DARK OVERLAY */
.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 2;
}

/* KEEP CONTENT ABOVE VIDEO */
.hero-inner {
  position: relative;
  z-index: 3;
}

/* OPTIONAL: REMOVE VIDEO CONTROLS IF STILL SHOWING */
#heroVideo::-webkit-media-controls {
  display: none !important;
}
/* DROPDOWN BASE */
.work-menu {
  position: relative;
}

.work-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  display: flex;
  gap: 30px;
  padding: 25px;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 0.4s ease;
  z-index: 999;
}

/* SHOW ON HOVER */
.work-menu:hover .work-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* LEFT LINKS */
.work-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.work-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.3s;
}

.work-links a:hover {
  color: #ff4c60;
  transform: translateX(5px);
}

/* RIGHT PREVIEW */
.work-preview {
  width: 300px;
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* VIDEO */
.work-preview video,
.work-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* HIDE IMAGE WHEN VIDEO LOADS */
#menuVideo {
  z-index: 2;
}

#menuImage {
  z-index: 1;
}
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 999;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}
.z1{
    justify-content: center;
}
.ce{
        justify-content: center;

}
.ourser:hover{
    color:var(--tx);
}