/* More than websites — services page */
.mhero{position:relative;min-height:88svh;display:grid;align-items:center;overflow:hidden;padding:140px 0 70px;background:radial-gradient(900px 620px at 78% 28%,rgba(139,92,246,.18),transparent 62%),var(--ink)}
.mhero-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,76px);align-items:center}
.mhero h1{font-size:clamp(40px,5.2vw,78px);line-height:1;margin:16px 0 22px;letter-spacing:-.045em}
.mhero h1 em{font-style:normal;color:var(--acc)}
.mhero .lead{font-size:clamp(16px,1.25vw,19px);color:var(--ice);opacity:.9;max-width:54ch;margin-bottom:28px}
.mhero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.mhero-tags span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ice);border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.1);border-radius:999px;padding:7px 13px}
.mhero-art{position:relative}
.mhero-art svg{width:100%;height:auto;display:block;overflow:visible}
.mhero-art .wire{fill:none;stroke:var(--acc);stroke-width:1.6;opacity:.55;stroke-dasharray:5 9;animation:mflow 2.6s linear infinite}
.mhero-art .wire.slow{animation-duration:4s;opacity:.35}
@keyframes mflow{to{stroke-dashoffset:-56}}
.mhero-art .nbox{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1}
.mhero-art .nbox.acc{fill:rgba(139,92,246,.16);stroke:rgba(139,92,246,.6)}
.mhero-art text{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;fill:var(--ice)}
.mhero-art .pulse{fill:var(--acc)}
@media (prefers-reduced-motion:reduce){.mhero-art .wire{animation:none;stroke-dasharray:none;opacity:.4}}
@media (max-width:900px){.mhero{min-height:auto;padding-top:118px}.mhero-inner{grid-template-columns:1fr}.mhero-art{max-width:520px;margin-top:8px}}

/* additional-services note */
.apart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.apart-grid div{background:#fff;border:1px solid var(--line-dark);border-radius:18px;padding:22px}
.apart-grid b{font-family:var(--display);font-size:19px;letter-spacing:-.02em;display:block;margin-bottom:8px}
.apart-grid p{font-size:14.5px;color:var(--mute-dark)}
@media (max-width:820px){.apart-grid{grid-template-columns:1fr}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.svc .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--acc)}
.svc h3{font-size:clamp(21px,2vw,27px);margin:10px 0 12px;letter-spacing:-.025em}
.svc p{color:var(--ice);opacity:.86;font-size:15px;max-width:52ch}
.svc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.svc-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.svc.wide{grid-column:1/-1}
@media (max-width:880px){.svc-grid{grid-template-columns:1fr}}

/* integrations */
.wire-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.wire-list span{font-size:14px;color:var(--mute-dark);border:1px solid var(--line-dark);border-radius:999px;padding:8px 15px;background:#fff}
.wire-note{margin-top:22px;color:var(--mute-dark);font-size:14.5px;max-width:74ch}

/* in practice */
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pr{border-top:1px solid var(--line);padding-top:18px}
.pr b{font-family:var(--display);font-size:20px;letter-spacing:-.02em;display:block;margin-bottom:8px}
.pr p{color:var(--ice);opacity:.85;font-size:15px}
.practice-note{margin-top:30px;color:var(--mute);font-size:14.5px;max-width:78ch}
@media (max-width:980px){.practice-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.practice-grid{grid-template-columns:1fr}}

/* security */
.secg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.secg div{background:#fff;border:1px solid var(--line-dark);border-radius:18px;padding:22px}
.secg h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.02em}
.secg p{font-size:14px;color:var(--mute-dark)}
.sec-note{margin-top:26px;color:var(--mute-dark);font-size:14.5px;max-width:82ch}
@media (max-width:1000px){.secg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.secg{grid-template-columns:1fr}}

/* how it works */
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:hs}
.how-step{counter-increment:hs;border-top:2px solid var(--acc);padding-top:18px}
.how-step .mono{color:var(--acc);font-size:11.5px;letter-spacing:.1em}
.how-step h3{font-size:21px;margin:8px 0 10px;letter-spacing:-.02em}
.how-step p{color:var(--ice);opacity:.85;font-size:14.5px}
.how-note{margin-top:34px;padding:22px 24px;border:1px dashed rgba(139,92,246,.5);border-radius:18px;color:var(--ice);font-size:15px;max-width:82ch;background:rgba(139,92,246,.07)}
@media (max-width:900px){.how-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.how-steps{grid-template-columns:1fr}}

/* closing cta */
.mcta-inner{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.mcta h2{font-size:clamp(30px,4vw,56px);margin:10px 0 12px;letter-spacing:-.04em}
.mcta p{color:var(--mute-dark);max-width:56ch}
.mcta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.mcta-inner{grid-template-columns:1fr}}

@media (max-width:560px){
  .mhero{padding-top:104px}
  .mhero-tags{gap:6px;margin-top:22px}
  .mhero-tags span{font-size:10.5px;padding:6px 10px}
  .mhero-tags span:nth-child(n+7){display:none}
}