/* ==========================================================================
ЗЗД · Лендинг проектов — локальные стили проекта
--------------------------------------------------------------------------
Подключать ПОСЛЕ brand.css и theme.css:
Правило кита: brand.css/theme.css — общий слой, их не правим.
Всё локальное — здесь и ТОЛЬКО на токенах темы.
Версия: 1.0.0 · 2026-07-15
========================================================================== */
:root{
--lek: var(--zzd-lek);
--mer: var(--zzd-mer);
--maxw: 1280px;
--ease: cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
/* Лендинг чуть крупнее базового кегля — та же «комфортная» плотность, что
даёт +10% в app-shell, но без zoom (он ломает fixed-атмосферу при скролле). */
body{ font-size:clamp(15.5px, .22vw + 14px, 18.5px); }
.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }
/* ============================ ТУМБЛЕР ТЕМЫ ============================== */
.toggle{
position:fixed; top:20px; right:24px; z-index:5; cursor:pointer;
font-family:var(--lek); font-weight:600; font-size:13.5px; color:var(--muted);
background:var(--card); border:1px solid var(--line-2); border-radius:100px;
padding:9px 16px; display:inline-flex; align-items:center; gap:8px;
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.toggle:hover{ color:var(--gold-2); border-color:var(--gold); }
@media(max-width:640px){ .toggle{ top:12px; right:12px; padding:7px 12px; font-size:12.5px; } }
/* ================================ HERO ================================== */
.hero{ padding:clamp(64px,9vh,110px) 0 clamp(40px,6vh,64px); }
.hero__logo{ width:clamp(150px,17vw,208px); display:block; filter:var(--logo-filter); margin-bottom:clamp(28px,4vh,44px); }
.eyebrow{
font-family:var(--lek); font-weight:600; text-transform:uppercase;
letter-spacing:.28em; font-size:11.5px; color:var(--gold); margin:0;
}
.hero h1{
font-family:var(--lek); font-weight:800; letter-spacing:-.025em; line-height:1.0;
font-size:clamp(38px,6.4vw,76px); color:var(--head); margin:.22em 0 0;
}
/* Вторая строка заголовка — тоньше и приглушённее: издательский контраст веса */
.hero h1 .thin{ display:block; font-weight:300; color:var(--muted); letter-spacing:-.015em; }
.hero__lead{ color:var(--muted); font-size:17.5px; line-height:1.65; max-width:60ch; margin:26px 0 0; }
.hero__lead b{ color:var(--ink); font-weight:400; border-bottom:1px solid var(--gold-soft); }
/* Тонкая золотая линейка-разделитель */
.rule{ height:1px; border:0; margin:clamp(38px,5vh,54px) 0 0;
background:linear-gradient(90deg, var(--gold), var(--line) 42%, transparent 78%); }
/* ================================ KPI =================================== */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:clamp(34px,5vh,48px); }
.kpi{
position:relative; overflow:hidden; border-radius:16px; padding:22px 24px; color:#fff;
background:linear-gradient(160deg,#0e3467 0%,#071c37 68%);
box-shadow:0 20px 40px -28px rgba(6,34,71,.5);
}
.kpi::after{
content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; opacity:.5;
background:radial-gradient(circle, rgba(209,158,104,.16), transparent 70%);
}
.kpi .v{ font-family:var(--lek); font-weight:800; font-size:clamp(32px,3vw,44px);
letter-spacing:-.02em; line-height:1; color:var(--gold-2); }
.kpi .l{ font-family:var(--mer); font-size:14px; line-height:1.45; color:#b9c6dc; margin-top:9px; }
/* ============================== СЕКЦИИ ================================== */
.sec{ padding:clamp(52px,7vh,78px) 0 0; }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.sec__kicker{ font-family:var(--lek); font-weight:700; text-transform:uppercase; letter-spacing:.16em;
font-size:11px; color:var(--gold); margin:0 0 8px; }
.sec h2{ font-family:var(--lek); font-weight:700; font-size:clamp(24px,2.7vw,32px); letter-spacing:-.02em;
color:var(--head); margin:0; }
.sec__note{ font-size:14.5px; color:var(--dim); margin:0; max-width:46ch; }
/* ============================== КАРТОЧКИ ================================ */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.grid--bots{ grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); }
.pcard{
position:relative; overflow:hidden; display:flex; flex-direction:column;
background:var(--card); border:1px solid var(--line); border-radius:18px;
padding:24px 26px 20px; box-shadow:var(--card-shadow);
transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
/* Золотая полоска сверху — требует overflow:hidden на карточке (иначе отклеивается) */
.pcard::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg, var(--gold), rgba(209,158,104,0) 60%);
transform:scaleX(.34); transform-origin:0 50%;
transition:transform .38s var(--ease);
}
.pcard:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.pcard:hover::before{ transform:scaleX(1); }
.pcard:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.pcard__top{ display:flex; align-items:center; gap:8px; margin-bottom:14px; min-height:22px; }
.pcard__tag{ font-family:var(--lek); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
font-size:10px; color:var(--dim); }
.pcard h3{ font-family:var(--lek); font-weight:700; font-size:20.5px; letter-spacing:-.015em;
color:var(--head); margin:0 0 9px; line-height:1.25; }
.pcard p{ font-family:var(--mer); font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 18px; }
.pcard__who{ font-family:var(--lek); font-size:12.5px; color:var(--dim); margin:-10px 0 16px; }
.pcard__foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pcard__dom{ font-family:var(--lek); font-size:12.5px; color:var(--dim); word-break:break-all; }
.pcard__go{ font-family:var(--lek); font-weight:600; font-size:13.5px; color:var(--gold);
white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.pcard__go .arr{ transition:transform .28s var(--ease); }
.pcard:hover .pcard__go .arr{ transform:translateX(4px); }
/* Бот-карточка — компактнее */
.pcard--bot h3{ font-size:18px; }
.pcard--bot p{ font-size:13.5px; margin-bottom:14px; }
/* ===================== СТАТУС ДИЗАЙНА (скрытый слой) ==================== */
/* По умолчанию лендинг — чистая витрина. Кнопка «Статус дизайна» подсвечивает,
что уже в фирменном стиле, а что в очереди. Служебный слой, не для гостей. */
.badge{
display:none; align-items:center; gap:5px; margin-left:auto;
font-family:var(--lek); font-weight:600; font-size:10px; text-transform:uppercase;
letter-spacing:.1em; padding:3px 9px; border-radius:100px; white-space:nowrap;
}
.badge .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge--ok{ color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-soft); }
.badge--todo{ color:var(--dim); background:transparent; border:1px solid var(--line-2); }
.badge--ext{ color:var(--dim); background:transparent; border:1px dashed var(--line-2); }
body.show-status .badge{ display:inline-flex; }
body.show-status .pcard[data-style="todo"]{ border-style:dashed; }
.statusbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.statusbtn{
font-family:var(--lek); font-weight:600; font-size:13px; cursor:pointer; color:var(--muted);
background:transparent; border:1px solid var(--line-2); border-radius:100px; padding:8px 15px;
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.statusbtn:hover{ color:var(--gold-2); border-color:var(--gold); }
.statusbtn[aria-pressed="true"]{ color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }
.legend{ display:none; gap:16px; flex-wrap:wrap; font-family:var(--lek); font-size:12px; color:var(--dim); }
body.show-status .legend{ display:flex; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:7px; height:7px; border-radius:50%; font-style:normal; }
/* =============================== ФУТЕР ================================== */
.foot{ margin-top:clamp(64px,9vh,104px); padding:34px 0 42px; border-top:1px solid var(--line); }
.foot__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot p{ font-family:var(--lek); font-size:12.5px; color:var(--dim); margin:0; line-height:1.6; }
.foot img{ width:26px; height:26px; opacity:.5; filter:var(--logo-filter); }
/* ============================ ПОЯВЛЕНИЕ ================================= */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .7s var(--ease) both; }
.rise[data-d="1"]{ animation-delay:.06s } .rise[data-d="2"]{ animation-delay:.12s }
.rise[data-d="3"]{ animation-delay:.18s } .rise[data-d="4"]{ animation-delay:.24s }
.rise[data-d="5"]{ animation-delay:.30s } .rise[data-d="6"]{ animation-delay:.36s }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important;
transition-duration:.001ms !important; }
.pcard:hover{ transform:none; }
}
@media(max-width:560px){
.pcard{ padding:20px 20px 18px; }
.hero__lead{ font-size:16px; }
}