:root {
  color-scheme: light dark;
  --paper: #f4f7fc;
  --surface: rgba(255, 255, 255, .88);
  --surface-strong: #ffffff;
  --ink: #07172d;
  --muted: #627086;
  --line: rgba(7, 23, 45, .12);
  --blue: #0788ff;
  --blue-deep: #0065e8;
  --blue-soft: #e4f3ff;
  --navy: #061a38;
  --safe: #1fa86a;
  --warning: #a55d00;
  --radius: 24px;
  --shadow: 0 24px 78px rgba(33, 83, 143, .13);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 84% 4%, rgba(7, 136, 255, .12), transparent 31rem),
    var(--paper);
  color: var(--ink);
  line-height: 1.7;
  /* Keep long headings and links readable without widening the page at large text sizes. */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-deep); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 810;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 7px 18px rgba(0, 105, 232, .2); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px; }
.nav a { color: var(--muted); font-size: .9rem; font-weight: 680; text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover { color: var(--blue-deep); }
.hub-link { padding-right: 16px; border-right: 1px solid var(--line); }

.product-hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
  padding: 64px 0 84px;
}
.eyebrow, .kicker {
  color: var(--blue-deep);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.product-hero h1, .legal-hero h1 {
  margin: 15px 0 22px;
  font-size: clamp(3.25rem, 7.4vw, 6.6rem);
  font-weight: 820;
  line-height: .96;
  letter-spacing: -.065em;
}
.product-hero p, .lede { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 15px;
  background: var(--blue);
  color: #fff;
  font-weight: 760;
  text-decoration: none;
  box-shadow: 0 13px 32px rgba(7, 136, 255, .24);
}
.button.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: none; }
.portal-card {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border: 1px solid rgba(31, 112, 201, .12);
  border-radius: 42px;
  background: #f7faff;
  box-shadow: var(--shadow);
}
.portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 76px rgba(255, 255, 255, .84);
}
.portal-card img { width: 100%; height: 500px; object-fit: cover; display: block; }
.portal-caption {
  position: absolute;
  z-index: 1;
  left: 26px;
  right: 26px;
  bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: #09214a;
  backdrop-filter: blur(16px);
}
.portal-caption strong { display: block; font-size: 1.16rem; }
.portal-caption span { color: #59708f; font-size: .87rem; }
.local-badge { padding: 6px 10px; border: 1px solid rgba(0, 101, 232, .22); border-radius: 999px; white-space: nowrap; }

.product-section { padding: 86px 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: .72fr 1.28fr; gap: 40px; margin-bottom: 40px; }
.section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.045em; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.feature { min-height: 236px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feature .number { color: var(--blue-deep); font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.feature h3 { margin: 40px 0 9px; }
.feature p { margin: 0; color: var(--muted); }
.trust-strip { display: grid; grid-template-columns: .82fr 1.18fr; gap: 24px; padding: 30px; border-radius: var(--radius); background: var(--navy); color: #fff; }
.trust-strip h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.045em; }
.trust-list { display: grid; align-content: center; }
.trust-list span { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }

.legal-hero { padding: 70px 0 50px; border-bottom: 1px solid var(--line); }
.meta { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 27px; color: var(--muted); font-size: .9rem; }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding: 56px 0 88px; }
.toc { position: sticky; top: 24px; align-self: start; }
.toc strong { display: block; margin-bottom: 13px; color: var(--muted); font-size: .8rem; letter-spacing: .11em; }
.toc a { display: block; padding: 6px 0; color: var(--muted); font-size: .9rem; text-decoration: none; }
.toc a:hover { color: var(--blue-deep); }
article { max-width: 750px; }
article section { scroll-margin-top: 24px; margin-bottom: 50px; }
article h2 { margin: 0 0 15px; font-size: 1.7rem; line-height: 1.28; letter-spacing: -.02em; }
article h3 { margin: 26px 0 8px; }
p { margin: 0 0 16px; }
ul, ol { margin: 12px 0 18px; padding-left: 1.25rem; }
li { margin: 8px 0; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 48px; }
.summary div { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.summary b { display: block; margin-bottom: 6px; color: var(--blue-deep); font-size: .78rem; letter-spacing: .07em; }
.note, .notice { padding: 20px 22px; border-radius: 18px; background: var(--blue-soft); border-left: 4px solid var(--blue); }
.data-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .94rem; }
.data-table th, .data-table td { padding: 13px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); font-size: .8rem; letter-spacing: .05em; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 48px 0; }
.quick { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; }
.quick b { display: block; margin-bottom: 5px; color: var(--ink); }
.quick span { color: var(--muted); font-size: .9rem; }
.faq-section { padding-bottom: 88px; }
.faq { display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
summary { padding: 18px 20px; cursor: pointer; font-weight: 720; }
details > p, details > ul { margin: 0; padding: 0 20px 20px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 55px; padding-top: 48px; border-top: 1px solid var(--line); }
.contact h2 { margin-top: 0; }
.contact-card { padding: 24px; border-radius: 20px; background: var(--navy); color: #fff; }
.contact-card span, .privacy-reminder { color: rgba(255, 255, 255, .7); }
.mail { display: inline-block; margin: 16px 0; color: #69bdff; font-weight: 740; }
.privacy-reminder { font-size: .88rem; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 34px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer .filing-records { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; justify-self: center; text-align: center; }
.site-footer .public-security-record { display: inline-flex; align-items: center; gap: 6px; }
.site-footer .public-security-record img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.site-footer .icp-record { text-align: center; }
.site-footer div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.site-footer a { text-decoration: none; }

@media (max-width: 800px) {
  .product-hero, .section-head, .trust-strip, .layout, .contact { grid-template-columns: 1fr; }
  .product-hero { min-height: auto; padding-top: 52px; }
  .feature-grid, .quick-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
  .portal-card, .portal-card img { min-height: 390px; height: 390px; }
  .summary { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shell { width: calc(100% - 28px); }
  .site-header { display: block; padding: 18px 0; }
  .nav { justify-content: flex-start; gap: 12px; margin-top: 15px; }
  .hub-link { padding-right: 10px; }
  .product-hero h1, .legal-hero h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .portal-caption { left: 14px; right: 14px; bottom: 14px; }
  .local-badge { display: none; }
  .data-table { display: block; overflow-x: auto; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer .filing-records, .site-footer div:last-child { justify-self: center; }
  .site-footer div:last-child { justify-content: center; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #06101e;
    --surface: rgba(15, 31, 51, .88);
    --surface-strong: #0d1e33;
    --ink: #f2f7ff;
    --muted: #a8b6c8;
    --line: rgba(220, 238, 255, .14);
    --blue: #2499ff;
    --blue-deep: #6cbdff;
    --blue-soft: #0c3158;
    --navy: #020914;
  }
  body { background: radial-gradient(circle at 84% 4%, rgba(7, 136, 255, .19), transparent 31rem), var(--paper); }
  .button { color: #fff; }
  .button.secondary { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  body { background: #fff; color: #000; }
  .site-header, .toc, .site-footer { display: none; }
  .layout { display: block; padding-top: 24px; }
  article { max-width: none; }
}