/* ════════════════════════════════════════════════════════════════════════
   DoberInvest — Библиотека компонентов (PRD §3.4). База: doberinvest-v8.html.
   Каждый блок — самостоятельный компонент с понятными классами (паттерн под
   GeneratePress, PRD §8.2). Все цвета/типографика — через токены tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── RESET / БАЗА ──────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--txt);
  font-family:var(--font-body); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
ul { list-style:none; }

/* Доступность (PRD 3.8): видимый фокус для клавиатуры */
:focus-visible { outline:2px solid var(--teal-l); outline-offset:3px; border-radius:4px; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--teal-d); }
::selection { background:var(--teal); color:var(--bg); }

/* Утилита: визуально скрыто, доступно скринридерам */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── NAV ───────────────────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--page-px);
  background:rgba(10,10,10,0.78); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.logo-wrap { display:flex; align-items:center; gap:14px; }
.logo-wrap .logo-mark { height:40px; width:auto; }
.logo-text {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; line-height:1.1;
}
.logo-text .by {
  display:block; font-size:9px; font-weight:500; color:var(--txt-3);
  letter-spacing:1.5px; margin-top:2px;
}
.logo-text em { color:var(--teal); font-style:normal; }

.nav-center { display:none; align-items:center; gap:0; }
.nav-link {
  display:flex; flex-direction:column; padding:0 20px;
  position:relative; transition:opacity .2s;
}
.nav-link:hover { opacity:.6; }
.nav-link .slash { font-family:var(--font-mono); font-size:10px; color:var(--teal); letter-spacing:.5px; margin-bottom:4px; }
.nav-link .label { font-family:var(--font-display); font-size:14px; font-weight:500; letter-spacing:.5px; color:var(--txt); }
/* nav-accent — мягкий акцент лейбла (легаси, оставлен для совместимости) */
.nav-link.nav-accent .label { color:var(--teal); }
.nav-link.nav-accent.is-current .label { color:var(--teal-l); }

.nav-right { display:flex; align-items:center; gap:12px; }
.coin-pill-nav {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid var(--teal); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--teal); letter-spacing:.5px;
}
.coin-pill-nav::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 8px var(--teal);
}
.tg-pill-nav {
  display:flex; align-items:center; justify-content:center;
  gap:8px; height:42px; padding:0 18px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; transition:all .2s;
}
.tg-pill-nav:hover { border-color:var(--teal); color:var(--teal); }
.tg-pill-nav svg { width:16px; height:16px; }

/* Приватная пилюля «Дневник» — инжектится js/api.js только под сессией */
.journal-pill-nav {
  display:flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid rgba(229,72,77,.45); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--code-red); letter-spacing:.5px; text-decoration:none;
  background:rgba(229,72,77,.06); transition:border-color .2s, background .2s, transform .2s;
}
.journal-pill-nav:hover { border-color:var(--code-red); background:rgba(229,72,77,.12); transform:translateY(-1px); }
@media (max-width:640px){ .journal-pill-nav .jp-label { display:none; } .journal-pill-nav { padding:8px 12px; } }

/* Акцентные HUB-ссылки шапки: «Экосистема» и «Обучение» — первые два пункта
   центрального nav-ряда. Не отдельные кнопки: интегрированы в ряд как обычные
   nav-link, но выделены teal-цветом лейбла + иконкой. Флагманский вход «в наш
   мир», визуальный якорь центра. Ховер/актив — тот же teal-underline. */
.nav-hub {
  display:flex; flex-direction:column; align-items:center; padding:0 16px;
  position:relative; transition:opacity .2s;
}
.nav-hub .nav-hub-ico { width:14px; height:14px; flex:none; color:var(--teal); margin-bottom:3px; }
.nav-hub .label {
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.5px; color:var(--teal);
}
.nav-hub:hover { opacity:1; }

.menu-toggle {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border:1px solid var(--line-2);
  border-radius:50%; padding:11px; transition:all .2s;
}
.menu-toggle:hover { border-color:var(--teal); }
.menu-toggle span { display:block; height:1.5px; background:var(--txt); transition:all .3s; }
.menu-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display:none; position:fixed; inset:0; background:var(--bg);
  z-index:99; padding:120px var(--page-px) 32px;
  flex-direction:column; overflow-y:auto;
}
.mobile-nav.open { display:flex; }
.mobile-nav-link { display:flex; align-items:baseline; gap:14px; padding:20px 0; border-bottom:1px solid var(--line); }
.mobile-nav-link .slash { font-family:var(--font-mono); font-size:13px; color:var(--teal); }
.mobile-nav-link .label { font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:1px; text-transform:uppercase; line-height:1; }

@media (min-width:1100px){
  .nav-center { display:flex; }
  .menu-toggle { display:none; }
  .mobile-nav { display:none !important; }
}

/* auth-aware шапка: аватар + имя вместо кнопки «Вход» */
.nav-ava { width:24px; height:24px; border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; margin-right:7px; }
.nav-ava-i { display:inline-grid; place-items:center; background:var(--teal); color:#001; font-family:var(--font-mono); font-weight:700; font-size:12px; }
.tg-pill-nav.is-user .nav-uname { vertical-align:middle; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100svh;
  padding:120px var(--page-px) 80px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.hero-orb-1 { width:600px; height:600px; background:rgba(30,162,177,.18); top:-200px; right:-150px; animation:orb1 20s ease-in-out infinite; }
.hero-orb-2 { width:500px; height:500px; background:rgba(30,162,177,.10); bottom:-200px; left:-100px; animation:orb2 18s ease-in-out infinite; }
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-60px,40px) scale(1.1);} }
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,-30px) scale(.95);} }

.hero-inner { position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; }
.hero-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:48px; }
.hero-meta-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--teal); letter-spacing:1px; text-transform:uppercase; }
.hero-meta-tag::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.hero-meta-divider { width:1px; height:14px; background:var(--line-2); }
.hero-meta-text { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:.5px; }

.hero-h1 {
  font-family:var(--font-display); font-size:clamp(64px,14vw,220px);
  font-weight:700; line-height:0.85; letter-spacing:-3px;
  text-transform:uppercase; margin-bottom:32px; color:var(--txt);
}
.hero-h1 .line { display:block; }
.hero-h1 .accent { color:var(--teal); }
.hero-h1 .outline { -webkit-text-stroke:2px var(--txt); color:transparent; font-weight:600; }
.hero-h1 .italic { font-style:italic; font-weight:400; }
.hero-h1 .cursor { display:inline-block; width:.08em; height:.85em; background:var(--teal); vertical-align:-.05em; margin-left:.05em; animation:cursorBlink 1s infinite; }
@keyframes cursorBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

.hero-bottom { display:grid; grid-template-columns:1fr; gap:48px; align-items:end; margin-top:64px; }
@media (min-width:1024px){ .hero-bottom { grid-template-columns:1.4fr auto; gap:80px; } }
.hero-lede { font-size:clamp(15px,1.4vw,18px); color:var(--txt-2); line-height:1.65; max-width:540px; }
.hero-lede strong { color:var(--txt); font-weight:500; }
.hero-cta-block { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
@media (min-width:1024px){ .hero-cta-block { align-items:flex-end; } }
.hero-cta-sub { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:.5px; text-transform:uppercase; margin-top:8px; }

/* ── MEGA-КНОПКА (PRD: капсула teal, стрелка в круге) ───────────────────── */
.btn-mega {
  display:inline-flex; align-items:center; gap:16px; padding:24px 36px;
  background:var(--teal); color:var(--bg); border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; transition:all .25s; white-space:nowrap;
}
.btn-mega:hover { background:var(--teal-l); transform:translateY(-2px); box-shadow:0 16px 50px rgba(30,162,177,.4); }
.btn-mega-arrow { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--bg); border-radius:50%; flex-shrink:0; transition:transform .2s; }
.btn-mega:hover .btn-mega-arrow { transform:rotate(-45deg); }
.btn-mega-arrow svg { width:14px; height:14px; color:var(--teal); }

/* Вторичная кнопка-обводка */
.btn-ghost {
  display:inline-flex; align-items:center; gap:12px; padding:18px 30px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; color:var(--txt); transition:all .25s;
}
.btn-ghost:hover { border-color:var(--teal); color:var(--teal); }

/* ── MARQUEE ───────────────────────────────────────────────────────────── */
.marquee-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:36px 0; overflow:hidden; position:relative; }
.marquee-track { display:inline-flex; align-items:center; white-space:nowrap; animation:marqueeScroll 30s linear infinite; gap:48px; }
.marquee-text { font-family:var(--font-display); font-size:clamp(48px,7vw,96px); font-weight:600; text-transform:uppercase; letter-spacing:-2px; color:var(--txt); line-height:1; flex-shrink:0; }
.marquee-text.outline { -webkit-text-stroke:1.5px var(--txt); color:transparent; }
.marquee-dot { width:24px; height:24px; border-radius:50%; background:var(--teal); flex-shrink:0; }
@keyframes marqueeScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── SECTION FRAMEWORK ─────────────────────────────────────────────────── */
.section { padding:var(--section-py) var(--page-px); position:relative; }
.section-inner { max-width:var(--container); margin:0 auto; }
.section.bg-2 { background:var(--bg-2); }

.section-tag {
  display:inline-block; padding:8px 16px; border:1px solid var(--teal);
  border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px;
  color:var(--teal); letter-spacing:1px; text-transform:uppercase; margin-bottom:32px;
}
.section-h2 {
  font-family:var(--font-display); font-size:clamp(48px,7vw,128px);
  font-weight:600; line-height:0.95; letter-spacing:-2px;
  text-transform:uppercase; margin-bottom:32px; color:var(--txt);
}
.section-h2 .accent { color:var(--teal); }
.section-h2 .italic { font-style:italic; font-weight:400; }
.section-h2 .outline { -webkit-text-stroke:1.5px var(--txt); color:transparent; font-weight:500; }
.section-lede { font-size:18px; color:var(--txt-2); max-width:640px; line-height:1.65; margin-bottom:64px; }
.section-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:64px; }

.link-arrow-circle { display:inline-flex; align-items:center; gap:14px; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--txt); letter-spacing:.5px; text-transform:uppercase; transition:color .2s; }
.link-arrow-circle:hover { color:var(--teal); }
.link-arrow-circle .circle { width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; flex-shrink:0; }
.link-arrow-circle:hover .circle { background:var(--teal); border-color:var(--teal); transform:rotate(-45deg); }
.link-arrow-circle:hover .circle svg { color:var(--bg); }
.link-arrow-circle .circle svg { width:14px; height:14px; color:var(--txt); transition:color .2s; }

/* ── SECTION-CARD: НАВИГАТОР ПО ПЛАТФОРМЕ (PRD 5.1, ключевой блок) ────────
   Сетка карточек-входов в 8 разделов. Цвет обводки/иконки/тега — по коду
   раздела (PRD 2.2): бирюза/жёлтый/зелёный/красный. Паттерн нумерации
   /01../08 заимствован из vvk-kuzbass (каталог-навигатор).               */
.nav-cards-grid { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:600px){ .nav-cards-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .nav-cards-grid { grid-template-columns:repeat(4,1fr); } }

.section-card {
  --code:var(--teal);
  position:relative; display:flex; flex-direction:column;
  padding:32px 28px; min-height:230px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; transition:all .3s;
}
.section-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--code); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.section-card:hover { transform:translateY(-6px); border-color:var(--code); }
.section-card:hover::before { transform:scaleX(1); }
.section-card-num { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:1px; margin-bottom:auto; }
.section-card-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border:1px solid var(--code); border-radius:14px; color:var(--code); margin-bottom:22px; background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--code) 14%, transparent), transparent 70%); transition:all .3s; }
.section-card:hover .section-card-icon { transform:translateY(-2px); box-shadow:0 8px 24px -10px var(--code); }
.section-card-icon svg { width:28px; height:28px; }
.section-card-title { font-family:var(--font-display); font-size:24px; font-weight:600; text-transform:uppercase; letter-spacing:-.3px; line-height:1.05; margin-bottom:8px; }
.section-card-desc { font-size:13px; color:var(--txt-3); line-height:1.5; margin-bottom:16px; }
.section-card-tech { font-family:var(--font-mono); font-size:10px; color:var(--code); letter-spacing:.8px; text-transform:uppercase; margin-top:auto; }
.section-card .card-arr { position:absolute; top:28px; right:24px; width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.section-card:hover .card-arr { background:var(--code); border-color:var(--code); transform:rotate(-45deg); }
.section-card:hover .card-arr svg { color:var(--bg); }
.section-card .card-arr svg { width:13px; height:13px; color:var(--txt); transition:color .2s; }

/* Цветовой код раздела — задаёт акцент карточки (PRD 2.2) */
.code-teal   { --code:var(--teal); }
.code-yellow { --code:var(--code-yellow); }
.code-green  { --code:var(--code-green-neon); }
.code-red    { --code:var(--code-red); }

/* ── STATS BAR ─────────────────────────────────────────────────────────── */
.stats-bar { display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); }
@media (min-width:768px){ .stats-bar { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .stats-bar { grid-template-columns:repeat(4,1fr); } }
.stat-item { padding:48px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }
@media (min-width:1100px){ .stat-item:nth-child(4n){border-right:none;} .stat-item{border-bottom:none;} }
@media (max-width:1099px){ .stat-item:nth-child(2n){border-right:none;} }
.stat-item-label { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:1px; text-transform:uppercase; margin-bottom:32px; display:flex; align-items:center; gap:10px; }
.stat-item-label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); }
.stat-item-num { font-family:var(--font-display); font-size:clamp(56px,7vw,88px); font-weight:600; line-height:0.9; letter-spacing:-3px; color:var(--txt); margin-bottom:14px; }
.stat-item-num .accent { color:var(--teal); }
.stat-item-desc { font-size:14px; color:var(--txt-3); line-height:1.4; max-width:200px; }

/* ── ABOUT ─────────────────────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:1024px){ .about-grid { grid-template-columns:1fr 1.1fr; gap:80px; } }
.about-photo-area { position:relative; }
.about-photo-frame { position:relative; aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); }
.about-photo-frame img { width:100%; height:100%; object-fit:cover; }
.about-photo-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(10,10,10,.95)); }
.about-photo-overlay { position:absolute; bottom:32px; left:32px; right:32px; z-index:2; }
.about-photo-name { font-family:var(--font-display); font-size:32px; font-weight:600; text-transform:uppercase; letter-spacing:-0.5px; margin-bottom:8px; }
.about-photo-role { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; color:var(--teal); letter-spacing:.8px; text-transform:uppercase; }
.about-photo-role::before { content:''; width:14px; height:1px; background:var(--teal); }
.about-stamp { position:absolute; top:24px; right:24px; width:120px; height:120px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; z-index:3; font-family:var(--font-display); color:var(--bg); animation:stampRotate 30s linear infinite; }
@keyframes stampRotate { to{transform:rotate(360deg);} }
.about-stamp-content { animation:stampReverse 30s linear infinite; text-align:center; }
@keyframes stampReverse { to{transform:rotate(-360deg);} }
.about-stamp .big { font-size:36px; font-weight:700; line-height:1; letter-spacing:-1.5px; }
.about-stamp .lbl { font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.about-text { font-size:17px; color:var(--txt-2); line-height:1.7; margin-bottom:18px; max-width:580px; }
.about-text strong { color:var(--txt); font-weight:600; }
.about-text em { color:var(--teal); font-style:normal; font-weight:500; }
.about-features { display:grid; grid-template-columns:1fr; margin-top:48px; border-top:1px solid var(--line); }
@media (min-width:600px){ .about-features { grid-template-columns:1fr 1fr; } }
.about-feat { padding:24px 0; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:14px; }
@media (min-width:600px){ .about-feat:nth-child(odd){padding-right:24px; border-right:1px solid var(--line);} .about-feat:nth-child(even){padding-left:24px;} }
.about-feat-num { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--teal); letter-spacing:1px; flex-shrink:0; padding-top:4px; }
.about-feat-content h4 { font-family:var(--font-display); font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:-0.2px; margin-bottom:6px; }
.about-feat-content p { font-size:13px; color:var(--txt-3); line-height:1.55; }

/* ── CASES / PRODUCTS ──────────────────────────────────────────────────── */
.cases-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .cases-grid { grid-template-columns:1fr 1fr; } }
.case-card { position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); border:1px solid var(--line); transition:all .35s; min-height:480px; }
.case-card:hover { transform:translateY(-6px); border-color:var(--teal); }
.case-card.large { grid-column:span 1; }
@media (min-width:768px){ .case-card.large { grid-column:span 2; } }
.case-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 80% 100%,rgba(30,162,177,.18),transparent 50%); z-index:0; }
.case-img { position:absolute; right:-10%; bottom:0; width:60%; height:90%; object-fit:contain; object-position:bottom right; z-index:1; opacity:.85; }
.case-content { position:relative; z-index:2; padding:40px; height:100%; display:flex; flex-direction:column; justify-content:space-between; min-height:480px; }
.case-tag { display:inline-block; padding:6px 14px; background:rgba(30,162,177,.15); border:1px solid var(--teal); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; color:var(--teal); letter-spacing:.5px; margin-bottom:24px; align-self:flex-start; }
.case-title { font-family:var(--font-display); font-size:clamp(28px,3.5vw,48px); font-weight:600; text-transform:uppercase; line-height:1.05; letter-spacing:-1px; margin-bottom:14px; max-width:80%; }
.case-desc { font-size:14px; color:var(--txt-2); line-height:1.55; margin-bottom:32px; max-width:60%; }
.case-cta { display:inline-flex; align-items:center; gap:14px; font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--txt); letter-spacing:.5px; text-transform:uppercase; align-self:flex-start; }
.case-cta .arr { width:38px; height:38px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.case-card:hover .case-cta .arr { background:var(--teal); border-color:var(--teal); transform:rotate(-45deg); }
.case-card:hover .case-cta .arr svg { color:var(--bg); }
.case-cta .arr svg { width:14px; height:14px; color:var(--txt); transition:color .2s; }
.case-price { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--teal); margin-top:auto; }
.case-price .sub { font-size:12px; color:var(--txt-3); font-weight:500; margin-left:4px; font-family:var(--font-body); }

/* ── PRO / OFFER (PRD 5.1: блок Pro $80/мес + Консультация $120/час) ─────── */
.offer-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:900px){ .offer-grid { grid-template-columns:1.3fr 1fr; } }
.offer-card { position:relative; display:flex; flex-direction:column; padding:48px 40px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--bg-card); overflow:hidden; }
.offer-card.featured { border-color:var(--teal); background:linear-gradient(160deg,rgba(30,162,177,.10),transparent 60%),var(--bg-card); }
.offer-card.featured::before { content:''; position:absolute; top:-120px; right:-120px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(30,162,177,.18),transparent 65%); pointer-events:none; }
.offer-badge { align-self:flex-start; padding:6px 14px; background:var(--teal); color:var(--bg); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; margin-bottom:24px; }
.offer-badge.ghost { background:transparent; border:1px solid var(--line-2); color:var(--txt-3); }
.offer-name { font-family:var(--font-display); font-size:clamp(32px,4vw,52px); font-weight:600; text-transform:uppercase; letter-spacing:-1px; line-height:1; margin-bottom:16px; }
.offer-price { font-family:var(--font-display); font-size:40px; font-weight:700; color:var(--teal); margin-bottom:24px; }
.offer-price .sub { font-size:14px; color:var(--txt-3); font-weight:500; font-family:var(--font-body); margin-left:4px; }
.offer-list { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.offer-list li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--txt-2); line-height:1.5; position:relative; }
.offer-list li::before { content:''; flex-shrink:0; width:18px; height:18px; margin-top:1px; border-radius:50%; background:rgba(30,162,177,.15); border:1px solid var(--teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231EA2B1' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:11px; }
.offer-card .btn-mega, .offer-card .btn-ghost { margin-top:auto; }

/* ── SERVICES (markets) ────────────────────────────────────────────────── */
.services-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.service-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; padding:32px 0; border-bottom:1px solid var(--line); transition:padding .25s; position:relative; }
.service-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--teal); transition:width .25s; }
.service-item:hover { padding-left:24px; }
.service-item:hover::before { width:4px; }
.service-item:hover .service-name { color:var(--teal); }
.service-num { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--teal); letter-spacing:1px; min-width:60px; }
.service-content { display:flex; flex-direction:column; gap:8px; }
.service-name { font-family:var(--font-display); font-size:clamp(28px,4vw,52px); font-weight:600; text-transform:uppercase; line-height:1; letter-spacing:-1px; transition:color .2s; }
.service-desc { font-size:14px; color:var(--txt-3); line-height:1.5; max-width:480px; }
.service-arr { width:56px; height:56px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; flex-shrink:0; }
.service-item:hover .service-arr { background:var(--teal); border-color:var(--teal); transform:rotate(-45deg); }
.service-item:hover .service-arr svg { color:var(--bg); }
.service-arr svg { width:18px; height:18px; color:var(--txt); transition:color .2s; }
@media (max-width:600px){ .service-item { grid-template-columns:auto 1fr; gap:16px; } .service-name { font-size:24px; } .service-arr { display:none; } }

/* ── TIMELINE ──────────────────────────────────────────────────────────── */
.timeline-grid { display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); }
@media (min-width:768px){ .timeline-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .timeline-grid { grid-template-columns:repeat(4,1fr); } }
.tl-card { padding:40px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; transition:background .25s; }
.tl-card:hover { background:rgba(30,162,177,.04); }
@media (min-width:1100px){ .tl-card:nth-child(4n){border-right:none;} .tl-card{border-bottom:none;} }
.tl-period { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:1px; margin-bottom:24px; }
.tl-num { font-family:var(--font-display); font-size:80px; font-weight:600; color:var(--teal); line-height:0.85; letter-spacing:-3px; margin-bottom:24px; }
.tl-title { font-family:var(--font-display); font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:-0.3px; line-height:1.15; margin-bottom:14px; }
.tl-desc { font-size:14px; color:var(--txt-3); line-height:1.6; }

/* ── QUOTE / МАНИФЕСТ ──────────────────────────────────────────────────── */
.quote-block { position:relative; min-height:600px; overflow:hidden; display:flex; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quote-bg-img { position:absolute; inset:0; z-index:0; }
.quote-bg-img img { width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.1) saturate(.9) brightness(.7); }
.quote-bg-img::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.65) 50%,rgba(30,162,177,.3) 100%); }
.quote-content { position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:80px var(--page-px); width:100%; }
.quote-text { font-family:var(--font-display); font-size:clamp(40px,6vw,96px); font-weight:500; line-height:0.95; letter-spacing:-2px; text-transform:uppercase; margin-bottom:48px; max-width:1100px; }
.quote-text .accent { color:var(--teal); }
.quote-text .italic { font-style:italic; font-weight:400; }
.quote-author-block { display:flex; align-items:center; gap:18px; padding-top:32px; border-top:1px solid var(--line-2); max-width:480px; }
.quote-author-av { width:54px; height:54px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--bg); }
.quote-author-info .n { font-family:var(--font-display); font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px; }
.quote-author-info .r { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:.5px; }

/* ── BLOG ──────────────────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .blog-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .blog-grid { grid-template-columns:repeat(3,1fr); } }
.blog-card { border-radius:20px; overflow:hidden; background:var(--bg-card); border:1px solid var(--line); transition:all .3s; }
.blog-card:hover { transform:translateY(-4px); border-color:var(--teal); }
.blog-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:#000; }
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-card:hover .blog-img img { transform:scale(1.05); }
.blog-cat-tag { position:absolute; top:16px; left:16px; padding:6px 14px; background:var(--teal); color:var(--bg); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.blog-day-num { position:absolute; top:16px; right:16px; text-align:right; font-family:var(--font-display); }
.blog-day-num .num { font-size:36px; font-weight:700; line-height:0.9; letter-spacing:-1px; }
.blog-day-num .lbl { font-size:10px; color:var(--txt-2); letter-spacing:1.5px; text-transform:uppercase; display:block; }
.blog-body { padding:24px; }
.blog-title { font-family:var(--font-display); font-size:20px; font-weight:600; text-transform:uppercase; line-height:1.15; letter-spacing:-0.3px; margin-bottom:14px; }
.blog-meta { display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:11px; color:var(--txt-3); padding-top:14px; border-top:1px solid var(--line); }

/* ── EVENTS ────────────────────────────────────────────────────────────── */
.events-list { border-top:1px solid var(--line); }
.event-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); position:relative; transition:padding .25s; }
.event-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--code-green-neon); transition:width .25s; }
.event-row:hover { padding-left:24px; }
.event-row:hover::before { width:4px; }
.event-row:hover .event-row-name { color:var(--code-green-neon); }
.event-row-date { display:flex; flex-direction:column; align-items:center; justify-content:center; width:80px; height:80px; border:1px solid var(--code-green-neon); border-radius:50%; font-family:var(--font-display); }
.event-row-date .day { font-size:30px; font-weight:600; color:var(--code-green-neon); line-height:1; letter-spacing:-1px; }
.event-row-date .mon { font-size:10px; color:var(--txt-3); letter-spacing:1.5px; margin-top:2px; text-transform:uppercase; }
.event-row-type { font-family:var(--font-mono); font-size:11px; color:var(--code-green-neon); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.event-row-name { font-family:var(--font-display); font-size:clamp(20px,2.5vw,32px); font-weight:600; text-transform:uppercase; letter-spacing:-0.5px; line-height:1.1; margin-bottom:6px; transition:color .2s; }
.event-row-place { font-size:13px; color:var(--txt-3); }
.event-row-action { display:flex; align-items:center; gap:18px; }
.event-row-spots { font-family:var(--font-mono); font-size:11px; color:var(--code-green-neon); letter-spacing:.5px; }
.event-row-spots.warn { color:var(--warn); }
.event-row-arr { width:48px; height:48px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.event-row:hover .event-row-arr { background:var(--code-green-neon); border-color:var(--code-green-neon); transform:rotate(-45deg); }
.event-row:hover .event-row-arr svg { color:var(--bg); }
.event-row-arr svg { width:14px; height:14px; color:var(--txt); transition:color .2s; }
@media (max-width:600px){ .event-row { grid-template-columns:auto 1fr; gap:16px; } .event-row-action { grid-column:1/-1; justify-content:space-between; } }

/* ── PARTNERS ──────────────────────────────────────────────────────────── */
.partners-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .partners-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .partners-grid { grid-template-columns:repeat(3,1fr); } }
.partner-card { position:relative; border-radius:var(--r-card); background:var(--bg-card); border:1px solid var(--line); padding:48px 36px; transition:all .3s; overflow:hidden; }
.partner-card:hover { transform:translateY(-4px); border-color:var(--teal); }
.partner-card::before { content:''; position:absolute; top:0; right:0; width:100px; height:100px; background:radial-gradient(circle at top right,rgba(30,162,177,.2),transparent 70%); pointer-events:none; }
.partner-num-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:48px; }
.partner-num { font-family:var(--font-mono); font-size:11px; color:var(--teal); letter-spacing:1px; text-transform:uppercase; }
.partner-arr-circle { width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.partner-card:hover .partner-arr-circle { background:var(--teal); border-color:var(--teal); transform:rotate(-45deg); }
.partner-card:hover .partner-arr-circle svg { color:var(--bg); }
.partner-arr-circle svg { width:14px; height:14px; color:var(--txt); transition:color .2s; }
.partner-name { font-family:var(--font-display); font-size:36px; font-weight:600; text-transform:uppercase; letter-spacing:-1px; margin-bottom:8px; }
.partner-type { font-family:var(--font-mono); font-size:12px; color:var(--teal); letter-spacing:.8px; text-transform:uppercase; margin-bottom:24px; }
.partner-desc { font-size:14px; color:var(--txt-3); line-height:1.65; }
.partner-card.coming { opacity:.4; }

/* ── CONTACT / FINAL CTA ───────────────────────────────────────────────── */
.contact-section { position:relative; padding:var(--section-py) var(--page-px); overflow:hidden; border-top:1px solid var(--line); }
.contact-bg-orb { position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(30,162,177,.15),transparent 60%); top:-200px; right:-200px; filter:blur(60px); z-index:0; }
.contact-inner { position:relative; z-index:2; max-width:var(--container); margin:0 auto; }
.contact-grid { display:grid; grid-template-columns:1fr; gap:64px; align-items:end; }
@media (min-width:1024px){ .contact-grid { grid-template-columns:1.4fr 1fr; } }
.contact-h2 { font-family:var(--font-display); font-size:clamp(56px,9vw,160px); font-weight:600; line-height:0.92; letter-spacing:-3px; text-transform:uppercase; }
.contact-h2 .accent { color:var(--teal); }
.contact-h2 .italic { font-style:italic; font-weight:400; }
.contact-actions { display:flex; flex-direction:column; gap:16px; }
.contact-text { font-size:17px; color:var(--txt-2); line-height:1.6; margin-bottom:8px; }
.contact-text strong { color:var(--teal); font-weight:600; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
footer { background:var(--bg-2); border-top:1px solid var(--line); padding:64px var(--page-px) 0; }
.footer-top { display:grid; grid-template-columns:1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--line); max-width:var(--container); margin:0 auto; }
@media (min-width:768px){ .footer-top { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .footer-top { grid-template-columns:2fr 1fr 1fr 1fr; } }
.f-brand .logo-wrap { margin-bottom:24px; }
.f-brand p { font-size:14px; color:var(--txt-3); line-height:1.7; max-width:300px; margin-bottom:24px; }
.f-socials { display:flex; gap:10px; }
.f-soc { width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--txt-3); }
.f-soc:hover { border-color:var(--teal); color:var(--teal); }
.f-col h4 { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--txt-3); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:24px; }
.f-col li { font-family:var(--font-display); font-size:16px; color:var(--txt-2); margin-bottom:12px; transition:color .2s; text-transform:uppercase; letter-spacing:.3px; }
.f-col li a:hover { color:var(--teal); }
.footer-bot { max-width:var(--container); margin:0 auto; padding:28px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:.5px; text-transform:uppercase; }
.footer-bot .disclaimer { color:var(--txt-2); }

/* ── NEWS: лента (PRD 3.4 News-item) ───────────────────────────────────── */
.news-list { border-top:1px solid var(--line); }
.news-item { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); position:relative; transition:padding .25s; }
.news-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--teal); transition:width .25s; }
.news-item:hover { padding-left:20px; } .news-item:hover::before { width:4px; }
.news-item:hover .news-title { color:var(--teal); }
.news-tag { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--line-2); color:var(--txt-3); white-space:nowrap; }
.news-tag.market { border-color:var(--teal); color:var(--teal); }
.news-tag.project { border-color:var(--code-green-neon); color:var(--code-green-neon); }
.news-tag.flash { border-color:var(--warn); color:var(--warn); }
.news-title { font-family:var(--font-display); font-size:clamp(16px,1.6vw,20px); font-weight:600; text-transform:uppercase; letter-spacing:-.2px; line-height:1.2; transition:color .2s; }
.news-time { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); white-space:nowrap; }
@media (max-width:600px){ .news-item{ grid-template-columns:auto 1fr; } .news-time{ display:none; } }

/* ── BLOG: featured (большой) пост ─────────────────────────────────────── */
.blog-featured { display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); margin-bottom:32px; transition:border-color .3s, box-shadow .3s; }
.blog-featured:hover { border-color:var(--teal); box-shadow:0 24px 60px -30px var(--teal); }
@media (min-width:900px){ .blog-featured{ grid-template-columns:1.1fr 1fr; } }
.blog-featured .bf-cover { position:relative; min-height:280px; overflow:hidden; }
.blog-featured .bf-body { padding:40px; display:flex; flex-direction:column; justify-content:center; }
.blog-featured .bf-title { font-family:var(--font-display); font-size:clamp(26px,3vw,42px); font-weight:600; text-transform:uppercase; line-height:1.05; letter-spacing:-.5px; margin:16px 0; }
.blog-featured .bf-excerpt { font-size:15px; color:var(--txt-2); line-height:1.65; margin-bottom:24px; max-width:480px; }

/* ── ARTICLE / PROSE (PRD 5.3) ─────────────────────────────────────────── */
.article-wrap { max-width:1080px; margin:0 auto; padding:0 var(--page-px); }
.article-head { max-width:840px; margin:0 auto 56px; }
.article-h1 { font-family:var(--font-display); font-size:clamp(34px,6vw,80px); font-weight:700; line-height:0.95; letter-spacing:-2px; text-transform:uppercase; margin:24px 0; }
.article-h1 .accent { color:var(--teal); }
.article-metarow { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-family:var(--font-mono); font-size:12px; color:var(--txt-3); padding-top:24px; border-top:1px solid var(--line); }
.article-author { display:inline-flex; align-items:center; gap:12px; }
.article-author .av { width:40px; height:40px; border-radius:50%; background:var(--teal); color:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; }
.article-author .n { font-family:var(--font-display); font-size:14px; font-weight:600; text-transform:uppercase; color:var(--txt); letter-spacing:.3px; }

.article-cols { display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:1000px){ .article-cols{ grid-template-columns:200px 1fr; gap:56px; } }
.toc { display:none; }
@media (min-width:1000px){ .toc{ display:block; position:sticky; top:110px; align-self:start; font-family:var(--font-mono); font-size:12px; } }
.toc h5 { color:var(--txt-3); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.toc a { display:block; color:var(--txt-3); padding:6px 0 6px 14px; border-left:1px solid var(--line); transition:all .2s; }
.toc a:hover { color:var(--teal); border-color:var(--teal); }

.article-body { max-width:760px; font-size:17px; color:var(--txt-2); line-height:1.8; }
.article-body > p { margin-bottom:24px; }
.article-body strong { color:var(--txt); font-weight:600; }
.article-body em { color:var(--teal); font-style:normal; font-weight:500; }
.article-body h2 { font-family:var(--font-display); font-size:clamp(26px,3vw,38px); font-weight:600; text-transform:uppercase; letter-spacing:-.6px; line-height:1.1; color:var(--txt); margin:52px 0 20px; scroll-margin-top:110px; }
.article-body h2 .num { color:var(--teal); font-family:var(--font-mono); font-size:.5em; vertical-align:middle; margin-right:12px; }
.article-body h3 { font-family:var(--font-display); font-size:22px; font-weight:600; text-transform:uppercase; color:var(--txt); margin:36px 0 14px; }
.article-body ul, .article-body ol { margin:0 0 24px 4px; padding-left:22px; }
.article-body li { margin-bottom:12px; }
.article-body ul li::marker { color:var(--teal); }
.article-body blockquote { margin:36px 0; padding:8px 0 8px 24px; border-left:2px solid var(--teal); font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); font-weight:500; text-transform:uppercase; line-height:1.2; color:var(--txt); letter-spacing:-.4px; }
.article-fig { margin:36px 0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:linear-gradient(180deg,#0e1214,#0a0b0d); }
.article-fig svg { width:100%; height:auto; display:block; padding:18px 18px 8px; }
.article-fig .cap { padding:12px 18px; font-family:var(--font-mono); font-size:11px; color:var(--txt-3); border-top:1px solid var(--line); line-height:1.5; }
.callout { display:flex; gap:16px; padding:24px 26px; margin:36px 0; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--bg-2); }
.callout .ic { flex-shrink:0; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(30,162,177,.14); border:1px solid var(--teal); color:var(--teal); }
.callout .ic svg { width:20px; height:20px; }
.callout p { margin:0; font-size:15px; color:var(--txt-2); line-height:1.6; }
.callout strong { color:var(--txt); }
.callout.warn .ic { background:rgba(229,72,77,.12); border-color:var(--code-red); color:var(--code-red); }
.disclaimer-box { margin:48px 0 0; padding:18px 22px; border:1px dashed var(--line-2); border-radius:var(--r-md); font-family:var(--font-mono); font-size:12px; color:var(--txt-3); line-height:1.6; }

/* ── PAGE HERO (внутренние страницы: лента раздела + tag + h2) ──────────── */
.page-hero { position:relative; padding:160px var(--page-px) 60px; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero .hero-orb-1 { width:520px; height:520px; top:-180px; right:-120px; }
.page-hero-inner { position:relative; z-index:2; max-width:var(--container); margin:0 auto; }
.page-h1 { font-family:var(--font-display); font-size:clamp(48px,9vw,140px); font-weight:700; line-height:0.9; letter-spacing:-3px; text-transform:uppercase; margin-bottom:24px; }
.page-h1 .accent { color:var(--teal); } .page-h1 .italic { font-style:italic; font-weight:400; }
.crumbs { font-family:var(--font-mono); font-size:11px; color:var(--txt-3); letter-spacing:1px; text-transform:uppercase; margin-bottom:28px; display:flex; gap:10px; }
.crumbs a:hover { color:var(--teal); } .crumbs span { color:var(--teal); }

/* ── FILTER TABS ───────────────────────────────────────────────────────── */
.filter-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; }
.filter-tab { padding:10px 20px; border:1px solid var(--line-2); border-radius:var(--r-pill); font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--txt-2); transition:all .2s; cursor:pointer; background:none; }
.filter-tab:hover { border-color:var(--teal); color:var(--teal); }
.filter-tab.active { background:var(--teal); border-color:var(--teal); color:var(--bg); }

/* ── COURSE CARD (PRD 3.4) ─────────────────────────────────────────────── */
.course-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .course-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .course-grid{ grid-template-columns:repeat(3,1fr); } }
.course-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--bg-card); transition:transform .3s, border-color .3s, box-shadow .3s; }
.course-card:hover { transform:translateY(-6px); border-color:var(--teal); box-shadow:0 24px 60px -30px var(--teal); }
.course-cover { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,#0c1a1c,#0a0a0a 65%); }
.course-cover svg { position:absolute; inset:0; width:100%; height:100%; color:var(--teal); opacity:.5; transition:transform .5s; }
.course-card:hover .course-cover svg { transform:scale(1.06); }
.course-level { position:absolute; top:14px; left:14px; padding:5px 12px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:rgba(10,10,10,.7); border:1px solid var(--line-2); color:var(--txt-2); backdrop-filter:blur(6px); }
.course-level.free { background:var(--teal); color:var(--bg); border-color:var(--teal); }
.course-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.course-title { font-family:var(--font-display); font-size:21px; font-weight:600; text-transform:uppercase; letter-spacing:-.3px; line-height:1.1; margin-bottom:10px; }
.course-meta { display:flex; gap:14px; font-family:var(--font-mono); font-size:11px; color:var(--txt-3); margin-bottom:18px; }
.course-progress { height:4px; border-radius:2px; background:var(--bg-3); overflow:hidden; margin-bottom:18px; }
.course-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-l)); }
.course-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.course-price { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--teal); }
.course-price.free { color:var(--teal-l); }
.course-cta { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.course-cta .arr { width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.course-card:hover .course-cta .arr { background:var(--teal); border-color:var(--teal); transform:rotate(-45deg); }
.course-card:hover .course-cta .arr svg { color:var(--bg); }
.course-cta .arr svg { width:13px; height:13px; color:var(--txt); transition:color .2s; }

/* ── REVEAL-АНИМАЦИИ (IntersectionObserver) ──────────────────────────────
   Скрываем только когда JS активен (<html class="js">). Без JS контент виден
   сразу — не остаётся невидимым (прогрессивное улучшение, PRD 3.8).        */
.js .reveal { opacity:0; transform:translateY(40px); transition:opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease); }
.js .reveal.show { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════════════════════════════
   TRADING LAYER — трейдинг-эстетика: свечи, графики, терминал-стиль.
   Свеча/график = легитимная трейдинг-иконка (не «хайп» §3.7): держим
   сдержанно, teal + приглушённые up/down, без золота и обещаний.
   ════════════════════════════════════════════════════════════════════════ */
:root { --up:#27E07A; --down:#E5484D; }

/* Мини-свечи (декоративный SVG-мотив). Цвет наследуется через currentColor. */
.mini-candles { width:84px; height:30px; display:block; color:var(--code, var(--teal)); opacity:.9; }
.mini-candles .wick { stroke:currentColor; stroke-width:1.4; opacity:.55; }
.mini-candles .up   { fill:var(--up); }
.mini-candles .down { fill:var(--down); }
.mini-candles .body { fill:currentColor; }

/* Спарклайн (тонкая линия графика) */
.spark { display:block; color:var(--teal); }
.spark path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spark .area { fill:url(#sparkFill); stroke:none; }

/* Спарклайн-подложка hero (сдержанный трейдинг-акцент) */
.hero-spark {
  position:absolute; left:0; right:0; bottom:0; width:100%; height:34vh; max-height:280px;
  z-index:1; opacity:.45; color:var(--teal); pointer-events:none;
}
.hero-spark path { fill:none; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; }
.hero-spark .area { fill:url(#sparkFill); stroke:none; }
.hero-spark .dot { fill:var(--teal-l); }

/* ── NAV: трейдинг-терминал, все разделы сверху ───────────────────────────
   Компактная строка-«тикер»: моно-слэш + лейбл. Помещает все 8 разделов. */
@media (min-width:1180px){
  .nav-center { display:flex; gap:0; }
  .nav-center .nav-link { padding:0 13px; }
  .nav-center .nav-link .label { font-size:13px; }
  .nav-center .nav-link .slash { font-size:9px; }
  .menu-toggle { display:none; }
}
/* до 1180 — бургер с полным меню (уже есть) */
@media (min-width:1100px) and (max-width:1179px){
  .nav-center { display:none; }
  .menu-toggle { display:flex; }
}
.nav-link .label { position:relative; }
.nav-link::after,
.nav-hub::after {
  content:''; position:absolute; left:13px; right:13px; bottom:-2px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav-link:hover { opacity:1; }
.nav-link:hover::after,
.nav-hub:hover::after { transform:scaleX(1); }

/* Активный раздел (класс ставит DI.initNav по pathname) */
.nav-link.is-current { opacity:1; }
.nav-link.is-current::after,
.nav-hub.is-current::after { transform:scaleX(1); }
.nav-link.is-current .label { color:var(--teal); }
.nav-hub.is-current .label { color:var(--teal-l); }
.mobile-nav-link.is-current .label { color:var(--teal); }

/* Кнопка Telegram-входа — теперь teal-заливка (была плоская обводка) */
.tg-pill-nav { background:var(--teal); color:var(--bg); border-color:var(--teal); }

/* ── Экосистема — флагманская кнопка навигации ────────────────────────────
   Teal-пилюля с мягким пульсирующим свечением: заметно выделяется среди
   плоских текстовых ссылок ряда (по просьбе — «в отличие от остальных»).
   Селекторы усилены .nav-center, чтобы победить компактный паддинг ≥1180px. */
.nav-center .nav-link.nav-eco {
  margin:0 6px; padding:6px 16px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--teal) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 22%, transparent), color-mix(in srgb, var(--teal) 7%, transparent));
  animation:ecoGlow 3.4s var(--ease) infinite;
  transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-link.nav-eco .slash { color:var(--teal-l); }
.nav-link.nav-eco .label { color:var(--teal-l); font-weight:700; }
.nav-center .nav-link.nav-eco:hover {
  opacity:1; border-color:var(--teal-l);
  background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 34%, transparent), color-mix(in srgb, var(--teal) 14%, transparent));
  box-shadow:0 0 18px 1px color-mix(in srgb, var(--teal) 38%, transparent);
}
/* мигающая полоска-подчёркивание под пилюлей — вырывает Экосистему из ряда */
.nav-link.nav-eco::after {
  content:''; display:block; position:absolute; left:16px; right:16px; bottom:-5px;
  height:2px; border-radius:2px; background:var(--teal-l);
  transform:none; opacity:1; animation:ecoBlink 1.6s steps(1,end) infinite;
}
@keyframes ecoGlow {
  0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--teal) 0%, transparent); }
  50%     { box-shadow:0 0 15px 1px color-mix(in srgb, var(--teal) 26%, transparent); }
}
@keyframes ecoBlink {
  0%,55%  { opacity:1;  box-shadow:0 0 8px 0 color-mix(in srgb, var(--teal-l) 70%, transparent); }
  56%,100%{ opacity:.15; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) { .nav-center .nav-link.nav-eco { animation:none; } }

/* Экосистема в мобильном меню — teal-лейбл + акцентная планка слева */
.mobile-nav-link.nav-eco { border-left:2px solid var(--teal); padding-left:14px; }
.mobile-nav-link.nav-eco .label { color:var(--teal-l); }
.tg-pill-nav:hover { background:var(--teal-l); border-color:var(--teal-l); color:var(--bg); transform:translateY(-1px); }

/* Ховер мега-кнопки: бегущий блик-свеча */
.btn-mega { position:relative; overflow:hidden; }
.btn-mega::after {
  content:''; position:absolute; top:0; bottom:0; left:-40%; width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg); transition:none;
}
.btn-mega:hover::after { animation:btnSheen .7s var(--ease); }
@keyframes btnSheen { from{left:-40%;} to{left:130%;} }

/* Ghost-кнопка — teal-тинт вместо «белой» */
.btn-ghost { border-color:var(--teal); color:var(--teal); background:rgba(30,162,177,.06); }
.btn-ghost:hover { background:rgba(30,162,177,.14); border-color:var(--teal-l); color:var(--teal-l); transform:translateY(-2px); }
.btn-ghost svg { width:14px; height:14px; }

/* ── NAV-CARDS: терминал-тайлы (вместо плоских карточек с сервис-надписями) ── */
.section-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%),
    var(--bg-card);
}
/* мягкая сетка-«график» на фоне карточки */
.section-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(180deg, transparent 40%, #000);
}
.section-card:hover { box-shadow:0 18px 60px -20px var(--code); }
.section-card-num { z-index:1; }
.section-card-icon, .section-card-title, .section-card-desc { position:relative; z-index:1; }
.section-card-foot {
  position:relative; z-index:1; margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.section-card-ticker {
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px;
  color:var(--code); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px;
}
.section-card-ticker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--code); box-shadow:0 0 8px var(--code); }
.section-card:hover .mini-candles { opacity:1; }

/* Свечной разделитель секций (опц. декор) */
.candle-rule { display:flex; align-items:center; justify-content:center; gap:6px; height:40px; opacity:.5; }
.candle-rule i { display:block; width:3px; border-radius:2px; background:var(--teal); }

/* ── REDUCED MOTION (PRD 3.5/3.8) ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
  .hero-orb, .marquee-track, .about-stamp { animation:none !important; }
}