/* ================= SERVICES PAGE ================= */
.svhero{position:relative; padding:clamp(150px,17vh,210px) 0 clamp(46px,6vw,72px); overflow:hidden; isolation:isolate}
.svhero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(88% 120% at 84% -18%, rgba(0,112,192,.36), transparent 62%),
             radial-gradient(66% 90% at 6% 8%, rgba(230,168,0,.12), transparent 66%)}
.svhero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(78% 70% at 60% 20%,#000,transparent 92%);
  mask-image:radial-gradient(78% 70% at 60% 20%,#000,transparent 92%)}
.svhero-g{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:end}
.svhero h1{font-size:clamp(2.4rem,5.4vw,4.6rem); font-weight:900; letter-spacing:-.045em;
  line-height:1.05; margin:20px 0 0}
.svhero h1 b{color:var(--gold-hi); font-weight:900}
.svhero .sub{font-family:var(--fb); font-size:1.0625rem; line-height:2; color:var(--txt-2); max-width:46ch}
.svhero .sub strong{color:var(--txt); font-weight:700}

/* index chips = the page's own table of contents */
.svtoc{margin-top:clamp(38px,5vw,60px); border-top:1px solid var(--line-2); padding-top:26px}
.svtoc-h{font-size:.75rem; font-weight:800; letter-spacing:.2em; color:var(--txt-3); margin-bottom:18px}
.svtoc-l{display:flex; flex-wrap:wrap; gap:10px}
.svtoc-l a{display:inline-flex; align-items:center; gap:11px; padding:12px 17px;
  border:1px solid var(--line-2); border-radius:9px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease)}
.svtoc-l a:hover{border-color:rgba(230,168,0,.45); background:rgba(230,168,0,.06); transform:translateY(-2px)}
.svtoc-l i{font-style:normal; font-family:var(--fd); font-size:.75rem; font-weight:800;
  color:var(--gold); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.svtoc-l b{font-family:var(--fd); font-weight:700; font-size:.9375rem; color:var(--txt)}
.svtoc-l a:hover b{color:var(--gold-hi)}

/* ---- one service ---- */
.svp{border-top:1px solid var(--line-2); scroll-margin-top:96px}
.svp-in{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4.4vw,74px); padding-block:clamp(44px,6vw,86px); align-items:start}
.svp-side{position:sticky; top:112px}
.svp-n{display:block; font-family:var(--fd); font-size:.8125rem; font-weight:800;
  letter-spacing:.22em; color:var(--gold); margin-bottom:16px; font-variant-numeric:tabular-nums}
.svp-side h2{font-size:clamp(1.8rem,3.2vw,2.75rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.2; margin-bottom:16px}
.svp-lead{font-family:var(--fb); font-size:1.02rem; line-height:2; color:var(--txt-2);
  max-width:38ch; margin-bottom:26px}
.svp-long{font-family:var(--fb); font-size:1.09rem; line-height:2.08; color:var(--txt-2);
  max-width:64ch; margin-bottom:clamp(38px,4vw,56px)}
.svp-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,46px)}
.svp-col h4{font-size:.75rem; font-weight:800; letter-spacing:.18em; color:var(--gold);
  padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:20px}
.svp-del{list-style:none; display:flex; flex-direction:column; gap:11px}
.svp-del li{display:flex; gap:11px; font-size:.99rem; line-height:1.7; color:var(--txt-2)}
.svp-del li::before{content:""; flex:none; width:6px; height:6px; margin-top:.62em; border-radius:1px;
  background:var(--gold); transform:rotate(45deg)}
.svp-steps{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:16px}
.svp-steps li{counter-increment:s; position:relative; padding-inline-start:34px}
.svp-steps li::before{content:"0" counter(s); position:absolute; inset-inline-start:0; top:1px;
  font-family:var(--fd); font-size:.6875rem; font-weight:800; color:var(--gold-hi);
  border:1px solid rgba(230,168,0,.35); border-radius:5px; padding:2px 5px}
.svp-steps b{display:block; font-family:var(--fd); font-size:.9375rem; font-weight:800; margin-bottom:4px}
.svp-steps span{font-size:.875rem; line-height:1.75; color:var(--txt-3)}
.svp-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px; padding-top:20px;
  border-top:1px solid var(--line-2)}
.svp-meta div{font-size:.8125rem; color:var(--txt-3)}
.svp-meta div b{display:block; font-family:var(--fd); font-size:.6875rem; font-weight:800;
  letter-spacing:.16em; color:var(--gold); margin-bottom:5px}
.svp-meta div span{color:var(--txt-2)}

/* deep explanation blocks */
.svp-deep{margin-top:clamp(30px,3.4vw,44px); display:flex; flex-direction:column; gap:26px}
.svp-q{position:relative; padding-inline-start:20px}
.svp-q::before{content:""; position:absolute; inset-inline-start:0; top:6px; bottom:6px;
  width:2px; border-radius:2px; background:linear-gradient(var(--gold),rgba(230,168,0,0))}
.svp-q h5{font-family:var(--fd); font-size:.75rem; font-weight:800; letter-spacing:.16em;
  color:var(--gold); margin-bottom:9px}
.svp-q p{font-family:var(--fb); font-size:1.01rem; line-height:2; color:var(--txt-2); max-width:64ch}
.svp-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-2)}
.svp-tools b{width:100%; font-family:var(--fd); font-size:.6875rem; font-weight:800;
  letter-spacing:.16em; color:var(--txt-3); margin-bottom:4px}
.svp-tools span{font-size:.8125rem; font-weight:600; color:var(--txt-2);
  border:1px solid var(--line-2); border-radius:6px; padding:6px 12px; background:rgba(255,255,255,.02)}
.svp-faq{margin-top:26px; border-top:1px solid var(--line-2)}
.svp-faq details{border-bottom:1px solid var(--line-2)}
.svp-faq summary{list-style:none; cursor:pointer; padding:16px 0; display:flex; gap:14px;
  align-items:flex-start; justify-content:space-between;
  font-family:var(--fd); font-weight:700; font-size:.9375rem;
  color:var(--txt); transition:color .3s var(--ease)}
.svp-faq summary::-webkit-details-marker{display:none}
.svp-faq summary::before{content:"+"; order:2; flex:none; width:19px; height:19px; margin-top:1px;
  display:grid; place-items:center; font-family:var(--fd); font-weight:800; font-size:.9rem;
  color:var(--gold); border:1px solid rgba(230,168,0,.35); border-radius:5px; line-height:1;
  transition:transform .3s var(--ease)}
.svp-faq details[open] summary::before{transform:rotate(45deg)}
.svp-faq summary:hover{color:var(--gold-hi)}
.svp-faq p{font-family:var(--fb); font-size:.9063rem; line-height:1.95; color:var(--txt-3);
  padding:0 0 20px; max-width:62ch}

/* gold interruption between the two halves of the list */
.svband{background:linear-gradient(158deg,var(--gold-hi),var(--gold)); color:var(--on);
  padding:clamp(40px,5.4vw,66px) 0; position:relative; overflow:hidden}
.svband::before{content:""; position:absolute; inset:0; opacity:.32; pointer-events:none;
  background-image:linear-gradient(rgba(4,20,46,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(4,20,46,.05) 1px,transparent 1px);
  background-size:56px 56px}
.svband-in{position:relative; display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(22px,4vw,60px); align-items:center}
.svband h3{color:var(--on); font-size:clamp(1.4rem,2.6vw,2.15rem); font-weight:900;
  letter-spacing:-.035em; line-height:1.28}
.svband p{color:rgba(4,20,46,.78); font-family:var(--fb); font-size:.9688rem; line-height:1.95; max-width:44ch}
.svband .b-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}

/* closing */
.svend{padding:clamp(56px,7vw,100px) 0; text-align:center;
  background:radial-gradient(72% 120% at 50% 0%, rgba(0,112,192,.2), transparent 68%)}
.svend h2{font-size:clamp(1.7rem,3.4vw,2.9rem); font-weight:900; letter-spacing:-.04em;
  line-height:1.2; margin-bottom:16px}
.svend p{font-family:var(--fb); color:var(--txt-2); line-height:1.95; max-width:52ch;
  margin:0 auto 30px}
.svend .e-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

@media (max-width:980px){
  .svhero-g{grid-template-columns:1fr; gap:26px}
  .svp-in{grid-template-columns:1fr; gap:26px}
  .svp-side{position:static}
  .svband-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .svp-cols{grid-template-columns:1fr; gap:26px}
  .svend .e-cta,.svband .b-cta{flex-direction:column; align-items:stretch}
}

/* ---------- service visuals ---------- */
.svis{margin-top:28px; border:1px solid var(--line-2); border-radius:18px;
  padding:clamp(14px,1.4vw,22px);
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.008));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -36px rgba(0,0,0,.85);
  position:relative; overflow:hidden}
.svis::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 70% 10%, rgba(0,112,192,.14), transparent 65%)}
.svis svg{display:block; width:100%; height:auto; position:relative}
.svis-cap{display:flex; align-items:center; gap:8px; margin-top:12px;
  font-family:var(--fd); font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--txt-3)}
.svis-cap i{width:6px; height:6px; border-radius:1px; background:var(--gold); transform:rotate(45deg)}

.vzbar{transform-origin:center bottom; transform-box:fill-box;
  animation:vzbar 2.6s var(--ease) infinite alternate}
.vzbar.b1{animation-delay:0s}.vzbar.b2{animation-delay:.25s}.vzbar.b3{animation-delay:.5s}
.vzbar.b4{animation-delay:.75s}.vzbar.b5{animation-delay:1s}
@keyframes vzbar{from{transform:scaleY(.55)} to{transform:scaleY(1)}}

.vzline{stroke-dasharray:340; stroke-dashoffset:340; animation:vzline 3.2s var(--ease) infinite}
@keyframes vzline{0%{stroke-dashoffset:340; opacity:0} 12%{opacity:1}
  55%{stroke-dashoffset:0; opacity:1} 88%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}

.vzping{animation:vzping 2.2s ease-in-out infinite}
.vzping2{transform-box:fill-box; transform-origin:center; animation:vzpop 3.2s var(--ease) infinite}
@keyframes vzping{0%,100%{opacity:.35} 50%{opacity:1}}
@keyframes vzpop{0%,15%{transform:scale(0); opacity:0} 30%,85%{transform:scale(1); opacity:1} 100%{transform:scale(1); opacity:0}}

.vzfloat{animation:vzfloat 5s ease-in-out infinite}
.vzfloat2{animation:vzfloat 5s ease-in-out 1.2s infinite}
@keyframes vzfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}

.vzcoin{transform-box:fill-box; transform-origin:center}
.vzcoin.c1{animation:vzcoin 3s ease-in-out infinite}
.vzcoin.c2{animation:vzcoin 3s ease-in-out .5s infinite}
.vzcoin.c3{animation:vzcoin 3s ease-in-out 1s infinite}
@keyframes vzcoin{0%,100%{transform:translateY(0); opacity:.75} 50%{transform:translateY(-9px); opacity:1}}

.vzstep{transform-box:fill-box; transform-origin:center; opacity:0; animation:vzstep 4.2s var(--ease) infinite}
.vzstep.s1{animation-delay:0s}.vzstep.s2{animation-delay:.35s}.vzstep.s3{animation-delay:.7s}
@keyframes vzstep{0%{opacity:0; transform:translateY(-8px)} 18%,88%{opacity:1; transform:translateY(0)} 100%{opacity:0}}

.vzgauge{stroke-dasharray:182; stroke-dashoffset:182; animation:vzgauge 3.6s var(--ease) infinite}
@keyframes vzgauge{0%{stroke-dashoffset:182} 45%,85%{stroke-dashoffset:44} 100%{stroke-dashoffset:44; opacity:0}}

.vzring{transform-box:fill-box; transform-origin:center; animation:vzringx 2.6s ease-out infinite}
@keyframes vzringx{0%{transform:scale(.82); opacity:.9} 80%{transform:scale(1.14); opacity:0} 100%{opacity:0}}

.vzhead{animation:vzhead 5s linear infinite}
@keyframes vzhead{0%{transform:translateX(0)} 100%{transform:translateX(236px)}}

.vztype{transform-origin:left center; transform-box:fill-box; animation:vztype 3.4s var(--ease) infinite}
@keyframes vztype{0%{transform:scaleX(.1)} 45%,90%{transform:scaleX(1)} 100%{transform:scaleX(1); opacity:0}}

.vzpen{animation:vzpen 3.4s ease-in-out infinite}
@keyframes vzpen{0%,100%{transform:translate(0,0)} 50%{transform:translate(-10px,10px)}}

.vzcheck{transform-box:fill-box; transform-origin:center; animation:vzpop 3.4s var(--ease) infinite}

.vznode{animation:vzping 2.8s ease-in-out infinite}
.vznode.n2{animation-delay:.5s}.vznode.n3{animation-delay:1s}
.vzspark{transform-box:fill-box; transform-origin:center; animation:vzspark 3s ease-in-out infinite}
@keyframes vzspark{0%,100%{transform:scale(.7) rotate(0deg); opacity:.5} 50%{transform:scale(1.15) rotate(24deg); opacity:1}}
.vzdot{animation:vzdotty 1.4s ease-in-out infinite}
.vzdot.d2{animation-delay:.2s}.vzdot.d3{animation-delay:.4s}
@keyframes vzdotty{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  .svis *{animation:none !important}
  .vzline,.vzgauge{stroke-dashoffset:0}
  .vzstep,.vzping2{opacity:1}
}