/* HEYYANIXX — styles */
@font-face{font-family:"InterTight";src:url(fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#060608;--bg2:#0c0d12;--ink:#eceef3;--ink2:#b9bdc9;--mute:#7d8292;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --cyan:#e3b65a;--violet:#e3b65a;--ember:#e3b65a;--accent:#e3b65a;
  --glass:rgba(255,255,255,.045);--glass2:rgba(255,255,255,.08);
  --chrome:linear-gradient(180deg,#ffffff 0%,#c9ced8 28%,#6b707c 52%,#e4e8ef 70%,#9aa0ad 100%);
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.65,0,.35,1);
  --wrap:min(1240px,100% - 48px);
  --display:"InterTight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
@supports (overflow:clip){body{overflow-x:clip}}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cyan);color:#000}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:#000;padding:10px 16px;border-radius:999px;font-weight:600;transition:top .3s}
.skip:focus{top:16px}
.wrap{width:var(--wrap);margin-inline:auto}
.section{position:relative;padding:clamp(96px,14vw,180px) 0}

/* labels & type */
.label{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin:0}
.label .idx{color:var(--ink);margin-right:10px}
.label b{color:var(--cyan);font-weight:600}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(44px,7.4vw,112px);line-height:.9;letter-spacing:-.045em;margin:18px 0 0;text-transform:uppercase}
.h2--xl{font-size:clamp(52px,10.5vw,168px)}
.lead{font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:var(--ink);letter-spacing:-.01em;margin:36px 0 0;max-width:36ch;font-weight:400}
.body{color:var(--ink2);font-size:16px;line-height:1.7;margin:20px 0 0;max-width:52ch}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:12px;vertical-align:2px;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}

/* split text reveal */
.split{display:inline-block;word-spacing:.2em}
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease);transition-delay:calc(var(--i) * 28ms + var(--d,0ms))}
.split .ch.sp{width:.26em}
.split-wrap{display:inline-block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;vertical-align:top}
.is-in .ch,.split.is-in .ch{transform:none;opacity:1}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--rd,0) * 90ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* grain */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;background:url(assets/grain.png);opacity:.07;mix-blend-mode:overlay;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* loader */
.loader{position:fixed;inset:0;z-index:150;background:var(--bg);display:grid;place-items:center;transition:clip-path 1.1s var(--ease2),visibility 0s 1.2s;clip-path:inset(0 0 0 0);animation:loaderFail .01s 4s forwards}
.loader__inner{width:min(420px,80vw)}
.loader__word{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(40px,9vw,72px);background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.loader__bar{height:1px;background:var(--line2);margin:22px 0 12px;overflow:hidden}
.loader__bar span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s linear}
.loader__meta{display:flex;justify-content:space-between;font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
body.is-ready .loader{clip-path:inset(0 0 100% 0);visibility:hidden}
@keyframes loaderFail{to{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink)}
.cursor__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s,border-color .4s}
.cursor__label{font-style:normal;font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .3s;color:#000;font-weight:700}
.cursor.is-hover .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.cursor.is-view .cursor__ring{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--ink);border-color:var(--ink)}
.cursor.is-view .cursor__label{opacity:1}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:text}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:28px;padding:18px max(24px,calc((100% - 1240px)/2));transition:transform .6s var(--ease),background .4s,backdrop-filter .4s}
.nav.is-scrolled{background:rgba(6,6,8,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;letter-spacing:.02em}
.nav__mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:12.5px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.nav__name{font-size:15px;letter-spacing:.08em}
.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink2);position:relative;padding:6px 0;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--glass);position:relative;cursor:pointer}
.nav__toggle span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.nav__toggle span:first-child{top:18px}.nav__toggle span:last-child{top:25px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:70;background:rgba(6,6,8,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;align-items:flex-end;padding:100px 24px 48px}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:6px;width:100%}
.menu a{font-family:var(--display);font-weight:700;font-size:clamp(34px,10vw,54px);letter-spacing:-.03em;line-height:1.1;display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding:6px 0 10px;animation:menuIn .7s var(--ease) both}
.menu a i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--mute);font-weight:600}
.menu a:nth-child(2){animation-delay:.04s}.menu a:nth-child(3){animation-delay:.08s}.menu a:nth-child(4){animation-delay:.12s}.menu a:nth-child(5){animation-delay:.16s}.menu a:nth-child(6){animation-delay:.2s}.menu a:nth-child(7){animation-delay:.24s}
@keyframes menuIn{from{opacity:0;transform:translateY(24px)}}

/* buttons */
.btn{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .4s,color .4s,border-color .4s,box-shadow .4s;overflow:hidden;isolation:isolate}
.btn>span,.btn>i{position:relative;z-index:1;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .5s var(--ease)}
.btn .arrow{font-style:normal;font-size:16px;letter-spacing:0;transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translate3d(calc(var(--tx,0px) + 4px),var(--ty,0),0)}
.btn--solid{background:var(--ink);color:#07070a;box-shadow:0 10px 40px -10px rgba(255,255,255,.35)}
.btn--solid::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(227,182,90,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:0}
.btn--solid:hover::before{transform:translateX(120%)}
.btn--glass{background:var(--glass);border-color:var(--line2);color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn--glass:hover{background:var(--glass2);border-color:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 30px -8px rgba(227,182,90,.4)}
.btn--sm{height:44px;padding:0 20px;font-size:11.5px}
.btn--block{width:100%}
.magnetic,.magnetic-soft{will-change:transform;transition:transform .6s var(--ease)}
.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:var(--glass);display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s;font-size:16px}
.icon-btn:hover{background:var(--glass2);border-color:rgba(255,255,255,.35)}

/* glass */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.7)}

/* HERO */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:-2;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__canvas.is-on{opacity:1}
.hero__fallback{position:absolute;inset:0;z-index:-3;background:radial-gradient(40% 50% at 70% 45%,rgba(227,182,90,.22),transparent 70%),radial-gradient(35% 45% at 62% 60%,rgba(227,182,90,.14),transparent 70%),var(--bg)}
.hero__vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.75) 100%),linear-gradient(180deg,rgba(6,6,8,.6) 0%,transparent 22%,transparent 70%,var(--bg) 100%)}
.hero__content{width:var(--wrap);margin:0 auto;padding-top:40px;position:relative}
.hero__title{margin:22px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(58px,15.2vw,248px);line-height:.82;letter-spacing:-.06em;margin-left:-.05em}
.hero__title .ch{background:linear-gradient(180deg,#fff 0%,#e8ebf1 38%,#8c93a2 60%,#f1f3f7 78%,#b4bac6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__subtitle{margin-top:30px;color:var(--ink);font-size:clamp(11px,1.15vw,14px);letter-spacing:.34em}
.hero__desc{margin:22px 0 0;font-size:clamp(17px,1.7vw,22px);max-width:34ch;color:var(--ink);line-height:1.45;letter-spacing:-.01em}
.hero__small{margin:12px 0 0;font-size:13.5px;color:var(--mute);letter-spacing:.04em}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}
.hero__scroll i{font-style:normal;width:26px;height:40px;border:1px solid var(--line2);border-radius:20px;display:grid;place-items:center;font-size:13px;animation:bob 2.2s var(--ease2) infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.hero__corner{position:absolute;bottom:34px;font-size:10.5px}
.hero__corner--l{left:max(24px,calc((100% - 1240px)/2))}
.hero__corner--r{right:max(24px,calc((100% - 1240px)/2))}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:linear-gradient(90deg,var(--bg),rgba(255,255,255,.02),var(--bg))}
.marquee__track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee span{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;padding-right:48px;color:var(--ink)}
.marquee span:nth-child(even){color:rgba(255,255,255,.3)}
.marquee i{font-style:normal;color:var(--cyan);font-size:.6em;vertical-align:.25em;margin:0 18px;-webkit-text-stroke:0}
.marquee em{font-style:normal;color:var(--mute)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ABOUT */
.about__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:center}
.chips{list-style:none;padding:0;margin:36px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);background:var(--glass)}
.about__card-wrap{perspective:1200px;display:flex;justify-content:center}
.tilt{--rx:0deg;--ry:0deg;--px:50%;--py:50%;transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease)}
.tilt.is-tilting{transition:transform .12s linear}
.idcard{position:relative;width:min(380px,100%);aspect-ratio:3/4.2;border-radius:28px;padding:26px;display:flex;flex-direction:column;background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 40%,rgba(227,182,90,.05) 70%,rgba(227,182,90,.08));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 60px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(227,182,90,.35);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden}
.idcard__glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at var(--px) var(--py),rgba(255,255,255,.18),transparent 60%);mix-blend-mode:screen;z-index:3}
.idcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(227,182,90,.12) 45%,rgba(227,182,90,.14) 52%,transparent 62%);background-size:250% 250%;background-position:calc(var(--px) * 1.4) 50%;mix-blend-mode:screen}
.idcard__top{display:flex;justify-content:space-between;transform:translateZ(30px)}
.idcard__avatar{flex:1;display:grid;place-items:center;transform:translateZ(60px);min-height:0}
.idcard__avatar img{width:min(60%,210px);aspect-ratio:1;object-fit:cover;border-radius:50%;border:1px solid var(--line2)}
.avatar{position:relative;width:min(220px,64%);aspect-ratio:1}
.avatar__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.avatar__ring.r1{animation:spin 18s linear infinite;border-top-color:var(--cyan);border-right-color:transparent}
.avatar__ring.r2{inset:13%;animation:spin 12s linear infinite reverse;border-bottom-color:var(--violet);border-left-color:transparent}
.avatar__ring.r3{inset:26%;border-style:dashed;border-color:rgba(255,255,255,.22);animation:spin 30s linear infinite}
.avatar__core{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9c0cc 25%,#3b3f49 60%,#0d0e12 100%);box-shadow:0 0 40px rgba(227,182,90,.35),inset -8px -10px 20px rgba(0,0,0,.6)}
.avatar__scan{position:absolute;left:-10%;right:-10%;height:2px;top:50%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.7;animation:scan 3.6s var(--ease2) infinite;filter:blur(.5px)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scan{0%,100%{top:12%;opacity:0}15%,85%{opacity:.8}50%{top:86%}}
.idcard__name{font-family:var(--display);font-weight:900;font-size:clamp(32px,4vw,44px);letter-spacing:-.05em;line-height:1;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateZ(40px)}
.idcard__rows{margin:16px 0 0;display:grid;gap:8px;transform:translateZ(30px)}
.idcard__rows div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:8px}
.idcard__rows dt{font-family:var(--display);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.idcard__rows dd{margin:0;font-size:13px;color:var(--ink);text-align:right}
.idcard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;transform:translateZ(20px)}
.barcode{width:110px;height:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 2px,transparent 2px 4px,rgba(255,255,255,.7) 4px 5px,transparent 5px 9px,rgba(255,255,255,.7) 9px 12px,transparent 12px 14px);opacity:.55}

/* SERVICES */
.section__head{margin-bottom:clamp(48px,6vw,80px)}
.section__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}
.card{position:relative;border-radius:24px;padding:32px 30px 34px;min-height:320px;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));border:1px solid var(--line);overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(240px circle at var(--px) var(--py),rgba(227,182,90,.6),rgba(227,182,90,.3) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.card__light{position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--px) var(--py),rgba(255,255,255,.09),transparent 45%);opacity:0;transition:opacity .5s}
.card:hover::before,.card:hover .card__light{opacity:1}
.card__num{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--mute);transform:translateZ(20px)}
.card__icon{width:56px;height:56px;margin:40px 0 auto;transform:translateZ(50px);transition:transform .7s var(--ease)}
.card__icon svg,.stat__icon svg,.platform__icon svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.card:hover .card__icon{transform:translateZ(70px) scale(1.06)}
.card h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;margin:36px 0 10px;text-transform:uppercase;line-height:1.05;transform:translateZ(40px)}
.card p{margin:0;color:var(--ink2);font-size:15px;line-height:1.6;transform:translateZ(24px)}
.card--cta{background:linear-gradient(160deg,rgba(227,182,90,.08),rgba(227,182,90,.06) 60%,rgba(255,255,255,.01));justify-content:flex-end}
.card--cta h3{margin-top:auto}
.card--cta .btn{margin-top:24px;align-self:flex-start;transform:translateZ(40px)}

/* WORK */
.work__note{max-width:38ch;margin:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.filter{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);cursor:pointer;transition:all .4s var(--ease)}
.filter:hover{color:var(--ink);border-color:rgba(255,255,255,.35)}
.filter[aria-selected="true"]{background:var(--ink);color:#000;border-color:var(--ink)}
.filter sup{font-size:9px;margin-left:4px;opacity:.6}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(180px,18vw,250px);grid-auto-flow:dense;gap:16px;perspective:1600px}
.tile{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;background:#0d0e13;border:1px solid var(--line);transform:translateZ(0);transition:transform .8s var(--ease),filter .6s var(--ease),opacity .6s var(--ease),box-shadow .8s var(--ease);outline-offset:4px;padding:0;text-align:left;display:block;width:100%;height:100%}
.tile--wide{grid-column:span 2}
.tile--tall{grid-row:span 2}
.tile.is-hidden{display:none}
.tile.is-entering{animation:tileIn .9s var(--ease) both;animation-delay:calc(var(--n) * 50ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(40px) scale(.96)}}
.tile__media{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.tile__media img,.tile__media video{width:100%;height:100%;object-fit:cover}
.tile__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));opacity:.65;transition:opacity .6s}
.tile__info{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tile__cat{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);display:block;transform:translateY(10px);opacity:0;transition:all .6s var(--ease)}
.tile__title{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;display:block;margin-top:4px;transform:translateY(14px);opacity:0;transition:all .6s var(--ease) .05s}
.tile__btn{flex:none;height:36px;padding:0 14px;border-radius:999px;background:var(--ink);color:#000;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;transform:translateY(14px);opacity:0;transition:all .6s var(--ease) .1s}
.tile__badge{position:absolute;top:16px;left:16px;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink2)}
@media (hover:hover){
  .gallery:has(.tile:hover) .tile:not(:hover){filter:blur(3px) brightness(.55);transform:scale(.985)}
  .tile:hover{transform:translateZ(60px) scale(1.02);box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.18);z-index:2}
  .tile:hover .tile__media{transform:scale(1.09)}
  .tile:hover .tile__shade{opacity:1}
  .tile:hover .tile__cat,.tile:hover .tile__title,.tile:hover .tile__btn{transform:none;opacity:1}
}
@media (hover:none){.tile__cat,.tile__title,.tile__btn{transform:none;opacity:1}.tile__btn{display:none}}
.tile:focus-visible .tile__cat,.tile:focus-visible .tile__title,.tile:focus-visible .tile__btn{transform:none;opacity:1}

/* placeholder frames */
.ph{position:absolute;inset:0;overflow:hidden;background:#0b0c11}
.ph::before{content:"";position:absolute;inset:-20%;background:var(--g);filter:blur(30px) saturate(120%);animation:drift 16s var(--ease2) infinite alternate}
.ph::after{content:"";position:absolute;inset:0;background:url(assets/grain.png);opacity:.12;mix-blend-mode:overlay}
@keyframes drift{to{transform:translate3d(6%,-4%,0) rotate(8deg) scale(1.08)}}
.ph__art{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.ph__art svg{width:42%;max-width:150px;height:auto;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.ph__mark{position:absolute;right:16px;top:16px;z-index:1;font-family:var(--display);font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.4);text-transform:uppercase}
.ph--video{--g:radial-gradient(40% 50% at 30% 40%,rgba(227,182,90,.55),transparent 70%),radial-gradient(40% 50% at 75% 65%,rgba(227,182,90,.3),transparent 70%)}
.ph--ai{--g:conic-gradient(from 200deg at 50% 50%,rgba(227,182,90,.4),rgba(227,182,90,.5),rgba(255,120,200,.25),rgba(227,182,90,.4))}
.ph--photo{--g:radial-gradient(50% 50% at 60% 35%,rgba(255,190,140,.35),transparent 70%),radial-gradient(40% 50% at 25% 75%,rgba(120,140,255,.3),transparent 70%)}
.ph--gaming{--g:radial-gradient(45% 55% at 50% 60%,rgba(255,107,61,.45),transparent 70%),radial-gradient(30% 40% at 80% 20%,rgba(255,180,60,.2),transparent 70%)}
.ph--thumb{--g:linear-gradient(130deg,rgba(227,182,90,.35),transparent 45%),linear-gradient(310deg,rgba(255,80,120,.3),transparent 50%)}
.ph--3d{--g:radial-gradient(35% 45% at 40% 40%,rgba(220,225,235,.35),transparent 70%),radial-gradient(40% 50% at 70% 70%,rgba(227,182,90,.4),transparent 70%)}
.lightbox .ph__art svg{max-width:220px}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.lightbox[hidden]{display:none}
.lightbox__bg{position:absolute;inset:0;background:rgba(4,4,6,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);animation:fade .5s var(--ease) both}
.lightbox__frame{position:relative;width:min(1200px,100%);max-height:100%;display:grid;grid-template-columns:1fr 320px;gap:0;border-radius:26px;overflow:hidden;border:1px solid var(--line2);background:#0a0b0f;box-shadow:0 80px 160px -40px #000;animation:lbIn .8s var(--ease) both}
.lightbox__media{position:relative;aspect-ratio:16/10;background:#000;min-height:0}
.lightbox__media img,.lightbox__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lightbox__info{padding:34px 30px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.lightbox__info h3{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;margin:14px 0 0;text-transform:uppercase}
.lightbox__nav{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:30px}
.lightbox__close{position:absolute;top:14px;right:14px;z-index:3;background:rgba(0,0,0,.45)}
@keyframes fade{from{opacity:0}}
@keyframes lbIn{from{opacity:0;transform:translateY(40px) scale(.96)}}

/* LAB */
.lab{position:relative;height:190vh;height:190svh}
.lab__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(70% 60% at 50% 55%,#11121a 0%,var(--bg) 70%)}
.lab__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:-1}
.lab__overlay{position:absolute;left:max(24px,calc((100% - 1240px)/2));top:clamp(90px,14vh,140px);max-width:560px;pointer-events:none}
.lab__title{font-family:var(--display);font-weight:900;font-size:clamp(56px,11vw,180px);line-height:.85;letter-spacing:-.06em;margin:16px 0 0}
.lab__title .ch{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.lab__words{display:flex;flex-direction:column;margin:26px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,32px);letter-spacing:.02em;line-height:1.15}
.lab__words .w{color:rgba(255,255,255,.16);transition:color .8s var(--ease),text-shadow .8s}
.lab__words .w.on{color:var(--ink);text-shadow:0 0 30px rgba(227,182,90,.35)}
.lab__desc{max-width:34ch}
.lab__hint{position:absolute;right:max(24px,calc((100% - 1240px)/2));bottom:34px}
.hint-touch{display:none}
@media (hover:none){.hint-desk{display:none}.hint-touch{display:inline}}

/* GAMING */
.gaming{overflow:hidden;isolation:isolate;background:#070605}
.gaming__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.9}
.gaming__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 70% 60%,rgba(255,107,61,.16),transparent 70%),linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%)}
.gaming__inner{position:relative}
.gaming__title{max-width:12ch}
.gaming__ff{margin-top:clamp(40px,6vw,80px);display:flex;align-items:baseline;gap:10px 24px;flex-wrap:wrap}
.gaming__ff-word{font-family:var(--display);font-weight:900;font-size:clamp(44px,8vw,128px);letter-spacing:-.04em;line-height:.95;background:linear-gradient(180deg,#ffe2d2 0%,#ff9a6b 45%,#ff6b3d 70%,#6e2610 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(255,107,61,.28))}
.gaming__ff-sub{color:#ffb38f}
.gaming__text{max-width:46ch;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(48px,6vw,80px)}
.stat{border-radius:20px;padding:26px 24px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transition:transform .6s var(--ease),border-color .4s}
.stat:hover{transform:translateY(-6px);border-color:rgba(255,140,90,.35)}
.stat .label{color:var(--ink)}
.stat__big{font-family:var(--display);font-weight:900;font-size:64px;letter-spacing:-.05em;line-height:.9;background:linear-gradient(180deg,#fff,#ffb38f 60%,#ff6b3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__icon{width:44px;height:44px}
.stat__icon svg{stroke:#ffc2a3}

/* CREATOR */
.platforms{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;perspective:1400px}
.platform{grid-column:span 2;position:relative;border-radius:22px;padding:28px;min-height:210px;display:flex;flex-direction:column;gap:6px;transition:border-color .4s}
.platform:nth-child(1),.platform:nth-child(2){grid-column:span 3;min-height:260px}
.platform:hover{border-color:rgba(255,255,255,.22)}
.platform__icon{width:46px;height:46px;margin-bottom:auto;transform:translateZ(40px)}
.platform__name{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;text-transform:uppercase;line-height:1;margin-top:40px;transform:translateZ(30px)}
.platform__desc{color:var(--ink2);font-size:14.5px;transform:translateZ(20px)}
.platform__go{position:absolute;top:24px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:all .5s var(--ease)}
a.platform:hover .platform__go{background:var(--ink);color:#000;transform:rotate(45deg)}
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* PROCESS */
.process{position:relative;height:300vh;height:300svh}
.process__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,7vh,80px)}
.process__head .h2{font-size:clamp(40px,6.4vw,96px)}
.timeline{position:relative;perspective:1600px}
.timeline__line{position:absolute;left:0;right:0;top:34px;height:1px;background:var(--line2)}
.timeline__progress{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 12px var(--cyan)}
.timeline__track{list-style:none;margin:0;padding:0 max(24px,calc((100% - 1240px)/2));display:flex;gap:24px;transform:translate3d(var(--x,0),0,0);will-change:transform;transform-style:preserve-3d}
.step{flex:none;width:clamp(300px,34vw,460px);position:relative;padding:76px 32px 36px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid var(--line);transform:rotateY(var(--r,0deg)) translateZ(var(--z,0px));transition:transform .5s var(--ease),border-color .5s,background .5s;transform-origin:center}
.step::before{content:"";position:absolute;left:32px;top:28px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--ink2);transition:all .5s}
.step.on{border-color:rgba(255,255,255,.22);background:linear-gradient(160deg,rgba(227,182,90,.08),rgba(227,182,90,.05) 60%,rgba(255,255,255,.01))}
.step.on::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.step__num{position:absolute;right:28px;top:14px;font-family:var(--display);font-weight:900;font-size:86px;letter-spacing:-.06em;line-height:1;color:rgba(255,255,255,.06)}
.step.on .step__num{color:rgba(255,255,255,.16)}
.step h3{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;text-transform:uppercase;margin:60px 0 12px;line-height:1}
.step p{margin:0;color:var(--ink2);font-size:16px;max-width:30ch}

/* CONTACT */
.contact{overflow:hidden;isolation:isolate}
.contact__orb{position:absolute;width:70vmax;height:70vmax;left:50%;top:55%;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(227,182,90,.16),rgba(227,182,90,.06) 40%,transparent 65%);filter:blur(20px);animation:breathe 9s var(--ease2) infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.12)}}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,100px);align-items:center}
.contact__title{font-family:var(--display);font-weight:900;font-size:clamp(52px,8vw,132px);line-height:.86;letter-spacing:-.055em;margin:18px 0 0}
.contact__title .ch{background:linear-gradient(180deg,#fff 0%,#dfe3ea 45%,#8c93a2 70%,#eef0f4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact__sub{font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,26px);letter-spacing:.02em;color:var(--ink2);margin:24px 0 0;max-width:24ch;line-height:1.25}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.form{border-radius:28px;padding:clamp(24px,3vw,40px);display:grid;gap:14px}
.field{position:relative}
.field input,.field textarea,.field select{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:16px;padding:26px 18px 10px;font-size:16px;color:var(--ink);transition:border-color .3s,background .3s,box-shadow .3s;appearance:none;-webkit-appearance:none}
.field textarea{resize:vertical;min-height:130px}
.field select{cursor:pointer}
.field--select::after{content:"";position:absolute;right:20px;top:26px;width:8px;height:8px;border-right:1.5px solid var(--ink2);border-bottom:1.5px solid var(--ink2);transform:rotate(45deg);pointer-events:none}
.field select option{background:#111;color:var(--ink)}
.field label{position:absolute;left:19px;top:18px;font-size:15px;color:var(--mute);pointer-events:none;transition:all .3s var(--ease);transform-origin:left}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(227,182,90,.6);background:rgba(0,0,0,.35);box-shadow:0 0 0 4px rgba(227,182,90,.08)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field select:focus+label,.field select:valid+label{top:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:rgba(255,110,110,.7)}
.form .btn{margin-top:6px}
.form__status{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink2);min-height:1.5em}
.form__status.is-warn{color:#ffcf9a}
.form__status a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.form__status button{background:none;border:0;padding:0;color:var(--cyan);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* FOOTER */
.footer{position:relative;border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0 34px;overflow:hidden}
.footer__big{font-family:var(--display);font-weight:900;font-size:16.4vw;line-height:.8;letter-spacing:-.065em;text-align:center;white-space:nowrap;margin-left:-.04em}
.footer__big span{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.05) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px}
.footer__social{display:flex;gap:26px}
.footer__social a{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink2);transition:color .3s}
.footer__social a:hover{color:var(--ink)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:140;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:13px 20px;border-radius:999px;background:rgba(20,21,28,.9);border:1px solid var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;transition:all .5s var(--ease);max-width:calc(100% - 40px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* RESPONSIVE */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .lightbox__frame{grid-template-columns:1fr}
  .lightbox__info{border-left:0;border-top:1px solid var(--line);padding:22px 24px}
  .lightbox__info h3{font-size:26px}
  .lightbox__nav{padding-top:18px}
}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(160px,40vw,320px)}}
@media (max-width:760px){
  :root{--wrap:calc(100% - 40px)}
  .nav{padding:14px 20px;gap:12px}
  .nav__cta{display:none}
  .nav__toggle{display:block}
  .nav__name{font-size:14px}
  .hero{align-items:flex-end;min-height:600px}
  .hero__content{padding:0 0 128px}
  .hero__title{font-size:clamp(52px,16.4vw,90px)}
  .hero__subtitle{letter-spacing:.22em;font-size:10.5px;margin-top:22px}
  .hero__desc{font-size:17px;margin-top:16px}
  .hero__small{font-size:12.5px}
  .hero__ctas{margin-top:26px;gap:10px}
  .hero__ctas .btn{flex:1 1 0;padding:0 14px;height:52px;font-size:11.5px;letter-spacing:.12em}
  .hero__corner{display:none}
  .hero__scroll{bottom:22px}
  .hero__scroll i{height:32px}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .about__card-wrap{order:-1}
  .idcard{width:min(320px,100%)}
  .idcard__avatar img{width:min(48%,160px)}
  .cards{grid-template-columns:1fr;gap:14px}
  .card{min-height:0;padding:26px 24px 28px}
  .card__icon{margin:26px 0 0;width:48px;height:48px}
  .card h3{margin-top:28px;font-size:23px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none;scroll-snap-align:start}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw;gap:10px}
  .tile{border-radius:16px}
  .tile__info{left:14px;right:14px;bottom:12px}
  .tile__title{font-size:15px}
  .tile__cat{font-size:9px;letter-spacing:.18em}
  .tile__badge{top:10px;left:10px;font-size:8.5px;padding:5px 8px}
  .ph__mark{display:none}
  .lab{height:150svh}
  .lab__overlay{top:96px;right:20px}
  .lab__desc{display:none}
  .stats{gap:10px}
  .stat{min-height:140px;padding:20px 18px}
  .stat__big{font-size:52px}
  .platforms{grid-template-columns:1fr 1fr;gap:10px}
  .platform,.platform:nth-child(1),.platform:nth-child(2){grid-column:span 1;min-height:170px;padding:20px}
  .platform:nth-child(1),.platform:nth-child(2){grid-column:span 2;min-height:180px}
  .platform__name{font-size:24px;margin-top:28px}
  .platform__desc{font-size:13.5px}
  .platform__go{top:18px;right:18px;width:38px;height:38px}
  .socials .btn,.contact__btns .btn{flex:1 1 auto}
  .process{height:auto}
  .process__sticky{position:relative;height:auto;padding:110px 0 30px}
  .timeline__track{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 10px;transform:none!important;scrollbar-width:none;gap:14px}
  .timeline__track::-webkit-scrollbar{display:none}
  .timeline__line{display:none}
  .step{width:78vw;scroll-snap-align:center;transform:none!important;padding:66px 24px 28px}
  .step__num{font-size:68px}
  .step h3{margin-top:44px}
  .footer__row{flex-direction:column;align-items:flex-start}
  .lightbox{padding:0;align-items:end}
  .lightbox__frame{border-radius:24px 24px 0 0;max-height:94svh;overflow:auto}
  .lightbox__media{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.split .ch{opacity:1;transform:none}
  .grain{animation:none}
}

/* ================= INSTAGRAM ================= */
.ig{overflow:hidden;padding-bottom:clamp(80px,10vw,140px)}
.ig__aura{position:absolute;inset:-10% -20% auto;height:900px;background:radial-gradient(40% 40% at 30% 30%,rgba(227,182,90,.16),transparent 70%),radial-gradient(35% 35% at 75% 45%,rgba(227,182,90,.10),transparent 70%),radial-gradient(30% 30% at 55% 70%,rgba(227,182,90,.10),transparent 70%);pointer-events:none;filter:blur(10px)}
.ig .section__head{margin-bottom:clamp(20px,3vw,40px)}
.ig__intro{max-width:340px;color:var(--ink2)}
.idx{font-variant-numeric:tabular-nums}

/* 3D ring */
.ring3d{position:relative;height:clamp(520px,44vw,620px);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.ring3d.is-drag{cursor:grabbing}
.ring3d__stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 42%;display:grid;place-items:center}
.ring3d__spin{position:relative;width:280px;aspect-ratio:9/16;transform-style:preserve-3d;will-change:transform}
.rcard{--f:1;position:absolute;inset:0;transform-style:preserve-3d;border:0;padding:0;background:none;cursor:inherit;border-radius:22px;color:var(--ink)}
.rcard:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.rcard__front,.rcard__back{position:absolute;inset:0;border-radius:22px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rcard__front{background:#0d0e13;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 70px -30px rgba(0,0,0,.9),0 0 50px -18px rgba(227,182,90,.45)}
.rcard__front::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.05) 35%,rgba(227,182,90,.35) 70%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.rcard__media{position:absolute;inset:0}
.rcard__media img,.rcard__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.8))}
.rcard__dim{position:absolute;inset:0;background:#05050a;opacity:calc((1 - var(--f)) * .42);pointer-events:none}
.rcard__kind{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.rcard__kind svg{width:10px;height:10px;fill:currentColor}
.rcard__title{position:absolute;left:16px;right:16px;bottom:16px;text-align:left;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.rcard__back{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 50%,rgba(227,182,90,.04));border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.rcard__back span{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.04em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.35}
.ring3d__floor{position:absolute;left:50%;bottom:11%;width:min(980px,120%);height:120px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(227,182,90,.28),rgba(227,182,90,.08) 45%,transparent 70%);filter:blur(18px);pointer-events:none}
.ring3d__hint{position:absolute;left:0;right:0;bottom:2%;text-align:center;color:var(--mute)}
.hint-touch{display:none}

/* profile + phone stage */
.ig__stage{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);margin-top:clamp(40px,6vw,90px)}
.ig__profile{display:flex;align-items:center;gap:clamp(28px,4vw,56px)}
.ig__meta{min-width:0}

/* chrome orb */
.orb{--ox:0deg;--oy:0deg;position:relative;flex:none;width:clamp(200px,20vw,280px);aspect-ratio:1;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--ox)) rotateY(var(--oy));transition:transform .9s var(--ease)}
.orb>span{position:absolute;border-radius:50%}
.orb__halo{inset:-28%;background:radial-gradient(closest-side,rgba(227,182,90,.45),rgba(227,182,90,.18) 45%,rgba(227,182,90,.08) 65%,transparent 75%);filter:blur(14px);animation:orbPulse 5s ease-in-out infinite}
.orb__ring{inset:0;background:conic-gradient(from 0deg,#fff,#8a8f9c 12%,#f4f6fa 24%,#585d69 38%,#f6e3b4 50%,#6b707c 62%,#ffffff 74%,#e3b65a 86%,#fff);-webkit-mask:radial-gradient(closest-side,transparent 82%,#000 83.5%,#000 98%,transparent 99.5%);mask:radial-gradient(closest-side,transparent 82%,#000 83.5%,#000 98%,transparent 99.5%);animation:spin 9s linear infinite;box-shadow:0 0 40px rgba(227,182,90,.25)}
.orb__face{inset:10%;overflow:hidden;background:#111;transform:translateZ(30px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 20px 50px -10px rgba(0,0,0,.8),0 0 60px -10px rgba(255,60,60,.35)}
.orb__face img{width:100%;height:100%;object-fit:cover}
.orb__sheen{inset:10%;transform:translateZ(31px);background:radial-gradient(60% 50% at 30% 22%,rgba(255,255,255,.35),transparent 60%),radial-gradient(80% 60% at 70% 110%,rgba(227,182,90,.18),transparent 60%);mix-blend-mode:screen;pointer-events:none}
.orb__orbit{inset:-12%;border:1px solid rgba(255,255,255,.16);transform-style:preserve-3d}
.orb__orbit--a{transform:rotateX(72deg) rotateY(8deg);animation:orbitA 7s linear infinite}
.orb__orbit--b{inset:-4%;border-color:rgba(227,182,90,.22);transform:rotateX(64deg) rotateY(-28deg);animation:orbitB 11s linear infinite}
.orb__orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(227,182,90,.8)}
.orb__orbit--b i{background:var(--violet);box-shadow:0 0 12px 3px rgba(227,182,90,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbitA{from{transform:rotateX(72deg) rotateY(8deg) rotateZ(0)}to{transform:rotateX(72deg) rotateY(8deg) rotateZ(360deg)}}
@keyframes orbitB{from{transform:rotateX(64deg) rotateY(-28deg) rotateZ(360deg)}to{transform:rotateX(64deg) rotateY(-28deg) rotateZ(0)}}
@keyframes orbPulse{50%{opacity:.65;transform:scale(1.06)}}

.ig__handle{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.ig__name{margin:8px 0 0;color:var(--ink2);font-size:15px}
.ig__bio{margin:18px 0 0;padding-left:14px;border-left:2px solid rgba(227,182,90,.55);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;line-height:1.5;color:var(--ink)}
.ig__stats{display:flex;gap:clamp(18px,2.4vw,34px);margin:24px 0 0}
.ig__stats div{display:flex;flex-direction:column-reverse}
.ig__stats dd{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.ig__stats dt{margin-top:6px;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.follow-wrap{margin-top:30px}

/* follow CTA */
.follow{--tx:0px;--ty:0px;position:relative;display:inline-flex;border-radius:999px;padding:1.5px;background:linear-gradient(120deg,#feda75,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5);transition:transform .5s var(--ease);isolation:isolate}
.follow__glow{position:absolute;inset:-6px;border-radius:inherit;background:inherit;filter:blur(18px);opacity:.45;z-index:-1;transition:opacity .4s}
.follow:hover .follow__glow{opacity:.85}
.follow__in{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 28px;border-radius:inherit;background:#0b0b0f;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transform:translate3d(var(--tx),var(--ty),0);transition:background .4s,transform .3s}
.follow:hover .follow__in{background:#141419}
.follow__in svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3}
.follow:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}

/* 3D phone */
.phone-wrap{position:relative;display:grid;place-items:center;perspective:1400px}
.phone{position:relative;width:min(300px,78vw);aspect-ratio:9/19;border-radius:46px;padding:10px;background:linear-gradient(145deg,#f4f6fa,#7c818e 22%,#2a2c33 50%,#9aa0ad 78%,#e9ecf2);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 60px 90px -40px rgba(0,0,0,.95),0 0 80px -20px rgba(227,182,90,.4);transform:perspective(1400px) rotateX(calc(var(--rx) + 6deg)) rotateY(calc(var(--ry) - 14deg));animation:phoneFloat 7s ease-in-out infinite}
.phone::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:64px;border-radius:2px;background:#8a8f9c}
.phone__screen{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#000;transform:translateZ(1px)}
.phone__island{position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#000;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.phone__glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 40% at var(--px) var(--py),rgba(255,255,255,.22),transparent 60%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 48%,transparent 56%);z-index:4;pointer-events:none;mix-blend-mode:screen}
.phone__shadow{position:absolute;bottom:-40px;left:50%;width:70%;height:40px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.8),transparent);filter:blur(6px)}
@keyframes phoneFloat{50%{translate:0 -12px}}
.feed{height:100%;padding:44px 12px 0;overflow:hidden;font-family:var(--sans);color:#f5f5f5;font-size:11px;background:#000}
.feed__bar{display:flex;justify-content:space-between;align-items:center;padding:0 2px 10px}
.feed__user{font-weight:700;font-size:13.5px}
.feed__dots{letter-spacing:1px;color:#aaa}
.feed__head{display:flex;align-items:center;gap:14px}
.feed__pic{flex:none;width:64px;height:64px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.feed__pic img{width:100%;height:100%;border-radius:50%;border:2px solid #000;object-fit:cover}
.feed__nums{flex:1;display:flex;justify-content:space-around;text-align:center}
.feed__nums div{display:flex;flex-direction:column;gap:1px}
.feed__nums b{font-size:13px}
.feed__nums span{color:#bbb;font-size:10px}
.feed__name{margin:10px 0 0;font-weight:700;font-size:11.5px}
.feed__role{margin:1px 0 0;color:#9a9a9a;font-size:10.5px}
.feed__bio{margin:2px 0 0;font-size:10.5px;line-height:1.35}
.feed__follow{display:block;margin:10px 0 0;height:28px;line-height:28px;border-radius:8px;background:#4f5bd5;background:linear-gradient(90deg,#5b51d8,#833ab4);text-align:center;font-weight:700;font-size:11.5px;color:#fff}
.feed__tabs{display:flex;margin:12px -12px 2px;border-bottom:1px solid #222}
.feed__tabs span{flex:1;height:26px;position:relative}
.feed__tabs span::after{content:"";position:absolute;left:50%;top:7px;width:12px;height:12px;margin-left:-6px;border:1.5px solid #777;border-radius:3px}
.feed__tabs span.on{box-shadow:inset 0 -1px 0 #fff}
.feed__tabs span.on::after{border-color:#fff}
.feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 -12px}
.feed__cell{position:relative;aspect-ratio:3/4;padding:0;border:0;background:#111;overflow:hidden;cursor:pointer}
.feed__cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.feed__cell:hover img{transform:scale(1.06)}
.feed__reel{position:absolute;top:5px;right:5px;width:14px;height:14px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.feed__reel svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}

/* lightbox IG link + contact DM line */
.lb-ig{display:inline-flex;align-items:center;gap:10px;margin-top:16px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background .3s,border-color .3s}
.lb-ig:hover{background:var(--glass2);border-color:rgba(255,255,255,.32)}
.lb-ig[hidden]{display:none}
.lb-ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3}
.contact__dm{margin:22px 0 0;color:var(--ink2);font-size:14px}
.contact__dm a{color:var(--ink);border-bottom:1px solid var(--line2)}
.form__status a{color:var(--ink);text-decoration:underline}

@media (max-width:1024px){
  .ig__stage{grid-template-columns:1fr;justify-items:center}
  .ig__profile{flex-direction:column;text-align:center}
  .ig__bio{border-left:0;padding-left:0}
  .ig__stats{justify-content:center}
}
@media (max-width:760px){
  .ring3d{height:470px;margin-top:4px}
  .ring3d__spin{width:168px}
  .ring3d__stage{perspective:1000px}
  .rcard,.rcard__front,.rcard__back{border-radius:18px}
  .rcard__title{font-size:14px;left:12px;right:12px;bottom:12px}
  .rcard__kind{top:10px;left:10px;height:22px;font-size:9px;padding:0 8px}
  .rcard__front{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 50px -24px rgba(0,0,0,.9)}
  .ring3d__floor{bottom:10%;height:90px}
  .ig__intro{max-width:none}
  .orb{width:200px}
  .phone{width:min(270px,74vw);border-radius:42px}
  .phone__screen{border-radius:33px}
  .follow__in{height:54px;padding:0 24px;font-size:12px}
}
@media (hover:none){.hint-desk{display:none}.hint-touch{display:inline}}
@media (prefers-reduced-motion:reduce){
  .orb__ring,.orb__orbit,.orb__halo,.phone{animation:none}
}

/* ================= v2 ================= */
:root{--accent:#e3b65a;--accent-rgb:227,182,90;--gold2:#f3d9a0}
.btn--sm{height:44px;padding:0 18px;font-size:11.5px}
.nav__cta.btn--solid{color:#07070a}
.hero__path{margin-top:26px;color:var(--mute)}
.hero__ctas--3{margin-top:12px;flex-wrap:wrap}
.hero__desc{font-family:var(--display);font-weight:800;letter-spacing:.02em}
.sig{display:block;margin-top:12px;font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;font-size:26px;font-style:italic;color:var(--accent);letter-spacing:0}

/* logo slot */
.logo-slot{display:none}
.logo-slot.is-on{display:block;perspective:600px;margin-bottom:14px}
.logo-slot--loader.is-on{margin:0 auto 18px;width:84px}
.logo-slot--hero.is-on{width:72px}
.logo3d{position:relative;display:block;transform-style:preserve-3d;animation:logoSpin 9s linear infinite}
.logo3d img{display:block;width:100%;filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.35))}
.logo3d__back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:brightness(.6)}
@keyframes logoSpin{to{transform:rotateY(360deg)}}

/* project tiles */
.tile__num{position:absolute;top:14px;right:14px;z-index:3;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.tile__sub{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.75);max-width:34ch}
.tile__meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11px;color:rgba(255,255,255,.8)}
.tile__meta em{font-style:normal;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.lightbox #lb-desc{white-space:pre-line}
.lb-ig.is-yt svg{display:none}

/* 360 identity */
.ident{overflow:hidden}
.ident__rim{position:absolute;left:50%;top:30%;width:900px;height:900px;transform:translateX(-60%);background:radial-gradient(closest-side,rgba(var(--accent-rgb),.12),transparent 70%);pointer-events:none}
.ident__note{max-width:360px;color:var(--ink2)}
.ident__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.spin{position:relative;height:clamp(460px,48vw,640px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.spin.is-drag{cursor:grabbing}
.spin__stage{position:absolute;inset:0 0 12% 0;perspective:1200px}
.spin__stage::before{content:"";position:absolute;left:50%;bottom:4%;width:300px;height:78%;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.20),transparent 70%);filter:blur(10px)}
.spin__set{position:absolute;inset:0;opacity:0;transform:scale(.94);filter:blur(8px);transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease);--tw:0deg}
.spin__set.on{opacity:1;transform:none;filter:none}
.spin__set.out{opacity:0;transform:scale(1.04);filter:blur(10px)}
.spin__img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%) rotateY(var(--tw));opacity:0;transition:opacity .22s linear;-webkit-box-reflect:below -4px linear-gradient(transparent 72%,rgba(0,0,0,.22))}
.spin__img.on{opacity:1}
.spin__floor{position:absolute;left:50%;bottom:9%;width:min(520px,90%);height:70px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.28),rgba(255,255,255,.04) 60%,transparent);filter:blur(4px)}
.spin__floor::after{content:"";position:absolute;inset:18% 12%;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.35)}
.spin__dial{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);display:flex;gap:8px}
.spin__dial i{width:18px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
.spin__dial i.on{background:var(--accent);width:30px}
.spin__hint{position:absolute;right:0;top:0;color:var(--mute)}
.fits{display:flex;gap:10px;flex-wrap:wrap}
.fit{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 8px;border-radius:99px;border:1px solid var(--line2);background:var(--glass);color:var(--ink);font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,background .3s}
.fit[aria-checked="true"]{border-color:var(--accent);background:rgba(var(--accent-rgb),.10)}
.fit__sw{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.fit__sw--black{background:linear-gradient(135deg,#2a2a2e,#050505)}
.fit__sw--yellow{background:linear-gradient(135deg,#ffd75a,#c99a12)}
.fit__sw--white{background:linear-gradient(135deg,#ffffff,#bfc3cc)}
.look{margin-top:30px}
.look__face{position:relative;width:min(320px,100%);aspect-ratio:8/7;border-radius:22px;overflow:hidden;border:1px solid var(--line2);background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.02)}
.look__face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.look__label{position:absolute;left:12px;bottom:10px;padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.55);color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.look__strip{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.look__strip span{flex:none;width:52px;aspect-ratio:8/7;border-radius:10px;overflow:hidden;border:1px solid var(--line);opacity:.5;transition:opacity .3s,border-color .3s;cursor:pointer}
.look__strip span.on{opacity:1;border-color:var(--accent)}
.look__strip img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* marketplace */
.market__note{max-width:380px;color:var(--ink2)}
.market__ui{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.market__cats{display:flex;flex-direction:column;gap:6px}
.mcat{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid transparent;background:none;color:var(--ink2);text-align:left;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.mcat:hover{background:var(--glass)}
.mcat.on{background:var(--glass2);border-color:var(--line2);color:var(--ink)}
.mcat__icon{font-size:20px;line-height:1}
.mcat__name{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.005em}
.mcat__from{font-size:12px;color:var(--mute)}
.mcat.on .mcat__from{color:var(--accent)}
.market__stage{position:relative;perspective:1600px;min-height:520px}
.mcard{position:relative;z-index:2;border-radius:28px;padding:clamp(24px,3vw,40px);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 45%,rgba(var(--accent-rgb),.05));border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 50px 90px -40px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.mcard__ghost{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:28px;border:1px solid var(--line);background:rgba(255,255,255,.02);pointer-events:none}
.mcard__ghost--1{transform:translate3d(18px,18px,-60px) rotateY(-4deg);opacity:.7;z-index:1}
.mcard__ghost--2{transform:translate3d(36px,36px,-120px) rotateY(-8deg);opacity:.4;z-index:0}
.mcard.flip-out{transition:transform .22s ease-in,opacity .22s;transform:perspective(1400px) rotateY(-80deg) translateZ(-40px);opacity:0}
.mcard.flip-out-r{transition:transform .22s ease-in,opacity .22s;transform:perspective(1400px) rotateY(80deg) translateZ(-40px);opacity:0}
.mcard.flip-in{animation:flipIn .6s var(--ease)}
.mcard.flip-in-r{animation:flipInR .6s var(--ease)}
@keyframes flipIn{from{transform:perspective(1400px) rotateY(80deg) translateZ(-40px);opacity:0}to{transform:perspective(1400px);opacity:1}}
@keyframes flipInR{from{transform:perspective(1400px) rotateY(-80deg) translateZ(-40px);opacity:0}to{transform:perspective(1400px);opacity:1}}
.mcard__in{transform:translateZ(30px)}
.mcard__head{display:flex;justify-content:space-between;align-items:center}
.mcard__icon{font-size:34px}
.mcard__title{margin:14px 0 18px;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1;text-transform:uppercase}
.mrows{list-style:none;margin:0;padding:0}
.mrows li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.mrow__name{font-size:15px;color:var(--ink)}
.mrow__price{font-family:var(--display);font-weight:800;font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.mrow__go{height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);background:none;color:var(--ink2);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.mrow__go:hover{background:var(--ink);color:#07070a;border-color:var(--ink)}
.mcard__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* gaming world */
.gw{overflow:hidden}
.gw__bg{position:absolute;inset:0;background:radial-gradient(50% 40% at 30% 50%,rgba(var(--accent-rgb),.10),transparent 70%);pointer-events:none}
.gw__note{max-width:360px;color:var(--ink2)}
.gw__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.holo{position:relative;height:clamp(520px,50vw,680px);perspective:1100px;touch-action:pan-y}
.holo__plane{--hx:0;--hy:0;position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--hx) * 14deg)) rotateX(calc(var(--hy) * -8deg))}
.holo__floor{position:absolute;left:50%;bottom:6%;width:78%;height:28%;transform:translateX(-50%) rotateX(74deg);transform-origin:50% 100%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.32) 0 1px,transparent 1px 22px),radial-gradient(closest-side,rgba(var(--accent-rgb),.25),transparent);-webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent)}
.holo__ring{position:absolute;left:50%;bottom:10%;width:64%;aspect-ratio:1;margin-left:-32%;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.5);transform:rotateX(76deg) translateZ(-10px);box-shadow:0 0 30px rgba(var(--accent-rgb),.35),inset 0 0 30px rgba(var(--accent-rgb),.25);animation:ringSpin 10s linear infinite}
.holo__ring--2{width:44%;margin-left:-22%;bottom:14%;border-style:dashed;opacity:.6;animation-duration:16s;animation-direction:reverse}
@keyframes ringSpin{from{transform:rotateX(76deg) rotateZ(0)}to{transform:rotateX(76deg) rotateZ(360deg)}}
.holo__glow{position:absolute;left:50%;top:14%;width:56%;height:70%;margin-left:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.28),transparent 70%);filter:blur(20px);transform:translateZ(-80px)}
.holo__scan{position:absolute;left:20%;right:20%;top:10%;bottom:12%;transform:translateZ(62px);background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.10) 48%,rgba(var(--accent-rgb),.35) 50%,rgba(var(--accent-rgb),.10) 52%,transparent);background-size:100% 300%;animation:scan 4.5s linear infinite;mix-blend-mode:screen;-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);pointer-events:none}
@keyframes scan{from{background-position:0 100%}to{background-position:0 0}}
.holo__particles i{position:absolute;bottom:14%;left:calc(20% + (var(--i,0) * 1%));width:3px;height:3px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:0;animation:rise 5s linear infinite}
.holo__particles i:nth-child(1){left:24%;animation-delay:0s}.holo__particles i:nth-child(2){left:31%;animation-delay:.7s}.holo__particles i:nth-child(3){left:38%;animation-delay:1.6s}.holo__particles i:nth-child(4){left:45%;animation-delay:2.4s}.holo__particles i:nth-child(5){left:52%;animation-delay:.3s}.holo__particles i:nth-child(6){left:59%;animation-delay:1.1s}.holo__particles i:nth-child(7){left:66%;animation-delay:2s}.holo__particles i:nth-child(8){left:73%;animation-delay:3s}.holo__particles i:nth-child(9){left:28%;animation-delay:3.6s}.holo__particles i:nth-child(10){left:48%;animation-delay:4.1s}.holo__particles i:nth-child(11){left:62%;animation-delay:3.3s}.holo__particles i:nth-child(12){left:70%;animation-delay:1.9s}.holo__particles i:nth-child(13){left:35%;animation-delay:2.8s}.holo__particles i:nth-child(14){left:56%;animation-delay:4.6s}
@keyframes rise{0%{transform:translate3d(0,0,40px);opacity:0}15%{opacity:.9}100%{transform:translate3d(10px,-380px,40px);opacity:0}}
@keyframes bob{50%{translate:0 -6px}}
.holo__hint{position:absolute;left:0;right:0;bottom:0;text-align:center;color:var(--mute)}
.gw__side{display:flex;flex-direction:column;gap:16px}
.pcard{border-radius:24px;padding:24px}
.pcard__top{display:flex;justify-content:space-between}
.pcard__top .label:last-child{color:var(--accent)}
.pcard__name{margin-top:10px;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.pcard__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin:20px 0 0}
.pcard__stats div{border-top:1px solid var(--line);padding-top:8px}
.pcard__stats dt{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.pcard__stats dd{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.pcard__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.gbadge{padding:7px 12px;border-radius:99px;border:1px solid rgba(var(--accent-rgb),.4);color:var(--gold2);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.loadout{border-radius:24px;padding:22px 24px}
.loadout__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.weapon{position:relative;padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid var(--line);overflow:hidden}
.weapon::after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.25),transparent)}
.weapon__n{display:block}
.weapon__name{display:block;margin-top:6px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.loadout__meta{display:flex;gap:28px;margin:14px 0 0}
.loadout__meta dt{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.loadout__meta dd{margin:4px 0 0;font-weight:600}
.rooms{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;border:1px solid rgba(var(--accent-rgb),.45);background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(255,255,255,.01))}
.rooms .label{color:var(--accent)}
.rooms__title{margin:6px 0 8px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.rooms__btns{display:flex;gap:10px;flex-wrap:wrap}

/* AI lab cards */
.labcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.labcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));min-height:240px;transition:border-color .4s,transform .6s var(--ease)}
.labcard:hover{border-color:var(--line2);transform:translateY(-4px)}
.labcard__name{margin:0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.labcard__text{margin:0;color:var(--ink2);font-size:14px;line-height:1.5;flex:1}
.labcard__btns{display:flex;flex-wrap:wrap;gap:8px}
.lbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lbtn i{font-style:normal;color:var(--accent)}
a.lbtn:hover{background:var(--ink);color:#07070a}
.lbtn.is-soon{color:var(--mute);border-style:dashed}
.lbtn.is-soon i{color:var(--mute);font-size:9px}

/* store */
.store__note{max-width:380px;color:var(--ink2)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1400px}
.prod{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));min-height:230px;overflow:hidden}
.prod__glare{position:absolute;inset:0;background:radial-gradient(40% 40% at var(--px) var(--py),rgba(255,255,255,.10),transparent 70%);pointer-events:none}
.prod__icon{font-size:30px;transform:translateZ(40px)}
.prod__name{margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;text-transform:uppercase;transform:translateZ(30px)}
.prod__note{margin:0;color:var(--ink2);font-size:14px;flex:1}
.prod__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;transform:translateZ(20px)}
.prod__price{font-family:var(--display);font-weight:800;font-size:18px;color:var(--accent)}

/* setup + bts */
.setup{display:grid;grid-template-columns:1.5fr 1fr;grid-template-areas:"head head" "stage bts";gap:24px clamp(24px,4vw,60px);margin-top:clamp(70px,9vw,120px);align-items:center}
.setup__head{grid-area:head}
.setup__title{margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,40px);letter-spacing:-.03em;line-height:1.05}
.setup__stage{grid-area:stage;position:relative;perspective:1600px;padding:20px 0 60px}
.laptop{--lx:0deg;--ly:0deg;--open:1;position:relative;width:min(640px,100%);margin:0 auto;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--lx))) rotateY(calc(-10deg + var(--ly)));transition:transform .8s var(--ease)}
.laptop__lid{position:relative;padding:12px 12px 16px;border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#3a3d45,#121318 40%,#1c1e24);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -10px rgba(var(--accent-rgb),.35);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--open)) * -24deg))}
.laptop__screen{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.laptop__screen video{width:100%;height:100%;object-fit:cover;display:block}
.laptop__glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 35%);pointer-events:none}
.laptop__base{position:relative;height:18px;margin:0 -6%;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#4a4d56,#17181d);transform-origin:50% 0;transform:rotateX(80deg) translateZ(0);box-shadow:0 30px 40px -10px rgba(0,0,0,.8)}
.laptop__base span{position:absolute;left:50%;top:0;width:18%;height:5px;margin-left:-9%;border-radius:0 0 6px 6px;background:#0d0e12}
.laptop__glow{position:absolute;left:10%;right:10%;bottom:-40px;height:60px;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.35),transparent);filter:blur(12px)}
.setup__chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 0;padding:0}
.setup__chips li{padding:8px 14px;border-radius:99px;border:1px solid var(--line2);background:var(--glass);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;animation:bob 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)}
.setup__chips li:first-child{border-color:rgba(var(--accent-rgb),.6);color:var(--gold2)}
.bts{grid-area:bts;margin:0}
.bts__frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4.4;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
.bts__frame img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.9)}
.bts__bars{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000 0 6%,transparent 6% 94%,#000 94%)}
.bts figcaption{margin-top:12px}

/* youtube card */
.ytcard{display:block;border-radius:24px;overflow:hidden;border:1px solid var(--line2);background:#0c0c10;margin-bottom:24px;transition:border-color .4s,transform .6s var(--ease)}
.ytcard:hover{border-color:rgba(255,255,255,.3);transform:translateY(-4px)}
.ytcard__banner{display:block;aspect-ratio:6.04/1;overflow:hidden}
.ytcard__banner img{width:100%;height:100%;object-fit:cover}
.ytcard__row{display:flex;align-items:center;gap:18px;padding:18px 22px}
.ytcard__avatar{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid #0c0c10;margin-top:-46px;box-shadow:0 0 0 1px var(--line2)}
.ytcard__avatar img{width:100%;height:100%;object-fit:cover}
.ytcard__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ytcard__name{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.ytcard__meta{font-size:13px;color:var(--ink2)}
.ytcard__meta b{color:var(--ink)}
.ytcard__tag{font-size:13px;color:var(--mute)}
.ytcard__sub{flex:none;height:42px;line-height:42px;padding:0 18px;border-radius:99px;background:var(--ink);color:#07070a;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* work with me flow */
.contact__title{font-size:clamp(46px,7vw,108px)}
.contact__btns{flex-wrap:wrap}
.flow{border-radius:26px;padding:clamp(22px,3vw,34px);min-height:440px;display:flex;flex-direction:column}
.flow__top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.flow__bar{flex:1;height:2px;border-radius:2px;background:var(--line2);overflow:hidden}
.flow__bar span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(.16);transition:transform .6s var(--ease)}
#flow-form{display:flex;flex-direction:column;flex:1}
.fstep{display:none;border:0;margin:0;padding:0;min-width:0;flex:1}
.fstep.is-on{display:block;animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.fstep__q{padding:0;margin-bottom:18px;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.fstep__help{margin:-6px 0 16px;color:var(--ink2);font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--line2);background:var(--glass);color:var(--ink);font-family:var(--display);font-size:13px;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.pill:hover{border-color:rgba(255,255,255,.35)}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#0b0904}
.flow__nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.flow__nav[hidden]{display:none}
.flow__back:disabled{opacity:.3;cursor:default}
.fdone{text-align:left;animation:stepIn .5s var(--ease)}
.fdone[hidden]{display:none}
.fdone__tick{width:56px;height:56px;margin:0 0 12px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0b0904;font-size:28px;font-weight:800}
.fdone__title{margin:0;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.fdone__text{margin:8px 0 14px;color:var(--ink2)}
.fdone__summary{margin:0 0 18px;padding:14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink2);white-space:pre-wrap;max-height:200px;overflow:auto}
.fdone__btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fdone__mail{color:var(--ink);border-bottom:1px solid var(--line2);font-size:14px}
.fdone__mail[hidden],#flow-wa[hidden]{display:none}
.fdone__again{margin-top:18px;background:none;border:0;padding:0;color:var(--mute);font-size:13px;text-decoration:underline;cursor:pointer}

/* floating WhatsApp */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:99px;background:#25d366;color:#04140a;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 1px rgba(255,255,255,.15);transition:transform .4s var(--ease)}
.wa-float:hover{transform:translateY(-3px)}
.wa-float svg{width:24px;height:24px}
.wa-float[hidden]{display:none}

@media (max-width:1024px){
  .ident__grid,.gw__grid,.market__ui{grid-template-columns:1fr}
  .market__cats{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
  .mcat{flex:none;width:auto;grid-template-columns:auto auto;gap:8px;padding:10px 14px;border-color:var(--line);scroll-snap-align:center}
  .mcat__from{display:none}
  .labcards,.shelf{grid-template-columns:1fr 1fr}
  .setup{grid-template-columns:1fr;grid-template-areas:"head" "stage" "bts"}
  .bts{max-width:420px}
}
@media (max-width:760px){
  .hero__ctas--3 .btn{flex:1 1 30%;padding:0 10px;font-size:10.5px;letter-spacing:.08em}
  .spin{height:440px}
  .spin__hint{top:auto;bottom:-6px;right:auto;left:0}
  .look__face{width:min(260px,100%);margin:0 auto}
  .look__strip{justify-content:center}
  .fits{justify-content:center;gap:6px}
  .fit{height:40px;padding:0 12px 0 6px;font-size:10px;letter-spacing:.12em;gap:6px}
  .fit__sw{width:26px;height:26px}
  .market__stage{min-height:0}
  .mcard__ghost{display:none}
  .mrows li{grid-template-columns:1fr auto 34px;gap:10px;padding:12px 0}
  .mrow__name{font-size:14px}
  .mrow__price{font-size:14px}
  .mrow__go{width:34px;height:34px;padding:0;font-size:0;letter-spacing:0;display:grid;place-items:center}
  .mrow__go i{font-size:14px;font-style:normal}
  .mcard__foot .btn{width:100%}
  .holo{height:500px}
  .pcard__stats{grid-template-columns:1fr 1fr}
  .labcards,.shelf{grid-template-columns:1fr}
  .labcard,.prod{min-height:0}
  .ytcard__row{flex-wrap:wrap;padding:14px 16px}
  .ytcard__avatar{width:60px;height:60px;margin-top:-38px}
  .ytcard__sub{width:100%;text-align:center}
  .flow{min-height:0}
  .wa-float{right:14px;bottom:14px;height:50px;padding:0 14px}
  .wa-float span{display:none}
  .gallery{grid-auto-rows:38vw}
  .laptop{transform:rotateX(calc(6deg + var(--lx))) rotateY(var(--ly))}
}
@media (prefers-reduced-motion:reduce){
  .holo__ring,.holo__scan,.holo__particles i,.setup__chips li,.logo3d{animation:none!important}
}

.ident__grid>*,.gw__grid>*,.market__ui>*,.setup>*{min-width:0}
.footer__social{flex-wrap:wrap;gap:14px 22px}
.laptop{width:min(640px,90%)}
.look__strip{max-width:100%}

/* WhatsApp username chip */
.wa-chip{margin-top:22px}
.wa-chip__btn{display:inline-flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;border-radius:16px;border:1px solid var(--line2);background:var(--glass);color:var(--ink);cursor:pointer;text-align:left;transition:border-color .3s,background .3s}
.wa-chip__btn:hover{border-color:rgba(var(--accent-rgb),.6);background:var(--glass2)}
.wa-chip__btn svg{width:26px;height:26px;color:#25d366;flex:none}
.wa-chip__btn span{display:flex;flex-direction:column;line-height:1.2}
.wa-chip__btn em{font-style:normal;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.wa-chip__btn b{font-family:var(--display);font-size:17px;font-weight:800}
.wa-chip__copy{margin-left:6px;padding:5px 10px;border-radius:99px;background:var(--accent);color:#0b0904;font-style:normal;font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.wa-chip__line{margin:8px 0 0;font-size:13px;color:var(--mute)}
.footer__wa{background:none;border:0;padding:0;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink2);cursor:pointer}
.footer__wa:hover{color:var(--ink)}
.fdone__btns .btn{height:50px}
.fdone__copy{height:50px;padding:0 18px;border-radius:99px;border:1px dashed var(--line2);background:none;color:var(--ink);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.fdone__hint{margin:12px 0 0;font-size:12.5px;color:var(--mute)}
#flow-mail[hidden],#flow-dm[hidden]{display:none}
@media (max-width:760px){.fdone__btns{flex-direction:column;align-items:stretch}.fdone__btns .btn,.fdone__copy{width:100%}}

/* help + palette */
.nav__search{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;margin-left:auto;margin-right:10px;border-radius:99px;border:1px solid var(--line2);background:var(--glass);color:var(--ink2);cursor:pointer}
.nav__search svg{width:18px;height:18px}
.nav__search kbd{font-family:var(--sans);font-size:11px;color:var(--mute)}
.help__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start}
.help__note{color:var(--ink2)}
.help__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.help__search{display:flex;align-items:center;gap:12px;height:58px;padding:0 18px;border-radius:18px;border:1px solid var(--line2);background:var(--glass);transition:border-color .3s}
.help__search:focus-within{border-color:var(--accent)}
.help__search svg{width:20px;height:20px;color:var(--mute);flex:none}
.help__search input,.palette__in input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:500 16px var(--sans);outline:none}
.faq{margin-top:14px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:16px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{font-style:normal;color:var(--accent);font-size:20px;transition:transform .3s}
.faq__item[open] summary i{transform:rotate(45deg)}
.faq__item p{margin:0 0 18px;color:var(--ink2);line-height:1.6}
mark{background:rgba(var(--accent-rgb),.28);color:var(--ink);border-radius:3px;padding:0 2px}
.faq__empty{color:var(--mute)}
.faq__empty a{color:var(--ink);text-decoration:underline}
.palette{position:fixed;inset:0;z-index:200;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px}
.palette[hidden]{display:none}
.palette__bg{position:absolute;inset:0;background:rgba(3,3,5,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.palette__box{position:relative;width:min(640px,100%);border-radius:20px;border:1px solid var(--line2);background:#0e0e12;box-shadow:0 40px 100px -20px rgba(0,0,0,.9);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:12px;height:62px;padding:0 18px;border-bottom:1px solid var(--line)}
.palette__in svg{width:20px;height:20px;color:var(--mute)}
.palette__in kbd{font-family:var(--sans);font-size:11px;color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:2px 6px}
.palette__list{list-style:none;margin:0;padding:8px;max-height:min(60vh,460px);overflow:auto}
.palette__list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:12px;cursor:pointer}
.palette__list li[aria-selected="true"],.palette__list li:hover{background:var(--glass2)}
.pal__kind{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal__t{font-size:15px}
.pal__p{font-family:var(--display);font-weight:800;color:var(--accent);white-space:nowrap}
.pal__none{color:var(--mute);cursor:default}
@media (max-width:1024px){.help__grid{grid-template-columns:1fr}.nav__search kbd{display:none}.nav__search{padding:0;width:40px;justify-content:center}}
@media (max-width:760px){.palette{padding-top:8vh}.pal__kind{max-width:80px}}

/* sound toggle */
.nav__sound{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px;margin-left:auto;margin-right:8px;border-radius:99px;border:1px solid var(--line2);background:var(--glass);color:var(--ink2);cursor:pointer;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:border-color .3s,color .3s}
.nav__sound em{font-style:normal}
.nav__sound + .nav__search{margin-left:0}
.nav__sound.is-on{border-color:rgba(var(--accent-rgb),.6);color:var(--ink)}
.nav__sound.is-hint{animation:sndHint 1.2s ease-in-out 3}
@keyframes sndHint{50%{border-color:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.15)}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:2.5px;height:3px;border-radius:2px;background:currentColor;transition:height .3s}
.nav__sound.is-on .eq i{background:var(--accent);animation:eq 1s ease-in-out infinite}
.nav__sound.is-on .eq i:nth-child(2){animation-delay:-.4s}.nav__sound.is-on .eq i:nth-child(3){animation-delay:-.7s}.nav__sound.is-on .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
@media (max-width:1024px){.nav__sound em{display:none}.nav__sound{width:40px;padding:0;justify-content:center}}
@media (prefers-reduced-motion:reduce){.nav__sound.is-on .eq i{animation:none;height:9px}}
.eq i:nth-child(1){height:5px}.eq i:nth-child(2){height:9px}.eq i:nth-child(3){height:6px}.eq i:nth-child(4){height:11px}
.nav__sound:not(.is-on) .eq{opacity:.6}
@media (max-width:760px){
  .hero__ctas--3{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;flex-wrap:wrap;overflow:visible}
  .hero__ctas--3 .btn{width:100%;min-width:0;padding:0 12px;justify-content:center}
  .hero__ctas--3 .btn:first-child{grid-column:1 / -1}
}

/* =========================================================
   v3: sound plays once + desktop motion layer
   ========================================================= */
/* sound: progress line while the ~20 s track plays, then a Replay chip */
.nav__sound{position:relative;overflow:hidden}
.nav__sound::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--mp,0));opacity:0;transition:opacity .4s}
.nav__sound.is-playing::after{opacity:.9}
.nav__sound.is-on:not(.is-playing) .eq i{animation:none}
.nav__replay{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;margin-right:8px;border-radius:99px;border:1px solid rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.1);color:var(--gold2);cursor:pointer;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateX(-6px) scale(.92);transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s}
.nav__replay[hidden]{display:none}
.nav__replay.is-in{opacity:1;transform:none}
.nav__replay:hover{background:rgba(var(--accent-rgb),.2)}
.nav__replay svg{width:15px;height:15px}
.nav__replay em{font-style:normal}
@media (max-width:1024px){.nav__replay em{display:none}.nav__replay{width:40px;padding:0;justify-content:center}}

/* cursor modes */
.cursor__ring{scale:1;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s,border-color .4s,scale .25s var(--ease)}
.cursor.is-view .cursor__ring{background:var(--accent);border-color:var(--accent);box-shadow:0 0 30px rgba(var(--accent-rgb),.35)}
.cursor.is-view .cursor__label{color:#0b0b0d}
.cursor.is-view .cursor__dot{opacity:0}
.cursor.is-drag .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px}
.cursor.is-drag .cursor__label::before{content:"← "}.cursor.is-drag .cursor__label::after{content:" →"}
.cursor.is-play .cursor__label::before{content:"▶ "}
.cursor.is-mag .cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(var(--accent-rgb),.85);background:rgba(var(--accent-rgb),.08)}
.cursor.is-down .cursor__ring{scale:.82}
.cursor__dot{transition:opacity .25s}

/* hidden SVG filter defs */
.fx-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* hero: zoom flash + depth shards */
.hero__content{z-index:1}
.hero__zoomflash{position:absolute;inset:-10%;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(243,217,160,.75) 0%,rgba(227,182,90,.35) 14%,rgba(227,182,90,.08) 30%,var(--bg) 58%)}
.hero__shards{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__shards i{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle,#f6e2a8 0%,rgba(227,182,90,.6) 40%,transparent 70%)}
.hero__shards i:nth-child(1){left:8%;top:18%;width:10px;height:10px;filter:blur(1px)}
.hero__shards i:nth-child(2){left:46%;top:12%;width:4px;height:4px}
.hero__shards i:nth-child(3){left:62%;top:78%;width:16px;height:16px;filter:blur(3px);opacity:.6}
.hero__shards i:nth-child(4){left:88%;top:22%;width:6px;height:6px}
.hero__shards i:nth-child(5){left:30%;top:86%;width:5px;height:5px}
.hero__shards i:nth-child(6){left:78%;top:58%;width:26px;height:26px;filter:blur(6px);opacity:.45}
.hero__shards i:nth-child(7){left:54%;top:40%;width:3px;height:3px}
.hero__shards i:nth-child(8){left:18%;top:62%;width:120px;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(227,182,90,.55),transparent)}
.hero__shards i:nth-child(9){left:70%;top:9%;width:180px;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(243,217,160,.5),transparent)}
.fx-desk .hero__canvas{will-change:transform}

/* split headings: 3D letter flip + one gold sheen */
.fx-split.split-wrap{perspective:700px}
.fx-desk .split.fx-split .ch{transition:none;will-change:transform,opacity}
.fx-sheen{position:relative}
.fx-sheen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 0%,transparent 40%,rgba(243,217,160,.95) 50%,transparent 60%,transparent 100%);background-size:300% 100%;background-position:100% 0;mix-blend-mode:color-dodge;animation:hxSheen 1.4s var(--ease2) .05s 1 forwards}
@keyframes hxSheen{to{background-position:0 0}}

/* Selected Work: pinned horizontal gallery */
.work--h{height:100vh;min-height:640px;padding:clamp(84px,10vh,112px) 0 26px;display:flex;flex-direction:column;overflow:hidden;--rowh:clamp(150px,calc((100vh - 360px) / 2),330px)}
.work--h .wrap{height:100%;display:flex;flex-direction:column;min-height:0}
.work--h .section__head{margin-bottom:18px}
.work--h .h2--xl{font-size:clamp(56px,7.2vw,118px)}
.work--h .filters{margin-bottom:18px}
.work--h .gallery{display:grid;grid-template-columns:none;grid-template-rows:repeat(2,var(--rowh));grid-auto-rows:var(--rowh);grid-auto-flow:column dense;grid-auto-columns:var(--rowh);width:max-content;gap:16px;will-change:transform;cursor:grab}
.work--h .tile--wide{grid-column:span 2}
.work--h .gallery:has(.tile:hover) .tile:not(:hover){filter:brightness(.5);transform:scale(.985)}
.is-dragging .work--h .gallery{cursor:grabbing}
.is-dragging .work--h .tile{pointer-events:none}
.hrail{display:flex;align-items:center;gap:18px;margin-top:18px}
.hrail__bar{flex:1;max-width:420px;height:2px;background:var(--line2);border-radius:2px;overflow:hidden}
.hrail__bar i{display:block;height:100%;background:linear-gradient(90deg,#a87725,var(--accent),#f6e2a8);transform-origin:left;transform:scaleX(0)}
.hrail__hint{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}

/* gaming: HUD depth layers */
.gw__hud{position:absolute;inset:0;pointer-events:none;z-index:0}
.gw .wrap{position:relative;z-index:1}
.gw__hud svg{position:absolute;fill:none;stroke:rgba(var(--accent-rgb),.28);stroke-width:1}
.gw__hud-ring{width:min(46vw,640px);left:-8%;top:18%;opacity:.7;animation:hxSpin 60s linear infinite}
.gw__hud-cross{width:70px;right:9%;top:16%;stroke:rgba(var(--accent-rgb),.55)}
.gw__hud-hex{width:180px;right:4%;bottom:10%;opacity:.5}
.gw__hud-tag{position:absolute;left:46%;top:12%;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.3em;color:rgba(var(--accent-rgb),.6)}
.gw__hud-tag--2{left:6%;top:auto;bottom:14%}
@keyframes hxSpin{to{rotate:360deg}}

/* gold wipe between major sections */
.gwipe{position:absolute;left:0;right:0;top:0;height:100vh;z-index:40;pointer-events:none;visibility:hidden;display:grid;place-items:center;clip-path:polygon(0% 0%,0% 0%,-18% 100%,-18% 100%);background:linear-gradient(105deg,#a87725 0%,#e3b65a 30%,#f6e2a8 50%,#e3b65a 68%,#9c6c1f 100%)}
.gwipe__label{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:900;font-size:clamp(40px,6.4vw,104px);letter-spacing:-.04em;text-transform:uppercase;color:#0b0b0d;opacity:0}
.gwipe__label b{font-size:.24em;letter-spacing:.2em;font-weight:800}
@media (prefers-reduced-motion:reduce){.gwipe,.hero__zoomflash,.hero__shards,.gw__hud{display:none}.fx-sheen::after{animation:none}}

/* ===== v4: 3D Free Fire MAX player card (replaces the 3D character) ===== */
.holo--card{perspective:1200px}
.holo--card .holo__glow{top:16%;height:62%;width:74%;margin-left:-37%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.08) 60%,transparent 75%)}
.holo__shadow{position:absolute;left:50%;bottom:15%;width:56%;height:9%;margin-left:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);transform:rotateX(76deg) translateZ(2px);filter:blur(6px);animation:ffShadow 6s ease-in-out infinite}
.ffc-float{pointer-events:none;position:absolute;left:50%;top:44%;width:min(520px,94%);transform:translate(-50%,-50%) translateZ(70px);transform-style:preserve-3d;opacity:0;transition:opacity 1s var(--ease)}
.holo.is-on .ffc-float{opacity:1;animation:ffFloat 6s ease-in-out infinite}
.ffc{--fy:0deg;pointer-events:auto;position:relative;width:100%;aspect-ratio:1.58;container-type:inline-size;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:rotateY(calc(var(--hx) * 18deg)) rotateX(calc(var(--hy) * -13deg));will-change:transform}
.ffc__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.8,.2,1.12)}
.ffc.is-flipped .ffc__inner{transform:rotateY(180deg)}
.ffc__face{position:absolute;inset:0;margin:0;border-radius:4.2cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(150deg,#16130b 0%,#0a0907 45%,#050505 100%);border:1px solid rgba(var(--accent-rgb),.55);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 60px -18px rgba(0,0,0,.9),0 0 50px -10px rgba(var(--accent-rgb),.45),inset 0 1px 0 rgba(255,255,255,.12);font-family:var(--display);color:#fff;transform:translateZ(1px)}
.ffc__back{transform:rotateY(180deg) translateZ(1px);display:flex;flex-direction:column;justify-content:space-between;padding:4.2cqw 4.8cqw 4cqw}
.ffc__back>.ffc__btop,.ffc__back>.ffc__rank,.ffc__back>.ffc__grid,.ffc__back>.ffc__badges,.ffc__back>.ffc__guns{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto}
/* yellow/black FF diagonal styling */
.ffc__stripes{position:absolute;inset:0 auto 0 0;width:52%;clip-path:polygon(0 0,100% 0,62% 100%,0 100%);background:repeating-linear-gradient(-58deg,transparent 0 5.2cqw,rgba(0,0,0,.92) 5.2cqw 6.4cqw),linear-gradient(160deg,#ffe066 0%,#f5c11c 40%,#e3b65a 75%,#a8741a 100%)}
.ffc__stripes::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(0,0,0,.55));}
.ffc__stripes--back{width:40%;height:17%;inset:0 auto auto 0;clip-path:polygon(0 0,100% 0,78% 100%,0 100%);opacity:.95}
.ffc__slab{position:absolute;right:0;bottom:0;width:26%;height:30%;clip-path:polygon(100% 0,100% 100%,0 100%);background:linear-gradient(135deg,#f5c11c,#e3b65a 60%,#a8741a)}
.ffc__face::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 80% 10%,rgba(var(--accent-rgb),.08),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px);pointer-events:none}
.ffc__top{position:absolute;left:4.5cqw;right:4.5cqw;top:4cqw;display:flex;justify-content:space-between;align-items:center;z-index:2}
.ffc__mark{margin:0;display:flex;align-items:center;gap:1.1cqw;padding:.9cqw 1cqw .9cqw 1.8cqw;border-radius:1cqw;background:linear-gradient(180deg,#ffe066,#f2c230);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.45);font-style:italic;font-weight:900;letter-spacing:-.02em;line-height:1;transform:skewX(-6deg)}
.ffc__mark-ff{font-size:5.4cqw;color:#0b0904;text-shadow:0 .25cqw 0 rgba(255,255,255,.35)}
.ffc__mark-max{font-size:3.9cqw;padding:.55cqw 1.3cqw;border-radius:.8cqw;background:#0b0904;color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.ffc__mark--sm .ffc__mark-ff{font-size:4.2cqw}
.ffc__mark--sm .ffc__mark-max{font-size:3cqw}
.ffc__guild{margin:0;display:flex;align-items:center;gap:1.6cqw;padding:1cqw 2.2cqw 1cqw 1.2cqw;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid rgba(var(--accent-rgb),.45)}
.ffc__crest{width:6.2cqw;height:6.2cqw;flex:none;filter:drop-shadow(0 0 1.2cqw rgba(var(--accent-rgb),.55))}
.ffc__guild span,.ffc__stat,.ffc__uid{display:flex;flex-direction:column;line-height:1.05}
.ffc__face em{font-style:normal;font-size:max(8px,2.05cqw);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ffc__guild b{font-size:3.5cqw;font-weight:800;letter-spacing:-.01em}
.ffc__id{position:absolute;left:5cqw;right:5cqw;top:16.5cqw;display:flex;align-items:center;gap:4.4cqw;z-index:2}
.ffc__avatar{flex:none;width:27cqw;aspect-ratio:1;padding:.75cqw;background:#fff;border-radius:1.6cqw;box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.7),0 0 0 .35cqw rgba(0,0,0,.8),0 0 4cqw rgba(var(--accent-rgb),.45);transform:translateZ(0)}
.ffc__avatar img{width:100%;height:100%;object-fit:cover;border-radius:1cqw;display:block;filter:contrast(1.08) saturate(1.12)}
.ffc__who{min-width:0}
.ffc__ign{margin:0;font-size:8.2cqw;font-weight:900;letter-spacing:-.035em;line-height:.95;background:linear-gradient(180deg,#fff 0%,#fff2c7 45%,#e3b65a 70%,#fff6dc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .4cqw 0 rgba(0,0,0,.6));white-space:nowrap}
.ffc__lang{margin:2.2cqw 0 0;display:inline-flex;align-items:center;gap:1.2cqw;padding:.9cqw 2.2cqw .9cqw 1.4cqw;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:max(10px,2.8cqw);font-weight:700}
.ffc__lang svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:var(--accent);stroke-width:1.6}
.ffc__row{position:absolute;left:5cqw;right:5cqw;bottom:4.6cqw;display:grid;grid-template-columns:auto auto 1fr;gap:2.4cqw;align-items:stretch;z-index:2}
.ffc__stat,.ffc__uid{padding:1.6cqw 2.6cqw;border-radius:2cqw;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);justify-content:center}
.ffc__stat b,.ffc__uid b{margin-top:.8cqw;font-size:4.3cqw;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:1cqw}
.ffc__thumb{font-size:3.6cqw}
.ffc__uid{appearance:none;text-align:left;cursor:copy;border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(0,0,0,.6));transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;min-width:0}
.ffc__uid:hover{transform:translateY(-.4cqw);box-shadow:0 0 3cqw -0.6cqw rgba(var(--accent-rgb),.8)}
.ffc__uid:active{transform:scale(.97)}
.ffc__uid svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:var(--accent);stroke-width:2}
.ffc__flipbtn{position:absolute;right:4.6cqw;top:33.5cqw;z-index:3;appearance:none;display:inline-flex;align-items:center;gap:.8cqw;padding:.9cqw 2.2cqw;border-radius:99px;border:1px solid rgba(var(--accent-rgb),.6);background:rgba(0,0,0,.6);color:var(--accent);font-family:var(--display);font-size:max(9px,2.2cqw);font-weight:800;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.ffc__flipbtn span{font-size:3cqw;letter-spacing:0}
.ffc__back .ffc__flipbtn{top:4.2cqw;bottom:auto;right:4.8cqw}
/* back face */
.ffc__btop{position:absolute;left:4.5cqw;right:22cqw;top:4.4cqw;display:flex;align-items:center;gap:3cqw;z-index:2}
.ffc__btitle{margin:0;font-size:max(9px,2.4cqw);font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.85}
.ffc__rank{position:absolute;left:5cqw;top:14cqw;display:flex;align-items:center;gap:3cqw;z-index:2}
.ffc__emblem{width:12cqw;height:12cqw;filter:drop-shadow(0 0 2.4cqw rgba(var(--accent-rgb),.6))}
.ffc__rank div{display:flex;flex-direction:column}
.ffc__rank b{font-size:7.6cqw;font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#fff,#e3b65a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ffc__grid{position:absolute;left:5cqw;right:5cqw;top:31cqw;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;z-index:2}
.ffc__grid div{padding:1.3cqw 2.2cqw;border-radius:2cqw;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ffc__grid dt{font-size:max(8px,1.95cqw);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.ffc__grid dd{margin:.8cqw 0 0;font-size:4.4cqw;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ffc__badges{position:absolute;left:5cqw;right:5cqw;top:44.5cqw;display:flex;gap:1.6cqw;flex-wrap:nowrap;z-index:2}
.ffc__badge{padding:.9cqw 2cqw;border-radius:99px;border:1px solid rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.1);color:#fbe6b0;font-size:max(8px,2.15cqw);font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ffc__guns{position:absolute;left:5cqw;right:5cqw;bottom:4.2cqw;display:flex;align-items:baseline;gap:2.4cqw;z-index:2}
.ffc__guns b{font-size:4cqw;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
/* holographic foil + sweep */
.ffc__foil{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;mix-blend-mode:color-dodge;opacity:.26;background:linear-gradient(115deg,transparent 18%,rgba(255,226,140,.5) 34%,rgba(255,248,225,.45) 44%,rgba(214,190,255,.18) 52%,rgba(255,226,140,.45) 62%,transparent 78%);background-size:260% 260%;background-position:calc(50% + var(--hx) * 46%) calc(50% + var(--hy) * 36%)}
.ffc__foil::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(50% + var(--hx) * 45%) calc(45% + var(--hy) * 45%),rgba(255,255,255,.28),transparent 40%);mix-blend-mode:overlay}
.ffc__sweep{position:absolute;inset:-20% -60%;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,244,210,.0) 44%,rgba(255,244,210,.55) 49.5%,rgba(255,255,255,.85) 50%,rgba(255,244,210,.5) 50.6%,transparent 56%);mix-blend-mode:screen;transform:translateX(-60%);animation:ffSweep 5.5s cubic-bezier(.6,0,.2,1) infinite 1.2s}
.ffc__back .ffc__sweep{animation-delay:3.9s}
.holo--card .holo__particles i{bottom:22%}
.holo.is-off .ffc-float,.holo.is-off .ffc__sweep,.holo.is-off .holo__shadow{animation-play-state:paused}
@keyframes ffFloat{0%,100%{transform:translate(-50%,-50%) translateZ(70px) translateY(0)}50%{transform:translate(-50%,-50%) translateZ(70px) translateY(-14px)}}
@keyframes ffShadow{0%,100%{transform:rotateX(76deg) scale(1);opacity:.9}50%{transform:rotateX(76deg) scale(.84);opacity:.6}}
@keyframes ffSweep{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.ffc:focus-visible,.ffc__flipbtn:focus-visible,.ffc__uid:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:760px){
  .holo--card{height:430px}
  .holo--card .ffc-float{top:42%;width:94%}
  .ffc__stat,.ffc__uid{-webkit-backdrop-filter:none;backdrop-filter:none}
  .ffc__face{box-shadow:0 20px 40px -14px rgba(0,0,0,.9),0 0 34px -10px rgba(var(--accent-rgb),.45)}
}
@media (prefers-reduced-motion:reduce){
  .holo.is-on .ffc-float,.ffc__sweep,.holo__shadow{animation:none!important}
  .ffc__inner{transition:none}
}
.pcard__stats--2{grid-template-columns:repeat(3,1fr)}
.pcard__note{margin:16px 0 0;font-size:13.5px;color:var(--mute)}

/* ===== v4: YT WORKS ===== */
.ytworks{padding-top:clamp(64px,8vw,120px)}
.ytw-chan{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);transition:border-color .3s,background .3s}
.ytw-chan:hover{border-color:rgba(var(--accent-rgb),.6);background:var(--glass2)}
.ytw-chan__av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.6)}
.ytw-chan__av img{width:100%;height:100%;object-fit:cover}
.ytw-chan__info{display:flex;flex-direction:column;line-height:1.25;font-size:13px;color:var(--ink2)}
.ytw-chan__info>b{font-family:var(--display);font-size:16px;color:var(--ink)}
.ytw-chan__info span b{color:var(--ink)}
.ytw-chan__sub{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;background:#ff0033;color:#fff;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.02em}
.ytw-chan__sub svg{width:18px;height:18px;fill:#fff}
.ytw-row__label{margin:34px 0 14px}
.ytw-row{display:grid;gap:16px}
.ytw-row--wide{grid-template-columns:repeat(2,1fr)}
.ytw-row--shorts{grid-template-columns:repeat(6,1fr)}
.ytw{position:relative;display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.ytw__media{position:relative;display:block;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#000;aspect-ratio:16/9;transition:border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.ytw--short .ytw__media{aspect-ratio:9/16}
.ytw__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.ytw__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65))}
.ytw__play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff2d4a,#c8001f);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.85),0 10px 30px rgba(255,0,51,.45);transition:transform .45s var(--ease)}
.ytw__play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.ytw--short .ytw__play{width:46px;height:46px;margin:-23px 0 0 -23px}
.ytw__tag{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:99px;background:rgba(0,0,0,.6);border:1px solid rgba(var(--accent-rgb),.5);font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.ytw--wide .ytw__tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#ff2d4a;box-shadow:0 0 8px #ff2d4a;vertical-align:1px}
.ytw__info{display:flex;flex-direction:column;gap:3px}
.ytw__cat{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.ytw__title{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.ytw--short .ytw__title{font-size:14.5px}
.ytw__sub{font-size:12.5px;color:var(--mute);line-height:1.35}
@media (hover:hover){
  .ytw:hover .ytw__media{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 18px 50px -18px rgba(var(--accent-rgb),.45);transform:translateY(-4px)}
  .ytw:hover .ytw__media img{transform:scale(1.08);filter:saturate(1.15) contrast(1.05)}
  .ytw:hover .ytw__play{transform:scale(1.12)}
}
.ytw:focus-visible{outline:none}.ytw:focus-visible .ytw__media{outline:2px solid var(--accent);outline-offset:3px}
.lightbox__media iframe.lb-yt{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
@media (max-width:1024px){.ytw-row--shorts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .ytw-chan{border-radius:20px;width:100%}
  .ytw-chan__sub{margin-left:auto;padding:9px 13px}
  .ytw-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc((100vw - 100%) / -2);padding:2px calc((100vw - 100%) / 2) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ytw-row::-webkit-scrollbar{display:none}
  .ytw{scroll-snap-align:start;flex:none}
  .ytw--wide{width:82vw}.ytw--short{width:42vw}
}
/* Selected Work: uniform portrait grid of Instagram reels */
#work:not(.work--h) .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;grid-auto-flow:row}
#work:not(.work--h) .gallery .tile{grid-row:auto;grid-column:auto;aspect-ratio:4/5}
#work.work--h .gallery{grid-template-rows:min(64vh,600px);grid-auto-columns:calc(min(64vh,600px) * .62)}
#work.work--h .gallery .tile{grid-row:auto;grid-column:auto}
@media (max-width:760px){#work:not(.work--h) .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}}

/* ===== v4: GAMING — Vice-City sunset pause menu ===== */
@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kaushan";src:url(fonts/kaushan.woff2) format("woff2");font-weight:400;font-display:swap}
.gta{--pink:#ff3d8b;--orange:#ff8a3d;--violet:#7b3bff;--teal:#22d3c5;--neon:#7dff4f;position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(80px,10vw,140px);background:linear-gradient(180deg,#060608 0%,#140a24 18%,#2a0f3f 34%,#5a1a55 50%,#b33a5e 64%,#f07a4a 76%,#1b0b2c 77%,#0b0712 100%)}
.gta::before{content:"";position:absolute;inset:0 0 auto;height:160px;background:linear-gradient(#060608,transparent);z-index:0;pointer-events:none}
.gta::after{content:"";position:absolute;inset:auto 0 0;height:200px;background:linear-gradient(transparent,#060608);z-index:0;pointer-events:none}
.gta__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gta__sun{position:absolute;left:50%;top:34%;width:min(46vw,620px);aspect-ratio:1;margin-left:min(-23vw,-310px);border-radius:50%;background:linear-gradient(180deg,#ffe27a 0%,#ffb04a 35%,#ff5f7e 70%,#c2307a 100%);-webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px),linear-gradient(#000 55%,transparent 55%);-webkit-mask-composite:source-over;mask:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 17px);box-shadow:0 0 120px 30px rgba(255,120,90,.35);opacity:.85}
.gta__city{position:absolute;left:0;right:0;top:56%;height:22%;background:#12081f;clip-path:polygon(0 100%,0 62%,4% 62%,4% 40%,8% 40%,8% 55%,11% 55%,11% 22%,14% 22%,14% 48%,18% 48%,18% 30%,20% 30%,20% 12%,22% 12%,22% 30%,25% 30%,25% 58%,30% 58%,30% 36%,34% 36%,34% 50%,38% 50%,38% 26%,41% 26%,41% 44%,46% 44%,46% 60%,52% 60%,52% 34%,55% 34%,55% 18%,57% 18%,57% 34%,60% 34%,60% 52%,65% 52%,65% 28%,69% 28%,69% 46%,73% 46%,73% 38%,77% 38%,77% 56%,81% 56%,81% 24%,84% 24%,84% 42%,88% 42%,88% 58%,92% 58%,92% 36%,96% 36%,96% 60%,100% 60%,100% 100%);opacity:.95}
.gta__city::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,190,120,.18) 22px 24px),repeating-linear-gradient(180deg,transparent 0 16px,rgba(0,0,0,.4) 16px 26px);mix-blend-mode:screen}
.gta__palm{position:absolute;bottom:20%;width:clamp(120px,14vw,220px);color:#0d0617}
.gta__palm svg{width:100%;height:auto;fill:#0d0617;stroke:#0d0617;stroke-width:3}
.gta__palm--l{left:-1%;transform:rotate(-4deg)}.gta__palm--r{right:-2%;transform:scaleX(-1) rotate(-6deg);width:clamp(140px,17vw,260px)}
.gta__haze{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 60%,rgba(255,110,150,.25),transparent 70%),linear-gradient(90deg,rgba(34,211,197,.10),transparent 30%,transparent 70%,rgba(123,59,255,.18))}
.gta__wrap{position:relative;z-index:1}
.gta__top{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,70px)}
.gta__titles .label{color:#ffd7e6}
.gta__title{margin:14px 0 0;line-height:.86;position:relative}
.gta__name{display:block;font-family:"Anton","InterTight",sans-serif;font-weight:400;font-size:clamp(64px,10.5vw,168px);letter-spacing:.01em;text-transform:uppercase;background:linear-gradient(180deg,#ffe8a3 0%,#ffb24a 32%,#ff5f8f 68%,#c43cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,90,140,.35))}
.gta__script{display:block;margin:-.32em 0 0 .18em;font-family:"Kaushan",cursive;font-weight:400;font-size:clamp(46px,6.4vw,104px);color:#fff;transform:rotate(-6deg);transform-origin:left;text-shadow:0 0 18px rgba(255,61,139,.85),0 0 42px rgba(255,138,61,.5),0 3px 0 rgba(0,0,0,.4)}
.gta__note{max-width:420px;margin-top:22px;color:#f3dbe8}
.gta__collage{position:relative;height:clamp(380px,40vw,560px)}
.gpanel{position:absolute;margin:0;overflow:hidden;background:#000;border:3px solid #fff;box-shadow:0 26px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5);transition:transform .8s var(--ease)}
.gpanel img,.gpanel video{width:100%;height:100%;object-fit:cover;display:block}
.gpanel figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;background:var(--pink,#ff3d8b);color:#fff;font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.gpanel--video{left:30%;top:2%;width:38%;height:94%;transform:rotate(4deg);z-index:3;border-color:#fff}
.gpanel--a{left:0;top:6%;width:44%;height:30%;transform:rotate(-6deg);z-index:2}
.gpanel--b{left:4%;top:42%;width:28%;height:34%;transform:rotate(3deg);z-index:4}
.gpanel--c{right:0;top:0;width:30%;height:56%;transform:rotate(7deg);z-index:2}
.gpanel--d{right:2%;bottom:0;width:38%;height:34%;transform:rotate(-4deg);z-index:4}
@media (hover:hover){.gpanel:hover{z-index:6}.gpanel--a:hover,.gpanel--b:hover,.gpanel--c:hover,.gpanel--d:hover{transform:rotate(0) scale(1.06)}}
/* pause menu screen */
.pmenu{position:relative;perspective:1400px}
.pmenu__screen{--tx:0deg;--ty:0deg;position:relative;border-radius:22px;padding:0 0 26px;background:linear-gradient(160deg,rgba(18,10,32,.94),rgba(10,6,18,.96));border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 40px 120px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(255,61,139,.35);overflow:hidden}
.pmenu.is-3d .pmenu__screen{transform:rotateX(var(--ty)) rotateY(var(--tx));transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pmenu__screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);pointer-events:none;z-index:5}
.pmenu__bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(255,61,139,.18),rgba(255,138,61,.10) 40%,rgba(34,211,197,.10))}
.pmenu__tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pmenu__tabs::-webkit-scrollbar{display:none}
.pmenu__tabs [role=tab]{flex:none;scroll-snap-align:center;appearance:none;border:0;background:none;color:rgba(255,255,255,.72);padding:10px 14px;border-radius:8px;font-family:"Anton","InterTight",sans-serif;font-size:17px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;position:relative;transition:color .25s,background .25s}
.pmenu__tabs [role=tab]:hover{color:#fff;background:rgba(255,255,255,.08)}
.pmenu__tabs [role=tab][aria-selected=true]{color:#0b0712;background:#fff;box-shadow:0 0 0 2px var(--neon),0 0 24px -4px var(--neon)}
.pmenu__tabs [role=tab]:first-child[aria-selected=true]{background:linear-gradient(90deg,#fff,#ffe6a8)}
.pmenu__hud{display:flex;align-items:center;gap:14px;flex:none;font-family:"Anton",sans-serif;font-size:18px;letter-spacing:.04em;color:#fff}
.hud-clock{padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.hud-lv b{color:var(--neon)}.hud-likes b{color:#ffd36b}
.pmenu__body{position:relative;min-height:clamp(400px,36vw,520px);padding:26px clamp(18px,3vw,36px) 10px}
.ppanel{animation:none}
.ppanel.is-in{animation:pIn .6s var(--ease) both}
@keyframes pIn{from{opacity:0;transform:translateX(calc(var(--dir,1) * 30px));filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.ppanel__eyebrow{margin:0 0 10px;font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--neon)}
.ppanel__h{margin:0 0 12px;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1;text-transform:uppercase;color:#fff}
.ppanel__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-items:center}
.ppanel__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ppanel__chips span{padding:7px 12px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-family:"Anton",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.ppanel__shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ppanel__shots img,.ppanel__shots--one img{width:100%;border:3px solid #fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);aspect-ratio:4/3;object-fit:cover}
.ppanel__shots img:nth-child(1){transform:rotate(-3deg)}.ppanel__shots img:nth-child(2){transform:rotate(3deg) translateY(18px)}
.ppanel__shots--one{grid-template-columns:1fr}.ppanel__shots--one img{transform:rotate(2deg);aspect-ratio:auto;max-height:380px}
.ppanel__small{margin:14px 0 0;color:var(--ink2)}
/* player tab */
.ppanel__player{display:grid;grid-template-columns:1fr minmax(160px,24%);gap:clamp(12px,2vw,30px);align-items:center}
.gta .holo--card{height:clamp(380px,36vw,500px)}
.gta .holo--card .ffc-float{top:46%;width:min(520px,92%)}
.ppanel__fig{margin:0;position:relative}
.ppanel__fig img{width:100%;border-radius:14px;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 40px -6px rgba(123,59,255,.7);-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
.ppanel__fig figcaption{position:absolute;left:10px;top:10px;color:#fff;background:rgba(0,0,0,.5);padding:4px 8px;border-radius:6px}
/* character sheet */
.ppanel__sheet{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.ppanel__turn{width:100%;border:3px solid #fff;background:#fff}
.ppanel__faces{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ppanel__faces img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid rgba(255,255,255,.85)}
/* stats */
.gstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gstat{position:relative;padding:14px 16px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);overflow:hidden}
.gstat>span{display:block;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffc6dc}
.gstat b{display:block;margin-top:4px;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.gstat i{position:absolute;left:0;bottom:0;height:4px;width:100%;background:linear-gradient(90deg,var(--pink),var(--orange),var(--neon));transform-origin:left;transform:scaleX(0)}
.ppanel.is-in .gstat i{animation:barFill 1.2s var(--ease) both;animation-delay:calc(var(--j,0) * 90ms + 150ms)}
@keyframes barFill{to{transform:scaleX(1)}}
.ppanel__profile{margin:0;position:relative}
.ppanel__profile img{width:100%;border:3px solid #fff;border-radius:6px;box-shadow:0 18px 50px -14px rgba(0,0,0,.85)}
.ppanel__profile figcaption{position:absolute;left:10px;top:10px;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:6px}
/* loadout in menu */
.gta-guns{grid-template-columns:1fr 1fr}
.gta-guns .weapon{background:linear-gradient(135deg,rgba(255,61,139,.18),rgba(255,255,255,.02));border-color:rgba(255,255,255,.2)}
.gta-guns .weapon__name{font-family:"Anton",sans-serif;font-weight:400;font-size:28px;letter-spacing:.02em;text-transform:uppercase}
/* badges */
.gbadges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px;padding:16px;text-align:center;border-radius:12px}
.gb--honor{background:radial-gradient(circle at 50% 30%,rgba(255,211,107,.25),rgba(0,0,0,.4) 70%);border:1px solid rgba(255,211,107,.5)}
.gb--honor em{font-style:normal;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ffd36b}
.gb--honor b{font-family:"Anton",sans-serif;font-weight:400;font-size:46px;line-height:1;color:#fff}
.gb--honor span{font-size:12px;color:var(--ink2)}
.gb--ribbon{background:linear-gradient(180deg,#e3283f,#9e0f22);border:1px solid rgba(255,255,255,.35);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);min-height:110px}
.gb--ribbon b{font-family:"Anton",sans-serif;font-weight:400;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.ppanel.is-in .gb{animation:gbIn .6s var(--ease) both}
.ppanel.is-in .gb:nth-child(2){animation-delay:.07s}.ppanel.is-in .gb:nth-child(3){animation-delay:.14s}.ppanel.is-in .gb:nth-child(4){animation-delay:.21s}.ppanel.is-in .gb:nth-child(5){animation-delay:.28s}.ppanel.is-in .gb:nth-child(6){animation-delay:.35s}
@keyframes gbIn{from{opacity:0;transform:translateY(16px) scale(.92)}}
/* live */
.glive{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* HUD: minimap + stamp */
.pmenu__map{position:absolute;left:18px;bottom:16px;width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle,rgba(34,211,197,.25),rgba(0,0,0,.6) 70%),repeating-linear-gradient(35deg,transparent 0 9px,rgba(255,255,255,.12) 9px 10px),repeating-linear-gradient(-55deg,transparent 0 13px,rgba(255,255,255,.1) 13px 14px);overflow:hidden;z-index:4;pointer-events:none}
.pmenu__sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(125,255,79,.55),transparent 25%);animation:spin 3.2s linear infinite;border-radius:50%}
.pmenu__dot{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.pmenu__stamp{position:absolute;right:26px;bottom:24px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;opacity:0}
.pmenu__stamp b{font-family:"Anton",sans-serif;font-weight:400;font-size:34px;letter-spacing:.04em;color:#ffd36b;text-shadow:0 3px 0 #000,0 0 22px rgba(255,211,107,.6)}
.pmenu__stamp span{font-family:"Kaushan",cursive;font-size:20px;color:#fff;text-shadow:0 2px 0 #000}
.pmenu__stamp.on{animation:stampIn 1.6s var(--ease) both}
@keyframes stampIn{0%{opacity:0;transform:scale(1.6) rotate(-6deg)}14%{opacity:1;transform:scale(1) rotate(-3deg)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
.pmenu__keys{position:absolute;right:20px;top:auto;bottom:6px;margin:0;color:rgba(255,255,255,.45);font-size:10px}
.gta .ppanel{color:#f4eef8}
@media (max-width:1024px){
  .gta__top{grid-template-columns:1fr}
  .gta__collage{height:clamp(360px,70vw,520px)}
  .ppanel__split,.ppanel__sheet{grid-template-columns:1fr}
}
@media (max-width:760px){
  .gta__collage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gpanel{position:relative;inset:auto!important;width:auto!important;height:auto!important;transform:none!important}
  .gpanel--video{grid-column:1 / -1;aspect-ratio:9/12}
  .gpanel--a{grid-column:1 / -1;aspect-ratio:900/309}
  .gpanel--b,.gpanel--c{aspect-ratio:4/5}
  .gpanel--d{display:none}
  .pmenu__bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .pmenu__hud{justify-content:space-between;font-size:15px}
  .pmenu__tabs [role=tab]{font-size:15px;padding:9px 12px}
  .pmenu__body{padding:18px 14px 70px;min-height:0}
  .ppanel__player{grid-template-columns:1fr}
  .ppanel__fig{display:none}
  .gta .holo--card{height:400px}
  .gstats{grid-template-columns:1fr 1fr}
  .gbadges{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .gb{min-height:96px;padding:10px}.gb--honor b{font-size:34px}.gb--ribbon b{font-size:15px}
  .glive{grid-template-columns:1fr}
  .pmenu__stamp b{font-size:26px}
  .gta__palm{opacity:.7}
}
@media (prefers-reduced-motion:reduce){.pmenu__sweep,.ppanel.is-in,.ppanel.is-in .gstat i,.ppanel.is-in .gb{animation:none!important}.ppanel.is-in .gstat i{transform:scaleX(1)}}

/* ===== v4: 3D laptop (My setup) ===== */
/* ---------- My setup: scroll-driven 3D laptop (laptop3d.js) ---------- */
.lap3d__track,.lap3d__sticky{display:none}
.setup--3d{grid-template-columns:1fr;grid-template-areas:"head" "stage" "bts"}
.setup--3d .bts{max-width:420px;width:100%;justify-self:center}
.lap3d--on{padding:0;perspective:none}
.lap3d--on .lap3d__track{display:block;position:relative;height:340vh}
.lap3d--on.lap3d--lite .lap3d__track{height:230vh}
.lap3d--on .lap3d__fallback{display:none}
.lap3d--on .lap3d__sticky{display:block;position:sticky;top:0;height:100vh;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:#060608;contain:paint}
@supports (height:100svh){.lap3d--on .lap3d__sticky{height:100svh}}
.lap3d--on .setup__chips{margin-top:36px}
.lap3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lap3d__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:#060608}
.lap3d__shade{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,8,0),#060608 92%);opacity:calc((var(--lap3d-p,0) - .9) * 10)}
.lap3d__sticky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(6,6,8,.75))}
.lap3d__hint{position:absolute;left:50%;bottom:clamp(22px,5vh,48px);z-index:2;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold2);white-space:nowrap;pointer-events:none}
.lap3d__hint i{width:1px;height:34px;background:linear-gradient(180deg,transparent,var(--accent));transform-origin:top;animation:lap3dHint 1.8s var(--ease,ease) infinite}
@keyframes lap3dHint{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.lap3d__hint i{animation:none}}
@media (max-aspect-ratio:1/1){.lap3d__video{object-fit:contain}}

/* ===== v4: Netflix-style intro ===== */
/* ===== HEYYANIXX NETFLIX-STYLE INTRO — append to site/styles.css =====
   Font: site/fonts/bebas-neue.woff2 (Bebas Neue, SIL Open Font License 1.1, self-hosted). */
@font-face{font-family:"BebasNeue";src:url(fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}

html.intro-lock,html.intro-lock body{overflow:hidden!important;overscroll-behavior:none}
.intro{--gold:#e3b65a;position:fixed;inset:0;z-index:110;background:#060608;color:var(--ink,#eceef3);overflow:hidden;opacity:1;transition:opacity .6s cubic-bezier(.65,0,.35,1),transform .7s cubic-bezier(.16,1,.3,1);outline:none;-webkit-tap-highlight-color:transparent;contain:layout paint}
.intro[hidden]{display:none}
.intro.is-out{opacity:0;transform:scale(1.04);pointer-events:none}

/* backdrop: a deep red/gold "ta-dum" burst + faint rotating rays */
.intro__bg{position:absolute;inset:0;pointer-events:none}
.intro__burst{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(227,182,90,.30),rgba(150,22,14,.22) 38%,rgba(60,8,6,.10) 60%,transparent 72%);opacity:0;transform:scale(.25);will-change:transform,opacity}
.intro__rays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,rgba(227,182,90,.06) 0deg 3deg,transparent 3deg 14deg);-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 60%);mask:radial-gradient(closest-side,#000 10%,transparent 60%);opacity:0;will-change:transform}
.intro[data-phase] .intro__burst{animation:introBurst 1.6s cubic-bezier(.16,1,.3,1) forwards}
.intro[data-phase] .intro__rays{animation:introRays 1.2s .2s ease forwards,introSpin 40s linear infinite}
@keyframes introBurst{0%{opacity:0;transform:scale(.25)}35%{opacity:1}100%{opacity:.8;transform:scale(1)}}
@keyframes introRays{to{opacity:1}}
@keyframes introSpin{to{rotate:360deg}}

/* skip */
.intro__skip{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:5;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,24,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#eceef3;font:600 12px/1 var(--display,"InterTight",system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:0;animation:introFade .5s .4s forwards;transition:border-color .3s,background .3s}
.intro__skip kbd{font:inherit;font-size:10px;letter-spacing:.08em;padding:3px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.2);color:#b9bdc9}
.intro__skip:hover,.intro__skip:focus-visible{border-color:var(--gold);background:rgba(227,182,90,.14)}
@keyframes introFade{to{opacity:1}}

/* the name reveal (then straight into the site) */
.intro__reveal{position:absolute;inset:0}
.intro__word,.intro__logo{position:absolute;left:50%;top:50%;z-index:3;margin:0;line-height:.86;transform:translate(-50%,-50%) scale(1);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s;white-space:nowrap;pointer-events:none}
.intro__word{font-family:"BebasNeue","InterTight",Impact,sans-serif;font-weight:400;font-size:min(21vw,34vh);letter-spacing:.012em}
.intro__word-txt{position:relative;display:inline-block;background:linear-gradient(180deg,#fffaf0 0%,#fbecc6 32%,#e9c477 58%,#c7913b 80%,#8f5f1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(196,28,18,.55)) drop-shadow(0 0 44px rgba(227,182,90,.35));opacity:0;transform:scale(1.55);will-change:transform,opacity}
.intro__word-txt::after{content:attr(data-text);position:absolute;inset:0;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);background-size:300% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.intro[data-phase] .intro__word-txt{animation:introTadum 1.25s cubic-bezier(.2,.9,.25,1) forwards,introPush 6s 1.25s linear forwards}
.intro[data-phase] .intro__word-txt::after{animation:introShine 1s .7s cubic-bezier(.45,0,.2,1) forwards}
@keyframes introTadum{0%{opacity:0;transform:scale(1.55);letter-spacing:.14em;filter:blur(14px) drop-shadow(0 0 0 rgba(196,28,18,0))}45%{opacity:1;filter:blur(0) drop-shadow(0 0 30px rgba(196,28,18,.9)) drop-shadow(0 0 70px rgba(227,182,90,.55))}100%{opacity:1;transform:scale(1);letter-spacing:.012em;filter:blur(0) drop-shadow(0 0 14px rgba(196,28,18,.55)) drop-shadow(0 0 44px rgba(227,182,90,.35))}}
@keyframes introPush{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes introShine{from{background-position:120% 0}to{background-position:-20% 0}}
.intro__logo img{display:block;height:min(30vw,38vh);width:auto;max-width:80vw;object-fit:contain;filter:drop-shadow(0 0 22px rgba(196,28,18,.5)) drop-shadow(0 0 50px rgba(227,182,90,.35));opacity:0;transform:scale(1.4)}
.intro[data-phase] .intro__logo img{animation:introLogo 1.25s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes introLogo{0%{opacity:0;transform:scale(1.4);filter:blur(12px)}100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 22px rgba(196,28,18,.5)) drop-shadow(0 0 50px rgba(227,182,90,.35))}}
.intro.has-logo .intro__word{opacity:0}

/* phones: lighter effects */
@media (max-width:720px){
  .intro__rays{display:none}
  .intro__word{font-size:min(23vw,30vh)}
  .intro__word-txt{filter:drop-shadow(0 0 12px rgba(196,28,18,.5))}
  .intro[data-phase] .intro__word-txt{animation:introTadumM 1.2s cubic-bezier(.2,.9,.25,1) forwards}
  @keyframes introTadumM{0%{opacity:0;transform:scale(1.45)}45%{opacity:1}100%{opacity:1;transform:scale(1)}}
  .intro__skip{height:36px;padding:0 13px;font-size:11px}
  .intro__skip kbd{display:none}
}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}
/* ===== /INTRO ===== */

/* ===== v4: WHAT I DO chapters ===== */
/* ===== WHAT I DO — pinned chapter section (append to styles.css) ===== */
@property --glow{syntax:"<color>";inherits:true;initial-value:#e3b65a}
.chap{--glow:#e3b65a;position:relative;background:var(--bg);isolation:isolate}
.chap__stage{position:relative;overflow:hidden}
.chap__smoke{position:absolute;inset:0;width:100%;height:100%;opacity:.85;pointer-events:none;z-index:0}
.chap__glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(26% 46% at 50% 50%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 72%),
             radial-gradient(48% 70% at 50% 58%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%)}
.chap__floor{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:radial-gradient(34% 46% at 50% 100%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 72%)}
.chap__floor::after{content:"";position:absolute;left:18%;right:18%;bottom:7%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--glow) 60%,transparent),transparent);opacity:.5}
.chap__figure{position:relative;z-index:2;margin:0 auto;height:min(74vh,720px);aspect-ratio:422/1134;pointer-events:none}
.chap__fig-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 40px rgba(0,0,0,.6))}
.chap__rim,.chap__sweep{position:absolute;inset:0;
  -webkit-mask:url(assets/chapters/figure-rim.webp) center/100% 100% no-repeat;mask:url(assets/chapters/figure-rim.webp) center/100% 100% no-repeat}
.chap__rim{background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 70%,#fff) 0%,var(--glow) 45%,color-mix(in srgb,var(--glow) 60%,var(--accent)) 100%);opacity:.95}
.chap__sweep{-webkit-mask-image:url(assets/chapters/figure.webp);mask-image:url(assets/chapters/figure.webp);overflow:hidden;mix-blend-mode:screen}
.chap__sweep::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:60%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,236,200,.0) 30%,rgba(255,236,200,.38) 50%,rgba(255,236,200,0) 70%,transparent 100%);
  transform:translateX(calc(var(--sw,-120) * 1%))}
.chap__shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 14%,transparent 78%,var(--bg) 100%),
             radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.chap__head{position:relative;z-index:5;width:var(--wrap);margin:0 auto}
.chap__head .label b{color:var(--accent)}
.chap__title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(26px,2.6vw,40px);margin:12px 0 0;color:var(--ink)}
.chap__items{position:relative;z-index:5}
.chap__item{--c:var(--accent)}
.chap__h{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(40px,4.4vw,78px);margin:16px 0 0;color:var(--ink)}
.chap__line{display:block}
.chap__line--acc{color:var(--c);text-shadow:0 0 34px color-mix(in srgb,var(--c) 45%,transparent)}
.chap__w{display:inline-block;will-change:transform,opacity,filter}
.chap__eyebrow .idx{color:var(--c)}
.chap__p{color:var(--ink2);font-size:clamp(15px,1.1vw,17px);line-height:1.6;max-width:38ch;margin:22px 0 0}
.chap__chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chap__chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13px;line-height:1.2;
  color:var(--ink);background:rgba(10,10,14,.55);border:1px solid color-mix(in srgb,var(--c) 38%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chap__chips li b{color:var(--c);font-weight:600}
.chap__prog{display:none}
.chap__next{display:none}

/* --- static / reduced-motion / no-JS: stacked chapters, figure on top --- */
.chap:not(.chap--live) .chap__stage{padding:clamp(96px,12vw,160px) 0 clamp(60px,8vw,110px);display:flex;flex-direction:column}
.chap:not(.chap--live) .chap__head{order:-1}
.chap:not(.chap--live) .chap__figure{margin-top:36px;height:min(60vh,560px)}
.chap:not(.chap--live) .chap__items{width:var(--wrap);margin:40px auto 0;display:grid;gap:clamp(56px,7vw,96px)}
.chap:not(.chap--live) .chap__item--r{justify-self:end}
.chap:not(.chap--live) .chap__smoke{opacity:.6;height:min(90vh,820px)}
.chap:not(.chap--live) .chap__glow{bottom:auto;height:min(90vh,820px)}
.chap:not(.chap--live) .chap__floor{display:none}

/* --- live (sticky stage), shared by phones and desktop --- */
.chap--live{height:calc(100vh + 3 * 72vh);height:calc(100svh + 3 * 72svh)}
.chap--live .chap__stage{position:sticky;top:0;height:100vh;height:100svh}
.chap--live .chap__figure{position:absolute;left:50%;bottom:0;translate:-50% 0;height:84svh;margin:0;will-change:transform}
.chap--live .chap__head{position:absolute;top:calc(env(safe-area-inset-top) + 76px);left:0;right:0}
.chap--live .chap__items{position:absolute;inset:0}
.chap--live .chap__item{position:absolute;left:20px;right:20px;bottom:calc(9svh + env(safe-area-inset-bottom))}
.chap--live .chap__item--r{text-align:right}
.chap--live .chap__item--r .chap__p{margin-left:auto}
.chap--live .chap__item--r .chap__chips{justify-content:flex-end}
.chap--live .chap__prog{display:flex;position:absolute;z-index:6;list-style:none;margin:0;padding:0;gap:6px;
  top:calc(env(safe-area-inset-top) + 112px);right:20px}
.chap__prog li{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--mute);transition:color .5s}
.chap__prog li b{font-weight:600}
.chap__prog li i{display:block;width:16px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.chap__prog li i::after{content:"";position:absolute;inset:0;background:var(--glow);transform:scaleX(var(--f,0));transform-origin:0 50%}
.chap__prog li:last-child i{display:none}
.chap__prog li.is-on{color:var(--ink)}
.chap__prog li.is-on b{color:var(--glow)}

/* phones: CSS-driven chapter swaps (opacity/transform only, cheap on Android) */
.chap--mob{transition:--glow .9s var(--ease)}
.chap--mob .chap__item .chap__eyebrow,.chap--mob .chap__item .chap__w,.chap--mob .chap__item .chap__p,.chap--mob .chap__item .chap__chips{
  opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.chap--mob .chap__item .chap__w{transform:translateY(60%)}
.chap--mob .chap__item.is-on .chap__eyebrow,.chap--mob .chap__item.is-on .chap__w,.chap--mob .chap__item.is-on .chap__p,.chap--mob .chap__item.is-on .chap__chips{opacity:1;transform:none}
.chap--mob .chap__item.is-on .chap__w{transition-delay:calc(80ms + var(--wi) * 45ms)}
.chap--mob .chap__item.is-on .chap__p{transition-delay:.28s}
.chap--mob .chap__item.is-on .chap__chips{transition-delay:.36s}
.chap--mob .chap__item:not(.is-on){pointer-events:none}
.chap--mob .chap__h{font-size:clamp(34px,10.4vw,52px)}
.chap--mob .chap__p{font-size:14.5px;margin-top:14px}
.chap--mob .chap__chips{margin-top:16px;gap:8px}
.chap--mob .chap__chips li{font-size:12px;padding:8px 12px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,14,.72)}
.chap--mob .chap__shade{background:linear-gradient(180deg,var(--bg) 0%,transparent 16%,transparent 42%,rgba(6,6,8,.82) 74%,var(--bg) 100%)}
.chap--mob .chap__figure{bottom:12svh;height:70svh}
.chap--mob .chap__glow{background:radial-gradient(42% 30% at 50% 44%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 72%)}

/* desktop: GSAP scrub (inline styles own the motion) */
.chap--desk{height:calc(100vh + 3 * 95vh)}
.chap--desk .chap__stage{height:100vh}
.chap--desk .chap__figure{height:min(92vh,980px);bottom:-2vh}
.chap--desk .chap__head{top:max(96px,11vh)}
.chap--desk .chap__item{left:max(48px,7vw);right:auto;bottom:auto;top:50%;translate:0 -46%;width:min(42vw,620px);text-align:left}
.chap--desk .chap__item--r{left:auto;right:max(48px,7vw);text-align:left}
.chap--desk .chap__item--r .chap__p{margin-left:0}
.chap--desk .chap__item--r .chap__chips{justify-content:flex-start}
.chap--desk .chap__prog{flex-direction:column;top:50%;right:max(22px,2.2vw);translate:0 -50%;gap:10px}
.chap--desk .chap__prog li{flex-direction:column;gap:10px;font-size:12px}
.chap--desk .chap__prog li i{width:1px;height:38px}
.chap--desk .chap__prog li i::after{transform:scaleY(var(--f,0));transform-origin:50% 0}
.chap--desk .chap__next{display:flex;gap:10px;align-items:center;position:absolute;z-index:6;left:50%;bottom:28px;translate:-50% 0;color:var(--ink2)}
.chap--desk .chap__next i{font-style:normal;color:var(--glow)}
@media (max-width:760px){.chap:not(.chap--live) .chap__items{gap:56px}.chap:not(.chap--live) .chap__item--r{text-align:right}}

/* ===== v4: editing toolkit + AI Lab universe ===== */
/* ===================== HEYYANIXX toolkit sections (v4) ===================== */

/* ---------- shared: app icon tile ---------- */
.tki{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:24%;background:linear-gradient(150deg,var(--b1),var(--b2));color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -6px 14px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.45);overflow:hidden;font-family:var(--display)}
.tki::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid color-mix(in srgb,var(--fg) 55%,transparent);opacity:.55;pointer-events:none}
.tki::after{content:"";position:absolute;left:-30%;right:-30%;top:-60%;height:80%;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));transform:rotate(-12deg);pointer-events:none}
.tki b{font-weight:800;font-size:calc(var(--ts,76px)*.4);letter-spacing:-.02em;line-height:1}
.tki svg{width:56%;height:56%}

/* ======================= 1) EDITING — fiery sun halo ======================= */
.tk{position:relative;padding-bottom:clamp(40px,6vw,80px);overflow:hidden;isolation:isolate}
.tk::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 38% at 50% 52%,rgba(255,110,20,.16),transparent 75%)}
.tk__stage::before{content:"";position:absolute;inset:-12% 0 0;z-index:-1;pointer-events:none;background:radial-gradient(52% 50% at 50% 54%,rgba(255,110,20,.3),rgba(255,70,10,.08) 60%,transparent 78%)}
.tk__head{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:0}
.tk__head .h2{margin-top:14px}
.tk__head .label b{color:#ff9a3c}
.tk__stage{--ts:72px;--sp:.5;--mx:0;--my:0;--cy:50%;--R:300px;position:relative;height:clamp(600px,86vh,860px);margin-top:clamp(-30px,-2vw,-10px);clip-path:inset(-40% 0 0 0)}
/* the sun */
.tk__sun{--d:clamp(420px,min(72vh,58vw),780px);position:absolute;left:50%;top:var(--cy);width:var(--d);height:var(--d);border-radius:50%;z-index:0;
  transform:translate(-50%,-50%) translate3d(calc(var(--mx)*-18px),calc((.5 - var(--sp))*90px + var(--my)*-12px),0) scale(calc(.9 + var(--sp)*.18));
  background:radial-gradient(circle at 50% 50%,#fff6d2 0%,#ffd98a 16%,#ffab3d 36%,#ff7417 58%,#d23a0b 80%,#7a1604 100%);
  box-shadow:0 0 50px 8px rgba(255,170,60,.55),0 0 120px 30px rgba(255,110,20,.4)}
.tk__sun::before{content:"";position:absolute;inset:-55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,rgba(255,120,30,.45) 30%,rgba(255,80,10,.16) 60%,transparent 100%)}
.tk__tex{position:absolute;inset:0;border-radius:50%;background:var(--tex) center/58% repeat;mix-blend-mode:overlay;opacity:.6;animation:tkSpin 140s linear infinite}
.tk__tex--b{background-size:41%;opacity:.5;mix-blend-mode:soft-light;animation-duration:90s;animation-direction:reverse}
.tk__rays{position:absolute;inset:-34%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,120,.0) 0deg 5deg,rgba(255,190,110,.22) 6deg,rgba(255,200,120,0) 9deg 14deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 54%,#000 62%,transparent 97%);mask:radial-gradient(circle closest-side,transparent 54%,#000 62%,transparent 97%);animation:tkSpin 80s linear infinite}
.tk__corona{position:absolute;inset:-8%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 46%,rgba(255,150,50,.5) 50%,rgba(255,90,20,.12) 60%,transparent 70%);filter:blur(6px);animation:tkPulse 5s ease-in-out infinite}
/* ground + figure */
.tk__floor{position:absolute;left:0;right:0;bottom:-2px;height:36%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(6,6,8,.85) 45%,var(--bg))}
.tk__floor::before{content:"";position:absolute;left:50%;bottom:22%;width:min(70vw,760px);height:60px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,40,.4),transparent);filter:blur(10px)}
.tk__figure{position:absolute;left:50%;bottom:4%;height:80%;width:auto;max-width:none;z-index:2;pointer-events:none;
  transform:translateX(-50%) translate3d(calc(var(--mx)*10px),0,0);
  filter:brightness(.78) contrast(1.08) drop-shadow(0 0 1.5px rgba(255,200,120,.95)) drop-shadow(0 0 22px rgba(255,120,30,.55))}
/* embers */
.tk__embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tk__embers i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#ffc46b;box-shadow:0 0 8px 2px rgba(255,140,40,.8);opacity:0;animation:tkEmber var(--d) linear var(--dl) infinite}
/* arc of icons */
.tk__arc{position:absolute;left:50%;top:var(--cy);width:0;height:0;margin:0;padding:0;list-style:none;z-index:3;transform:rotate(calc((var(--sp) - .5)*-8deg)) translate3d(calc(var(--mx)*-14px),calc(var(--my)*-8px),0)}
.tk__arc::before{content:"";position:absolute;left:calc(var(--R)*-1);top:calc(var(--R)*-1);width:calc(var(--R)*2);height:calc(var(--R)*2);border-radius:50%;border:1px dashed rgba(255,214,150,.22);
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent 62%);mask:linear-gradient(180deg,#000 55%,transparent 62%);opacity:0;transition:opacity 1.2s .4s}
.tk__stage.is-in .tk__arc::before{opacity:1}
.tk__item{position:absolute;left:0;top:0;width:var(--ts);height:var(--ts);margin:calc(var(--ts)/-2) 0 0 calc(var(--ts)/-2);opacity:0;
  transform:translate3d(0,0,0) scale(.2);transition:transform 1.1s cubic-bezier(.2,1.35,.35,1) calc(var(--i)*95ms + .1s),opacity .5s ease calc(var(--i)*95ms + .1s)}
.tk__stage.is-in .tk__item{opacity:1;transform:translate3d(var(--x),var(--y),0) scale(1)}
.tk__lift{display:block;width:100%;height:100%;border-radius:24%;outline-offset:4px;transition:transform .45s cubic-bezier(.2,1.4,.4,1),filter .4s;cursor:default;
  animation:tkFloat 4.6s ease-in-out calc(var(--i)*-.7s) infinite}
.tk__item:hover .tk__lift,.tk__lift:focus-visible{transform:translateY(-12px) scale(1.14);filter:drop-shadow(0 0 18px rgba(255,170,70,.7))}
.tk__item:hover,.tk__item:focus-within{z-index:5}
.tk__tip{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;padding:6px 11px;border-radius:999px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.tk__item:hover .tk__tip,.tk__item:focus-within .tk__tip{opacity:1;transform:translate(-50%,0)}
.tk__note{position:relative;z-index:3;text-align:center;width:min(46ch,var(--wrap));margin:-10px auto 0;color:var(--ink2)}
.tk--empty .tk__arc{display:none}
/* pause offscreen */
.tk:not(.is-live) .tk__tex,.tk:not(.is-live) .tk__rays,.tk:not(.is-live) .tk__corona,.tk:not(.is-live) .tk__embers i,.tk:not(.is-live) .tk__lift{animation-play-state:paused}
@keyframes tkSpin{to{rotate:360deg}}
@keyframes tkPulse{50%{opacity:.6;scale:1.04}}
@keyframes tkFloat{50%{translate:0 -7px}}
@keyframes tkEmber{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.9}100%{transform:translate3d(30px,-80vh,0);opacity:0}}
@media (max-width:1023px){
  .tk__stage{--ts:52px;height:clamp(520px,82svh,700px)}
  .tk__sun{--d:min(96vw,460px)}
  .tk__figure{height:66%;bottom:6%}
  .tki b{font-size:calc(var(--ts)*.42)}
  .tk__tip{font-size:9.5px;padding:5px 8px}
  .tk__rays{opacity:.35}
}

/* ======================= 2) 04 AI LAB — creative universe ======================= */
.uni .lab__sticky{background:#060608;perspective:none}
.uni__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(42% 46% at 50% 64%,rgba(255,40,70,.42),transparent 70%),radial-gradient(60% 60% at 50% 60%,rgba(130,30,190,.38),transparent 72%),radial-gradient(90% 70% at 50% 100%,rgba(227,182,90,.12),transparent 70%),#060608}
.uni__bg::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;
  background:repeating-radial-gradient(ellipse 50% 22% at 50% 30%,transparent 0 26px,rgba(255,70,90,.22) 27px,transparent 29px);
  -webkit-mask:radial-gradient(60% 80% at 50% 30%,#000,transparent 75%);mask:radial-gradient(60% 80% at 50% 30%,#000,transparent 75%);opacity:.8}
.uni__scene{position:absolute;inset:0;z-index:-1;perspective:1100px;perspective-origin:50% 45%;overflow:hidden}
.uni__world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform:rotateX(4deg)}
/* portal ring */
.uni__portal{position:absolute;left:50%;top:62%;width:min(54vh,560px);aspect-ratio:1;transform:translate(-50%,-50%) translateZ(-160px);border-radius:50%;pointer-events:none}
.uni__portal i{position:absolute;inset:0;border-radius:50%}
.uni__portal i:nth-child(1){background:conic-gradient(from 0deg,#ff2d6f,#a23cff,#e3b65a,#ff2d6f,#7a2bff,#ff2d6f);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%,#000 69%,transparent 71%);mask:radial-gradient(circle,transparent 63%,#000 65%,#000 69%,transparent 71%);filter:drop-shadow(0 0 16px #ff2d6f) drop-shadow(0 0 40px rgba(162,60,255,.8));animation:tkSpin 9s linear infinite}
.uni__portal i:nth-child(2){background:radial-gradient(circle,rgba(255,60,110,.32) 0%,rgba(140,40,220,.22) 45%,transparent 66%);animation:tkPulse 4s ease-in-out infinite}
.uni__portal i:nth-child(3){inset:-14%;background:conic-gradient(from 90deg,transparent 0 70%,rgba(255,215,140,.75) 80%,transparent 90%);
  -webkit-mask:radial-gradient(circle,transparent 66%,#000 67.5%,transparent 69%);mask:radial-gradient(circle,transparent 66%,#000 67.5%,transparent 69%);animation:tkSpin 5s linear infinite reverse}
.uni__floorring{position:absolute;left:50%;top:94%;width:min(70vw,900px);height:160px;transform:translate(-50%,-50%) translateZ(0);border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,70,110,.55);box-shadow:0 0 30px rgba(255,40,90,.55),inset 0 0 40px rgba(162,60,255,.45)}
/* figure (from behind) */
.uni__figure{position:absolute;left:50%;bottom:-2%;height:72%;width:auto;max-width:none;transform:translateX(-50%) translateZ(0);pointer-events:none;
  filter:brightness(.55) contrast(1.15) drop-shadow(0 0 1.5px rgba(255,120,150,.95)) drop-shadow(0 0 26px rgba(255,40,90,.55))}
/* light streaks */
.uni__streaks{position:absolute;left:50%;top:60%;width:min(150vh,1300px);height:auto;transform:translate(-50%,-50%) translateZ(var(--sz,-40px));overflow:visible;pointer-events:none}
.uni__streaks--front{--sz:60px;-webkit-mask:linear-gradient(180deg,transparent 47%,#000 58%);mask:linear-gradient(180deg,transparent 47%,#000 58%)}
.uni__streaks--back{-webkit-mask:linear-gradient(180deg,#000 42%,transparent 53%);mask:linear-gradient(180deg,#000 42%,transparent 53%)}
.uni__streaks ellipse{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:240 1900;animation:uniOrbit var(--o,6s) linear infinite;filter:drop-shadow(0 0 6px currentColor)}
.uni__streaks ellipse.s2{stroke-width:2;stroke-dasharray:140 1300;--o:4.4s;animation-direction:reverse}
.uni__streaks ellipse.s3{stroke-width:1.6;stroke-dasharray:90 900;--o:8s}
/* tool cubes */
.uni__tiles{position:absolute;inset:0;transform-style:preserve-3d}
.cube{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);transform-style:preserve-3d;
  transform:translateZ(var(--z)) scale(.4);opacity:0;transition:transform 1.4s cubic-bezier(.2,1.2,.3,1) calc(var(--i)*80ms),opacity .8s calc(var(--i)*80ms)}
.uni--in .cube{transform:translateZ(var(--z)) scale(1);opacity:1}
.cube__body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));animation:uniBob var(--dur) ease-in-out calc(var(--i)*-1.3s) infinite}
.cube__f{position:absolute;inset:0;border-radius:10%;backface-visibility:hidden;
  background:linear-gradient(145deg,#2a1830,#0b0710 70%);box-shadow:inset 0 0 0 1px rgba(255,190,140,.16),inset 0 1px 0 rgba(255,255,255,.18)}
.cube__front{transform:translateZ(calc(var(--s)/2));background:none;box-shadow:none}
.cube__back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube__right{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube__left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube__top{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube__bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube--tool .cube__f:not(.cube__front){border-radius:10%;background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 80%,#000),color-mix(in srgb,var(--c2) 70%,#000));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 18px rgba(0,0,0,.45)}
.cube--tool .cube__top{background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 85%,#fff 15%),var(--c1))}
.cube--tool .cube__bottom,.cube--tool .cube__back{background:color-mix(in srgb,var(--c2) 60%,#000)}
.cube--decor .cube__front{background:linear-gradient(145deg,#2a1830,#0b0710 70%);box-shadow:inset 0 0 0 1px rgba(255,190,140,.16),inset 0 1px 0 rgba(255,255,255,.18);border-radius:16%}
.tki--cube{--ts:var(--s);border-radius:10%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.4),0 0 24px rgba(255,60,110,.18)}
.cube--tool .cube__front{pointer-events:auto;cursor:default}
.cube__tip{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,6px) translateZ(calc(var(--s)/2 + 2px));white-space:nowrap;padding:6px 11px;border-radius:999px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--accent);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.cube--tool:hover .cube__tip{opacity:1;transform:translate(-50%,0) translateZ(calc(var(--s)/2 + 2px))}
.cube--tool:hover .cube__body{animation-play-state:paused}
/* overlay text: centred like a title card */
.uni .lab__overlay{left:50%;transform:translateX(-50%);top:clamp(84px,11vh,120px);max-width:min(760px,92vw);text-align:center;display:flex;flex-direction:column;align-items:center;z-index:2}
.uni .lab__title{font-size:clamp(56px,9vw,150px);margin-top:10px}
.uni__sub{margin:10px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(12px,1.2vw,15px);letter-spacing:.5em;text-transform:uppercase;color:#ffb3c4;text-shadow:0 0 18px rgba(255,40,90,.6)}
.uni .lab__desc{margin:14px auto 0;max-width:44ch;color:var(--ink2)}
.uni .lab__words{position:absolute;left:50%;bottom:clamp(26px,5vh,54px);transform:translateX(-50%);flex-direction:row;gap:.6em;margin:0;white-space:nowrap;z-index:2;pointer-events:none}
.uni .lab__words .w.on{text-shadow:0 0 30px rgba(255,60,110,.45),0 0 12px rgba(227,182,90,.4)}
.uni .lab__overlay::after{content:"";position:absolute;inset:-40px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(6,6,8,.55),transparent);pointer-events:none}
.uni--empty .uni__tiles .cube--tool{display:none}
.uni__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* pause offscreen */
.uni .lab__sticky:not(.is-live) *{animation-play-state:paused!important}
@keyframes uniOrbit{to{stroke-dashoffset:-2140}}
@keyframes uniBob{0%,100%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(0)}50%{transform:rotateX(calc(var(--rx) + 8deg)) rotateY(calc(var(--ry) - 14deg)) translateY(-10px)}}
/* phones / small screens: flat glossy tiles, no 3D world */
.uni--flat .uni__scene{perspective:none}
.uni--flat .uni__world{transform:none!important;transform-style:flat}
.uni--flat .uni__tiles,.uni--flat .cube,.uni--flat .cube__body{transform-style:flat}
.uni--flat .cube{transform:translateY(calc(var(--up,0)*-40px*(1 + var(--i)*.15))) scale(.5)}
.uni--flat.uni--in .cube{transform:translateY(calc(var(--up,0)*-40px*(1 + var(--i)*.15))) scale(1)}
.uni--flat .cube__body{transform:rotate(calc(var(--ry)*.25));animation:tkFloat 5s ease-in-out calc(var(--i)*-.8s) infinite}
.uni--flat .cube__front{transform:none}
.uni--flat .uni__portal,.uni--flat .uni__streaks,.uni--flat .uni__floorring,.uni--flat .uni__figure{transform:translate(-50%,-50%)}
.uni--flat .uni__figure{transform:translateX(-50%)}
.uni--flat .uni__floorring{transform:translate(-50%,-50%)}
.uni--flat .uni__streaks--front{display:none}
@media (max-width:1023px){
  .uni .lab__overlay{top:84px}
  .uni .lab__desc{display:block;font-size:14px;max-width:32ch}
  .uni .lab__title{font-size:clamp(52px,16vw,90px)}
  .uni__sub{letter-spacing:.32em;font-size:10.5px}
  .uni__figure{height:52%}
  .uni__portal{width:min(76vw,340px);top:70%}
  .uni__floorring{width:92vw;height:90px}
  .uni .lab__words{font-size:17px;bottom:22px}
  .uni .lab__hint{display:none}
  .tki--cube b{font-size:calc(var(--s)*.4)}
}
@media (prefers-reduced-motion:reduce){
  .tk__item{transition:none;opacity:1;transform:translate3d(var(--x),var(--y),0)}
  .tk *,.uni *{animation:none!important}
  .cube{transition:none;opacity:1}
}

/* ===== v4: hero head-turn ===== */
/* ===== HERO HEAD (turns to face the cursor) — appended ===== */
.hero__head{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero__head-img{position:absolute;left:70%;bottom:-2%;height:min(96%,77.5vw);width:auto;aspect-ratio:4/5;transform:translateX(-50%);
  filter:brightness(.82) contrast(1.05) drop-shadow(-10px -6px 18px rgba(227,182,90,.28));
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 17%);mask-image:linear-gradient(to top,transparent 2%,#000 17%);
  opacity:0;animation:hhIn 1.4s var(--ease) .2s forwards}
@keyframes hhIn{to{opacity:1}}
.hero.has-head .hero__head{opacity:0;transition:opacity .8s ease .9s}  /* the live canvas takes over */
.hero.has-head .hero__fallback{opacity:0}
.hero__canvas{background:var(--bg)}
@media (max-width:1099px){.hero__head-img{left:66%;bottom:-2%;height:92%}}
@media (max-width:760px){.hero__head-img{left:50%;bottom:33.5%;height:min(64%,130vw)}}
@media (prefers-reduced-motion:reduce){.hero__head-img{animation:none;opacity:1}}

/* toolkit: real full-body photo (white-studio cutout) blended into the fiery sun */
.tk__figure--photo{filter:brightness(.9) contrast(1.06) saturate(1.05) drop-shadow(0 0 1.5px rgba(255,190,110,.9)) drop-shadow(0 0 26px rgba(255,110,25,.5))}

/* WHAT I DO: a real photo per chapter (white-studio cutouts), rim-lit in the chapter colour, crossfading on each change */
.chap__figure--photos{aspect-ratio:9/20}
.chap__figure--photos .chap__rim,.chap__figure--photos .chap__sweep{display:none}
.chap__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0;
  transform:translate3d(var(--from,48px),0,0) scale(.965);
  transition:opacity .65s ease,transform .9s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.84) contrast(1.07) saturate(.96) drop-shadow(0 0 1.5px var(--glow,#e3b65a)) drop-shadow(0 0 24px color-mix(in srgb,var(--glow,#e3b65a) 55%,transparent)) drop-shadow(0 28px 36px rgba(0,0,0,.55))}
.chap__photo.is-on{opacity:1;transform:none}
.chap--static .chap__photo{transition:none}
@media (prefers-reduced-motion: reduce){.chap__photo{transition:none}}
.chap__prog li{pointer-events:auto}

/* 360° identity: the v3 liquid chrome sculpture sits in the empty space BESIDE the turnaround figure (a pair, never behind it) */
@media (min-width:1025px){.ident__grid{grid-template-columns:1.5fr 1fr}}
.spin__chrome{position:absolute;left:0;top:2%;width:58%!important;height:84%!important;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease);
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.spin__chrome.is-on{opacity:1}
.spin__stage{z-index:1;left:46%}
.spin__floor{left:73%;width:min(380px,52%)}
.spin__dial{left:73%}
.spin__floor,.spin__dial,.spin__hint{z-index:2}
@media (max-width:760px){
  /* phones: the chrome takes the empty band above the figure, the figure stands centred under it */
  .spin{height:650px}
  .spin__chrome{left:-4%;top:0;width:108%!important;height:250px!important}
  .spin__stage{left:0;top:215px}
  .spin__floor{left:50%;width:min(520px,90%)}
  .spin__dial{left:50%}
}

/* Selected Work: the original category tabs are back; honest coming-soon frames hold the spots for pieces not uploaded yet */
.tile--coming .tile__media{background:radial-gradient(ellipse 80% 60% at 80% 15%,rgba(227,182,90,.19),transparent 70%),linear-gradient(145deg,#101014,#050507 70%);border:1px solid rgba(227,182,90,.18)}
.tile--coming .tile__badge{display:none}

/* WHAT I DO photos: keep the head clear of the section title */
.chap--desk .chap__figure--photos{height:min(80vh,860px)}
.chap--mob .chap__figure--photos{height:62svh}

/* ===== v5: AI LAB alter ego (red/black) — scoped to #lab.xr; the rest of the site stays gold ===== */
.xr{--xr:#ff2a3a;--xr2:#ff6a76;--xrd:#5a0710}
.xr .lab__sticky{background:#060608}
.xr .uni__bg{background:radial-gradient(40% 52% at 50% 58%,rgba(255,42,58,.42),transparent 72%),radial-gradient(70% 60% at 50% 70%,rgba(120,8,22,.55),transparent 75%),radial-gradient(90% 60% at 50% 105%,rgba(255,60,40,.22),transparent 70%),#060608}
.xr .uni__bg::after{background:repeating-radial-gradient(ellipse 50% 22% at 50% 30%,transparent 0 26px,rgba(255,42,58,.2) 27px,transparent 29px)}
/* depth 1: smoke (moves least, opposite the cursor) */
.xr__smoke{position:absolute;inset:-6%;z-index:-2;pointer-events:none;transform:translate3d(calc(var(--xmx,0)*-18px),calc(var(--xmy,0)*-12px),0)}
.xr__plate{position:absolute;left:50%;top:54%;width:min(120vh,1100px);aspect-ratio:1;transform:translate(-50%,-50%);background:url(assets/ailab/plate.webp) center/cover;opacity:.78;
  -webkit-mask:radial-gradient(closest-side,#000 45%,transparent);mask:radial-gradient(closest-side,#000 45%,transparent)}
.xr__fog{position:absolute;inset:0;background:url(assets/ailab/smoke.webp) 0 0/620px 620px repeat;mix-blend-mode:screen;opacity:.5;animation:xrFog 46s linear infinite;
  -webkit-mask:radial-gradient(70% 70% at 50% 60%,#000 20%,transparent 80%);mask:radial-gradient(70% 70% at 50% 60%,#000 20%,transparent 80%)}
.xr__fog--b{background-size:900px 900px;opacity:.36;animation-duration:70s;animation-direction:reverse}
@keyframes xrFog{to{background-position:620px -620px}}
.xr__embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* the iris portal: a nod to the red-eye laptop wallpaper */
.xr .uni__portal{top:52%;width:min(70vh,640px)}
.xr .uni__portal i:nth-child(1){background:conic-gradient(from 0deg,#ff2a3a,#ff8a96,#9c0b1c,#ff2a3a,#ffffff,#ff2a3a);filter:drop-shadow(0 0 16px #ff2a3a) drop-shadow(0 0 44px rgba(255,20,40,.75))}
.xr .uni__portal i:nth-child(2){background:repeating-conic-gradient(from 0deg,rgba(255,42,58,.32) 0 2deg,transparent 2deg 7deg),radial-gradient(circle,rgba(10,0,2,.9) 0 24%,rgba(255,42,58,.4) 25%,rgba(130,10,30,.3) 46%,transparent 64%);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 26%,#000 58%,transparent 64%);mask:radial-gradient(circle,transparent 22%,#000 26%,#000 58%,transparent 64%)}
.xr .uni__portal i:nth-child(3){background:conic-gradient(from 90deg,transparent 0 70%,rgba(255,255,255,.85) 80%,transparent 90%)}
.xr__glint{position:absolute;left:30%;top:24%;width:9%;aspect-ratio:1;background:#fff;transform:rotate(45deg);border-radius:12%;opacity:.0;box-shadow:0 0 18px #fff,0 0 40px var(--xr);animation:xrGlint 6s ease-in-out infinite}
@keyframes xrGlint{0%,70%,100%{opacity:0;transform:rotate(45deg) scale(.6)}80%{opacity:.9;transform:rotate(45deg) scale(1)}}
.xr .uni__floorring{border-color:rgba(255,42,58,.6);box-shadow:0 0 30px rgba(255,42,58,.6),inset 0 0 40px rgba(255,90,100,.35)}
/* depth 2: the character, core of the universe (moves with the 3D world) */
.xr__char{position:absolute;left:50%;bottom:0;height:90%;aspect-ratio:760/1529;transform:translateX(-50%) translateZ(10px);pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 80%,transparent 99%);mask:linear-gradient(180deg,#000 80%,transparent 99%)}
.xr__char img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.xr__glow{filter:brightness(1.4) drop-shadow(0 0 10px var(--xr)) drop-shadow(0 0 34px rgba(255,20,40,.7));opacity:.55;will-change:opacity;animation:xrRim 3.6s ease-in-out infinite}
@keyframes xrRim{0%,100%{opacity:.4}50%{opacity:1}}
.xr__scan{position:absolute;inset:0;opacity:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,42,58,.22) 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent 0 46%,rgba(255,200,205,.55) 50%,transparent 54%) 0 -100%/100% 200% no-repeat;
  -webkit-mask:url(assets/ailab/alterego.webp) center/100% 100%;mask:url(assets/ailab/alterego.webp) center/100% 100%}
.xr--on .xr__scan{animation:xrScan 1.5s steps(1,end) 1 both,xrBar 1.5s linear 1 both}
.xr--on .xr__fig{animation:xrFlick 1.2s steps(1,end) 1}
@keyframes xrScan{0%{opacity:.9}20%{opacity:.2}30%{opacity:.8}55%{opacity:.4}75%{opacity:.6}100%{opacity:0}}
@keyframes xrBar{from{background-position:0 0,0 -100%}to{background-position:0 0,0 100%}}
@keyframes xrFlick{0%{opacity:.25}8%{opacity:1}14%{opacity:.4}22%{opacity:1}40%{opacity:.75}46%{opacity:1}100%{opacity:1}}
/* cubes: red/black glass, white glyphs */
.xr .cube--tool{--c1:#3d0910!important;--c2:#0b0204!important}
.xr .tki{--b1:#4a0a12!important;--b2:#0d0205!important;--fg:#fff2f3!important}
.xr .tki svg{filter:grayscale(1) brightness(1.9) drop-shadow(0 0 6px rgba(255,42,58,.9))}
.xr .tki--cube{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.5),0 0 26px rgba(255,42,58,.45)}
.xr .cube--decor .cube__front,.xr .cube__f{background:linear-gradient(145deg,#3a0a10,#0a0204 70%);box-shadow:inset 0 0 0 1px rgba(255,120,130,.22),inset 0 1px 0 rgba(255,255,255,.18)}
.xr:not(.uni--flat) .uni__tiles{animation:xrOrbit 26s ease-in-out infinite}
@keyframes xrOrbit{0%,100%{transform:rotateY(-10deg)}50%{transform:rotateY(10deg)}}
/* depth 3: the signature (moves most) */
.xr__sig{position:absolute;z-index:2;left:calc(50% + min(9vw,130px));top:31%;width:clamp(220px,25vw,400px);pointer-events:none;
  transform:translate3d(calc(var(--xmx,0)*34px),calc(var(--xmy,0)*22px),0) rotate(-5deg);filter:drop-shadow(0 0 6px rgba(255,42,58,.75)) drop-shadow(0 0 1px #fff)}
.xr__sigsvg{display:block;width:100%;height:auto;overflow:visible}
.xr__sigsvg path{stroke-dasharray:1 1;stroke-dashoffset:1}
.xr__sigfull{opacity:0}
.xr--on .xr__sigsvg path{animation:xrDraw var(--d) cubic-bezier(.45,.05,.55,.95) var(--dl) forwards}
.xr--on .xr__sigfull{animation:xrIn .5s ease var(--end) forwards}
@keyframes xrDraw{to{stroke-dashoffset:0}}
@keyframes xrIn{to{opacity:1}}
/* text: left column on desktop, red accents */
.xr .lab__overlay{left:max(32px,calc((100% - 1240px)/2));transform:none;top:clamp(110px,19vh,190px);max-width:min(420px,30vw);text-align:left;align-items:flex-start}
.xr .lab__overlay::after{inset:-50px -60px;background:radial-gradient(closest-side,rgba(6,6,8,.62),transparent)}
.xr .lab__title{font-size:clamp(56px,8.4vw,132px);filter:drop-shadow(0 0 26px rgba(255,42,58,.45))}
.xr .lab__title .ch{background:linear-gradient(180deg,#fff 0%,#ffd5d8 42%,#ff2a3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.xr .lab__title:not(:has(.ch)){color:#fff}
.xr .label b{color:var(--xr)}
.xr .uni__sub{color:#ffb9bf;text-shadow:0 0 18px rgba(255,42,58,.7)}
.xr .lab__desc{margin-left:0;max-width:36ch}
.xr .lab__words .w.on{color:#fff;text-shadow:0 0 28px rgba(255,42,58,.75),0 0 10px rgba(255,42,58,.5)}
.xr .lab__hint{color:#ff9aa2}
.xr .uni__streaks ellipse{filter:drop-shadow(0 0 7px currentColor)}
/* phones: gentle sway instead of the cursor, lighter layers */
.xr.uni--flat .xr__char{transform:translateX(-50%) translate3d(calc(var(--xmx,0)*10px),0,0)}
.xr--sway .xr__smoke{animation:xrSwayA 9s ease-in-out infinite}
.xr--sway .xr__sig{animation:xrSwayB 7s ease-in-out infinite}
@keyframes xrSwayA{0%,100%{transform:translate3d(-8px,0,0)}50%{transform:translate3d(8px,-4px,0)}}
@keyframes xrSwayB{0%,100%{transform:translate3d(6px,0,0) rotate(-5deg)}50%{transform:translate3d(-6px,-5px,0) rotate(-4deg)}}
@media (max-width:1023px){
  .xr .lab__overlay{left:50%;transform:translateX(-50%);top:84px;max-width:92vw;text-align:center;align-items:center}
  .xr .lab__title{font-size:clamp(52px,16vw,90px)}
  .xr .lab__desc{margin:12px auto 0}
  .xr__char{height:55%}
  .xr .lab__overlay .label{white-space:nowrap;letter-spacing:.16em}
  .xr .uni__portal{top:66%;width:min(86vw,380px)}
  .xr__sig{left:auto;right:3vw;top:auto;bottom:14%;width:min(46vw,230px)}
  .xr__plate{width:150vw;top:62%}
  .xr__fog--b{display:none}
}
@media (prefers-reduced-motion:reduce){
  .xr *{animation:none!important}
  .xr__sigsvg path{stroke-dashoffset:0}
  .xr__sigfull{opacity:1}
  .xr__glow{opacity:.75}
  .xr__smoke,.xr__sig{transform:none}
  .xr__sig{transform:rotate(-5deg)}
}

/* AI LAB (red): keep the orbiting cubes out of the title/description column on desktop */
@media (min-width:1025px){
  .xr .uni__tiles>.cube:nth-child(1){--x:29%!important;--y:80%!important}
  .xr .uni__tiles>.cube:nth-child(5){--x:69%!important;--y:9%!important}
  .xr .uni__tiles>.cube:nth-child(7){--x:40%!important;--y:7%!important}
}

/* YT WORKS: their real channel banner as the header (Ken Burns drift, pink glow, readable gradient), channel row under it like the real channel page */
.ytb{position:relative;display:block;margin:0 0 clamp(28px,4vw,48px);border-radius:22px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#1a0b16,#0b0709);
  box-shadow:0 0 0 1px rgba(255,92,190,.35),0 18px 60px -18px rgba(255,60,170,.55),0 0 90px -30px rgba(255,92,190,.6);transition:box-shadow .4s,transform .4s}
.ytb:hover{box-shadow:0 0 0 1px rgba(255,92,190,.6),0 22px 70px -16px rgba(255,60,170,.7),0 0 120px -26px rgba(255,92,190,.75);transform:translateY(-2px)}
.ytb__art{position:relative;display:block;aspect-ratio:2028/326;overflow:hidden}
.ytb__art img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;animation:ytbDrift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes ytbDrift{from{transform:scale(1.005) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-1.5%,0)}}
.ytb__shade{position:absolute;left:0;right:0;top:0;aspect-ratio:2028/326;pointer-events:none;background:linear-gradient(180deg,rgba(11,7,9,0) 55%,rgba(11,7,9,.85)),radial-gradient(90% 120% at 0% 100%,rgba(255,60,170,.25),transparent 60%)}
.ytb__row{position:relative;display:flex;align-items:center;gap:18px;padding:0 clamp(16px,2.4vw,28px) clamp(16px,2vw,22px)}
.ytb__av{flex:none;width:clamp(72px,8vw,104px);aspect-ratio:1;margin-top:calc(clamp(72px,8vw,104px) * -.42);border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #0f080c,0 0 0 6px rgba(255,92,190,.85),0 0 34px rgba(255,92,190,.6)}
.ytb__av img{width:100%;height:100%;object-fit:cover}
.ytb__info{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:12px}
.ytb__name{font-family:var(--display);font-size:clamp(18px,1.8vw,24px);color:#fff}
.ytb__stats{font-size:13px;color:#d9cdd6}.ytb__stats b{color:#fff}
.ytb__tag{font-size:clamp(13px,1.2vw,15px);color:#ffb3e1;font-weight:600}
.ytb__sub{margin-left:auto;margin-top:12px;flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:#ff0033;color:#fff;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.04em;box-shadow:0 8px 28px -8px rgba(255,0,51,.8)}
.ytb__sub svg{width:20px;height:20px;fill:#fff}
@media (max-width:760px){
  .ytb{border-radius:18px}
  .ytb__art,.ytb__shade{aspect-ratio:auto;height:118px}
  .ytb__art img{object-position:20% 50%}
  .ytb__row{flex-wrap:wrap;gap:4px 14px}
  .ytb__sub{margin:10px 0 0;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ytb__art img{animation:none;transform:none}}

/* ===== GAMING 2 — "HEYYANIXX Gaming" neon-sunset hero (scoped to #gaming.g2) ===== */
.g2{--pink:#ff3da6;--hot:#ff2f7d;--orange:#ff9a3d;--yellow:#ffd84a;--violet:#8a3bff;--cyan:#3ae0ff;--neon:#7dff4f;padding:0 0 clamp(70px,9vw,130px);background:#07040c}
.g2::before{z-index:3;height:110px;background:linear-gradient(#060608,rgba(6,6,8,0))}
.g2::after{display:none}
.g2__stage{position:relative;height:clamp(640px,62.5vw,980px);max-height:calc(100svh + 140px);min-height:620px;overflow:hidden;isolation:isolate;--mx:0;--my:0}
.g2__scene{position:absolute;inset:0;z-index:0;container-type:size}
.g2__layer{position:absolute;inset:-3%;transform:translate3d(calc(var(--mx) * var(--d,0) * 1px),calc(var(--my) * var(--d,0) * .6px),0);will-change:transform;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.g2__bg{--d:-6;inset:auto;left:50%;top:58%;width:max(106cqw,calc(106cqh * 1.6075));aspect-ratio:2400/1493;translate:-50% -58%;container-type:inline-size}
.g2__bg img{width:100%;height:100%}
.g2__sign{position:absolute;left:83.2%;top:46.5%;translate:-50% -50%;rotate:-9deg;font-family:"Kaushan",cursive;font-size:3.1cqw;line-height:1;white-space:nowrap;color:#ffe3f6;text-shadow:0 0 .08em #fff,0 0 .25em #ff3da6,0 0 .6em #ff2f9a,0 0 1.2em #d0007a;animation:g2sign 6s infinite;pointer-events:none}
@keyframes g2sign{0%,8%,10%,62%,64%,66%,100%{opacity:1}9%,63%,65%{opacity:.25}}
.g2__tail,.g2__under{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.g2__tail{width:9%;aspect-ratio:2.6/1;top:61.5%;background:radial-gradient(closest-side,rgba(255,70,90,.85),rgba(255,30,90,.25) 55%,transparent);animation:g2lamp 2.6s ease-in-out infinite}
.g2__tail--l{left:66%}.g2__tail--r{left:85.5%;width:7%;animation-delay:-1.3s}
.g2__under{left:36%;top:81%;width:44%;aspect-ratio:7/1;background:radial-gradient(closest-side,rgba(200,80,255,.55),rgba(255,61,166,.18) 60%,transparent);animation:g2lamp 3.4s ease-in-out infinite}
.g2__char{--d:14;inset:auto;left:57%;bottom:3%;height:88%;aspect-ratio:720/1764;translate:-50% 0}
.g2__char img{display:block}

/* atmosphere */
.g2__clouds{position:absolute;inset:0 0 45%;pointer-events:none;opacity:.55;mix-blend-mode:screen;background:radial-gradient(40% 18% at 20% 30%,rgba(255,150,200,.28),transparent 70%),radial-gradient(35% 14% at 70% 22%,rgba(255,190,140,.22),transparent 70%),radial-gradient(30% 12% at 45% 40%,rgba(190,120,255,.2),transparent 70%);background-size:200% 100%;animation:g2clouds 60s linear infinite}
@keyframes g2clouds{to{background-position:-200% 0,-200% 0,-200% 0}}
.g2__sun{position:absolute;left:50%;top:31%;width:34%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.32),rgba(255,80,160,.12) 45%,transparent 70%);mix-blend-mode:screen;animation:g2sun 7s ease-in-out infinite;pointer-events:none}
@keyframes g2sun{50%{opacity:.6;scale:1.06}}
.g2__shimmer{position:absolute;inset:72% 0 0;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,80,190,.18) 22px 24px,transparent 24px 60px,rgba(60,220,255,.14) 60px 61px,transparent 61px 96px);-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);filter:blur(1.5px);animation:g2shim 4.5s ease-in-out infinite alternate}
@keyframes g2shim{0%{background-position:0 0;transform:scaleY(1)}100%{background-position:60px 0;transform:scaleY(1.06) skewX(-4deg)}}
@keyframes g2lamp{0%,100%{opacity:.55}50%{opacity:1}}
.g2__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,4,12,.78) 0%,rgba(7,4,12,.35) 22%,transparent 40%,transparent 76%,rgba(7,4,12,.4) 100%),linear-gradient(transparent 62%,rgba(7,4,12,.5) 86%,#07040c 100%)}
/* UI layer */
.g2__ui{position:absolute;inset:0;z-index:2;--d:-5;transform:translate3d(calc(var(--mx) * var(--d) * 1px),calc(var(--my) * var(--d) * .6px),0);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.g2__ui > *{pointer-events:auto}
/* left menu = tablist */
.g2__menu{position:absolute;left:clamp(14px,2.2vw,36px);top:clamp(96px,15%,160px);width:clamp(180px,15vw,230px)}
.g2__tabs{position:relative;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:14px;background:linear-gradient(180deg,rgba(14,6,26,.62),rgba(14,6,26,.38));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.g2__tabs [role=tab]{appearance:none;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:none;color:rgba(255,255,255,.74);font-family:"Anton","InterTight",sans-serif;font-size:clamp(13px,1.05vw,16px);letter-spacing:.08em;text-align:left;cursor:pointer;position:relative;transition:color .25s,background .25s,transform .25s}
.g2__tabs [role=tab] i{flex:none;width:18px;height:18px;display:grid;place-items:center}
.g2__tabs [role=tab] svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g2__tabs [role=tab]:first-child svg{fill:currentColor;stroke:none}
.g2__tabs [role=tab]:hover{color:#fff;background:rgba(255,255,255,.07);transform:translateX(3px)}
.g2__tabs [role=tab][aria-selected=true]{color:#fff;background:linear-gradient(90deg,rgba(255,47,125,.55),rgba(255,47,125,.08));box-shadow:inset 3px 0 0 var(--pink),0 0 22px -6px var(--pink);text-shadow:0 0 12px rgba(255,61,166,.9)}
.g2__tabs [role=tab][aria-selected=true] i{color:var(--pink);filter:drop-shadow(0 0 6px var(--pink))}
/* wordmark */
.g2__head{position:absolute;left:clamp(220px,18.5vw,300px);top:clamp(110px,16%,170px);width:min(46vw,760px)}
.g2__kicker{margin:0 0 6px;color:rgba(255,255,255,.7)}
.g2__title{margin:0;line-height:.86;position:relative}
.g2__name{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(64px,8.6vw,150px);letter-spacing:.01em;background:linear-gradient(180deg,#fff4d6 0%,#ffd84a 18%,#ff9a3d 42%,#ff3d8b 68%,#a23bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(40,0,40,.75)) drop-shadow(0 0 26px rgba(255,61,139,.45))}
.g2__script{display:block;margin:-.32em 0 0 34%;font-family:"Kaushan",cursive;font-weight:400;font-size:clamp(48px,6vw,104px);line-height:1;color:#fff;transform:rotate(-6deg);text-shadow:0 0 6px #fff,0 0 16px var(--pink),0 0 34px var(--pink),0 0 60px var(--hot);animation:g2flick 7s infinite}
@keyframes g2flick{0%,18%,20%,52%,54.5%,100%{opacity:1}19%,53%{opacity:.35}54%{opacity:.8}}
.g2__tag{margin:clamp(10px,1.4vw,20px) 0 0;font-family:"Anton",sans-serif;font-size:clamp(15px,1.5vw,24px);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.g2__tag b{font-weight:400;color:var(--yellow);text-shadow:0 0 14px rgba(255,216,74,.6)}
/* player chip */
.g2__chip{position:absolute;right:clamp(14px,2.2vw,36px);top:clamp(88px,11%,120px);display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:16px;background:linear-gradient(135deg,rgba(20,8,34,.78),rgba(40,10,40,.6));border:1px solid rgba(255,216,74,.35);box-shadow:0 0 24px -8px rgba(255,216,74,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.g2__ava{width:48px;height:48px;border-radius:12px;overflow:hidden;border:2px solid var(--yellow);box-shadow:0 0 14px -2px var(--yellow);background:#140a04}
.g2__ava img{width:100%;height:100%;object-fit:cover}
.g2__who{display:flex;flex-direction:column;line-height:1.15}
.g2__who b{display:flex;align-items:center;gap:6px;font-family:"Anton",sans-serif;font-weight:400;font-size:18px;letter-spacing:.06em;color:#fff}
.g2__tick{width:16px;height:16px;fill:var(--cyan);stroke:#07040c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g2__meta{display:flex;gap:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.85)}
.g2__meta>span:first-child{color:var(--neon)}
.g2__rank{display:flex;flex-direction:column;align-items:center;gap:1px;padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.g2__rank svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(255,179,71,.6))}
.g2__rank em{font-style:normal;font-family:"Anton",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffcf7a}

.g2__gear{position:absolute;right:clamp(14px,2.4vw,44px);top:clamp(150px,19%,210px);width:clamp(120px,10vw,170px)}






.g2__gearup{appearance:none;border:0;background:none;cursor:pointer;padding:0;position:absolute;right:90%;top:auto;bottom:-12%;margin:0;display:flex;align-items:flex-end;gap:2px;white-space:nowrap;font-family:"Kaushan",cursive;font-size:clamp(26px,2.4vw,40px);color:#fff;transform:rotate(-8deg);text-shadow:0 0 6px #fff,0 0 16px var(--cyan),0 0 30px var(--cyan);animation:g2flick 9s -3s infinite}
.g2__gearup svg{width:62px;height:32px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--cyan));transform:translateY(-14px)}
/* UID card */
.g2__uid{appearance:none;position:absolute;left:clamp(14px,2.2vw,36px);bottom:clamp(22px,4%,44px);display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:16px;cursor:pointer;color:#fff;text-align:left;background:linear-gradient(135deg,rgba(255,47,125,.28),rgba(20,8,34,.82) 55%);border:1px solid rgba(255,61,166,.55);box-shadow:0 0 28px -8px var(--pink),inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s,box-shadow .3s}
.g2__uid:hover{transform:translateY(-3px);box-shadow:0 0 40px -6px var(--pink)}
.g2__uid.is-copied{box-shadow:0 0 0 2px var(--neon),0 0 40px -6px var(--neon)}
.g2__uidava{width:54px;height:54px;border-radius:12px;overflow:hidden;border:2px solid var(--yellow);flex:none;background:#140a04}
.g2__uidava img{width:100%;height:100%;object-fit:cover}
.g2__uidtxt{display:flex;flex-direction:column;line-height:1.1}
.g2__uidtxt em{font-style:normal;font-family:"Anton",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.g2__uidtxt b{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(24px,2.1vw,32px);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.g2__uidtxt small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.g2__copy{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;margin-left:4px;opacity:.85}
/* 3 tiles */
.g2__tiles{position:absolute;right:clamp(14px,2.2vw,36px);bottom:clamp(22px,4%,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(43vw,610px)}
.g2__tile{appearance:none;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border-radius:14px;cursor:pointer;color:#fff;text-align:left;overflow:hidden;background:linear-gradient(160deg,rgba(var(--c),.32),rgba(14,6,26,.84) 60%);border:1px solid rgba(var(--c),.6);box-shadow:0 0 24px -10px rgba(var(--c),1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s,box-shadow .3s}
.g2__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.g2__tile:hover{transform:translateY(-4px);box-shadow:0 0 36px -6px rgba(var(--c),1)}
.g2__tile:hover::after{transform:translateX(120%)}
.g2__tile--rank{--c:255,61,166}.g2__tile--custom{--c:58,224,255}.g2__tile--paid{--c:255,216,74}
.g2__tile i svg{width:24px;height:24px;fill:none;stroke:rgb(var(--c));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgb(var(--c)));margin-bottom:6px}
.g2__tile b{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(16px,1.5vw,22px);letter-spacing:.08em;text-transform:uppercase;line-height:1.05}
.g2__tile span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* panels screen below the hero */
.g2__wrap{position:relative;z-index:3;margin-top:clamp(-40px,-3vw,-20px)}
.g2 .pmenu__screen{scroll-margin-top:90px;box-shadow:0 0 0 1px rgba(255,61,166,.4),0 40px 120px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(255,61,166,.45)}
.g2__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(255,47,125,.22),rgba(255,154,61,.1) 45%,rgba(58,224,255,.1))}
.g2__now{font-family:"Anton",sans-serif;font-size:20px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 0 14px rgba(255,61,166,.8)}
.g2__now::before{content:"▶ ";color:var(--pink)}
.g2__hud{display:flex;align-items:center;gap:14px;font-family:"Anton",sans-serif;font-size:17px;letter-spacing:.04em;color:#fff}
/* lightbox */
.g2lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(6,3,10,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:g2fade .3s ease both}
.g2lb[hidden],.g2lb [hidden]{display:none}
.g2lb figure{margin:0;max-width:min(92vw,1100px);text-align:center}
.g2lb img,.g2lb video{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 60px -10px var(--pink);margin:0 auto}
.g2lb figcaption{margin-top:12px;font-family:"Kaushan",cursive;font-size:24px;color:#fff;text-shadow:0 0 14px var(--pink)}
.g2lb__x{position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer}
@keyframes g2fade{from{opacity:0}}
/* tablet */
@media (max-width:1100px){
  .g2__head{left:clamp(200px,22vw,240px);width:52vw}
  .g2__tiles{width:56vw}
  .g2__gearup{display:none}
}
/* phone: stacked */
@media (max-width:760px){
  .g2__stage{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column}
  .g2__scene{position:relative;order:2;height:clamp(420px,118vw,560px);margin-top:-30px;overflow:hidden}
  .g2__bg img{object-position:50% 72%}
  .g2__char{left:50%;bottom:0;height:94%;translate:-50% 0}
  .g2__shade{background:linear-gradient(#07040c 0%,transparent 16%,transparent 70%,#07040c 100%)}
  .g2__ui{position:static;display:contents;transform:none}
  .g2__head{position:relative;order:1;left:auto;top:auto;width:auto;padding:84px 18px 0;z-index:2}
  .g2__name{font-size:clamp(54px,17vw,76px)}
  .g2__script{font-size:clamp(44px,13vw,60px);margin-left:38%}
  .g2__tag{font-size:15px;letter-spacing:.1em}
  .g2__chip{position:relative;order:1;right:auto;top:auto;align-self:flex-start;margin:16px 18px 0;z-index:2}
  .g2__menu{position:relative;order:3;left:auto;top:auto;width:auto;margin:-46px 0 0;z-index:3}
  .g2__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;gap:6px;padding:8px 14px;border-radius:0;border-left:0;border-right:0;background:rgba(14,6,26,.72)}
  .g2__tabs::-webkit-scrollbar{display:none}
  .g2__tabs [role=tab]{flex:none;width:auto;scroll-snap-align:center;padding:9px 13px;font-size:13px;border-radius:99px;border:1px solid rgba(255,255,255,.14);gap:8px}
  .g2__tabs [role=tab]:hover{transform:none}
  .g2__tabs [role=tab][aria-selected=true]{box-shadow:0 0 0 1px var(--pink),0 0 18px -4px var(--pink);background:linear-gradient(90deg,rgba(255,47,125,.6),rgba(255,47,125,.25))}
  .g2__gear{position:relative;order:4;right:auto;top:auto;width:auto;padding:22px 14px 4px}
  
  
  
  .g2__gearup{display:flex;position:relative;right:auto;bottom:auto;justify-content:center;margin:6px 0 0;font-size:28px}
  .g2__uid{position:relative;order:5;left:auto;bottom:auto;margin:14px 14px 0;width:calc(100% - 28px)}
  .g2__tiles{position:relative;order:6;right:auto;bottom:auto;width:auto;margin:12px 14px 0;gap:8px}
  .g2__tile{padding:11px 10px;min-width:0}
  .g2__tile b{font-size:14px}
  .g2__tile span{font-size:9.5px;letter-spacing:.03em}
  .g2__tile i svg{width:20px;height:20px;margin-bottom:2px}
  .g2__wrap{margin-top:22px}
  .g2__bar{padding:12px 14px}
  .g2__now{font-size:16px}
  .g2__hud{font-size:14px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .g2__layer,.g2__ui{transition:none;transform:none!important}
  .g2__char img,.g2__clouds,.g2__sun,.g2__shimmer,.g2__tail,.g2__under,.g2__sign,.g2__script,.g2__gearup{animation:none!important}
}


/* ===== GAMING 3 (v6): video card in place of the polaroids, neon sign uncovered, living character ===== */
.g2__sign{left:80%;top:35.5%;display:flex;flex-direction:column;align-items:center;font-size:3.3cqw}
.g2__sign b{font-weight:400}
.g2__sign em{font-style:normal;font-size:.62em;margin:-.06em 0 0 .9em;color:#e6fdff;text-shadow:0 0 .08em #fff,0 0 .25em #3ae0ff,0 0 .6em #19b8ff,0 0 1.2em #0a7dff;animation:g2sign 7.3s -2.4s infinite}
/* video card */
.g2__gear{right:clamp(18px,2.6vw,46px);top:clamp(330px,46%,470px);width:clamp(130px,11.6vw,200px)}
.g2vc{appearance:none;border:0;background:none;padding:0;margin:0;display:block;width:100%;cursor:pointer;color:#fff;position:relative;transform:rotate(3.5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.g2vc__frame{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#12061c;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(255,61,166,.9),0 0 18px 2px rgba(255,61,166,.75),0 0 46px 4px rgba(58,224,255,.35),0 24px 40px -14px rgba(0,0,0,.85);-webkit-box-reflect:below 8px linear-gradient(transparent 78%,rgba(255,255,255,.22))}
.g2vc__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 32%,transparent 70%,rgba(58,224,255,.18));box-shadow:inset 0 0 0 1px rgba(58,224,255,.5),inset 0 0 22px rgba(255,61,166,.35)}
.g2vc__poster,.g2vc__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.g2vc__vid{opacity:0;transition:opacity .5s}
.g2vc.is-playing .g2vc__vid{opacity:1}
.g2vc__tag{position:absolute;left:8px;top:8px;z-index:2;font:normal 10px/1 "Anton",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:5px 7px 4px;border-radius:6px;background:rgba(10,4,18,.62);border:1px solid rgba(255,61,166,.7);text-shadow:0 0 6px var(--pink)}
.g2vc__tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink);margin-right:5px;vertical-align:1px}
.g2vc__play{position:absolute;left:50%;top:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:rgba(10,4,18,.5);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 16px rgba(255,61,166,.8);transition:opacity .35s,transform .35s}
.g2vc__play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.g2vc.is-playing .g2vc__play{opacity:0;transform:scale(.8)}
.g2vc:hover,.g2vc:focus-visible{transform:rotate(0deg) scale(1.04)}
.g2vc:hover .g2vc__play,.g2vc:focus-visible .g2vc__play{opacity:1;transform:none}
.g2vc:focus-visible{outline:none}
.g2vc:focus-visible .g2vc__frame{outline:2px solid #fff;outline-offset:4px}
.g2__gearup{right:100%;bottom:8%;margin-right:-6px}
/* About Me panel: the same edit */
.ppanel__shots--vid{display:flex;justify-content:center;align-items:flex-start}
.g2vc--brief{width:min(100%,250px);transform:rotate(-2deg)}
.g2vc--brief .g2vc__frame{-webkit-box-reflect:none}

/* living character: entrance > lean (cursor / gyro) > weight-shift sway > breathing torso */
.g2c,.g2c__lean,.g2c__sway{position:absolute;inset:0}
.g2c{transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.g2--pre .g2c{opacity:0;transform:translateY(7%) scale(.96)}
.g2c__lean{transform-origin:50% 100%;transform:perspective(1200px) rotateY(calc(var(--mx) * 7deg)) rotate(calc(var(--mx) * 1.1deg)) translateX(calc(var(--mx) * 3px))}
.g2c__sway{transform-origin:50% 100%;animation:g2sway 7.6s ease-in-out infinite;will-change:transform}
.g2c__sway img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.g2c__legs,.g2c__torso{filter:drop-shadow(0 0 16px rgba(255,61,166,.25)) drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.g2c__legs{clip-path:inset(49.4% 0 0 0)}
.g2c__torso{clip-path:inset(0 0 50% 0);transform-origin:50% 50%;animation:g2breathe 4.4s ease-in-out infinite;will-change:transform}
.g2c__rim{transform:scale(1.035);transform-origin:50% 100%;opacity:.5;will-change:opacity}
.g2c__rim--p{animation:g2rim 3.4s ease-in-out infinite}
.g2c__rim--g{animation:g2rim 3.4s -1.7s ease-in-out infinite}
.g2c__refl{top:100%!important;transform:scaleY(-1);transform-origin:50% 0;opacity:.2;-webkit-mask-image:linear-gradient(transparent 84%,#000);mask-image:linear-gradient(transparent 84%,#000)}
.g2c__shadow{position:absolute;left:14%;right:14%;bottom:-1.6%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(40,0,30,.25) 60%,transparent);animation:g2shadow 7.6s ease-in-out infinite;will-change:transform}
.g2--flash .g2c__rim{animation:g2flash 1s ease-out 1}
@keyframes g2sway{0%,100%{transform:translateX(-.55%) rotate(-.6deg)}50%{transform:translateX(.55%) rotate(.6deg)}}
@keyframes g2breathe{0%,100%{transform:scale(1,1)}45%{transform:scale(1.004,1.013)}}
@keyframes g2rim{0%,100%{opacity:.25}50%{opacity:.78}}
@keyframes g2shadow{0%,100%{transform:translateX(-2%) scaleX(1.04);opacity:.9}50%{transform:translateX(2%) scaleX(.95);opacity:.75}}
@keyframes g2flash{0%{opacity:0}25%{opacity:1}100%{opacity:.5}}
.g2--off .g2__stage *{animation-play-state:paused!important}
@media (max-width:1100px) and (min-width:761px){.g2__gear{width:clamp(120px,13vw,160px);top:clamp(300px,48%,440px)}}
@media (max-width:760px){
  .g2__sign{left:67.5%;top:21%;font-size:3.5cqw}
  .g2__gear{position:relative;order:4;right:auto;top:auto;width:auto;padding:24px 0 30px;display:flex;flex-direction:column;align-items:center}
  .g2vc--hero{width:min(64vw,270px);transform:rotate(2deg)}
  .g2vc--hero .g2vc__frame{-webkit-box-reflect:none}
  .g2__gearup{position:relative;right:auto;bottom:auto;margin:14px 0 0;order:-1;margin:0 0 12px}
  .g2__gearup svg{transform:translateY(-4px) rotate(70deg)}
  .g2c__lean{transform:perspective(1200px) rotateY(calc(var(--mx) * 6deg)) rotate(calc(var(--mx) * .8deg))}
}
@media (prefers-reduced-motion:reduce){
  .g2c,.g2c__lean,.g2c__sway,.g2c__torso,.g2c__rim,.g2c__shadow,.g2vc{animation:none!important;transition:none!important}
  .g2c__lean{transform:none!important}
  .g2--pre .g2c{opacity:1;transform:none}
  .g2__sign em{animation:none!important}
}

/* GET THE APP */
.getapp{padding:clamp(48px,8vw,96px) 0}
.getapp__card{max-width:980px;margin:0 auto;width:calc(100% - 40px);display:flex;gap:28px;align-items:center;padding:clamp(22px,4vw,40px);border:1px solid rgba(227,182,90,.35);border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,rgba(227,182,90,.16),transparent 55%),rgba(255,255,255,.03);box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.getapp__icon img{width:84px;height:84px;border-radius:22px;box-shadow:0 10px 30px rgba(227,182,90,.25);display:block}
.getapp__text h2{font-size:clamp(26px,4vw,40px);margin:6px 0 8px;line-height:1.1}
.getapp__text h2 span{color:#e3b65a}
.getapp__text p{opacity:.8;margin:0 0 16px}
.getapp__btns{display:flex;flex-wrap:wrap;gap:12px}
.getapp__note{font-size:12px;opacity:.55!important;margin:14px 0 0!important}
@media (max-width:640px){.getapp__card{flex-direction:column;text-align:center}.getapp__btns{justify-content:center}}

/* ===== HEYY ARCADE: gaming-panel entry points (games themselves load on demand from games/) ===== */
.hero__ctas .btn--play{background:linear-gradient(180deg,#f7dc9c,#e3b65a 60%,#c8963b);color:#060608;border-color:transparent;box-shadow:0 0 0 1px rgba(227,182,90,.5),0 8px 26px rgba(227,182,90,.35)}
.hero__ctas .btn--play span{color:#060608}
.g2__playcta{grid-column:1 / -1;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,241,201,.6);background:linear-gradient(100deg,#f7dc9c,#e3b65a 55%,#c8963b);color:#060608;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(227,182,90,.35);animation:hxCta 2.4s ease-in-out infinite}
.g2__playcta b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:20px;letter-spacing:.08em;line-height:1}
.g2__playcta small{display:block;font-size:11.5px;font-weight:700;opacity:.8;margin-top:3px}
.g2__playcta-ic{font-size:26px;line-height:1}
.g2__playcta-go{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#060608;color:#e3b65a;display:grid;place-items:center;font-size:14px}
.g2__playcta:focus-visible,.hxarc__card:focus-visible,.hxarc__all:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes hxCta{50%{transform:translateY(-2px);box-shadow:0 14px 36px rgba(227,182,90,.5)}}
#pmenu-tabs .g2tab--play span{color:#e3b65a}
.hxarc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hxarc__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:150px;padding:14px;border-radius:18px;border:1px solid rgba(227,182,90,.35);background:radial-gradient(120% 90% at 100% 0%,rgba(227,182,90,.2),transparent 60%),linear-gradient(160deg,#15121c,#08080b);color:#eceef3;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s}
.hxarc__card:hover{transform:translateY(-3px);border-color:#e3b65a}
.hxarc__card:active{transform:scale(.98)}
.hxarc__card i{font-style:normal;font-size:30px;line-height:1;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#000;border:1px solid rgba(227,182,90,.5)}
.hxarc__txt em{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.16em;color:#e3b65a}
.hxarc__txt b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:20px;letter-spacing:.03em;color:#fff;line-height:1.05;margin-top:2px}
.hxarc__txt small{display:block;font-size:12px;color:#b9bdc9;margin-top:4px;line-height:1.35}
.hxarc__go{margin-top:auto;font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.12em;color:#060608;background:#e3b65a;border-radius:999px;padding:6px 12px}
.hxarc__card--main{grid-column:1 / -1;min-height:170px;background:radial-gradient(90% 120% at 100% 100%,rgba(255,138,61,.35),transparent 60%),radial-gradient(80% 90% at 90% 0%,rgba(161,36,95,.55),transparent 60%),linear-gradient(160deg,#1a0d24,#08080b)}
.hxarc__card--main .hxarc__txt b{font-size:28px}
.hxarc__card--main .hxarc__go{font-size:17px;padding:8px 16px}
.hxarc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.hxarc__all{border:0;border-radius:999px;background:#e3b65a;color:#060608;font:800 13px/1 Inter,system-ui,sans-serif;padding:11px 16px;cursor:pointer}
.hxarc__chip{font-size:12.5px;font-weight:700;color:#eceef3;text-decoration:none;padding:9px 12px;border-radius:999px;border:1px solid rgba(221,42,123,.6);background:rgba(255,255,255,.05)}
.hxarc__chip--yt{border-color:rgba(255,0,51,.6)}
@media (min-width:900px){.hxarc{grid-template-columns:repeat(4,minmax(0,1fr))}.hxarc__card--main{grid-column:span 2;grid-row:span 1}}
@media (prefers-reduced-motion:reduce){.g2__playcta{animation:none}}
.hxarc__card{text-decoration:none}
.hxarc__card--learn{grid-column:1 / -1;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;border-color:rgba(34,211,197,.5);background:radial-gradient(90% 120% at 100% 0%,rgba(34,211,197,.18),transparent 60%),linear-gradient(160deg,#0d1719,#08080b)}
.hxarc__card--learn .hxarc__txt{flex:1;min-width:150px}.hxarc__card--learn .hxarc__go{margin-top:0;background:#22d3c5}.hxarc__card--learn .hxarc__txt em{color:#22d3c5}
@media (min-width:900px){.hxarc__card--learn{grid-column:1 / -1}}
@media (max-width:899px){.hxarc__card:nth-child(4){grid-column:1 / -1;min-height:0}}