/* Altaf Khan portfolio — dark, bold, purple accent */
:root{
  --bg:#0a090e; --panel:#13111a; --line:#272333; --fg:#f1eef7; --muted:#8f89a3; --soft:#c9c2da;
  --violet:#8b5cf6; --glow:#b69cff; --deep:#2a1d55; --guide:#3d7bff;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --script:"Allura","Snell Roundhand","Brush Script MT",cursive;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --pad:max(20px,4vw);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.display em,.h2 em{font-style:normal;color:var(--violet)}
.h2{font-size:clamp(44px,7vw,96px);margin:.15em 0 .4em}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.accent{color:var(--glow)}
.script{font-family:var(--script);color:var(--glow);margin:0;line-height:1}
.lead{color:var(--soft);max-width:46ch;font-size:17px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--violet);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:8px;transition:transform .2s,box-shadow .2s;border:1px solid var(--violet)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px var(--violet)}
.ghost-btn{background:transparent;color:var(--fg);border-color:var(--line)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);background:linear-gradient(var(--bg),rgba(10,9,14,0));}
.logo{font-family:var(--display);font-size:26px;text-decoration:none;letter-spacing:.02em}
.logo em{color:var(--violet);font-style:normal}
.links{display:flex;gap:32px}
.links a{text-decoration:none;color:var(--soft);font-size:15px}
.links a:hover{color:var(--fg)}
.pill{text-decoration:none;border:1px solid var(--violet);border-radius:40px;padding:8px 18px;font-size:14px}
.pill:hover{background:var(--violet)}

/* hero */
.hero{min-height:min(100vh,980px);display:grid;grid-template-columns:1fr 1.15fr .35fr;align-items:center;gap:20px;padding:110px var(--pad) 40px;position:relative}
.hero-copy .script{font-size:clamp(40px,4.6vw,64px)}
.hero h1{font-size:clamp(72px,9.5vw,150px);margin:.05em 0 .25em}
.hero .lead{margin:16px 0 28px}
.stage{position:relative;height:min(78vh,760px);perspective:1200px;transform-style:preserve-3d}
.stage .layer{position:absolute;transition:transform .25s ease-out;will-change:transform}
.word{left:50%;top:14%;translate:-50% 0;display:flex;font-family:var(--display);font-size:clamp(90px,13vw,230px);line-height:1;white-space:nowrap;pointer-events:none}
.word span{color:transparent;-webkit-text-stroke:1.5px var(--violet);display:inline-block}
.orb{left:50%;top:45%;width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.5),rgba(139,92,246,.08) 45%,transparent 68%)}
.ring{left:50%;top:48%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(182,156,255,.35);box-shadow:0 0 60px rgba(139,92,246,.25) inset}
.me{left:50%;bottom:0;translate:-50% 0;height:82%;width:auto;max-width:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(139,92,246,.35))}
.float{display:flex;align-items:center;gap:10px;font-size:13px;padding:10px 14px;border-radius:12px;background:rgba(25,20,40,.6);border:1px solid rgba(182,156,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.float b{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#00005b;color:#9999ff;font-size:13px}
.float b.ai{background:var(--violet);color:#fff}
.float b.rec{background:transparent;color:#ff4d6d;font-size:18px}
.f1{left:4%;top:38%}.f2{right:2%;top:24%}.f3{right:6%;bottom:16%}
.stats{display:grid;gap:34px;justify-items:end;text-align:right}
.stats .num{font-family:var(--display);font-size:clamp(48px,5vw,72px);color:var(--violet);line-height:1}
.stats em{font-family:var(--display);font-style:normal;color:var(--violet);font-size:36px}
.stats .label{display:block}

/* sections */
.section{padding:120px var(--pad);position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* work */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.tab{font:inherit;font-size:14px;background:none;color:var(--soft);border:1px solid var(--line);border-radius:40px;padding:8px 18px;cursor:pointer}
.tab.on,.tab:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;perspective:1200px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transform-style:preserve-3d;transition:transform .3s ease-out,border-color .3s;text-align:left;font:inherit;color:inherit;padding:0}
.card:hover{border-color:var(--violet)}
.card .thumb{aspect-ratio:1;overflow:hidden;position:relative}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover img{transform:scale(1.06)}
.card .play{position:absolute;inset:auto 14px 14px auto;width:52px;height:52px;border-radius:50%;background:var(--violet);display:grid;place-items:center;font-size:18px;transform:translateZ(40px);box-shadow:0 10px 30px -5px var(--violet)}
.card .cap{display:flex;gap:14px;align-items:baseline;padding:16px 18px}
.card .cap b{font-family:var(--display);font-weight:400;font-size:28px;color:var(--violet)}
.card .cap span{display:block;font-weight:700}
.card .cap small{color:var(--muted);font-size:13px}
.card.hide{display:none}

/* tools marquee */
.tools{border-block:1px solid var(--line);padding:26px 0;overflow:hidden}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:18px;width:max-content;animation:slide 40s linear infinite}
.chip{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border:1px solid var(--line);border-radius:12px;white-space:nowrap;color:var(--soft)}
.chip i{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:700}
@keyframes slide{to{transform:translateX(-50%)}}

/* before/after */
.ba{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--line);--x:50%}
.ba>img,.ba-raw img{width:100%;height:100%;object-fit:cover}
.ba-raw{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-raw img{filter:grayscale(.85) contrast(.7) brightness(.75) sepia(.15)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;translate:-1px 0;pointer-events:none}
.ba-line span{position:absolute;top:50%;left:50%;translate:-50% -50%;width:48px;height:48px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-weight:700}
.ba-tag{position:absolute;top:14px;font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:6px}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* AI */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1200px}
.ai-card{padding:32px 28px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,#1b1432,#100e16 60%);transition:transform .3s ease-out,border-color .3s;transform-style:preserve-3d}
.ai-card:hover{border-color:var(--violet)}
.ai-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;margin:14px 0 12px}
.ai-card p:not(.label){color:var(--soft);margin:0}
.meter{height:6px;border-radius:6px;background:#2a2340;overflow:hidden;margin-top:22px}
.meter s{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--glow));transition:width 1.6s ease}
.ai-card.in .meter s{width:var(--w)}
.auto{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;margin-top:50px;align-items:center}
.term{background:#0d0c12;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -40px var(--violet)}
.term-bar{display:flex;gap:6px;align-items:center;padding:10px 14px;background:#17151f;font-family:var(--mono);font-size:12px;color:var(--muted)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#3a3548}
.term-bar span{margin-left:10px}
.term pre{margin:0;padding:20px;min-height:250px;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:#d9d3ea;white-space:pre-wrap}
.term .ok{color:#4ade80}.term .pr{color:var(--glow)}
.pipe{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.pipe li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:14px 0;border-bottom:1px solid var(--line);counter-increment:s}
.pipe li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font-family:var(--display);font-size:28px;color:var(--violet)}
.pipe b{font-size:17px}.pipe span{color:var(--muted);font-size:14px}

/* journey */
.timeline{position:relative;margin-top:20px}
.timeline::before{content:"";position:absolute;left:0;top:0;width:2px;height:var(--prog,0%);background:var(--violet);transition:height .2s}
.tl-row{display:grid;grid-template-columns:140px 1fr auto;gap:20px;padding:22px 0 22px 22px;border-top:1px solid var(--line);align-items:baseline}
.tl-row .y{font-family:var(--mono);font-size:13px;color:var(--glow)}
.tl-row b{display:block;font-size:19px}
.tl-row div span{color:var(--muted)}
.tl-row .p{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.box{background:var(--violet);border-radius:18px;padding:40px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:420px}
.box .display{font-size:clamp(52px,6vw,88px);color:#fff}
.box p{margin:0}
.box .script{color:#fff;font-size:56px}

/* contact */
.contacts{list-style:none;margin:0;padding:0}
.contacts li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.contacts i{width:52px;height:52px;border:1px solid var(--violet);border-radius:50%;display:grid;place-items:center;font-style:normal;color:var(--glow)}
.contacts span{color:var(--muted);font-size:13px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;min-width:0}
.contacts a{display:block;color:var(--fg);font-family:var(--body);font-size:18px;text-transform:none;letter-spacing:0;text-decoration:none;overflow-wrap:anywhere}
.contacts a:hover{color:var(--glow)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:30px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot a{text-decoration:none}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(5,4,8,.88);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{width:min(1100px,100%);position:relative}
.player{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.player iframe,.player video{width:100%;height:100%;border:0}
.player img{max-height:100%;object-fit:contain}
.player.vertical{aspect-ratio:9/16;max-height:82vh;margin:0 auto}
.modal-title{font-family:var(--display);text-transform:uppercase;font-size:28px;margin:14px 0 0}
.close{position:absolute;top:-48px;right:0;background:none;border:1px solid var(--line);color:var(--fg);width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer}

/* cursor trail + intro */
#trail{position:fixed;inset:0;z-index:60;pointer-events:none}
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);transition:opacity .6s ease,visibility .6s}
.boot.done{opacity:0;visibility:hidden}
.boot-grid{position:absolute;inset:0}
.boot .g{position:absolute;background:var(--guide);opacity:0;animation:fadeIn .4s forwards}
.boot .gv{top:0;bottom:0;width:1px}.boot .gh{left:0;right:0;height:1px}
.boot .wf{position:absolute;border:1px solid var(--guide);background:rgba(160,160,190,.14);transform:scale(.6);opacity:0;animation:pop .45s cubic-bezier(.3,1.4,.6,1) forwards}
.boot .wf:nth-of-type(5){animation-delay:.15s}.boot .wf:nth-of-type(6){animation-delay:.3s}.boot .wf:nth-of-type(7){animation-delay:.42s}
.boot .wf:nth-of-type(8){animation-delay:.54s}.boot .wf:nth-of-type(9){animation-delay:.66s}.boot .wf:nth-of-type(10){animation-delay:.78s}.boot .wf:nth-of-type(11){animation-delay:.9s}
.boot-label{position:absolute;left:6%;bottom:6%;font-family:var(--mono);font-size:13px;color:var(--muted)}
@keyframes pop{to{transform:scale(1);opacity:1}}
@keyframes fadeIn{to{opacity:.5}}

/* reveal on scroll (only when JS is running) */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
.js .word span{opacity:0;transform:translateY(60px) rotateX(-70deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.loaded .word span{opacity:1;transform:none}
.js .me{opacity:0;translate:-50% 60px;transition:opacity 1s .5s,translate 1s .5s,transform .25s ease-out}
.loaded .me{opacity:1;translate:-50% 0}

/* responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:100px}
  .stage{height:70vh;order:-1}
  .stats{grid-auto-flow:column;justify-items:start;text-align:left;justify-content:start}
  .split,.auto{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr}
  .links{display:none}
}
@media (max-width:560px){
  .section{padding:80px var(--pad)}
  .tl-row{grid-template-columns:1fr;gap:4px}
  .tl-row .p{text-align:left}
  .float{font-size:11px}
  .f1{left:0}.f2{right:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal,.js .word span,.js .me{opacity:1;transform:none;translate:-50% 0}
  .js .reveal{translate:none}
  .boot{display:none}
}

/* ---------- services (added) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;perspective:1400px}
.svc{position:relative;padding:30px 28px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,#17132a,#0f0d16 65%);display:flex;flex-direction:column;gap:14px;min-height:300px;transform-style:preserve-3d;transition:transform .3s ease-out,border-color .3s,background .3s}
.svc:hover{border-color:var(--violet);background:linear-gradient(160deg,#2a1d55,#120f1d 70%)}
.svc .n{position:absolute;top:24px;right:26px;font-family:var(--display);font-size:34px;color:#2c2640;line-height:1}
.svc:hover .n{color:var(--violet)}
.svc .ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#a08bff,var(--violet));box-shadow:0 14px 30px -10px var(--violet);transform:translateZ(40px)}
.svc .ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:28px;line-height:1.05;margin-top:6px;transform:translateZ(25px)}
.svc p{margin:0;color:var(--soft);font-size:15px}
.svc .tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.svc .tags span{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:20px;background:rgba(139,92,246,.14);color:var(--glow)}
#services .lead{margin-top:-10px}

/* purple portrait box (added) */
.box.photo{position:relative;overflow:hidden;padding:0 0 30px;gap:14px;justify-content:flex-start;min-height:0;background:#4a2fa0}
.box.photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center 20%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.box.photo>p{padding:0 32px}
.box.photo .display{font-size:clamp(38px,3.6vw,56px);margin-top:-30px;position:relative}
.box.photo .script{font-size:46px}

@media (max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}.box.photo{min-height:480px}}
.me{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
@media (max-width:1000px){.f1{left:0;top:68%}.f2{right:0;top:4%}.f3{right:0;bottom:6%}}

/* ---------- camera viewfinder + 3D gear (added) ---------- */
#gear{position:absolute;left:-22%;right:-22%;top:-6%;bottom:0;width:144%;height:106%;z-index:6;pointer-events:none}
.hud{left:22%;right:22%;top:16%;bottom:8%;z-index:5;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(241,238,247,.75)}
.hud .c{position:absolute;width:26px;height:26px;border-color:rgba(241,238,247,.55);border-style:solid;border-width:0}
.hud .tl{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.hud .tr{right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.hud .bl{left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.hud .br{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.hud .rec{position:absolute;left:36px;top:4px;display:flex;align-items:center;gap:8px}
.hud .rec b{width:8px;height:8px;border-radius:50%;background:#ff3355;animation:blink 1.2s steps(2,start) infinite}
.hud .spec{position:absolute;right:36px;bottom:4px}
@keyframes blink{to{visibility:hidden}}
@media (max-width:1000px){.hud{left:10%;right:10%}#gear{left:-6%;right:-6%;width:112%}}
@media (max-width:560px){.hud .spec{display:none}}
#gear{transform:translateZ(120px)}

/* ---------- Work: featured row ---------- */
.feat-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:10px 0 18px}
.feat-nav{display:flex;gap:8px}
.feat-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);font-size:18px;cursor:pointer;transition:border-color .2s,background .2s}
.feat-nav button:hover{border-color:var(--violet);background:rgba(139,92,246,.15)}
.feat{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad);scroll-padding:0 var(--pad)}
.feat::-webkit-scrollbar{display:none}
.ft{position:relative;flex:0 0 auto;height:clamp(380px,58vh,560px);border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line);scroll-snap-align:start;transition:border-color .3s}
.ft:hover{border-color:var(--violet)}
.ft img,.ft iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.ft iframe{opacity:0;transition:opacity .8s;pointer-events:none}
.ft iframe.on{opacity:1}
.ft-hit{position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,9,14,.85));border:0;cursor:pointer;padding:0}
.ft-hit .play{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:var(--violet);display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 10px 30px -5px var(--violet);transition:transform .25s}
.ft:hover .play{transform:scale(1.1)}
.ft-cap{position:absolute;left:18px;bottom:16px;right:80px;margin:0;font-weight:700;pointer-events:none;line-height:1.25}
.ft-cap span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);font-weight:400;margin-bottom:4px}

/* ---------- Work: category covers ---------- */
.cat-label{margin-top:70px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;perspective:1200px;margin-top:18px}
.cat{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);cursor:pointer;padding:0;font:inherit;color:#fff;text-align:left;transform-style:preserve-3d;transition:transform .3s ease-out,border-color .3s,box-shadow .3s}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,9,14,.0) 35%,rgba(10,9,14,.92));pointer-events:none}
.cat:hover img{transform:scale(1.05)}
.cat:hover,.cat.on{border-color:var(--violet)}
.cat.on{box-shadow:0 0 0 2px var(--violet),0 20px 50px -20px var(--violet)}
.cat-n{position:absolute;top:14px;left:14px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:30px;background:rgba(10,9,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cat-t{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;transform:translateZ(30px)}
.cat-t b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.8vw,44px);line-height:.95}
.cat-t small{display:block;color:var(--soft);font-size:13px;margin-top:6px}

/* ---------- Work: videos in the chosen category ---------- */
.cat-panel{margin-top:40px;scroll-margin-top:90px}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.cat-head h3{font-size:clamp(34px,4vw,56px);margin:0}
.cat-head h3 em{font-style:normal;color:var(--violet)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left;transition:border-color .3s,transform .3s;animation:vin .5s both}
.vcard:hover:not(.soon){border-color:var(--violet);transform:translateY(-4px)}
.vcard .thumb{aspect-ratio:3/4;position:relative;overflow:hidden;background:#000}
.vcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vcard:hover:not(.soon) img{transform:scale(1.06)}
.vcard .play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--violet);display:grid;place-items:center;font-size:15px;box-shadow:0 10px 30px -5px var(--violet)}
.vcard .shape{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;padding:4px 8px;border-radius:20px;background:rgba(10,9,14,.65)}
.vcard .cap{display:flex;gap:12px;align-items:baseline;padding:14px 16px}
.vcard .cap b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--violet)}
.vcard .cap span{font-weight:700;font-size:15px}
.vcard.soon{cursor:default}
.vcard.soon img{filter:grayscale(1) brightness(.35) blur(2px)}
.soon-tag{position:absolute;inset:auto 0 50%;translate:0 50%;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
@keyframes vin{from{opacity:0;transform:translateY(14px)}}
.player.four3{aspect-ratio:4/3;max-height:82vh;margin:0 auto}

@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .cats{gap:12px}
  .cat-t{left:12px;right:12px;bottom:12px}
  .cat-t small{display:none}
  .ft{height:min(68vh,520px)}
  .vgrid{grid-template-columns:1fr 1fr;gap:12px}
  .vcard .cap{padding:10px 12px}
  .vcard .cap b{font-size:18px}
  .vcard .cap span{font-size:13px}
  .feat-head .label{font-size:10px}
}
.player.ultra{aspect-ratio:16/5}
.player.square{aspect-ratio:9/8;max-height:82vh;margin:0 auto}
.vcard .ai-tag{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:4px 8px;border-radius:20px;background:var(--violet);color:#fff}