/* xcircl V4 — shared design system (preview)
   米白画布 + 暖炭灰大色块 + 纯黑小元素 + Inter。锁定于 2026-05-09。 */
:root{
  --ink:#0A0A0A; --cream:#F5F2EC; --white:#FFFFFF;
  --block:#23201B;                 /* 暖调深炭灰 — 大色块背景 */
  --g1:#525252; --g2:#737373; --g3:#A3A3A3;
  --div:#E5E1D6; --divd:#3A352D;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--cream);font-feature-settings:"tnum";-webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--g2)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(245,242,236,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--div);transition:box-shadow .25s,background .25s}
header.scrolled{box-shadow:0 1px 0 rgba(10,10,10,.06),0 8px 24px -16px rgba(10,10,10,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center}
.logo img{height:34px;width:auto;display:block}     /* 黑版横版 lockup，放大 */
.foot-logo{display:flex;align-items:center}
.foot-logo img{height:30px;width:auto;display:block} /* 白版横版 lockup，深色页脚直接用白图 */
.nav-links{display:flex;gap:36px;font-size:15px;font-weight:500;color:var(--g1)}
.nav-links a{position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--ink);transition:right .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after{right:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:13px 24px;border-radius:8px;transition:transform .16s,background .16s,color .16s;position:relative}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.visit{font-size:14px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:2px;transition:padding .18s,opacity .18s;position:relative}
.visit:hover{padding-right:6px;opacity:.7}

/* Subpage hero (lighter than home) */
.subhero{position:relative;overflow:hidden;border-bottom:1px solid var(--div);padding:96px 0 72px}
.subhero .hero-dots{position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.1px,transparent 1.1px);background-size:26px 26px;opacity:0.06;
  -webkit-mask-image:radial-gradient(circle at 82% 20%, #000 0%, transparent 60%);mask-image:radial-gradient(circle at 82% 20%, #000 0%, transparent 60%);
  animation:driftgrid 14s linear infinite}
.subhero .inner{position:relative;z-index:2}
.subhero h1{font-size:clamp(34px,4.8vw,50px);font-weight:800;line-height:1.06;letter-spacing:-0.03em;max-width:820px;margin:18px 0 22px}
.subhero p.sub{font-size:18px;line-height:1.6;color:var(--g1);max-width:560px}

/* Section scaffolding */
section.block{padding:96px 0}
.sec-cream{background:var(--cream)}
.sec-white{background:var(--white)}
.sec-dark{background:var(--block);color:var(--cream)}
.sec-dark .sec-label{color:var(--g3)}
.sec-label{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--g2);margin-bottom:16px}
.sec-h{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1.1}

/* Portfolio detail entries (portfolio.html) */
.pentry{border-top:1px solid var(--div);padding:56px 0;display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.pentry:last-of-type{border-bottom:1px solid var(--div)}
.pentry .pname{font-size:32px;font-weight:700;letter-spacing:-0.02em;margin:16px 0 4px}
.pentry .pdomain{font-size:14px;color:var(--g2);margin-bottom:20px}
.pviz{height:120px;border-radius:10px;overflow:hidden;background:var(--cream);border:1px solid var(--div);margin-top:8px}
.pentry-right{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.pfield h4{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--g2);margin-bottom:10px}
.pfield p{font-size:15px;line-height:1.65;color:var(--g1)}
.pfield .tags{display:flex;flex-wrap:wrap;gap:8px}
.pfield .tag{font-size:13px;font-weight:500;color:var(--ink);background:var(--white);border:1px solid var(--div);border-radius:999px;padding:5px 12px}
.pfield.full{grid-column:1 / -1}

/* Pills */
.pill{align-self:flex-start;display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.pill-live{background:var(--ink);color:var(--cream)}
.pill-soon{background:transparent;color:var(--g1);border:1px solid var(--g3)}
.pill-live .ld{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle;position:relative}
.pill-live .ld::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:lpulse 2s ease-out infinite}

/* "More verticals" note */
.pf-more{margin-top:40px;border:1px dashed var(--g3);border-radius:14px;padding:26px 34px;text-align:center;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--g2)}

/* Operating principles / generic 3-col */
.ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.op{padding-top:24px;border-top:1px solid var(--div)}
.op .opn{font-size:13px;font-weight:700;letter-spacing:0.1em;color:var(--g2)}
.op h3{font-size:20px;font-weight:600;margin:14px 0 12px;color:var(--ink)}
.op p{font-size:15px;line-height:1.7;color:var(--g1)}

/* Legal pages (privacy / terms) */
.legal{max-width:760px}
.legal .updated{font-size:14px;color:var(--g2);margin-bottom:32px}
.legal h2{font-size:19px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin:36px 0 12px}
.legal p{font-size:16px;line-height:1.7;color:var(--g1);margin-bottom:16px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{font-size:16px;line-height:1.7;color:var(--g1);margin-bottom:8px}
.legal strong{color:var(--ink);font-weight:600}
.legal a{border-bottom:1px solid var(--ink);font-weight:500}
.legal .disclaimer{margin-top:40px;padding:18px 22px;border:1px solid var(--div);border-radius:10px;background:var(--white);font-size:14px;color:var(--g2);line-height:1.6}

/* About prose */
.prose{max-width:720px}
.prose p{font-size:17px;line-height:1.7;color:var(--g1);margin-bottom:22px}
.prose p strong{color:var(--ink);font-weight:600}

/* Partners / contact blocks */
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.pcard{background:var(--white);border:1px solid var(--div);border-radius:14px;padding:32px;box-shadow:0 1px 2px rgba(10,10,10,.035);transition:transform .18s,box-shadow .18s,border-color .18s}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(10,10,10,.4)}
.pcard h3{font-size:20px;font-weight:700;margin-bottom:10px}
.pcard p{font-size:15px;line-height:1.65;color:var(--g1);margin-bottom:18px}
.pcard a.link{font-size:15px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px}

/* Closing CTA strip */
.closing{padding:88px 0}
.closing p{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-0.01em;line-height:1.4;max-width:860px}
.closing .muted{color:var(--g2)}
/* 深色收尾区：closing 接在深色 How-We-Operate 后面，连成一整块深色直到 footer */
.closing.sec-dark p{color:var(--cream)}
.closing.sec-dark .muted{color:var(--g3)}
.closing.sec-dark .visit{border-color:var(--cream);color:var(--cream)}

/* Footer */
footer{background:var(--block);color:var(--cream);padding:72px 0 40px}  /* 页尾唯一深色块，与顶部数字带同色 */
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-logo{font-size:20px;font-weight:700;letter-spacing:-0.02em}
.foot-tag{font-size:14px;color:var(--g3);margin-top:12px;max-width:240px;line-height:1.5}
.foot-col h4{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--g3);margin-bottom:16px}
.foot-col a{display:block;font-size:15px;color:var(--cream);margin-bottom:10px;opacity:.82}
.foot-col a:hover{opacity:1}
.foot-bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--divd);font-size:13px;color:var(--g3)}

/* Scroll progress */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:100;transition:width .08s linear}

/* ===== Motion ===== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-strong{opacity:0;transform:translateY(38px);filter:blur(9px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s cubic-bezier(.16,1,.3,1)}
.reveal-strong.in{opacity:1;transform:none;filter:blur(0)}
@keyframes driftgrid{0%{background-position:0 0}100%{background-position:52px 26px}}
@keyframes lpulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}

/* Mobile nav (hamburger) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:9px;margin:-9px -9px -9px 0}
.nav-toggle span{display:block;height:2px;width:24px;background:var(--ink);transition:transform .25s,opacity .2s}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nav-toggle span:nth-child(2){opacity:0}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .nav-toggle{display:flex}
  .statband{margin-top:72px}   /* 桌面 168px 网络动画区在手机上太空，收紧 */
  .hero-inner{padding-top:72px}
  .nav-links{
    display:flex;position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--cream);border-bottom:1px solid var(--div);padding:6px 0;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:60;
    box-shadow:0 12px 24px -16px rgba(10,10,10,.3)
  }
  header.nav-open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:15px 32px;font-size:17px}
  .nav-links a::after{display:none}
  .pentry{grid-template-columns:1fr;gap:24px}
  .pentry-right{grid-template-columns:1fr}
  .pcols,.ops-grid,.foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-strong{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .subhero .hero-dots,.pill-live .ld::after{animation:none!important}
  html{scroll-behavior:auto}
}