/* Tochka.fi — static site design system
   Font: Rubik | Accent: #2C5AFC | DARK theme (matches live) */

/* Rubik — self-hosted (Latin + Cyrillic subsets) */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nErXyi0A.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --accent:#2C5AFC;
  --accent-dk:#1E47E8;
  --accent-lt:#6B8AFF;
  --ink:#D7D9DC;
  --bg:#101010;
  --bg-alt:#1B1B1D;
  --muted:#9AA0A6;
  --soft:#C0C4CA;
  --line:#2A2A2D;
  --dark:#1F1F1F;
  --dark-2:#262626;
  --surface:#232326;
  --banner-bg:#2C5AFC;
  --banner-fg:#FFFFFF;
  --maxw:1180px;
  --rubik:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--rubik);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-lt);text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;font-weight:700}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.mt{margin-top:24px}.mt-lg{margin-top:48px}
.lead{color:var(--muted);font-size:1.08rem;max-width:720px}

/* ---------- NO WAR scrolling banner ---------- */
.banner{background:var(--banner-bg);color:var(--banner-fg);overflow:hidden;white-space:nowrap;font-weight:400;font-size:clamp(0.85rem,1.3vw,1.15rem);letter-spacing:.5px}
.banner .track{display:inline-block;padding:8px 0;animation:scroll 32s linear infinite;will-change:transform}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.banner .track{animation:none}}

/* ---------- header ---------- */
header.site{background:var(--dark);color:#fff;position:sticky;top:0;z-index:50}
header.site .bar{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:#fff;letter-spacing:.2px}
.brand img{height:34px;width:auto;border-radius:0}
.brand span{color:var(--accent-lt)}
nav.main{display:flex;align-items:center;gap:20px;margin-left:auto}
nav.main a{color:#ECECEC;font-weight:500;font-size:.92rem;padding:4px 2px;text-transform:uppercase;letter-spacing:.6px}
nav.main a:hover,nav.main a.active{color:#fff;text-decoration:none}
nav.main a.active{box-shadow:inset 0 -2px 0 var(--accent-lt)}
.lang{display:flex;gap:2px;font-size:.78rem;font-weight:700;margin-left:14px;border-left:1px solid #2c3239;padding-left:16px}
.lang a{color:#8b939b;padding:4px 7px;border-radius:4px}
.lang a.active{color:#fff;background:var(--accent)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;margin-left:auto;line-height:1}

/* ---------- hero ---------- */
.hero{position:relative;background:#000;color:#fff}
.hero .pic{width:100%;height:62vh;min-height:380px;object-fit:cover;opacity:.62}
.hero .overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.15) 100%)}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:700;max-width:880px}
.hero .sub{margin-top:14px;max-width:640px;color:#e6e8eb;font-size:1.08rem}
.hero .cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:4px;font-weight:600;font-size:.97rem;transition:background .2s,transform .1s}
.btn:hover{background:var(--accent-dk);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--accent)}.btn.accent:hover{background:var(--accent-dk)}
.btn.light{background:#fff;color:#101010}.btn.light:hover{background:#e6e6e6;color:#000}
.btn.outline{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff}
.btn.outline:hover{background:#fff;color:#101010}

/* ---------- sections ---------- */
section{padding:52px 0}
section.alt{background:var(--bg-alt)}
.section-head{margin-bottom:26px;max-width:760px}
.section-head .kicker{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;font-size:.78rem}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:6px}
.section-head p{color:var(--muted);margin-top:10px}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.cols-4,.cols-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.cols-3,.cols-4,.cols-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4,.cols-5{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.card .img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-alt)}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.08rem;margin-bottom:6px}
.card .meta{color:var(--accent);font-weight:600;font-size:.85rem;margin-bottom:6px}
.card p{color:var(--soft);font-size:.95rem;flex:1}

/* ---------- event cards ---------- */
.event{display:grid;grid-template-columns:1fr 320px;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:20px;background:var(--surface)}
.event .img{width:100%;height:100%;min-height:220px;object-fit:cover;grid-column:2;grid-row:1}
.event .body{padding:24px;grid-column:1;grid-row:1}
.event .when{color:var(--accent);font-weight:700;font-size:.92rem;letter-spacing:.3px}
.event h3{font-size:1.3rem;margin:6px 0 10px}
.event p{color:var(--soft);margin-bottom:14px}
.event .promo{display:inline-block;background:#FFF6E5;border:1px solid #F4D58D;color:#7a5a00;padding:3px 10px;border-radius:4px;font-size:.8rem;font-weight:600;margin-right:8px}
@media(max-width:720px){.event{grid-template-columns:1fr}.event .img{grid-column:1;min-height:200px;aspect-ratio:16/9}.event .body{grid-column:1}}

/* ---------- about: 2-column mission grid ---------- */
.mission2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.mission2 .pt{display:flex;gap:14px;align-items:flex-start}
.mission2 .pt .num{flex:0 0 30px;height:30px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;margin-top:2px}
.mission2 .pt p{color:var(--soft);font-size:1rem}
@media(max-width:700px){.mission2{grid-template-columns:1fr}}

/* ---------- social icon row ---------- */
.socialrow{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.socialrow a{color:#cfd4d9;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.socialrow a:hover{color:#fff;border-color:var(--accent)}
.socialrow svg{width:20px;height:20px;fill:currentColor}

/* ---------- about images pair ---------- */
.imgpair{display:grid;grid-template-columns:0.8fr 1.4fr;gap:18px}
.imgpair img{width:100%;border-radius:8px}
@media(max-width:700px){.imgpair{grid-template-columns:1fr}}

/* ---------- mission points (home 5-across) ---------- */
.num-list{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.num-list .item{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px 18px;position:relative}
.num-list .item .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;margin-bottom:12px}
.num-list .item p{color:var(--soft);font-size:.95rem}
@media(max-width:900px){.num-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.num-list{grid-template-columns:1fr}}

/* ---------- feature/icon list (what we do) ---------- */
.feat .item{display:flex;gap:16px;padding:8px 0}
.feat .item h3{color:var(--ink);font-size:1.1rem;margin-bottom:4px}
.feat .item p{color:var(--soft)}
.feat .ic{flex:0 0 44px;height:44px;border-radius:8px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:1.2rem}

/* ---------- media tile ---------- */
.tile{position:relative;border-radius:8px;overflow:hidden;background:var(--dark);color:#fff}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.78;transition:opacity .2s,transform .3s}
.tile:hover img{opacity:.6;transform:scale(1.03)}
.tile .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%)}
.tile .cap h3{font-size:1.15rem;margin-bottom:4px}
.tile .cap p{font-size:.9rem;color:#dfe3e7}

/* ---------- video card (guests episodes) ---------- */
.vstack{display:grid;gap:28px}
.yt{position:relative;padding-bottom:56.25%;height:0;margin:16px 0}
.yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:8px}

/* ---------- modal popups ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;z-index:100;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;max-width:520px;width:100%;padding:36px 32px 32px;position:relative;animation:modalIn .25s ease}
@keyframes modalIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:1.4rem;margin-bottom:14px}
.modal p{color:var(--soft);margin-bottom:18px;line-height:1.7}
.modal .close{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--muted);font-size:1.8rem;cursor:pointer;line-height:1}
.modal .close:hover{color:#fff}
.modal .status{display:inline-block;background:rgba(44,90,252,.15);color:var(--accent-lt);border:1px solid rgba(44,90,252,.3);padding:5px 14px;border-radius:4px;font-size:.85rem;font-weight:600;margin-bottom:16px}

/* ---------- hero carousel (Герои проекта) ---------- */
.hero-carousel{overflow:hidden;cursor:grab;padding-bottom:4px}
.hero-carousel.grabbing{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hero-track{display:flex;gap:16px;transition:transform .35s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.hero-track.no-trans{transition:none}
.hero-track .slide{flex:0 0 320px}
.hero-track .slide img{width:100%;border-radius:8px;display:block;pointer-events:none;-webkit-user-drag:none}
@media(max-width:560px){.hero-track .slide{flex:0 0 260px}}

/* carousel dots */
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carousel-dots .dot{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:background .2s}
.carousel-dots .dot.active{background:var(--accent)}
.carousel-dots .dot:hover{background:var(--muted)}
.vcard{position:relative;display:block;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.vcard .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92;display:block;transition:opacity .2s,transform .3s}
.vcard:hover .thumb{opacity:.7;transform:scale(1.02)}
.vcard .play{position:absolute;top:18px;left:18px;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.vcard .play::after{content:"";border-left:20px solid #1F1F1F;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.vcard .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));color:#fff}
.vcard .cap h3{font-size:1.2rem;line-height:1.25}
.vcard .cap .sub{color:#dfe3e7;font-size:.95rem;margin-top:4px}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:#cfd4d9;padding:52px 0 30px}
footer.site .grid-f{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer.site h4{color:#fff;font-size:1rem;margin-bottom:12px}
footer.site a{color:#cfd4d9}
footer.site a:hover{color:#fff}
footer.site .social{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
footer.site .bottom{border-top:1px solid #2a2f34;margin-top:36px;padding-top:20px;font-size:.83rem;color:#8b939b;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:720px){footer.site .grid-f{grid-template-columns:1fr}}

/* ---------- misc helpers ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.split img{border-radius:8px;width:100%}
.note{font-size:.85rem;color:var(--muted);font-style:italic}
hr.sep{border:0;border-top:1px solid var(--line);margin:40px 0}
.tag{display:inline-block;background:var(--bg-alt);border:1px solid var(--line);color:var(--muted);padding:3px 10px;border-radius:20px;font-size:.8rem;margin:0 4px 4px 0}

/* mobile nav open state */
@media(max-width:860px){
  nav.main{position:fixed;left:0;right:0;top:64px;background:var(--dark-2);flex-direction:column;align-items:flex-start;gap:6px;padding:14px 24px 22px;transform:translateY(-160%);transition:transform .28s ease;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  nav.main a{width:100%;padding:8px 0;font-size:1rem}
  nav.main.open{transform:translateY(0)}
  .nav-toggle{display:block}
  .lang{margin:6px 0 0;padding-left:0;border-left:0;border-top:1px solid #2c3239;padding-top:10px;width:100%}
}