/* ==========================================================
   Misgan portfolio. Palette is pulled from the photos:
   studio violet, logo-ring blue, and the gold cross.
   ========================================================== */
:root{
  --ink:#04030f;
  --ink-2:#0b0824;
  --violet:#6a3cff;
  --blue:#2a7bff;
  --gold:#e9b44c;
  --bone:#f3f0ff;
  --mute:rgba(243,240,255,.64);
  --line:rgba(243,240,255,.14);
  --glass:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--violet);color:#fff}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:300;background:var(--gold);color:#241a00;padding:.6rem 1rem;border-radius:8px;transition:top .2s}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- canvas + grain ---------- */
#webgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 40%,rgba(106,60,255,.35),transparent 70%),var(--ink)}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main{position:relative;z-index:2}

/* ---------- preloader ---------- */
#preloader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center}
.pre-inner{display:grid;justify-items:center;gap:1.1rem}
.pre-logo{width:96px;height:96px;border-radius:50%;box-shadow:0 0 60px rgba(42,123,255,.55)}
.pre-count{font:700 clamp(3.5rem,10vw,7rem)/1 var(--display);font-variation-settings:"wght" 700,"wdth" 90;display:flex;align-items:baseline;gap:.15em}
.pre-count i{font-style:normal;font-size:.35em;color:var(--gold)}
.pre-line{color:var(--mute);letter-spacing:.02em}
.no-gsap #preloader{display:none}

/* ---------- cursor ---------- */
#cursor{display:none}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor #cursor{display:block;position:fixed;left:0;top:0;z-index:250;pointer-events:none}
.c-dot,.c-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform}
.c-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--gold)}
.c-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(243,240,255,.7);display:grid;place-items:center;
  transition:background .25s,border-color .25s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease)}
.c-label{font:600 .72rem/1 var(--body);color:#fff;opacity:0;transition:opacity .2s}
.c-ring.is-hover{background:rgba(106,60,255,.22);border-color:var(--violet)}
.c-ring.has-label{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--violet);border-color:var(--violet)}
.c-ring.has-label .c-label{opacity:1}
.c-ring.is-down{transform:scale(.85)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:80;top:clamp(.6rem,2vw,1.2rem);left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 1.6rem));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .6rem .5rem .6rem;border-radius:999px;
  background:rgba(8,6,28,.55);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translate(-50%,-140%)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:700 1.1rem/1 var(--display);font-variation-settings:"wght" 700,"wdth" 88}
.brand img{width:40px;height:40px;border-radius:50%}
.nav-links{display:flex;gap:.4rem}
.nav-links a{padding:.55rem 1rem;border-radius:999px;text-decoration:none;color:var(--mute);font-weight:500;font-size:.96rem;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--bone);background:rgba(255,255,255,.08)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--bone);transition:transform .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.progress{position:fixed;z-index:81;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--violet),var(--gold))}

.menu{position:fixed;inset:0;z-index:79;background:rgba(4,3,15,.96);display:grid;align-content:center;gap:.4rem;padding:var(--pad)}
.menu[hidden]{display:none}
.menu a{font:700 clamp(2.6rem,12vw,5rem)/1.1 var(--display);font-variation-settings:"wght" 700,"wdth" 85;text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.6rem;border-radius:999px;border:0;text-decoration:none;
  font-weight:600;font-size:1rem;color:#fff;background:linear-gradient(120deg,var(--violet),var(--blue));
  box-shadow:0 10px 40px -10px rgba(106,60,255,.8),inset 0 1px 0 rgba(255,255,255,.3);transition:box-shadow .3s,filter .3s;will-change:transform}
.btn:hover{filter:brightness(1.12);box-shadow:0 16px 54px -10px rgba(106,60,255,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.btn-sm{padding:.7rem 1.2rem;font-size:.94rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
.hero-name{position:absolute;z-index:1;left:0;right:0;top:clamp(5.5rem,13vh,9rem);text-align:center;white-space:nowrap;
  font-family:var(--display);font-size:clamp(4.2rem,23.5vw,27rem);line-height:.82;letter-spacing:-.045em;
  font-variation-settings:"wght" 500,"wdth" 90,"opsz" 96;color:var(--bone);user-select:none}
.hl{display:inline-block;will-change:transform,font-variation-settings;
  background:linear-gradient(180deg,#fff 10%,#b9a6ff 70%,#6a3cff 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-glow{position:absolute;z-index:2;left:50%;bottom:-10%;width:min(80vw,900px);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(106,60,255,.55),rgba(42,123,255,.18) 55%,transparent 72%);filter:blur(10px)}
.hero-person{position:absolute;z-index:3;left:50%;bottom:0;height:min(88svh,830px);width:auto;max-width:none;transform:translateX(-50%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));will-change:transform}
.hero-foot{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:clamp(1.2rem,4vh,2.6rem);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.hero-lede{max-width:25ch;font-size:clamp(1.05rem,1rem + .5vw,1.4rem);line-height:1.35;font-weight:500;text-shadow:0 2px 18px rgba(4,3,15,.8)}
.hero-actions{display:grid;gap:1rem;justify-items:end}
.status{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .9rem;border-radius:999px;background:rgba(4,3,15,.6);border:1px solid var(--line);font-size:.92rem;color:var(--mute);backdrop-filter:blur(8px)}
.status i{width:9px;height:9px;border-radius:50%;background:#4cf0a0;box-shadow:0 0 0 0 rgba(76,240,160,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(76,240,160,0)}100%{box-shadow:0 0 0 0 rgba(76,240,160,0)}}

/* ---------- marquee ---------- */
.marquee{padding:clamp(3rem,8vw,7rem) 0;overflow:hidden;background:linear-gradient(180deg,rgba(4,3,15,.2),rgba(4,3,15,.7))}
.mq-row{overflow:hidden;padding:.2em 0}
.mq-track{display:flex;align-items:center;width:max-content;gap:clamp(1.5rem,4vw,3.5rem);padding-right:clamp(1.5rem,4vw,3.5rem);will-change:transform}
.mq-track span{font-family:var(--display);font-size:clamp(2.8rem,9vw,8.5rem);line-height:1.05;white-space:nowrap;letter-spacing:-.035em;font-variation-settings:"wght" 700,"wdth" 82,"opsz" 96}
.mq-track svg{flex:none;width:clamp(1.6rem,4vw,3.4rem);fill:var(--gold)}
.mq-row.outline .mq-track span{color:transparent;-webkit-text-stroke:1.5px rgba(243,240,255,.75)}
.mq-row.outline .mq-track svg{fill:var(--violet)}

/* ---------- shared section ---------- */
section{position:relative}
.about,.work,.demo,.skills,.contact{padding-left:var(--pad);padding-right:var(--pad)}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-variation-settings:"wght" 700,"wdth" 86,"opsz" 96}

/* ---------- about ---------- */
.about{padding-top:clamp(4rem,10vw,9rem);padding-bottom:clamp(4rem,10vw,9rem);background:rgba(4,3,15,.55)}
.about-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center;max-width:1280px;margin:0 auto}
.tilt-wrap{perspective:1100px;max-width:460px;margin:0 auto;width:100%}
.tilt-card{position:relative;margin:0;border-radius:32px;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 50px 100px -30px rgba(106,60,255,.7),0 0 0 1px rgba(255,255,255,.12)}
.tilt-card>img{width:100%;height:auto;border-radius:32px;aspect-ratio:940/1672;object-fit:cover}
.glare{position:absolute;inset:0;border-radius:32px;pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.9),transparent 55%)}
.tilt-card:hover .glare{opacity:.65}
.chip{position:absolute;padding:.55rem 1rem;border-radius:999px;background:rgba(8,6,28,.72);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.9rem;font-weight:600;white-space:nowrap;transform:translateZ(60px)}
.chip-a{left:-8%;top:16%}.chip-b{right:-6%;top:44%}.chip-c{left:-4%;bottom:12%}
.split-words{font-size:clamp(1.55rem,1.1rem + 1.9vw,2.9rem);line-height:1.12;font-variation-settings:"wght" 600,"wdth" 90,"opsz" 48;letter-spacing:-.025em}
.split-words .w{display:inline-block;opacity:.18;transition:opacity .1s}
.about-facts{display:grid;gap:1rem;margin:2rem 0;max-width:60ch}
.about-facts li{padding:1rem 0 0;border-top:1px solid var(--line);color:var(--mute)}
.about-facts strong{color:var(--bone);font-weight:600}

/* ---------- work ---------- */
.work{padding:0;background:rgba(4,3,15,.4)}
.work-pin{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:center}
.work-track{display:flex;align-items:center;gap:clamp(1.2rem,3vw,3rem);padding:0 var(--pad);height:100%;width:max-content;will-change:transform}
.work-intro{flex:0 0 min(34vw,460px);display:grid;gap:1.3rem;align-content:center}
.work-intro h2{font-size:clamp(3rem,8vw,7.5rem)}
.work-intro p{color:var(--mute);max-width:34ch}
.work-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:.6rem}
.work-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--violet),var(--gold))}
.work-outro{flex:0 0 min(34vw,420px);display:grid;gap:1.4rem;justify-items:start;align-content:center;padding-right:var(--pad)}
.work-outro p{font:700 clamp(1.8rem,3.4vw,3rem)/1.05 var(--display);font-variation-settings:"wght" 700,"wdth" 86}

.card{flex:0 0 min(430px,80vw);height:min(640px,76svh);display:flex;flex-direction:column;border-radius:28px;background:var(--glass);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform-style:preserve-3d;will-change:transform;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.card-art{flex:0 0 44%;display:grid;place-items:center;padding:1rem;background:radial-gradient(90% 90% at 50% 0%,rgba(106,60,255,.45),rgba(4,3,15,0) 75%);border-bottom:1px solid var(--line)}
.card-art svg{width:100%;height:100%;max-height:100%;transform:translateZ(40px)}
.card-body{flex:1;display:flex;flex-direction:column;gap:.8rem;padding:1.4rem 1.5rem 1.6rem}
.card h3{font:700 clamp(1.4rem,1.1rem + .8vw,1.85rem)/1.08 var(--display);letter-spacing:-.025em;font-variation-settings:"wght" 700,"wdth" 88}
.card p{color:var(--mute);font-size:.98rem;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.tags li{padding:.25rem .7rem;border-radius:999px;border:1px solid var(--line);font-size:.82rem;color:var(--mute)}
.card-link{font-weight:600;color:var(--gold);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px;width:max-content}
.card-link:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .art-restore svg g:first-of-type{animation:none}
}

/* ---------- demo ---------- */
.demo{padding-top:clamp(4rem,10vw,9rem);padding-bottom:clamp(4rem,10vw,9rem);background:rgba(4,3,15,.62)}
.demo-head{max-width:1280px;margin:0 auto 3rem;display:grid;gap:1.2rem}
.demo-head h2{font-size:clamp(2.2rem,5.5vw,5rem);max-width:18ch}
.demo-head p{color:var(--mute);max-width:56ch}
.demo-stage{max-width:1280px;margin:0 auto;display:grid;gap:1.4rem;justify-items:start}
.shopinfo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.7rem 1rem;border-radius:16px;border:1px dashed rgba(233,180,76,.6);background:rgba(233,180,76,.07);width:100%}
.shopinfo>span{font-weight:600;color:var(--gold)}
.shopinfo ul{display:flex;flex-wrap:wrap;gap:.4rem}
.shopinfo li{padding:.2rem .7rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.88rem}
.demo-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem;width:100%}
.chat,.owner{border-radius:26px;background:var(--glass);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.chat-top,.owner-top{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.chat-top i{width:10px;height:10px;border-radius:50%;background:#4cf0a0}
.chat-top em{margin-left:auto;font-style:normal;font-size:.85rem;color:var(--mute)}
.chat-body,.owner-body{flex:1;display:flex;flex-direction:column;gap:.7rem;padding:1.2rem}
.msg{max-width:82%;padding:.75rem 1rem;border-radius:18px;line-height:1.4;font-size:.98rem;animation:pop .4s var(--ease) both}
.msg.cust{align-self:flex-start;background:rgba(255,255,255,.1);border-bottom-left-radius:6px}
.msg.ai{align-self:flex-end;background:linear-gradient(120deg,var(--violet),var(--blue));border-bottom-right-radius:6px}
.msg.sys{align-self:center;max-width:100%;background:transparent;border:1px dashed var(--line);color:var(--mute);font-size:.86rem;border-radius:999px;padding:.4rem .9rem}
.typing{align-self:flex-end;display:flex;gap:5px;padding:.9rem 1rem;border-radius:18px;background:rgba(106,60,255,.5)}
.typing.cust-t{align-self:flex-start;background:rgba(255,255,255,.1)}
.typing b{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.5;animation:blink 1s infinite}
.typing b:nth-child(2){animation-delay:.15s}.typing b:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.owner-idle{color:var(--mute);margin:auto;text-align:center;max-width:24ch;font-size:.95rem}
.alert{padding:1rem 1.1rem;border-radius:18px;border:1px solid var(--gold);background:rgba(233,180,76,.12);animation:pop .4s var(--ease) both;display:grid;gap:.5rem}
.alert strong{color:var(--gold)}
.alert .reply{align-self:start;padding:.45rem .9rem;border-radius:999px;background:var(--gold);color:#2a1d00;font-weight:600;font-size:.88rem;width:max-content}
.owner-sent{padding:.7rem 1rem;border-radius:16px;background:rgba(76,240,160,.14);border:1px solid rgba(76,240,160,.5);animation:pop .4s var(--ease) both;font-size:.95rem}

/* ---------- skills ---------- */
.skills{padding-top:clamp(4rem,10vw,9rem);padding-bottom:clamp(4rem,10vw,9rem);background:rgba(4,3,15,.5)}
.skills>h2{font-size:clamp(2.2rem,5.5vw,5rem);max-width:16ch;max-width:1280px;margin:0 auto 3rem}
.skill-list{max-width:1280px;margin:0 auto;border-top:1px solid var(--line)}
.skill{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:.5rem 3rem;align-items:start;padding:clamp(1.4rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.skill::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(106,60,255,.35),transparent 70%)}
.skill:hover::before{opacity:1}
.skill h3{grid-row:span 2;font:700 clamp(2rem,1.2rem + 4.4vw,4.8rem)/1 var(--display);letter-spacing:-.04em;font-variation-settings:"wght" 300,"wdth" 82,"opsz" 96;
  color:transparent;-webkit-text-stroke:1.2px rgba(243,240,255,.7);transition:color .35s,font-variation-settings .5s var(--ease),-webkit-text-stroke-color .35s}
.skill:hover h3,.skill:focus-within h3{color:var(--bone);font-variation-settings:"wght" 760,"wdth" 82,"opsz" 96;-webkit-text-stroke-color:transparent}
.skill p{color:var(--mute);max-width:46ch}
.stack{display:flex;flex-wrap:wrap;gap:.4rem}
.stack span{padding:.25rem .75rem;border-radius:999px;border:1px solid var(--line);font-size:.86rem;background:rgba(255,255,255,.05)}

/* ---------- contact ---------- */
.contact{padding-top:clamp(4rem,10vw,9rem);padding-bottom:1.4rem;background:rgba(4,3,15,.55)}
.contact-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-copy{display:grid;gap:2rem}
.contact-copy h2{font-size:clamp(2.4rem,5.6vw,5.4rem);max-width:15ch}
.ring-badge{position:relative;width:150px;height:150px}
.ring-badge img{position:absolute;inset:25px;width:100px;height:100px;border-radius:50%}
.ring-text{width:100%;height:100%;animation:spin 18s linear infinite}
.ring-text text{font:600 14px var(--body);fill:var(--gold);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.direct{display:grid;gap:1rem}
.direct li{display:grid;gap:.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.direct span{color:var(--mute);font-size:.9rem}
.direct a{font:700 clamp(1.3rem,1rem + 1.4vw,2rem)/1.2 var(--display);letter-spacing:-.02em;text-decoration:none;word-break:break-word;font-variation-settings:"wght" 600,"wdth" 90}
.direct a:hover{color:var(--gold)}
.form{display:grid;gap:1rem;padding:clamp(1.3rem,3vw,2.2rem);border-radius:28px;background:var(--glass);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.form h3{font:700 1.6rem/1.1 var(--display);letter-spacing:-.02em}
.form label{display:grid;gap:.4rem;font-size:.92rem;color:var(--mute)}
.form input,.form textarea{width:100%;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--line);background:rgba(4,3,15,.55);color:var(--bone);font:inherit;resize:vertical;transition:border-color .2s,box-shadow .2s}
.form input::placeholder,.form textarea::placeholder{color:rgba(243,240,255,.35)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(106,60,255,.35)}
.form input.bad,.form textarea.bad{border-color:#ff6b81}
.form-note{font-size:.88rem;color:var(--mute)}
.form .btn{justify-self:start}
.foot{max-width:1280px;margin:clamp(3rem,8vw,7rem) auto 0;padding:1.4rem 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--mute);font-size:.92rem}
.foot a{text-decoration:underline;text-underline-offset:.3em}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .about-grid,.contact-grid,.demo-cols{grid-template-columns:1fr}
  .chip-a{left:-2%}.chip-b{right:-2%}.chip-c{left:0}
  .skill{grid-template-columns:1fr}
  .skill h3{grid-row:auto}
}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1rem;left:0;right:0;bottom:0;padding:5rem var(--pad) 1.3rem;background:linear-gradient(180deg,rgba(4,3,15,0),rgba(4,3,15,.94) 55%)}
  .hero-actions{justify-items:start}
  .hero-person{height:min(54svh,520px);bottom:clamp(150px,24svh,230px)}
  .hero-name{top:clamp(5rem,12vh,7rem)}
}
@media (max-width:899px){
  .work-pin{height:auto;min-height:0;overflow:visible;display:block;padding:clamp(4rem,10vw,6rem) 0}
  .work-track{flex-direction:column;align-items:stretch;width:100%;height:auto;padding:0 var(--pad);gap:1.4rem}
  .work-intro,.work-outro{flex:none;padding:0}
  .work-progress{display:none}
  .card{flex:none;height:auto;min-height:560px}
  .card-art{flex:none;height:220px}
}
@media (hover:none){
  .skill h3{color:var(--bone);-webkit-text-stroke-color:transparent;font-variation-settings:"wght" 700,"wdth" 82,"opsz" 96}
}
@media (prefers-reduced-motion:reduce){
  .ring-text,.status i,.typing b{animation:none}
  .grain{display:none}
}

.no-gsap .work-pin{overflow-x:auto}