:root{
  --bg:        #0d1117;   
  --bg-2:      #161b22;   
  --text:      #c9d1d9;   
  --text-dim:  #8b949e;   

  --violet:    #7c3aed;   
  --pink:      #db2777;   
  --amber:     #d97706;   
  --teal:      #0d9488;   

  --violet-soft: #9d7bf0;
  --pink-soft:   #d985a8;
  --amber-soft:  #dca25a;
  --teal-soft:   #5fb8ad;
  --green-code:  #78c29b; 

  --glass-hi: rgba(255,255,255,.08);
  --glass-lo: rgba(255,255,255,.03);
  --glass-br: rgba(255,255,255,.10);

  --r-lg: 24px;
  --r-md: 20px;
  --r-sm: 16px;

  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --sans: 'Inter', 'Roboto', sans-serif;

  --t: .45s cubic-bezier(.22,.61,.36,1); 
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px; 
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
}


body::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:rgba(124,58,237,.35); color:var(--text); }


html{ scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.55) #0d1117; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,58,237,.55), rgba(13,148,136,.55));
  border-radius:8px; border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(124,58,237,.8), rgba(13,148,136,.8));
}


#progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--violet), var(--pink), var(--amber), var(--teal));
  box-shadow:0 0 12px rgba(124,58,237,.45);
  z-index:300; border-radius:0 3px 3px 0;
  transition:width .12s linear;
}


#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:1000;
  border-radius:50%; display:none;
}
#cursor-dot{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--violet-soft); box-shadow:0 0 10px rgba(124,58,237,.7);
}
#cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1.5px solid rgba(157,123,240,.45);
  background:rgba(124,58,237,.06);
  box-shadow:0 0 22px rgba(124,58,237,.18), inset 0 0 12px rgba(124,58,237,.10);
  transition:width .3s, height .3s, margin .3s, border-color .3s, background .3s;
}
#cursor-ring.grow{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:rgba(157,123,240,.75);
  background:rgba(124,58,237,.10);
}
@media (pointer:fine){
  body, a, button, input, textarea, [role="button"]{ cursor:none; }
  #cursor-dot, #cursor-ring{ display:block; }
}


.bg-scene{
  position:fixed; inset:-30vh; z-index:0; pointer-events:none; overflow:hidden;
  will-change:transform;
}
.orb{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:.5; will-change:transform;
}
.orb-1{
  width:46vmax; height:46vmax; top:-14vmax; left:-12vmax;
  background:radial-gradient(circle, rgba(124,58,237,.20), transparent 65%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.orb-2{
  width:40vmax; height:40vmax; bottom:-12vmax; right:-10vmax;
  background:radial-gradient(circle, rgba(13,148,136,.16), transparent 65%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
.orb-3{
  width:32vmax; height:32vmax; top:38%; left:52%;
  background:radial-gradient(circle, rgba(219,39,119,.12), transparent 65%);
  animation:drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a{ to{ transform:translate(8vmax, 6vmax) scale(1.12);} }
@keyframes drift-b{ to{ transform:translate(-7vmax, -5vmax) scale(.92);} }
@keyframes drift-c{ to{ transform:translate(-10vmax, 8vmax) scale(1.18);} }

body.konami .orb{ animation-duration:7s; }


#particles{ position:absolute; top:-70vh; right:0; bottom:-70vh; left:0; will-change:transform; }
.particle{
  position:absolute; font-family:var(--mono); user-select:none;
  animation:drift-up linear infinite;
}
@keyframes drift-up{
  from{ transform:translateY(12vh) rotate(-6deg); }
  to  { transform:translateY(-42vh) rotate(14deg); }
}


#matrix{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}


#bg3d{
  position:absolute; inset:0; z-index:0;    
  pointer-events:none; overflow:hidden;
}
#bg3d canvas{ display:block; width:100%; height:100%; opacity:.9; }

@media (max-width:900px){
  #bg3d canvas{ opacity:.5; }
}


.glass{
  position:relative;
  background:linear-gradient(160deg, var(--glass-lo), var(--glass-hi));
  -webkit-backdrop-filter:blur(26px) saturate(150%);
          backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--glass-br);
  border-radius:var(--r-md);
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),          
    inset 0 1px 0 rgba(255,255,255,.07),  
    inset 0 -14px 30px rgba(0,0,0,.18);
  overflow:hidden;
}

.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 42%);
}
.glass-i{
  
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 34px rgba(124,58,237,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.glass-i:hover{
  transform:scale(1.02);
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.12));
  box-shadow:
    0 24px 54px rgba(0,0,0,.42),
    0 0 34px rgba(124,58,237,.14),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -14px 30px rgba(0,0,0,.18);
}


.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(13,17,23,.55);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
          backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:padding .4s, background .4s;
}
.nav.scrolled{ padding:8px 16px; background:rgba(13,17,23,.75); }
.nav-logo{
  font-family:var(--mono); font-size:1.05rem; color:var(--text);
  text-decoration:none; display:flex; align-items:center; gap:8px;
}
.nav-logo b{ color:var(--violet-soft); font-weight:500; }
.nav-links{ display:none; gap:4px; align-items:center; }
.nav-links a{
  font-family:var(--mono); font-size:.82rem; color:var(--text-dim);
  text-decoration:none; padding:8px 13px; border-radius:10px;
  transition:color .3s, background .3s;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.nav-links a.active{ color:var(--violet-soft); background:rgba(124,58,237,.12); }
#nav-burger{
  background:none; border:1px solid var(--glass-br); border-radius:10px;
  color:var(--text); width:42px; height:38px;
  display:flex; align-items:center; justify-content:center;
}
#nav-burger svg{ width:20px; height:20px; }
.nav-mobile{
  position:fixed; top:64px; left:14px; right:14px; z-index:199;
  display:flex; flex-direction:column; padding:8px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s;
}
.nav-mobile.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-mobile a{
  font-family:var(--mono); font-size:.9rem; color:var(--text-dim);
  text-decoration:none; padding:12px 14px; border-radius:12px;
}
.nav-mobile a:hover{ color:var(--text); background:rgba(255,255,255,.05); }


main{ position:relative; z-index:1; }
.container{ max-width:1120px; margin:0 auto; padding:0 20px; }
section{ padding:84px 0; }

.sec-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:40px; flex-wrap:wrap; }
.sec-index{ font-family:var(--mono); font-size:.85rem; color:var(--violet-soft); }
.sec-head h2{
  font-family:var(--mono); font-size:clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight:700; color:var(--text); letter-spacing:-.02em;
}
.sec-line{
  flex:1; min-width:40px; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.16), transparent);
}



.reveal{ opacity:0; transform:translateY(26px); }
.reveal.visible{
  opacity:1; transform:translateY(0);
  transition:opacity .6s, transform .6s,
             box-shadow var(--t), border-color var(--t), background var(--t);
}


.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; padding:120px 0 60px;
  overflow:hidden;
}
.hero-grid{
  display:flex; flex-direction:column-reverse; gap:44px; align-items:center;
  
  width:100%;
}

.hero-right{ display:flex; flex-direction:column; gap:18px; width:100%; }
.exp-badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:999px;
  font-family:var(--mono); font-size:.8rem; color:var(--text);
  animation:float-y 5.5s ease-in-out infinite, badge-pulse 3.2s ease-in-out infinite;
}
.exp-badge svg{ width:15px; height:15px; color:var(--teal-soft); }
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes badge-pulse{
  0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(13,148,136,.14), inset 0 1px 0 rgba(255,255,255,.09); }
  50%    { box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 34px rgba(13,148,136,.30), inset 0 1px 0 rgba(255,255,255,.14); }
}
.hero-eyebrow{ font-family:var(--mono); font-size:.85rem; color:var(--text-dim); }
.hero-right h1{
  font-family:var(--mono); font-size:clamp(2rem, 7vw, 3.3rem);
  line-height:1.15; font-weight:700; letter-spacing:-.03em;
}
.hero-right h1 em{ font-style:normal; color:var(--violet-soft); }
.type-line{
  font-family:var(--mono); font-size:clamp(.95rem, 3vw, 1.15rem);
  color:var(--teal-soft); min-height:1.7em;
}
.type-line .prompt-sym{ color:var(--pink-soft); margin-right:8px; }
.type-caret{
  display:inline-block; width:9px; height:1.15em; margin-left:3px;
  background:var(--teal-soft); vertical-align:text-bottom;
  animation:blink 1.05s steps(1) infinite;
}
.hero-desc{ color:var(--text-dim); max-width:480px; font-size:.97rem; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.88rem; font-weight:500;
  padding:13px 24px; border-radius:14px; text-decoration:none;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.btn svg{ width:17px; height:17px; }
.btn-primary{
  color:#e6ddF5; border:1px solid rgba(157,123,240,.35);
  background:linear-gradient(150deg, rgba(124,58,237,.34), rgba(124,58,237,.14));
  
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 30px rgba(124,58,237,0),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 30px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-ghost{
  color:var(--text); border:1px solid var(--glass-br);
  background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  box-shadow:0 12px 30px rgba(0,0,0,0); 
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.2); box-shadow:0 12px 30px rgba(0,0,0,.35); }


.hero-left{ width:100%; perspective:1200px; }
.code-widget{
  border-radius:var(--r-lg);
  transform-style:preserve-3d;
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 44px rgba(124,58,237,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s;
  will-change:transform;
}

.code-widget::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,.09), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.code-widget:hover::after{ opacity:1; }
.code-widget:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 26px 60px rgba(0,0,0,.45),
    0 0 44px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -14px 30px rgba(0,0,0,.18);
}

.code-top{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.dot{ width:12px; height:12px; border-radius:50%; }
.dot-r{ background:#c2554d; box-shadow:0 0 8px rgba(194,85,77,.6); }
.dot-y{ background:#c9a23f; box-shadow:0 0 8px rgba(201,162,63,.6); }
.dot-g{ background:#5aa66f; box-shadow:0 0 8px rgba(90,166,111,.6); }
.code-title{
  margin-left:auto; font-family:var(--mono); font-size:.75rem; color:var(--text-dim);
}
.code-body{
  padding:20px 18px 14px; font-family:var(--mono);
  font-size:clamp(.72rem, 2.6vw, .86rem); line-height:1.9;
  min-height:272px; white-space:pre;
}
.code-line{ display:flex; }
.line-num{
  width:2.2em; flex:none; text-align:right; margin-right:1.2em;
  color:rgba(139,148,158,.4); user-select:none;
}
.line-code{ white-space:pre-wrap; word-break:break-all; }

.tk-kw  { color:var(--violet-soft); }
.tk-key { color:#a48fe6; }
.tk-str { color:var(--green-code); }
.tk-bool{ color:var(--amber-soft); }
.tk-p   { color:#7d8791; }
.tk-var { color:var(--text); }
.code-cursor{
  display:inline-block; width:8px; height:1.05em; margin-left:1px;
  background:var(--teal-soft); vertical-align:text-bottom;
  animation:blink .9s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.code-statusbar{
  display:flex; align-items:center; gap:14px; padding:10px 18px;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--mono); font-size:.7rem; color:var(--text-dim);
}
.status-live{ display:flex; align-items:center; gap:6px; color:var(--green-code); }
.status-live i{
  width:7px; height:7px; border-radius:50%; background:var(--green-code);
  box-shadow:0 0 8px rgba(120,194,155,.7); animation:blink 2.2s steps(1) infinite;
}

.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  color:var(--text-dim); opacity:.6; animation:hint-bounce 2.4s ease-in-out infinite;
}
.scroll-hint svg{ width:20px; height:20px; }
@keyframes hint-bounce{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,9px);} }


.about-grid{
  display:flex; flex-direction:column; align-items:center;
  gap:38px; text-align:center;
}
.about-avatar{ position:relative; width:190px; height:190px; flex:none; }
.about-avatar canvas{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.about-avatar svg{ /* fallback без WebGL: тёмный градиентный круг */
  position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 35% 28%, #2b2244, #181d2a 55%, #11151d);
  box-shadow:0 0 46px rgba(124,58,237,.30), 0 18px 40px rgba(0,0,0,.45);
}
.about-text p{ color:var(--text-dim); margin-bottom:16px; max-width:640px; }
.about-text p b{ color:var(--text); font-weight:600; }
.about-facts{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px;
}
.fact-chip{
  font-family:var(--mono); font-size:.75rem; color:var(--teal-soft);
  padding:7px 14px; border-radius:10px;
}
.quote-plate{
  margin-top:28px; display:inline-flex; align-items:center; gap:12px;
  padding:16px 24px; border-radius:var(--r-md);
  font-family:var(--mono); font-size:clamp(.85rem, 3vw, 1rem); color:var(--text);
}
.quote-plate svg{ width:19px; height:19px; color:var(--amber-soft); flex:none; }
.quote-plate .cm{ color:var(--violet-soft); }


.stack-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.stack-card{
  padding:30px 26px;
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 44px rgba(0,0,0,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stack-card:hover{ transform:translateY(-8px); }

.stack-card[data-tone="violet"]:hover{
  border-color:rgba(124,58,237,.38);
  box-shadow:
    0 26px 54px rgba(0,0,0,.42), 0 0 44px rgba(124,58,237,.20),
    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -14px 30px rgba(0,0,0,.18);
}
.stack-card[data-tone="pink"]:hover{
  border-color:rgba(219,39,119,.38);
  box-shadow:
    0 26px 54px rgba(0,0,0,.42), 0 0 44px rgba(219,39,119,.18),
    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -14px 30px rgba(0,0,0,.18);
}
.stack-card[data-tone="teal"]:hover{
  border-color:rgba(13,148,136,.42);
  box-shadow:
    0 26px 54px rgba(0,0,0,.42), 0 0 44px rgba(13,148,136,.20),
    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -14px 30px rgba(0,0,0,.18);
}
.stack-card h3{
  font-family:var(--mono); font-size:1.15rem; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.stack-card h3 .tone-dot{ width:9px; height:9px; border-radius:50%; }
.stack-card[data-tone="violet"] .tone-dot{ background:var(--violet-soft); box-shadow:0 0 10px rgba(124,58,237,.7); }
.stack-card[data-tone="pink"]   .tone-dot{ background:var(--pink-soft);   box-shadow:0 0 10px rgba(219,39,119,.7); }
.stack-card[data-tone="teal"]   .tone-dot{ background:var(--teal-soft);   box-shadow:0 0 10px rgba(13,148,136,.7); }
.tech-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tech-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06);
  transition:background .3s, border-color .3s, transform .3s;
}
.tech-item:hover{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.13); transform:translateX(4px); }
.tech-item i[class^="devicon"]{ font-size:1.55rem; flex:none; filter:saturate(.72) brightness(.94); }
.tech-item svg{ width:1.55rem; height:1.55rem; flex:none; filter:saturate(.72) brightness(.94); }
.tech-item .ti-name{ font-family:var(--mono); font-size:.84rem; color:var(--text); }


.skills-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.skill-card{
  padding:26px 22px; display:flex; flex-direction:column; gap:14px;
}
.skill-icon{
  width:52px; height:52px; border-radius:15px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.10);
  
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 20px rgba(0,0,0,.3), 0 0 26px rgba(0,0,0,0);
  color:var(--text-dim);
  transition:color .4s, box-shadow .4s, transform .4s;
}
.skill-icon svg{ width:24px; height:24px; }
.skill-card:hover .skill-icon{
  color:var(--tone-c, var(--violet-soft)); transform:scale(1.08) rotate(-4deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 8px 22px rgba(0,0,0,.32),
             0 0 26px var(--tone-glow, rgba(124,58,237,.35));
}
.skill-card h4{ font-family:var(--mono); font-size:.98rem; }
.skill-card p{ color:var(--text-dim); font-size:.86rem; }


.marquee{
  position:relative; overflow:hidden; padding:34px 0;
  
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; gap:18px; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.rust-chip{
  display:flex; align-items:center; gap:16px; flex:none;
  padding:18px 26px; border-radius:var(--r-md);
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 30px rgba(217,119,6,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:border-color .35s, box-shadow .35s;
}
.rust-chip:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:
    0 18px 40px rgba(0,0,0,.42), 0 0 30px rgba(217,119,6,.16),
    inset 0 1px 0 rgba(255,255,255,.07), inset 0 -14px 30px rgba(0,0,0,.18);
}

.rust-avatar{
  width:54px; height:54px; border-radius:50%; flex:none; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 16px rgba(217,119,6,.14);
  transition:box-shadow .35s, transform .35s;
}
.rust-chip:hover .rust-avatar{ transform:scale(1.06); box-shadow:0 0 24px rgba(217,119,6,.3); }
.rust-chip .rc-name{ font-family:var(--mono); font-size:.95rem; color:var(--text); }
.rust-chip .rc-desc{ font-size:.78rem; color:var(--text-dim); }


.flagship{ border-radius:var(--r-lg); }

/* ряд ссылок проекта: сайт, wiki, магазин, соцсети */
.flag-links{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:16px 26px; border-bottom:1px solid rgba(255,255,255,.07);
}
.flag-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.78rem; color:var(--text);
  text-decoration:none;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s, transform .3s;
}
.flag-link svg{ width:14px; height:14px; }
.flag-link:hover{
  color:var(--violet-soft);
  border-color:rgba(157,123,240,.45);
  background:rgba(124,58,237,.1);
  box-shadow:0 0 18px rgba(124,58,237,.18);
  transform:translateY(-2px);
}


.flag-head{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:24px 26px; border-bottom:1px solid rgba(255,255,255,.07);
}
.flag-avatar{
  width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 20px rgba(217,119,6,.16), 0 8px 20px rgba(0,0,0,.35);
}
.flag-name{ font-family:var(--mono); font-size:1.25rem; color:var(--text); }
.flag-sub{ font-size:.82rem; color:var(--text-dim); }
.live-badge{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  font-family:var(--mono); font-size:.76rem; color:var(--green-code);
  border:1px solid rgba(120,194,155,.25); background:rgba(120,194,155,.06);
}
.live-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--green-code);
  box-shadow:0 0 10px rgba(120,194,155,.8);
  animation:blink 2.4s steps(1) infinite;
}


.flag-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.stat{ padding:16px 18px 16px 26px; }
.stat + .stat{ border-left:1px solid rgba(255,255,255,.06); }
.stat b{ display:block; font-family:var(--mono); font-size:1.3rem; font-weight:700; line-height:1.25; }
.stat-amber b{ color:var(--amber-soft); }
.stat-violet b{ color:var(--violet-soft); }
.stat-teal b{ color:var(--teal-soft); }
.stat span{ font-size:.72rem; color:var(--text-dim); }


.flag-body{ display:grid; grid-template-columns:1fr; gap:26px; padding:26px; }
.flag-about p{ color:var(--text-dim); font-size:.93rem; margin-bottom:14px; }
.flag-about b{ color:var(--text); font-weight:600; }
.flag-about{ display:flex; flex-direction:column; }
.flag-about .module{ margin-top:auto; padding-top:20px; } /* дашборд прижат к низу колонки */
.flag-about .module .dash-feats{ margin-top:14px; }


.devlog{
  margin-top:8px; padding:14px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.devlog-title{ font-family:var(--mono); font-size:.74rem; color:var(--violet-soft); margin-bottom:8px; }
.devlog-entry{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  transition:background .3s;
}
.devlog-entry + .devlog-entry{ margin-top:2px; }
.devlog-entry:hover{ background:rgba(255,255,255,.05); }
.dl-hash{ font-family:var(--mono); font-size:.72rem; color:var(--amber-soft); }
.dl-date{ font-family:var(--mono); font-size:.72rem; color:var(--text-dim); }
.dl-name{ flex:1; font-family:var(--mono); font-size:.84rem; color:var(--text); }
.devlog-entry svg{ width:15px; height:15px; color:var(--text-dim); }


.flag-modules{ display:grid; grid-template-columns:1fr; gap:12px; align-content:start; }
.module{
  padding:16px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  
  box-shadow:0 14px 32px rgba(0,0,0,0), 0 0 26px rgba(0,0,0,0);
  transition:transform .35s, border-color .35s, box-shadow .35s, background .35s;
}
.module:hover{ transform:translateY(-3px); background:rgba(255,255,255,.05); }
.module[data-tone="violet"]:hover{ border-color:rgba(124,58,237,.35); box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(124,58,237,.16); }
.module[data-tone="pink"]:hover{   border-color:rgba(219,39,119,.35); box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(219,39,119,.15); }
.module[data-tone="amber"]:hover{  border-color:rgba(217,119,6,.38);  box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(217,119,6,.16); }
.module[data-tone="teal"]:hover{   border-color:rgba(13,148,136,.38);  box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(13,148,136,.16); }
.mod-icon{
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.1);
}
.mod-icon svg{ width:18px; height:18px; }
.module[data-tone="violet"] .mod-icon{ color:#a48fe6; }
.module[data-tone="pink"]   .mod-icon{ color:#d985a8; }
.module[data-tone="amber"]  .mod-icon{ color:#dca25a; }
.module[data-tone="teal"]   .mod-icon{ color:#5fb8ad; }
.module h5{ font-family:var(--mono); font-size:.92rem; color:var(--text); margin:12px 0 3px; }
.module p{ font-size:.78rem; color:var(--text-dim); }
.module-wide{ grid-column:1 / -1; }


.dash-feats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.feat{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.72rem;
  padding:6px 12px; border-radius:999px;
  color:var(--teal-soft);
  border:1px solid rgba(13,148,136,.25); background:rgba(13,148,136,.07);
}
.feat svg{ width:13px; height:13px; }
.feat-amber{ color:var(--amber-soft); border-color:rgba(217,119,6,.25); background:rgba(217,119,6,.07); }


.works-filters{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;
}
.filter-btn{
  font-family:var(--mono); font-size:.78rem; color:var(--text-dim);
  padding:9px 18px; border-radius:999px; cursor:pointer;
  background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
  border:1px solid var(--glass-br);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.filter-btn:hover{ color:var(--text); border-color:rgba(255,255,255,.2); }
.filter-btn.active{
  color:var(--violet-soft);
  background:rgba(124,58,237,.12);
  border-color:rgba(157,123,240,.4);
  box-shadow:0 0 20px rgba(124,58,237,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.works-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.work-card{
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; 
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 42px rgba(124,58,237,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.work-card:hover{
  transform:scale(1.022);
  border-color:rgba(255,255,255,.2);
  box-shadow:
    0 28px 60px rgba(0,0,0,.48),
    0 0 42px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -14px 30px rgba(0,0,0,.18);
}
.work-shot{ position:relative; overflow:hidden; }
/* бейдж избранного проекта поверх обложки */
.feat-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.66rem; color:#e6ddF5;
  padding:5px 12px; border-radius:999px;
  background:rgba(124,58,237,.55); border:1px solid rgba(157,123,240,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 16px rgba(124,58,237,.35);
}
.feat-badge svg{ width:11px; height:11px; }
.work-shot img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) brightness(.72); border-radius:var(--r-lg) var(--r-lg) 0 0;
  transition:filter var(--t), transform var(--t);
}
.work-card:hover img{ filter:saturate(.9) brightness(.92); transform:scale(1.04); }
.work-body{
  padding:20px 22px 22px;
  flex:1; display:flex; flex-direction:column; 
}
.work-body h3{ font-family:var(--mono); font-size:1.06rem; margin-bottom:4px; }
.work-body > p{ color:var(--text-dim); font-size:.86rem; margin-bottom:14px; }
.work-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; margin-top:auto; }
.work-tags span{
  font-family:var(--mono); font-size:.68rem; color:var(--text-dim);
  padding:4px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}
.work-links{ display:flex; gap:14px; }
.work-links a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.78rem; color:var(--text-dim);
  text-decoration:none; transition:color .3s;
}
.work-links a svg{ width:15px; height:15px; }
.work-links a:hover{ color:var(--violet-soft); }


.contact-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.contact-card{
  display:flex; align-items:center; gap:16px;
  padding:20px 22px; border-radius:var(--r-md); text-decoration:none;
  
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 0 30px rgba(124,58,237,0),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -14px 30px rgba(0,0,0,.18);
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.contact-card:hover{
  transform:translateY(-4px); border-color:rgba(255,255,255,.2);
  box-shadow:
    0 20px 44px rgba(0,0,0,.42),
    0 0 30px rgba(124,58,237,.15),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -14px 30px rgba(0,0,0,.18);
}
.contact-icon{
  width:46px; height:46px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.1); color:var(--tone-c, var(--violet-soft));
}
.contact-icon svg{ width:21px; height:21px; }
.contact-card .cc-label{ font-family:var(--mono); font-size:.72rem; color:var(--text-dim); }
.contact-card .cc-value{ font-family:var(--mono); font-size:.95rem; color:var(--text); }
.contact-cta{ text-align:center; margin-top:44px; }
.contact-cta .btn{ font-size:.95rem; padding:15px 34px; }


.footer-wrap{ position:relative; z-index:1; padding:30px 0 40px; }
.copyright{
  margin-top:22px; padding:18px 26px; border-radius:var(--r-sm);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.74rem; color:var(--text-dim);
}
.copyright .no-fx{ color:var(--amber-soft); }


.lightbox-box{
  width:min(1240px, 96vw); padding:0;
  transform:scale(.94) translateY(14px);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.modal-overlay.open .lightbox-box{ transform:scale(1) translateY(0); }
.lb-head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);
}
.lb-title{ font-size:.88rem; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-counter{ font-size:.74rem; color:var(--text-dim); flex:none; }
.lb-close{
  width:34px; height:34px; flex:none; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-br); color:var(--text);
  transition:background .3s, border-color .3s;
}
.lb-close:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.lb-close svg{ width:16px; height:16px; }

.lb-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:14px 64px; overflow:hidden;
}
.lb-stage img{
  max-width:100%; max-height:70vh; border-radius:var(--r-sm);
  cursor:zoom-in; user-select:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}

#lightbox{ padding:10px; }
.lb-stage img.zoomed{ cursor:zoom-out; transform:scale(1.9); }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); background:rgba(13,17,23,.55);
  border:1px solid var(--glass-br);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .3s, border-color .3s, opacity .3s;
}
.lb-arrow:hover{ background:rgba(124,58,237,.25); border-color:rgba(157,123,240,.5); }
.lb-arrow svg{ width:20px; height:20px; }
.lb-prev{ left:14px; }
.lb-next{ right:14px; }

.lb-thumbs{
  display:flex; flex-wrap:wrap; gap:10px; padding:0 18px 16px; justify-content:center;
}
.lb-thumbs img{
  width:76px; height:50px; object-fit:cover; border-radius:9px; cursor:pointer;
  opacity:.45; border:1px solid rgba(255,255,255,.1);
  transition:opacity .3s, border-color .3s, transform .3s;
}
.lb-thumbs img:hover{ opacity:.8; transform:translateY(-2px); }
.lb-thumbs img.active{
  opacity:1; border-color:rgba(157,123,240,.65);
  box-shadow:0 0 14px rgba(124,58,237,.25);
}


.modal-overlay{
  position:fixed; inset:0; z-index:500; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(13,17,23,.66);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  max-width:420px; width:100%; padding:34px 30px; text-align:center;
  border-radius:var(--r-lg);
  transform:scale(.9) translateY(16px); transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.modal-overlay.open .modal-box{ transform:scale(1) translateY(0); }
.modal-badge{
  display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-soft);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
  border:1px solid rgba(217,119,6,.3); background:rgba(217,119,6,.08);
}
.modal-box h3{ font-family:var(--mono); font-size:1.35rem; margin-bottom:14px; }
.modal-box pre{
  font-family:var(--mono); font-size:.8rem; color:var(--teal-soft);
  text-align:left; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07); border-radius:12px;
  padding:14px 16px; margin-bottom:16px; overflow-x:auto;
}
.modal-box p{ color:var(--text-dim); font-size:.9rem; margin-bottom:22px; }


@media (min-width:640px){
  .skills-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .works-grid{ grid-template-columns:repeat(2,1fr); }
  .tech-list{ grid-template-columns:repeat(2,1fr); }
  .flag-modules{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; } /* ряды тянутся — низ колонок совпадает */
}
@media (min-width:900px){
  .stack-grid{ grid-template-columns:repeat(3,1fr); }
  .skills-grid{ grid-template-columns:repeat(3,1fr); }
  .works-grid{ grid-template-columns:repeat(3,1fr); } 
  .contact-grid{ grid-template-columns:repeat(4,1fr); }
  .flag-body{ grid-template-columns:.9fr 1.1fr; } 
}
@media (min-width:1024px){
  .nav{ padding:16px 32px; }
  .nav.scrolled{ padding:10px 32px; }
  .nav-links{ display:flex; }
  #nav-burger, .nav-mobile{ display:none; }
  .hero-grid{ flex-direction:row; gap:56px; }
  .hero-left{ flex:1.15; }
  .hero-right{ flex:1; }
  .about-grid{ flex-direction:row; text-align:left; }
  .about-facts{ justify-content:flex-start; }
}


@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  #bg3d{ display:none; } 
}