/* Services: offer comparison (scripts/services/build.py, section "offers") */
.sv-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.sv-offer{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:32px;background:#fff}
.sv-offer.sv-featured{border:2px solid var(--p);box-shadow:0 16px 40px rgba(108,60,225,.12)}
.sv-offer h3{color:var(--ink);font-size:26px;line-height:1.2;margin:0 0 6px}
.sv-tag{font-weight:700;color:var(--p);margin:0 0 12px;font-size:17px}
.sv-for{color:var(--mut);font-size:15.5px;line-height:1.6;margin:0 0 18px}
.sv-list{list-style:none;padding:0;margin:0 0 24px;flex:1}
.sv-list li{color:var(--ink);position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.sv-list li:last-child{border-bottom:0}
.sv-list li:before{content:"";position:absolute;left:4px;top:15px;width:13px;height:7px;border-left:2.5px solid var(--p);border-bottom:2.5px solid var(--p);transform:rotate(-45deg)}
.sv-offer .fh-btn{text-align:center}
@media (max-width:860px){.sv-offers{grid-template-columns:1fr}.sv-offer{padding:24px}}

/* ---------- Services landing layout (sv-*). Built on .fh tokens from jx-products.css ---------- */
/* Hero: copy + CTAs left, proof list right */
.sv-hero{padding:80px 0 88px}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.sv-hero-copy .fh-h1{max-width:760px}
.sv-hero-ov .sv-hero-copy{max-width:820px}
.sv-hero .fh-sub{margin-bottom:18px}
.sv-who{color:#c4b5fd;font-weight:600;font-size:16.5px;line-height:1.5;margin:0 0 32px;max-width:620px}
.sv-hero .sv-actions{margin-top:28px;align-items:center}
.sv-hero .fh-btn-lg{box-shadow:0 14px 34px -12px rgba(124,58,237,.8)}
.sv-proof{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:28px 28px 8px}
.sv-proof-k{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd;margin:0 0 6px}
.sv-proof ul{list-style:none;padding:0;margin:0}
.sv-proof li{padding:16px 0 16px 34px;border-top:1px solid rgba(255,255,255,.12);position:relative}
.sv-proof li:first-child{border-top:0}
.sv-proof li:before{content:"";position:absolute;left:4px;top:22px;width:13px;height:7px;border-left:2.5px solid #a78bfa;border-bottom:2.5px solid #a78bfa;transform:rotate(-45deg)}
.sv-proof h3{color:#fff!important;font-size:17px;margin:0 0 4px}
.sv-proof p{color:#d9d2ec;font-size:15px;line-height:1.55;margin:0}

/* Proof strip under the overview hero */
.sv-strip{background:var(--tint);border-bottom:1px solid var(--line)}
.sv-strip-in{list-style:none;margin:0;padding:40px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.sv-strip-in li{border-left:2px solid var(--p);padding-left:18px}
.sv-strip-in h3{font-size:17px;margin:4px 0 6px}
.sv-strip-in p{font-size:15px;line-height:1.55;color:var(--mut);margin:0}
.sv-n{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--p)}

/* Service cards: services hub */
.sv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.sv-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 30px 28px;text-decoration:none!important;color:var(--ink);position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.sv-card:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--p),var(--p3));opacity:.25;transition:opacity .2s}
.sv-card:hover{border-color:var(--p3);box-shadow:0 22px 48px -24px rgba(108,60,225,.45);transform:translateY(-3px)}
.sv-card:hover:before{opacity:1}
.sv-card .sv-n{margin-bottom:18px}
.sv-card h3{font-size:22px;margin:0 0 10px}
.sv-card p{color:var(--mut);font-size:16px;line-height:1.6;margin:0 0 24px;flex:1}
.sv-arrow{font-weight:700;color:var(--p)!important;text-decoration:none!important}
.sv-arrow:after{content:" \2192";transition:margin .2s}
.sv-card:hover .sv-arrow:after,a.sv-arrow:hover:after{margin-left:4px}

/* Steps: three on the overview, four on detail pages */
.sv-steps{counter-reset:none}
.sv-steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.sv-step{box-shadow:0 1px 0 rgba(18,10,36,.02)}

/* Reference project */
.sv-case{background:#fff;border:1px solid var(--line);border-left:4px solid var(--p);border-radius:16px;padding:40px;max-width:900px}
.sv-case h2{font-size:clamp(24px,2.6vw,32px)}
.sv-case .fh-p{margin-bottom:18px}

/* Mid CTA and FAQ */
.sv-mid .fh-btn{box-shadow:0 12px 28px -14px rgba(108,60,225,.7)}
.sv-faq-sec .fh-narrow{margin:0 auto}
.sv-faq .fh-faq-item summary:focus-visible{outline:2px solid var(--p);outline-offset:4px;border-radius:4px}
.sv-faq .fh-faq-item[open] summary{color:var(--p)}

/* End band */
.sv-band{padding:88px 0}
.sv-band h2{font-size:clamp(30px,3.6vw,44px)}

/* Focus */
.sv a.fh-btn:focus-visible,.sv-card:focus-visible{outline:3px solid #c4b5fd;outline-offset:3px}

@media (max-width:991px){
 .sv-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .sv-strip-in{grid-template-columns:1fr 1fr}
 .sv-cards{grid-template-columns:minmax(0,1fr)}
 .sv-steps:has(> li:nth-child(3):last-child){grid-template-columns:1fr}
}
@media (max-width:640px){
 .sv-hero{padding:48px 0 56px}
 .sv-actions{flex-direction:column;align-items:stretch!important}
 .sv-actions .fh-btn,.sv-band .fh-btn,.sv-mid .fh-btn{width:100%;text-align:center}
 .sv-band .fh-actions{width:100%}
 .sv-strip-in{grid-template-columns:1fr;gap:24px;padding:32px 0}
 .sv-proof{padding:22px 20px 4px}
 .sv-case{padding:28px 22px}
 .sv-band{padding:64px 0 96px}
}
/* Client logo strip (service pages, below the hero) */
.sv-logos{padding:28px 0 8px}
.sv-logos-k{text-align:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;font-weight:700}
.sv-logos-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 38px;opacity:.8;filter:grayscale(1)}
.sv-logos-row img{width:auto;max-width:150px}