*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#040608;--ink2:#080c12;--ink3:#0d1420;
  --cyan:#00d4ff;--cyan2:#00a8cc;
  --purple:#9d4dff;--purple2:#6b1fcc;
  --gold:#f0b429;
  --silver:#c0c8d8;
  --white:#f0f4ff;
  --glass:rgba(255,255,255,.028);
  --r:14px;
  --out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:'Syne',sans-serif;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:auto}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:var(--cyan2);border-radius:2px}
::selection{background:rgba(0,212,255,.2);color:var(--white)}

/* CURSOR */
/* .cur-dot{position:fixed;width:5px;height:5px;background:var(--cyan);border-radius:50%;z-index:99999;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:left,top;transition:width .15s,height .15s}
.cur-ring{position:fixed;width:34px;height:34px;border:1px solid rgba(0,212,255,.45);border-radius:50%;z-index:99998;pointer-events:none;transform:translate(-50%,-50%);will-change:left,top;transition:width .3s var(--spring),height .3s var(--spring),border-color .3s}
.cur-dot.h{width:10px;height:10px}.cur-ring.h{width:52px;height:52px;border-color:rgba(0,212,255,.85)}
.cur-trail{position:fixed;border-radius:50%;pointer-events:none;z-index:99995;transform:translate(-50%,-50%);will-change:left,top}
.prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--gold));z-index:9991;width:0%;box-shadow:0 0 8px var(--cyan);transition:width .1s linear} */

/* LOADER */
#loader{position:fixed;inset:0;z-index:99990;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1.2s ease,visibility 1.2s ease}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
#lcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lbox{position:relative;z-index:2;text-align:center;pointer-events:none}
.lbrand{font-family:'Orbitron',sans-serif;font-size:clamp(32px,5vw,68px);font-weight:900;letter-spacing:14px;color:var(--cyan);text-shadow:0 0 40px rgba(0,212,255,.9),0 0 80px rgba(0,212,255,.4);opacity:0;transform:translateY(18px) scale(.96);transition:all 1.1s var(--out)}
.lsub{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:5px;color:rgba(255,255,255,.38);text-transform:uppercase;margin-top:14px;opacity:0;transition:opacity .8s ease .5s}
.lbar{width:180px;height:1px;background:rgba(255,255,255,.07);margin:28px auto 0;overflow:hidden;position:relative}
.lbar-fill{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:translateX(-100%);animation:lbarA 2s ease .4s forwards}
@keyframes lbarA{to{transform:translateX(200%)}}
.lcount{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:3px;color:rgba(0,212,255,.5);margin-top:14px;opacity:0;animation:fadeEl .5s ease .6s forwards}
@keyframes fadeEl{to{opacity:1}}

/* GRAIN / VIG */
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.03;background-size:140px 140px}
.vig{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse 85% 85% at 50% 45%,transparent 28%,rgba(2,1,8,.94) 100%)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:9000;padding:0 5%;height:70px;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
nav.scrolled{background:rgba(4,6,8,.9);backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,212,255,.07);height:58px}
.nav-logo{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:900;letter-spacing:6px;color:var(--cyan);text-shadow:0 0 20px rgba(0,212,255,.5);text-decoration:none;cursor:none}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(240,244,255,.45);text-decoration:none;transition:color .3s;position:relative;cursor:none}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:width .3s}
.nav-links a:hover{color:var(--cyan)}.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:none;cursor:none;color:var(--cyan);font-size:22px;line-height:1}

/* HERO */
#hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;width:100%;height:100%}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.2)}
.hero-over{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 65% 75% at 50% 50%,rgba(0,212,255,.04) 0%,transparent 65%),linear-gradient(180deg,rgba(4,6,8,.35) 0%,rgba(4,6,8,.05) 25%,rgba(4,6,8,.05) 70%,rgba(4,6,8,.88) 100%)}
.hero-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.014) 3px,rgba(0,0,0,.014) 4px)}
.hero-content{position:relative;z-index:3;text-align:center;padding:0 24px;max-width:1100px}
.hero-eye{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:6px;text-transform:uppercase;color:var(--cyan);margin-bottom:28px;opacity:0;animation:fup .8s var(--out) 1s forwards;display:flex;align-items:center;justify-content:center;gap:14px}
.hero-eye::before,.hero-eye::after{content:'';display:block;width:36px;height:1px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.hero-title{font-family:'Orbitron',sans-serif;font-size:clamp(2.2rem,6.5vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-.01em;margin-bottom:0}
.w{display:inline-block;overflow:hidden}
.wi{display:inline-block;opacity:0;transform:translateY(100%)}
.l1 .wi{animation:wrev .8s var(--out) 1.1s forwards}
.l2 .wi{animation:wrev .8s var(--out) 1.25s forwards}
.l3 .wi{animation:wrev .8s var(--out) 1.4s forwards}
@keyframes wrev{to{opacity:1;transform:none}}
@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gt{background:linear-gradient(135deg,var(--white) 0%,var(--cyan) 40%,var(--purple) 80%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px rgba(0,212,255,.25))}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeEl 1s ease 2s forwards}
.hero-scroll span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:4px;color:rgba(0,212,255,.38);text-transform:uppercase}
.scrl{width:1px;height:44px;background:linear-gradient(to bottom,rgba(0,212,255,.4),transparent);animation:scrlA 2s ease-in-out infinite}
@keyframes scrlA{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.45);opacity:.35}}

.tpn-banner{
  position:relative;
  background:linear-gradient(90deg,var(--ink) 0%,#111820 50%,var(--ink) 100%);
  border-top:1px solid rgba(192,200,216,.07);
  border-bottom:1px solid rgba(192,200,216,.07);
  overflow:hidden;
  padding:0px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tpn-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(192,200,216,.04) 0%, transparent 70%);
  pointer-events:none;
}
.tpn-logo-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tpn-logo-img{
  height:auto;
  width:auto;
  opacity:0;
  filter:grayscale(1) brightness(1.4);
  animation:tpnFadeIn 1.8s cubic-bezier(.16,1,.3,1) .4s forwards;
  transition:filter .5s, transform .5s;
}
.tpn-logo-img:hover{
  filter:grayscale(.2) brightness(1.6);
  transform:scale(1.04);
}
@keyframes tpnFadeIn{
  0%{opacity:0;transform:scale(.96) translateY(6px)}
  100%{opacity:.82;transform:scale(1) translateY(0)}
}
.tpn-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(192,200,216,.18) 50%,transparent 70%);
  background-size:200% 100%;
  animation:tpnShim 4s ease-in-out 1.8s infinite;
  pointer-events:none;
  border-radius:4px;
}
@keyframes tpnShim{
  0%{background-position:200% 0;opacity:0}
  10%{opacity:1}
  50%{background-position:-200% 0;opacity:1}
  60%,100%{background-position:-200% 0;opacity:0}
}

/* SECTION BASE */
.sec{padding:110px 5%;position:relative}
.sec-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:5px;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.sec-tag::before{content:'';display:block;width:28px;height:1px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.sec-h{font-family:'Orbitron',sans-serif;font-size:clamp(1.9rem,3.8vw,3.3rem);font-weight:700;line-height:1.1;margin-bottom:18px}
.sec-h .acc{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-b{color:rgba(200,215,240,.42);font-size:1rem;line-height:1.9;max-width:580px;font-weight:300}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--out),transform .8s var(--out)}
.reveal.vis{opacity:1;transform:none}

/* =============================================
   VFX BREAKDOWN — VIDEO SLIDERS
   ============================================= */
#vfx{background:var(--ink3);position:relative;overflow:hidden}
#vfx::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 40% at 0% 50%,rgba(157,77,255,.04) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 100% 50%,rgba(0,212,255,.035) 0%,transparent 60%);pointer-events:none}
.vfx-hw{max-width:1200px;margin:0 auto 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.vfx-note{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;color:rgba(0,212,255,.28);text-transform:uppercase;line-height:2}
.comp-stack{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:3px}
.comp{position:relative;background:var(--glass);border:1px solid rgba(255,255,255,.04);border-radius:var(--r);overflow:hidden;transition:border-color .4s}
.comp:hover{border-color:rgba(0,212,255,.18)}
.comp-head{padding:26px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.04);flex-wrap:wrap}
.comp-title{font-size:1.05rem;font-weight:600;letter-spacing:.02em}
.comp-meta{display:flex;gap:22px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(200,215,240,.28);flex-wrap:wrap}
.comp-meta span{display:flex;align-items:center;gap:6px}
.comp-meta span::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}

/* Video slider — replaces image slider */
.ba{position:relative;width:100%;aspect-ratio:21/8;overflow:hidden;cursor:ew-resize;user-select:none;background:#000}
@media(max-width:600px){.ba{aspect-ratio:16/9}}

/* Both videos fill the container */
.ba-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.ba-video-before{z-index:1}
/* After video is clipped from the left */
.ba-video-after{z-index:2;clip-path:inset(0 50% 0 0)}

/* Placeholder overlay shown while videos are not available */
.ba-placeholder{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a1020 0%,#0d1828 50%,#0a1020 100%)}
.ba-ph-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:4px;color:rgba(0,212,255,.18);text-transform:uppercase}

.ba-handle{position:absolute;top:0;left:50%;z-index:4;width:2px;height:100%;background:linear-gradient(180deg,var(--cyan),var(--purple));transform:translateX(-50%);box-shadow:0 0 18px rgba(0,212,255,.55);cursor:ew-resize}
.ba-handle::before{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--cyan2),var(--purple2));border:3px solid rgba(4,6,8,.85);line-height:50px;text-align:center;font-size:17px;color:#fff;font-weight:700;box-shadow:0 0 28px rgba(0,212,255,.55)}
.ba-lbl{position:absolute;top:18px;z-index:5;padding:4px 14px;background:rgba(4,6,8,.75);backdrop-filter:blur(10px);border-radius:3px;font-weight:700;font-size:9px;letter-spacing:3px;text-transform:uppercase;border:1px solid;font-family:'DM Mono',monospace}
.ba-bl{left:18px;color:#ff6b6b;border-color:rgba(255,107,107,.35)}.ba-al{right:18px;color:var(--cyan);border-color:rgba(0,212,255,.35)}

.comp-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.03)}
@media(max-width:640px){.comp-foot{grid-template-columns:repeat(2,1fr)}}
.comp-spec{padding:14px 18px;background:var(--ink3)}
.comp-sl{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.22);text-transform:uppercase;margin-bottom:5px;font-family:'DM Mono',monospace}
.comp-sv{font-size:.82rem;color:rgba(200,215,240,.65);font-weight:500}

/* SHOWREEL */
#showreel{position:relative;background:var(--ink);overflow:hidden}
.sr-wrap{position:relative;width:100%}
.sr-video{width:100%;display:block;filter:brightness(.45) saturate(1.15) contrast(1.08)}
.sr-over{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(4,6,8,.65) 0%,rgba(4,6,8,.06) 18%,rgba(4,6,8,.06) 78%,rgba(4,6,8,.75) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sr-scan{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.012) 3px,rgba(0,0,0,.012) 4px)}
.sr-corner{position:absolute;width:32px;height:32px;border-color:rgba(0,212,255,.4);border-style:solid;z-index:4;pointer-events:none;transition:all .7s var(--out)}
.sr-tl{top:22px;left:22px;border-width:2px 0 0 2px}.sr-tr{top:22px;right:22px;border-width:2px 2px 0 0}
.sr-bl{bottom:22px;left:22px;border-width:0 0 2px 2px}.sr-br{bottom:22px;right:22px;border-width:0 2px 2px 0}
.sr-wrap.active .sr-tl{top:14px;left:14px}.sr-wrap.active .sr-tr{top:14px;right:14px}
.sr-wrap.active .sr-bl{bottom:14px;left:14px}.sr-wrap.active .sr-br{bottom:14px;right:14px}
.sr-hud{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.sr-hud-l,.sr-tc{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;color:rgba(0,212,255,.3);text-transform:uppercase}
.sr-rec{display:flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;color:rgba(255,90,90,.45)}
.sr-rec::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff4444;box-shadow:0 0 7px #ff4444;animation:recblink 1.4s ease-in-out infinite;flex-shrink:0}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.15}}
.sr-pbar{position:absolute;bottom:0;left:0;right:0;z-index:4;height:2px;background:rgba(255,255,255,.06)}
.sr-pfill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 8px var(--cyan);width:0%}

/* Sound toggle button */
.sr-sound-btn{
  position:absolute;bottom:24px;right:26px;z-index:5;
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.3);
  display:flex;align-items:center;justify-content:center;
  cursor:none;backdrop-filter:blur(10px);
  transition:all .3s;font-size:16px;color:var(--cyan);
}
.sr-sound-btn:hover{background:rgba(0,212,255,.18);border-color:var(--cyan);box-shadow:0 0 22px rgba(0,212,255,.3)}
.sr-sound-btn.on{border-color:rgba(240,180,40,.6);background:rgba(240,180,40,.08);color:var(--gold)}

/* =============================================
   WORKS — BENTO GRID
   ============================================= */
#works{background:var(--ink2)}
.works-h{max-width:1200px;margin:0 auto 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}

/* Filter pills */
.works-filters{max-width:1200px;margin:0 auto 36px;display:flex;gap:8px;flex-wrap:wrap}
.wf-btn{
  padding:6px 18px;border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;color:rgba(200,215,240,.38);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;
  text-transform:uppercase;cursor:none;transition:all .3s;
}
.wf-btn:hover{border-color:rgba(0,212,255,.3);color:rgba(0,212,255,.7)}
.wf-btn.active{
  background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.45);
  color:var(--cyan);box-shadow:0 0 16px rgba(0,212,255,.12);
}

/* Bento grid — poster rasio 2:3, tidak terpotong */
.works-grid{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  /* Tidak pakai grid-auto-rows: biarkan tinggi otomatis mengikuti konten */
  align-items:start;
}

/* Setiap kartu punya inner wrapper yang menjaga rasio 2:3 */
.wc{position:relative;overflow:hidden;cursor:none;border-radius:4px;background:var(--ink3)}
.wc-inner{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}
.wc img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center top;
  transition:transform .8s,filter .5s;
  filter:grayscale(.2) brightness(.8);
  display:block;
  background:var(--ink3);
}
.wc:hover img{transform:scale(1.04);filter:grayscale(0) brightness(1)}

.wc-over{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,6,8,.95) 100%);opacity:0;transition:opacity .4s;z-index:2}
.wc:hover .wc-over{opacity:1}
.wc-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.07) 0%,transparent 50%,rgba(157,77,255,.07) 100%);opacity:0;transition:opacity .4s;z-index:1}
.wc:hover .wc-glow{opacity:1}
.wc-border{position:absolute;inset:0;border:1px solid rgba(0,212,255,.0);transition:border-color .4s;pointer-events:none;z-index:3}
.wc:hover .wc-border{border-color:rgba(0,212,255,.32)}
.wc-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:16px;z-index:4;
  transform:translateY(6px);transition:transform .4s var(--out);
}
.wc:hover .wc-info{transform:none}
.wc-t{font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:3px;text-shadow:0 0 10px var(--cyan)}
.wc-s{font-size:8px;letter-spacing:2.5px;color:var(--cyan);text-transform:uppercase;font-family:'DM Mono',monospace}
.wc-year{font-size:8px;letter-spacing:2px;color:rgba(200,215,240,.35);font-family:'DM Mono',monospace;margin-top:2px}

/* Hero card: 2 kolom, rasio landscape */
.wc.hero-card{grid-column:span 2}
.wc.hero-card .wc-inner{aspect-ratio:3/2}
.wc.hero-card .wc-t{font-size:1.05rem}

/* Wide card: 2 kolom, rasio landscape */
.wc.wide-card{grid-column:span 2}
.wc.wide-card .wc-inner{aspect-ratio:16/9}

/* Hidden by filter */
.wc.filtered-out{opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .35s,transform .35s}
.wc.filtered-in{opacity:1;pointer-events:auto;transform:scale(1);transition:opacity .35s,transform .35s}

/* ABOUT */
#about{background:var(--ink)}
.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.about-vis{position:relative}
.about-img{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(0,212,255,.09);box-shadow:0 28px 90px rgba(0,0,0,.6)}
.about-img img{width:100%;display:block;transition:transform .8s;filter:saturate(.85) brightness(.88)}
.about-img:hover img{transform:scale(1.04)}
.about-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.055) 0%,transparent 50%,rgba(157,77,255,.055) 100%);pointer-events:none}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tag{padding:5px 14px;border:1px solid rgba(0,212,255,.13);border-radius:3px;font-size:10px;letter-spacing:2px;color:rgba(0,212,255,.55);text-transform:uppercase;font-family:'DM Mono',monospace;transition:all .3s;cursor:none}
.tag:hover{background:rgba(0,212,255,.06);border-color:var(--cyan);color:var(--cyan)}

/* PARTNERS */
#partners{background:var(--ink3);overflow:hidden}
.ptr-wrap{overflow:hidden;position:relative}
.ptr-wrap::before,.ptr-wrap::after{content:'';position:absolute;top:0;z-index:2;width:130px;height:100%;pointer-events:none}
.ptr-wrap::before{left:0;background:linear-gradient(to right,var(--ink3),transparent)}
.ptr-wrap::after{right:0;background:linear-gradient(to left,var(--ink3),transparent)}
.ptr-track{display:flex;gap:72px;align-items:center;animation:marquee 34s linear infinite;width:max-content;padding:28px 0}
.ptr-track:hover{animation-play-state:paused}
.ptr-track img{height:46px;opacity:.28;filter:grayscale(1);transition:all .4s;object-fit:contain;max-width:140px}
.ptr-track img:hover{opacity:.88;filter:grayscale(0);transform:scale(1.14)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CONTACT */
#contact{background:var(--ink)}
.ct-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:80px}
.ct-cta{font-family:'Orbitron',sans-serif;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:700;line-height:1.3;margin:22px 0 38px}
.ct-item{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.044)}
.ct-ico{width:42px;height:42px;border-radius:8px;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.11);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--cyan)}
.ct-lbl{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:4px;font-family:'DM Mono',monospace}
.ct-val{color:rgba(200,215,240,.62);font-size:.92rem}
.ct-val a{color:rgba(200,215,240,.62);text-decoration:none;transition:color .3s}
.ct-val a:hover{color:var(--cyan)}
.ct-socrow{display:flex;gap:10px;margin-top:36px}
.soc{width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:16px;text-decoration:none;transition:all .3s;cursor:none}
.soc:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.06)}
.ct-form{background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.055);border-radius:var(--r);padding:46px;backdrop-filter:blur(18px)}
.fr{margin-bottom:22px}
.fr label{display:block;margin-bottom:7px;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.3);text-transform:uppercase;font-family:'DM Mono',monospace}
.fr input,.fr textarea,.fr select{width:100%;padding:13px 16px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.055);border-radius:6px;color:var(--white);font-family:'Syne',sans-serif;font-size:.9rem;transition:all .3s;outline:none;-webkit-appearance:none}
.fr input:focus,.fr textarea:focus,.fr select:focus{border-color:rgba(0,212,255,.38);background:rgba(0,212,255,.025);box-shadow:0 0 18px rgba(0,212,255,.07)}
.fr input.err,.fr select.err{border-color:rgba(255,90,90,.4)}
.fr select option{background:var(--ink2)}.fr textarea{resize:vertical;min-height:100px}
.fr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fr-submit{width:100%;padding:15px;background:linear-gradient(135deg,var(--cyan2),var(--purple2));border:none;border-radius:6px;color:#fff;font-weight:700;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:none;transition:all .4s;font-family:'DM Mono',monospace}
.fr-submit:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(0,212,255,.32)}

/* FOOTER */
footer{padding:36px 5%;border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--ink)}
.ft-logo{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;letter-spacing:5px;color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.38)}
.ft-copy{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.18)}
.ft-links{display:flex;gap:22px}
.ft-links a{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.22);text-decoration:none;transition:color .3s;cursor:none}
.ft-links a:hover{color:var(--cyan)}

/* MODAL */
.modal-bg{position:fixed;inset:0;z-index:99985;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s;padding:20px}
.modal-bg.open{opacity:1;visibility:visible}
.modal-box{width:100%;max-width:860px;background:var(--ink2);border:1px solid rgba(0,212,255,.14);border-radius:var(--r);overflow:hidden;transform:scale(.93);transition:transform .4s var(--out)}
.modal-bg.open .modal-box{transform:scale(1)}
.modal-h{padding:22px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05)}
.modal-t{font-size:1rem;font-weight:700}
.modal-cl{background:none;border:none;cursor:none;color:rgba(255,255,255,.35);font-size:22px;transition:color .3s;line-height:1}
.modal-cl:hover{color:var(--cyan)}
.modal-body{padding:24px 26px}
.modal-desc{color:rgba(200,215,240,.48);line-height:1.8;margin-bottom:18px;font-weight:300;font-size:.92rem}
.modal-tags{display:flex;flex-wrap:wrap;gap:8px}

/* SCROLL TOP */
.stbtn{position:fixed;bottom:28px;right:28px;z-index:8000;width:44px;height:44px;border-radius:8px;background:rgba(0,212,255,.09);border:1px solid rgba(0,212,255,.22);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:18px;cursor:none;opacity:0;visibility:hidden;transition:all .4s}
.stbtn.show{opacity:1;visibility:visible}
.stbtn:hover{background:rgba(0,212,255,.18);transform:translateY(-3px)}

/* RESPONSIVE */
@media(max-width:920px){
  .nav-links{display:none;position:fixed;inset:0;top:58px;background:rgba(4,6,8,.97);flex-direction:column;align-items:center;justify-content:center;gap:34px}
  .nav-links.open{display:flex}.nav-toggle{display:block}
  .about-grid{grid-template-columns:1fr;gap:48px}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .wc.hero-card{grid-column:span 2}
  .wc.wide-card{grid-column:span 2}
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .vfx-hw{flex-direction:column;align-items:flex-start}
  .fr-row{grid-template-columns:1fr}
  footer{flex-direction:column;text-align:center}.ft-links{justify-content:center}
  .tpn-inner{gap:24px}
}
@media(max-width:540px){
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .wc.hero-card,.wc.wide-card{grid-column:span 2}
  .wc.hero-card .wc-inner{aspect-ratio:3/2}
  .wc.wide-card .wc-inner{aspect-ratio:16/9}
  .ct-form{padding:24px 18px}.sec{padding:80px 5%}
}