:root { --info-container: min(1120px, calc(100% - 48px)); --info-reading: 760px; }

.info-page { min-height: 100vh; background: #08080f; color: var(--text); }
.info-page .site-header { background: rgba(8, 8, 15, .9); border-color: var(--line); backdrop-filter: blur(18px); }
.info-page .site-header nav a[aria-current="page"] { color: var(--cyan); }
.info-main { padding-top: 78px; }

.info-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(86, 232, 255, .07), transparent 34%), linear-gradient(300deg, rgba(139, 108, 255, .12), transparent 42%), #0a0a12;
}
.info-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 55%;
  opacity: .28;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, .06) 18px, transparent 19px);
  mask-image: linear-gradient(90deg, transparent, #000 36%, transparent);
}
.info-hero-inner {
  position: relative;
  z-index: 1;
  width: var(--info-container);
  min-height: 360px;
  margin: 0 auto;
  padding: 82px 0 68px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.info-kicker { padding-top: 13px; font: 600 12px/1.4 "Manrope", sans-serif; color: var(--cyan); }
.info-title { max-width: 780px; margin: 0; font: 700 clamp(44px, 6vw, 76px)/1.08 "Manrope", sans-serif; letter-spacing: 0; text-wrap: balance; }
.info-intro { max-width: 720px; margin: 24px 0 0; color: #b9b6c3; font-size: 18px; line-height: 1.75; }
.info-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: #888592; font-size: 16px; }
.info-meta span:first-child { color: #d8d5df; }
.info-tabs { display: none; }

.info-layout {
  width: var(--info-container);
  margin: 0 auto;
  padding: 70px 0 110px;
  display: grid;
  grid-template-columns: 190px minmax(0, var(--info-reading));
  gap: 34px;
}
.info-toc { position: sticky; top: 112px; align-self: start; padding-left: 17px; border-left: 1px solid var(--line); }
.info-toc strong { display: block; margin-bottom: 14px; font: 600 12px/1.4 "Manrope", sans-serif; color: #e5e2eb; }
.info-toc a { display: block; padding: 6px 0; color: #85818f; font-size: 16px; transition: color .2s; }
.info-toc a:hover { color: var(--cyan); }
.info-article { min-width: 0; }
.info-section { scroll-margin-top: 110px; padding: 0 0 42px; border-bottom: 1px solid var(--line); }
.info-section + .info-section { padding-top: 42px; }
.info-section h2 { margin: 0 0 18px; font: 600 25px/1.35 "Manrope", sans-serif; color: #f7f5ff; }
.info-section h3 { margin: 25px 0 8px; font: 600 17px/1.5 "Manrope", sans-serif; }
.info-section p, .info-section li { color: #aaa7b6; line-height: 1.85; }
.info-section p { margin: 0; }
.info-section p + p { margin-top: 14px; }
.info-section ul, .info-section ol { margin: 14px 0 0; padding-left: 22px; }
.info-section li + li { margin-top: 10px; }
.info-section b, .info-section strong { color: #e5e2eb; }
.info-section a, .contact-panel a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(86, 232, 255, .4); text-underline-offset: 4px; }
.info-note { margin-top: 18px !important; padding: 18px 20px; border-left: 2px solid var(--violet); background: rgba(139, 108, 255, .08); color: #c8c4d2 !important; }

.faq-list { display: grid; gap: 10px; }
.faq-item { padding: 22px 24px; border: 1px solid var(--line); border-radius: 6px; background: #101018; }
.faq-item h3 { margin: 0 0 8px; font-size: 16px; }
.faq-item p { font-size: 16px; }
.contact-panel { padding: 28px; border: 1px solid rgba(86, 232, 255, .24); border-radius: 6px; background: linear-gradient(135deg, rgba(86, 232, 255, .07), rgba(139, 108, 255, .08)); }
.contact-panel .email { display: inline-block; margin-top: 18px; font: 600 20px/1.4 "Manrope", sans-serif; }
.info-footer { width: var(--info-container); min-height: 150px; margin: 0 auto; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .info-main { padding-top: 68px; }
  .info-hero-inner { grid-template-columns: 1fr; gap: 14px; padding-top: 62px; }
  .info-kicker { padding-top: 0; }
  .info-tabs { width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 16px 20px 0; scrollbar-width: none; }
  .info-tabs::-webkit-scrollbar { display: none; }
  .info-tabs a { min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--line); color: #aaa7b6; font-size: 16px; }
  .info-tabs a[aria-current="page"] { border-color: rgba(86, 232, 255, .5); color: var(--cyan); }
  .info-layout { grid-template-columns: 1fr; }
  .info-toc { display: none; }
  .info-footer { grid-template-columns: 1fr 1fr; padding: 42px 0; }
}

@media (max-width: 640px) {
  :root { --info-container: calc(100% - 32px); }
  .info-hero-inner { min-height: 330px; padding: 52px 0 48px; }
  .info-title { font-size: 42px; }
  .info-intro { font-size: 16px; }
  .info-layout { padding: 54px 0 78px; }
  .info-section { padding-bottom: 34px; }
  .info-section + .info-section { padding-top: 34px; }
  .info-section h2 { font-size: 22px; }
  .faq-item { padding: 20px 18px; }
  .contact-panel { padding: 22px 20px; }
  .contact-panel .email { font-size: 17px; overflow-wrap: anywhere; }
  .info-footer { grid-template-columns: 1fr; gap: 24px; }
  .info-footer > p { display: block; }
  .info-footer > div { justify-self: start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { .info-page * { scroll-behavior: auto; } }