/* /web/ — Сайты. Shell and tokens live in ../shared/base.css. */

/* Пин героя по образцу hub: герой sticky внутри .hero-pin (высоту задаёт main.js),
   страница стоит, пока иглу собирается, затем докручивается до контента. */
.hero-pin{position:relative;}
@media (prefers-reduced-motion:no-preference){
  .hero-pin:not(.no-pin) .hero{position:sticky;top:var(--stick,0px);min-height:100svh;}
}

/* hero: faint 12-column grid + mono column numbers */
.hero-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;}
.hero-grid-in{position:relative;max-width:var(--max);height:100%;margin:0 auto;}
.hero-grid-in::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to right,rgba(var(--c-web-rgb),.09) 0,rgba(var(--c-web-rgb),.09) 1px,transparent 1px,transparent calc(100%/12));}
.hero-cols{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 12px);display:flex;font-size:10px;color:rgba(var(--c-web-rgb),.55);}
.hero-cols span{flex:1 1 0;}

/* process blueprint: layers draw in per active step */
.bp{width:100%;height:calc(100% - 32px);}
.bp text{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em;}
.bp .ln-grid{stroke:var(--accent);stroke-opacity:.4;stroke-width:1;}
.bp .ln-frame{stroke:var(--subtle);stroke-width:1.5;}
.bp .ln-box{stroke:var(--subtle);stroke-width:1.5;}
.bp .ln-text{stroke:#C9C9C6;stroke-width:6;}
.bp .ln-lead{stroke:#C9C9C6;stroke-width:7;}
.bp .ln-btn{stroke:#FFFFFF;stroke-width:5;}
.bp .ln-foot{stroke:#F2F2F0;stroke-width:6;}
.bp .ln-foot-dim{stroke:#5E5E63;stroke-width:6;}
.bp .ln-ok{stroke:#1A7F37;stroke-width:2.5;}
.bp .t-grid{fill:var(--accent);fill-opacity:.75;font-size:9px;}
.bp .t-box{fill:var(--subtle);font-size:11px;}
.bp .t-ok{fill:#1A7F37;font-size:11px;}
.bp-draw{fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease);}
.bp-fade{opacity:0;transition:opacity .7s var(--ease);}
.bp-layer.is-on .bp-draw{stroke-dashoffset:0;}
.bp-layer.is-on .bp-fade{opacity:1;}

/* stack band */
.stack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;}
.stack li{border-top:1px solid var(--dark-line);padding:22px 0 26px;display:grid;gap:10px;align-content:start;}
.stack .mono{color:#8F8F95;}
.stack b{font-weight:400;font-size:19px;line-height:1.35;letter-spacing:-0.01em;color:#F2F2F0;}

/* deliverables */
.get{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--ink);}
.get li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line);}
.get .mono{color:var(--accent);padding-top:3px;}
.get b{display:block;font-weight:500;font-size:18px;letter-spacing:-0.01em;margin-bottom:4px;}
.get p{margin:0;color:var(--muted);font-size:15px;}

@media (max-width:900px){
  .stack{grid-template-columns:repeat(2,minmax(0,1fr));}
  .get{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hero-cols{display:none;}
  .stack{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .hero-pin .hero{position:static;}
  .bp-draw,.bp-fade{transition:none;}
}