:root {
  --ink: #ecf7ff;
  --ink-soft: #a7bfd1;
  --ink-dark: #11283c;
  --muted: #7891a5;
  --night: #061523;
  --deep: #091d2e;
  --surface: #0d263a;
  --surface-2: #102d43;
  --line: rgba(149, 208, 236, .16);
  --line-strong: rgba(118, 223, 236, .38);
  --cyan: #66e3e5;
  --cyan-strong: #24c7d1;
  --violet: #8c82ff;
  --white: #fff;
  --accent: #ff7a90;
  --shadow: 0 22px 60px rgba(1, 9, 18, .24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--ink);
  font: 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  min-width: 320px;
}
body::before {
  background-image: linear-gradient(rgba(102, 227, 229, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 227, 229, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.wrap { margin: 0 auto; max-width: 1180px; padding: 0 28px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.skip-link { background: var(--cyan); border-radius: 0 0 8px 8px; color: var(--night); left: -9999px; padding: 9px 14px; position: absolute; top: 0; z-index: 30; }
.skip-link:focus { left: 12px; }

/* Shared chrome */
.topbar { background: rgba(3, 14, 25, .9); border-bottom: 1px solid rgba(102, 227, 229, .1); color: var(--ink-soft); font-size: 12px; }
.topbar-in { align-items: center; display: flex; gap: 20px; justify-content: space-between; min-height: 38px; }
.topbar .company { letter-spacing: .08em; text-transform: uppercase; }
.news { align-items: center; display: flex; gap: 9px; max-width: 58%; min-width: 0; }
.news-label { color: var(--cyan); font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.news-ticker { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-ticker:hover { color: var(--white); }
.news-btn { background: transparent; border: 0; color: var(--cyan); cursor: pointer; padding: 0 4px; }
.news-panel { background: rgba(7, 26, 43, .98); border-bottom: 1px solid var(--line); color: var(--ink-soft); padding-bottom: 16px; padding-top: 14px; }
.news-panel-head { color: var(--cyan); font-size: 11px; letter-spacing: .08em; margin-bottom: 6px; text-transform: uppercase; }
.news-panel ol { margin-left: 20px; }
.news-panel li { font-size: 13px; padding: 2px 0; }
.news-tip { font-size: 12px; font-style: italic; margin-top: 8px; opacity: .75; }
.site-header { backdrop-filter: blur(16px); background: rgba(6, 21, 35, .82); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.nav { align-items: center; display: flex; gap: 24px; justify-content: space-between; min-height: 76px; }
.brand-lockup { align-items: center; display: flex; gap: 11px; min-width: 0; }
.logo-mark { align-items: center; background: linear-gradient(135deg, var(--cyan), var(--violet)); border-radius: 9px; box-shadow: 0 0 22px rgba(102, 227, 229, .28); color: var(--night); display: inline-flex; flex: 0 0 34px; font-size: 15px; font-weight: 900; height: 34px; justify-content: center; }
.logo { color: var(--white); font-size: 16px; font-weight: 700; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.menu a { border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); font-size: 13px; padding: 8px 11px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.menu a:hover, .menu a:focus-visible, .menu a.active { background: rgba(102, 227, 229, .08); border-color: var(--line-strong); color: var(--white); outline: 0; }
main.wrap { min-height: calc(100vh - 190px); padding-bottom: 76px; padding-top: 42px; }

/* Home */
.hero { overflow: hidden; position: relative; }
.hero-home { align-items: center; background: radial-gradient(circle at 75% 30%, rgba(140, 130, 255, .23), transparent 33%), linear-gradient(135deg, #09273d 0%, #061523 70%); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); min-height: 460px; padding: 62px clamp(26px, 6vw, 82px); }
.hero-home::after { background: linear-gradient(90deg, transparent, rgba(102, 227, 229, .18), transparent); content: ""; height: 1px; left: 8%; position: absolute; right: 8%; top: 36%; }
.hero-copy { max-width: 600px; position: relative; z-index: 1; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .2em; margin-bottom: 18px; text-transform: uppercase; }
.hero h1 { font-size: clamp(34px, 5vw, 66px); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 20px; }
.hero h1 em { color: var(--cyan); font-style: normal; }
.hero p { color: var(--ink-soft); font-size: 17px; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { background: var(--cyan); border: 1px solid var(--cyan); border-radius: 7px; color: var(--night); cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; justify-content: center; padding: 9px 16px; transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.btn:hover, .btn:focus-visible { box-shadow: 0 0 24px rgba(102, 227, 229, .26); transform: translateY(-2px); outline: 0; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: rgba(102, 227, 229, .08); }
.btn.danger { background: var(--accent); border-color: var(--accent); }
.hero-orbit { height: 300px; justify-self: end; max-width: 360px; position: relative; width: 100%; }
.orbit-ring, .orbit-ring::before, .orbit-ring::after { border: 1px solid rgba(102, 227, 229, .28); border-radius: 50%; content: ""; inset: 10%; position: absolute; transform: rotate(-20deg) skewX(-8deg); }
.orbit-ring::before { inset: 12%; transform: rotate(68deg) skewX(12deg); }
.orbit-ring::after { inset: 24%; transform: rotate(118deg) skewX(-18deg); }
.orbit-core { align-items: center; background: radial-gradient(circle, rgba(102, 227, 229, .34), rgba(36, 199, 209, .04) 62%, transparent 70%); display: flex; inset: 20%; justify-content: center; position: absolute; }
.orbit-core strong { color: var(--white); font-size: 38px; letter-spacing: -.08em; }
.orbit-node { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 7px rgba(102, 227, 229, .08), 0 0 24px var(--cyan); height: 7px; position: absolute; width: 7px; }
.node-a { right: 15%; top: 26%; }.node-b { bottom: 19%; left: 17%; }.node-c { left: 20%; top: 17%; }
.section-head { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin: 70px 0 22px; }
.section-kicker { color: var(--cyan); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.section-title { color: var(--white); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.2; }
.section-desc { color: var(--ink-soft); font-size: 14px; max-width: 440px; }
.capability-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.capability { background: linear-gradient(145deg, rgba(16, 45, 67, .88), rgba(9, 29, 46, .88)); border: 1px solid var(--line); border-radius: 14px; min-height: 190px; padding: 24px; position: relative; transition: border-color .2s ease, transform .2s ease; }
.capability::before { color: var(--cyan); content: attr(data-index); font-size: 11px; letter-spacing: .1em; position: absolute; right: 20px; top: 20px; }
.capability:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.capability h3 { font-size: 18px; margin: 24px 0 8px; }.capability p { color: var(--ink-soft); font-size: 13px; }
.capability-link { color: var(--cyan); display: inline-block; font-size: 12px; margin-top: 16px; }
.signal-line { background: var(--cyan); height: 2px; margin-bottom: 20px; width: 30px; }
.cta-band { align-items: center; background: linear-gradient(100deg, rgba(36, 199, 209, .15), rgba(140, 130, 255, .12)); border: 1px solid var(--line-strong); border-radius: 15px; display: flex; gap: 24px; justify-content: space-between; margin-top: 70px; padding: 24px 28px; }
.cta-band p { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

/* Content pages */
.page-intro { margin-bottom: 32px; max-width: 720px; }.page-intro .section-title { margin: 8px 0 12px; }.page-intro p { color: var(--ink-soft); }
.panel { background: rgba(13, 38, 58, .88); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 12px 34px rgba(1, 9, 18, .12); margin-bottom: 18px; padding: 26px; }
.panel h3 { font-size: 18px; margin-bottom: 12px; }.panel pre, .panel .text { color: var(--ink-soft); font: inherit; white-space: pre-wrap; }
.license-img { border: 1px solid var(--line); border-radius: 10px; max-width: 420px; width: 100%; }
.category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 42px; }
.category-nav a { background: rgba(102, 227, 229, .06); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 12px; padding: 7px 12px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.category-nav a:hover, .category-nav a:focus-visible { background: rgba(102, 227, 229, .12); border-color: var(--line-strong); color: var(--cyan); outline: 0; }
.category-section { scroll-margin-top: 110px; }.category-heading { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; margin: 34px 0 16px; padding-bottom: 12px; }
.category-heading h3 { font-size: 20px; }.category-heading span { color: var(--cyan); font-size: 11px; letter-spacing: .12em; }
.product-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard { background: linear-gradient(145deg, rgba(16, 45, 67, .9), rgba(9, 29, 46, .9)); border: 1px solid var(--line); border-radius: 13px; min-width: 0; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.pcard:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.pcard .img { align-items: center; background: linear-gradient(135deg, rgba(102, 227, 229, .1), rgba(140, 130, 255, .1)); display: flex; height: 116px; justify-content: center; overflow: hidden; position: relative; }
.pcard .img::after { border: 1px solid rgba(102, 227, 229, .2); border-radius: 50%; content: ""; height: 96px; position: absolute; width: 96px; }
.pcard .img img { height: 100%; object-fit: cover; position: relative; width: 100%; z-index: 1; }.pcard .img .ph { color: var(--cyan); font-size: 11px; letter-spacing: .16em; position: relative; z-index: 1; }
.pcard .body { padding: 19px 20px 20px; }.product-tag { color: var(--cyan); font-size: 11px; letter-spacing: .06em; }.pcard h4 { font-size: 17px; margin: 5px 0 4px; }.model { color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.spec-details { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px; }.spec-details summary { color: var(--cyan); cursor: pointer; font-size: 12px; list-style: none; }.spec-details summary::-webkit-details-marker { display: none; }.spec-details summary::before { content: "+"; display: inline-block; font-size: 15px; margin-right: 7px; }.spec-details[open] summary::before { content: "−"; }.spec-details p { color: var(--ink-soft); font-size: 13px; margin-top: 10px; white-space: pre-wrap; }
.filelist { list-style: none; }.filelist li { align-items: center; background: rgba(13, 38, 58, .88); border: 1px solid var(--line); border-radius: 11px; display: flex; gap: 14px; margin-bottom: 9px; padding: 14px 16px; }.filelist .fn { flex: 1; min-width: 0; overflow-wrap: anywhere; }.filelist .sz { color: var(--muted); font-size: 12px; }

/* Admin forms */
.admin-grid { display: grid; gap: 8px; }.admin-grid label { color: var(--ink-soft); display: block; font-size: 12px; margin-top: 10px; }.admin-grid input[type=text], .admin-grid textarea { background: rgba(6, 21, 35, .72); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 10px 12px; width: 100%; }.admin-grid textarea { min-height: 90px; resize: vertical; }.admin-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer { border-top: 1px solid var(--line); color: var(--ink-soft); margin-top: 24px; padding: 26px 0; }.site-footer .wrap { align-items: center; display: flex; font-size: 12px; justify-content: space-between; }

@media (max-width: 760px) {
  .wrap { padding-left: 18px; padding-right: 18px; }.nav { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 14px; padding-top: 14px; }.menu { justify-content: flex-start; width: 100%; }.menu a { padding: 7px 9px; }.hero-home { grid-template-columns: 1fr; min-height: auto; padding: 42px 24px; }.hero-orbit { height: 220px; justify-self: center; margin-top: 28px; max-width: 280px; }.hero h1 { font-size: 42px; }.capability-grid, .product-grid { grid-template-columns: 1fr; }.section-head { align-items: flex-start; flex-direction: column; margin-top: 52px; }.cta-band { align-items: flex-start; flex-direction: column; margin-top: 52px; }.category-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 520px) {
  .topbar-in { align-items: flex-start; flex-direction: column; gap: 4px; padding-bottom: 8px; padding-top: 8px; }.news { max-width: 100%; width: 100%; }.news-ticker { max-width: 100%; }.hero h1 { font-size: 34px; }.hero p { font-size: 15px; }.hero-actions .btn { flex: 1; }.panel { padding: 20px; }.filelist li { align-items: flex-start; flex-wrap: wrap; }.filelist .sz { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
