:root {
  --bg:#07080D; --s1:#0D0F18; --s2:#131622; --s3:#1A1D2E;
  --br:rgba(255,255,255,0.06); --brh:rgba(46,156,255,0.25);
  --c1:#2E9CFF; --c2:#1DFFA8; --c3:#FF6B35; --c4:#A78BFA; --c5:#FFD60A;
  --tx:#DDE4F0; --mt:#5A637A; --mt2:#8A95AA;
  --syne:'Syne',sans-serif; --mono:'DM Mono',monospace; --body:'Outfit',sans-serif;
  /* Ширина основного контента. Раньше была жёстко 1200px везде — на
     широких/ультраширокоформатных мониторах (2К/4К, 32-34") это оставляло
     очень много пустого места по краям. 1600px — по-прежнему комфортная
     длина строки для текста (сам текст ограничен своими max-width внутри),
     но секции и сетки используют больше доступного пространства. */
  --content-max: 1600px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Доп. слой к JS-блокировке в media-protect.js: не даёт перетащить
   картинку/видео на рабочий стол мышью (сохраняя обычное выделение
   текста на странице — тут ограничены только сами media-элементы). */
img,video{-webkit-user-drag:none;user-drag:none}
body{background:var(--bg);color:var(--tx);font-family:var(--body);overflow-x:hidden;min-height:100vh}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(46,156,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(46,156,255,.1) 1px,transparent 1px),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");background-size:64px 64px,64px 64px,auto;pointer-events:none;z-index:9999;opacity:.5}
/* На очень широких экранах (ультраширокие/крупные мониторы) контент
   центрируется с ограниченной шириной (--content-max) — по краям
   остаётся свободное место. Вместо голого пустого фона там же — едва
   заметные вертикальные направляющие по границам колонки контента,
   чтобы широкие поля читались как осознанное решение, а не «пусто». */
@media (min-width:1700px){
  body::after{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    background-image:
      linear-gradient(rgba(46,156,255,.14),rgba(46,156,255,.14)),
      linear-gradient(rgba(46,156,255,.14),rgba(46,156,255,.14));
    background-repeat:no-repeat;
    background-size:1px 100%,1px 100%;
    background-position:
      calc(50% - (var(--content-max) / 2)) 0,
      calc(50% + (var(--content-max) / 2)) 0;
    mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);
  }
}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--c1);border-radius:2px}

/* ── Page entrance animation ── */
@keyframes pagein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:64px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(7,8,13,.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--br);transition:background .3s}
.nav-logo{font-family:var(--mono);font-size:12px;color:var(--c1);letter-spacing:.1em;cursor:pointer;transition:opacity .2s}
.nav-logo:hover{opacity:.7}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-family:var(--mono);font-size:11px;color:var(--mt2);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:color .2s;cursor:pointer}
.nav-links a:hover{color:var(--c1)}
.nav-back{display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--mt2);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:color .2s;background:none;border:none}
.nav-back:hover{color:var(--c1)}
.nav-back svg{transition:transform .2s}
.nav-back:hover svg{transform:translateX(-4px)}

/* ──────────────────────────────────────
   HOME PAGE
────────────────────────────────────── */
#page-home{padding-top:64px}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:80px 48px;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(46,156,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(46,156,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%)}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px)}
.orb1{width:500px;height:500px;background:radial-gradient(circle,rgba(46,156,255,.15),transparent 70%);top:-80px;right:-80px}
.orb2{width:350px;height:350px;background:radial-gradient(circle,rgba(167,139,250,.1),transparent 70%);bottom:60px;left:10%}
.hero-inner{max-width:var(--content-max);margin:0 auto;width:100%;position:relative;z-index:2;display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:center}
.h-tag{font-family:var(--mono);font-size:11px;color:var(--c2);letter-spacing:.15em;text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:12px;animation:fiu .8s ease .2s both}
.h-tag::before{content:'';width:28px;height:1px;background:var(--c2)}
.h-title{font-family:var(--syne);font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:10px;animation:fiu .9s ease .35s both}
.h-title .l1{display:block;color:var(--tx)}
.h-title .l2{display:block;background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h-title .l3{display:block;font-size:.55em;background:linear-gradient(135deg,var(--c4),#ff9de2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h-sub{font-family:var(--syne);font-size:clamp(14px,1.8vw,18px);color:var(--mt2);margin-bottom:36px;animation:fiu .8s ease .5s both}
.h-desc{font-size:15px;color:var(--mt2);line-height:1.8;max-width:520px;margin-bottom:44px;font-weight:300;animation:fiu .8s ease .6s both}
.h-cta{display:flex;gap:14px;animation:fiu .8s ease .7s both}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:4px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .25s;cursor:pointer;border:none}
.btn-p {
  background: transparent;
  color: #1DFFA8;                /* зелёный текст */
  border: 1px solid #FF1A1A;    /* красная рамка */
  box-shadow:
    0 0 8px #FF1A1A99,          /* внешнее свечение */
    inset 0 0 8px #FF1A1A22;    /* внутреннее свечение */
  text-shadow: 0 0 8px #1DFFA8; /* свечение текста */
}
.btn-p:hover {
  background: #FF1A1A15;
  border-color: #FF4444;
  box-shadow:
    0 0 18px #FF1A1Aaa,
    0 0 40px #FF1A1A44,
    inset 0 0 12px #FF1A1A33;
  text-shadow: 0 0 12px #1DFFA8, 0 0 24px #1DFFA866;
  transform: translateY(-2px);
}
.btn-g{background:transparent;color:var(--mt2);border:1px solid var(--br)}.btn-g:hover{border-color:var(--c1);color:var(--c1)}
.hero-stats{display:flex;flex-direction:column;gap:14px;animation:fir .9s ease .5s both}
.stat-card{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:18px 22px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.stat-card:hover{border-color:var(--brh);transform:translateY(-3px)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.sc1::before{background:linear-gradient(90deg,var(--c1),transparent)}.sc2::before{background:linear-gradient(90deg,var(--c2),transparent)}.sc3::before{background:linear-gradient(90deg,var(--c3),transparent)}.sc4::before{background:linear-gradient(90deg,var(--c4),transparent)}
.stat-n{font-family:var(--syne);font-size:34px;font-weight:800;line-height:1;margin-bottom:4px}
.sc1 .stat-n{color:var(--c1)}.sc2 .stat-n{color:var(--c2)}.sc3 .stat-n{color:var(--c3)}.sc4 .stat-n{color:var(--c4)}
.stat-l{font-family:var(--mono);font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:.1em}

/* CONTACT STRIP */
.cstrip{background:var(--s1);border-top:1px solid var(--br);border-bottom:1px solid var(--br);padding:18px 48px}
.cstrip-in{max-width:var(--content-max);margin:0 auto;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.ci{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--mt2);text-decoration:none;transition:color .2s}
.ci:hover{color:var(--c1)}
.ci-ico{width:26px;height:26px;border:1px solid var(--br);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px}

/* SECTION */
section{padding:80px 48px;max-width:var(--content-max);margin:0 auto}
.sec-hd{display:flex;align-items:baseline;gap:18px;margin-bottom:50px}
.sec-lbl{font-family:var(--mono);font-size:11px;color:var(--c1);letter-spacing:.15em;text-transform:uppercase}
.sec-ttl{font-family:var(--syne);font-size:clamp(24px,3.5vw,38px);font-weight:700;letter-spacing:-.02em}
.sec-line{flex:1;height:1px;background:var(--br)}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.sg{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:24px;transition:border-color .3s,transform .3s}
.sg:hover{border-color:var(--brh);transform:translateY(-3px)}
.sg-ttl{font-family:var(--mono);font-size:10px;color:var(--c1);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--br)}
.sb-wrap{margin-bottom:11px}
.sb-top{display:flex;justify-content:space-between;margin-bottom:5px}
.sb-name{font-size:13px;font-weight:500}
.sb-pct{font-family:var(--mono);font-size:10px;color:var(--mt2)}
.sb-bg{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.sb-fill{height:100%;border-radius:2px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1)}
.fb{background:linear-gradient(90deg,var(--c1),#6EC6FF)}.fg{background:linear-gradient(90deg,var(--c2),#7DFFCF)}.fo{background:linear-gradient(90deg,var(--c3),#FFB085)}.fp{background:linear-gradient(90deg,var(--c4),#D8B4FE)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:3px;letter-spacing:.05em}
.tb{background:rgba(46,156,255,.08);color:var(--c1);border:1px solid rgba(46,156,255,.15)}
.tg{background:rgba(29,255,168,.08);color:var(--c2);border:1px solid rgba(29,255,168,.15)}
.to{background:rgba(255,107,53,.08);color:var(--c3);border:1px solid rgba(255,107,53,.15)}
.tp{background:rgba(167,139,250,.08);color:var(--c4);border:1px solid rgba(167,139,250,.15)}
.tz{background:rgba(255,255,255,.04);color:var(--mt2);border:1px solid var(--br)}

/* EXPERIENCE */
.exp-tl{display:flex;flex-direction:column;position:relative}
.exp-tl::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--c1),rgba(46,156,255,.1))}
.exp-item{display:grid;grid-template-columns:40px 1fr;gap:22px;position:relative}
.exp-dot{width:10px;height:10px;border-radius:50%;background:var(--c1);border:2px solid var(--bg);box-shadow:0 0 0 3px rgba(46,156,255,.2);margin-top:26px;z-index:2;align-self:start;justify-self:center}
.exp-card{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:26px 30px;margin-bottom:24px;transition:border-color .3s}
.exp-card:hover{border-color:var(--brh)}
.exp-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;flex-wrap:wrap;gap:8px}
.exp-co{font-family:var(--syne);font-size:18px;font-weight:700}
.exp-per{font-family:var(--mono);font-size:10px;color:var(--mt);background:var(--s2);padding:3px 11px;border-radius:20px;border:1px solid var(--br)}
.exp-role{font-family:var(--mono);font-size:11px;color:var(--c1);letter-spacing:.08em;margin-bottom:18px}
.exp-ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.exp-ul li{position:relative;padding-left:20px;font-size:14px;color:var(--mt2);line-height:1.6;font-weight:300}
.exp-ul li::before{content:'▸';color:var(--c1);font-size:11px;position:absolute;left:0;top:3px}
.exp-ul li strong{color:var(--c2);font-weight:600}

/* ── PROJECT CARDS (home) ── */
.proj-grid{display:flex;flex-direction:column;gap:24px}
.pcard{background:var(--s1);border:1px solid var(--br);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .35s,transform .35s,box-shadow .35s;position:relative}
.pcard:hover{border-color:var(--brh);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.pcard-inner{display:grid;grid-template-columns:1fr 1fr}
.pcard-left{padding:36px;border-right:1px solid var(--br)}
.pcard-num{font-family:var(--mono);font-size:10px;color:var(--c1);letter-spacing:.15em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pcard-num::after{content:'';flex:1;height:1px;background:var(--br)}
.pcard-ttl{font-family:var(--syne);font-size:20px;font-weight:700;line-height:1.25;margin-bottom:10px;letter-spacing:-.01em}
.pcard-desc{font-size:14px;color:var(--mt2);line-height:1.75;margin-bottom:20px;font-weight:300}
.pcard-tools{display:flex;flex-wrap:wrap;gap:5px}
.pcard-arrow{position:absolute;top:28px;right:28px;width:36px;height:36px;border-radius:50%;border:1px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--mt);transition:all .3s}
.pcard:hover .pcard-arrow{border-color:var(--c1);color:var(--c1);transform:rotate(45deg)}
.pcard-right{padding:28px;display:flex;flex-direction:column;justify-content:center}
.kpi-lbl{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.kpi-item{text-align:center}
.kpi-n{font-family:var(--syne);font-size:24px;font-weight:800;line-height:1;margin-bottom:4px}
.kpi-d{font-family:var(--mono);font-size:9px;color:var(--mt);text-transform:uppercase;letter-spacing:.07em;line-height:1.4;white-space:nowrap}
/* ai section */
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.ai-c{background:var(--s2);border:1px solid var(--br);border-radius:10px;padding:16px 18px;transition:border-color .3s,transform .3s;cursor:pointer}
.ai-c:hover{border-color:rgba(167,139,250,.3);transform:translateY(-3px)}
.ai-ct{font-family:var(--mono);font-size:10px;color:var(--c4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.ai-cd{font-size:13px;color:var(--mt2);line-height:1.6;font-weight:300}

/* EDU */
.edu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.edu-c{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:22px;transition:border-color .3s,transform .3s}
.edu-c:hover{border-color:var(--brh);transform:translateY(-3px)}
.edu-y{font-family:var(--mono);font-size:11px;color:var(--c1);letter-spacing:.1em;margin-bottom:8px}
.edu-d{font-family:var(--syne);font-size:15px;font-weight:600;margin-bottom:5px}
.edu-u{font-size:13px;color:var(--mt2);line-height:1.5;font-weight:300}
.lang-grid{display:flex;gap:14px;flex-wrap:wrap}
.lang-c{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:22px 36px;text-align:center;flex:1;min-width:170px;transition:border-color .3s}
.lang-c:hover{border-color:var(--brh)}
.lang-f{font-size:26px;margin-bottom:8px}
.lang-n{font-family:var(--syne);font-size:16px;font-weight:600;margin-bottom:4px}
.lang-l{font-family:var(--mono);font-size:11px;color:var(--c1);letter-spacing:.1em}

footer{background:var(--s1);border-top:1px solid var(--br);padding:24px 48px}
.foot-in{max-width:var(--content-max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-c{font-family:var(--mono);font-size:11px;color:var(--mt);letter-spacing:.08em}
.foot-links{display:flex;gap:22px}
.foot-links a{font-family:var(--mono);font-size:11px;color:var(--mt);text-decoration:none;letter-spacing:.08em;transition:color .2s}
.foot-links a:hover{color:var(--c1)}

/* ──────────────────────────────────────
   PROJECT DETAIL PAGE
────────────────────────────────────── */
#page-project{padding-top:64px}
.proj-hero{min-height:50vh;display:flex;align-items:flex-end;padding:60px 48px 48px;position:relative;overflow:hidden;border-bottom:1px solid var(--br)}
.proj-hero-bg{position:absolute;inset:0;opacity:.15}
.proj-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px}
.proj-hero-in{max-width:var(--content-max);margin:0 auto;width:100%;position:relative;z-index:2}
.proj-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;opacity:.7}
.proj-title{font-family:var(--syne);font-size:clamp(28px,5vw,60px);font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:14px}
.proj-subtitle{font-family:var(--mono);font-size:13px;color:var(--mt2);letter-spacing:.06em;margin-bottom:24px}
.proj-tool-strip{display:flex;flex-wrap:wrap;gap:7px}

/* ANIMATION STAGE */
.anim-stage{width:100%;background:var(--s1);border-bottom:1px solid var(--br);position:relative;overflow:hidden}
.anim-stage canvas{display:block;width:100%;height:100%}
.anim-stage-label{position:absolute;top:20px;left:28px;font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.anim-stage-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c2);animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* PROJ DETAIL BODY */
.proj-body{max-width:var(--content-max);margin:0 auto;padding:60px 48px;display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start}
.proj-desc h3{font-family:var(--syne);font-size:22px;font-weight:700;margin-bottom:16px;margin-top:36px;letter-spacing:-.01em}
.proj-desc h3:first-child{margin-top:0}
.proj-desc p{font-size:15px;color:var(--mt2);line-height:1.85;margin-bottom:14px;font-weight:300}
.proj-desc ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.proj-desc ul li{position:relative;padding-left:20px;font-size:14px;color:var(--mt2);line-height:1.6;font-weight:300}
.proj-desc ul li::before{content:'▸';
  font-size:11px;
  position:absolute;
  left:0;
  top:3px;
  color: var(--accent, var(--c1));}
.proj-desc ul li strong{font-weight:600}
.proj-sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-card{background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:22px}
.sidebar-lbl{font-family:var(--mono);font-size:10px;color:var(--mt);letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--br)}
.kpi-big{display:flex;flex-direction:column;gap:6px}
.kpi-b-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--s2);border-radius:8px;text-align:left}
.kpi-b-n{font-family:var(--syne);font-size:22px;font-weight:800;line-height:1;min-width:52px;text-align:right;flex-shrink:0}
.kpi-b-d{font-family:var(--mono);font-size:9px;color:var(--mt);text-transform:uppercase;letter-spacing:.07em;line-height:1;white-space:nowrap;flex:1}
.tool-list{display:flex;flex-wrap:wrap;gap:6px}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}
@keyframes fiu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fir{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}

/* ══════════════════════════════════════════════
   МЕДИА-СЕКЦИЯ ПРОЕКТА
   Блок с фото / видео / GIF внутри страницы проекта.
   Появляется между описанием и боковой панелью.
══════════════════════════════════════════════ */

/* Обёртка всей медиа-секции */
.media-section {
  margin-top: 40px;
}

/* Заголовок секции — «Медиа / Скриншоты» */
.media-section-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--br);
}

/* Сетка медиа-элементов: 2 колонки, на мобиле — 1 */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Отдельный медиа-элемент (фото, видео, GIF) */
.media-item {
  border-radius: 10px;
  overflow: hidden;
  background: var(--s2);
  border: 1px solid var(--br);
  transition: border-color .3s, transform .3s;
}
.media-item:hover {
  transform: translateY(-3px);
}

/* Подпись под медиа (необязательно) */
.media-caption {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  padding: 8px 12px;
  letter-spacing: .05em;
}

/* ── ПЛЕЙСХОЛДЕР ──────────────────────────────
   Показывается пока нет реального фото/видео.
   Замените его на <img>, <video> или <iframe>.
   Цвет рамки берётся из CSS-переменной --ph-color,
   которую ставим через style= на каждом элементе.
─────────────────────────────────────────────── */
.media-placeholder {
  /* Пунктирная рамка в цвет проекта */
  border: 2px dashed var(--ph-color, var(--br));
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  cursor: default;
  transition: background .2s;
}
.media-placeholder:hover {
  background: rgba(255,255,255,.02);
}

/* Иконка типа (📷 / 🎬 / 🎞 / ▶) */
.ph-icon {
  font-size: 32px;
  opacity: .5;
}

/* Тип медиа (ФОТО / ВИДЕО / GIF / YOUTUBE) */
.ph-type {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ph-color, var(--mt));
  background: rgba(255,255,255,.04);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Инструкция — как заменить на реальный контент */
.ph-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  text-align: center;
  line-height: 1.7;
  max-width: 260px;
}

/* Код-подсказка — отображает тег для вставки */
.ph-code {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ph-color, var(--c1));
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 6px 12px;
  letter-spacing: .03em;
  opacity: .7;
}

/* Реальные медиа-элементы (применяйте к img/video/iframe) */
.media-item img,
.media-item video,
.media-item iframe {
  width: 100%;
  display: block;
  border-radius: 10px;
  /* Высоту задавайте атрибутом height= или через style= */
}

/* Картинки кликабельны — показываем лупу */
.media-item img {
  cursor: zoom-in;
  transition: opacity .2s;
}
.media-item img:hover { opacity: .88; }

/* ══════════════════════════════════════════════
   ЛАЙТБОКС — увеличение картинки по клику
   Открывается поверх всего контента.
   Закрыть: клик на фон / кнопка ✕ / Escape
══════════════════════════════════════════════ */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: pagein .2s ease both;
}
#lightbox.open { display: flex; }

/* Само увеличенное изображение */
#lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 0 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  cursor: default;          /* клик на картинку не закрывает */
}

/* Подпись под картинкой */
#lightbox-caption {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mt2);
  letter-spacing: .08em;
  background: rgba(0,0,0,.65);
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid var(--br);
  pointer-events: none;
  white-space: nowrap;
}

/* Кнопка закрытия ✕ */
#lightbox-close {
  position: fixed;
  top: 20px; right: 26px;
  font-size: 26px;
  line-height: 1;
  color: var(--mt2);
  cursor: pointer;
  transition: color .2s, transform .2s;
  z-index: 9001;
}
#lightbox-close:hover {
  color: var(--tx);
  transform: scale(1.15);
}

/* На мобиле — одна колонка */
@media(max-width:700px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   HAMBURGER BUTTON (мобильное меню)
   Показывается только на мобильных (<900px)
══════════════════════════════════════════════ */
.hamburger{
  /* Скрыт по умолчанию на десктопе */
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;
  cursor:pointer;padding:4px;
  z-index:210; /* поверх шапки */
}
/* Три полоски гамбургера */
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--mt2);border-radius:2px;
  transition:transform .3s, opacity .3s, background .2s;
}
.hamburger:hover span{ background:var(--c1); }

/* Анимация гамбургера → крестик при открытом меню */
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   МОБИЛЬНЫЙ ВЫДВИЖНОЙ ОВЕРЛЕЙ
   Появляется при нажатии гамбургера
══════════════════════════════════════════════ */
.mobile-menu{
  display:none;              /* скрыт по умолчанию */
  position:fixed;
  inset:0;
  top:64px;                  /* начинается под навбаром */
  background:rgba(7,8,13,.97);
  backdrop-filter:blur(24px);
  z-index:190;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  animation:pagein .3s ease both;
}
/* Класс .open делает меню видимым */
.mobile-menu.open{ display:flex; }

/* Ссылки внутри мобильного меню */
.mobile-menu a{
  font-family:var(--mono);
  font-size:18px;
  color:var(--mt2);
  text-decoration:none;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .2s;
  cursor:pointer;
}
.mobile-menu a:hover{ color:var(--c1); }

/* Кнопка "Контакт" в мобильном меню */
.mobile-menu .btn{
  font-size:13px;
  padding:14px 36px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — основные брейкпоинты
══════════════════════════════════════════════ */
@media(max-width:900px){
  /* Навбар: убираем десктопные ссылки, показываем гамбургер */
  nav{ padding:0 20px; }
  .nav-links{ display:none; }       /* скрываем десктоп-навигацию */
  .hamburger{ display:flex; }       /* показываем кнопку-гамбургер */

  /* Герой: одна колонка, адаптивные отступы */
  .hero{ padding:80px 20px 48px; }
  .hero-inner{
    display:block;                   /* убираем двухколоночную сетку */
  }
  .hero-stats{
    display:grid;
    grid-template-columns:1fr 1fr;  /* 2×2 сетка статистических карточек */
    gap:12px;
    margin-top:32px;
  }

  /* Карточки проектов: стек вместо сетки */
  .pcard-inner{ display:block; }
  .pcard-left{ border-right:none; border-bottom:1px solid var(--br); }

  /* Детальная страница проекта */
  .proj-body{
    display:block;                   /* одна колонка вместо двух */
    padding:40px 20px;
    gap:40px;
  }
  .proj-hero{ padding:48px 20px 36px; }

  /* Общие секции */
  section{ padding:56px 20px; }
  .cstrip{ padding:18px 20px; }
  footer{ padding:20px 20px; }

  /* Секция навыков: одна колонка */
  .skills-grid{ grid-template-columns:1fr; }

  /* Полоска контактов: вертикальный стек */
  .cstrip-in{ flex-direction:column; gap:14px; align-items:flex-start; }

  /* Шапка секции: скрываем длинную линию */
  .sec-line{ display:none; }

  /* KPI метрики на мобиле */
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════════════ */
.contact-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.contact-info{padding-top:8px}
.contact-links{display:flex;flex-direction:column;gap:12px}
.contact-link-item{display:flex;align-items:center;gap:14px;background:var(--s1);border:1px solid var(--br);border-radius:12px;padding:16px 20px;text-decoration:none;transition:border-color .3s,transform .3s;color:var(--tx)}
.contact-link-item:hover{border-color:var(--brh);transform:translateY(-2px)}
.cli-ico{width:36px;height:36px;border:1px solid var(--br);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cli-label{font-family:var(--mono);font-size:10px;color:var(--c1);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.cli-val{font-size:13px;color:var(--mt2);font-weight:300}

/* Form card */
.contact-form-card{background:var(--s1);border:1px solid var(--br);border-radius:16px;overflow:hidden}
.cf-header{background:var(--s2);border-bottom:1px solid var(--br);padding:12px 18px;display:flex;align-items:center;gap:6px}
.cf-dot{width:10px;height:10px;border-radius:50%}
.cf-body{padding:28px}
.cf-field{margin-bottom:18px}
.cf-label{display:block;font-family:var(--mono);font-size:10px;color:var(--c2);letter-spacing:.1em;margin-bottom:8px}
.cf-input{width:100%;background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:11px 14px;color:var(--tx);font-family:var(--body);font-size:14px;font-weight:300;outline:none;transition:border-color .2s,box-shadow .2s}
.cf-input:focus{border-color:var(--c1);box-shadow:0 0 0 3px rgba(46,156,255,.1)}
.cf-input::placeholder{color:var(--mt)}
.cf-select{cursor:pointer;appearance:none;-webkit-appearance:none}
.cf-select-wrap{position:relative}
.cf-select-wrap::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mt2);pointer-events:none;font-size:12px}
.cf-textarea{resize:vertical;min-height:100px;font-family:var(--body);line-height:1.6}
.cf-submit{width:100%;justify-content:center;padding:14px;font-size:12px;margin-top:4px}
.cf-note{font-family:var(--mono);font-size:10px;color:var(--mt);text-align:center;margin-top:12px;letter-spacing:.04em}
.cf-success{padding:48px 28px;text-align:center}
.cf-success-icon{width:56px;height:56px;border-radius:50%;background:rgba(29,255,168,.1);border:1px solid rgba(29,255,168,.3);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--c2);margin:0 auto 16px}
.cf-success-title{font-family:var(--syne);font-size:20px;font-weight:700;margin-bottom:8px}
.cf-success-sub{font-size:14px;color:var(--mt2);line-height:1.7;font-weight:300}

@media(max-width:900px){
  .contact-wrap{grid-template-columns:1fr}
}

/* Дополнительный брейкпоинт для очень маленьких экранов */
@media(max-width:480px){
  /* Заголовок секции: вертикально */
  .sec-hd{ flex-direction:column; gap:4px; margin-bottom:32px; }

  /* Статы героя: одна колонка */
  .hero-stats{ grid-template-columns:1fr; }

  /* Языки: стек */
  .lang-grid{ flex-direction:column; }

  /* Анимационная сцена: меньше высота */
  #anim-stage{ height:280px !important; }

  /* Проект детальная: компактнее */
  .proj-hero{ padding:36px 16px 28px; }
  section{ padding:40px 16px; }

  /* KPI сетки */
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  

  /* Форма связи */
  .cf-body{ padding:18px; }
  .cf-submit{ font-size:11px; }

  /* Карточки проектов */
  .pcard-left{ padding:22px 18px; }
  .pcard-right{ padding:18px; }
  .kpi-grid{ gap:8px; }
  .kpi-n{ font-size:18px; }

  /* Образование: компактнее */
  .edu-grid{ grid-template-columns:1fr; }
  .lang-c{ padding:16px 20px; }

  /* Навбар на маленьких */
  .nav-logo{ font-size:11px; }
}
/* ══════════════════════════════════════════════
   3D MODEL VIEWER SECTION
══════════════════════════════════════════════ */
.model-viewer-section {
  padding: 0;
  border: none;
}

.v3d-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
  width: 100%;
}

/* ── Sidebar — model list ── */
.v3d-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3d-sidebar-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--br);
}
.v3d-thumb {
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, background .25s, transform .2s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v3d-thumb:hover  { border-color: var(--brh); transform: translateX(3px); }
.v3d-thumb.active { border-color: var(--c1); background: rgba(46,156,255,.06); }
.v3d-thumb-num  { font-family: var(--mono); font-size: 9px; color: var(--mt); letter-spacing: .1em; }
.v3d-thumb-name { font-size: 12px; font-weight: 500; color: var(--tx); line-height: 1.3; }

.v3d-hint {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  line-height: 1.9;
  letter-spacing: .04em;
}
.v3d-hint span { color: var(--mt2); }

/* ── Viewer canvas wrap ── */
.v3d-wrap {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 16px;
  overflow: hidden;
  min-height: 460px;
}

.v3d-canvas {
  display: block;
  width: 100%;
  height: 460px;
}

/* ── Loading spinner ── */
.v3d-spin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  background: var(--s1);
}
.v3d-spin-ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--c1);
  border-radius: 50%;
  animation: v3d-spin .8s linear infinite;
}
@keyframes v3d-spin { to { transform: rotate(360deg); } }
.v3d-spin-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  letter-spacing: .1em;
}

/* ── Bottom bar ── */
.v3d-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(7,8,13,.9), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.v3d-left, .v3d-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v3d-prev, .v3d-next, .v3d-reset {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--br);
  border-radius: 6px;
  color: var(--mt2);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.v3d-prev:hover, .v3d-next:hover, .v3d-reset:hover {
  border-color: var(--c1);
  color: var(--c1);
}
.v3d-model-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx);
  letter-spacing: .05em;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3d-counter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
}
.v3d-status {
  font-family: var(--mono);
  font-size: 10px;
  color: #FF6B35;
}

/* ── Responsive ── */
@media(max-width:900px) {
  .model-viewer-section { padding: 48px 20px; }
  .v3d-layout { grid-template-columns: 1fr; }
  .v3d-sidebar { flex-direction: row; flex-wrap: wrap; }
  .v3d-sidebar-label { width: 100%; }
  .v3d-thumb { flex: 1; min-width: 120px; flex-direction: row; align-items: center; gap: 8px; }
  .v3d-hint { display: none; }
}
@media(max-width:480px) {
  .v3d-canvas { height: 320px; }
  .v3d-wrap   { min-height: 320px; }
}

/* ── 3D Viewer placeholder tip (when no models added yet) ── */
.v3d-placeholder-tip {
  background: var(--s2);
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3d-tip-icon { font-size: 24px; text-align: center; margin-bottom: 2px; }
.v3d-tip-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c1);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}
.v3d-tip-step {
  font-size: 11px;
  color: var(--mt2);
  line-height: 1.5;
  font-weight: 300;
}
.v3d-tip-step code, .v3d-tip-step em {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c2);
  font-style: normal;
}
.v3d-tip-code {
  background: var(--bg);
  border: 1px solid var(--br);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--c2);
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  margin: 2px 0;
}

/* ══════════════════════════════════════════════
   MODELS MODAL — единое окно выбора 3D-моделей
══════════════════════════════════════════════ */
#models-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pagein .2s ease both;
}
#models-modal.open { display: flex; }

.models-modal-inner {
  width: 100%;
  max-width: 1100px;
  max-height: 88vh;
  background: var(--bg);
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: auto;
  box-shadow: 0 0 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
}

.models-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 22px;
  line-height: 1;
  color: var(--mt2);
  cursor: pointer;
  transition: color .2s, transform .2s;
  z-index: 2;
  background: none;
  border: none;
  padding: 4px;
}
.models-modal-close:hover { color: var(--tx); transform: scale(1.15); }

.models-modal-inner .v3d-layout { grid-template-columns: 220px 1fr; }
.models-modal-inner .v3d-sidebar { max-height: 500px; overflow-y: auto; padding-right: 4px; }
.models-modal-inner .v3d-wrap { min-height: 500px; }
.models-modal-inner .v3d-canvas { height: 500px; }

.models-modal-project-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 14px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--br);
}
.models-modal-project-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }

@media(max-width:900px) {
  .models-modal-inner { padding: 44px 16px 16px; max-height: 92vh; }
  .models-modal-inner .v3d-layout { grid-template-columns: 1fr; }
  .models-modal-inner .v3d-sidebar { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .models-modal-inner .v3d-wrap { min-height: 340px; }
  .models-modal-inner .v3d-canvas { height: 340px; }
}

/* ── Compact model picker grid ──────────────────────────
   Заменяет старую вёрстку, где под каждый проект рисовался
   отдельный полноразмерный 3D-вьюер (страница растягивалась
   пропорционально числу проектов с моделями). Теперь тут —
   лёгкие кликабельные карточки без живого WebGL-рендера,
   а сам просмотр открывается в одном общем #models-modal. */
#models-gallery-grid.mg-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.mg-pick-card {
  background: var(--s1);
  border: 1px solid var(--br);
  border-top: 2px solid var(--c1);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--body);
  color: var(--tx);
}
.mg-pick-card:hover {
  border-color: var(--brh);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.mg-pick-icon { font-size: 22px; opacity: .85; }
.mg-pick-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
}
.mg-pick-title { font-family: var(--syne); font-size: 15px; font-weight: 700; line-height: 1.3; }
.mg-pick-count { font-family: var(--mono); font-size: 11px; color: var(--mt2); }
.mg-pick-cta { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--c1); }

/* ══════════════════════════════════════════════
   MODELS GALLERY — главная страница
══════════════════════════════════════════════ */
.models-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Empty state */
.mg-empty {
  grid-column: 1 / -1;
  background: var(--s1);
  border: 1px dashed var(--br);
  border-radius: 16px;
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mg-empty-icon  { font-size: 40px; opacity: .5; }
.mg-empty-title { font-family: var(--syne); font-size: 18px; font-weight: 700; }
.mg-empty-sub   { font-size: 14px; color: var(--mt2); font-weight: 300; line-height: 1.7; }
.mg-empty-sub code { font-family: var(--mono); font-size: 12px; color: var(--c2); }

/* Card */
.mg-card {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.mg-card:hover {
  border-color: var(--brh);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

/* Card header */
.mg-card-header {
  padding: 18px 20px 14px;
  border-top: 2px solid var(--c1);
  border-bottom: 1px solid var(--br);
}
.mg-proj-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: .8;
}
.mg-proj-title {
  font-family: var(--syne);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Model tabs */
.mg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mg-tab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--br);
  background: transparent;
  color: var(--mt2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.mg-tab:hover  { border-color: var(--c1); color: var(--c1); }
.mg-tab.active { border-color: var(--c1); color: var(--c1); background: rgba(46,156,255,.08); }

/* Viewer area */
.mg-viewer-wrap {
  position: relative;
  height: 520px;
  overflow: hidden;
}
/* canvas size задаётся через JS — не переопределяем здесь */
/* canvas size managed by Three.js renderer.setSize() */
.mg-canvas {
  display: block;
  cursor: grab;
}
.mg-canvas:active { cursor: grabbing; }

/* Spinner */
.mg-spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s1);
  z-index: 5;
}
.mg-spin-ring {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--c1);
  border-radius: 50%;
  animation: v3d-spin .8s linear infinite;
}
.mg-spin-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  letter-spacing: .08em;
  margin-top: 8px;
}

/* Bottom bar */
.mg-viewer-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 14px;
  background: linear-gradient(to top, rgba(7,8,13,.85), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mg-model-name {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx);
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.mg-controls-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  letter-spacing: .04em;
  flex-shrink: 0;
}

@media(max-width:900px) {
  /* models-gallery-grid is already single-column */
  .mg-viewer-wrap { height: 380px; }
}
@media(max-width:480px) {
  .mg-viewer-wrap { height: 300px; }
}

/* ── Captcha & form error ── */
.cf-captcha-wrap .cf-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-captcha-q {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--c2);
  letter-spacing: .05em;
  background: rgba(29,255,168,.07);
  border: 1px solid rgba(29,255,168,.2);
  border-radius: 6px;
  padding: 3px 12px;
}
.cf-captcha-input {
  max-width: 120px;
  -moz-appearance: textfield;
}
.cf-captcha-input::-webkit-outer-spin-button,
.cf-captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.cf-form-error {
  font-family: var(--mono);
  font-size: 11px;
  color: #FF6B35;
  background: rgba(255,107,53,.08);
  border: 1px solid rgba(255,107,53,.25);
  border-radius: 6px;
  padding: 9px 14px;
  margin-bottom: 12px;
  letter-spacing: .03em;
}
.cf-success-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════
   MODELS GALLERY — полноширинный вьюер
═══════════════════════════════════════════════ */

/* Секция занимает ту же ширину что и остальные */
#models-3d {
  padding: 80px 48px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.models-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Карточка — на всю ширину */
.mg-card {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.mg-card:hover {
  border-color: var(--brh);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}

/* Заголовок карточки */
.mg-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-top: 2px solid var(--c1);
  border-bottom: 1px solid var(--br);
  flex-wrap: wrap;
}
.mg-card-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
  flex-shrink: 0;
}
.mg-card-title {
  font-family: var(--syne);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.mg-model-single-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mt2);
  margin-left: auto;
}

/* Вкладки моделей */
.mg-model-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.mg-model-tab {
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--br);
  background: transparent;
  color: var(--mt2);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mg-model-tab:hover  { border-color: var(--c1); color: var(--c1); }
.mg-model-tab.active { border-color: var(--c1); color: var(--c1); background: rgba(46,156,255,.08); }
.mg-model-tab-num    { opacity: .5; }

/* Вьюер — занимает всю ширину, высота как у hero-секций */
.mg-viewer-outer {
  position: relative;
  width: 100%;
  height: 560px;      /* высота как у anim-stage */
}
.mg-viewer-outer .v3d-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.mg-viewer-outer .v3d-spin {
  background: var(--s1);
}

@media(max-width:900px) {
  #models-3d { padding: 56px 20px; }
  .mg-viewer-outer { height: 400px; }
  .mg-card-header { gap: 10px; padding: 14px 16px; }
}
@media(max-width:480px) {
  .mg-viewer-outer { height: 300px; }
}

/* ══════════════════════════════════════════════
   RESULTS IN NUMBERS — раздел результатов
══════════════════════════════════════════════ */
.results-strip {
  background: transparent;
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
  padding: 72px 48px;
}
.results-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Заголовок секции */
.results-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 40px;
}
.results-label {
  font-family: var(--syne);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx);
}
.results-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mt);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Сетка карточек — 3 колонки */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

/* Карточка результата */
.res-card {
  background: var(--bg);
  border: 1px solid var(--br);
  border-radius: 14px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.res-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.025), transparent);
  pointer-events: none;
}
.res-card:hover {
  border-color: var(--brh);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Большое число / показатель */
.res-icon {
  font-family: var(--syne);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  /* Свечение текста */
  filter: drop-shadow(0 0 12px currentColor);
}

.res-title {
  font-family: var(--syne);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.3;
}

.res-desc {
  font-size: 13px;
  color: var(--mt2);
  line-height: 1.7;
  font-weight: 300;
  flex: 1;
}

.res-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  border: 1px solid;
  border-radius: 20px;
  padding: 3px 10px;
  align-self: flex-start;
  margin-top: 4px;
  opacity: .85;
}

/* Подвал секции */
.results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--br);
  flex-wrap: wrap;
  gap: 12px;
}
.rf-total {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mt2);
  letter-spacing: .06em;
}
.rf-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c1);
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
  text-transform: uppercase;
}
.rf-link:hover { opacity: .7; }

/* Адаптивность */
@media(max-width:900px) {
  .results-strip  { padding: 56px 20px; }
  .results-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:540px) {
  .results-grid   { grid-template-columns: 1fr; }
  .results-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Download Resume button ── */
.btn-resume {
  background: transparent;
  color: var(--c5);
  border: 1px solid var(--c5);
  box-shadow: 0 0 8px rgba(255,214,10,.2), inset 0 0 8px rgba(255,214,10,.06);
  text-decoration: none;
}
.btn-resume:hover {
  background: rgba(255,214,10,.08);
  box-shadow: 0 0 18px rgba(255,214,10,.5), inset 0 0 12px rgba(255,214,10,.12);
  transform: translateY(-2px);
  color: var(--c5);
}

/* ══════════════════════════════════════════════
   HERO PHOTO
══════════════════════════════════════════════ */

/* Right side: photo stacked above stats */
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: fir .9s ease .5s both;
}

/* Photo wrapper — ring effect */
.hero-photo-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

/* Rotating accent ring */
.hero-photo-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(var(--c1), var(--c2), var(--c4), var(--c1)) border-box;
  animation: spin-ring 6s linear infinite;
}
@keyframes spin-ring {
  to { transform: rotate(360deg); }
}

/* Photo circle */
.hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--s2);
  border: 2px solid var(--br);
  z-index: 1;
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder (shown until real photo added) */
.hero-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
}
.hpp-icon {
  font-size: 36px;
  opacity: .4;
}
.hpp-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Stats — keep column layout under photo */
.hero-right .hero-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 200px;
  animation: none; /* parent handles animation */
}

/* Hero layout with photo */
.hero-inner {
  grid-template-columns: 1fr 220px;
  gap: 48px;
}

/* Responsive */
@media(max-width:900px) {
  .hero-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
    gap: 24px;
  }
  .hero-right .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: auto;
    flex: 1;
    min-width: 240px;
  }
  .hero-inner {
    display: block !important;
  }
}
@media(max-width:480px) {
  .hero-photo-wrap { width: 120px; height: 120px; }
  .hero-right .hero-stats { grid-template-columns: 1fr; }
}

/* ── How to add real photo ──
   1. Put photo.jpg in site/ root
   2. In index.html replace:
        <div class="hero-photo-placeholder">...</div>
      with:
        <img src="photo.jpg" alt="Фото" class="hero-photo-img">
   Recommended: square crop, min 400×400px
*/

/* ══════════════════════════════════════════════
   О СЕБЕ
══════════════════════════════════════════════ */
.about-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 48px 60px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px 48px;
  align-items: start;
}
.about-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.about-tag-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--c1));
}
.about-tag-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c1);
  letter-spacing: .15em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.about-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-lead {
  font-family: var(--syne);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  color: var(--tx);
  line-height: 1.65;
  letter-spacing: -.01em;
}
.about-lead strong { color: var(--c2); }
.about-text {
  font-size: 15px;
  color: var(--mt2);
  line-height: 1.9;
  font-weight: 300;
  max-width: 680px;
}
.about-text strong { color: var(--c1); font-weight: 600; }
.about-keywords {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.ak-item {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ak-c, var(--c1));
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .7;
  transition: opacity .2s;
}
.ak-item:hover { opacity: 1; }

@media(max-width:900px) {
  .about-wrap {
    grid-template-columns: 1fr;
    padding: 0 20px 48px;
    gap: 20px;
  }
  .about-tag   { flex-direction: row; }
  .about-tag-line { width: 32px; height: 1px;
    background: linear-gradient(to right, transparent, var(--c1)); }
  .about-tag-text { writing-mode: initial; transform: none; }
  .about-keywords { flex-direction: row; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════
   CAREER TIMELINE
══════════════════════════════════════════════ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-node {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 20px;
  min-width: 0;
}

/* Spine: dot + vertical line */
.tl-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot-color, var(--c1));
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 3px rgba(46,156,255,.2);
  flex-shrink: 0;
  margin-top: 18px;
  position: relative;
  z-index: 2;
}
.tl-dot--active {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 4px rgba(46,156,255,.25), 0 0 16px rgba(46,156,255,.4);
}
.tl-dot-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--c1);
  animation: tl-pulse 2s ease-out infinite;
  opacity: 0;
}
@keyframes tl-pulse {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.tl-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, var(--c1), rgba(46,156,255,.1));
  min-height: 40px;
}
.tl-line--end {
  background: linear-gradient(to bottom, var(--c2), transparent);
}

/* Card */
.tl-card {
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
  transition: border-color .3s;
  min-width: 0;
}
.tl-card:hover { border-color: var(--brh); }
.tl-card--active {
  border-color: rgba(46,156,255,.2);
  box-shadow: 0 0 0 1px rgba(46,156,255,.08);
}
.tl-card--edu {
  padding: 16px 22px;
  background: transparent;
  border-style: dashed;
}

.tl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.tl-company {
  font-family: var(--syne);
  font-size: 20px;
  font-weight: 700;
  color: var(--tx);
}
.tl-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.tl-badge--now {
  color: var(--c2);
  background: rgba(29,255,168,.1);
  border: 1px solid rgba(29,255,168,.25);
}
.tl-role {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.tl-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tl-period, .tl-location, .tl-duration {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mt);
  letter-spacing: .04em;
}
.tl-sep { color: var(--mt); font-size: 10px; }

/* Achievement pills */
.tl-achievements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--s2);
  border-radius: 10px;
  border: 1px solid var(--br);
}
.tl-ach {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.tl-ach-val {
  font-family: var(--syne);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.tl-ach-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* List */
.tl-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.tl-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--mt2);
  line-height: 1.65;
  font-weight: 300;
}
.tl-list li::before {
  content: '▸';
  color: var(--c1);
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 4px;
}
.tl-list li strong { color: var(--c2); font-weight: 600; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.tl-node--edu .tl-spine { padding-top: 0; }
.tl-node--edu .tl-dot { margin-top: 12px; }

@media(max-width:900px) {
  .tl-achievements { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:480px) {
  .tl-node { grid-template-columns: 32px 1fr; gap: 0 12px; }
  .tl-card { padding: 18px 16px; }
  .tl-company { font-size: 17px; }
  .tl-achievements { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   БЫЛО → СТАЛО
══════════════════════════════════════════════ */
.bs-block {
  margin-top: 28px;
  border: 1px solid var(--br);
  border-radius: 12px;
  overflow: hidden;
  /* Расширяем до полной ширины контейнера (sidebar 340px + gap 60px = 400px) */
  width: calc(100% + 400px);
}
.bs-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mt);
  padding: 10px 16px;
  background: var(--s2);
  border-bottom: 1px solid var(--br);
}
.bs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  border-bottom: 1px solid var(--br);
}
.bs-row:last-child { border-bottom: none; }
.bs-before, .bs-after {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 300;
}
.bs-before { color: var(--mt2); background: rgba(255,107,53,.04); }
.bs-after  { color: var(--tx);  background: rgba(29,255,168,.04); }
.bs-after strong { color: var(--c2); font-weight: 600; }
.bs-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.bs-before .bs-label { color: var(--c3); }
.bs-after  .bs-label { color: var(--c2); }
.bs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 18px;
  color: var(--mt);
  background: var(--s2);
  border-left: 1px solid var(--br);
  border-right: 1px solid var(--br);
}

@media(max-width:900px) {
  .bs-block { width: 100%; }
}
@media(max-width:600px) {
  .bs-row {
    grid-template-columns: 1fr;
  }
  .bs-arrow {
    padding: 6px 16px;
    border-left: none; border-right: none;
    border-top: 1px solid var(--br);
    border-bottom: 1px solid var(--br);
    background: var(--s2);
  }
}

/* ── CERTIFICATES CTA (index.html) ───────────────────────────── */
.certs-cta {
  display: block;
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .35s, transform .35s, box-shadow .35s;
  cursor: pointer;
}
.certs-cta:hover {
  border-color: rgba(167,139,250,.35);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.certs-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
}
.certs-cta-left {
  padding: 36px;
  border-right: 1px solid var(--br);
}
.certs-cta-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c4);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.certs-cta-label::before { content:''; width:24px; height:1px; background:var(--c4); }
.certs-cta-title {
  font-family: var(--syne);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tx);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.certs-cta-desc {
  font-size: 13px;
  color: var(--mt2);
  line-height: 1.75;
  font-weight: 300;
  max-width: 560px;
  margin-bottom: 20px;
}
.certs-cta-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.certs-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--bc, var(--c1));
  background: transparent;
  border: 1px solid var(--bc, var(--c1));
  border-radius: 5px;
  padding: 3px 10px;
  opacity: .75;
  transition: opacity .2s;
}
.certs-cta:hover .certs-badge { opacity: 1; }
.certs-cta-right {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 160px;
}
.certs-cta-stat {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.certs-cta-stat-n {
  font-family: var(--syne);
  font-size: 32px;
  font-weight: 800;
  color: var(--c4);
  line-height: 1;
}
.certs-cta-stat-l {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mt);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.certs-cta-arrow {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c4);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 10px;
  transition: background .2s, border-color .2s;
}
.certs-cta:hover .certs-cta-arrow {
  background: rgba(167,139,250,.07);
  border-color: rgba(167,139,250,.4);
}

@media(max-width:768px) {
  .certs-cta-inner { grid-template-columns: 1fr; }
  .certs-cta-left { border-right: none; border-bottom: 1px solid var(--br); padding: 24px 20px; }
  .certs-cta-right { flex-direction: row; flex-wrap: wrap; padding: 20px; gap: 16px; justify-content: flex-start; }
  .certs-cta-stat { align-items: flex-start; }
}

/* ── RESUME SECTION CTA (index.html) ─────────────────────────── */
.resume-cta-wrap {
  position: relative;
}
.resume-cta {
  position: relative;
  background: linear-gradient(135deg, var(--s1) 0%, #111827 50%, var(--s1) 100%);
  border: 1px solid rgba(255,214,10,.2);
  border-radius: 20px;
  padding: 48px;
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.resume-cta:hover {
  border-color: rgba(255,214,10,.45);
  box-shadow: 0 0 60px rgba(255,214,10,.07), 0 24px 80px rgba(0,0,0,.5);
}
.resume-cta-glow {
  position: absolute;
  top: -80px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,10,.12) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity .4s;
}
.resume-cta:hover .resume-cta-glow { opacity: 1.4; }

/* top row */
.resume-cta-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  margin-bottom: 32px;
}
.resume-cta-eyebrow {
  font-family: var(--mono); font-size: 11px;
  color: var(--mt); letter-spacing: .1em;
  display: flex; align-items: center; gap: 8px;
}
.resume-cta-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399; flex-shrink: 0;
  animation: blink 1.5s infinite;
}
.resume-fmt-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--c5);
  background: rgba(255,214,10,.06);
  border: 1px solid rgba(255,214,10,.2);
  border-radius: 4px; padding: 3px 9px;
}
.resume-cta-formats {
  display: flex; gap: 6px;
}

/* body grid */
.resume-cta-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.resume-cta-title {
  font-family: var(--syne);
  font-size: 36px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--tx); margin-bottom: 14px;
}
.resume-cta-title span {
  background: linear-gradient(90deg, var(--c5), #ffaa00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.resume-cta-desc {
  font-size: 14px; color: var(--mt2);
  line-height: 1.75; font-weight: 300;
  max-width: 500px; margin-bottom: 22px;
}
.resume-cta-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.resume-cta-chips span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .07em; color: var(--mt2);
  background: var(--s2); border: 1px solid var(--br);
  border-radius: 5px; padding: 3px 10px;
  transition: color .2s, border-color .2s;
}
.resume-cta:hover .resume-cta-chips span {
  color: var(--tx); border-color: rgba(255,214,10,.2);
}

/* right side */
.resume-cta-right {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  min-width: 200px;
}
.resume-main-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 12px;
  background: var(--c5); color: #000;
  font-family: var(--mono); font-size: 12px;
  font-weight: 600; letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(255,214,10,.3);
  transition: all .25s; white-space: nowrap;
  border: 1px solid var(--c5);
}
.resume-main-btn:hover {
  background: #ffd600;
  box-shadow: 0 0 40px rgba(255,214,10,.55);
  transform: translateY(-3px) scale(1.02);
  color: #000;
}
.resume-dl-row {
  display: flex; align-items: center; gap: 10px;
}
.resume-dl-link {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px;
  color: var(--mt); letter-spacing: .07em;
  text-decoration: none;
  transition: color .2s;
}
.resume-dl-link:hover { color: var(--c5); }
.resume-dl-sep { color: var(--mt); font-size: 12px; }

/* nav link */
.resume-cta-wrap .resume-nav-link {
  display: none;
}

/* responsive */
@media(max-width:900px) {
  .resume-cta { padding: 32px 28px; }
  .resume-cta-body { grid-template-columns: 1fr; gap: 28px; }
  .resume-cta-right { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .resume-cta-title { font-size: 28px; }
}
@media(max-width:600px) {
  .resume-cta { padding: 24px 20px; }
  .resume-cta-title { font-size: 24px; }
  .resume-cta-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .resume-main-btn { width: 100%; justify-content: center; }
}