:root{--bg:#080b0f;--sf:#0d1117;--sf2:#131920;--bd:rgba(255,255,255,.065);--bd2:rgba(255,255,255,.13);--ac:#00c8ff;--tx:#e8edf2;--tx2:#8899aa;--mt:#3d4f63;--gn:#22d47a;--fn:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;cursor:none}
body{background:var(--bg);color:var(--tx);font-family:var(--fn)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

#loader{position:fixed;inset:0;background:var(--bg);z-index:9800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .7s ease}
#loader.out{opacity:0;pointer-events:none}
.ll{font-size:52px;font-weight:900;font-style:italic;letter-spacing:-.06em;color:var(--ac)}
.ll span{color:#fff}
.lb{width:160px;height:1px;background:var(--bd2);border-radius:1px;overflow:hidden;position:relative}
.lf{position:absolute;left:0;top:0;height:100%;background:var(--ac);width:0%;box-shadow:0 0 8px var(--ac)}
.lp{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.15em}

#dot{position:fixed;width:8px;height:8px;background:var(--ac);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width .18s,height .18s}
#dot.big{width:46px;height:46px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.32)}
#ring{position:fixed;width:44px;height:44px;border:1px solid rgba(0,200,255,.25);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:border-color .2s,width .15s,height .15s;display:flex;align-items:center;justify-content:center}
#ring-lbl{font-family:var(--mono);font-size:9px;color:var(--ac);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .2s;white-space:nowrap}
#ring.has-lbl{width:72px;height:72px;border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.06)}
#ring.has-lbl #ring-lbl{opacity:1}
#pbar{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--ac);z-index:10000;box-shadow:0 0 10px var(--ac)}

nav{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:60px;transition:background .5s}
nav.scrolled{background:rgba(8,11,15,.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--bd)}
.nav-logo{font-size:20px;font-weight:900;font-style:italic;letter-spacing:-.05em;color:var(--ac);text-decoration:none}
.nav-logo span{color:#fff}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{font-size:12px;font-weight:600;color:var(--tx2);text-decoration:none;padding:5px 14px;border-radius:6px;transition:.15s}
.nav-links a:hover{color:var(--tx);background:rgba(255,255,255,.05)}
#admin-btn{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:6px;border:1px solid var(--bd2);background:transparent;color:var(--tx2);cursor:none;transition:.15s}
#admin-btn:hover,#admin-btn.active{background:rgba(0,200,255,.1);border-color:rgba(0,200,255,.3);color:var(--ac)}

/* smooth container is fixed — body scroll drives window.scrollY */
#smooth{position:fixed;top:0;left:0;width:100%;will-change:transform;transform-origin:center top}

#hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

/* matrix canvas behind everything, particle canvas above it */
#mc{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:1}

.hero-c{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 24px;will-change:transform,opacity}

/* hero name — word wrappers use clip-path (NOT overflow:hidden) so descenders show */
.hero-name{font-size:clamp(5rem,14vw,11rem);font-weight:900;font-style:italic;letter-spacing:-.058em;line-height:.88;mix-blend-mode:screen;user-select:none}
.hw{display:inline-block;clip-path:inset(-25% -8% -35% -8%)}
.hc{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.hc.in{transform:translateY(0);opacity:1}
.hc.ac{color:var(--ac)}.hc.dm{color:rgba(255,255,255,.12)}.hsp{display:inline-block;width:.22em}

.hero-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ac);background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);border-radius:100px;padding:5px 16px;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.2s,transform .7s ease 1.2s}
.hero-tag.in{opacity:1;transform:translateY(0)}
.hero-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ac);animation:blink 2s step-end infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-sub{font-size:clamp(14px,1.9vw,17px);color:var(--tx2);line-height:1.8;max-width:440px;white-space:pre-line;opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.4s,transform .7s ease 1.4s}
.hero-sub.in{opacity:1;transform:translateY(0)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.6s,transform .7s ease 1.6s}
.hero-btns.in{opacity:1;transform:translateY(0)}
.hero-stats{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.8s,transform .7s ease 1.8s}
.hero-stats.in{opacity:1;transform:translateY(0)}
.stn{font-size:24px;font-weight:900;letter-spacing:-.03em;font-style:italic;text-align:center}.stn span{color:var(--ac)}
.stl{font-size:9px;color:var(--mt);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-top:3px;text-align:center}
.btn-p{display:inline-flex;align-items:center;background:var(--ac);color:#000;font-family:var(--fn);font-size:13px;font-weight:700;padding:13px 28px;border-radius:8px;border:none;cursor:none;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .15s}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,200,255,.35);filter:brightness(1.1)}
.btn-g{display:inline-flex;align-items:center;background:transparent;color:var(--tx2);font-family:var(--fn);font-size:13px;font-weight:600;padding:13px 28px;border-radius:8px;border:1px solid var(--bd2);cursor:none;text-decoration:none;transition:.2s}
.btn-g:hover{color:var(--tx);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}

#sring{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .8s ease 2.6s}
#sring.in{opacity:1}
.sr-svg{position:relative;width:50px;height:50px}
.sr-svg svg{width:50px;height:50px;animation:spinSvg 7s linear infinite}
.sr-svg svg circle{fill:none;stroke:var(--mt);stroke-width:1;stroke-dasharray:5 10}
@keyframes spinSvg{to{transform:rotate(360deg)}}
.sr-dot{position:absolute;width:6px;height:6px;background:var(--ac);border-radius:50%;box-shadow:0 0 8px var(--ac);top:50%;left:50%;transform-origin:0 0;animation:orbitD 7s linear infinite}
@keyframes orbitD{from{transform:rotate(0deg) translateX(22px) translate(-50%,-50%)}to{transform:rotate(360deg) translateX(22px) translate(-50%,-50%)}}
.sr-lbl{font-family:var(--mono);font-size:9px;color:var(--mt);letter-spacing:.22em;text-transform:uppercase}

.mwrap{overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:14px 0;background:var(--sf)}
.mtrack{display:flex;width:max-content}
.mi{font-size:11px;font-weight:700;color:var(--mt);font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;padding:0 28px;white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.mi::after{content:'✦';color:var(--ac);font-size:8px}

.sw{max-width:1100px;margin:0 auto;padding:120px 56px}
hr.dv{border:none;border-top:1px solid var(--bd);max-width:1100px;margin:0 auto}
.clip{overflow:hidden;display:block}
.ci{display:block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.ci.in{transform:translateY(0)}
.sec-idx{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.2em;margin-bottom:16px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.sec-idx::before{content:'';width:20px;height:1px;background:var(--mt)}
.sec-idx.in{opacity:1;transform:translateX(0)}
.sec-big{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1.02}
.sec-sub{font-size:15px;color:var(--tx2);max-width:440px;line-height:1.8;margin-top:12px;opacity:0;transform:translateY(16px);transition:opacity .6s ease .2s,transform .6s ease .2s}
.sec-sub.in{opacity:1;transform:translateY(0)}

#work-outer{position:relative}
#work-inner{position:absolute;top:0;left:0;width:100%;height:100vh;display:flex;overflow:hidden;align-items:center}
#work-head{padding:0 52px;min-width:310px;flex-shrink:0}
#wtrack{display:flex;align-items:center;gap:20px;padding:0 52px 0 36px;height:100%;will-change:transform}
.wcard{flex-shrink:0;width:340px;height:66vh;max-height:510px;background:var(--sf);border:1px solid var(--bd);border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;position:relative;opacity:0;transform:translateY(90px) scale(.96);transition:border-color .25s,box-shadow .25s,opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.wcard.in{opacity:1;transform:translateY(0) scale(1)}
.wcard.feat{width:460px}
.wcard:hover{border-color:rgba(0,200,255,.32);box-shadow:0 24px 64px rgba(0,0,0,.65)}
.wcg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(0,200,255,.06),transparent 60%);opacity:0;transition:.35s;pointer-events:none}
.wcard:hover .wcg{opacity:1}
.wbn{flex-shrink:0;height:40%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.wbn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);transform:translateX(-100%);transition:transform .55s ease}
.wcard:hover .wbn::after{transform:translateX(100%)}
.wbody{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.wtags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.wt{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--sf2);color:var(--tx2);border:1px solid var(--bd)}
.wt.ac{background:rgba(0,200,255,.08);color:var(--ac);border-color:rgba(0,200,255,.22)}
.wname{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;font-style:italic;color:var(--tx)}
.wdesc{font-size:12.5px;color:var(--tx2);line-height:1.65;flex:1}
.wfoot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.wlink{font-size:11px;font-weight:700;color:var(--ac);display:flex;align-items:center;gap:4px;transition:gap .15s}
.wcard:hover .wlink{gap:9px}
.wstat{display:flex;align-items:center;gap:5px;font-size:10px;font-family:var(--mono);color:var(--mt)}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--gn);animation:blink 2.5s ease-in-out infinite}
.sdot.wip{background:#f59e0b;animation:none}

#about{background:var(--sf);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
#about .sw{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.abt-big{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.22}
.abt-big em{color:var(--ac);font-style:normal}
.abt-r{display:flex;flex-direction:column;gap:24px;padding-top:6px}
.abt-txt{font-size:15px;color:var(--tx2);line-height:1.85;opacity:0;transform:translateY(20px);transition:opacity .7s ease .1s,transform .7s ease .1s}
.abt-txt.in{opacity:1;transform:translateY(0)}
.abt-tags{display:flex;flex-wrap:wrap;gap:7px;opacity:0;transform:translateY(20px);transition:opacity .6s ease .25s,transform .6s ease .25s}
.abt-tags.in{opacity:1;transform:translateY(0)}
.atag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:5px;background:var(--sf2);color:var(--tx2);border:1px solid var(--bd)}
@media(max-width:720px){#about .sw{grid-template-columns:1fr;gap:36px}}

.ctc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:52px}
.ctc-card{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;text-decoration:none;color:var(--tx);transition:.2s,opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);opacity:0;transform:translateY(48px)}
.ctc-card.in{opacity:1;transform:translateY(0)}
.ctc-card:hover{border-color:var(--bd2);transform:translateY(-3px);background:var(--sf2)}
.ctc-lbl{font-size:10px;color:var(--mt);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.ctc-val{font-size:14px;font-weight:700}

footer{padding:40px 56px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mt)}
footer span{color:var(--ac)}
.btop{color:var(--mt);text-decoration:none;cursor:none;transition:color .15s}
.btop:hover{color:var(--ac)}
@media(max-width:640px){nav{padding:0 20px}.sw{padding:60px 20px}footer{padding:24px 20px;flex-direction:column;gap:12px;text-align:center}.nav-links{display:none}#work-head{display:none}}

#ap{position:fixed;top:0;right:0;bottom:0;width:400px;background:var(--sf);border-left:1px solid var(--bd2);z-index:700;overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
#ap.open{transform:translateX(0)}
#ap::-webkit-scrollbar{width:4px}
#ap::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}
.aphd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--sf);z-index:1;flex-shrink:0}
.apht{font-size:13px;font-weight:800;color:var(--tx)}
.apx{background:none;border:none;color:var(--tx2);cursor:none;font-size:18px;padding:2px 8px;border-radius:6px;transition:.15s}
.apx:hover{background:rgba(255,255,255,.07);color:var(--tx)}
.aptabs{display:flex;border-bottom:1px solid var(--bd);flex-shrink:0}
.aptab{flex:1;padding:10px;font-size:10px;font-weight:700;color:var(--tx2);background:none;border:none;cursor:none;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:.15s;border-bottom:2px solid transparent}
.aptab.on{color:var(--ac);border-bottom-color:var(--ac)}
.apauth{padding:24px;display:flex;flex-direction:column;gap:12px}
.apauth input{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--tx);font-family:var(--mono);outline:none;width:100%}
.apauth input:focus{border-color:rgba(0,200,255,.4)}
.aperr{font-size:12px;color:#ff4c6a;min-height:16px}
.apbody{flex:1;padding:16px}
.appane{display:none}.appane.on{display:block}
.apsec{margin-bottom:20px}
.apst{font-size:10px;font-weight:700;color:var(--mt);letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
.apr{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.apr label{font-size:11px;color:var(--tx2);font-family:var(--mono)}
.ai{background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--tx);font-family:var(--mono);outline:none;width:100%;transition:.15s}
.ai:focus{border-color:rgba(0,200,255,.4)}
textarea.ai{height:70px;resize:vertical;line-height:1.5}
.aptr{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
.aptgl{appearance:none;width:36px;height:20px;background:var(--sf2);border:1px solid var(--bd2);border-radius:100px;cursor:none;position:relative;transition:.2s;flex-shrink:0}
.aptgl::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--mt);top:2px;left:2px;transition:.2s}
.aptgl:checked{background:rgba(0,200,255,.2);border-color:rgba(0,200,255,.4)}
.aptgl:checked::after{left:18px;background:var(--ac)}
.ab{width:100%;padding:9px;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:var(--ac);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:none;transition:.15s;margin-top:4px}
.ab:hover{background:rgba(0,200,255,.16)}
.apitem{display:flex;align-items:center;gap:6px;padding:9px 11px;background:var(--sf2);border:1px solid var(--bd);border-radius:8px;margin-bottom:6px}
.apin{font-size:12px;font-weight:700;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.apib{background:none;border:none;color:var(--mt);cursor:none;padding:3px 7px;border-radius:4px;font-size:13px;transition:.15s}
.apib:hover{color:var(--tx);background:rgba(255,255,255,.07)}
.apib.del:hover{color:#ff4c6a}
.apform{background:var(--sf2);border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:10px}
.apmsg{font-family:var(--mono);font-size:11px;text-align:center;padding:6px;min-height:20px;margin-top:4px;color:var(--gn)}


/* 3D card tilt */
.wcard{transform-style:preserve-3d}
#wtrack{perspective:1200px}

/* huge dim section bg numbers */
.sec-num{position:absolute;top:50%;left:52px;transform:translateY(-60%);font-size:clamp(8rem,18vw,16rem);font-weight:900;font-style:italic;color:rgba(255,255,255,.028);letter-spacing:-.06em;pointer-events:none;user-select:none;line-height:1;z-index:0}
.sec-rel{position:relative}

/* self-drawing hr divider */
hr.dv{border:none;height:1px;max-width:1100px;margin:0 auto;background:transparent;overflow:visible}
hr.dv::after{content:'';display:block;height:1px;background:var(--ac);width:0%;opacity:.25;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
hr.dv.in::after{width:100%}

/* nav scramble */
.nav-links a{position:relative;font-variant-numeric:tabular-nums}

/* card noise texture */
.wcard::before{content:'';position:absolute;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='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;z-index:1;border-radius:18px}

/* footer CTA */
#footer-cta{padding:100px 56px;text-align:center;position:relative;overflow:hidden}
#footer-cta .sec-num{left:50%;transform:translate(-50%,-60%);text-align:center;width:100%}
.cta-name{font-size:clamp(3rem,10vw,8rem);font-weight:900;font-style:italic;letter-spacing:-.06em;color:var(--tx);line-height:.9;margin-bottom:28px;display:block}
.cta-name .ac{color:var(--ac)}
.cta-sub{font-size:15px;color:var(--tx2);margin-bottom:36px;font-family:var(--mono)}
.cta-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* error screen transition */
#err-screen{transition:opacity .4s ease}
#err-screen.out{opacity:0;pointer-events:none}

#err-screen{position:fixed;inset:0;background:var(--bg);z-index:9900;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:40px;transition:opacity .4s ease}
#err-screen.out{opacity:0;pointer-events:none}

/* ── Global zoop brand mark ── */
.zmark{font-weight:900;font-style:italic;letter-spacing:-.05em;color:var(--ac)}
.zmark .w{color:#fff}

/* ── Animated loader ── */
#loader canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.18}
.ll{position:relative;z-index:1;animation:logoIn 0s}
.loader-chars span{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.loader-chars span.in{opacity:1;transform:translateY(0)}
.lb{position:relative;z-index:1}
.lp{position:relative;z-index:1}

/* ── cursor spotlight on hero ── */
#spotlight{background:radial-gradient(600px circle at var(--sx,50%) var(--sy,50%),rgba(0,200,255,.06) 0%,rgba(0,200,255,.02) 30%,transparent 70%);transition:--sx .1s,--sy .1s}

/* ── horizontal scroll hint ── */
.scroll-hint-h{display:flex;align-items:center;gap:8px;margin-top:24px;opacity:0;transition:opacity .5s ease}
.scroll-hint-h.vis{opacity:1}
.sh-arrow{display:inline-block;font-size:16px;color:var(--ac);animation:bounceD 1.4s ease-in-out infinite}
@keyframes bounceD{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.sh-txt{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.15em;text-transform:uppercase}

/* ── footer CTA fix ── */
.cta-line{display:block;line-height:.9}

/* ── mobile hamburger ── */
#mob-menu{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:8px;z-index:601;position:relative}
#mob-menu span{display:block;width:22px;height:1.5px;background:var(--tx2);transition:.3s}
#mob-menu.open span:first-child{transform:translateY(6.5px) rotate(45deg);background:var(--ac)}
#mob-menu.open span:last-child{transform:translateY(-6.5px) rotate(-45deg);background:var(--ac)}
#mob-nav{position:fixed;inset:0;background:rgba(8,11,15,.96);backdrop-filter:blur(24px);z-index:595;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#mob-nav.open{transform:translateX(0)}
#mob-nav a{font-size:clamp(2rem,8vw,3.5rem);font-weight:900;font-style:italic;color:var(--tx);text-decoration:none;letter-spacing:-.04em;transition:.2s;display:block;padding:8px 0}
#mob-nav a:hover{color:var(--ac)}
@media(max-width:640px){#mob-menu{display:flex}.nav-links{display:none}}

/* ── scroll to top ── */
#top-btn{position:fixed;bottom:28px;right:28px;width:42px;height:42px;border-radius:50%;background:var(--sf);border:1px solid var(--bd2);color:var(--tx2);font-size:16px;cursor:none;z-index:500;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,border-color .2s,color .2s;pointer-events:none}
#top-btn.vis{opacity:1;transform:translateY(0);pointer-events:auto}
#top-btn:hover{border-color:rgba(0,200,255,.4);color:var(--ac)}

/* ── nav active indicator ── */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:14px;right:14px;height:1px;background:var(--ac);transform:scaleX(0);transition:transform .3s ease}
.nav-links a.active{color:var(--tx)}
.nav-links a.active::after{transform:scaleX(1)}

/* ── count-up stats ── */
.stn{transition:color .3s}

/* ── hero subtitle scramble ── */
#hero-sub{font-variant-numeric:tabular-nums}

/* ── admin panel — no more nav button, keyboard triggered ── */
#ap{top:60px}

/* ── WORDS horizontal pin section ── */
#words-outer{position:relative}
#words-inner{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden}
.wslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8vw;gap:40px;will-change:transform}
.wslide:nth-child(1){background:var(--sf)}
.wslide:nth-child(2){background:var(--sf2)}
.wslide:nth-child(3){background:var(--bg)}
.wslide-c{flex:1;max-width:520px;z-index:1}
.ws-num{font-family:var(--mono);font-size:11px;color:var(--mt);letter-spacing:.2em;display:block;margin-bottom:20px}
.ws-title{font-size:clamp(3.5rem,9vw,7.5rem);font-weight:900;font-style:italic;letter-spacing:-.05em;line-height:.9;margin-bottom:24px;color:var(--tx)}
.ws-title em{color:var(--ac);font-style:normal}
.ws-sub{font-size:clamp(14px,1.8vw,17px);color:var(--tx2);line-height:1.8;max-width:380px}
.ws-deco{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ws-deco-box{transition:transform .1s}
.ws-stack{display:flex;flex-direction:column;gap:10px;width:280px}
.ws-stack-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--sf);border:1px solid var(--bd);border-radius:10px;font-family:var(--mono);font-size:13px;color:var(--tx2)}
.ws-stack-item .ws-dot{width:7px;height:7px;border-radius:50%;background:var(--ac);flex-shrink:0}
@media(max-width:700px){.ws-deco{display:none}}

/* ── WORDS horizontal pin ── */
#words-outer{position:relative}
#words-inner{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden}
#words-track{display:flex;height:100%;will-change:transform}
.ws{flex-shrink:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 8vw;gap:60px}
.ws:nth-child(1){background:var(--sf)}
.ws:nth-child(2){background:var(--sf2)}
.ws:nth-child(3){background:var(--bg)}
.ws-body{flex:1;max-width:520px}
.ws-n{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.2em;display:block;margin-bottom:20px}
.ws-h{font-size:clamp(3.5rem,9vw,7.5rem);font-weight:900;font-style:italic;letter-spacing:-.05em;line-height:.9;margin:0 0 24px;color:var(--tx)}
.ws-h em{color:var(--ac);font-style:normal}
.ws-p{font-size:clamp(14px,1.8vw,17px);color:var(--tx2);line-height:1.85;margin:0}
.ws-side{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ws-ring{width:300px;height:300px;border-radius:50%;border:1px solid rgba(0,200,255,.14);display:flex;align-items:center;justify-content:center}
.ws-ring-num{font-size:6rem;font-weight:900;font-style:italic;color:var(--ac);opacity:.18}
.ws-stack{display:flex;flex-direction:column;gap:8px;width:260px}
.ws-stack-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:9px;font-family:var(--mono);font-size:12px;color:var(--tx2)}
.ws-dot{width:6px;height:6px;border-radius:50%;background:var(--ac);flex-shrink:0}
@media(max-width:700px){.ws-side{display:none}.ws{padding:0 6vw}}

/* ═══ ADMIN REDESIGN — code editor aesthetic ═══ */
#ap{position:fixed;top:0;right:0;bottom:0;width:420px;background:#0a0a0c;border-left:1px solid rgba(0,200,255,.1);z-index:700;overflow:hidden;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:var(--mono)}
#ap.open{transform:translateX(0)}
#ap-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
#ap-logo{font-size:12px;font-weight:700;color:var(--ac);letter-spacing:.08em}
#apx{background:none;border:none;color:rgba(255,255,255,.3);cursor:none;font-size:16px;font-family:var(--mono);padding:4px 8px;border-radius:4px;transition:.15s}
#apx:hover{color:var(--tx);background:rgba(255,255,255,.06)}
#ap-auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
.ap-auth-inner{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
.ap-prompt{font-size:11px;color:var(--ac);letter-spacing:.06em}
#aptok{background:#111115;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;font-size:13px;font-family:var(--mono);color:var(--tx);outline:none;width:100%;letter-spacing:.04em;caret-color:var(--ac)}
#aptok:focus{border-color:rgba(0,200,255,.35);background:#111820}
.aperr{font-size:11px;color:#ff4c6a;min-height:14px;font-family:var(--mono)}
.ap-run-btn{background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:6px;color:var(--ac);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:10px 18px;cursor:none;transition:.15s}
.ap-run-btn:hover{background:rgba(0,200,255,.16);border-color:rgba(0,200,255,.4)}
.ap-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.aptab{flex:1;padding:10px;font-size:10px;font-weight:700;color:rgba(255,255,255,.3);background:none;border:none;cursor:none;font-family:var(--mono);letter-spacing:.08em;transition:.15s;border-bottom:1px solid transparent}
.aptab.on{color:var(--ac);border-bottom-color:var(--ac)}
.aptab:hover{color:var(--tx2)}
.apbody{flex:1;overflow-y:auto;padding:0}
.apbody::-webkit-scrollbar{width:3px}
.apbody::-webkit-scrollbar-thumb{background:rgba(0,200,255,.2);border-radius:3px}
.appane{display:none;padding:16px}.appane.on{display:block}
.ap-group{margin-bottom:20px;border-left:1px solid rgba(0,200,255,.12);padding-left:12px}
.ap-group-label{font-size:10px;color:var(--ac);letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ap-hint{color:var(--mt);font-size:9px}
.ap-row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ap-row label{font-size:10px;color:var(--mt);letter-spacing:.05em}
.ai{background:#111115;border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:7px 10px;font-size:12px;font-family:var(--mono);color:var(--tx);outline:none;width:100%;caret-color:var(--ac);transition:.15s}
.ai:focus{border-color:rgba(0,200,255,.3);background:#0e1520}
textarea.ai{min-height:64px;resize:vertical;line-height:1.55}
.ap-color-row{display:flex;gap:8px;align-items:center}
#gacp{width:36px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:2px;background:none;cursor:none}
.ap-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:11px;color:var(--tx2)}
.aptgl{appearance:none;width:34px;height:18px;background:#111115;border:1px solid rgba(255,255,255,.1);border-radius:100px;cursor:none;position:relative;transition:.2s;flex-shrink:0}
.aptgl::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);top:2px;left:2px;transition:.2s}
.aptgl:checked{background:rgba(0,200,255,.15);border-color:rgba(0,200,255,.35)}
.aptgl:checked::after{left:18px;background:var(--ac)}
.ap-add-btn{background:none;border:1px dashed rgba(255,255,255,.12);border-radius:6px;color:var(--mt);font-family:var(--mono);font-size:11px;padding:8px 14px;cursor:none;width:100%;transition:.15s;margin-top:4px}
.ap-add-btn:hover{border-color:rgba(0,200,255,.25);color:var(--ac)}
.apmsg{font-family:var(--mono);font-size:11px;text-align:center;padding:8px;min-height:18px;color:var(--gn)}
/* project/contact items */
.apitem{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#111115;border:1px solid rgba(255,255,255,.06);border-radius:7px;margin-bottom:6px}
.apin{font-size:12px;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.apib{background:none;border:none;color:var(--mt);cursor:none;padding:3px 7px;border-radius:4px;font-family:var(--mono);font-size:12px;transition:.15s}
.apib:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.apib.del:hover{color:#ff4c6a}
.apform{background:#0d0d11;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:12px;margin-bottom:8px}