/* ============ KIDBORG.RU — стиль HUD / неон ============ */
:root{
  --bg:#050912; --bg2:#0a1428; --panel:rgba(8,18,38,.72);
  --cyan:#38e8ff; --cyan2:#22b8d8; --blue:#3b82f6;
  --orange:#ff9f1c; --amber:#ffc14d;
  --text:#dbeafe; --muted:#7fa3c7; --line:rgba(56,232,255,.25);
  --f-head:'Orbitron',sans-serif; --f-body:'Exo 2',sans-serif; --f-mono:'JetBrains Mono',monospace;
  --u:clamp(58px,7.6vw,110px); /* базовая единица фотогалереи: тайлы 3u×4u и 4u×3u */

  /* ---- Карточки А4 (дипломы/курсы) ----
     Вертикаль: w × h = 2479 × 3508, горизонталь: h × w = 3508 × 2479,  h/w = 3508/2479 = 1.41509.
     Условие «ряд из 4 вертикальных = ряд из 3 горизонтальных»:
        4w + 3g = 3h + 2g  →  g = 3h − 4w = (3·3508 − 4·2479)/2479 · w = 608/2479 · w ≈ 0.2453·w
     Ширина ряда: 4w + 3g = (4 + 3·0.2453)·w = 4.7358·w.
     Контент панели ≈ 100vw − 112px (макс. 1176px) → w = min(232px, (100vw − 120px)/4.7358). */
  --dw:min(232px,calc((100vw - 120px) / 4.7358));   /* ширина вертикальной карточки  (2479) */
  --dh:calc(var(--dw) * 3508 / 2479);                /* ширина горизонтальной карточки (3508) = высота вертикальной */
  --dg:calc(var(--dw) * 608 / 2479);                 /* зазор между карточками */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--f-body)}
body{cursor:none;user-select:none;-webkit-user-drag:none;-webkit-user-select:none}
@media (hover:none){body{cursor:auto}#cursor{display:none}}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;color:inherit;background:none;border:0;cursor:none;outline:none}
@media (hover:none){button,input{cursor:auto}}
::selection{background:var(--orange);color:#000}

/* ---------- canvas & fx ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(2,5,12,.85) 100%)}

/* ---------- варп-переход: шестигранный гипертоннель с иристыми кольцами ---------- */
#warp{position:fixed;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;z-index:40;pointer-events:none;opacity:0;
  clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  background:
    repeating-conic-gradient(from 0deg,transparent 0deg 3.6deg,rgba(56,232,255,.3) 3.9deg 4.2deg,transparent 4.2deg 7.2deg,rgba(255,159,28,.24) 7.5deg 7.8deg),
    repeating-radial-gradient(circle,transparent 0 3.2%,rgba(56,232,255,.55) 3.2% 3.5%,transparent 3.5% 6.4%,rgba(255,159,28,.45) 6.4% 6.7%),
    radial-gradient(circle,#fff 0%,rgba(255,193,77,.95) 5%,rgba(56,232,255,.75) 14%,rgba(5,9,18,.98) 48%);
  transform:scale(0) rotate(0deg);will-change:transform,opacity}
#warp::before,#warp::after{content:"";position:absolute;clip-path:inherit;pointer-events:none}
#warp::before{inset:26%;border:1.2vmax solid rgba(56,232,255,.85);box-shadow:0 0 6vmax rgba(56,232,255,.8),inset 0 0 6vmax rgba(255,159,28,.55)}
#warp::after{inset:40%;border:.6vmax solid rgba(255,159,28,.9);box-shadow:0 0 5vmax rgba(255,159,28,.8),inset 0 0 4vmax rgba(56,232,255,.5)}
#warp.on{animation:warpIn .9s cubic-bezier(.2,.8,.2,1) forwards}
#warp.on::before{animation:irisSpin .9s linear forwards}
#warp.on::after{animation:irisSpin .9s linear reverse forwards}
#warp.off{animation:warpOut .7s ease forwards}
@keyframes warpIn{0%{opacity:0;transform:scale(.04) rotate(0deg)}35%{opacity:1}100%{opacity:1;transform:scale(2.6) rotate(150deg)}}
@keyframes warpOut{0%{opacity:1;transform:scale(2.6) rotate(150deg);filter:blur(0)}100%{opacity:0;transform:scale(4.5) rotate(240deg);filter:blur(8px)}}
@keyframes irisSpin{to{transform:rotate(-360deg)}}

#cursor{position:fixed;z-index:1000;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--cyan);border-radius:50%;pointer-events:none;
  transition:width .2s,height .2s,margin .2s,border-color .2s,background .2s;mix-blend-mode:screen}
#cursor i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
#cursor.hot{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--orange);background:rgba(255,159,28,.12)}
#tip{position:fixed;z-index:60;pointer-events:none;padding:6px 12px;font:600 12px var(--f-mono);letter-spacing:.15em;color:#000;background:var(--orange);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);opacity:0;transform:translate(14px,-40px) scale(.8);transition:.15s}
#tip.on{opacity:1;transform:translate(14px,-40px) scale(1)}
body.in-section #tip{opacity:0!important}   /* в разделах подсказка не показывается */

/* ---------- HUD decor ---------- */
.hud-corner{position:fixed;z-index:5;width:70px;height:70px;pointer-events:none;border:2px solid var(--cyan);opacity:.6;filter:drop-shadow(0 0 6px var(--cyan))}
.hud-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.hud-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-color:var(--orange);filter:drop-shadow(0 0 6px var(--orange))}
.hud-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-color:var(--orange);filter:drop-shadow(0 0 6px var(--orange))}
.hud-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.hud-side{position:fixed;z-index:5;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;font:600 10px var(--f-mono);letter-spacing:.2em;color:var(--muted);pointer-events:none}
.hud-side.left{left:22px;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.hud-side.right{right:22px;writing-mode:vertical-rl;text-align:right}
.hud-side span:nth-child(2){color:var(--cyan)}
.hud-side span:nth-child(3){color:var(--orange)}

/* ---------- живые счётчики внизу ---------- */
.hud-bottom{position:absolute;bottom:34px;display:grid;gap:7px;font:600 12px var(--f-mono);letter-spacing:.14em;color:var(--muted);pointer-events:none}
.hud-bottom.left{left:96px}
.hud-bottom.right{right:96px;text-align:right;justify-items:end}
.hud-bottom b{color:var(--cyan);font-weight:600;text-shadow:0 0 8px rgba(56,232,255,.6);display:inline-block;min-width:3ch}
.hud-bottom.right b{color:var(--orange);text-shadow:0 0 8px rgba(255,159,28,.6)}
.hbar{width:170px;height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;margin-top:6px}
.hbar i{position:absolute;top:0;left:0;width:40%;height:100%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:hslide 2.4s ease-in-out infinite alternate}
.hbar.or i{background:var(--orange);box-shadow:0 0 10px var(--orange);animation-delay:-1.2s}
@keyframes hslide{from{left:0}to{left:60%}}
.hud-bottom div:not(.hbar){animation:tick .2s steps(1)}

/* ---------- Header ---------- */
#header{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;
  background:linear-gradient(180deg,rgba(5,9,18,.85),transparent)}
.logo{display:flex;align-items:center;gap:12px;font:700 20px var(--f-head);letter-spacing:.2em}
.logo b{color:var(--orange)}
.logo svg .hex,#preloader .hex{fill:rgba(5,9,18,.8);stroke:var(--cyan);stroke-width:3;filter:drop-shadow(0 0 6px var(--cyan))}
.logo svg .k,#preloader .k{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--orange))}
.logo svg .dot,#preloader .dot{fill:#fff}
.logo svg{animation:logoSpin 12s linear infinite}
@keyframes logoSpin{to{transform:rotateY(360deg)}}
#nav{display:flex;gap:4px}
#nav button{position:relative;padding:10px 15px;font:600 12px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:.25s;overflow:hidden;white-space:nowrap}
#nav button::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(56,232,255,.18),transparent);transform:translateX(-100%);transition:.4s}
#nav button:hover,#nav button.act{color:#fff;text-shadow:0 0 10px var(--cyan)}
#nav button:hover::before{transform:translateX(100%)}
#nav button.act{background:rgba(56,232,255,.08);box-shadow:inset 0 -2px 0 var(--orange)}
#burger{display:none;flex-direction:column;gap:5px;width:36px;height:30px;justify-content:center;align-items:flex-end}
#burger i{display:block;height:2px;width:100%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);transition:.3s}
#burger i:nth-child(2){width:70%;background:var(--orange);box-shadow:0 0 6px var(--orange)}
@media (max-width:1280px){#nav button{padding:8px 10px;font-size:11px;letter-spacing:.06em}}

/* ---------- HUB ---------- */
#hub{position:fixed;z-index:10;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:110px 60px 40px;transition:opacity .5s,transform .6s}
body.in-section #hub{opacity:0;transform:scale(1.1);pointer-events:none}
.hub-hero{max-width:560px}
.hero-tag{font:400 13px var(--f-mono);color:var(--orange);letter-spacing:.2em;margin-bottom:10px;animation:fadeUp 1s .2s both}
.hub-hero h1{font:900 clamp(34px,5.4vw,72px)/1 var(--f-head);letter-spacing:.06em;animation:fadeUp 1s .4s both;text-shadow:0 0 30px rgba(56,232,255,.4)}
.hub-hero h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--cyan)}
.hero-type{margin-top:18px;font:600 clamp(15px,1.7vw,22px) var(--f-mono);color:var(--cyan);min-height:1.6em;animation:fadeUp 1s .6s both}
.caret{display:inline-block;width:10px;height:1.1em;background:var(--orange);vertical-align:-.15em;margin-left:3px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-stats{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap;animation:fadeUp 1s .8s both}
.hero-stats div{font:700 30px var(--f-head);color:#fff;position:relative;padding-left:14px}
.hero-stats div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--cyan),var(--orange))}
.hero-stats div small{display:block;font:400 11px var(--f-mono);letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.hero-stats b{color:var(--orange)}
.hub-hint{display:flex;gap:28px;flex-wrap:wrap;font:400 12px var(--f-mono);letter-spacing:.12em;color:var(--muted);animation:fadeUp 1s 1.2s both;justify-content:center}
.hint-item{display:flex;align-items:center;gap:10px}
.hint-item i{width:22px;height:22px;border:1px solid var(--cyan);border-radius:6px;position:relative;box-shadow:0 0 8px rgba(56,232,255,.4)}
.ic-drag::after{content:"";position:absolute;left:4px;top:9px;width:12px;height:2px;background:var(--orange);animation:dragAnim 1.4s ease-in-out infinite}
@keyframes dragAnim{50%{transform:translateX(-4px)}}
.ic-wheel{border-radius:11px}.ic-wheel::after{content:"";position:absolute;left:9px;top:4px;width:2px;height:6px;background:var(--orange);animation:wheelAnim 1.2s infinite}
@keyframes wheelAnim{to{transform:translateY(8px);opacity:0}}
.ic-click::after{content:"";position:absolute;inset:5px;border-radius:3px;background:var(--orange);animation:clickAnim 1.4s infinite}
@keyframes clickAnim{50%{transform:scale(.4);opacity:.3}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:1200px){.hub-hint{flex-direction:column;gap:6px;align-items:center}}

/* ---------- Sections ---------- */
.sec{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:84px 24px 24px}
.sec.active{display:flex;animation:holoIn .8s cubic-bezier(.2,.9,.25,1) both}
.sec.leaving{animation:holoOut .5s ease both}
@keyframes holoIn{
  0%{opacity:0;transform:perspective(1200px) rotateY(90deg) scale(.8);filter:blur(6px) brightness(2)}
  50%{opacity:.8;transform:perspective(1200px) rotateY(45deg) scale(1);filter:blur(2px) brightness(1.5)}
  100%{opacity:1;transform:perspective(1200px) rotateY(0deg) scale(1);filter:none}
}
@keyframes holoOut{
  0%{opacity:1;transform:perspective(1200px) rotateY(0deg) scale(1);filter:none}
  50%{opacity:.8;transform:perspective(1200px) rotateY(-45deg) scale(1);filter:blur(2px) brightness(1.5)}
  100%{opacity:0;transform:perspective(1200px) rotateY(-90deg) scale(.8);filter:blur(6px) brightness(2)}
}
@keyframes titleColorIn {
  0% { color: var(--cyan); text-shadow: 0 0 20px rgba(56,232,255,.5); }
  100% { color: var(--orange); text-shadow: 0 0 20px rgba(255,159,28,.5); }
}
@keyframes titleColorOut {
  0% { color: var(--orange); text-shadow: 0 0 20px rgba(255,159,28,.5); }
  100% { color: var(--cyan); text-shadow: 0 0 20px rgba(56,232,255,.5); }
}
.sec.active .sec-head h2 span { animation: titleColorIn .8s forwards; }
.sec.leaving .sec-head h2 span { animation: titleColorOut .5s forwards; }
.sec-panel{position:relative;width:min(1240px,100%);height:100%;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
  box-shadow:0 0 60px rgba(56,232,255,.12),inset 0 0 80px rgba(5,9,18,.6)}
.sec-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--cyan),transparent 30%) top/100% 2px no-repeat,
  linear-gradient(270deg,var(--orange),transparent 30%) bottom/100% 2px no-repeat}
.sec-head{display:flex;align-items:center;gap:22px;padding:22px 32px 14px;border-bottom:1px solid var(--line)}
.sec-head h2{flex:1;font:900 clamp(22px,3vw,40px) var(--f-head);letter-spacing:.1em;text-shadow:0 0 20px rgba(56,232,255,.4)}
.sec-head h2 span{color:var(--orange);text-shadow:0 0 20px rgba(255,159,28,.5)}
.sec-code{font:600 12px var(--f-mono);letter-spacing:.3em;color:var(--muted);padding:6px 12px;border:1px solid var(--line)}
.back{padding:10px 16px;font:700 12px var(--f-head);letter-spacing:.15em;color:var(--orange);border:1px solid var(--orange);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:.25s;position:relative;overflow:hidden}
.back:hover{background:var(--orange);color:#000;box-shadow:0 0 20px var(--orange)}
/* плавающая кнопка возврата в ядро (правый нижний угол, только внутри разделов) */
.to-core{position:fixed;right:30px;bottom:30px;z-index:25;display:none;padding:12px 18px;background:rgba(5,9,18,.85);animation:fadeUp .5s both}
body.in-section .to-core{display:block}
.sec-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:26px 32px 40px;scroll-behavior:smooth;perspective:1200px}
.sec-body::-webkit-scrollbar{width:6px}
.sec-body::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--orange));border-radius:3px}
.tabs{display:flex;gap:8px;padding:14px 32px 0;flex-wrap:wrap}
.tabs button{padding:10px 18px;font:600 12px var(--f-head);letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:.25s;position:relative}
.tabs button:hover{color:#fff;border-color:var(--cyan)}
.tabs button.on{color:#000;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(56,232,255,.5)}
.tab-panel{display:none}.tab-panel.on{display:block;animation:fadeUp .5s both}
.sub-title{font:700 14px var(--f-head);letter-spacing:.3em;color:var(--cyan);margin:34px 0 16px}
.lead{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:#fff}
.lead.center{text-align:center;max-width:640px;margin:0 auto 30px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(40px) rotateX(8deg);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
.photo-frame{position:relative;aspect-ratio:3/4;border:1px solid var(--line);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));box-shadow:0 0 30px rgba(56,232,255,.15)}
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.scanline{position:absolute;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(56,232,255,.35),transparent);animation:scan 3s linear infinite;pointer-events:none}
@keyframes scan{from{top:-60px}to{top:100%}}
.about-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.about-badges span{font:600 11px var(--f-mono);padding:5px 9px;border:1px solid var(--line);color:var(--cyan);background:rgba(56,232,255,.05)}
.about-text p{margin:0 0 14px;line-height:1.7;font-size:16px;color:#c6d8ef}
.about-text b{color:var(--cyan)}
.quote{font:600 17px var(--f-mono)!important;color:var(--amber)!important;padding:14px 18px;border-left:3px solid var(--orange);background:rgba(255,159,28,.06)}
.about-facts{display:grid;gap:8px;margin-top:6px}
.about-facts div{padding:10px 14px;border:1px solid var(--line);font-size:14px;color:var(--muted);background:rgba(5,9,18,.4)}
.about-facts b{color:var(--orange);margin-right:6px}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--orange))}
.tl-item{position:relative;padding:0 0 26px 20px}
.tl-item::before{content:"";position:absolute;left:-27px;top:4px;width:12px;height:12px;background:var(--bg);border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 10px var(--cyan)}
.tl-item:nth-child(even)::before{border-color:var(--orange);box-shadow:0 0 10px var(--orange)}
.tl-year{font:700 13px var(--f-mono);color:var(--orange);letter-spacing:.2em}
.tl-item h4{font:700 17px var(--f-head);margin:4px 0 6px;color:#fff}
.tl-item p{color:var(--muted);line-height:1.6;font-size:14px}

/* ---------- Cards А4 (дипломы/курсы): ряд вертикальных + ряд горизонтальных ---------- */
/* Ряд ровно на 4 вертикальных / 3 горизонтальных карточки: ширина 4·dw + 3·dg = 3·dh + 2·dg (см. расчёт в :root). */
.cards{display:flex;flex-wrap:wrap;gap:var(--dg);width:calc(var(--dw) * 4 + var(--dg) * 3);max-width:100%;margin:0 auto var(--dg)}
.cards:empty{display:none}
.card{position:relative;flex:0 0 auto;width:var(--dw);transform-style:preserve-3d;transition:transform .15s,box-shadow .3s;border:1px solid var(--line);background:rgba(5,9,18,.5)}
.card.h{width:var(--dh)}
.card-in{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px))}
.card:hover{border-color:var(--cyan);animation:cardGlow 1.4s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:0 0 22px rgba(56,232,255,.35),0 0 60px rgba(56,232,255,.12)}50%{box-shadow:0 0 34px rgba(255,159,28,.45),0 0 90px rgba(255,159,28,.18)}}
/* уголки-скобки, расходящиеся при наведении */
.card::before,.card::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--orange);z-index:4;opacity:0;transition:.35s cubic-bezier(.2,.9,.25,1.3);pointer-events:none}
.card::before{top:10px;left:10px;border-right:0;border-bottom:0}
.card::after{bottom:10px;right:10px;border-left:0;border-top:0}
.card:hover::before{opacity:1;top:-6px;left:-6px;filter:drop-shadow(0 0 6px var(--orange))}
.card:hover::after{opacity:1;bottom:-6px;right:-6px;filter:drop-shadow(0 0 6px var(--orange))}
/* одиночный блик, пролетающий по карточке при наведении (один раз) */
.card-in::before{content:"";position:absolute;inset:-40% -60%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 48%,rgba(56,232,255,.45) 50%,rgba(255,255,255,.18) 52%,transparent 60%);
  transform:translateX(-110%) rotate(0deg);transition:none}
.card:hover .card-in::before{animation:shine 1.1s ease-out .05s 1}
@keyframes shine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.card .thumb{aspect-ratio:2479/3508;overflow:hidden;background:#07101f;position:relative}   /* А4 вертикально 2479×3508 */
.card.h .thumb{aspect-ratio:3508/2479}                                                    /* А4 горизонтально 3508×2479 */
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;cursor:none;display:block}
.card:hover .thumb img{transform:scale(1.1);filter:brightness(1.15) saturate(1.25) contrast(1.05)}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,9,18,.9))}
.card .lvl{position:absolute;top:10px;left:10px;z-index:3;font:700 10px var(--f-mono);letter-spacing:.15em;padding:4px 8px;background:var(--orange);color:#000;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:.3s}
.card:hover .lvl{animation:badgePulse .8s ease-in-out infinite;background:var(--amber)}
@keyframes badgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,159,28,0)}50%{transform:scale(1.12) translateX(3px);box-shadow:0 0 18px rgba(255,159,28,.8)}}
.card .info{padding:14px;position:relative}
.card .info::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .info::after{width:100%}
.card h4{font:700 14px var(--f-head);line-height:1.35;color:#fff;margin-bottom:6px;transition:.3s}
.card:hover h4{color:var(--cyan);text-shadow:0 0 12px rgba(56,232,255,.7)}
.card .org{font:400 12px var(--f-mono);color:var(--cyan)}
.card:hover .org{animation:flicker 1.6s infinite}
@keyframes flicker{0%,92%,100%{opacity:1}94%{opacity:.3}96%{opacity:1}98%{opacity:.5}}
.card .meta{display:flex;justify-content:space-between;font:400 11px var(--f-mono);color:var(--muted);margin-top:8px}
.card:hover .meta span:last-child{color:var(--orange);letter-spacing:.15em;transition:.4s}
.card a.cert{display:inline-block;margin-top:10px;font:600 11px var(--f-mono);color:var(--orange);letter-spacing:.1em;position:relative;z-index:5}
.card a.cert:hover{text-decoration:underline}

/* ---------- Фотогалерея 3×4 / 4×3 — неон снаружи, без засвета внутри ---------- */
.gallery-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:24px}
.tile{position:relative;overflow:hidden;border:1px solid var(--line);background:#07101f;flex:0 0 auto;transition:transform .3s,box-shadow .35s,border-color .3s}
.tile.v{width:calc((100% - 3 * 24px) / 4);aspect-ratio:3/4;height:auto}
.tile.h{width:calc((100% - 2 * 24px) / 3);aspect-ratio:4/3;height:auto}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .4s;display:block}
.tile:hover{transform:translateY(-8px) scale(1.02);border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(56,232,255,.4),0 0 28px rgba(56,232,255,.7),0 0 70px rgba(56,232,255,.4),0 0 120px rgba(56,232,255,.2)}
.tile:hover img{transform:scale(1.08);filter:saturate(1.1)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;font:400 12px var(--f-mono);color:#fff;background:linear-gradient(transparent,rgba(5,9,18,.95));transform:translateY(100%);transition:.3s;z-index:2}
.tile:hover .cap{transform:none}
.tile::before,.tile::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--orange);z-index:3;opacity:0;transition:.3s}
.tile::before{top:6px;left:6px;border-right:0;border-bottom:0}.tile::after{bottom:6px;right:6px;border-left:0;border-top:0}
.tile:hover::before,.tile:hover::after{opacity:1;filter:drop-shadow(0 0 6px var(--orange))}

/* ---------- Видео ---------- */
.video-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:24px}
.video.v{width:calc((100% - 3 * 24px) / 4)}
.video.h{width:calc((100% - 2 * 24px) / 3)}
.video{border:1px solid var(--line);background:rgba(5,9,18,.5);clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));transition:.35s;position:relative}
.video:hover{border-color:var(--cyan);background:rgba(9,30,55,.75);box-shadow:inset 0 0 0 1px rgba(56,232,255,.5)}
.video.h .vwrap{aspect-ratio:16/9;background:#000;position:relative}
.video.v .vwrap{aspect-ratio:9/16;background:#000;position:relative}
.video iframe,.video video{width:100%;height:100%;display:block;border:0}
.video .info{padding:12px 14px}.video h4{font:700 14px var(--f-head);color:#fff;transition:.3s}
.video:hover h4{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.video p{font-size:13px;color:var(--muted);margin-top:4px}

/* ---------- Проекты — контур один раз обегает голубым бликом и остаётся оранжевым ---------- */
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.prj{position:relative;border:1px solid var(--line);background:rgba(5,9,18,.55);display:flex;flex-direction:column;transform-style:preserve-3d;
  transition:transform .15s,box-shadow .3s,border-color 1.15s ease;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.prj:hover{border-color:var(--orange);box-shadow:inset 0 0 40px rgba(255,159,28,.15)}
/* бегущий по контуру блик: кольцо шириной 2px поверх рамки */
.prj .sweep{position:absolute;inset:-1px;z-index:6;pointer-events:none;padding:2px;opacity:0;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.prj .sweep::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,transparent 0deg 190deg,rgba(59,130,246,.35) 250deg,rgba(56,232,255,.95) 315deg,#e8fbff 338deg,rgba(255,159,28,.95) 360deg)}
.prj:hover .sweep{animation:sweepFade 1.15s ease-out 1 forwards}
.prj:hover .sweep::before{animation:sweepRot 1.15s cubic-bezier(.45,0,.2,1) 1 forwards}
@keyframes sweepRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sweepFade{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
.prj .thumb{aspect-ratio:16/9;overflow:hidden;position:relative;background:#07101f}
.prj .thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.prj:hover .thumb img{transform:scale(1.05)}
.prj .thumb .num{position:absolute;right:12px;top:8px;font:900 40px var(--f-head);color:rgba(56,232,255,.18)}
.prj .info{padding:16px;flex:1;display:flex;flex-direction:column}
.prj h4{font:700 17px var(--f-head);color:#fff;margin-bottom:8px}
.prj p{font-size:14px;line-height:1.6;color:#b9cde6;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tags span{font:600 10px var(--f-mono);letter-spacing:.08em;padding:4px 8px;border:1px solid rgba(255,159,28,.4);color:var(--amber)}
.links{display:flex;gap:8px;flex-wrap:wrap}
.links a{font:700 11px var(--f-head);letter-spacing:.1em;padding:8px 12px;border:1px solid var(--cyan);color:var(--cyan);
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);transition:.25s}
.links a:hover{background:var(--cyan);color:#000;box-shadow:0 0 16px var(--cyan)}
.links a.kg{border-color:var(--orange);color:var(--orange)}.links a.kg:hover{background:var(--orange);color:#000;box-shadow:0 0 16px var(--orange)}
.metric{font:600 12px var(--f-mono);color:var(--cyan);margin-bottom:8px}
.metric b{color:var(--orange)}

/* ---------- Стек — проворот иконки при наведении и обратно при уходе мыши ---------- */
.stack-groups{display:grid;gap:30px}
.stack-group h3{font:700 13px var(--f-head);letter-spacing:.3em;color:var(--orange);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.stack-group h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--orange),transparent)}
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.tech{position:relative;padding:18px 12px 14px;text-align:center;border:1px solid var(--line);background:rgba(5,9,18,.5);transition:.3s;transform-style:preserve-3d;perspective:400px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.tech:hover{transform:translateY(-6px) rotateX(6deg);border-color:var(--cyan);box-shadow:inset 0 0 30px rgba(56,232,255,.18)}
.tech{--spin:360deg}   /* угол проворота иконки */
.tech img,.tech .emoji{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(56,232,255,.5));display:inline-block;
  transition:transform .6s cubic-bezier(.34,1.4,.64,1),filter .3s}
/* при наведении — горизонтальный проворот вокруг оси Y */
.tech:hover img,.tech:hover .emoji{transform:rotateY(var(--spin)) scale(1.15);filter:drop-shadow(0 0 14px var(--orange))}
.tech .tname{font:700 12px var(--f-head);margin-top:10px;color:#fff}
.tech .bar{height:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.tech .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.tech.in .bar i{width:var(--lvl)}
.tech .pct{position:absolute;top:8px;right:10px;font:600 10px var(--f-mono);color:var(--muted)}
.tech .emoji{font-size:38px;line-height:46px}

/* ---------- Интерактивный терминал (закреп в блоге) ---------- */
.term-block{max-width:900px;margin:0 auto}
.term-title{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.term-title .tnum{font:600 13px var(--f-mono);color:var(--orange);letter-spacing:.1em}
.term-title h3{font:700 clamp(24px,3vw,36px) var(--f-body);color:#fff;letter-spacing:.01em}
.term-title .tline{flex:1;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);position:relative}
.term-title .tline::before{content:"";position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.term-title .pin{font:600 11px var(--f-mono);color:var(--orange);letter-spacing:.15em;padding:4px 10px;border:1px solid rgba(255,159,28,.4)}
.term-sub{font-size:17px;color:#b9cde6;margin-bottom:22px}
.term-sub code{font:600 15px var(--f-mono);color:var(--amber);background:rgba(255,193,77,.12);padding:2px 8px;border-radius:4px}
.iterm{background:#020a14;border:1px solid var(--cyan);border-radius:10px;overflow:hidden;box-shadow:0 0 30px rgba(56,232,255,.25),0 0 80px rgba(56,232,255,.08);font:400 13.5px/1.75 var(--f-mono)}
.it-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#061426;border-bottom:1px solid rgba(56,232,255,.25)}
.it-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f56}.it-bar i:nth-child(2){background:#ffbd2e}.it-bar i:nth-child(3){background:#27c93f}
.it-bar span{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.05em}
.it-out{height:300px;overflow-y:auto;padding:14px 18px;color:#e6f6ff;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent}
.it-out::-webkit-scrollbar{width:6px}.it-out::-webkit-scrollbar-thumb{background:var(--cyan)}
.it-out .pr,.it-line .pr{color:var(--cyan);font-weight:600}
.it-out b,.it-out .k{color:var(--orange);font-weight:600}
.it-out .dim{color:var(--muted)}.it-out .ok{color:#27c93f}.it-out .err{color:#ff5f56}.it-out .wt{color:#fff}
.it-help{display:grid;grid-template-columns:150px 1fr;gap:0 10px;padding-left:16px}
.it-help .k{font-weight:600}
.it-out pre{font:inherit;color:var(--cyan);line-height:1.3;margin:4px 0}
.it-line{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid rgba(56,232,255,.25);background:#03101c}
.it-line input{flex:1;font:400 14px var(--f-mono);color:#fff;caret-color:var(--orange);cursor:text}
.it-line input::placeholder{color:rgba(127,163,199,.5)}
.iterm.focus{box-shadow:0 0 40px rgba(56,232,255,.45),0 0 100px rgba(56,232,255,.12)}
.it-cursor{display:inline-block;width:8px;height:1em;background:var(--orange);vertical-align:-.15em;animation:blink .8s steps(1) infinite}

/* ---------- Блог ---------- */
.blog{display:grid;gap:18px;max-width:900px;margin:0 auto}
.post{border:1px solid var(--line);background:rgba(5,9,18,.5);padding:20px 24px;transition:.3s;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.post:hover{border-color:var(--orange)}
.post .p-meta{display:flex;gap:16px;font:600 11px var(--f-mono);letter-spacing:.15em;color:var(--orange)}
.post h4{font:700 20px var(--f-head);color:#fff;margin:8px 0 10px;cursor:none}
.post .p-text{max-height:0;overflow:hidden;transition:max-height .6s ease}
.post.open .p-text{max-height:1200px}
.post .p-text p{color:#b9cde6;line-height:1.7;margin-bottom:10px;font-size:15px}
.post .p-text img{max-width:100%;border:1px solid var(--line);margin:8px 0}
.post .more{font:700 11px var(--f-head);letter-spacing:.15em;color:var(--cyan)}
.post .more::after{content:" ▼"}.post.open .more::after{content:" ▲"}

/* ---------- Контакты ---------- */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto}
.contact{display:block;padding:24px 20px;text-align:center;border:1px solid var(--line);background:rgba(5,9,18,.5);transition:.3s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));border-radius:0}
.contact:hover{transform:translateY(-6px);border-color:var(--orange);box-shadow:inset 0 0 40px rgba(255,159,28,.2),0 0 24px rgba(56,232,255,.25)}
.c-ic{font-size:34px;filter:drop-shadow(0 0 10px var(--cyan))}
.c-ic svg,.c-ic img{width:44px;height:44px;display:block;margin:0 auto;filter:drop-shadow(0 0 12px rgba(56,232,255,.5))}
.contact:hover .c-ic svg,.contact:hover .c-ic img{filter:drop-shadow(0 0 18px rgba(255,159,28,.7))}
.c-name{font:700 13px var(--f-head);letter-spacing:.15em;color:var(--cyan);margin-top:10px}
.c-val{font:400 14px var(--f-mono);color:#fff;margin-top:4px}
.terminal{max-width:900px;margin:34px auto 0;border:1px solid var(--line);background:#02060f;font:400 13px var(--f-mono)}
.t-bar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line)}
.t-bar i{width:10px;height:10px;border-radius:50%;background:var(--orange)}.t-bar i:nth-child(2){background:var(--amber)}.t-bar i:nth-child(3){background:var(--cyan)}
.t-bar span{margin-left:8px;color:var(--muted)}
.terminal pre{padding:16px;color:#9fe9f7;white-space:pre-wrap;min-height:140px;line-height:1.6}
.terminal pre b{color:var(--orange)}

/* ---------- Lightbox — та же рамка, что у карточек/тайлов: неоновый контур + уголки, без полос ---------- */
#lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(2,5,12,.92);backdrop-filter:blur(8px)}
#lightbox.on{display:flex;animation:fadeUp .3s both}
.lb-wrap{max-width:92vw;max-height:88vh;position:relative;animation:lbIn .4s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes lbIn{from{transform:scale(.6) rotateY(30deg);opacity:0}to{transform:none;opacity:1}}
.lb-img{position:relative;display:inline-block;border:1px solid var(--cyan);background:#07101f;
  box-shadow:0 0 0 1px rgba(56,232,255,.25),0 0 30px rgba(56,232,255,.55),0 0 80px rgba(56,232,255,.25)}
.lb-img img{max-width:92vw;max-height:82vh;display:block}
.lb-img::before,.lb-img::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--orange);filter:drop-shadow(0 0 6px var(--orange));pointer-events:none}
.lb-img::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.lb-img::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.lb-cap{text-align:center;font:400 13px var(--f-mono);color:var(--cyan);padding:10px}
#lightbox button{position:absolute;color:#fff;font-size:34px;width:56px;height:56px;border:1px solid var(--line);transition:.25s;background:rgba(5,9,18,.6)}
#lightbox button:hover{background:var(--orange);color:#000}
.lb-close{top:20px;right:20px;font-size:24px!important}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:
  linear-gradient(135deg,#071224,#0b1a33);color:var(--muted);font:600 11px var(--f-mono);letter-spacing:.1em;text-align:center;padding:10px;position:relative}
.ph::before{content:"";position:absolute;inset:8px;border:1px dashed var(--line)}
#toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,0);opacity:0;pointer-events:none;z-index:300;padding:12px 22px;font:600 13px var(--f-mono);background:var(--orange);color:#000;transition:.4s;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
#toast.on{opacity:1;pointer-events:auto;}

/* ---------- Preloader ---------- */
#preloader{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .8s,visibility .8s}
#preloader.done{opacity:0;visibility:hidden}
.pre-logo svg{animation:preSpin 2s linear infinite}
@keyframes preSpin{to{transform:rotateY(360deg)}}
.pre-text{font:900 26px var(--f-head);letter-spacing:.4em;color:#fff}
.pre-text span{color:var(--orange)}
.pre-bar{width:240px;height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:width .3s}
.pre-log{font:400 12px var(--f-mono);color:var(--cyan);min-height:1.5em}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  #burger{display:flex}
  #nav{position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);flex-direction:column;justify-content:center;gap:10px;padding:40px 30px;
    background:rgba(5,9,18,.96);border-left:1px solid var(--line);transform:translateX(100%);transition:.4s cubic-bezier(.2,.9,.25,1)}
  #nav.open{transform:none}
  #nav button{clip-path:none;text-align:left;font-size:15px;padding:14px 10px;border-bottom:1px solid var(--line)}
}
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:280px;margin:0 auto}
  #hub{padding:96px 24px 118px}
  .hub-hint{justify-content:flex-start;align-items:flex-start}
  .hud-side{display:none}
  .hud-bottom{bottom:18px;font-size:10px;gap:3px}
  .hud-bottom.left{left:18px}.hud-bottom.right{right:18px}
  .hbar{width:110px}
}
@media (max-width:768px){
  #header{padding:14px 18px}
  .sec{padding:70px 8px 8px}
  .sec-head{padding:14px 16px 10px;gap:10px}
  .sec-code{display:none}
  .sec-body{padding:16px 16px 30px}
  .tabs{padding:10px 16px 0;gap:6px}.tabs button{padding:8px 12px;font-size:11px}
  .hud-corner{width:40px;height:40px}
  .hero-stats div{font-size:22px}
  .hub-hint{font-size:11px;gap:8px}
  :root{--u:clamp(36px,10.5vw,60px)}
  .tile.v{width:calc((100% - 24px) / 2);aspect-ratio:3/4;height:auto}
  .tile.h{width:100%;aspect-ratio:4/3;height:auto}
  .video.v{width:calc((100% - 24px) / 2)}
  .video.h{width:100%}
  /* А4 на мобильных: 2 вертикальных в ряд → 2w + g = 2.2453w = 100vw − 48px */
  :root{--dw:calc((100vw - 48px) / 2.2453)}
  .cards{width:100%;justify-content:center}
  .sec-panel{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .it-help{grid-template-columns:110px 1fr}
  .it-out{height:240px;font-size:12px}
  .term-title .pin{display:none}
  .to-core{right:12px;bottom:12px;padding:10px 12px;font-size:11px}
}

/* ---------- медиа: по умолчанию приглушены, при наведении / воспроизведении / полноэкранном режиме — оригинальные цвета ---------- */
.photo-frame img{filter:brightness(.55) saturate(.8);transition:filter .5s}
.photo-frame:hover img{filter:saturate(1.1) contrast(1.05)}
.card .thumb img{filter:brightness(.55) saturate(.75)}          /* hover-эффект карточек уже осветляет до оригинала */
.tile img{filter:brightness(.55) saturate(.75)}                 /* hover-эффект тайлов уже снимает затемнение */
.prj .thumb img{filter:brightness(.55) saturate(.75)}
.prj:hover .thumb img{filter:none}
.post .p-text img{filter:brightness(.55) saturate(.75);transition:filter .4s}
.post .p-text img:hover{filter:none}
.video video,.video iframe{filter:brightness(.55) saturate(.75);transition:filter .4s}
.video:hover video,.video:hover iframe,.video.playing video{filter:none}
.video video:fullscreen,.video iframe:fullscreen{filter:none}
.video video:-webkit-full-screen,.video iframe:-webkit-full-screen{filter:none}
/* лайтбокс без фильтров — картинка открывается в оригинальном цвете */

/* ---------- Переливание контура карточки (ДОСТИЖЕНИЯ / КУРСЫ): оранжевый бежит по голубому 1с после наведения ---------- */
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes borderSweep{from{--border-angle:0deg}to{--border-angle:360deg}}
.card{position:relative}
.card::after{content:"";position:absolute;bottom:10px;right:10px;border-left:0;border-top:0}
/* Shimmer border overlay — активируется с задержкой 1с после hover */
.card .thumb::before{content:"";position:absolute;inset:-2px;z-index:5;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--border-angle),var(--cyan) 0deg,var(--cyan) 300deg,var(--orange) 330deg,#fff 345deg,var(--orange) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:2px;transition:opacity .3s}
.card:hover .thumb::before{opacity:1;animation:borderSweep .8s linear 1s 1 forwards,borderFadeOut .3s ease 1.8s 1 forwards}
@keyframes borderFadeOut{to{opacity:0}}

/* ---------- Голографическая панель — сканлайн при появлении ---------- */
.sec.active .sec-panel::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;
  background:linear-gradient(transparent 0%,rgba(56,232,255,.08) 48%,rgba(56,232,255,.25) 50%,rgba(56,232,255,.08) 52%,transparent 100%);
  background-size:100% 200%;animation:holoScan 1.2s ease-out forwards}
@keyframes holoScan{0%{background-position:0 200%;opacity:1}100%{background-position:0 -100%;opacity:0}}

/* ---------- Responsive: contacts on small screens ---------- */
@media (max-width:768px){
  .contacts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .contacts{grid-template-columns:1fr}
}