/* 摩盖AI隐私罩 AImasQ -- shared stylesheet.
 *
 * Linked by every page under /aimasq/. Page-specific components stay in
 * that page; anything two pages would both need belongs here.
 *
 * Colour note: --raw is reserved for ONE meaning -- a real value that has
 * not been protected yet. It is never decoration.
 */

:root{
  /* Cool paper, biased toward the mark's blue rather than a borrowed grey. */
  --paper:#F1F4F9;
  --surface:#FFFFFF;
  --surface-2:#E8EEF6;
  --line:#D8E1EC;
  --line-soft:#E7EDF4;
  --ink:#0B1420;
  --ink-2:#37485C;
  --muted:#6B7D92;

  /* The product's own mark: the logo tiles are #3076C5 / #28AFE6. */
  --brand:#2F6FC0;
  --brand-2:#28AFE6;
  --brand-ink:#123F72;
  --brand-wash:#E6EFF9;

  /* Reserved for ONE meaning: a real value, not yet protected. Never
     decoration -- if it is this colour, it is data that must not leave. */
  --raw:#B23A28;
  --raw-wash:#FBEDE9;

  --band:#0B1420;
  --band-2:#132437;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A111B;
    --surface:#121E2C;
    --surface-2:#1A2838;
    --line:#28394C;
    --line-soft:#1F2E3F;
    --ink:#E9F0F8;
    --ink-2:#AFC0D2;
    --muted:#7D90A5;
    --brand:#5CA0E6;
    --brand-2:#48C3F0;
    --brand-ink:#9CCBF5;
    --brand-wash:#16293E;
    --raw:#E07A66;
    --raw-wash:#2C1A16;
    --band:#060C14;
    --band-2:#101E2E;
  }
}
:root[data-theme="dark"]{
  --paper:#0A111B; --surface:#121E2C; --surface-2:#1A2838;
  --line:#28394C; --line-soft:#1F2E3F;
  --ink:#E9F0F8; --ink-2:#AFC0D2; --muted:#7D90A5;
  --brand:#5CA0E6; --brand-2:#48C3F0; --brand-ink:#9CCBF5; --brand-wash:#16293E;
  --raw:#E07A66; --raw-wash:#2C1A16;
  --band:#060C14; --band-2:#101E2E;
}

*{box-sizing:border-box}
body{
  background:var(--paper);color:var(--ink);margin:0;padding:0;
  font-family:"Noto Sans SC",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Noto Serif SC",Georgia,serif;margin:0;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------------- header ---------------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:22px;padding:13px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{width:30px;height:30px;flex:none}
.brand-name{font-family:"Noto Serif SC",serif;font-weight:700;font-size:16.5px;letter-spacing:.4px}
.brand-en{font-size:12.5px;font-weight:600;color:var(--brand);margin-left:6px;letter-spacing:.4px}
.nav a.lnk{margin-left:auto;text-decoration:none;color:var(--ink-2);font-size:14.5px}
.nav .lnk+.lnk{margin-left:20px}
.btn{
  display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:8px;font-size:14.5px;font-weight:500;
  border:1px solid var(--brand);white-space:nowrap;
}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:22px}

/* ---------------- hero ---------------- */
.hero{padding:62px 0 70px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
h1{font-size:clamp(32px,4.4vw,50px);font-weight:700;line-height:1.22;letter-spacing:-.01em}
.hero p.lede{font-size:17.5px;color:var(--ink-2);margin:22px 0 0;max-width:34em}
.hero .slogan{
  margin-top:16px;font-family:"Noto Serif SC",serif;font-size:19px;
  color:var(--brand-ink);letter-spacing:.06em;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* --- the transform panel: same device as a scrolling document, but it
       shows the SUBSTITUTION rather than a finished redaction. --- */
.scope{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;height:430px;overflow:hidden;
  box-shadow:0 18px 44px rgba(11,20,32,.10);
}
.scope-bar{
  display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-bottom:1px solid var(--line-soft);background:var(--surface-2);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  letter-spacing:.08em;position:relative;z-index:12;
}
.dot3{display:flex;gap:5px}
.dot3 i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.scope-flow{position:absolute;inset:42px 0 0;overflow:hidden}
.fade-t,.fade-b{position:absolute;left:0;right:0;z-index:10;pointer-events:none}
.fade-t{top:0;height:58px;background:linear-gradient(to bottom,var(--surface),transparent)}
.fade-b{bottom:0;height:96px;background:linear-gradient(to top,var(--surface),transparent)}
.reel{display:flex;flex-direction:column;animation:reel 46s linear infinite}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.doc{padding:26px 24px;border-bottom:1px solid var(--line-soft);flex:none}
.doc-t{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:9px;
}
.doc-b{font-size:13.5px;line-height:2.05;color:var(--ink-2)}

/* A token holds both values stacked; the cross-fade IS the product. */
.tok{
  position:relative;display:inline-grid;vertical-align:baseline;
  border-radius:4px;padding:1px 6px;font-size:12.5px;font-weight:500;
  font-family:"IBM Plex Mono",monospace;
}
.tok>span{grid-area:1/1;white-space:nowrap;animation:swap 6s ease-in-out infinite}
.tok .raw{color:var(--raw)}
.tok .sur{color:var(--brand);opacity:0;animation-name:swap-in}
.tok{background:var(--raw-wash);animation:wash 6s ease-in-out infinite}
@keyframes swap{0%,28%{opacity:1}42%,100%{opacity:0}}
@keyframes swap-in{0%,28%{opacity:0}42%,100%{opacity:1}}
@keyframes wash{
  0%,24%{background:var(--raw-wash)}
  32%{background:var(--brand-2);}
  46%,100%{background:var(--brand-wash)}
}
.tok:nth-of-type(3n){animation-delay:.5s}
.tok:nth-of-type(3n) > span{animation-delay:.5s}
.tok:nth-of-type(3n+1){animation-delay:1s}
.tok:nth-of-type(3n+1) > span{animation-delay:1s}
.scope-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:11;
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding:11px 16px;border-top:1px solid var(--line-soft);
  background:var(--surface);font-size:11.5px;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;
}
.key{display:inline-flex;align-items:center;gap:6px}
.key i{width:9px;height:9px;border-radius:2px;display:block}
.key.a i{background:var(--raw)}
.key.b i{background:var(--brand)}

@media (prefers-reduced-motion:reduce){
  .reel{animation:none}
  .tok>span{animation:none}
  .tok .raw{display:none}
  .tok .sur{opacity:1}
  .tok{animation:none;background:var(--brand-wash)}
}

/* ---------------- compatible clients ---------------- */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:38px}
.app{
  background:var(--surface);border:1px solid var(--line-soft);
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start;
}
.app-ico{
  width:42px;height:42px;flex:none;border-radius:10px;
  background:var(--brand-wash);display:flex;align-items:center;justify-content:center;
}
.app-ico svg{width:22px;height:22px;stroke:var(--brand);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-n{font-weight:500;font-size:15px;display:block;line-height:1.45}
.app-s{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.app-s.live{color:var(--brand)}
.app-s.live::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--brand);margin-right:6px;vertical-align:1px;
}
@media (max-width:920px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.apps{grid-template-columns:1fr}}

/* ---------------- generic sections ---------------- */
section{padding:74px 0}
.sec-head{max-width:60ch}
h2{font-size:clamp(25px,3vw,33px);font-weight:700;line-height:1.3}
.sec-head p{color:var(--ink-2);margin:16px 0 0;font-size:16.5px}
.band{background:var(--band);color:#E9F0F8}
.band h2{color:#fff}
.band .sec-head p{color:#AFC0D2}

/* the claim row */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:38px}
.claim{background:var(--surface);border:1px solid var(--line-soft);padding:26px 24px}
.claim h3{font-size:17px;font-weight:700;margin-bottom:9px}
.claim p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.75}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:40px}
.step{background:var(--band-2);border:1px solid rgba(255,255,255,.07);padding:22px 20px}
.step .n{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--brand-2);
  letter-spacing:.12em;
}
.step h3{font-size:16px;font-weight:700;margin:8px 0 7px;color:#fff}
.step p{margin:0;font-size:13.5px;color:#AFC0D2;line-height:1.7}

/* capability ledger */
.mods{display:flex;flex-direction:column;gap:2px;margin-top:38px}
.mod{background:var(--surface);border:1px solid var(--line-soft);padding:20px 24px}
.mod-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:14px}
.mod-id{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--brand)}
.mod-n{font-family:"Noto Serif SC",serif;font-size:18px;font-weight:700}
.mod-c{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.feat{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.feat:last-child,.feat:nth-last-child(2):nth-child(odd){border-bottom:0}
.feat b{font-weight:500;flex:none}
.feat span{color:var(--muted);font-size:13px}
.tick{color:var(--brand);flex:none;font-size:13px;line-height:1.9}

/* proof numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:38px}
.num{background:var(--band-2);border:1px solid rgba(255,255,255,.07);padding:24px 22px}
.num b{
  display:block;font-family:"Noto Serif SC",serif;font-size:34px;font-weight:700;
  color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;
}
.num span{display:block;margin-top:9px;font-size:13px;color:#AFC0D2;line-height:1.65}

/* integration */
pre{
  background:var(--band);color:#D8E6F5;border-radius:12px;padding:22px 24px;
  overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:13px;
  line-height:1.85;margin:26px 0 0;border:1px solid var(--line);
}
pre .c{color:#7D90A5}
pre .s{color:#8FD8F5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* honesty block */
.honest{
  margin-top:40px;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--brand);padding:24px 26px;
}
.honest h3{font-size:17px;font-weight:700;margin-bottom:10px}
.honest p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.honest p:last-child{margin-bottom:0}

/* cta + footer */
.cta{text-align:center;padding:86px 0}
.cta h2{margin-bottom:14px}
.cta p{color:var(--ink-2);max-width:46em;margin:0 auto}
footer{border-top:1px solid var(--line);padding:34px 0 54px;color:var(--muted);font-size:13px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}

@media (max-width:920px){
  .hero-grid,.two{grid-template-columns:1fr;gap:36px}
  .claims,.pipe,.nums{grid-template-columns:1fr 1fr}
  .feats{grid-template-columns:1fr}
  .nav a.lnk{display:none}
  .nav-actions{margin-left:auto;gap:8px}
  .nav-actions .btn{padding:8px 14px;font-size:14px}
}
@media (max-width:560px){
  .claims,.pipe,.nums{grid-template-columns:1fr}
}

/* ---------------- model lineup ---------------- */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:38px}
.mcol{background:var(--band-2);border:1px solid rgba(255,255,255,.07);padding:26px 24px}
.mcol-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.mcol-h h3{font-size:19px;font-weight:700;color:#fff}
.mcol-h .zone-tag{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-2);
}
.mcol > p.hint{margin:0 0 18px;font-size:13.5px;color:#AFC0D2;line-height:1.7}
.mlist{display:flex;flex-direction:column;gap:9px}
.mrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.mrow:last-child{border-bottom:0;padding-bottom:0}
.mrow b{font-weight:500;font-size:15px;color:#fff}
.mrow .sub{font-size:12.5px;color:#7D90A5;font-family:"IBM Plex Mono",monospace}
.mrow .st{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  padding:1px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);color:#AFC0D2;
}
.mrow .st.on{color:#0B1420;background:var(--brand-2);border-color:var(--brand-2)}
.bill{
  margin-top:2px;background:var(--brand);border:1px solid var(--brand);
  padding:26px 24px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.bill h3{font-size:20px;font-weight:700;color:#fff;margin:0}
.bill p{margin:6px 0 0;color:#E6EFF9;font-size:14.5px;max-width:58ch;line-height:1.75}
@media (max-width:820px){.mgrid{grid-template-columns:1fr}}