/* ============================================================
   PORTFOLIO — design tokens
   Concept: a "viewport HUD" — the readouts, coordinates and
   file-path labels of a 3D app / IDE, applied as structure.
   ============================================================ */

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

:root{
  --bg:        #1c1f24;
  --bg-elev:   #252830;
  --bg-elev-2: #2d3038;
  --line:      #3a3e46;
  --line-soft: #202124;
  --text:      #e8e6e1;
  --text-dim:  #a3a5ab;
  --text-mute: #6c6e74;

  --amber:     #e8823c;   /* 3D / Blender viewport accent */
  --amber-dim: #8a5330;
  --mint:      #5fd9b0;   /* code / web / AI accent */
  --mint-dim:  #35745e;

  --f-display: 'Manrope', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --nav-w: 220px;
  --pad: clamp(20px, 4vw, 56px);
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  animation:page-fade-in .5s ease both;
}

@keyframes page-fade-in{
  from{opacity:0;}
  to{opacity:1;}
}

/* ---------- Pulse icon (pure CSS, no external CDN dependency) ---------- */
.pulse-icon{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.pulse-icon::before,
.pulse-icon::after{
  content:'';
  position:absolute;
  border-radius:50%;
}
.pulse-icon::before{
  content:'😀';
  width:46%; height:46%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  line-height:1;
  animation:pulse-core 2s ease-in-out infinite;
}
.pulse-icon::after{
  width:80%; height:80%;
  border:3px solid var(--mint);
  animation:pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-core{
  0%,100%{transform:scale(0.7);}
  50%{transform:scale(1.1);}
}
@keyframes pulse-ring{
  0%,100%{transform:scale(0.85); opacity:0.6;}
  50%{transform:scale(1.15); opacity:0.15;}
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(232,130,60,0.14) 1.2px, transparent 1.2px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px);
  background-size:26px 26px, auto;
}

a{color:inherit; text-decoration:none;}

::selection{background:var(--amber); color:#0d0e10;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- HUD label helper (mono, tracked-out, dim) ---------- */
.hud{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--text-mute);
  text-transform:uppercase;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--nav-w);
  border-right:1px solid var(--line);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:50;
  background:var(--bg);
}

.nav-top .brand{
  font-family:var(--f-display);
  font-weight:600;
  font-size:18px;
  display:block;
  margin-bottom:4px;
}

.nav-top .brand-path{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--amber);
  display:block;
  margin-bottom:36px;
}

.nav-links{list-style:none; display:flex; flex-direction:column; gap:2px;}

.nav-links a{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--text-dim);
  padding:9px 10px;
  border-radius:4px;
  transition:color .15s ease, background .15s ease, padding-left .18s ease;
}

/* HUD-style selection bar — grows in from the left on hover/active,
   pure CSS, zero extra weight */
.nav-links a::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--amber);
  transform:scaleY(0);
  transition:transform .2s ease;
}

.nav-links a:hover::before,
.nav-links a.active::before{
  transform:scaleY(1);
}

.nav-links a:hover,
.nav-links a.active{
  padding-left:16px;
}

.nav-links a .n{color:var(--text-mute); font-size:11px;}

.nav-links a:hover, .nav-links a.active{
  color:var(--text);
  background:var(--bg-elev);
}

.nav-links a.active .n{color:var(--amber);}

.nav-bottom .status{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--text-mute);
  line-height:1.7;
}

.nav-bottom .live-clock{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--text-mute);
  margin-top:4px;
}

.nav-bottom .live-clock b{color:var(--amber); font-weight:400;}

.nav-bottom .dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--mint);
  margin-right:7px;
  box-shadow:0 0 6px var(--mint);
  animation:dot-breathe 2.4s ease-in-out infinite;
}

@keyframes dot-breathe{
  0%,100%{ box-shadow:0 0 6px var(--mint); transform:scale(1); }
  50%{ box-shadow:0 0 16px var(--mint), 0 0 26px var(--mint); transform:scale(1.4); }
}

.nav-flag{
  width:13px; height:9px;
  margin-left:5px;
  vertical-align:middle;
  border-radius:1px;
  border:1px solid var(--line);
  opacity:.9;
}

.lang-switch{
  display:flex;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.lang-switch img{
  width:18px; height:12px;
  border-radius:2px;
  border:1px solid var(--line);
  opacity:.65;
  transition:opacity .15s ease;
  cursor:pointer;
}

.lang-switch img:hover{opacity:1;}

.flag-text{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  color:var(--amber);
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1px 4px;
  line-height:1.4;
  white-space:nowrap;
}

/* mobile header — persistent bar, always visible */
.mobile-header{
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  z-index:60;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:rgba(13,14,16,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

.mobile-header .mh-brand{
  font-family:var(--f-display);
  font-weight:600;
  font-size:16px;
}

.mobile-header .mh-brand .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--mint); margin-right:7px; box-shadow:0 0 6px var(--mint);
  animation:dot-breathe 2.4s ease-in-out infinite;
}

.mh-flags{
  display:flex;
  gap:6px;
  margin-right:10px;
}

.mh-flags img{
  width:20px; height:14px;
  border-radius:2px;
  border:1px solid var(--line);
  opacity:.85;
}

.nav-toggle{
  background:var(--bg-elev);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--f-mono);
  font-size:12px;
  padding:8px 12px;
  border-radius:4px;
}

/* scroll progress — thin HUD line under the mobile header / at page top */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:var(--mint);
  box-shadow:0 0 6px var(--mint);
  z-index:70;
  transition:width .1s linear;
}

@media (max-width: 860px){
  .nav{
    transform:translateX(-100%);
    transition:transform .25s ease;
    width:min(80vw, 300px);
    box-shadow:0 0 40px rgba(0,0,0,.5);
    top:56px;
    height:calc(100vh - 56px);
  }
  .nav.open{transform:translateX(0);}
  .mobile-header{display:flex;}
  .main{padding-top:56px;}
  .scroll-progress{top:56px;}
}

@media (min-width: 861px){
  .scroll-progress{top:0;}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.main{
  margin-left:var(--nav-w);
  min-height:100vh;
}

@media (max-width:860px){
  .main{margin-left:0;}
}

section{
  padding:88px var(--pad);
  border-bottom:1px solid var(--line-soft);
}

section:last-of-type{border-bottom:none;}

.section-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:40px;
}

.section-head .idx{
  color:var(--amber);
  font-family:var(--f-mono);
  font-size:13px;
  display:inline-block;
  animation:idx-glow 2.4s ease-in-out infinite;
  margin-left:6px;
}

/* breathing glow on section index markers — pure CSS,
   same lightweight approach as the pulse-icon above */
@keyframes idx-glow{
  0%,100%{ text-shadow:0 0 0 rgba(232,130,60,0); transform:scale(1); opacity:.6; }
  50%{ text-shadow:0 0 12px rgba(232,130,60,1), 0 0 22px rgba(232,130,60,.7); transform:scale(1.3); opacity:1; }
}

h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-0.01em;}

h2{font-size:clamp(24px,3vw,32px);}

.lede{color:var(--text-dim); max-width:60ch; font-size:16px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:92vh;
  display:flex;
  align-items:center;
  padding:0 var(--pad);
  position:relative;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
  width:100%;
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero{padding-top:20px; min-height:auto; padding-bottom:60px;}
}

.hero-eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--mint);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}

.hero-eyebrow::before{content:'';width:24px;height:1px;background:var(--mint);}

.hero h1{
  font-size:clamp(38px, 5.4vw, 64px);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin-bottom:22px;
}

.hero h1 .accent{color:var(--amber); font-style:normal;}

.hero p.lede{font-size:18px; margin-bottom:32px;}

.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.btn{
  font-family:var(--f-mono);
  font-size:13px;
  padding:12px 20px;
  border-radius:12px;
  border:1px solid var(--line);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}

.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.95);}
/* живые кнопки: блик пробегает по главной кнопке */
.btn.primary{position:relative; overflow:hidden;}
.btn.primary::after{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); animation:btn-shine 4.5s ease-in-out infinite;}
@keyframes btn-shine{0%,70%{left:-60%}100%{left:130%}}
/* кнопка «Изготовление сайтов»: подпрыгивает */
.btn.sites{background:rgba(95,217,176,.12); border-color:var(--mint); color:var(--mint);
  flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none;
  animation:btn-jump 3.2s ease-in-out infinite;}
.btn.sites small{font-size:10.5px; color:var(--text-dim); letter-spacing:.2px;}
.btn.sites:active{animation:none; transform:scale(.95);}
@keyframes btn-jump{0%,62%,100%{transform:translateY(0)} 70%{transform:translateY(-9px)} 76%{transform:translateY(0)} 81%{transform:translateY(-4px)} 86%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.btn.sites,.btn.primary::after{animation:none}}

.btn.primary{background:var(--amber); color:#181005; border-color:var(--amber); font-weight:500;}
.btn.primary:hover{background:#f2924f;}

.btn.ghost{color:var(--text-dim);}
.btn.ghost:hover{color:var(--text); border-color:var(--text-mute);}

.hero-hud{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--text-mute);
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
}

.hero-hud span b{color:var(--text-dim); font-weight:400;}

.adaptive-badge{display:inline-flex; align-items:center; gap:6px;}
.adaptive-badge svg{color:var(--amber); flex:none;}
.adaptive-badge b{color:var(--text-dim); font-weight:400; margin-left:2px;}

/* canvas viewport */
.viewport{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg-elev);
  overflow:hidden;
}

.viewport canvas{width:100%; height:100%; display:block;}
.viewport video{width:100%; height:100%; display:block; object-fit:cover;}

.viewport .corner{
  position:absolute;
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--text-dim);
  padding:10px;
}

.viewport .tl{top:0; left:0;}
.viewport .br{bottom:0; right:0; text-align:right;}
.viewport .br b{color:var(--mint);}

.card-thumb video{width:100%; height:100%; object-fit:cover; display:block;}

/* ============================================================
   CARDS — project grid
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}

.card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-elev);
  overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
  display:flex;
  flex-direction:column;
}

.card:hover{border-color:var(--text-mute); transform:translateY(-2px);}

.card-thumb{
  aspect-ratio:16/10;
  position:relative;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/18px 18px,
    var(--bg-elev-2);
  border-bottom:1px solid var(--line);
}

.card-thumb canvas{width:100%; height:100%; display:block;}

.card-thumb .tag{
  position:absolute; top:10px; left:10px;
  font-family:var(--f-mono); font-size:10px;
  padding:4px 8px; border-radius:3px;
  background:rgba(13,14,16,.75);
  border:1px solid var(--line);
  color:var(--amber);
  text-transform:uppercase; letter-spacing:.05em;
}

.card-thumb .tag.mint{color:var(--mint);}

.img-num{
  position:absolute; top:8px; right:8px; z-index:5;
  min-width:26px; height:26px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#f5c542; color:#141414;
  font-family:var(--f-mono); font-size:13px; font-weight:700;
  box-shadow:0 0 0 2px rgba(0,0,0,.6);
}

.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}

.card-body .path{font-family:var(--f-mono); font-size:11px; color:var(--text-mute);}

.card-body h3{font-size:17px; font-weight:600;}

.card-body p{font-size:14px; color:var(--text-dim);}

.card-meta{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--text-mute);
  padding-top:10px;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px;}

@media (max-width:860px){.about-grid{grid-template-columns:1fr;}}

.stack-list{list-style:none; display:flex; flex-direction:column; gap:0;}

.stack-list li{
  display:flex; justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:13px;
}

.stack-list li span:first-child{color:var(--text);}
.stack-list li span:last-child{color:var(--text-mute);}

.contact-list{display:flex; flex-direction:column; gap:12px; margin-top:24px;}

.contact-list a{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--f-mono);
  font-size:17px;
  transition:border-color .15s ease, background .15s ease;
}

.contact-list a .c-icon{
  flex:none;
  width:20px; height:20px;
  color:var(--mint);
  display:flex; align-items:center; justify-content:center;
}

.contact-list a .c-icon svg{width:100%; height:100%;}

.contact-list a .c-body{flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px;}

.contact-list a:hover{border-color:var(--mint); background:var(--bg-elev);}

.contact-list a .arrow{color:var(--mint);}

/* ============================================================
   BLOG
   ============================================================ */
.post-list{display:flex; flex-direction:column;}

.post-row{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:24px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .15s ease;
}

.post-row:hover{padding-left:8px;}

.post-row .date{font-family:var(--f-mono); font-size:12px; color:var(--text-mute);}

.post-row h3{font-size:17px; font-weight:500;}

.post-row .read{font-family:var(--f-mono); font-size:12px; color:var(--mint); white-space:nowrap;}

@media (max-width:600px){
  .post-row{grid-template-columns:1fr; gap:6px;}
}

/* ============================================================
   ARTICLE (blog post body)
   ============================================================ */
.article-body{
  max-width:680px;
  font-size:16px;
  line-height:1.75;
  color:var(--text-dim);
}

.article-body h1{
  font-size:clamp(22px,4vw,30px);
  color:var(--text);
  line-height:1.3;
  margin-bottom:8px;
}

.article-meta{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--text-mute);
  margin-bottom:28px;
}

.article-body p{margin:0 0 20px;}

.article-thumb{
  float:right;
  width:78px;
  margin:2px 0 8px 10px;
  cursor:pointer;
}

.article-thumb.left{
  float:left;
  margin:2px 12px 8px 0;
}

.article-thumb img{
  width:100%; display:block;
  border-radius:8px;
  border:1px solid var(--line);
}

.article-thumb .play-badge{
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

.article-thumb .play-badge::after{
  content:'▶';
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(13,14,16,0.7);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
}

.article-thumb-wrap{position:relative;}

.article-thumb .hint{
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--text-mute);
  text-align:center;
  margin-top:5px;
}

.article-clear{clear:both;}

.lightbox{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.92);
  z-index:999;
  align-items:center; justify-content:center;
  padding:20px;
}

.lightbox.open{display:flex;}

.lightbox img,
.lightbox video{
  max-width:100%; max-height:90vh;
  border-radius:8px;
  border:1px solid var(--line);
}

.lightbox .close{
  position:absolute; top:18px; right:18px;
  width:40px; height:40px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--text);
  cursor:pointer;
}

.spec-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px 24px;
  max-width:340px;
  width:100%;
}
.spec-card h3{font-size:19px; color:var(--text); margin-bottom:4px;}
.spec-card .country{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12px; color:var(--text-dim);
  margin-bottom:18px;
}
.spec-card .country img{width:22px; height:15px; border-radius:2px;}
.spec-card .row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:13px;
}
.spec-card .row:first-of-type{border-top:none;}
.spec-card .row .k{color:var(--text-mute);}
.spec-card .row .v{color:var(--text); font-weight:600; text-align:right;}
.spec-card .note{
  margin-top:14px; font-size:12px; color:var(--text-mute); line-height:1.5;
}

.featured-video{
  display:block;
  position:relative;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/8;
  transition:border-color .18s ease;
}

.featured-video:hover{border-color:var(--mint);}

.featured-video img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(15%) contrast(1.05);
}

.featured-video::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,14,16,0.15) 0%, rgba(13,14,16,0.75) 100%);
  pointer-events:none;
}

.featured-video .fv-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 32px;
  pointer-events:none;
}

.featured-video .fv-tag{
  font-family:var(--f-mono); font-size:11px;
  color:var(--mint); text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:8px;
}

.featured-video h3{font-size:clamp(20px,2.6vw,28px); color:var(--text); margin-bottom:6px;}

.featured-video p{color:var(--text-dim); font-size:14px; max-width:52ch;}

.featured-video .fv-play{
  position:absolute; top:24px; right:28px;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--mint);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(95,217,176,0.15);
  animation:play-breathe 2.4s ease-in-out infinite;
}

@keyframes play-breathe{
  0%,100%{ box-shadow:0 0 0 8px rgba(95,217,176,0.15); }
  50%{ box-shadow:0 0 0 14px rgba(95,217,176,0.35); }
}

.featured-video .fv-play::after{
  content:'';
  border-style:solid;
  border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #0d0e10;
  margin-left:3px;
}

.seq-num{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--amber);
  display:block;
  margin-bottom:6px;
}

/* ============================================================
   CASE / VIDEO SHOWCASE
   ============================================================ */
.case-block{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-elev);
  padding:32px;
  margin-top:8px;
}

.case-block p{color:var(--text-dim); font-size:15px; margin-bottom:14px; max-width:70ch;}

.case-block p:last-of-type{margin-bottom:0;}

.case-block .signature{
  color:var(--amber);
  font-family:var(--f-mono);
  font-size:13px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

/* horizontal scroll gallery — swipe left/right through a row of photos */
.h-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin-top:22px;
  padding-bottom:14px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

.h-scroll::-webkit-scrollbar{height:6px;}
.h-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.h-scroll::-webkit-scrollbar-track{background:transparent;}

.h-scroll-item{
  flex:0 0 auto;
  width:min(100%);
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-elev);
}

.h-scroll-item img,
.h-scroll-item video{
  width:100%;
  display:block;
  object-fit:contain;
  object-position:right center;
  aspect-ratio:3/2;
}

.h-scroll-item .cap{
  padding:12px 14px;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--text-dim);
  border-top:1px solid var(--line-soft);
}

.h-scroll-item .spec{
  padding:10px 14px 14px;
  font-family:var(--f-mono);
  font-size:20px;
  font-weight:700;
  color:var(--text);
  line-height:1.5;
  border-top:1px solid var(--line-soft);
}
.h-scroll-item .spec small{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--text-mute);
  margin-top:6px;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
  margin-top:22px;
}

.video-card{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-elev-2);
  display:block;
  transition:border-color .18s ease, transform .18s ease;
}

.video-card:hover{border-color:var(--mint); transform:translateY(-2px);}

.video-card .frame{
  aspect-ratio:16/9;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/18px 18px,
    var(--bg-elev-2);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

.video-card .frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(10%) contrast(1.05);
}

.video-card .frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,14,16,0) 40%, rgba(13,14,16,0.55) 100%);
  pointer-events:none;
}

.video-card .play{
  position:relative;
  z-index:1;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--mint);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(95,217,176,0.12);
  animation:play-breathe 2.4s ease-in-out infinite;
}

.video-card .play::after{
  content:'';
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #0d0e10;
  margin-left:4px;
}

.video-card .cap{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  font-family:var(--f-mono); font-size:11px; color:var(--text-mute);
  border-top:1px solid var(--line);
}

.video-card .cap span:first-child{color:var(--text-dim);}
.video-card .cap .arrow{color:var(--mint);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:40px var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--text-mute);
  flex-wrap:wrap; gap:12px;
}

footer a:hover{color:var(--text);}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}

/* nav svg icons (e.g. YouTube icon) — brand red fill */
.nav-links svg, .nav-links svg *{fill:#ff0000 !important;}

/* мобильные: убираем пустоту сверху на внутренних страницах */
@media (max-width:900px){
  .page-top{padding-top:20px !important;}
  .hero.page-top{min-height:0 !important; padding-bottom:8px !important;}
  .hero.page-top + section{padding-top:32px;}
}