:root {
    --bg: #030b18;
    --card: rgba(8, 22, 44, .72);
    --line: rgba(140, 190, 255, .16);
    --ink: #f4f8ff;
    --muted: rgba(214, 226, 244, .72);
    --blue: #1b8dff;
    --cyan: #59f1ff;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.65;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
  .kicker {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px;
    color: #8ec5ff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
  }
  .kicker i { width: 28px; height: 1px; background: #8ec5ff; display: block; }
  .blue {
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .bar {
    position: sticky; top: 0; z-index: 5;
    background: rgba(3, 11, 24, .92);
    border-bottom: 1px solid rgba(140, 190, 255, .08);
  }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    height: 72px;
  }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
  .mark {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--blue); color: #fff; font-size: 14px;
  }
  .nav-links { display: flex; gap: 6px; align-items: center; }
  .nav-links a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; }
  .nav-links a:hover, .nav-links a.on { color: #fff; background: rgba(255,255,255,.06); }
  .cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--blue); color: #fff;
    border-radius: 9px; padding: 8px 16px; font-weight: 600; font-size: 14px;
  }
  .cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); }

  .hero {
    background:
      radial-gradient(circle at 74% 28%, rgb(10, 50, 96), rgb(6, 26, 53) 32%, rgb(3, 11, 24) 70%);
    padding: 28px 0 64px;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
  }
  h1 {
    margin: 0;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  .lead { margin: 18px 0 0; max-width: 520px; color: var(--muted); }
  .actions { display: flex; gap: 10px; margin-top: 26px; }
  .media {
    background: rgba(4, 16, 36, .65);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
  }
  .tabs { display: flex; gap: 8px; margin-bottom: 12px; }
  .tabs button {
    flex: 1;
    border: 0;
    border-radius: 8px;
    padding: 8px 6px;
    background: rgba(255,255,255,.06);
    color: #d7e6f8;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .tabs button[aria-pressed="true"] { background: var(--blue); color: #fff; }
  .media img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: left top;
    border-radius: 12px;
    background: #0c1830;
  }
  .caption { margin: 10px 4px 2px; color: var(--muted); font-size: 13px; }

  .plats {
    display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
    margin: 34px 0 22px;
    color: rgba(214, 226, 244, .7);
    font-size: 13px;
    font-weight: 600;
  }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .stat {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    padding: 22px 18px 18px;
    text-align: center;
  }
  .stat b {
    display: block;
    font-size: 34px;
    line-height: 1.1;
    color: var(--cyan);
    font-weight: 800;
  }
  .stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }

  section { padding: 84px 0; }
  .split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 32px;
    align-items: end;
    margin-bottom: 28px;
  }
  h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }
  .split p, .center p { margin: 0; color: var(--muted); }
  .center { text-align: center; margin-bottom: 32px; }
  .center h2 { margin-top: 0; }
  .center p { max-width: 640px; margin: 12px auto 0; }

  .pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .box {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(6, 18, 36, .8);
    padding: 22px 20px;
  }
  .box h3 { margin: 0 0 8px; font-size: 18px; }
  .box p { margin: 0; color: var(--muted); font-size: 14px; }

  .lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .lines .box b { display: block; color: var(--cyan); font-size: 13px; margin-bottom: 8px; }

  .products { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .product { grid-column: span 2; border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 18, 36, .85); overflow: hidden; }
  .product:nth-child(4) { grid-column: 2 / span 2; }
  .product:nth-child(5) { grid-column: 4 / span 2; }
  .product img { width: 100%; height: 180px; object-fit: cover; object-position: left top; background: #0c1830; }
  .product .pad { padding: 16px 16px 18px; }
  .product .path { color: #8ec5ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  .product h3 { margin: 6px 0 8px; font-size: 18px; }
  .product p { margin: 0; color: var(--muted); font-size: 14px; }
  .get { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #9fd0ff; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .chips span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; font-size: 12px; color: #d5e6f8; }

  .rows { display: grid; gap: 12px; }
  .row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 18px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    background: rgba(6, 18, 36, .75);
  }
  .row b { font-size: 15px; }
  .row p { margin: 0; font-size: 14px; color: var(--muted); }
  .row .after { color: #eaf3ff; }

  .faq details { border-top: 1px solid var(--line); padding: 14px 0; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
  .faq p { margin: 8px 0 0; color: var(--muted); }

  .why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .answer { margin: 14px 0 0; max-width: 820px; font-size: 18px; line-height: 1.7; color: #eaf3ff; }
  .defs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
  .defs h2, .defs h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0; line-height: 1.35; }
  footer {
    border-top: 1px solid var(--line);
    padding: 36px 0 28px;
  }
  .foot {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    gap: 24px;
  }
  footer p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
  footer a { color: #d5e6f8; }
  .copy { margin-top: 28px; color: rgba(214,226,244,.45); font-size: 13px; }

  @media (max-width: 980px) {
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    .hero-grid, .split, .pain, .lines, .stats, .why, .defs, .foot { grid-template-columns: 1fr; }
    .products { grid-template-columns: 1fr; }
    .product, .product:nth-child(4), .product:nth-child(5) { grid-column: auto; }
    .row { grid-template-columns: 1fr; }
    .nav-links { display: none; }
  }

.more { display: inline-block; margin-top: 12px; color: #9fd0ff; font-weight: 600; font-size: 14px; }
.page { padding: 28px 0 72px; }
.page h1 { font-size: 48px; }
.shots { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 28px; }
.shots.one { grid-template-columns: 1fr; }
.shots img {
  width: 100%; height: 360px; object-fit: cover; object-position: left top;
  border-radius: 16px; border: 1px solid var(--line); background: #0c1830;
}
.note {
  margin-top: 22px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.note p { margin: 8px 0 0; color: var(--muted); }
.steps { margin: 18px 0 0; padding-left: 1.2em; }
.steps li { margin: 10px 0; }
.facts { width: 100%; border-collapse: collapse; margin-top: 22px; }
.facts th, .facts td { border-top: 1px solid var(--line); text-align: left; padding: 12px 8px; vertical-align: top; }
.facts th { width: 148px; color: #9fd0ff; font-weight: 600; }
.updated { margin-top: 28px; color: rgba(214,226,244,.45); font-size: 13px; }
.guide-links { margin: 8px 0 0; padding-left: 1.2em; }
.guide-links a { color: #9fd0ff; }
@media (max-width: 980px) {
  .page h1 { font-size: 34px; }
  .shots { grid-template-columns: 1fr; }
  .shots img { height: auto; aspect-ratio: 16 / 10; }
}