@font-face {
   font-family: "Sora";
   src: url("../webfonts/sora-v17-latin-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "Sora";
   src: url("../webfonts/sora-v17-latin-700.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "jf-openhuninn-2.1";
   src: url("../webfonts/jf-openhuninn-21.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
:root {
   --sInk: #17212b;
   --sText: #425466;
   --sMuted: #6c7a89;
   --sLine: #dce5ec;
   --sSoft: #f5f8fb;
   --sSoftBlue: #eef6fb;
   --sBlue: #0c67a8;
   --sBlueDark: #064a7b;
   --sCyan: #00a8de;
   --sGreen: #21a67a;
   --sOrange: #f27a3d;
   --sWhite: #ffffff;
   --sShadow: 0 18px 50px rgba(15, 42, 70, 0.08);
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   margin: 0;
   color: var(--sInk);
   background: var(--sWhite);
   font-family: "Sora", "jf-openhuninn-2.1", Arial, sans-serif;
}
a {
   color: inherit;
   text-decoration: none;
}
.service-shell {
   min-height: 100vh;
   background:
      linear-gradient(180deg, rgba(238, 246, 251, 0.9) 0%, rgba(255, 255, 255, 0) 520px),
      var(--sWhite);
}
.service-nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(220, 229, 236, 0.8);
}
.service-nav-inner {
   width: min(1160px, calc(100% - 40px));
   min-height: 72px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}
.service-brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: "jf-openhuninn-2.1", sans-serif;
   font-size: 21px;
   color: var(--sInk);
   white-space: nowrap;
}
.service-brand img {
   height: 50px;
   width: auto;
}
.service-nav-toggle {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}
.service-nav-toggle-button {
   display: none;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 1px solid var(--sLine);
   border-radius: 8px;
   color: var(--sBlueDark);
   background: var(--sWhite);
   cursor: pointer;
   flex-shrink: 0;
}
.service-nav-toggle-button i {
   font-size: 18px;
   line-height: 1;
}
.service-nav-links {
   display: flex;
   align-items: center;
   gap: 22px;
   font-size: 14px;
   color: var(--sMuted);
}
.service-nav-links a {
   transition: color 0.2s ease;
}
.service-nav-links a:hover {
   color: var(--sBlue);
}
.service-nav-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   padding: 0 18px;
   border-radius: 999px;
   color: var(--sWhite);
   background: var(--sBlue);
   font-weight: 700;
   box-shadow: 0 10px 24px rgba(12, 103, 168, 0.22);
}
.service-hero {
   width: min(1160px, calc(100% - 40px));
   margin: 0 auto;
   padding: 88px 0 56px;
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
   gap: 56px;
   align-items: center;
}
.service-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 34px;
   padding: 0 13px;
   border: 1px solid rgba(12, 103, 168, 0.18);
   border-radius: 999px;
   color: var(--sBlue);
   background: rgba(255, 255, 255, 0.72);
   font-size: 13px;
   font-weight: 700;
}
.service-hero h1 {
   margin: 22px 0 18px;
   font-size: 48px;
   line-height: 1.16;
   letter-spacing: 0;
}
.service-hero p {
   margin: 0;
   color: var(--sText);
   font-size: 18px;
   line-height: 1.85;
}
.service-hero-actions {
   margin-top: 32px;
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}
.service-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 48px;
   padding: 0 20px;
   border-radius: 8px;
   border: 1px solid var(--sLine);
   color: var(--sBlueDark);
   background: var(--sWhite);
   font-weight: 700;
}
.service-button-primary {
   border-color: var(--sBlue);
   color: var(--sWhite);
   background: var(--sBlue);
}
.service-hero-panel {
   padding: 28px;
   border: 1px solid rgba(220, 229, 236, 0.88);
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.86);
   box-shadow: var(--sShadow);
}
.service-panel-title {
   margin: 0 0 16px;
   font-size: 18px;
   font-weight: 700;
}
.service-panel-list {
   margin: 0;
   padding: 0;
   list-style: none;
}
.service-panel-list li {
   display: flex;
   gap: 12px;
   padding: 13px 0;
   border-top: 1px solid var(--sLine);
   color: var(--sText);
   line-height: 1.65;
}
.service-panel-list li:first-child {
   border-top: none;
}
.service-panel-list i {
   margin-top: 4px;
   color: var(--sGreen);
}
.service-section {
   width: min(1160px, calc(100% - 40px));
   margin: 0 auto;
   padding: 64px 0;
}
.service-section-header {
   max-width: 760px;
   margin-bottom: 30px;
}
.service-eyebrow {
   display: block;
   margin-bottom: 10px;
   color: var(--sBlue);
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
}
.service-section h2 {
   margin: 0;
   font-size: 32px;
   line-height: 1.35;
}
.service-section-header p {
   margin: 14px 0 0;
   color: var(--sText);
   font-size: 17px;
   line-height: 1.8;
}
.service-diagram-section {
   padding-top: 28px;
}
.service-diagram-figure {
   margin: 0;
   padding: 16px;
   border: 1px solid rgba(220, 229, 236, 0.95);
   border-radius: 10px;
   background: var(--sWhite);
   box-shadow: var(--sShadow);
   overflow-x: auto;
}
.service-diagram-figure img {
   width: 100%;
   min-width: 760px;
   height: auto;
   display: block;
   border-radius: 8px;
}
.service-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
}
.service-card {
   padding: 24px;
   border: 1px solid var(--sLine);
   border-radius: 10px;
   background: var(--sWhite);
   box-shadow: 0 12px 32px rgba(15, 42, 70, 0.05);
}
.service-card i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   margin-bottom: 16px;
   border-radius: 8px;
   color: var(--sBlue);
   background: var(--sSoftBlue);
   font-size: 18px;
}
.service-card h3 {
   margin: 0 0 10px;
   font-size: 19px;
   line-height: 1.4;
}
.service-card p {
   margin: 0;
   color: var(--sText);
   line-height: 1.75;
}
.service-band {
   background: var(--sSoft);
   border-top: 1px solid var(--sLine);
   border-bottom: 1px solid var(--sLine);
}
.service-two-col {
   display: grid;
   grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
   gap: 34px;
   align-items: start;
}
.service-list-card {
   padding: 28px;
   border: 1px solid var(--sLine);
   border-radius: 10px;
   background: var(--sWhite);
}
.service-check-list {
   margin: 0;
   padding: 0;
   list-style: none;
}
.service-check-list li {
   display: flex;
   gap: 12px;
   padding: 11px 0;
   color: var(--sText);
   line-height: 1.65;
}
.service-check-list i {
   margin-top: 4px;
   color: var(--sGreen);
}
.service-note {
   padding: 24px;
   border-left: 4px solid var(--sOrange);
   border-radius: 8px;
   color: var(--sText);
   background: #fff7f1;
   line-height: 1.75;
}
.service-process {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
   counter-reset: service-step;
}
.service-process-step {
   position: relative;
   padding: 24px;
   border: 1px solid var(--sLine);
   border-radius: 10px;
   background: var(--sWhite);
}
.service-process-step::before {
   counter-increment: service-step;
   content: counter(service-step, decimal-leading-zero);
   display: block;
   margin-bottom: 18px;
   color: rgba(12, 103, 168, 0.25);
   font-size: 34px;
   font-weight: 700;
}
.service-process-step h3 {
   margin: 0 0 10px;
   font-size: 18px;
}
.service-process-step p {
   margin: 0;
   color: var(--sText);
   line-height: 1.7;
}
.service-cta {
   width: min(1160px, calc(100% - 40px));
   margin: 0 auto 70px;
   padding: 42px;
   border-radius: 12px;
   color: var(--sWhite);
   background: linear-gradient(135deg, var(--sBlueDark), var(--sBlue));
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
}
.service-cta h2 {
   margin: 0 0 10px;
   font-size: 30px;
}
.service-cta p {
   margin: 0;
   color: rgba(255, 255, 255, 0.84);
   line-height: 1.75;
}
.service-cta .service-button {
   flex: 0 0 auto;
   color: var(--sBlueDark);
   border-color: var(--sWhite);
   background: var(--sWhite);
}
.service-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   background: linear-gradient(135deg, #17212b 0%, #213245 100%);
}
.service-footer-inner {
   width: min(1160px, calc(100% - 40px));
   margin: 0 auto;
   padding: 54px 0 24px;
   color: rgba(226, 233, 239, 0.72);
   font-size: 14px;
}
.service-footer-main {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.85fr) minmax(260px, 1fr);
   gap: 44px;
   padding-bottom: 36px;
}
.service-footer-logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
   color: var(--sWhite);
   font-family: "jf-openhuninn-2.1", sans-serif;
   font-size: 21px;
   white-space: nowrap;
}
.service-footer-logo img {
   height: 42px;
   width: auto;
}
.service-footer-brand p {
   max-width: 430px;
   margin: 0;
   color: rgba(226, 233, 239, 0.76);
   line-height: 1.85;
}
.service-footer-col h2 {
   margin: 4px 0 18px;
   color: var(--sWhite);
   font-size: 16px;
   line-height: 1.3;
}
.service-footer-col ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.service-footer-col li + li {
   margin-top: 12px;
}
.service-footer-col a {
   color: rgba(226, 233, 239, 0.72);
   line-height: 1.55;
   transition: color 0.2s ease;
}
.service-footer-col a:hover {
   color: var(--sCyan);
}
.service-footer-contact a {
   display: flex;
   align-items: flex-start;
   gap: 10px;
}
.service-footer-contact i {
   width: 18px;
   margin-top: 3px;
   color: var(--sCyan);
   text-align: center;
   flex-shrink: 0;
}
.service-footer-bottom {
   min-height: 58px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   color: rgba(226, 233, 239, 0.64);
}
.service-footer-bottom a {
   color: var(--sWhite);
   font-weight: 700;
}
@media (max-width: 980px) {
   .service-nav-inner {
      min-height: 70px;
      flex-wrap: nowrap;
      gap: 14px;
      padding: 10px 0;
      position: relative;
   }
   .service-brand {
      min-width: 0;
      font-size: 21px;
   }
   .service-nav-toggle-button {
      display: inline-flex;
      margin-left: auto;
   }
   .service-nav-links {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      width: 100%;
      display: none;
      align-items: stretch;
      flex-direction: column;
      gap: 4px;
      overflow: visible;
      padding: 10px;
      border: 1px solid rgba(220, 229, 236, 0.9);
      border-top: 0;
      border-radius: 0 0 12px 12px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 44px rgba(15, 42, 70, 0.12);
   }
   .service-nav-toggle:checked ~ .service-nav-links {
      display: flex;
   }
   .service-nav-links a {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0 12px;
      border-radius: 8px;
   }
   .service-nav-links a:hover {
      background: var(--sSoftBlue);
   }
   .service-nav-cta {
      width: 100%;
      margin-top: 6px;
      padding: 0 14px;
   }
   .service-hero {
      grid-template-columns: 1fr;
      padding-top: 56px;
   }
   .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .service-two-col {
      grid-template-columns: 1fr;
   }
   .service-process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .service-cta {
      align-items: flex-start;
      flex-direction: column;
   }
   .service-footer-main {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 34px;
   }
   .service-footer-brand {
      grid-column: 1 / -1;
   }
}
@media (max-width: 620px) {
   .service-nav-inner,
   .service-hero,
   .service-section,
   .service-cta,
   .service-footer-inner {
      width: min(100% - 28px, 1160px);
   }
   .service-nav-links {
      font-size: 13px;
   }
   .service-hero h1 {
      font-size: 34px;
   }
   .service-hero p {
      font-size: 16px;
   }
   .service-grid,
   .service-process {
      grid-template-columns: 1fr;
   }
   .service-section {
      padding: 46px 0;
   }
   .service-section h2 {
      font-size: 26px;
   }
   .service-cta {
      padding: 30px 22px;
   }
   .service-footer-inner {
      padding: 42px 0 24px;
   }
   .service-footer-main {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-bottom: 30px;
   }
   .service-footer-brand {
      grid-column: auto;
   }
   .service-footer-logo {
      font-size: 20px;
   }
   .service-footer-inner {
      width: min(100% - 28px, 1160px);
   }
   .service-footer-bottom {
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      padding-top: 20px;
   }
}