/* ============================================================
   SkyPuppy · 飞狗 — website (与 App 一致:Neo-Brutalist 白天态)
   纸/墨/酸绿 · 硬偏移投影(0 模糊) · 直角 · 900 字重 · 系统字体
   叙事「云端守夜 / Night Watch」保留在文案与"值守日志"签名里。
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --paper:#f2ede1;
  --acid:#d6ff2e;
  --blaze:#ff5a1f;
  --sky:#2b6dff;
  --pink:#ff4fa3;
  --dgreen:#234d00;
  --mute:#666;
  --track:#e4decf;

  --disp:-apple-system,"SF Pro Display","SF Pro Rounded",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;  /* 仅用于日志时间/延迟等数据 */

  --bd:3.5px solid var(--ink);
  --bd-sm:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-xs:3px 3px 0 var(--ink);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{font-family:var(--disp);background:var(--paper);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
::selection{background:var(--acid);color:var(--ink);}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.mono{font-family:var(--mono);}
.eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  background:var(--ink);color:var(--acid);padding:5px 11px;}
.zh-only{display:none;}
html[lang="zh-CN"] .zh-only{display:revert;}
html[lang="zh-CN"] .en-only{display:none;}

/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:5px solid var(--ink);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand .mk{width:42px;height:42px;flex:none;background:var(--acid);border:var(--bd);box-shadow:var(--sh-xs);
  display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);overflow:hidden;}
.brand .mk img{width:86%;height:86%;object-fit:contain;}
.brand b{font-weight:900;font-size:21px;letter-spacing:-1px;}
.brand .tag{font-size:8px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--mute);margin-left:1px;}
.nav-links{display:flex;gap:4px;}
.nav-links a{font-size:12px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;padding:9px 12px;
  border:2.5px solid transparent;transition:.12s;}
.nav-links a:hover{border-color:var(--ink);background:var(--acid);}
.lang{display:flex;border:var(--bd-sm);box-shadow:var(--sh-xs);}
.lang-btn{font-family:inherit;font-size:11px;font-weight:900;cursor:pointer;background:var(--paper);color:var(--ink);border:0;padding:7px 10px;}
.lang-btn+.lang-btn{border-left:var(--bd-sm);}
.lang-btn.active{background:var(--ink);color:var(--acid);}
.nav-dl{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;background:var(--ink);color:var(--acid);
  border:var(--bd);box-shadow:var(--sh-xs);padding:9px 14px;transition:transform .08s;}
.nav-dl:hover{background:var(--acid);color:var(--ink);}
.nav-dl:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.nav-tog{display:none;width:42px;height:42px;border:var(--bd);background:var(--paper);box-shadow:var(--sh-xs);
  flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer;}
.nav-tog i{width:18px;height:3px;background:var(--ink);display:block;}

/* ============================================================ HERO */
.hero{position:relative;border-bottom:5px solid var(--ink);overflow:hidden;
  background:repeating-linear-gradient(45deg,rgba(10,10,10,.045) 0 2px,transparent 2px 24px),var(--paper);}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:60px 24px 62px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.h-title{font-weight:900;font-size:clamp(42px,7vw,78px);line-height:1.04;letter-spacing:-3px;margin:18px 0 18px;}
.h-title .lo{color:var(--mute);}
.h-title .hl{background:var(--acid);box-shadow:6px 0 0 var(--acid),-6px 0 0 var(--acid);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.h-sub{font-size:clamp(15px,1.6vw,18px);font-weight:600;color:#333;max-width:500px;line-height:1.6;margin-bottom:28px;}
.h-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px;}
.cta{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:900;font-size:15px;
  letter-spacing:-.2px;text-transform:uppercase;padding:15px 20px;border:var(--bd);box-shadow:var(--sh);cursor:pointer;
  transition:transform .08s,box-shadow .08s;}
.cta svg{width:19px;height:19px;flex:none;}
.cta:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink);}
.cta-primary{background:var(--ink);color:var(--acid);box-shadow:6px 6px 0 var(--dgreen);}
.cta-primary:active{box-shadow:0 0 0 var(--dgreen);}
.cta-ghost{background:var(--paper);color:var(--ink);}
.h-stats{display:flex;gap:28px;flex-wrap:wrap;}
.hstat .num{font-weight:900;font-size:30px;letter-spacing:-1.5px;}
.hstat .lab{font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin-top:2px;}

/* Vantage = App 的防护状态卡(acid) */
.vantage{position:relative;background:var(--acid);border:var(--bd);box-shadow:var(--sh);padding:18px 18px 20px;overflow:hidden;}
.vantage .vtop{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:900;letter-spacing:2px;
  text-transform:uppercase;color:var(--dgreen);margin-bottom:6px;}
.vantage .live{display:inline-flex;align-items:center;gap:7px;color:var(--ink);}
.vantage .live .pulse{width:9px;height:9px;border-radius:50%;background:var(--ink);animation:pulse 1.7s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(10,10,10,.35)}50%{box-shadow:0 0 0 7px rgba(10,10,10,0)}}
.vantage .beast{display:flex;align-items:center;justify-content:center;padding:6px 0 4px;}
.vantage .beast img{width:132px;height:132px;object-fit:contain;filter:drop-shadow(4px 4px 0 rgba(10,10,10,.28));}
.vantage .vrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;
  padding:10px 0;border-top:2.5px solid rgba(10,10,10,.85);}
.vantage .vrow .k{font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--dgreen);}
.vantage .vrow .v{color:var(--ink);}
.vantage .vrow .v .ok{background:var(--ink);color:var(--acid);padding:2px 8px;}

/* ============================================================ WATCH LOG (signature; ink 条) */
.watchlog{border-bottom:5px solid var(--ink);background:var(--ink);overflow:hidden;position:relative;}
.wl-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 44s linear infinite;}
.watchlog:hover .wl-track{animation-play-state:paused;}
.wl-item{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;color:var(--paper);
  padding:13px 24px;border-right:2px solid #333;letter-spacing:.2px;}
.wl-item time{font-family:var(--mono);font-size:11px;color:var(--mute);}
.wl-item .tag{background:var(--acid);color:var(--ink);font-weight:900;padding:1px 7px;letter-spacing:.5px;}
.wl-item .tag.warn{background:var(--blaze);color:#fff;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================ SECTIONS */
.sec{padding:74px 0;}
.sec+.sec,.watchlog+.sec{border-top:0;}
.sec:not(.day):not(.deep)+.sec:not(.day){border-top:5px solid var(--ink);}
.sec-head{max-width:720px;margin-bottom:36px;}
.sec-title{font-weight:900;font-size:clamp(28px,4.4vw,46px);letter-spacing:-1.8px;line-height:1;margin:12px 0 12px;}
.sec-note{color:var(--mute);font-size:15px;font-weight:600;line-height:1.55;}

/* watch panels (app-level 彩块,对齐 App 工具卡) */
.watch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wpanel{position:relative;border:var(--bd);box-shadow:var(--sh);background:var(--paper);padding:22px 20px 24px;
  overflow:hidden;transition:transform .1s,box-shadow .1s;}
.wpanel:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
.wpanel .w-ico{width:52px;height:52px;border:var(--bd);background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.wpanel .w-ico svg{width:28px;height:28px;}
.wpanel h3{font-weight:900;font-size:20px;letter-spacing:-.6px;line-height:1;margin-bottom:9px;}
.wpanel p{font-size:13.5px;font-weight:600;color:#333;line-height:1.5;margin-bottom:15px;}
.wpanel .w-list li{font-size:12.5px;font-weight:800;padding:7px 0 7px 18px;position:relative;border-top:2px dashed rgba(10,10,10,.2);}
.wpanel .w-list li:first-child{border-top:0;}
.wpanel .w-list li::before{content:"›";position:absolute;left:2px;color:var(--ink);font-weight:900;}
.wpanel .free{position:absolute;top:20px;right:20px;font-size:9px;font-weight:900;letter-spacing:1px;
  background:var(--acid);color:var(--ink);border:2px solid var(--ink);padding:2px 6px;}
/* 彩块变体 */
.wpanel.c-blaze{background:var(--blaze);color:#fff;}
.wpanel.c-sky{background:var(--sky);color:#fff;}
.wpanel.c-pink{background:var(--pink);color:var(--ink);}
.wpanel.c-blaze .w-ico,.wpanel.c-sky .w-ico{background:#fff;}
.wpanel.c-pink .w-ico{background:var(--paper);}
.wpanel.c-blaze p,.wpanel.c-sky p{color:rgba(255,255,255,.92);}
.wpanel.c-blaze .w-list li,.wpanel.c-sky .w-list li{border-color:rgba(255,255,255,.32);}
.wpanel.c-blaze .w-list li::before,.wpanel.c-sky .w-list li::before{color:#fff;}
.wpanel.c-blaze .w-list li,.wpanel.c-sky .w-list li{color:#fff;}

/* deep watch = App 系统级深色斜纹区 */
.deep{background:repeating-linear-gradient(45deg,#1c1c1c 0 2px,transparent 2px 22px),
  radial-gradient(circle at 25% 12%,#2a2a2a,#0c0c0c 72%);color:var(--paper);border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);}
.deep .sec-title{color:var(--paper);}
.deep .sec-note{color:#aaa;}
.deep .wpanel{background:#141414;color:var(--paper);border-color:var(--paper);box-shadow:6px 6px 0 rgba(0,0,0,.6);}
.deep .wpanel:hover{box-shadow:9px 9px 0 rgba(0,0,0,.6);}
.deep .wpanel .w-ico{background:#0c0c0c;border-color:var(--paper);color:var(--acid);}
.deep .wpanel p{color:#bbb;}
.deep .wpanel .w-list li{border-color:rgba(242,237,225,.22);color:#dfe7d0;}
.deep .wpanel .w-list li::before{color:var(--acid);}

/* ============================================================ HOLDING THE LINE */
.line-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start;}
.line-list{display:flex;flex-direction:column;}
.line-item{display:flex;gap:16px;padding:20px 0;border-top:3px solid var(--ink);}
.line-item:first-child{border-top:0;}
.line-item .li-ico{width:48px;height:48px;flex:none;border:var(--bd-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.line-item .li-ico svg{width:25px;height:25px;}
.line-item:nth-child(1) .li-ico{background:var(--acid);}
.line-item:nth-child(2) .li-ico{background:var(--sky);color:#fff;}
.line-item:nth-child(3) .li-ico{background:var(--blaze);color:#fff;}
.line-item h3{font-weight:900;font-size:19px;letter-spacing:-.4px;margin-bottom:5px;}
.line-item p{color:#333;font-size:13.5px;font-weight:600;line-height:1.55;}
.line-stats{border:var(--bd);box-shadow:var(--sh);background:var(--ink);}
.lstat{display:flex;align-items:baseline;gap:14px;padding:20px 22px;border-top:3px solid var(--paper);}
.lstat:first-child{border-top:0;}
.lstat .num{font-weight:900;font-size:36px;letter-spacing:-2px;color:var(--acid);line-height:1;min-width:92px;}
.lstat .lab{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#bbb;}

/* ============================================================ DOWNLOAD (acid 带,对齐 App 下载区) */
.day{background:var(--acid);border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);}
.day .eyebrow{background:var(--ink);color:var(--acid);}
.day-in{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;}
.day h2{font-weight:900;font-size:clamp(30px,4.8vw,52px);letter-spacing:-2px;line-height:1;margin:12px 0 12px;}
.day p{color:var(--dgreen);font-size:15px;font-weight:700;max-width:440px;line-height:1.6;margin-bottom:20px;}
.day-info{display:flex;flex-wrap:wrap;gap:9px;}
.day-info span{font-size:11px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;background:var(--paper);
  border:var(--bd-sm);box-shadow:var(--sh-xs);padding:7px 11px;}
.store{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);border:var(--bd);
  box-shadow:6px 6px 0 var(--dgreen);padding:16px 24px;transition:transform .08s,box-shadow .08s;}
.store:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--dgreen);}
.store svg{width:36px;height:36px;flex:none;color:var(--acid);}
.store .t{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#bbb;}
.store .b{font-weight:900;font-size:21px;letter-spacing:-.5px;}

/* ============================================================ CONTACT */
.contact-card{display:flex;gap:20px;align-items:center;border:var(--bd);box-shadow:var(--sh);background:var(--paper);padding:26px;max-width:740px;}
.contact-card .c-ico{width:60px;height:60px;flex:none;border:var(--bd);background:var(--pink);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.contact-card .c-ico svg{width:30px;height:30px;}
.contact-card h3{font-weight:900;font-size:20px;letter-spacing:-.5px;margin-bottom:5px;}
.contact-card p{color:#333;font-size:13.5px;font-weight:600;margin-bottom:12px;}
.mail{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:900;background:var(--ink);color:var(--acid);
  border:var(--bd-sm);box-shadow:var(--sh-xs);padding:9px 14px;transition:transform .08s,box-shadow .08s;}
.mail:hover{background:var(--acid);color:var(--ink);}
.mail:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.mail svg{width:16px;height:16px;}

/* ============================================================ FOOTER */
.foot{background:var(--ink);color:var(--paper);border-top:5px solid var(--acid);padding:48px 0 30px;}
.foot .brand{margin-bottom:14px;}
.foot .brand b{color:var(--paper);}
.foot .fdesc{color:#999;font-size:13px;font-weight:600;max-width:280px;line-height:1.6;}
.foot h4{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--acid);margin-bottom:14px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px;}
.foot li{margin-bottom:10px;}
.foot li a{color:#ccc;font-size:13.5px;font-weight:700;transition:.12s;}
.foot li a:hover{color:var(--acid);}
.foot-bottom{border-top:3px solid #333;padding-top:20px;font-size:11px;font-weight:900;letter-spacing:1.5px;color:#888;text-transform:uppercase;}

/* ============================================================ LEGAL (纸色文档,同一套粗野风) */
.doc{background:var(--paper);color:var(--ink);}
.doc-hero{background:repeating-linear-gradient(45deg,rgba(10,10,10,.045) 0 2px,transparent 2px 24px),var(--paper);
  border-bottom:5px solid var(--ink);padding:46px 0;}
.doc-hero .dh{display:flex;align-items:center;gap:18px;}
.doc-hero .mk{width:66px;height:66px;flex:none;background:var(--ink);border:var(--bd);box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center;transform:rotate(-3deg);}
.doc-hero .mk img{width:80%;height:80%;object-fit:contain;}
.doc-hero h1{font-weight:900;font-size:clamp(30px,5vw,46px);letter-spacing:-1.8px;line-height:1;margin-top:8px;}
.doc-body{padding:44px 0 80px;}
.doc-card{max-width:860px;}
.doc-card .lead{font-size:15px;font-weight:700;color:#222;padding:16px 18px;background:var(--acid);border:var(--bd-sm);box-shadow:var(--sh-xs);margin-bottom:26px;line-height:1.6;}
.doc-card h2{font-weight:900;font-size:21px;letter-spacing:-.5px;margin:30px 0 4px;padding-top:18px;border-top:3px solid var(--ink);}
.doc-card h2:first-child{border-top:0;padding-top:0;}
.doc-card p{font-size:14.5px;font-weight:500;color:#222;line-height:1.7;margin:12px 0;}
.doc-card b,.doc-card strong{font-weight:900;}
.doc-card code{font-family:var(--mono);font-size:.86em;font-weight:700;background:var(--ink);color:var(--acid);padding:1px 6px;}
.doc-card ul{margin:12px 0 12px 2px;}
.doc-card ul li{position:relative;padding:6px 0 6px 22px;font-size:14px;font-weight:500;color:#222;line-height:1.6;}
.doc-card ul li::before{content:"›";position:absolute;left:2px;color:var(--blaze);font-weight:900;}
.doc-card ul ul{margin:4px 0 4px 6px;}
.doc-card ul ul li::before{color:var(--sky);}
.doc-card a{font-weight:900;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;}
.doc-back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px;
  border:var(--bd-sm);box-shadow:var(--sh-xs);background:var(--paper);padding:10px 15px;margin-top:32px;transition:transform .08s,box-shadow .08s;}
.doc-back:hover{background:var(--acid);}
.doc-back:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* ============================================================ REVEAL / RESPONSIVE */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in{opacity:1;transform:none;}
@media (max-width:920px){
  .hero-in{grid-template-columns:1fr;gap:34px;}
  .vantage{max-width:420px;}
  .watch-grid{grid-template-columns:1fr;}
  .line-grid{grid-template-columns:1fr;}
  .day-in{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .sec{padding:54px 0;}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);
    border-bottom:5px solid var(--ink);padding:6px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px;text-align:center;}
  .nav-dl{display:none;}
  .nav-tog{display:flex;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .contact-card{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .wl-track{animation:none!important;}
  .vantage .live .pulse{animation:none!important;}
}
a:focus-visible,button:focus-visible,.cta:focus-visible{outline:3px solid var(--sky);outline-offset:3px;}