/* hero — ported from the approved design; colours come only from theme variables. */
.hero{padding:clamp(36px,5vw,72px) 0 clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lead{font-size:clamp(1.06rem,.5vw + .95rem,1.25rem);color:var(--muted);max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.hero-micro{display:flex;flex-wrap:wrap;gap:8px}
.appwin{background:var(--chrome);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;color:var(--chrome-text)}
.appwin-top{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--chrome-2);font:600 .78rem/1 var(--fd);color:var(--chrome-muted)}
.appwin-top .tools{display:flex;gap:6px}
.appwin-top .tools span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--chrome-3)}
.appwin-top .tools span.on{background:var(--accent);color:var(--on-accent)}
.appwin-top .tools svg{width:15px;height:15px}
.appwin-top .ttl{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appwin-body{display:grid;grid-template-columns:minmax(0,1fr) 230px}
.cv{position:relative;background:
conic-gradient(var(--checker) 25%,var(--white) 0 50%,var(--checker) 0 75%,var(--white) 0) 0 0/24px 24px;min-height:100%;display:grid;place-items:center;padding:14px}
.cv .stage{width:100%;max-width:440px;height:auto}
.layers{background:var(--chrome);padding:14px 12px;border-left:1px solid color-mix(in srgb,var(--white) 6%,transparent);display:flex;flex-direction:column;gap:8px}
.layers-h{display:flex;justify-content:space-between;align-items:center;font:700 .8rem/1 var(--fd);color:var(--white);padding:2px 4px 6px}
.layers-h small{color:var(--chrome-muted);font-weight:600}
.layers ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lyr{width:100%;display:grid;grid-template-columns:44px 1fr 26px;align-items:center;gap:10px;padding:6px;border-radius:11px;border:1px solid transparent;background:var(--chrome-2);color:var(--chrome-text);text-align:left;cursor:pointer;font:inherit;transition:background-color .25s,border-color .25s,opacity .25s}
.lyr:hover{border-color:var(--chrome-3)}
.lyr .th{width:44px;height:44px;border-radius:7px;background:var(--white);overflow:hidden}
.lyr .th svg{width:100%;height:100%}
.lyr .nm{font:700 .84rem/1.15 var(--fd);color:var(--white);display:block}
.lyr .bm{font-size:.72rem;color:var(--chrome-muted)}
.lyr .eye{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;color:var(--white)}
.lyr .eye svg{width:18px;height:18px}
.lyr .eye .closed{display:none}
.lyr[aria-pressed="false"]{opacity:.55}
.lyr[aria-pressed="false"] .eye .open{display:none}
.lyr[aria-pressed="false"] .eye .closed{display:block}
.lyr.cur{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--chrome-2))}
.layers-foot{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.layers-foot button{flex:1;height:36px;border-radius:9px;border:1px solid var(--chrome-3);background:transparent;color:var(--white);font:700 .78rem/1 var(--fd);cursor:pointer}
.layers-foot button:hover{background:var(--chrome-2)}
.layers-status{font-size:.74rem;color:var(--chrome-muted);padding:0 4px;min-height:1.2em}
.stage .L{transition:opacity .6s var(--ease),transform .6s var(--ease),clip-path .9s var(--ease);transform-box:fill-box;transform-origin:50% 60%}
.js .stage .L:not(.on){opacity:0}
.stage .L-shade{mix-blend-mode:multiply}
.stage.lined .L-sketch.on{opacity:.26}
.stage[data-anim] .L-flats:not(.on){transform:scale(.96)}
.stage[data-anim] .L-shade:not(.on){clip-path:polygon(0 0,0 0,0 0)}
.stage[data-anim] .L-shade.on{clip-path:polygon(0 0,220% 0,0 220%)}
.stage[data-anim] .L-light:not(.on){transform:scale(1.04)}
.stage[data-anim] .L-light.on{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sun-light) 80%,transparent))}
.stage[data-anim] .L-draw{stroke-dasharray:1 2;stroke-dashoffset:1.001;transition:stroke-dashoffset 1.1s var(--ease),opacity .5s}
.stage[data-anim] .L-draw.on{stroke-dashoffset:0}

/* ---------- Homepage layout variants (docs/home-layouts.md) ---------- */
.hero--split-reverse .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
.hero--centered .hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hero--centered .hero-center .lead { margin-inline: auto; }
.hero--centered .hero-ctas, .hero--centered .hero-micro { justify-content: center; }
.hero--centered .appwin { width: 100%; max-width: 940px; margin-inline: auto; }
.hero--compact .hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.hero--compact { padding-bottom: clamp(24px, 3vw, 40px); }
.hero--form .hero-form .news-card { box-shadow: var(--shadow-lg); }
.hero--form .hero-form .form { gap: 12px; }
.news-card .h3c { margin-bottom: .2em; }
.window-sec .appwin { max-width: 980px; margin-inline: auto; }
@media (max-width: 991px) {
  .hero--split-reverse .hero-grid { grid-template-columns: minmax(0, 1fr); }
}