.detail-header .topbar {
  max-width: 100%;
}

/* Detailed service card polish */
.detail-hero { border-color: color-mix(in srgb,var(--service-glow,var(--brand)) 24%,var(--line)); background: linear-gradient(135deg,color-mix(in srgb,var(--service-glow,var(--brand)) 8%,transparent),transparent 45%),var(--panel); }
.detail-block,.detail-support,.vpn-guide-preview { position: relative; overflow: hidden; isolation: isolate; }
.detail-block::after,.detail-support::after { position:absolute;z-index:-1;right:-80px;bottom:-90px;width:180px;height:180px;border-radius:50%;content:"";background:rgba(119,132,255,.11);filter:blur(48px); }
.detail-block { min-height: 320px; padding: 30px; transition: transform .25s ease,border-color .22s ease,box-shadow .25s ease; }
.detail-block:hover { border-color: rgba(121,132,255,.3); box-shadow: 0 24px 60px rgba(0,0,0,.16); transform: translateY(-4px); }
.feature-list li,.step-list li { min-height: 54px; padding: 12px 13px; transition: border-color .2s ease,transform .2s ease,background .2s ease; }
.feature-list li:hover,.step-list li:hover { border-color: var(--line-strong); background: color-mix(in srgb,var(--panel-soft) 90%,var(--brand-soft)); transform: translateX(3px); }
.detail-support { border-color: rgba(98,225,158,.2); background: linear-gradient(120deg,rgba(98,225,158,.08),transparent 55%),var(--panel); }
html[data-theme="light"] .detail-block:hover { box-shadow: 0 22px 52px rgba(48,68,108,.12); }

.detail-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.detail-nav a {
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 690;
  transition: color 0.18s ease, background 0.18s ease;
}

.detail-nav a:hover,
.detail-nav a:focus-visible {
  color: var(--text);
  background: var(--panel-soft);
}

.detail-main {
  min-height: calc(100vh - 184px);
  padding: 50px 0 78px;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-strong);
  background: var(--panel-soft);
  font-size: 13px;
  font-weight: 720;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.detail-back:hover,
.detail-back:focus-visible {
  border-color: var(--line-strong);
  background: var(--brand-soft);
  transform: translateX(-3px);
}

.detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  gap: 24px;
  padding: clamp(24px, 5vw, 48px);
  overflow: hidden;
  isolation: isolate;
}

.detail-hero::after {
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -95px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  content: "";
  background: var(--service-glow, var(--brand));
  filter: blur(80px);
  opacity: 0.2;
}

.detail-kind {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 760;
}

.detail-hero h1 {
  max-width: 660px;
  margin: 13px 0 7px;
  font-size: clamp(43px, 7vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.detail-handle {
  display: block;
  color: var(--green);
  font-size: 15px;
  font-weight: 760;
}

.detail-description {
  max-width: 620px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}

.button-guide {
  border-color: color-mix(in srgb, var(--service-glow, #62b6ff) 48%, var(--line));
}

.vpn-guide-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  gap: 32px;
  align-items: center;
  margin-top: 20px;
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 85% 15%, rgba(98, 182, 255, .17), transparent 35%),
    var(--panel);
}

.vpn-guide-preview h2 { margin: 12px 0 10px; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.045em; }
.vpn-guide-preview p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.7; }
.vpn-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.vpn-platforms span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-strong); background: var(--panel-soft); font-size: .76rem; font-weight: 750; }
.vpn-guide-steps { display: grid; gap: 10px; }
.vpn-guide-steps > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.vpn-guide-steps b { color: #7ddcff; font-size: .76rem; letter-spacing: .08em; }
.vpn-guide-steps span { font-weight: 800; }
.vpn-guide-steps a { display: flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 14px; color: #07121c; background: linear-gradient(120deg, #72dfbb, #8eb7ff); font-size: .84rem; font-weight: 900; }

@media (max-width: 760px) {
  .vpn-guide-preview { grid-template-columns: 1fr; gap: 24px; }
}

.service-notice {
  display: grid;
  gap: 3px;
  max-width: 590px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.service-notice b { font-size: 14px; }
.service-notice span { color: var(--muted); font-size: 13px; }
.service-notice.is-maintenance { border-color: rgba(255, 182, 111, .3); }
.service-notice.is-offline { border-color: rgba(255, 146, 155, .28); }
.service-notice.is-development { border-color: rgba(156, 155, 255, .28); }

.detail-mascot {
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 25px;
  background:
    radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--service-glow, var(--brand)) 30%, transparent), transparent 34%),
    var(--panel-soft);
}

.detail-service-icon {
  display: grid;
  width: min(170px, 42vw);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 38%;
  color: var(--text);
  background: linear-gradient(145deg, var(--panel-solid), var(--panel-soft));
  box-shadow: 0 26px 58px color-mix(in srgb, var(--service-glow, var(--brand)) 26%, transparent);
  font-size: clamp(62px, 10vw, 100px);
  transform: rotate(-7deg);
}

.detail-service-image {
  width: min(260px, 72%);
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--service-glow, var(--brand)) 28%, transparent);
}

.detail-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.detail-block {
  padding: 26px;
}

.detail-block-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 19px;
}

.detail-block-head > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 19px;
}

.detail-block h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.detail-block-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.feature-list,
.step-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li,
.step-list li {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  font-size: 14px;
  font-weight: 670;
}

.feature-list li::before {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  content: "✓";
  color: var(--green);
  background: var(--green-soft);
  font-size: 13px;
  font-weight: 900;
}

.step-list {
  counter-reset: step;
}

.step-list li {
  counter-increment: step;
}

.step-list li::before {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  content: counter(step);
  color: #0b1620;
  background: linear-gradient(135deg, #78efb3, #8291ff);
  font-size: 12px;
  font-weight: 900;
}

.detail-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  padding: 24px 26px;
}

.detail-support-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-support-copy > span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 20px;
}

.detail-support-copy b,
.detail-support-copy p {
  display: block;
}

.detail-support-copy b {
  font-size: 16px;
}

.detail-support-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.detail-missing {
  max-width: 720px;
  margin: 10vh auto 0;
  padding: 38px;
  text-align: center;
}

.detail-missing h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: -0.06em;
}

.detail-missing p {
  margin: 12px auto 24px;
  color: var(--muted);
}

.detail-footer {
  padding: 22px 0 calc(22px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.detail-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
}

.detail-footer a:hover,
.detail-footer a:focus-visible {
  color: var(--text);
}

html[data-theme="light"] .detail-mascot {
  background:
    radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--service-glow, var(--brand)) 22%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.45);
}

@media (max-width: 760px) {
  .detail-nav,
  .detail-open-main {
    display: none;
  }

  .detail-header .nav-actions {
    margin-left: auto;
  }

  .detail-main {
    padding-top: 30px;
  }

  .detail-hero,
  .detail-content-grid {
    grid-template-columns: 1fr;
  }

  .detail-mascot {
    min-height: 190px;
    order: -1;
  }

  .detail-service-icon {
    width: min(132px, 45vw);
  }
}

@media (max-width: 560px) {
  .detail-hero,
  .detail-block,
  .detail-support,
  .detail-missing {
    padding: 20px;
  }

  .detail-support {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-support .button {
    width: 100%;
  }
}

.detail-hero{border-color:color-mix(in srgb,var(--service-glow,var(--brand)) 24%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--service-glow,var(--brand)) 8%,transparent),transparent 45%),var(--panel)}
.detail-block,.detail-support,.vpn-guide-preview{position:relative;overflow:hidden;isolation:isolate}.detail-block::after,.detail-support::after{position:absolute;z-index:-1;right:-80px;bottom:-90px;width:180px;height:180px;border-radius:50%;content:"";background:rgba(119,132,255,.11);filter:blur(48px)}
.detail-block{min-height:320px;padding:30px;transition:transform .25s ease,border-color .22s ease,box-shadow .25s ease}.detail-block:hover{border-color:rgba(121,132,255,.3);box-shadow:0 24px 60px rgba(0,0,0,.16);transform:translateY(-4px)}.feature-list li,.step-list li{min-height:54px;padding:12px 13px;transition:border-color .2s ease,transform .2s ease,background .2s ease}.feature-list li:hover,.step-list li:hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--panel-soft) 90%,var(--brand-soft));transform:translateX(3px)}.detail-support{border-color:rgba(98,225,158,.2);background:linear-gradient(120deg,rgba(98,225,158,.08),transparent 55%),var(--panel)}html[data-theme="light"] .detail-block:hover{box-shadow:0 22px 52px rgba(48,68,108,.12)}
@media(max-width:560px){.detail-block{min-height:0;padding:20px}}
.vpn-resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.vpn-resource-card{position:relative;display:flex;min-height:220px;flex-direction:column;padding:22px;overflow:hidden;transition:transform .24s ease,border-color .22s ease,box-shadow .24s ease}.vpn-resource-card::after{position:absolute;right:-55px;bottom:-65px;width:145px;height:145px;border-radius:50%;content:"";background:rgba(93,179,255,.13);filter:blur(42px)}.vpn-resource-card:hover{border-color:rgba(95,190,255,.34);box-shadow:0 22px 54px rgba(0,0,0,.16);transform:translateY(-5px)}.vpn-resource-card>span{color:#77cfff;font-size:12px;font-weight:900;letter-spacing:.1em}.vpn-resource-card b{margin-top:24px;font-size:20px;letter-spacing:-.035em}.vpn-resource-card p{margin:8px 0 20px;color:var(--muted);font-size:14px;line-height:1.55}.vpn-resource-card i{display:grid;width:34px;height:34px;place-items:center;margin-top:auto;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);font-style:normal}@media(max-width:900px){.vpn-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.vpn-resource-grid{grid-template-columns:1fr}.vpn-resource-card{min-height:185px}}