/* ==========================================================================
   PK VOIR — pages.css (внутренние страницы, pages/*.html)
   Complement to css/base.css (tokens, header, footer, modals).
   Palette/typography per design/DESIGN-CONTRACT.md v1.0.
   Правило: на тёмном фоне ТОЛЬКО белый текст (#FFFFFF) + янтарные акценты.
   ========================================================================== */

/* tokens fallback (same values as base.css — pages stay styled even if base.css absent) */
:root{
  --ink:#070B14; --ink-2:#0E1524; --amber:#E8A33D; --amber-hi:#FFD089;
  --teal:#2FB8A6; --azure:#3E7BFA; --paper:#F5EFE4; --mute:#EDE6DA;
  --on-dark:#FFFFFF;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-accent:'Unbounded','Manrope',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem;
  --maxw:1240px; --gutter:clamp(1rem,4vw,2.5rem);
  --radius:14px; --radius-sm:8px; --header-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* V2 motion/luxury tokens (mirror base.css) */
  --ease-lux:cubic-bezier(.16,1,.3,1);
  --dur-fast:.4s; --dur-med:.8s; --dur-slow:1.1s;
  --grain-opacity:.045;
}

/* ===== page scaffold ===== */
main.page{ display:block; padding-bottom:var(--sp-6); position:relative; z-index:10; }

/* длинные неразрывные токены (URL, имена файлов) не должны ломать раскладку */
p, li, td, th, .doc-title, .doc-note, .doc-meta, .source-line, .note, .map-note,
.faq-src, .stub-note, .req-card p, .req-card address, .plot-item .pname, .plot-item .paddr{
  overflow-wrap:break-word; word-wrap:break-word; word-break:break-word; hyphens:auto;
}
.mono{ overflow-wrap:anywhere; }

/* header: на мобильных прячем иконку ЛК (она есть в мобильном меню) и сжимаем зазоры */
@media (max-width:560px){
  /* V2 mobile: шапка = logo + поиск + 1 CTA + бургер (иконку ЛК НЕ прячем —
     она тач-цель); тач-цели >=44px задаёт base.css @media(hover:none) */
  .header-inner{ gap:.35rem; padding-inline:20px; }
  .header-actions{ gap:.3rem; }
  .header-actions a.icon-btn{ display:grid; }
  .logo-txt b{ font-size:.95rem; }
}

/* nav dropdown (Проекты) — дополняет base.css .main-nav */
.nav-dd{ position:relative; }
.nav-dd > a .dd-caret{ font-size:.6em; opacity:.7; margin-left:.1rem; }
.dd-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,6px);
  min-width:300px; background:rgba(14,21,36,.97); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:.5rem; box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:250;
}
.nav-dd.open .dd-panel, .nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.dd-panel::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.dd-panel a{
  display:block; padding:.7rem .85rem; border-radius:10px; color:#fff; font-size:.86rem; font-weight:600;
}
.dd-panel a:hover, .dd-panel a[aria-current="page"]{ background:rgba(232,163,61,.12); color:#fff; }
.dd-panel a span{ display:block; font-family:var(--font-mono); font-size:.64rem; font-weight:400; color:var(--paper); margin-top:.15rem; }
.dd-panel a::after{ display:none; }

/* mobile submenu */
.mobile-sub{ margin:.2rem 0 .4rem; padding-left:1rem; border-left:2px solid rgba(232,163,61,.35); display:flex; flex-direction:column; gap:0; }
.mobile-sub-link{ font-size:1rem !important; font-weight:500 !important; color:#fff !important; padding:.45rem 0 !important; border-bottom:none !important; }

/* page hero — asymmetric, left-aligned (анти-slop: не центрированная троица).
   Хлебные крошки выше уже отступают от фиксированной шапки. */
.page-hero{ padding:var(--sp-5) 0 var(--sp-6); position:relative; overflow:hidden; }
.page-hero .hero-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.page-hero h1{
  font-size:clamp(2.4rem,6.2vw,4.8rem); font-weight:900; letter-spacing:-0.04em;
  line-height:1.0; margin-bottom:var(--sp-3); text-wrap:balance;
}
.page-hero .hero-lead{ color:#fff; max-width:52ch; font-size:clamp(1rem,1.2vw,1.2rem); font-weight:200; line-height:1.8; }
.hero-kicker{
  font-family:var(--font-body); font-weight:400; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--sp-3); display:flex; align-items:center; gap:.8rem;
}
.hero-kicker::before{ content:""; width:2.6rem; height:1px; background:linear-gradient(90deg,var(--amber),transparent); box-shadow:0 0 10px rgba(232,163,61,.55); }
.hero-side{ display:flex; flex-direction:column; gap:.85rem; align-items:flex-start; padding-bottom:.4rem; }
.hero-glow{ position:absolute; width:560px; height:560px; border-radius:50%; pointer-events:none; filter:blur(120px); opacity:.16; right:-140px; top:-180px; background:var(--amber); z-index:-1; }
.hero-glow.teal{ background:var(--teal); right:auto; left:-200px; top:40%; }

/* sections */
.sec{ padding:var(--sp-6) 0; position:relative; }
.sec + .sec{ border-top:1px solid rgba(255,255,255,.06); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.sec-head h2{ margin:0; max-width:22ch; }
.sec-head .sec-note{ max-width:38ch; color:var(--paper); font-size:.92rem; }
.sec-title-line{ display:flex; align-items:center; gap:1rem; }
.sec-title-line::before{ content:""; width:2.6rem; height:2px; background:linear-gradient(90deg,var(--amber),transparent); flex:0 0 auto; }

/* СТРОГОЕ ПРАВИЛО ЗАКАЗЧИКА: на тёмном фоне текст ТОЛЬКО #FFFFFF или --paper (#F5EFE4).
   Цветные (amber/teal/azure) — только линии, рамки, иконки, плашки — не сам текст. */
main.page .note, main.page .source-line, main.page .map-note, main.page .faq-src,
main.page .hero-kicker + p .note, .plot-item .pmeta, .doc-meta, .stub-note, .req-card p,
.wiz-draft-note, .acc-empty p, .news-body p, .tl-num, .product-cat, .portal p{
  color:var(--paper);
}
.note b, .source-line b{ color:#fff; }
.breadcrumbs, .breadcrumbs a{ color:var(--paper); }
.breadcrumbs [aria-current]{ color:#fff; }
/* .tag (base.css) — янтарный ТЕКСТ: переопределяем на белый, цвет остаётся у рамки/фона */
.tag, .tag.teal, .tag.azure{ color:#fff !important; }
/* декоративные гигантские цифры (svc-num) — не читаемый текст, но делаем белыми полупрозрачными */

/* чипы/тэги в flex-колонках не должны растягиваться на всю ширину */
.portal-body .tag, .svc-card .tag, .card .tag, .hero-side .tag, .acc-panel .tag,
.wiz-panel .tag, .offer-price .tag{ align-self:flex-start; }

/* honest claim badges (юр-дисциплина сумм) */
.claim{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; padding:.3rem .7rem; border-radius:999px; border:1px solid rgba(232,163,61,.55); color:#fff; background:rgba(232,163,61,.08); vertical-align:middle; }
.claim.calc{ border-color:rgba(62,123,250,.55); color:#fff; background:rgba(62,123,250,.08); }
.claim.unverified{ border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.08); }
.claim-dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); flex:0 0 auto; }
.claim.calc .claim-dot{ background:var(--azure); }
.claim.unverified .claim-dot{ background:#fff; }
.money{ font-family:var(--font-accent); font-weight:700; color:#fff; }
.source-line{ font-family:var(--font-mono); font-size:.72rem; color:var(--paper); line-height:1.6; margin-top:.8rem; }
.source-line b{ color:#fff; font-weight:600; }

/* V2 mobile-fix: сворачиваемый дисклеймер (details) вместо высокой плашки —
   честная оговорка видна в summary, полный текст — по тапу. */
.demo-banner.demo-details{ display:block; padding:.8rem .95rem; }
.demo-banner.demo-details summary{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; list-style:none; min-height:44px; }
.demo-banner.demo-details summary::-webkit-details-marker{ display:none; }
/* шеврон — «это раскрывается» (приёмка: триггер не считывался как кликабельный) */
.demo-banner.demo-details summary::after,
.demo-banner.geo-details summary::after{
  content:""; flex:0 0 auto; margin-left:auto; align-self:center;
  width:8px; height:8px; border-right:1.5px solid rgba(255,255,255,.6);
  border-bottom:1.5px solid rgba(255,255,255,.6);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-med) var(--ease-lux);
}
.demo-banner.demo-details[open] summary::after,
.demo-banner.geo-details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.demo-banner.demo-details summary .demo-ico{ margin-top:.1rem; }
.demo-banner.demo-details .demo-full{ display:block; margin-top:.6rem; font-size:.82rem; line-height:1.55; }
.demo-banner.geo-details{ display:block; }
.demo-banner .demo-txt{ flex:1 1 auto; min-width:0; }
.demo-banner.geo-details summary{ display:flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none; font-size:.82rem; line-height:1.45; min-height:44px; }
/* тач-цель summary глобально (в т.ч. «Смета и расчёт» на главной) */
summary{ min-height:44px; }
.demo-banner.geo-details summary::-webkit-details-marker{ display:none; }
.demo-banner.geo-details summary .demo-ico{ margin-top:0; }
.demo-banner.geo-details .geo-note{ display:block; margin-top:.55rem; font-size:.78rem; line-height:1.5; }
.demo-banner.geo-details[open]{ align-items:flex-start; }

/* demo banner */
.demo-banner{ display:flex; gap:.7rem; align-items:flex-start; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:.9rem 1.1rem; font-size:.86rem; color:#fff; margin-bottom:var(--sp-3); }
.demo-banner .demo-ico{ flex:0 0 auto; color:var(--amber-hi); font-family:var(--font-mono); font-weight:700; }

/* ===== cards (shared) ===== */
.card{
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  padding:var(--sp-3); position:relative; overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(232,163,61,.4); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.card p{ color:var(--paper); font-size:.9rem; }
.card-idx{ font-family:var(--font-accent); font-size:.8rem; color:var(--paper); letter-spacing:.1em; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); }
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); }

/* stat tiles */
.stat{ padding:var(--sp-3); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); background:rgba(255,255,255,.03); }
.stat .num{ font-family:var(--font-accent); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem); color:#fff; line-height:1.1; }
/* V2: янтарь — только КРУПНЫЕ hero-цифры и цены (цифры разрешены правилом).
   Юр-реквизиты (ОГРН/ИНН/ОКВЭД в .grid-4) остаются тёпло-белыми на десктопе
   И мобиле — нет пестроты, паритет сохранён (правка vision-QC). */
.hero-side .stat .num{ color:var(--amber-hi); }
.stat .lbl{ font-size:.82rem; color:var(--paper); margin-top:.35rem; }

/* ===== reveal animation hooks (GSAP targets, safe without JS) ===== */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ==========================================================================
   1. about.html — горизонтальный таймлайн-лента
   ========================================================================== */
.tl-outer{ position:relative; }
.tl-sticky{ position:sticky; top:calc(var(--header-h) + 1rem); z-index:5; }
.tl-progress-track{ height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin-top:.9rem; }
.tl-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); border-radius:3px; }
.tl-rail{ display:flex; gap:var(--sp-3); overflow-x:auto; padding:var(--sp-4) 0 var(--sp-3); scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--amber) transparent; }
.tl-fade{ position:relative; }
.tl-fade::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:70px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(7,11,20,.92)); z-index:4; transition:opacity .3s; }
.tl-fade.at-end::after{ opacity:0; }
.tl-rail .tl-card{ display:flex; flex-direction:column; }
.tl-rail .tl-card .card{ display:flex; flex-direction:column; flex:1; }
.tl-rail .tl-card .card p:last-child{ margin-top:auto; }
.tl-rail::-webkit-scrollbar{ height:6px; }
.tl-rail::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:6px; }
.tl-card{ flex:0 0 clamp(260px,30vw,340px); scroll-snap-align:start; }
.tl-year{ font-family:var(--font-accent); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); color:#fff; line-height:1; margin-bottom:.7rem; }
.tl-card .card{ height:100%; }
.tl-num{ font-family:var(--font-mono); font-size:.7rem; color:var(--paper); letter-spacing:.14em; }

/* numbered principles */
.principles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); counter-reset:pr; }
.principle{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:var(--sp-3); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); background:rgba(255,255,255,.025); counter-increment:pr; }
.principle::before{ content:counter(pr,decimal-leading-zero); font-family:var(--font-accent); font-weight:700; font-size:1.4rem; color:var(--paper); line-height:1; }
.principle h3{ font-size:1.05rem; margin-bottom:.3rem; }
.principle p{ font-size:.88rem; color:var(--paper); margin:0; }

/* ==========================================================================
   2. projects.html — карты-порталы со stagger-reveal и параллаксом
   ========================================================================== */
.portal-grid{ display:grid; gap:var(--sp-3); }
.portal{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); min-height:340px;
  border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.1);
  background:var(--ink-2); text-decoration:none; position:relative; isolation:isolate;
  transition:border-color .3s, transform .3s var(--ease);
}
.portal:hover{ border-color:rgba(232,163,61,.5); transform:translateY(-3px); }
.portal-body{ padding:clamp(1.4rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:flex-end; gap:.8rem; z-index:2; }
.portal h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin:0; color:#fff; }
.portal p{ color:var(--paper); font-size:.94rem; max-width:46ch; }
.portal-cta{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:800; font-size:.9rem; color:#fff; text-decoration:underline; text-underline-offset:4px; }
.portal-cta::after{ content:"→"; transition:transform .25s var(--ease); }
.portal:hover .portal-cta::after{ transform:translateX(6px); }
.portal-art{ position:relative; overflow:hidden; }
.portal-art .parallax-layer{ position:absolute; inset:-12%; will-change:transform; }
.portal-go{ position:absolute; inset:0; z-index:3; }
.portal-go:focus-visible{ outline:2px solid var(--amber); outline-offset:-4px; border-radius:20px; }

/* portal art: zakroma — поле/прилавок (CSS) */
.art-zakroma{ background:radial-gradient(120% 90% at 70% 20%, rgba(232,163,61,.3), transparent 60%), linear-gradient(180deg,#141019 0%, #1c1408 55%, #241a0a 100%); }
.art-zakroma .furrow{ position:absolute; left:-10%; right:-10%; height:2px; background:linear-gradient(90deg,transparent, rgba(232,163,61,.55), transparent); }
.art-zakroma .grain{ position:absolute; width:6px; height:6px; border-radius:50% 50% 50% 0; background:var(--amber-hi); opacity:.8; transform:rotate(45deg); }

/* portal art: adventures — горизонт неба/моря */
.art-adventures{ background:linear-gradient(180deg,#0b1424 0%, #16324a 46%, #0e2233 47%, #08131f 100%); }
.art-adventures .sun{ position:absolute; width:120px; height:120px; border-radius:50%; right:18%; top:16%; background:radial-gradient(circle, var(--amber-hi), var(--amber) 55%, transparent 72%); filter:blur(2px); opacity:.9; }
.art-adventures .wave{ position:absolute; left:-20%; right:-20%; height:3px; background:linear-gradient(90deg,transparent, rgba(47,184,166,.5), transparent); }
.art-adventures .glider{ position:absolute; width:0; height:0; border-left:26px solid transparent; border-right:26px solid transparent; border-bottom:9px solid rgba(255,255,255,.85); left:22%; top:30%; transform:rotate(-8deg); filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }

/* portal art: AI-OS — решётка узлов */
.art-aios{ background:radial-gradient(90% 80% at 30% 30%, rgba(62,123,250,.22), transparent 60%), linear-gradient(180deg,#070d1a, #0a1120); }
.art-aios .node{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--azure); box-shadow:0 0 14px rgba(62,123,250,.9); }
.art-aios .node.t{ background:var(--teal); box-shadow:0 0 14px rgba(47,184,166,.9); }
.art-aios .link{ position:absolute; height:1px; background:linear-gradient(90deg, rgba(62,123,250,.6), rgba(47,184,166,.25)); transform-origin:left center; }

/* full invest project list */
.invest-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); }
.invest-item{ border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm); padding:1.1rem; background:rgba(255,255,255,.02); transition:border-color .2s, background .2s; }
.invest-item:hover{ border-color:rgba(47,184,166,.4); background:rgba(47,184,166,.05); }
.invest-item h3{ font-size:.98rem; margin-bottom:.4rem; }
.invest-item p{ font-size:.82rem; color:var(--paper); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ==========================================================================
   3. project-zakroma.html — «поле/прилавок»: чипы-фильтры + витрина
   ========================================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-3); }
.chip{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; padding:.5rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; transition:.2s; }
.chip:hover{ border-color:var(--amber); color:#fff; background:rgba(232,163,61,.12); }
/* ОСОЗНАННОЕ ИСКЛЮЧЕНИЕ (зафиксировано по vision-QC): сплошная янтарная заливка
   разрешена ДВУМ состояниям — CTA-кнопке и ВЫБРАННОМУ чипу-фильтру (selected-state).
   Текст на янтаре тёмный (контраст), янтарь нигде не используется как цвет ТЕКСТА. */
.chip[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:700; }
.chip-count{ color:var(--amber-hi); font-weight:600; }
.chip[aria-pressed="true"] .chip-count{ color:var(--ink); }
.product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); }
.product{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.03); transition:transform .25s var(--ease), border-color .25s; }
.product:hover{ transform:translateY(-4px); border-color:rgba(232,163,61,.45); }
.product-img{ height:120px; position:relative; background:linear-gradient(160deg, rgba(232,163,61,.16), rgba(47,184,166,.08)); display:grid; place-items:center; }
.product-img .glyph{ font-size:2.2rem; }
.product-body{ padding:.9rem 1rem 1.1rem; }
.product-body h3{ font-size:.92rem; margin-bottom:.25rem; }
.product-price{ font-family:var(--font-accent); font-weight:700; color:#fff; font-size:.95rem; }
.product-cat{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); display:block; margin-bottom:.4rem; }
.product[hidden]{ display:none; }

/* SVG flow diagram */
.flow-wrap{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); background:rgba(255,255,255,.02); padding:var(--sp-3); overflow-x:auto; }
.flow-wrap svg{ min-width:720px; width:100%; height:auto; }
.flow-node rect{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.22); stroke-width:1; rx:10; }
.flow-node text{ fill:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; }
.flow-node .sub{ fill:#F5EFE4; font-family:var(--font-body); font-weight:400; font-size:10.5px; }
.flow-node.hot rect{ stroke:var(--amber); fill:rgba(232,163,61,.1); }
.flow-edge{ stroke:var(--teal); stroke-width:1.6; fill:none; stroke-dasharray:5 5; animation:flowdash 1.4s linear infinite; }
@keyframes flowdash{ to{ stroke-dashoffset:-20; } }

/* cashback / UDS blocks */
.uds-panel{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--sp-3); align-items:stretch; }
.uds-phone{ border:1px solid rgba(255,255,255,.14); border-radius:22px; background:linear-gradient(170deg,#101828,#0a0f1c); padding:1rem; max-width:300px; width:100%; margin-inline:auto; }
.uds-phone .scr{ border-radius:14px; background:#0c1322; border:1px solid rgba(255,255,255,.08); padding:.9rem; font-size:.78rem; }
.uds-row{ display:flex; justify-content:space-between; gap:.5rem; padding:.42rem 0; border-bottom:1px dashed rgba(255,255,255,.14); color:#fff; }
.uds-row b{ color:#fff; font-weight:700; white-space:nowrap; }
.cashback-badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:#fff; border:1px solid rgba(47,184,166,.55); border-radius:999px; padding:.25rem .7rem; background:rgba(47,184,166,.08); }

/* 8 функций модуля — нумерованные плитки */
.func{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); background:rgba(255,255,255,.028); padding:1.1rem 1rem; position:relative; overflow:hidden; transition:border-color .25s, transform .25s var(--ease), background .25s; min-height:96px; display:flex; flex-direction:column; justify-content:flex-end; }
.func:hover{ border-color:rgba(232,163,61,.45); background:rgba(232,163,61,.06); transform:translateY(-3px); }
.func .fn{ position:absolute; top:.35rem; right:.6rem; font-family:var(--font-accent); font-weight:700; font-size:1.7rem; color:rgba(255,255,255,.16); line-height:1; transition:color .25s; }
.func:hover .fn{ color:rgba(255,255,255,.34); }
.func .lbl{ color:#fff; font-weight:600; font-size:.88rem; line-height:1.35; position:relative; z-index:1; }

/* budget split bars */
.budget-bars{ display:flex; flex-direction:column; gap:.9rem; }
.bbar{ }
.bbar-top{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.35rem; }
.bbar-top .money{ font-size:.95rem; }
.bbar-track{ height:10px; border-radius:10px; background:rgba(255,255,255,.07); overflow:hidden; }
.bbar-fill{ height:100%; border-radius:10px; width:0; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); transition:width 1.1s var(--ease); }
.bbar.t2 .bbar-fill{ background:linear-gradient(90deg,var(--teal),#6fd8ca); }
.bbar.t3 .bbar-fill{ background:linear-gradient(90deg,var(--azure),#83aaff); }

/* compare table */
.cmp-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.cmp-table th,.cmp-table td{ padding:.75rem .9rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.cmp-table th{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); font-weight:500; }
.cmp-table td.good{ color:#fff; font-weight:600; }
.cmp-table td.bad{ color:var(--paper); }
.table-scroll{ overflow-x:auto; border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); }
.table-scroll .cmp-table{ min-width:640px; }

/* ==========================================================================
   4. project-adventures.html — «горизонт»: параллакс-слои неба/моря
   ========================================================================== */
.horizon{ position:relative; height:clamp(340px,52vh,520px); overflow:hidden; border-radius:20px; border:1px solid rgba(255,255,255,.1); margin-bottom:var(--sp-4); }
.horizon .layer{ position:absolute; inset:-8% -4%; will-change:transform; }
.hz-sky{ background:linear-gradient(180deg,#0a1220 0%, #1d3a55 52%, #e8a33d33 62%, #0e2233 63%, #081320 100%); }
.hz-sun{ position:absolute; width:150px; height:150px; border-radius:50%; left:58%; top:34%; background:radial-gradient(circle,var(--amber-hi),var(--amber) 52%,transparent 70%); filter:blur(1px); }
.hz-sea{ position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg,#0d2438,#081522); }
.hz-sea::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(47,184,166,.09) 0 2px, transparent 2px 16px); }
.hz-boat{ position:absolute; bottom:30%; left:16%; width:86px; height:26px; }
.hz-boat .hull{ position:absolute; bottom:0; left:0; right:0; height:12px; border-radius:0 0 14px 14px; background:#fff; opacity:.92; }
.hz-boat .sail{ position:absolute; bottom:10px; left:34px; width:0; height:0; border-left:26px solid rgba(255,255,255,.9); border-bottom:34px solid transparent; }
.hz-wake{ position:absolute; bottom:27%; left:2%; width:34%; height:2px; background:linear-gradient(90deg,transparent,rgba(47,184,166,.8)); }
.hz-glider{ position:absolute; top:16%; left:24%; }
.hz-glider .wing{ width:0; height:0; border-left:34px solid transparent; border-right:34px solid transparent; border-bottom:12px solid rgba(255,255,255,.9); transform:rotate(-6deg); filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.hz-caption{ position:absolute; left:0; right:0; bottom:0; padding:var(--sp-3) var(--sp-4); background:linear-gradient(180deg,transparent,rgba(4,8,15,.85)); z-index:3; }
.hz-caption h1{ font-size:clamp(1.8rem,4.5vw,3.4rem); margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hz-caption p{ color:#fff; max-width:52ch; margin:.4rem 0 0; text-shadow:0 1px 8px rgba(0,0,0,.7); }

/* hover-tilt service cards */
.tilt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); perspective:900px; }
.tilt{ transform-style:preserve-3d; transition:transform .18s var(--ease), border-color .3s; }
.tilt .card-face{ padding:var(--sp-3); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); background:linear-gradient(165deg,rgba(47,184,166,.07),rgba(255,255,255,.02)); height:100%; }
.tilt:hover .card-face{ border-color:rgba(47,184,166,.45); }
.tilt h3{ display:flex; align-items:center; gap:.55rem; font-size:1.05rem; }
.tilt .ico{ font-size:1.3rem; }
.tilt p{ font-size:.87rem; color:var(--paper); }
.tilt .price-line{ font-family:var(--font-mono); font-size:.76rem; color:#fff; margin-top:.7rem; border-left:2px solid var(--teal); padding-left:.5rem; }

/* ==========================================================================
   5. project-ai-os.html — живая SVG-схема нейросети
   ========================================================================== */
.nn-stage{ border:1px solid rgba(255,255,255,.09); border-radius:20px; background:radial-gradient(80% 70% at 50% 30%, rgba(62,123,250,.08), transparent 60%), var(--ink-2); padding:var(--sp-3); position:relative; overflow:hidden; }
.nn-stage svg{ width:100%; height:auto; display:block; }
.nn-edge{ stroke:rgba(62,123,250,.35); stroke-width:1.2; }
.nn-edge.lit{ stroke:var(--amber); stroke-width:2; filter:drop-shadow(0 0 6px rgba(232,163,61,.8)); }
.nn-node circle{ fill:var(--ink); stroke:var(--azure); stroke-width:1.6; transition:stroke .3s, fill .3s; }
.nn-node.lit circle{ stroke:var(--amber); fill:rgba(232,163,61,.16); }
.nn-node text{ fill:#fff; font-family:var(--font-display); font-weight:700; font-size:12px; text-anchor:middle; }
.nn-node .sub{ fill:#F5EFE4; font-family:var(--font-mono); font-size:9.5px; }
.nn-pulse{ fill:var(--amber-hi); opacity:.9; }
.nn-legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.nn-legend button{ font-family:var(--font-mono); font-size:.74rem; padding:.45rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; transition:.2s; }
.nn-legend button:hover{ border-color:var(--azure); color:#fff; }
.nn-legend button[aria-pressed="true"]{ background:var(--azure); border-color:var(--azure); color:#fff; }

/* offer composition */
.offer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); align-items:start; }
.offer-price{ border:1px solid rgba(62,123,250,.4); border-radius:var(--radius); background:linear-gradient(165deg,rgba(62,123,250,.1),rgba(255,255,255,.02)); padding:var(--sp-4); }
.offer-price .from{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); }
.offer-price .sum{ font-family:var(--font-accent); font-weight:700; font-size:clamp(2rem,4.5vw,3rem); color:#fff; line-height:1.05; margin:.3rem 0; }
.offer-list li{ display:flex; gap:.6rem; padding:.5rem 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:.92rem; color:#fff; }
.offer-list li::before{ content:"◆"; color:var(--azure); font-size:.7rem; margin-top:.25rem; }

/* ==========================================================================
   6. map.html — Leaflet карта участков
   ========================================================================== */
.map-shell{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--sp-3); align-items:start; }
.map-frame{ height:clamp(420px,64vh,680px); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.12); position:relative; background:var(--ink-2); z-index:1; }
#map{ width:100%; height:100%; background:#0e1524; }
.leaflet-container{ font-family:var(--font-body); background:#0e1524; }
.leaflet-popup-content-wrapper{ background:var(--ink-2); color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.leaflet-popup-tip{ background:var(--ink-2); }
.leaflet-popup-content{ margin:.8rem .9rem; font-size:.84rem; line-height:1.5; }
.leaflet-popup-content a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.leaflet-popup-content .pmeta{ font-family:var(--font-mono); font-size:.68rem; color:var(--paper); margin-top:.4rem; }
.map-side{ display:flex; flex-direction:column; gap:var(--sp-2); max-height:clamp(420px,64vh,680px); }
.map-search{ display:flex; gap:.5rem; }
.map-search input{ flex:1; padding:.65rem .9rem; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:.9rem; }
.map-search input:focus{ outline:none; border-color:var(--amber); }
.map-filters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.plot-list{ overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.45rem; padding-right:.25rem; scrollbar-width:thin; scrollbar-color:var(--amber) transparent; position:relative;
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
.plot-list::-webkit-scrollbar{ width:6px; }
.plot-list::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:6px; }
.plot-item{ border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:.7rem .85rem; background:rgba(255,255,255,.025); cursor:pointer; transition:.18s; text-align:left; width:100%; color:#fff; }
.plot-item:hover, .plot-item.active{ border-color:var(--amber); background:rgba(232,163,61,.08); }
.plot-item .pname{ font-weight:600; font-size:.86rem; display:block; }
.plot-item .paddr{ font-size:.76rem; color:var(--paper); display:block; margin-top:.15rem; }
.plot-item .pmeta{ font-family:var(--font-mono); font-size:.66rem; color:var(--paper); display:flex; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
.plot-item .pmeta .st-ok{ color:#fff; }
.plot-item .pmeta .st-warn{ color:#fff; }
.map-count{ font-family:var(--font-mono); font-size:.72rem; color:var(--paper); }
.cluster-ico{ background:var(--amber); color:var(--ink); border-radius:50%; display:grid; place-items:center; font-family:var(--font-accent); font-weight:700; font-size:.8rem; border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.map-empty{ padding:var(--sp-4); text-align:center; color:#fff; }
.map-note{ font-family:var(--font-mono); font-size:.72rem; color:var(--paper); margin-top:.6rem; line-height:1.6; }
/* leaflet controls dark tweak */
.leaflet-control-zoom a{ background:var(--ink-2) !important; color:#fff !important; border-color:rgba(255,255,255,.15) !important; }
.leaflet-control-attribution{ background:rgba(7,11,20,.85) !important; color:#F5EFE4 !important; font-size:10px !important; }
.leaflet-control-attribution a{ color:#fff !important; text-decoration:underline; }
@media (max-width:900px){
  .map-shell{ grid-template-columns:1fr; }
  .map-side{ max-height:none; }
  .plot-list{ max-height:340px; }
}

/* ==========================================================================
   7. documents.html / reporting.html — каталог файлов
   ========================================================================== */
.docs-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:var(--sp-3); }
.docs-toolbar input[type="search"]{ flex:1; min-width:200px; padding:.65rem .95rem; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:.9rem; }
.docs-toolbar input[type="search"]:focus{ outline:none; border-color:var(--amber); }
.docs-toolbar select{ padding:.62rem .8rem; border-radius:10px; background:var(--ink-2); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:.85rem; }
.doc-list{ display:flex; flex-direction:column; gap:.55rem; }
.doc-row{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:.9rem; align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm); padding:.8rem 1rem; background:rgba(255,255,255,.022); transition:.2s; }
.doc-row:hover{ border-color:rgba(232,163,61,.4); background:rgba(232,163,61,.05); }
.doc-ico{ width:44px; height:44px; border-radius:9px; display:grid; place-items:center; font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.04em; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:#fff; }
.doc-ico.pdf{ color:#fff; border-color:rgba(255,120,90,.5); }
.doc-ico.doc,.doc-ico.docx{ color:#fff; border-color:rgba(90,140,255,.5); }
.doc-ico.xls,.doc-ico.xlsx{ color:#fff; border-color:rgba(60,200,120,.5); }
.doc-title{ font-weight:600; font-size:.92rem; color:#fff; display:block; }
.doc-note{ font-size:.78rem; color:var(--paper); display:block; margin-top:.15rem; }
.doc-meta{ font-family:var(--font-mono); font-size:.68rem; color:var(--paper); display:flex; gap:.6rem; margin-top:.3rem; flex-wrap:wrap; }
.doc-dl{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:#fff; border:1px solid rgba(232,163,61,.55); border-radius:999px; padding:.45rem .95rem; white-space:nowrap; transition:.2s; text-decoration:none; }
.doc-dl:hover{ background:var(--amber); color:var(--ink); }
.docs-empty{ padding:var(--sp-4); text-align:center; color:var(--paper); }
/* reporting timeline */
.rep-years{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); }
.rep-year{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:var(--sp-3); background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:.6rem; transition:.25s var(--ease); }
.rep-year:hover{ border-color:rgba(47,184,166,.45); transform:translateY(-3px); }
.rep-year .yr{ font-family:var(--font-accent); font-weight:700; font-size:1.7rem; color:#fff; }
.rep-year .dl{ margin-top:auto; }

/* ==========================================================================
   8. news.html — masonry + дата-бейджи
   ========================================================================== */
.news-masonry{ columns:3 300px; column-gap:var(--sp-2); }
.news-card{ break-inside:avoid; margin-bottom:var(--sp-2); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); overflow:hidden; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); display:block; color:#fff; transition:transform .25s var(--ease), border-color .25s; }
.news-card:hover{ transform:translateY(-4px); border-color:rgba(232,163,61,.45); color:#fff; }
.news-cover{ height:130px; position:relative; background:linear-gradient(150deg, rgba(232,163,61,.22), rgba(62,123,250,.12) 60%, rgba(47,184,166,.15)); overflow:hidden; }
.news-cover::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.04) 14px 15px); }
.news-date{ position:absolute; top:.8rem; left:.8rem; z-index:2; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; background:rgba(7,11,20,.85); border:1px solid rgba(232,163,61,.6); color:#fff; padding:.3rem .65rem; border-radius:999px; }
.news-body{ padding:1rem 1.1rem 1.2rem; }
.news-body h3{ font-size:1rem; margin-bottom:.45rem; line-height:1.3; }
.news-body p{ font-size:.85rem; color:var(--paper); margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.news-more{ display:inline-block; margin-top:.7rem; font-size:.82rem; font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* news item */
.article{ max-width:760px; margin-inline:auto; }
.article header{ margin-bottom:var(--sp-4); }
.article h1{ font-size:clamp(1.7rem,4vw,2.8rem); }
.article .art-meta{ font-family:var(--font-mono); font-size:.74rem; color:var(--paper); display:flex; gap:1rem; flex-wrap:wrap; }
.article .art-body p{ color:#fff; font-size:1.02rem; }
.article .art-body ul{ list-style:disc; padding-left:1.3rem; color:#fff; }
.article .art-body li{ margin-bottom:.4rem; }
.art-back{ display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--sp-4); font-weight:700; color:#fff; font-size:.92rem; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   9. faq.html — аккордеон
   ========================================================================== */
.faq-groups{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-3); position:sticky; top:calc(var(--header-h) + .4rem); z-index:20; background:linear-gradient(180deg, var(--ink) 70%, transparent); padding:.6rem 0; max-width:920px; margin-inline:auto; justify-content:flex-start; }
.faq-acc{ display:flex; flex-direction:column; gap:.5rem; max-width:920px; margin-inline:auto; }
.faq-item{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-sm); background:rgba(255,255,255,.022); overflow:hidden; }
.faq-item.open{ border-color:rgba(232,163,61,.4); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; background:transparent; border:0; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.98rem; padding:1rem 1.2rem; }
.faq-q-text{ display:flex; gap:.7rem; align-items:baseline; }
.faq-num{ font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--paper); flex:0 0 auto; min-width:1.4rem; }
.faq-q:hover{ color:#fff; background:rgba(232,163,61,.08); }
.faq-q .sign{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; font-size:.9rem; transition:transform .25s var(--ease), background .2s; }
.faq-item.open .faq-q .sign{ transform:rotate(45deg); background:var(--amber); border-color:var(--amber); color:var(--ink); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner{ padding:0 1.2rem 1.1rem; color:#fff; font-size:.94rem; }
.faq-a-inner ul{ list-style:disc; padding-left:1.2rem; margin:.5rem 0; }
.faq-item[hidden]{ display:none; }
.faq-src{ font-family:var(--font-mono); font-size:.68rem; color:var(--paper); margin-top:.6rem; }

/* ==========================================================================
   10. join.html — пошаговый мастер
   ========================================================================== */
.wizard{ max-width:760px; margin-inline:auto; }
.wiz-steps{ display:flex; gap:.4rem; margin-bottom:.6rem; }
.wiz-steps .ws{ flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; }
.wiz-steps .ws i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); transition:width .4s var(--ease); }
.wiz-steps .ws.done i{ width:100%; }
.wiz-steps .ws.current i{ width:45%; }
.wiz-labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.7rem; color:var(--paper); margin-bottom:var(--sp-3); gap:.4rem; }
.wiz-labels span{ flex:1; text-align:center; }
.wiz-labels span.on{ color:#fff; font-weight:700; }
.wiz-panel{ border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); padding:clamp(1.2rem,3vw,2rem); }
.wiz-panel[hidden]{ display:none; }
.wiz-panel h2{ font-size:1.4rem; }
.wiz-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:var(--sp-3); }
.wiz-draft-note{ font-family:var(--font-mono); font-size:.72rem; color:var(--paper); margin-top:1rem; }
.doc-check{ display:flex; flex-direction:column; gap:.55rem; margin:1rem 0; }
.doc-check label{ display:flex; gap:.65rem; align-items:flex-start; font-size:.9rem; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:.75rem .9rem; cursor:pointer; transition:.18s; }
.doc-check label:hover{ border-color:rgba(232,163,61,.4); }
.doc-check input{ accent-color:var(--amber); width:17px; height:17px; margin-top:.15rem; flex:0 0 auto; }
.wiz-resume{ border:1px dashed rgba(232,163,61,.5); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:var(--sp-3); display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; background:rgba(232,163,61,.06); }
.fees{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); margin:1rem 0; }
.fee{ border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); padding:1rem; text-align:center; }
.fee .sum{ font-family:var(--font-accent); font-weight:700; font-size:1.25rem; color:var(--amber-hi); }
.fee .lbl{ font-size:.78rem; color:var(--paper); margin-top:.3rem; }
.wiz-final{ text-align:center; padding:var(--sp-3) 0; }
.wiz-final .big-check{ width:72px; height:72px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; font-size:2rem; background:rgba(47,184,166,.15); border:1px solid var(--teal); color:#fff; }

/* ==========================================================================
   11. contacts.html
   ========================================================================== */
.req-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
.req-card{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-sm); padding:1rem 1.2rem; background:rgba(255,255,255,.025); }
.req-card h3{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); font-weight:500; margin-bottom:.5rem; }
.req-card p, .req-card address{ font-style:normal; font-size:.9rem; color:#fff; margin:0; line-height:1.7; font-family:var(--font-mono); }
.req-card .big{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
.contact-form{ max-width:640px; }
.contact-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4); align-items:start; }
.office-links{ display:flex; flex-direction:column; gap:.5rem; }
.office-link{ display:flex; gap:.7rem; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-sm); padding:.8rem 1rem; color:#fff; font-size:.88rem; transition:.2s; }
.office-link:hover{ border-color:var(--amber); background:rgba(232,163,61,.06); color:#fff; }
.office-link .pin{ color:#fff; }

/* ==========================================================================
   12. services.html
   ========================================================================== */
.svc-hero-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); }
.svc-card{ padding:var(--sp-4) var(--sp-3); border-radius:var(--radius); border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; }
.svc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),transparent); }
.svc-card.teal::before{ background:linear-gradient(90deg,var(--teal),transparent); }
.svc-card.azure::before{ background:linear-gradient(90deg,var(--azure),transparent); }
.svc-card h3{ font-size:1.2rem; }
.svc-card p{ font-size:.9rem; color:var(--paper); }
.svc-num{ font-family:var(--font-accent); font-weight:700; font-size:2.4rem; color:rgba(255,255,255,.08); position:absolute; right:1rem; top:.6rem; }

/* ==========================================================================
   13. account.html — личный кабинет (демо)
   ========================================================================== */
.acc-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--sp-3); align-items:start; }
.acc-tabs{ display:flex; flex-direction:column; gap:.3rem; border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:.6rem; background:rgba(255,255,255,.02); }
.acc-tabs button{ text-align:left; background:transparent; border:0; border-radius:9px; color:#fff; font-size:.9rem; font-weight:600; padding:.7rem .9rem; transition:.18s; }
.acc-tabs button:hover{ background:rgba(255,255,255,.06); color:#fff; }
.acc-tabs button[aria-selected="true"]{ background:rgba(232,163,61,.18); color:#fff; box-shadow:inset 2px 0 0 var(--amber); }
.acc-panel{ border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:clamp(1.2rem,3vw,2rem); background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); min-height:340px; }
.acc-panel[hidden]{ display:none; }
.acc-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8rem; padding:var(--sp-5) var(--sp-2); color:#fff; }
.acc-empty .hole{ width:76px; height:76px; border-radius:50%; border:1px dashed rgba(255,255,255,.4); display:grid; place-items:center; font-size:1.7rem; color:var(--paper); }
.acc-empty p{ max-width:44ch; font-size:.9rem; }
.acc-gate{ max-width:520px; margin:var(--sp-4) auto; }
.acc-user-line{ display:flex; align-items:center; gap:.8rem; margin-bottom:var(--sp-3); }
.acc-avatar{ width:46px; height:46px; border-radius:50%; background:conic-gradient(from 200deg,var(--amber),var(--teal),var(--azure),var(--amber)); display:grid; place-items:center; font-family:var(--font-accent); font-weight:700; color:var(--ink); font-size:1.1rem; }
@media (max-width:900px){ .acc-layout{ grid-template-columns:1fr; } .acc-tabs{ flex-direction:row; overflow-x:auto; } }

/* ===== responsive (pages) ===== */
@media (max-width:1080px){
  .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .invest-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .page-hero .hero-grid{ grid-template-columns:1fr; }
  .grid-3, .tilt-grid, .svc-hero-grid, .rep-years, .fees{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal{ grid-template-columns:1fr; min-height:0; }
  .portal-art{ min-height:180px; order:-1; }
  .uds-panel, .offer, .contact-cols, .req-grid{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; }
  .news-masonry{ columns:2 260px; }
}
@media (max-width:560px){
  .grid-2, .grid-3, .grid-4, .tilt-grid, .svc-hero-grid, .rep-years, .invest-list, .product-grid, .fees{ grid-template-columns:1fr; }
  .news-masonry{ columns:1; }
  .doc-row{ grid-template-columns:40px minmax(0,1fr); }
  .doc-dl{ grid-column:2; justify-self:start; }
  .sec{ padding:var(--sp-5) 0; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .flow-edge{ animation:none; }
  .js .reveal{ opacity:1; transform:none; }
  .tl-rail{ scroll-behavior:auto; }
}
/* локальная настройка «отключить анимацию» из account.html */
html.force-reduce .flow-edge{ animation:none; }
html.force-reduce .reveal{ opacity:1 !important; transform:none !important; }
html.force-reduce *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }

/* ==========================================================================
   CHROME COMPLIANCE — переопределение base.css для правила заказчика:
   на тёмном фоне ТЕКСТ только #FFFFFF или --paper (#F5EFE4);
   цветные amber/teal/azure — только линии, рамки, иконки, плашки.
   ========================================================================== */

/* контентные ссылки внутри main — белые с янтарным подчёркиванием (линия).
   V2 mobile-fix: НЕ трогать leaflet-контролы (их <a> получали янтарное
   подчёркивание под «+»/«−» зума — выглядело как баг). */
main.page a:not(.btn):not(.doc-dl):not(.news-card):not(.portal-go):not(.invest-item):not(.office-link):not([class*="leaflet"]){
  color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(232,163,61,.65);
}
main.page a:not(.btn):not(.doc-dl):not(.news-card):not(.portal-go):not(.invest-item):not(.office-link):not([class*="leaflet"]):hover{
  color:#fff; text-decoration-color:var(--amber);
}
.leaflet-control a{ text-decoration:none !important; }
main.page a.btn-primary{ color:var(--ink); text-decoration:none; }
main.page a.btn-teal{ color:var(--ink); text-decoration:none; }
main.page a.btn-ghost{ color:#fff; text-decoration:none; }
main.page a.btn-azure{ color:#fff; text-decoration:none; }
main.page a.invest-item{ color:#fff; text-decoration:none; }
main.page a.doc-dl{ color:#fff; text-decoration:none; }
main.page a.office-link{ color:#fff; text-decoration:none; }

/* шапка */
.logo-txt span{ color:var(--paper) !important; }
.main-nav a{ color:#fff; }
.main-nav a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.main-nav a[aria-current="page"]{ color:#fff; box-shadow:inset 0 -2px 0 var(--amber); }
.icon-btn kbd{ color:var(--paper); }
.dd-panel a:hover, .dd-panel a[aria-current="page"]{ background:rgba(232,163,61,.12); color:#fff; }

/* мобильное меню */
.mobile-nav a:hover{ color:#fff; background:rgba(232,163,61,.08); }

/* хлебные крошки (инжектятся chrome.js) */
.breadcrumbs a:hover{ color:#fff; }

/* футер */
.footer-col h4{ color:var(--paper); }
.footer-col a{ color:#fff; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-about p{ color:var(--paper); }
.footer-contacts{ color:var(--paper); }
.footer-contacts a{ color:#fff; text-decoration:underline; }
.footer-bottom{ color:var(--paper); }

/* модалки: поиск + auth (инжектятся chrome.js/auth.js) */
.tabs button{ color:var(--paper); }
.tabs button[aria-selected="true"]{ background:var(--amber); color:var(--ink); }
.field label{ color:var(--paper); }
.field input::placeholder, .field textarea::placeholder{ color:var(--paper); }
.consent{ color:var(--paper); }
.consent a{ color:#fff; }
.divider{ color:var(--paper); }
.search-results .sec{ color:var(--paper); }
.search-results li a{ color:#fff; text-decoration:none; }
.search-results li a:hover, .search-results li a.active{ background:rgba(232,163,61,.16); color:#fff; }
.search-empty{ color:var(--paper); }
.search-hint{ color:var(--paper); }

/* листовка leaflet-popup: ссылки белые */
.leaflet-popup-content a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* статусные сообщения форм: цвет — только у плашки, текст белый */
.form-msg{ border-radius:10px; padding:.55rem .8rem; margin:.4rem 0 .8rem; }
.form-msg.err{ color:#fff; background:rgba(232,163,61,.12); border:1px solid rgba(232,163,61,.55); }
.form-msg.ok{ color:#fff; background:rgba(47,184,166,.12); border:1px solid rgba(47,184,166,.55); }
.form-msg:empty{ padding:0; border:0; background:none; }

/* faq: финальная CTA-карточка — по оси центрированной колонки аккордеона */
.faq-cta-wrap{ max-width:920px; margin-inline:auto; }
/* kbd-подсказка в кнопке поиска шапки — аккуратнее */
.icon-btn kbd{ font-size:.58rem; opacity:.85; }

/* ==========================================================================
   V2 «CINEMATIC LUXURY» — refinement-слой (победитель каскада).
   Воздух, экстремальная типографика, мягкие тени, refined-кнопки, mono→light.
   Правило заказчика: на тёмном ТЕКСТ только #FFF/#F5EFE4 (янтарь — цифры/цены).
   ========================================================================== */

/* — тело: лёгкий премиум-текст — */
main.page p, main.page li{ font-weight:200; line-height:1.8; }
main.page b, main.page strong{ font-weight:600; }

/* — заголовки секций: 900 tight, крупнее — */
.sec-head h2{ font-weight:900; letter-spacing:-0.04em; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.04; }
.sec-head .sec-note{ font-weight:200; font-size:.95rem; line-height:1.75; }
.card h3, .portal h2{ letter-spacing:-0.025em; }
.portal h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:900; }

/* — mono → light Inter (v1 был перегружен моно-плашками). Моно оставлен ТОЛЬКО
     для мельчайших статусов/источников, белый, кегль мелкий. — */
.source-line, .req-card p, .req-card address, .faq-src, .tl-num,
.offer-price .from, .map-note, .doc-note{
  font-family:var(--font-body); font-weight:300; letter-spacing:.01em;
}
.source-line{ font-size:.78rem; line-height:1.7; color:var(--paper); }
.req-card p, .req-card address{ font-family:var(--font-body); font-weight:300; font-size:.9rem; line-height:1.75; }
.req-card h3{ font-family:var(--font-body); font-weight:400; letter-spacing:.22em; }
/* мельчайшие дата-бейджи/мета — моно оставлен, но белый и воздушный */
.doc-meta, .plot-item .pmeta, .art-meta, .news-date{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--paper); }

/* — refined-кнопки на внутренних страницах (base.css задаёт стиль; здесь —
     гарантируем белый текст у teal/azure-вариантов и единый hover-lift) — */
main.page a.btn-teal, main.page a.btn-azure{ color:#fff; }
main.page .btn{ transition:transform var(--dur-fast) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux), background var(--dur-med) var(--ease-lux), border-color var(--dur-med) var(--ease-lux), color var(--dur-fast); }

/* — карточки: мягче тени, плавнее hover-lift (не «жёсткий прямоугольник») — */
.card, .portal, .product, .news-card, .stat, .principle, .func, .invest-item, .doc-row, .rep-year{
  transition:transform var(--dur-med) var(--ease-lux), border-color var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux), background var(--dur-med) var(--ease-lux);
}
.card{
  background:linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.075); border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.28);
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(232,163,61,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 26px 60px rgba(0,0,0,.5), 0 0 40px rgba(232,163,61,.07);
}
.card p{ font-size:.92rem; }
.stat{ border-radius:18px; border-color:rgba(255,255,255,.075); }
.stat .num{ font-weight:900; letter-spacing:-0.035em; }
.portal{ border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.portal:hover{ transform:translateY(-5px); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(232,163,61,.08); }

/* — «дорогие» цифры/цены: янтарь разрешён (акцент-заголовок), glow-light — */
.money, .product-price, .fee .sum, .offer-price .sum, .price-box .price, .tl-year, .rep-year .yr, .stat .num{
  font-feature-settings:"tnum" 1;
}
.offer-price .sum{ text-shadow:0 0 44px rgba(255,208,137,.3); }

/* — hero-glow: мягче и атмосфернее (свет в кадре, не плоское пятно) — */
.hero-glow{ opacity:.2; filter:blur(130px); }

/* — magnetic hover CTA (JS в page-motion.js/scene.js двигает .btn-magnetic) — */
.btn-magnetic{ will-change:transform; transition:transform .35s var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux), background var(--dur-med) var(--ease-lux), border-color var(--dur-med) var(--ease-lux), color var(--dur-fast); }

/* — секции: больше воздуха между блоками — */
.sec{ padding:calc(var(--sp-6) + 1rem) 0; }
.sec + .sec{ border-top:1px solid rgba(255,255,255,.05); }

/* — breadcrumbs на внутренних: легче, воздушнее — */
main.page ~ * .breadcrumbs, .breadcrumbs{ font-family:var(--font-body); font-weight:300; letter-spacing:.08em; }

/* — claim-бейджи: тоньше и воздушнее (юр-дисциплина сохранена, текст белый) — */
.claim{ font-family:var(--font-body); font-weight:400; font-size:.66rem; letter-spacing:.1em; padding:.28rem .75rem; }

@media (prefers-reduced-motion: reduce){
  .btn-magnetic{ transform:none !important; }
  .card:hover, .portal:hover{ transform:none; }
}

/* ==========================================================================
   V2 MOBILE-FIX (390x844) — правки мобильной приёмки.
   Единая сетка 20px, тач-цели >=44px, карта в первый экран, join-компакт.
   ========================================================================== */
@media (max-width:640px){
  /* DEFECT 6: единая мобильная сетка отступов 20px */
  .wrap{ padding-inline:20px; }

  /* DEFECT 3: контент НЕ под шапкой. Крошки (siblings перед main) УЖЕ отступают
     от шапки (padding-top header+.8rem) → page-hero НЕ добавляет header ещё раз
     (иначе мёртвая зона ~120px — дефект приёмки). Только компактный отступ. */
  .page-hero{ padding-top:var(--sp-2); padding-bottom:var(--sp-4); }
  .breadcrumbs{ padding-top:calc(var(--header-h) + .7rem); }
  main.page{ padding-top:0; }

  /* DEFECT 2: заголовки страниц — мобильный кегль, не «пол-экрана» */
  .page-hero h1{ font-size:clamp(1.7rem,7.5vw,2.4rem); line-height:1.1; letter-spacing:-0.03em; }
  .page-hero .hero-lead{ font-size:.95rem; line-height:1.6; }
  .page-hero .hero-grid{ gap:var(--sp-3); }
  .hero-side{ flex-direction:row; flex-wrap:wrap; gap:.6rem; }
  .hero-side .stat{ flex:1 1 45%; }
  /* поля поиска/инпуты — тач-цель 44px */
  .map-search input, .docs-toolbar input[type="search"], #faqSearch, .field input, .field select, .field textarea{
    min-height:46px; font-size:.95rem;
  }

  /* DEFECT 8: КАРТА — h1 компактнее, карта в ПЕРВЫЙ экран (>=55vh), тач-цели */
  .map-shell{ grid-template-columns:1fr; gap:var(--sp-2); }
  .map-frame{ height:58vh; min-height:340px; }
  #map{ height:100%; }
  .map-side{ max-height:none; }
  .plot-list{ max-height:44vh; }
  .leaflet-control-zoom a{ width:44px !important; height:44px !important; line-height:44px !important; font-size:22px !important; }
  .leaflet-control-zoom{ margin:10px !important; }
  .leaflet-control-attribution{ font-size:9px !important; padding:2px 6px !important; max-width:70vw; right:0; }
  .leaflet-bottom.leaflet-right{ left:0; }   /* атрибуция не обрезается у левого края */
  .map-search input, .map-filters .chip{ min-height:44px; }
  .plot-item{ padding:.85rem .9rem; min-height:56px; }

  /* DEFECT 9: тач-цели >=44px — чипы/фильтры/ссылки-строки */
  .chip{ min-height:44px; display:inline-flex; align-items:center; padding:.6rem 1rem; font-size:.8rem; }
  .doc-row{ min-height:60px; }
  .doc-dl{ min-height:44px; display:inline-flex; align-items:center; }
  .office-link{ min-height:52px; }
  .nn-legend button{ min-height:44px; padding:.6rem 1rem; }
  .filter-bar{ gap:.5rem; }

  /* DEFECT 10: JOIN — чип-claim крупнее; перенос по ПРОБЕЛАМ, URL не рвём
     (убираем висячий слэш), текст НЕ обрезаем (юр-честность). */
  .claim{
    font-size:.72rem; line-height:1.4; padding:.5rem .8rem;
    white-space:normal; word-break:normal; overflow-wrap:normal;
    hyphens:none;
  }
  .claim .claim-dot{ margin-top:.15rem; }
  .demo-banner{ font-size:.8rem; line-height:1.5; padding:.8rem .95rem; gap:.6rem; }
  .demo-banner .demo-ico{ font-size:.9rem; }
  .wiz-steps{ margin-top:.4rem; }
  .wiz-steps .ws{ height:5px; }
  .wiz-labels{ font-size:.62rem; }
  .wiz-panel h2{ font-size:1.2rem; }
  .fees{ grid-template-columns:1fr; gap:.5rem; }
  .fee{ padding:.85rem; min-height:44px; }

  /* DEFECT 8: карта должна попадать в первый экран (>=50-60% viewport).
     Компактим hero (kicker/h1/lead/diskлеймер) — карта поднимается выше. */
  .hero-kicker{ margin-bottom:.6rem; font-size:.68rem; }
  .page-hero h1{ margin-bottom:.7rem; }
  .page-hero .hero-lead{ font-size:.88rem; line-height:1.5; margin-bottom:.5rem; }
  .page-hero .demo-banner{ font-size:.7rem; line-height:1.38; padding:.6rem .75rem; margin-bottom:0; gap:.5rem; }
  /* карта: hero максимально плотный, чтобы канва попала в первый экран (>=55vh) */
  .page-hero{ padding-top:.4rem; padding-bottom:var(--sp-2); }
  .page-hero h1{ font-size:clamp(1.5rem,6.6vw,2rem); margin-bottom:.5rem; }
  .page-hero .hero-lead{ font-size:.82rem; line-height:1.45; margin-bottom:.4rem; }
  .hero-kicker{ margin-bottom:.45rem; }
  .map-frame{ height:64vh; min-height:380px; }
  .sec{ padding:var(--sp-4) 0; }
  .map-note{ font-size:.72rem; margin-top:.5rem; }

  /* DEFECT 10: join demo-плашка — компактнее типографикой (смысл/честность целы) */
  .wiz-panel .demo-banner, main.page .demo-banner{ font-size:.78rem; line-height:1.5; padding:.75rem .9rem; }
  /* единый вертикальный ритм: line-height карточек/плашек ~1.5, без «разгона» */
  .wiz-resume{ line-height:1.5; gap:.7rem; }
  .wiz-resume .btn{ line-height:1.2; }
  /* ритм FAQ: убрать «дыру» после hero (padding-bottom -> ~как соседние зазоры) */
  .page-hero{ padding-bottom:var(--sp-2); }
  .hero-side{ padding-bottom:0; gap:.75rem; }
  /* степпер: текущий шаг читается как «идёт» (не полузаливка-баг) — пульс */
  .wiz-steps .ws.current i{ width:100%; opacity:.5; }

  /* карточки/сетки — в одну колонку, воздух */
  .card, .stat, .func, .product, .news-card, .rep-year, .principle{ border-radius:16px; }
  .svc-hero-grid, .grid-3, .tilt-grid, .invest-list, .product-grid, .rep-years, .req-grid,
  .grid-2, .grid-4{ grid-template-columns:1fr !important; }
  .portal{ grid-template-columns:1fr; }
  .portal-art{ min-height:160px; }
  .uds-panel, .offer, .contact-cols{ grid-template-columns:1fr; }
  .news-masonry{ columns:1; }
  .cmp-table th, .cmp-table td{ padding:.7rem .6rem; font-size:.82rem; }
  .faq-groups{ gap:.4rem; }
  .faq-q{ padding:1rem; font-size:.94rem; }
  .acc-layout{ grid-template-columns:1fr; }
  .acc-tabs{ flex-direction:row; overflow-x:auto; }
  .acc-tabs button{ min-width:120px; }
}