@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#07060B;
  --bg-2:#0B0912;
  --bg-3:#0F0B18;
  --surface:#130F1E;
  --surface-2:#181228;
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --text:#F4F2FA;
  --text-dim:#AEA6C6;
  --text-faint:#6C6488;
  --violet:#8B5CF6;
  --violet-2:#6D28D9;
  --violet-bright:#A78BFA;
  --cyan:#22D3EE;
  --violet-soft:rgba(139,92,246,0.14);
  --cyan-soft:rgba(34,211,238,0.13);
  --grad: linear-gradient(90deg, var(--violet-bright), var(--cyan));
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  --radius: 18px;
  --font-fa:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  --font-en:'Inter','Segoe UI',sans-serif;
  --font-ku:'Noto Sans Arabic','Vazirmatn','Segoe UI',Tahoma,sans-serif;
  --font-active: var(--font-fa);
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
  color-scheme: dark;
}
:root[data-lang="en"]{ --font-active: var(--font-en); }
:root[data-lang="ku"]{ --font-active: var(--font-ku); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-active);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{text-wrap:balance;margin:0;}
button{font-family:inherit;}
::selection{background:var(--violet-soft);color:var(--text);}

.page{max-width:1220px;margin:0 auto;padding-inline:22px;}
.section{padding-block:110px;position:relative;}
.section.alt{background:var(--bg-2);}
@media (max-width:760px){ .section{padding-block:72px;} }

.kicker{
  font-family:var(--font-active);font-size:12px;letter-spacing:normal;color:var(--cyan);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;text-transform:uppercase;
}
.kicker::before{content:"";width:16px;height:1px;background:var(--cyan);}
h2.title{font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.22;margin-bottom:14px;}
h2.title b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.sub{color:var(--text-dim);font-size:16.5px;max-width:640px;line-height:1.85;margin-bottom:50px;}
.divider{height:1px;background:linear-gradient(90deg, transparent, var(--border-strong), transparent);}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:12px;font-size:14.5px;font-weight:600;
  border:1px solid var(--border-strong);cursor:pointer;background:transparent;color:var(--text);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.btn:hover{border-color:var(--text-faint);}
.btn-primary{background:var(--violet);border-color:var(--violet);color:#fff;}
.btn-primary:hover{background:var(--violet-2);border-color:var(--violet-2);}
.btn-arrow{transition:transform .2s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}
[dir="rtl"] .btn:hover .btn-arrow{transform:translateX(-4px) scaleX(-1);}
[dir="rtl"] .btn-arrow{transform:scaleX(-1);}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1220px, calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;border-radius:16px;
  background:rgba(15,12,22,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled{background:rgba(11,9,18,.82);border-color:var(--border-strong);box-shadow:var(--shadow);}
.nav-logo{font-family:var(--font-mono);font-weight:700;font-size:12.5px;line-height:1.35;letter-spacing:.04em;direction:ltr;}
.nav-logo span{display:block;color:var(--text-faint);}
.nav-logo b{color:var(--text);}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--text-dim);}
.nav-links a{position:relative;transition:color .2s ease;padding-block:4px;}
.nav-links a::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1px;background:var(--grad);transform:scaleX(0);transition:transform .25s var(--ease);}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{transform:scaleX(1);}
@media (max-width:860px){ .nav-links{display:none;} }
.nav-right{display:flex;align-items:center;gap:10px;}
.lang-switch{
  font-family:var(--font-active);font-size:12px;font-weight:600;
  display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;direction:ltr;
}
.lang-switch button{background:transparent;border:0;color:var(--text-dim);padding:7px 10px;cursor:pointer;font-family:var(--font-active);font-size:12px;font-weight:600;transition:background .15s,color .15s;}
.lang-switch button[aria-pressed="true"]{background:var(--text);color:var(--bg);}
.nav-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--text);}
@media (max-width:860px){ .nav-burger{display:flex;} }

.mobile-menu{
  position:fixed;inset:0;z-index:101;background:rgba(7,6,11,1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu a{font-size:26px;font-weight:700;color:var(--text);}
.mobile-menu .lang-switch{margin-top:10px;}
.mobile-close{position:absolute;top:24px;inset-inline-end:24px;width:42px;height:42px;border-radius:12px;border:1px solid var(--border-strong);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:150px 90px;overflow:hidden;}
.hero-canvas{position:absolute;inset:0;z-index:0;opacity:.55;}
.hero-glow{position:absolute;top:-10%;inset-inline-start:-10%;width:60%;height:60%;background:radial-gradient(circle, var(--violet-soft), transparent 70%);filter:blur(30px);z-index:0;pointer-events:none;animation:driftGlow1 17s ease-in-out infinite alternate;}
.hero-glow.c2{top:auto;bottom:-15%;inset-inline-end:-10%;inset-inline-start:auto;background:radial-gradient(circle, var(--cyan-soft), transparent 70%);animation-name:driftGlow2;animation-duration:21s;}
@keyframes driftGlow1{0%{transform:translate(0,0) scale(1);}100%{transform:translate(34px,22px) scale(1.08);}}
@keyframes driftGlow2{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-28px,-18px) scale(1.06);}}
@media (prefers-reduced-motion: reduce){ .hero-glow{animation:none;} }
.hero-inner{position:relative;z-index:1;display:flex;gap:70px;align-items:center;flex-wrap:wrap;}
.hero-copy{flex:1 1 480px;min-width:280px;}
.role-rotator{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-family:var(--font-active);font-size:14px;letter-spacing:normal;color:var(--text-dim);
}
.role-rotator .rr-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px 2px var(--cyan-soft);flex:0 0 auto;animation:rr-pulse 1.8s ease-in-out infinite;}
@keyframes rr-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.role-rotator .rr-word{position:relative;display:inline-block;min-width:1px;color:var(--text);font-weight:600;transition:opacity .32s ease, transform .32s ease;}
.role-rotator .rr-cursor{display:inline-block;width:2px;height:14px;background:var(--violet-bright);margin-inline-start:2px;animation:blink 1s steps(1) infinite;vertical-align:-2px;}
@keyframes blink{50%{opacity:0;}}
.hero-copy h1{font-size:clamp(40px,7.4vw,86px);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin-bottom:28px;}
.hero-copy h1 .ln{display:block;overflow:hidden;}
.hero-copy h1 .ln span{display:block;animation:lineUp .9s var(--ease) both;animation-delay:1.05s;}
.hero-copy h1 .ln:nth-child(2) span{animation-delay:1.22s;}
.hero-copy h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes lineUp{from{transform:translateY(112%);}to{transform:translateY(0);}}
.hero-intro{font-size:18px;line-height:1.9;color:var(--text-dim);max-width:560px;margin-bottom:36px;
  animation:fadeUp .8s var(--ease) both;animation-delay:1.45s;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .8s var(--ease) both;animation-delay:1.6s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .hero-copy h1 .ln span, .hero-intro, .hero-cta{animation:none!important;transform:none!important;opacity:1!important;}
}

.hero-portrait-col{flex:0 0 auto;position:relative;
  animation:portraitIn 1s var(--ease) both;animation-delay:.85s;}
@keyframes portraitIn{from{opacity:0;transform:scale(.92) translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .hero-portrait-col{animation:none!important;transform:none!important;opacity:1!important;} }
.tilt-wrap{perspective:1200px;}
.portrait-card{
  position:relative;width:320px;height:400px;border-radius:24px;overflow:hidden;
  border:1px solid var(--border-strong);box-shadow:var(--shadow);
  transform-style:preserve-3d;will-change:transform;transition:transform .12s var(--ease);
}
.portrait-card img{width:100%;height:100%;object-fit:cover;}
.portrait-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, transparent 55%, rgba(139,92,246,.28));
  mix-blend-mode:screen;
}
.portrait-ring{position:absolute;inset:-14px;border-radius:30px;z-index:-1;background:conic-gradient(from 210deg, var(--violet), var(--cyan), var(--violet));opacity:.5;filter:blur(22px);transition:transform .18s linear;}
.float-card{
  position:absolute;bottom:-22px;inset-inline-start:-30px;
  background:rgba(19,15,30,.85);backdrop-filter:blur(12px);border:1px solid var(--border-strong);
  border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);text-align:center;min-width:118px;
  transition:transform .18s linear;
}
.float-card .n{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--text);direction:ltr;display:block;}
.float-card .l{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
@media (max-width:640px){ .portrait-card{width:250px;height:320px;} .float-card{inset-inline-start:-12px;bottom:-18px;padding:12px 16px;} }

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-faint);font-family:var(--font-active);font-size:10.5px;letter-spacing:normal;text-transform:none;z-index:1;}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--text-faint), transparent);animation:scrolldown 1.8s ease-in-out infinite;}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
@media (prefers-reduced-motion: reduce){ .scroll-cue .line{animation:none;} }

/* ---------------- about / stats ---------------- */
.about-grid{display:flex;gap:60px;flex-wrap:wrap;}
.about-text{flex:1 1 420px;min-width:280px;}
.about-text p{font-size:16.5px;line-height:1.95;color:var(--text-dim);margin:0 0 18px;}
.stats-grid{flex:1 1 380px;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;align-content:start;}
.stat{background:var(--surface);padding:30px 26px;}
.stat .num{font-family:var(--font-mono);font-size:38px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr;display:block;font-variant-numeric:tabular-nums;}
.stat .lbl{color:var(--text-dim);font-size:13px;margin-top:8px;}

/* ---------------- expertise ---------------- */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
@media (max-width:920px){ .grid-6{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-6{grid-template-columns:1fr;} }
.xcard{
  position:relative;background:var(--surface);padding:32px 28px;overflow:hidden;
  transition:background .25s var(--ease);
}
.xcard::before{
  content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), var(--violet-soft), transparent 60%);
  transition:opacity .3s ease;pointer-events:none;
}
.xcard:hover::before{opacity:1;}
.xcard:hover{background:var(--surface-2);}
.xcard .xn{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);direction:ltr;margin-bottom:22px;display:block;}
.xcard .xicon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--violet-soft);color:var(--violet-bright);margin-bottom:18px;}
.xcard h3{font-size:17.5px;font-weight:700;margin-bottom:10px;}
.xcard p{font-size:14px;line-height:1.8;color:var(--text-dim);margin:0;}

/* ---------------- journey ---------------- */
.timeline{position:relative;margin-inline-start:6px;}
.timeline::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:15px;width:1px;background:var(--border);}
.timeline-fill{position:absolute;top:0;inset-inline-start:15px;width:1px;height:0%;background:var(--grad);transition:height 1.1s var(--ease);}
.tl-item{position:relative;padding:0 0 56px 50px;}
[dir="rtl"] .tl-item{padding:0 50px 56px 0;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;top:2px;inset-inline-start:8px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--violet);box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--border);}
.tl-tag{font-family:var(--font-active);font-size:11px;letter-spacing:normal;color:var(--cyan);text-transform:none;display:inline-block;margin-bottom:8px;}
.tl-item h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.tl-item p{font-size:14.5px;line-height:1.8;color:var(--text-dim);margin:0;max-width:560px;}

/* ---------------- projects ---------------- */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:760px){ .proj-grid{grid-template-columns:1fr;} }
.proj-card{
  position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:34px;min-height:220px;
  overflow:hidden;background:var(--surface);cursor:default;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.proj-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);
  background:var(--proj-grad, radial-gradient(circle at 85% 15%, var(--violet-soft), transparent 60%));
}
.proj-card:hover, .proj-card.active{transform:translateY(-4px);border-color:var(--border-strong);background:var(--surface-2);}
.proj-card:hover::before, .proj-card.active::before{opacity:1;}
.proj-index{position:absolute;top:20px;inset-inline-end:24px;font-family:var(--font-mono);font-size:56px;font-weight:800;color:var(--text);opacity:.05;line-height:1;direction:ltr;transition:opacity .3s ease, transform .3s var(--ease);pointer-events:none;}
.proj-card:hover .proj-index, .proj-card.active .proj-index{opacity:.13;transform:scale(1.06);}
.proj-cat{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint);direction:ltr;text-transform:uppercase;transition:color .3s ease;}
.proj-card:hover .proj-cat, .proj-card.active .proj-cat{color:var(--cyan);}
.proj-name{position:relative;font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.proj-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .3s var(--ease), background .3s ease, border-color .3s ease;}
.proj-card:hover .proj-arrow, .proj-card.active .proj-arrow{background:var(--violet);border-color:var(--violet);transform:rotate(45deg);}
[dir="rtl"] .proj-arrow svg{transform:scaleX(-1);}
.proj-desc{position:relative;font-size:14.5px;line-height:1.8;color:var(--text-dim);max-width:440px;}

/* ---------------- philosophy ---------------- */
.philo{position:relative;padding-block:150px;overflow:hidden;text-align:center;background:radial-gradient(ellipse at 50% 30%, rgba(139,92,246,.12), transparent 60%), var(--bg);}
.philo-canvas{position:absolute;inset:0;opacity:.4;}
.philo-inner{position:relative;max-width:880px;margin:0 auto;padding-inline:22px;}
.philo-mark{font-family:var(--font-mono);font-size:44px;color:var(--violet-bright);line-height:1;margin-bottom:18px;direction:ltr;opacity:.7;}
.philo p.main{font-size:clamp(24px,3.6vw,38px);font-weight:800;line-height:1.5;margin:0 0 26px;}
.philo p.sub{font-size:16.5px;color:var(--text-dim);line-height:1.9;max-width:600px;margin:0 auto;}

/* ---------------- constellation ---------------- */
.constel-wrap{display:flex;gap:56px;flex-wrap:wrap;align-items:center;}
.constel-svg{flex:0 0 auto;width:min(440px, 100%);}
.constel-svg svg{width:100%;height:auto;}
.constel-node{cursor:pointer;}
.constel-node circle{transition:r .2s var(--ease), fill .2s ease;}
.constel-node text{fill:var(--text-dim);font-family:var(--font-active);font-size:11px;transition:fill .2s ease;}
.constel-node.active circle{fill:var(--violet);}
.constel-node.active text{fill:var(--text);}
.constel-line{stroke:var(--border-strong);stroke-width:1;transition:stroke .2s ease, stroke-width .2s ease;}
.constel-line.active{stroke:var(--violet);stroke-width:1.5;}
.constel-panel{flex:1 1 300px;min-width:260px;}
.constel-panel h3{font-size:20px;font-weight:700;margin-bottom:14px;}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;}
.tag{
  font-family:var(--font-active);font-size:12.5px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease;
}
.tag.hl{border-color:var(--violet);color:var(--text);background:var(--violet-soft);}

/* ---------------- pipeline ---------------- */
.pipeline{overflow-x:auto;padding-bottom:8px;}
.pipeline-track{display:flex;align-items:center;gap:0;min-width:760px;}
.pl-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;padding-inline:6px;}
.pl-num{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;color:var(--text-dim);background:var(--bg);position:relative;z-index:1;transition:border-color .4s ease, color .4s ease, background .4s ease;}
.pl-step.on .pl-num{border-color:var(--violet);color:#fff;background:var(--violet);}
.pl-label{font-size:12.5px;color:var(--text-dim);font-weight:600;}
.pl-connector{position:absolute;top:23px;inset-inline-start:50%;width:100%;height:1px;background:var(--border);z-index:0;}
.pl-connector-fill{position:absolute;top:0;inset-inline-start:0;height:100%;width:0%;background:var(--grad);transition:width 1.4s var(--ease);}
.pl-step:last-child .pl-connector{display:none;}
.pipeline-note{margin-top:34px;color:var(--text-dim);font-size:15px;text-align:center;}
@media (max-width:760px){
  .pipeline-track{min-width:0;flex-direction:column;align-items:flex-start;gap:26px;}
  .pl-step{flex-direction:row;text-align:start;width:100%;}
  .pl-connector{top:0;inset-inline-start:22px;width:1px;height:100%;}
}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.ccard .ck{font-family:var(--font-active);font-size:11px;color:var(--text-faint);text-transform:none;letter-spacing:normal;margin-bottom:10px;display:block;}
.ccard .cv{font-size:16px;font-weight:700;}
.ccard .cv.mono{font-family:var(--font-mono);font-size:14.5px;font-weight:500;direction:ltr;}
.ccard a.cv{color:var(--violet-bright);}
.ccard .soon{font-size:12px;color:var(--text-faint);font-family:var(--font-active);}
.contact-cta{margin-top:40px;text-align:center;}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--border);padding:44px 0 36px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:26px;}
.footer-logo{font-family:var(--font-mono);font-weight:700;font-size:15px;direction:ltr;}
.footer-roles{color:var(--text-dim);font-size:13px;margin-top:6px;direction:ltr;}
.footer-tag{color:var(--text-dim);font-size:14px;max-width:280px;line-height:1.7;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--text-faint);font-size:12.5px;}
.footer-bottom .mono{font-family:var(--font-mono);direction:ltr;}
.footer-langs{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap;}
.footer-langs a{font-family:var(--font-active);font-size:12.5px;color:var(--text-faint);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.footer-langs a:hover{color:var(--text);}
.footer-langs a.cur{color:var(--violet-bright);border-color:var(--violet-bright);}

/* ---------------- reveal ----------------
   Content keeps full opacity at all times -- the page never depends on
   IntersectionObserver timing for legibility. Only position gets a small,
   safe nudge: worst case (observer never fires) is a static 14px offset,
   never invisible content. */
[data-reveal]{opacity:1;transform:none;}
[data-reveal].pre-in{transform:translateY(14px);}
[data-reveal].in{transform:none;transition:transform .6s var(--ease);}
@media (prefers-reduced-motion: reduce){
  [data-reveal].pre-in{transform:none;}
}

/* ---------------- preloader (pure CSS, no JS dependency) ---------------- */
.preloader{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  animation:preloaderOut .5s ease forwards;animation-delay:1s;
}
.preloader-mark{
  font-family:var(--font-mono);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--text);
  display:flex;gap:10px;align-items:center;direction:ltr;
}
.preloader-mark .pl-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:plPulse 1s ease-in-out infinite;}
.preloader-bar{width:180px;height:2px;background:var(--border);border-radius:2px;overflow:hidden;}
.preloader-bar::after{content:"";display:block;height:100%;width:0%;background:var(--grad);animation:plBar 1s var(--ease) forwards;}
.preloader-pct{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);direction:ltr;min-height:14px;}
@keyframes plBar{from{width:0%;}to{width:100%;}}
@keyframes plPulse{0%,100%{opacity:.4;transform:scale(.85);}50%{opacity:1;transform:scale(1);}}
@keyframes preloaderOut{0%{opacity:1;visibility:visible;}90%{opacity:0;visibility:visible;}100%{opacity:0;visibility:hidden;}}
@media (prefers-reduced-motion: reduce){
  .preloader{animation-duration:.01s;animation-delay:.3s;}
  .preloader-bar::after{animation-duration:.01s;}
}

/* ---------------- cursor spotlight ---------------- */
.cursor-spot{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle, rgba(139,92,246,.10), rgba(34,211,238,.05) 40%, transparent 70%);
  transform:translate(-9999px,-9999px);will-change:transform;mix-blend-mode:screen;
}
@media (hover:none), (pointer:coarse){ .cursor-spot{display:none;} }
@media (prefers-reduced-motion: reduce){ .cursor-spot{display:none;} }

/* ---------------- custom cursor ring ---------------- */
.cursor-ring{
  position:fixed;top:0;left:0;width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1.5px solid var(--violet-bright);border-radius:50%;pointer-events:none;z-index:200;
  transform:translate(-9999px,-9999px);opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease),
    background .25s var(--ease), border-color .25s var(--ease), opacity .2s ease;
  mix-blend-mode:difference;
}
.cursor-ring .crl{font-family:var(--font-active);font-size:10.5px;font-weight:700;opacity:0;transition:opacity .2s ease;white-space:nowrap;color:#fff;}
.cursor-ring.big{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(139,92,246,.22);border-color:transparent;}
.cursor-ring.big .crl{opacity:1;}
@media (hover:none), (pointer:coarse){ .cursor-ring{display:none;} }
@media (prefers-reduced-motion: reduce){ .cursor-ring{display:none;} }

/* ---------------- dot navigation ---------------- */
.dot-nav{position:fixed;top:50%;inset-inline-end:26px;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:16px;}
@media (max-width:1100px){ .dot-nav{display:none;} }
.dot-item{background:transparent;border:0;padding:6px;margin:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text-dim);}
[dir="rtl"] .dot-item{flex-direction:row-reverse;}
.dot-item .dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex:0 0 auto;transition:background .25s ease, transform .25s ease, box-shadow .25s ease;}
.dot-item .dot-label{font-family:var(--font-active);font-size:11.5px;opacity:0;transform:translateX(6px);transition:opacity .2s ease, transform .2s ease;white-space:nowrap;pointer-events:none;}
[dir="rtl"] .dot-item .dot-label{transform:translateX(-6px);}
.dot-item:hover .dot-label{opacity:1;transform:none;}
.dot-item:hover .dot{background:var(--text);}
.dot-item.active .dot{background:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);transform:scale(1.3);}

/* ---------------- noise overlay ---------------- */
.noise-overlay{
  position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------- scroll progress ---------------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--grad);z-index:120;transition:width .1s linear;}

/* ---------------- kinetic marquee band ---------------- */
.marquee-band{border-block:1px solid var(--border);background:var(--bg-2);overflow:hidden;padding-block:26px;}
.marquee-track{display:flex;width:max-content;animation:marqueeMove 26s linear infinite;}
.marquee-track span{
  display:flex;align-items:center;gap:26px;
  font-size:clamp(28px,5vw,54px);font-weight:800;letter-spacing:-.01em;
  padding-inline-end:26px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--border-strong);
}
.marquee-track span.fill{color:var(--text);-webkit-text-stroke:0;}
.marquee-track b{color:var(--violet-bright);}
.marquee-dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);flex:0 0 auto;}
@keyframes marqueeMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
[dir="rtl"] .marquee-track{animation-name:marqueeMoveRtl;}
@keyframes marqueeMoveRtl{from{transform:translateX(0);}to{transform:translateX(50%);}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }