/* ===== Fonts: Vazirmatn only downloads when Persian glyphs are on screen ===== */
@font-face{font-family:Grotesk;src:url("assets/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Mono;src:url("assets/space-mono.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url("assets/vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --ink:oklch(.19 .014 145);--ink-2:oklch(.23 .016 145);--ink-3:oklch(.28 .018 143);--line:oklch(.34 .02 140);
  --paper:oklch(.945 .014 112);--paper-2:oklch(.9 .02 115);--rule:oklch(.82 .022 118);
  --lime:oklch(.915 .175 120);--lime-hi:oklch(.96 .14 120);--lime-ink:oklch(.48 .09 125);
  --olive:oklch(.5 .03 130);--muted:oklch(.74 .025 135);--text-dim:oklch(.84 .02 130);
  --phos:oklch(.88 .19 152);--cyan:oklch(.84 .11 205);--amber:oklch(.83 .14 75);
  --font:Grotesk,system-ui,sans-serif;--mono:Mono,ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--ease-q:cubic-bezier(.25,1,.5,1);
  --pad:clamp(20px,5vw,72px);--nav-h:72px;
  --z-dust:40;--z-nav:50;--z-dock:55;--z-progress:60;--z-boot:90;--z-skip:100
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-size:17px;line-height:1.65;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:4px}
.light :focus-visible,.contact :focus-visible{outline-color:var(--ink)}
img{display:block;width:100%;height:auto}
h1,h2,h3,p,figure,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3{font-weight:500;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--lime);color:var(--ink)}
[data-device=desktop] .ph-only,[data-device=phone] .dt-only{display:none!important}

.skip{position:fixed;z-index:var(--z-skip);top:12px;inset-inline-start:12px;padding:10px 20px;background:var(--lime);color:var(--ink);border-radius:8px;transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}
.progress{position:fixed;inset:0 0 auto;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;z-index:var(--z-progress)}
[dir=rtl] .progress{transform-origin:100% 50%}
.label{font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase}
.dim{color:var(--muted)}
.lime{color:var(--lime)}
.cur{color:var(--lime);animation:blink 1.1s steps(1) infinite}
.light .cur{color:var(--lime-ink)}

/* ===== Boot ===== */
.boot{position:fixed;inset:0;z-index:var(--z-boot);background:var(--ink);display:none;place-items:center;padding:24px;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.booting .boot{display:grid}
.boot.done{opacity:0;transform:scale(1.02);pointer-events:none}
.boot pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--phos);min-width:min(420px,100%);white-space:pre-wrap}
.boot pre .ok{color:var(--lime)}.boot pre .c{color:var(--cyan)}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);background:oklch(.19 .014 145 / .92);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.brand{font-size:30px;font-weight:700;letter-spacing:-.08em;display:inline-flex;align-items:center;line-height:1}
.brand b{font-weight:400;color:var(--lime);font-size:.75em;margin:0 3px;letter-spacing:0;transition:transform .4s var(--ease)}
.brand:hover b:first-child{transform:translateX(-3px)}.brand:hover b:last-child{transform:translateX(3px)}
.nav nav{display:flex;gap:6px}
.nav nav a{display:flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:40px;font-size:15px;color:var(--text-dim);transition:color .2s,background-color .2s}
.nav nav a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--olive);transition:color .2s}
.nav nav a:hover,.nav nav a.on{color:var(--paper);background:var(--ink-3)}
.nav nav a.on i,.nav nav a:hover i{color:var(--lime)}
.nav-tools{display:flex;align-items:center;gap:12px}
.clock{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lang{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:40px;font-family:Vazirmatn,var(--font);font-size:14px;transition:background-color .2s,color .2s,border-color .2s}
.lang:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.nav-cta{height:38px;display:inline-flex;align-items:center;padding:0 18px;border-radius:40px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:500;transition:background-color .2s,transform .3s var(--ease)}
.nav-cta:hover{background:var(--lime-hi);transform:translateY(-1px)}

/* ===== Hero ===== */
.hero{position:relative;padding:28px var(--pad) 28px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,oklch(.88 .19 152 / .025) 0 1px,transparent 1px 3px);pointer-events:none}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted)}
.availability{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.availability i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:beacon 2.6s var(--ease) infinite}
.hero-main{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,5vw,72px) 0 clamp(28px,4vw,48px)}
.identity-command{font-family:var(--mono);font-size:14px;color:var(--text-dim);margin-bottom:28px}
.prompt{color:var(--phos)}
.caret{display:inline-block;width:.6em;height:1.1em;margin-inline-start:4px;vertical-align:-.2em;background:var(--phos);animation:blink 1.05s steps(1) infinite}
.hero h1{font-size:clamp(52px,6.6vw,112px);letter-spacing:-.055em;line-height:.95}
.hero h1 .first{display:block;font-weight:400;font-size:.58em;letter-spacing:-.04em;color:var(--text-dim);margin-bottom:.12em}
.hero h1 strong{display:block;font-weight:600}
.name-dot{color:var(--lime)}
[data-scramble].scrambling{font-variant-numeric:tabular-nums}
.hero-kicker{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--lime);margin-top:28px}
.hero-intro{color:var(--muted);font-size:19px;line-height:1.7;margin:16px 0 36px;max-width:34ch}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px}
.pill{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;border-radius:60px;padding:0 24px;font-size:16px;font-weight:500;overflow:hidden;transition:transform .4s var(--ease),background-color .25s,color .25s,border-color .25s}
.primary{background:var(--lime);color:var(--ink)}
.primary:hover{background:var(--lime-hi);transform:translateY(-2px)}
.ghost{border:1px solid var(--line);color:var(--paper)}
.ghost:hover{border-color:var(--paper);transform:translateY(-2px)}
.pill:active{transform:scale(.97)}
.arrow{font-size:22px;line-height:1;transition:transform .4s var(--ease)}
.pill:hover .arrow{transform:rotate(45deg)}

.signal-stage{position:relative;min-width:0;height:min(540px,62vh);min-height:420px;border:1px solid var(--line);border-radius:14px;background:oklch(.17 .014 148);overflow:hidden;display:flex;flex-direction:column}
.signal-stage canvas{flex:1;width:100%;min-height:0;display:block;touch-action:pan-y}
.chrome{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted);flex-shrink:0}
.chrome .mode{margin-inline-start:auto;color:var(--olive);letter-spacing:.06em;font-size:11px}
.dots{display:inline-flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line)}
.dots i:first-child{background:var(--lime);border-color:var(--lime)}
.signal-foot{position:absolute;inset:auto 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.signal-foot .label{font-size:11px;color:var(--olive)}
.round{pointer-events:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--ink-2);font-size:14px;transition:color .2s,border-color .2s}
.round:hover{color:var(--lime);border-color:var(--lime)}

/* ===== Console ===== */
.console{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);overflow:hidden}
.terminal-output{max-height:180px;min-height:72px;overflow-y:auto;padding:14px 16px 4px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--text-dim);scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}
.terminal-output p{white-space:pre-wrap;animation:line-in .35s var(--ease) both}
.terminal-output .echo{color:var(--phos)}
.terminal-output .warn{color:var(--amber)}
.terminal-output .info{color:var(--cyan)}
.terminal-form{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-top:1px solid var(--line)}
[dir=rtl] .terminal-form{padding:8px 16px 8px 8px}
.terminal-prompt{font-family:var(--mono);font-size:13.5px;color:var(--phos);white-space:nowrap}
.terminal-form input{flex:1;min-width:0;height:40px;background:none;border:0;color:var(--paper);font-family:var(--mono);font-size:14px;caret-color:var(--phos)}
.terminal-form input::placeholder{color:var(--olive)}
.terminal-form input:focus{outline:0}
.terminal-form:focus-within{background:oklch(.25 .02 145)}
.run{width:40px;height:40px;border-radius:10px;background:var(--ink-3);color:var(--phos);font-size:18px;transition:background-color .2s,color .2s}
.run:hover{background:var(--phos);color:var(--ink)}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;color:var(--muted);font-size:14px}
.hero-bottom a{display:flex;align-items:center;gap:12px;transition:color .2s}
.hero-bottom a:hover{color:var(--lime)}
.scroll-icon{font-size:20px;color:var(--lime);animation:nudge 2.4s var(--ease) infinite}

/* ===== Ribbon ===== */
.ribbon{background:var(--lime);color:var(--ink);overflow:hidden;padding:18px 0;direction:ltr}
.ribbon>div{display:flex;gap:36px;width:max-content;white-space:nowrap;font-size:22px;font-weight:500;letter-spacing:-.01em;animation:marquee 38s linear infinite}
.ribbon b{font-family:var(--mono);font-weight:400;color:var(--lime-ink)}

/* ===== Sections ===== */
.section{padding:clamp(72px,9vw,128px) var(--pad)}
.light{background:var(--paper);color:var(--ink)}
.section-label{display:flex;align-items:center;gap:12px;margin-bottom:36px;color:var(--muted)}
.light .section-label{color:var(--olive)}
.idx{font-style:normal;display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border-radius:5px;background:var(--ink);color:var(--lime);font-size:11px}
.contact .idx{background:var(--ink);color:var(--lime)}
h2{font-size:clamp(38px,4.6vw,72px);letter-spacing:-.05em}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:56px}
.section-title .section-label{margin-bottom:20px}
.section-aside{font-size:16px;line-height:1.7;color:var(--muted);flex-shrink:0}
.light .section-aside{color:var(--olive)}
.muted{color:var(--olive)}

/* About */
.about-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,8vw,128px);align-items:center}
.portrait{position:relative;max-width:440px}
.portrait-image{position:relative;aspect-ratio:44/50;overflow:hidden;border-radius:220px 220px 10px 10px;background:var(--paper-2)}
.portrait-image img{height:100%;object-fit:cover;object-position:48% 30%;filter:grayscale(1) contrast(1.06);transform:scale(1.02);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.portrait:hover img{filter:grayscale(.15) contrast(1.04);transform:scale(1.06)}
.scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,oklch(.915 .175 120 / .0) 40%,oklch(.915 .175 120 / .35) 50%,transparent 51%);transform:translateY(-100%);pointer-events:none;mix-blend-mode:multiply}
.visible .scan{animation:scan 1.6s .3s var(--ease) both}
.portrait figcaption{display:flex;justify-content:space-between;gap:16px;padding:16px 4px 0;font-size:13px;color:var(--olive)}
.portrait figcaption span:first-child{font-family:var(--mono);font-size:12px}
.stamp{position:absolute;inset-inline-end:-28px;top:48px;width:108px;height:108px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.4;box-shadow:0 0 0 7px var(--paper);animation:spin 24s linear infinite}
.about h2{margin-bottom:32px}
.about h2 span,.offclock h2 span{color:var(--olive)}
.about-copy>p{max-width:56ch;font-size:19px}
.about-copy>p+p{margin-top:16px}
.about-copy>p.muted{font-size:17px}
.experience{display:flex;gap:20px;border-top:1px solid var(--rule);padding-top:28px;margin-top:40px}
.exp-mark{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex-shrink:0;font-size:22px}
.experience h3{font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.exp-meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--olive)}
.exp-details{font-size:16px;margin-top:12px;max-width:56ch}

/* Stack (expertise): rows, not cards */
.expertise{padding-top:24px}
.stack{border-top:1px solid var(--ink)}
.stack>li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:32px 0;border-bottom:1px solid var(--rule);position:relative;transition:background-color .3s}
.stack>li::after{content:"";position:absolute;inset:0;background:var(--paper-2);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.stack>li>*{position:relative;z-index:1}
.stack-n{font-family:var(--mono);font-size:14px;color:var(--olive);transition:color .3s}
.stack h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em}
.stack p{color:var(--olive);font-size:16px;margin-top:8px;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;direction:ltr}
[dir=rtl] .chips{justify-content:flex-start}
.chips>li{border:1px solid var(--rule);border-radius:40px;padding:5px 13px;font-size:14px;background:var(--paper);transition:border-color .3s,background-color .3s,color .3s}
[data-device=desktop] .stack>li:hover::after{transform:scaleY(1)}
[data-device=desktop] .stack>li:hover .stack-n{color:var(--ink)}
[data-device=desktop] .stack>li:hover .chips>li{border-color:var(--ink)}
[data-device=desktop] .stack>li:hover .chips>li:first-child{background:var(--ink);color:var(--lime)}

/* Projects */
.projects{padding-bottom:80px}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-open{display:block;width:100%;text-align:start;border-radius:12px}
.art{position:relative;height:340px;overflow:hidden;border-radius:12px;isolation:isolate;--mx:50%;--my:50%}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),oklch(1 0 0 / .16),transparent 60%);opacity:0;transition:opacity .4s;z-index:2;pointer-events:none}
[data-device=desktop] .project-open:hover .art::after{opacity:1}
.art-label{position:absolute;inset-inline-start:20px;bottom:18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;direction:ltr;z-index:3}
.art-arrow{position:absolute;inset-inline-end:16px;top:16px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:oklch(.19 .014 145 / .12);font-size:20px;transition:transform .5s var(--ease),background-color .3s,color .3s;z-index:3}
.project-open:hover .art-arrow{transform:rotate(45deg);background:var(--ink);color:var(--lime)}
.crypto-art .art-arrow{background:oklch(.95 .01 112 / .1)}
.project-info{padding:24px 4px 8px}
.project-info>.label{color:var(--olive);font-size:12px}
.project h3{font-size:27px;margin-top:12px;letter-spacing:-.035em}
.project-info>p:not(.label){font-size:16px;color:var(--muted);margin-top:10px}
.project-link{display:inline-flex;gap:6px;margin-top:20px;font-size:15px;color:var(--lime);position:relative}
.project-link::after{content:"";position:absolute;inset:auto 0 -3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.project-open:hover .project-link::after{transform:scaleX(1)}
.art *{transition:transform .8s var(--ease)}
.radio-art{background:var(--lime);color:var(--ink)}
.ring{position:absolute;left:50%;top:47%;border:1px solid oklch(.48 .09 125 / .45);border-radius:50%;translate:-50% -50%}
.r1{width:150px;height:150px}.r2{width:230px;height:230px}.r3{width:310px;height:310px}.r4{width:400px;height:400px}
.ring{animation:ripple 3.6s var(--ease) infinite}.r2{animation-delay:.25s}.r3{animation-delay:.5s}.r4{animation-delay:.75s}
.radio-device{position:absolute;width:100px;height:150px;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-15deg);background:var(--ink);border-radius:15px;box-shadow:16px 20px 0 oklch(.19 .014 145 / .14)}
.radio-device>span{position:absolute;top:28px;left:14px;width:72px;padding:4px 10px;border-radius:3px;background:oklch(.55 .05 135);color:var(--lime);font-family:var(--mono);font-size:20px}
.radio-device>i{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--lime);left:18px;bottom:37px;animation:beacon 1.6s infinite}
.antenna{position:absolute;right:14px;top:-65px;width:9px;height:73px;border-radius:5px;background:var(--ink)}
.device-lines{position:absolute;bottom:15px;left:18px;width:63px;height:10px;background:repeating-linear-gradient(0deg,oklch(.55 .05 135) 0 1px,transparent 1px 4px)}
.project-open:hover .radio-device{transform:translate(-50%,-50%) rotate(0)}
.rfid-art{background:oklch(.72 .045 140);color:var(--ink)}
.rfid-card{position:absolute;left:50%;top:45%;width:210px;height:138px;border-radius:10px}
.card-back{background:oklch(.52 .045 140);transform:translate(-42%,-42%) rotate(19deg)}
.card-front{background:var(--paper);transform:translate(-55%,-55%) rotate(-14deg);box-shadow:0 18px 30px oklch(.19 .014 145 / .18)}
.card-coil{position:absolute;inset:11px;border:1px solid oklch(.68 .04 130);border-radius:9px;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px oklch(.68 .04 130),inset 0 0 0 9px var(--paper),inset 0 0 0 10px oklch(.68 .04 130)}
.card-chip{position:absolute;top:39px;left:30px;width:30px;height:24px;border-radius:4px;background:oklch(.76 .08 115);border:1px solid var(--olive);z-index:1}
.card-word{position:absolute;top:40px;right:25px;font-size:25px;font-weight:600}
.card-number{position:absolute;bottom:29px;left:26px;font-family:var(--mono);font-size:8px}
.project-open:hover .card-front{transform:translate(-60%,-62%) rotate(-6deg)}
.project-open:hover .card-back{transform:translate(-30%,-32%) rotate(26deg)}
.crypto-art{background:var(--ink-3);color:var(--paper)}
.orbit{position:absolute;left:50%;top:46%;width:270px;height:270px;border:1px dashed oklch(.915 .175 120 / .4);border-radius:50%;translate:-50% -50%;animation:spin 30s linear infinite}
.lock{position:absolute;left:50%;top:44%;width:100px;height:140px;transform:translate(-50%,-50%) rotate(-10deg)}
.lock-loop{position:absolute;left:13px;top:0;width:73px;height:80px;border:12px solid oklch(.82 .09 122);border-radius:40px 40px 0 0;transition:transform .6s var(--ease)}
.lock-body{position:absolute;bottom:0;left:0;width:100px;height:85px;background:var(--lime);border-radius:12px;box-shadow:10px 10px 0 oklch(.12 .01 145 / .4)}
.lock-body>span{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--ink);top:29px;left:44px}
.lock-body>span::after{content:"";position:absolute;top:8px;left:4px;width:5px;height:16px;background:var(--ink)}
.project-open:hover .lock{transform:translate(-50%,-50%) rotate(4deg)}
.project-open:hover .lock-loop{transform:translateY(-10px)}
.crypto-tag{position:absolute;z-index:2;font-family:var(--mono);font-size:12px;padding:5px 9px;background:var(--ink);border:1px solid var(--line);border-radius:4px}
.tag-one{top:52px;left:20px;transform:rotate(-6deg)}
.tag-two{bottom:64px;right:20px;transform:rotate(5deg)}
.research-note{display:flex;gap:12px;margin-top:40px;font-size:14px;color:var(--muted)}
.research-note>span:first-child{color:var(--lime)}

/* Off clock */
.offclock{padding-top:80px;padding-bottom:80px}
.off-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,8vw,128px);align-items:end}
.off-layout h2{font-size:clamp(36px,3.8vw,58px)}
.off-layout p{font-size:18px;color:var(--olive);max-width:44ch}
.off-tag{display:flex;align-items:center;gap:12px;margin-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.off-tag b{font-size:22px;font-weight:400;display:inline-block;animation:spin 8s linear infinite}

/* Contact: drenched */
.contact{background:var(--lime);color:var(--ink);padding-bottom:72px}
.contact .section-label{color:var(--ink)}
.contact-top{display:flex;justify-content:space-between;align-items:start;gap:20px}
.contact-top .availability i{background:var(--ink)}
.contact h2{font-size:clamp(46px,8vw,132px);line-height:.98;letter-spacing:-.06em;margin:8px 0 64px}
.contact h2 a{position:relative;display:inline-block;color:var(--ink)}
.contact h2 a::after{content:"";position:absolute;inset:auto 0 .04em;height:.06em;background:var(--ink);transform-origin:0 50%;transition:transform .6s var(--ease)}
.contact h2 a:hover::after{transform:scaleX(.25)}
.contact-bottom{display:flex;justify-content:space-between;gap:48px;align-items:start;border-top:1px solid var(--ink);padding-top:32px}
.contact-bottom>p{font-size:19px;max-width:34ch}
.contact-links{width:min(560px,50%)}
.c-row{display:flex;align-items:center;gap:16px;border-bottom:1px solid oklch(.48 .09 125 / .4)}
.c-row a{flex:1;display:flex;align-items:center;gap:20px;min-height:60px;min-width:0}
.c-row a .label{min-width:88px}
.c-row a span:last-child{font-size:19px;overflow:hidden;text-overflow:ellipsis}
.c-row a:hover span:last-child{text-decoration:underline;text-underline-offset:5px}
.copy{height:34px;padding:0 14px;border-radius:30px;border:1px solid var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.04em;transition:background-color .2s,color .2s}
.copy:hover,.copy.done{background:var(--ink);color:var(--lime)}
.c-arrow{font-size:22px;padding:0 6px}

footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px var(--pad);color:var(--muted);font-size:14px}
footer>a:last-child:hover{color:var(--lime)}

/* ===== Dialog ===== */
dialog{color:var(--paper);background:var(--ink-2);border:1px solid var(--line);border-radius:18px;width:min(640px,calc(100% - 32px));padding:56px 44px 40px;box-shadow:0 40px 120px oklch(.08 .01 145 / .6)}
dialog[open]{animation:pop .5s var(--ease)}
dialog::backdrop{background:oklch(.12 .012 145 / .82)}
dialog[open]::backdrop{animation:fade .3s var(--ease)}
dialog h2{font-size:clamp(32px,4vw,46px);margin:16px 0 20px}
dialog>p:not(.label){font-size:17px;color:var(--text-dim)}
.close-dialog{position:absolute;top:12px;inset-inline-end:12px;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;transition:background-color .2s,color .2s}
.close-dialog:hover{background:var(--ink-3);color:var(--lime)}
.dialog-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.dialog-tags span{border:1px solid var(--line);border-radius:30px;padding:5px 13px;font-size:13px;font-family:var(--mono);direction:ltr}
.dialog-note{font-size:14px!important;color:var(--muted)!important;border-top:1px solid var(--line);padding-top:20px;margin-bottom:28px}
body.dialog-open{overflow:hidden}

#bg-circuit{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(130% 100% at 50% 38%,rgba(0,0,0,.5) 0,#000 72%);mask-image:radial-gradient(130% 100% at 50% 38%,rgba(0,0,0,.5) 0,#000 72%)}
#binary-dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-dust)}

/* ===== Reveal ===== */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal.visible{opacity:1;transform:none}
.js .hero-copy>*,.js .signal-stage,.js .console{opacity:0;transform:translateY(18px)}
.ready .hero-copy>*,.ready .signal-stage,.ready .console{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.hero-copy>:nth-child(2){--d:1}.hero-copy>:nth-child(3){--d:2}.hero-copy>:nth-child(4){--d:3}.hero-copy>:nth-child(5){--d:4}.signal-stage{--d:3}.console{--d:5}

/* ===== Medium desktop / tablets ===== */
@media (max-width:1080px){
  .nav nav a i,.clock{display:none}
  .hero-main{grid-template-columns:1fr}
  .signal-stage{height:420px}
  .stack>li{grid-template-columns:80px 1fr;gap:16px 24px}
  .stack .chips{grid-column:2;justify-content:flex-start}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-layout,.off-layout{grid-template-columns:1fr}
  .portrait{max-width:380px}
  .contact-bottom{flex-direction:column}.contact-links{width:100%}
}

/* ================= PHONE ================= */
[data-device=phone]{--nav-h:60px;--pad:20px}
[data-device=phone] body{font-size:16px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
[data-device=phone] .nav{height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-device=phone] .brand{font-size:26px}
[data-device=phone] .lang{height:36px}
[data-device=phone] .hero{padding:18px var(--pad) 28px}
[data-device=phone] .hero-top .label{font-size:11px}
[data-device=phone] .hero-top .availability{font-size:12px}
[data-device=phone] .hero-main{grid-template-columns:1fr;gap:28px;padding:36px 0 24px}
[data-device=phone] .identity-command{font-size:13px;margin-bottom:20px}
[data-device=phone] .hero h1{font-size:min(15.5vw,80px);letter-spacing:-.06em}
[data-device=phone] .hero h1 .first{font-size:.5em}
[data-device=phone] .hero-kicker{font-size:12px;margin-top:20px}
[data-device=phone] .hero-intro{font-size:17px;margin:12px 0 28px}
[data-device=phone] .hero-buttons{display:grid;grid-template-columns:1fr auto;gap:10px}
[data-device=phone] .pill{min-height:56px;font-size:16px}
[data-device=phone] .ghost{padding:0 20px}
[data-device=phone] .signal-stage{height:auto;min-height:0;aspect-ratio:1/1.02;border-radius:18px}
[data-device=phone] .signal-foot .label{font-size:10px;max-width:24ch}
[data-device=phone] .round{width:44px;height:44px}
[data-device=phone] .console{border-radius:18px}
[data-device=phone] .terminal-output{max-height:150px;font-size:12.5px;padding:12px 14px 4px}
[data-device=phone] .chips-run{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;direction:ltr;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 85%,transparent)}
[data-device=phone] .chips-run::-webkit-scrollbar{display:none}
[data-device=phone] .chips-run button{flex-shrink:0;height:36px;padding:0 14px;border-radius:30px;border:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--text-dim);scroll-snap-align:start;transition:background-color .15s,color .15s,transform .15s}
[data-device=phone] .chips-run button:active{transform:scale(.94);background:var(--phos);color:var(--ink);border-color:var(--phos)}
[data-device=phone] .terminal-prompt{font-size:12px}
[data-device=phone] .terminal-prompt .dim{display:none}
[data-device=phone] .terminal-form input{font-size:16px}
[data-device=phone] .run{width:44px;height:44px}
[data-device=phone] .ribbon{padding:12px 0}
[data-device=phone] .ribbon>div{font-size:17px;gap:24px;animation-duration:26s}
[data-device=phone] .section{padding:64px var(--pad)}
[data-device=phone] .section-label{margin-bottom:24px;font-size:11px}
[data-device=phone] h2{font-size:min(11.5vw,52px)}
[data-device=phone] .section-title{display:block;margin-bottom:32px}
[data-device=phone] .section-aside{margin-top:16px;font-size:15px}
[data-device=phone] .about-layout{grid-template-columns:1fr;gap:40px}
[data-device=phone] .portrait{max-width:none;margin-inline:auto;width:min(100%,380px)}
[data-device=phone] .portrait-image{border-radius:200px 200px 10px 10px}
[data-device=phone] .portrait img{filter:grayscale(.2) contrast(1.04)}
[data-device=phone] .stamp{width:88px;height:88px;font-size:11px;inset-inline-end:-6px;top:28px}
[data-device=phone] .about-copy>p{font-size:17px}
[data-device=phone] .experience{flex-direction:column;gap:14px}
[data-device=phone] .expertise{padding-top:8px}
[data-device=phone] .stack>li{grid-template-columns:1fr;gap:12px;padding:24px 0}
[data-device=phone] .stack .chips{grid-column:auto;justify-content:flex-start}
[data-device=phone] .stack h3{font-size:26px}
[data-device=phone] .projects{padding-bottom:56px}
[data-device=phone] .swipe{display:flex;justify-content:space-between;margin-top:20px;color:var(--olive);font-size:11px}
[data-device=phone] #proj-count{color:var(--lime)}
[data-device=phone] .project-grid{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
[data-device=phone] .project-grid::-webkit-scrollbar{display:none}
[data-device=phone] .project{scroll-snap-align:start}
[data-device=phone] .project .reveal,[data-device=phone] .js .project.reveal{transition-delay:0ms}
[data-device=phone] .art{height:auto;aspect-ratio:1/1.05;border-radius:18px}
[data-device=phone] .art .ring,[data-device=phone] .art .radio-device,[data-device=phone] .art .rfid-card,[data-device=phone] .art .lock,[data-device=phone] .art .orbit{scale:.82}
[data-device=phone] .project-open:active .art{transform:scale(.98)}
[data-device=phone] .art{transition:transform .3s var(--ease)}
[data-device=phone] .project h3{font-size:24px}
[data-device=phone] .art-arrow{width:44px;height:44px}
[data-device=phone] .off-layout{grid-template-columns:1fr;gap:20px}
[data-device=phone] .off-layout p{font-size:17px}
[data-device=phone] .contact h2{font-size:min(16vw,84px);margin:4px 0 40px}
[data-device=phone] .contact-bottom{flex-direction:column;gap:28px}
[data-device=phone] .contact-links{width:100%}
[data-device=phone] .c-row a{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 0}
[data-device=phone] .c-row a span:last-child{font-size:17px}
[data-device=phone] .copy{height:44px;padding:0 18px}
[data-device=phone] footer{justify-content:space-between;padding-bottom:28px}

/* Dock */
.dock{position:fixed;z-index:var(--z-dock);inset:auto 12px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:22px;background:var(--ink-2);border:1px solid var(--line);box-shadow:0 18px 40px oklch(.08 .01 145 / .5);transition:transform .5s var(--ease)}
.dock.hide{transform:translateY(130%)}
.dock a{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 0 7px;border-radius:16px;color:var(--muted);font-size:10.5px;letter-spacing:.02em;transition:color .25s,background-color .25s}
.dock a b{font-family:var(--mono);font-weight:400;font-size:15px;line-height:1.2;color:var(--olive);transition:color .25s}
.dock a.on{background:var(--lime);color:var(--ink)}
.dock a.on b{color:var(--ink)}
.dock a:active{transform:scale(.94)}

/* Phone dialog = bottom sheet */
[data-device=phone] dialog{margin:auto 0 0;width:100%;max-width:100%;max-height:88svh;border-radius:26px 26px 0 0;border-width:1px 0 0;padding:20px 22px calc(28px + env(safe-area-inset-bottom));overflow-y:auto}
[data-device=phone] dialog[open]{animation:sheet .55s var(--ease)}
[data-device=phone] dialog.dragging{transition:none}
[data-device=phone] dialog.release{transition:transform .35s var(--ease)}
[data-device=phone] dialog h2{font-size:34px;margin:12px 0 16px}
[data-device=phone] dialog .pill{width:100%}
[data-device=phone] .close-dialog{top:14px}
.grab{display:grid;place-items:center;height:28px;margin:-8px -22px 8px;touch-action:none;cursor:grab}
.grab i{width:44px;height:5px;border-radius:5px;background:var(--line)}

/* ===== Persian ===== */
html[lang=fa]{--font:Vazirmatn,Tahoma,sans-serif}
html[lang=fa] .label,html[lang=fa] .off-tag,html[lang=fa] .hero-kicker,html[lang=fa] .exp-meta{font-family:Vazirmatn,Tahoma,sans-serif;letter-spacing:0;text-transform:none;font-size:14px}
html[lang=fa] .hero h1,html[lang=fa] h2{letter-spacing:0;line-height:1.25}
html[lang=fa] .hero h1 .first{font-size:.55em}
html[lang=fa] body{line-height:1.9}
html[lang=fa] .contact h2{line-height:1.2}
html[lang=fa] .hero-intro{max-width:36ch}

/* ===== Keyframes ===== */
@keyframes blink{50%{opacity:0}}
@keyframes beacon{0%{box-shadow:0 0 0 0 oklch(.915 .175 120 / .5)}70%,100%{box-shadow:0 0 0 9px oklch(.915 .175 120 / 0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{0%{opacity:.2;scale:.9}40%{opacity:1}100%{opacity:.2;scale:1.06}}
@keyframes scan{to{transform:translateY(100%)}}
@keyframes line-in{from{opacity:0;transform:translateX(-6px)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes sheet{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .hero-copy>*,.js .signal-stage,.js .console{opacity:1;transform:none}
}