/* ============================================================
   Portal — light, editorial, DeepSeek-Harness inspired
   ============================================================ */
:root{
  --ink:#0e1220;
  --ink-2:#3d4459;
  --muted:#6d7488;
  --line:#e6e9f0;
  --bg:#ffffff;
  --blue:#4d6bfe;
  --blue-ink:#2f49d6;
  --violet:#7c5cff;
  --teal:#0fbeae;
  --amber:#f59e0b;
  --radius:24px;
  --max:1180px;
  --sans:"Inter","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,"Cascadia Code",Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* soft ambient background */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(77,107,254,.10), transparent 70%),
    radial-gradient(760px 460px at 96% 4%, rgba(124,92,255,.09), transparent 72%),
    radial-gradient(620px 420px at 50% 110%, rgba(15,190,174,.06), transparent 70%);
}
a{color:inherit;text-decoration:none}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px clamp(20px,4vw,48px);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(230,233,240,.9);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em;font-size:15px}
.brand-logo{display:block;width:32px;height:32px;object-fit:contain}
.brand-sub{color:var(--muted);font-weight:450;margin-left:2px}
.topnav{display:flex;gap:26px;font-size:14px;color:var(--ink-2)}
.topnav a{position:relative;padding:4px 0;transition:color .2s}
.topnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .25s ease;
}
.topnav a:hover{color:var(--ink)}
.topnav a:hover::after{right:0}

/* ---------------- hero ---------------- */
.hero{
  max-width:var(--max); margin:0 auto;
  padding:clamp(56px,9vw,116px) clamp(20px,4vw,48px) clamp(28px,4vw,44px);
  text-align:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.7);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(15,190,174,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(15,190,174,0)}100%{box-shadow:0 0 0 0 rgba(15,190,174,0)}}

.hero h1{
  margin:22px 0 0;
  font-size:clamp(38px,7.2vw,76px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:680;
  background:linear-gradient(178deg,#0e1220 30%,#2b3a6b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  max-width:640px;margin:26px auto 0;
  font-size:clamp(15px,1.6vw,18px);color:var(--ink-2);line-height:1.8;
}
.hero-meta{
  display:flex;justify-content:center;align-items:center;gap:16px;
  margin-top:28px;font-size:13px;color:var(--muted);flex-wrap:wrap;
}
.hero-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4}
.br-m{display:none}

/* ---------------- work cards ---------------- */
.works{
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.work{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:34px 34px 30px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;
  box-shadow:0 1px 2px rgba(14,18,32,.04),0 18px 40px -28px rgba(14,18,32,.28);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
  min-height:480px;
}
.work:hover{
  transform:translateY(-4px);
  border-color:#d7dce8;
  box-shadow:0 1px 2px rgba(14,18,32,.05),0 34px 70px -34px rgba(30,45,110,.38);
}
.work-glow{
  position:absolute;inset:-40% -10% auto auto;width:70%;height:70%;
  border-radius:50%;filter:blur(60px);opacity:.6;pointer-events:none;
  transition:opacity .4s;
}
.work--kb .work-glow{background:radial-gradient(circle,rgba(77,107,254,.22),transparent 70%)}
.work--stoz .work-glow{background:radial-gradient(circle,rgba(53,224,208,.16),transparent 70%)}
.work:hover .work-glow{opacity:1}

.work-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;gap:12px}
.work-brand{display:flex;align-items:center;gap:11px;min-width:0}
.work-logo{display:block;width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.work--stoz .work-logo{width:36px;height:36px}
.work-kicker{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-ink);font-weight:600;
}
.work--stoz .work-kicker{color:#0d9488}
.work-ver{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  background:rgba(255,255,255,.7);
}
.work h2{
  position:relative;z-index:1;
  margin:16px 0 2px;font-size:clamp(28px,3.2vw,38px);
  letter-spacing:-.035em;font-weight:670;line-height:1.15;
}
.work-pkg{
  position:relative;z-index:1;margin:0;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
}
.work-desc{
  position:relative;z-index:1;margin:16px 0 0;
  font-size:14.5px;color:var(--ink-2);line-height:1.75;max-width:36em;
}
.work-tags{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:18px 0 0;
}
.work-tags li{
  font-size:11.5px;color:#4a5165;
  padding:4px 10px;border-radius:999px;
  background:#f3f5fa;border:1px solid #e9ecf3;
}
.work--stoz .work-tags li{background:#f1f7f6;border-color:#e0eeec;color:#2b5f5a}

.work-visual{
  position:relative;z-index:1;margin:24px 0 22px;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#fbfcfe,#f4f6fc);
  padding:16px;
  height:196px;display:flex;flex-direction:column;justify-content:center;
}
.work-visual--chart{
  background:linear-gradient(180deg,#0a1018,#0c1620);
  border-color:#182530;
  display:grid;place-items:center;padding:10px;height:196px;
}
.mini-search{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #e2e7f2;border-radius:10px;
  padding:9px 12px;font-size:13px;
  box-shadow:0 6px 16px -12px rgba(30,50,120,.5);
}
.mini-ico{color:var(--blue);font-size:15px;line-height:1}
.mini-q{color:#2a3044}
.mini-caret{width:1.5px;height:14px;background:var(--blue);margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mini-hits{display:grid;gap:7px;margin-top:12px}
.mini-hit{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;color:#5c6579;
  padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #eaeef6;
  overflow:hidden;
}
.mini-hit b{font-weight:500;color:#2a3044}
.mini-hit span{color:#8b93a6}
.mini-hit em{
  position:absolute;left:0;bottom:0;height:2px;width:var(--w);
  background:linear-gradient(90deg,rgba(77,107,254,.15),var(--blue));
  opacity:.75;
}
.mini-hit:nth-child(2) em{background:linear-gradient(90deg,rgba(124,92,255,.15),var(--violet))}
.mini-hit:nth-child(3) em{background:linear-gradient(90deg,rgba(15,190,174,.15),var(--teal))}
.mini-smith{width:100%;max-width:260px;height:auto;display:block}

.work-cta{
  position:relative;z-index:1;margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--blue-ink);
}
.work--stoz .work-cta{color:#0d9488}
.work-cta svg{transition:transform .3s ease}
.work:hover .work-cta svg{transform:translateX(4px)}

/* ---------------- principles ---------------- */
.principles{
  max-width:var(--max);margin:clamp(40px,6vw,72px) auto 0;
  padding:0 clamp(20px,4vw,48px);
}
.principles-inner{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.principles article{padding:26px 26px 30px}
.principles article + article{border-left:1px solid var(--line)}
.principles h3{margin:0 0 8px;font-size:15.5px;letter-spacing:-.01em;font-weight:640}
.principles p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.75}

/* ---------------- footer ---------------- */
.foot{
  max-width:var(--max);margin:clamp(56px,8vw,100px) auto 0;
  padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px) 36px;
  border-top:1px solid var(--line);
}
.foot-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-brand strong{font-size:15px;letter-spacing:-.01em}
.foot-brand p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px!important}
.foot-links a{color:var(--ink-2);border-bottom:1px solid #dfe3ec;padding-bottom:1px;transition:border-color .2s,color .2s}
.foot-links a:hover{color:var(--blue-ink);border-color:var(--blue)}
.foot-nav{display:flex;gap:64px}
.foot-nav h4{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9aa1b2;font-weight:600}
.foot-nav a{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:9px;transition:color .2s}
.foot-nav a:hover{color:var(--blue-ink)}
.foot-copy{margin:40px 0 0;font-size:12px;color:#9aa1b2}

/* ---------------- reveal ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .works{grid-template-columns:1fr}
  .work{min-height:0}
  .principles-inner{grid-template-columns:1fr}
  .principles article + article{border-left:0;border-top:1px solid var(--line)}
  .foot-nav{gap:40px}
}
@media (max-width:620px){
  .hero{padding-top:48px}
  .br-m{display:inline}
  .hero h1{letter-spacing:-.035em}
  .work{padding:26px 22px 24px}
  .topnav{gap:18px;font-size:13px}
  .brand-sub{display:none}
  .work-visual{padding:12px}
  .foot-inner{flex-direction:column;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}