@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/barlow-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/barlow-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/barlow-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html{scroll-behavior:smooth}
body{margin:0}
a{color:#34e6d6;text-decoration:none}
a:hover{color:#7af5e6}
@keyframes dsShimmer{to{background-position:220% center}}
@keyframes dsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes dsRadar{to{transform:rotate(360deg)}}
@keyframes dsPulse{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes dsBlip{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(2.3);opacity:0}}
@keyframes dsGlow{0%,100%{box-shadow:0 0 0 1px rgba(52,230,214,.5),0 10px 34px rgba(52,230,214,.28)}50%{box-shadow:0 0 0 1px rgba(90,245,230,.85),0 14px 50px rgba(52,230,214,.5)}}
@keyframes dsGridPan{to{background-position:46px 46px}}
@keyframes dsBreathe{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.8}}
@keyframes dsScanBar{0%{transform:translateY(-10%)}100%{transform:translateY(260px)}}
@keyframes dsUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dsFill{from{width:0}to{width:100%}}
@keyframes dsFade{from{opacity:0}to{opacity:1}}


/* Layout and components retained from the supplied design. */
.site-header { position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:14px 30px;backdrop-filter:blur(16px);background:rgba(8,13,22,.68);border-bottom:1px solid var(--line) }
.brand { display:flex;align-items:center;gap:11px }
.site-nav { margin-left:auto;display:flex;align-items:center;gap:26px }
.hero { position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:70px 30px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:44px;align-items:center }
.hero-copy { transition:opacity .9s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1) }
.hero-description { font-size:17px;line-height:1.6;color:var(--sub);margin:0 0 30px;max-width:460px }
.hero-actions { display:flex;flex-wrap:wrap;gap:14px;align-items:center }
.hero-trust { display:flex;gap:20px;margin-top:26px;font-size:12.5px;color:var(--sub);font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.hero-visual { transition:opacity .9s cubic-bezier(.16,.8,.3,1) .15s,transform .9s cubic-bezier(.16,.8,.3,1) .15s }
.hero-demo-link { padding:9px 16px;border-radius:11px;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04141a;font-family:var(--font-heading);font-weight:600;font-size:13px }
.toolchain-strip { position:relative;z-index:1;max-width:1180px;margin:10px auto 0;padding:0 30px;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1) }
.section.features { position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:70px 30px }
.feature-list { display:flex;flex-direction:column;gap:80px }
.feature-row { display:flex;flex-wrap:wrap;gap:62px;align-items:center;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1) }
.feature-copy { flex:1 1 320px;min-width:280px }
.feature-visual { flex:1.35 1 480px;min-width:340px }
.app-window { border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,24,40,.92),rgba(9,14,26,.95));box-shadow:0 26px 64px rgba(0,0,0,.42);overflow:hidden }
.window-titlebar { display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-bottom:1px solid var(--line) }
.scan-body { display:flex;gap:24px;padding:24px;align-items:center }
.feature-row.feature-row-reverse { display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:62px;align-items:center;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1) }
.demo-stage { position:relative;height:300px }
.section.how { position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:40px 30px 70px }
.how-panel { position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(120,220,230,.26);background:linear-gradient(135deg,rgba(52,230,214,.08),rgba(139,123,255,.06) 60%,var(--panel2));padding:48px 42px;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1) }
.how-steps { position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px }
.section.stats { position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 30px 70px }
.section.download { position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:10px 30px 90px }
.download-panel { position:relative;overflow:hidden;text-align:center;border-radius:26px;border:1px solid rgba(120,220,230,.32);background:linear-gradient(135deg,rgba(52,230,214,.12),rgba(139,123,255,.08));padding:66px 36px;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1) }
.download-button { display:inline-flex;align-items:center;gap:11px;padding:18px 36px;border-radius:16px;background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04141a;font-family:var(--font-heading);font-weight:600;font-size:19px;animation:dsGlow 3.4s ease-in-out infinite }
.download-meta { margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center;color:var(--sub);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px }
.site-footer { position:relative;z-index:1;border-top:1px solid var(--line);padding:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;max-width:1180px;margin:0 auto }
.site { --bg:#070b14;--ink:#eaf3ff;--sub:#8ea6c6;--cyan:#34e6d6;--blue:#3aa6ff;--violet:#8b7bff;--line:rgba(120,190,255,.12);--panel1:rgba(255,255,255,.045);--panel2:rgba(255,255,255,.012);min-height:100vh;overflow-x:hidden;background:radial-gradient(1100px 620px at 80% -6%,rgba(58,166,255,.16),transparent 58%),radial-gradient(900px 560px at 2% 40%,rgba(139,123,255,.12),transparent 55%),linear-gradient(180deg,#070b14,#0a0f1d 55%,#070a12);color:var(--ink);font-family:var(--font-body) }
/* Native page foundations. No framework or external requests are needed. */
:root {
  --font-heading: "Barlow Condensed", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Barlow", "PingFang SC", "Microsoft YaHei", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { background: #070b14; color: #eaf3ff; font: 400 15px/1.55 var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #34e6d6; outline-offset: 5px; }
::selection { color: #eaf3ff; background: #185d67; }
[hidden] { display: none !important; }
section[id], .feature-row[id] { scroll-margin-top: 92px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; border-radius: 10px; color: #04141a; background: #34e6d6; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site { overflow-x: clip; }
.site-header { max-width: 100%; }
.brand { color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-icon { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; }
.brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.menu-toggle { display: none; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; color: var(--ink); background: var(--panel1); }
.site-nav a { white-space: nowrap; transition: color .2s, filter .2s, background .2s; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:last-child:hover, .download-button:hover, .hero-actions a:first-child:hover { color: #04141a; filter: brightness(1.1); }
.hero-actions a { justify-content: center; transition: background .2s, filter .2s; }
.hero-actions a:last-child:hover { color: var(--ink); background: var(--panel1); }
.hero-trust { flex-wrap: wrap; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.feature-row-reverse { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.feature-row-reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature-row-reverse .feature-visual { grid-column: 1; grid-row: 1; }
.feature-copy, .feature-visual { min-width: 0 !important; }
.feature-visual { width: 100%; }
.window-titlebar > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scan-body { min-width: 0; }
.demo-stage { height: 300px; }
.demo-step { display: contents; }
.demo-controls { display: none; gap: 8px; padding: 0 18px 12px; }
.demo-controls button { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--sub); font-size: 13px; transition: background .2s, color .2s; }
.demo-controls button:hover { border-color: #34e6d6; color: var(--ink); }
.demo-controls button[aria-pressed="true"] { background: linear-gradient(120deg, var(--cyan), var(--blue)); border-color: transparent; color: #04141a; }
.demo-caption { margin: 0; padding: 0 18px 16px; color: var(--sub); font-size: 11px; text-align: center; }
.maintenance-summary { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(120,220,230,.28); border-radius: 12px; background: rgba(52,230,214,.05); }
.maintenance-summary strong { font-size: 15px; }
.maintenance-summary p { margin: 4px 0 0; font-size: 11px; color: var(--sub); }
.maintenance-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #04141a; background: linear-gradient(120deg, var(--cyan), var(--blue)); font-size: 26px; }
.status-tag { margin-left: auto; color: var(--cyan); font-size: 11px; }
.schedule-preview { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 13px; }
.schedule-preview span, .retention-label { color: var(--sub); }
.retention-label { font-size: 11px; }
.retention-options { display: flex; gap: 8px; }
.retention-options span { flex: 1; text-align: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--sub); font-size: 12px; }
.retention-options .is-selected { background: linear-gradient(120deg, var(--cyan), var(--blue)); color: #04141a; }
.maintenance-note { border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; color: var(--sub); line-height: 1.7; }
.download-note { margin: 14px 0 0; color: var(--sub); font-size: 12px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.js-ready [data-reveal] { opacity: 0; transform: translateY(20px); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Tablet: keep previews full width and preserve the reading order. */
@media (max-width: 960px) {
  .site-header { padding: 14px 24px; }
  .site-nav { gap: 18px; }
  .hero { gap: 30px; padding: 54px 24px 36px; }
  .hero h1 { font-size: 46px !important; }
  .section { padding-left: 24px !important; padding-right: 24px !important; }
  .feature-row, .feature-row-reverse { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 30px !important; }
  .feature-copy, .feature-visual, .feature-row-reverse .feature-copy, .feature-row-reverse .feature-visual { grid-column: 1; grid-row: auto; }
  .feature-copy p { max-width: 640px !important; }
  .feature-visual { max-width: 660px; }
  .feature-row-reverse .feature-visual { justify-self: end; }
  .feature-list { gap: 64px; }
  .hero-trust { gap: 10px 16px; }
  .how-panel { padding: 38px 28px; }
}

/* Phone: every section fits 320px and touch targets stay at least 44px. */
@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .brand { margin-right: auto; }
  .site-nav { width: 100%; justify-content: space-between; gap: 8px; margin-left: 0; flex-wrap: wrap; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; font-size: 13px !important; }
  .site-nav a:last-child { padding: 10px 13px !important; }
  .js-ready .menu-toggle { display: block; min-height: 44px; }
  .js-ready .site-nav { display: none; }
  .js-ready .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; padding: 6px 0; }
  .js-ready .site-nav.is-open a { padding: 10px 14px; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; padding: 42px 18px 26px; }
  .hero h1 { font-size: clamp(36px, 9vw, 50px) !important; line-height: 1.12 !important; }
  .hero-description { font-size: 15px; margin-bottom: 24px; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
  .hero-actions a { padding: 14px 10px !important; font-size: 15px !important; }
  .hero-trust { font-size: 11px; margin-top: 22px; }
  .hero-visual { min-width: 0; }
  .toolchain-strip { padding: 0 18px; }
  .toolchain-strip > div { gap: 8px 16px !important; font-size: 11px !important; }
  .toolchain-strip span:first-child { width: 100%; text-align: center; }
  .section { padding-left: 18px !important; padding-right: 18px !important; }
  .features { padding-top: 48px !important; padding-bottom: 48px !important; }
  .features h2 { font-size: 30px !important; line-height: 1.25; }
  .features h3 { font-size: 28px !important; }
  .feature-copy > div:nth-of-type(2) { font-size: 22px !important; }
  .feature-list { gap: 52px; }
  .feature-row { gap: 24px !important; }
  .scan-body { flex-direction: column; gap: 18px; padding: 20px; }
  .scan-body > div:last-child { width: 100%; }
  .app-window { border-radius: 14px; }
  .app-window div, .app-window span { overflow-wrap: anywhere; }
  .window-titlebar { padding: 0 10px; gap: 6px; }
  .window-titlebar > span:last-child { font-size: 8px !important; letter-spacing: .1em !important; }
  .demo-stage { height: 326px; }
  .demo-stage > div > div { padding: 16px 12px !important; }
  .demo-stage span { flex-shrink: 0; }
  .demo-stage span[style*="flex:1"] { flex-shrink: 1; }
  .demo-controls { padding: 0 12px 12px; }
  .how { padding-top: 20px !important; padding-bottom: 40px !important; }
  .how-panel { padding: 32px 20px; }
  .how h2 { font-size: 29px !important; line-height: 1.25; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .stats { padding-bottom: 40px !important; }
  .stats > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .stats > div > div { padding: 24px 8px !important; }
  .stats > div > div > div:first-child { font-size: 34px !important; }
  .stats > div > div > div:last-child { font-size: 11px !important; }
  .download { padding-top: 0 !important; padding-bottom: 48px !important; }
  .download-panel { padding: 42px 20px; }
  .download h2 { font-size: 32px !important; line-height: 1.25; }
  .download p { font-size: 14px !important; }
  .download-button { width: 100%; justify-content: center; padding: 16px 14px; font-size: 18px; }
  .download-meta { font-size: 11px; gap: 8px 12px; }
  .download-meta span:nth-child(2), .download-meta span:nth-child(4) { display: none; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 18px; }
  .site-footer > div:first-child { flex-wrap: wrap; }
  .site-footer > div:first-child > span:last-child { width: 100%; margin-left: 0 !important; font-size: 11px !important; }
  .site-footer > div:last-child { margin-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 680px) { .hero-actions { display: grid !important; } .hero-trust { font-size: 11px !important; gap: 10px 16px !important; } .site-header { padding: 12px 18px !important; } .brand { order: 0; } .menu-toggle { order: 1; } .site-nav { order: 2; margin-left: 0 !important; gap: 8px !important; } }

.js-ready .demo-controls { display: flex; }