/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ В СТИЛЕ H «НОБУ» — кейсы, блог, статья,
   контакты. Наследует about.css (светлый титул .vha-head) и
   через него home-h.css → нобу-компоненты e/b/d.
   Здесь: витрина кейсов с килайнами, журнальные карточки блога,
   светлая статья, светлые контакты с формой.
   ============================================================ */
@import url("about.css");

/* ---------- общая грамматика: фото под килайном и мягким скримом ---------- */
.vhp-media{position:relative;overflow:hidden}
.vhp-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s var(--ease)}
.vhp-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,22,51,0) 46%,rgba(20,22,51,.32))}
.vhp-media::after{content:"";position:absolute;inset:10px;z-index:3;border:1px solid rgba(255,255,255,.4);border-radius:12px;pointer-events:none}

/* ---------- КЕЙСЫ: титул с колонкой фактов ---------- */
.vhk-head .vha-head-inner{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(28px,4vw,64px)}
.vhk-copy{display:grid;gap:18px;justify-items:start;min-width:0}
.vhk-stats{display:grid;gap:clamp(16px,2vw,24px);padding-left:clamp(26px,3vw,44px);border-left:1px solid var(--hair)}
.vhk-stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);line-height:1;letter-spacing:-.02em;color:var(--primary)}
.vhk-stats span{display:block;margin-top:5px;color:var(--muted);font-size:.88rem;line-height:1.45;max-width:19ch}
@media (max-width:860px){
  .vhk-head .vha-head-inner{grid-template-columns:1fr}
  .vhk-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-left:0;padding-left:0;gap:20px}
}

/* ---------- БЛОГ: титул-издание (мягкий фон, янтарный акцент) ---------- */
.vhb-head{background:var(--bg-soft);padding-bottom:clamp(20px,2.6vw,34px)}
.vhb-head .eyebrow{color:var(--amber-deep)}
.vhb-head .eyebrow::before{background:var(--amber)}
.vhb-cadence{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:100px;padding:10px 16px;margin-top:6px}
.vhb-cadence .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(251,176,32,.2);flex:none}

/* ---------- О НАС: фото-герой во всю ширину (в стиле RED) ---------- */
.vha-hero-photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(430px,58vh,640px);padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(48px,6vw,84px);
  background:#0F1130 url("../assets/360_F_878005107_HT1v8uGj8sJgGxCN5mJLCCqUKcPnBkDi.jpg") center/cover no-repeat}
.vha-hero-photo .vha-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,17,48,.30),rgba(15,17,48,.52) 56%,rgba(15,17,48,.86))}
.vha-hero-photo .vha-head-inner{position:relative;z-index:2}
.vha-hero-photo .eyebrow,.vha-hero-photo .vha-h1{color:#fff}
.vha-hero-photo .eyebrow::before{background:#fff}
.vha-h1--xl{width:100%;margin:0;font-size:clamp(3rem,13vw,10rem);line-height:.9;letter-spacing:-.035em;white-space:nowrap}
@media (max-width:520px){.vha-h1--xl{white-space:normal}}
.sec-h2--xl{max-width:none;font-size:clamp(2.8rem,5.6vw,5rem);line-height:1;letter-spacing:-.03em}
.vha-hero-sub{max-width:54ch;margin:16px 0 0;color:rgba(255,255,255,.92);
  font-size:clamp(1.02rem,.95rem + .5vw,1.26rem);line-height:1.55}

/* ---------- О НАС: сетка команды (фото людей) ---------- */
.vha-team{list-style:none;margin:0 0 clamp(30px,4vw,48px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.vha-team li{display:flex;flex-direction:column}
.vha-team .vha-photo{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--bg-soft);box-shadow:0 22px 44px -28px rgba(20,22,51,.42)}
.vha-team .vha-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.vha-team h3{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;margin:18px 0 4px}
.vha-team .role{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
@media (max-width:640px){.vha-team{grid-template-columns:1fr 1fr;gap:16px}}
@media (max-width:420px){.vha-team{grid-template-columns:1fr}}

/* ---------- КЕЙСЫ: витрина ---------- */
.vhk-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,1.8rem)}
@media (max-width:1060px){.vhk-cases{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.vhk-cases{grid-template-columns:1fr}}
.vhk-case{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.vhk-case:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.vhk-case:hover .vhp-media img{transform:scale(1.045)}
.vhk-case .vhp-media{aspect-ratio:16/10}
.vhk-geo{position:absolute;left:14px;top:14px;z-index:4;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.5);border-radius:100px;padding:7px 12px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vhk-body{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.vhk-body h3{margin:0;font-size:1.1rem}
.vhk-body>p{color:var(--muted);font-size:.93rem;margin:0}
.vhk-body .case-metrics{border-top:1px solid var(--hair);padding-top:.85rem;margin-top:.2rem}

/* ---------- БЛОГ: журнальные карточки ---------- */
.vhb-page .meta{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.vhb-page .featured{border-radius:22px}
.vhb-page .featured .cover{min-height:300px}
.vhb-page .post{border-radius:18px}
.vhb-page .post.hidden{display:none}
.vhb-page .cover::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,22,51,0) 50%,rgba(20,22,51,.28))}
.vhb-page .cover::after{content:"";position:absolute;inset:10px;z-index:3;border:1px solid rgba(255,255,255,.38);border-radius:10px;pointer-events:none}
/* подписка — белая плашка-стейтмент с обычным текстом */
.vhb-sub{margin-top:3rem}
.vhb-sub h3{margin:0 0 .2rem;font-size:1.22rem}
.vhb-sub p{font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.6;color:var(--muted);max-width:none;margin:0 0 1rem}

/* ---------- СТАТЬЯ ---------- */
.vhr-crumbs{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem}
.vhr-crumbs a{color:inherit;text-decoration:none}
.vhr-crumbs a:hover{color:var(--primary)}
.vhr-crumbs .sep{opacity:.5}
.vhr-meta{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vhr-page .vha-h1{max-width:24ch}
.vhr-page .article-body h2{font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem)}
.vhr-page .vh-statement{margin:2.4rem 0}

/* ---------- О НАС: «Кто мы», команда, система ---------- */
.vhw-copy{display:grid;gap:1.05rem;max-width:62ch}
.vhw-copy p{margin:0;color:#33344A;line-height:1.7}
.vhw-copy b{color:var(--ink)}
.vhw-band{margin-top:clamp(40px,5vw,64px)}
.vhs-photo{object-position:72% 50%}

/* ---------- КОНТАКТЫ: светлая версия ---------- */
.vhq-page .contact-card{background:#fff;border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.vhq-page .contact-row small{color:var(--muted)}
.vhq-page .contact-row b{color:var(--ink)}
.vhq-page .copy-btn{margin-left:auto;width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--hair);background:#fff;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.vhq-page .copy-btn svg{width:16px;height:16px}
.vhq-page .copy-btn:hover{color:var(--primary);border-color:var(--primary)}
.vhq-page .copy-btn.done{color:#0a7d38;border-color:#0a7d38}
.vhq-page .form label{color:var(--muted)}
.vhq-page .form input,.vhq-page .form select,.vhq-page .form textarea{color:var(--ink);background:#fff;border:1px solid var(--hair)}
.vhq-page .form input::placeholder,.vhq-page .form textarea::placeholder{color:#9AA0B5}
.vhq-page .form input:focus,.vhq-page .form select:focus,.vhq-page .form textarea:focus{border-color:var(--primary)}
.vhq-page .form-note{color:var(--muted)}
.vhq-page .form-success{background:#fff;border-color:var(--tint-2)}
.vhq-page .form-success h3{color:var(--ink)}
.vhq-page .form-success p{color:var(--muted)}
.vhq-lead{color:var(--muted);max-width:46ch;margin:0 0 1.4rem}
@media (max-width:960px){.vhq-page .contact-grid{grid-template-columns:1fr}}

/* форма заявки — индиго-плашка как statement--blue («Почему мы») */
.vhq-page .vhq-form-card{position:relative;overflow:hidden;border-radius:22px;padding:clamp(26px,3.2vw,42px);
  background:linear-gradient(158deg,var(--primary),var(--blue) 62%,#2668D8);
  box-shadow:0 24px 52px -18px rgba(48,84,228,.5)}
.vhq-page .vhq-form-card::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.25))}
.vhq-why{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);padding:10px 16px;border-radius:100px;margin-bottom:1.15rem}
.vhq-why::before{content:"";width:28px;height:2.5px;border-radius:2px;background:#fff;flex:none}
.vhq-page .vhq-form-card .vhq-lead{color:#fff;font-weight:700}
.vhq-page .vhq-form-card .form label{color:#fff;font-weight:700}
.vhq-page .vhq-form-card .form input,.vhq-page .vhq-form-card .form select,.vhq-page .vhq-form-card .form textarea{
  color:#fff;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28)}
.vhq-page .vhq-form-card .form input::placeholder,.vhq-page .vhq-form-card .form textarea::placeholder{color:rgba(255,255,255,.9);font-weight:600}
.vhq-page .vhq-form-card .form input:focus,.vhq-page .vhq-form-card .form select:focus,.vhq-page .vhq-form-card .form textarea:focus{border-color:#fff}
.vhq-page .vhq-form-card .form select option{color:var(--ink);font-weight:400}
.vhq-page .vhq-form-card .form-note{color:#fff;font-weight:700}
.vhq-page .vhq-form-card .btn-primary{background:#fff;color:var(--primary);box-shadow:0 14px 30px -14px rgba(10,16,50,.5)}
.vhq-page .vhq-form-card .btn-primary:hover{background:#F3F5FF}
.vhq-page .vhq-form-card .form-success{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.vhq-page .vhq-form-card .form-success h3{color:#fff}
.vhq-page .vhq-form-card .form-success p{color:rgba(255,255,255,.86)}
.vhq-page .vhq-form-card .only{color:#fff}