.hero-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--accent);color:var(--ink);font-size:28px;margin-bottom:18px;box-shadow:0 14px 30px -10px rgba(245,165,36,.7);animation:floaty 5s ease-in-out infinite}

.sv-intro{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(460px,48vw,680px)}
.sv-intro-text{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(48px,6vw,110px) var(--gutter)}
.sv-intro-text h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em}
.sv-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.8;color:var(--ink)}
.sv-lead b{color:var(--green)}
.sv-intro-img{position:relative;overflow:hidden;min-height:340px}
.sv-intro-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.sv-intro:hover .sv-intro-img img{transform:scale(1.04)}

.sv-num{display:block;font-size:clamp(56px,7vw,110px);line-height:1;font-weight:800;color:transparent;-webkit-text-stroke:2px var(--green);opacity:.35;margin-bottom:10px}
.sv-num.light{-webkit-text-stroke-color:var(--accent);opacity:.6}
.sv-block{display:grid;grid-template-columns:minmax(260px,.75fr) 2fr;gap:clamp(32px,6vw,120px);padding-block:clamp(64px,8vw,130px);border-top:1px solid var(--line)}
.sv-alt{background:var(--bg-soft);box-shadow:0 0 0 100vmax var(--bg-soft);clip-path:inset(0 -100vmax);border-top:0}
.sv-side{position:sticky;top:110px;align-self:start}
.sv-side h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em}
.sv-rows,.sv-steps{list-style:none;margin:0;padding:0}
.sv-rows li{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.sv-rows li:first-child{padding-top:0}
.sv-ico{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--green);color:var(--green);font-size:24px;transition:background .3s,color .3s}
.sv-rows li:hover .sv-ico{background:var(--green);color:#fff}
.sv-rows h3,.sv-steps h3{font-size:clamp(18px,1.6vw,22px);margin-bottom:6px}
.sv-rows p,.sv-steps p{font-size:16px;color:var(--muted);line-height:1.7}
.sv-steps{counter-reset:s;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px)}
.sv-steps li{display:flex;gap:20px;padding:28px 0;border-top:2px solid var(--line);transition:border-color .3s}
.sv-steps li:hover{border-color:var(--accent)}
.sv-step-n{flex:none;font-size:30px;font-weight:800;color:var(--green);line-height:1}

.sv-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:#fff}
.sv-shot{position:relative;padding:0;border:0;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;background:var(--bg-soft)}
.sv-band-b .sv-shot{aspect-ratio:auto;height:clamp(260px,26vw,420px)}
.sv-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.sv-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,18,12,.55));opacity:0;transition:opacity .4s}
.sv-shot:hover img{transform:scale(1.06)}
.sv-shot:hover::after{opacity:1}

.sv-value{position:relative;overflow:hidden;padding-block:clamp(64px,8vw,130px);background:var(--grad-dark);color:rgba(255,255,255,.85);isolation:isolate}
.sv-value .grid-bg{z-index:-1}
.sv-value h2{color:#fff;font-size:clamp(28px,3.4vw,46px);margin-bottom:clamp(28px,4vw,48px)}
.sv-value ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0}
.sv-value li{display:flex;gap:14px;padding:26px clamp(16px,2vw,32px) 26px 0;border-top:1px solid rgba(255,255,255,.18);font-size:17px;line-height:1.65}
[dir=rtl] .sv-value li{padding:26px 0 26px clamp(16px,2vw,32px)}
.sv-value li .ic{color:var(--accent);width:26px;height:26px;margin-top:2px}
.sv-value b{color:#fff}

.sv-index{padding-block:clamp(56px,7vw,110px)}
.sv-index-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.sv-pager{display:flex;gap:28px;flex-wrap:wrap}
.sv-pager a{display:flex;align-items:center;gap:14px;font-weight:800;color:var(--ink);transition:color .2s}
.sv-pager a:hover{color:var(--green)}
.sv-pager span{display:flex;flex-direction:column}
.sv-pager small{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
[dir=rtl] .sv-pager small{letter-spacing:0}
.sv-pager .ic{width:26px;height:26px;color:var(--green)}
.sv-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.sv-list a{display:flex;align-items:center;gap:12px;padding:18px 10px;border-bottom:1px solid var(--line);font-weight:700;color:var(--body);transition:color .2s,background .2s,padding .3s var(--ease)}
.sv-list a .ic{color:var(--green);width:20px;height:20px}
.sv-list a:hover{color:var(--green);padding-inline-start:18px}
.sv-list a.active{color:var(--green);background:var(--green-50)}

@media (max-width:1080px){
  .sv-list{grid-template-columns:repeat(2,1fr)}
  .sv-block{grid-template-columns:1fr}
  .sv-side{position:static}
}
@media (max-width:860px){
  .sv-intro{grid-template-columns:1fr}
  .sv-intro-img{order:-1;min-height:280px}
  .sv-steps{grid-template-columns:1fr}
  .sv-band{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .sv-band .sv-shot:first-child{grid-column:span 2}
}
@media (max-width:560px){
  .sv-list{grid-template-columns:1fr}
}