/* ============================================================================
   Baikr 佰客AI — 暖色编辑式设计系统  (Warm Editorial Intelligence)
   Shared across: index / tools / pricing / about
   Themes: [data-theme="warm" | "dark" | "hybrid"]  ·  Fonts: [data-font="serif"|"sans"]
   Accent: --accent (tweakable)
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@500;700;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- Tokens --------------------------------------------------------------- */
:root{
  /* type families */
  --font-sans:'Noto Sans SC',-apple-system,'PingFang SC',system-ui,sans-serif;
  --font-serif:'Noto Serif SC',Georgia,'Songti SC',serif;
  --font-grotesk:'Space Grotesk',var(--font-sans);
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --font-head:var(--font-serif);          /* swapped by [data-font] */

  /* accent (tweakable) */
  --accent:#C0573A;                        /* terracotta clay */
  --accent-deep:#A0432A;
  --accent-ink:#ffffff;                    /* text on accent */
  --gold:#BF9038;                          /* ochre — static secondary */
  --sage:#6E7A54;                          /* growth green — static */

  /* radii */
  --r-sm:7px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* type scale */
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:1rem; --t-lg:1.1875rem;
  --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.75rem; --t-4xl:3.75rem; --t-5xl:5rem;

  --container:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- Warm theme (default) ------------------------------------------------- */
:root,[data-theme="warm"],[data-theme="hybrid"]{
  --paper:#F2ECE0;
  --paper-2:#ECE4D4;
  --card:#FBF7EE;
  --card-2:#F6F0E3;
  --ink:#221D16;
  --ink-2:#5C5446;
  --ink-3:#8B8273;
  --line:rgba(34,29,22,.13);
  --line-2:rgba(34,29,22,.07);
  --glass:rgba(248,243,234,.72);
  --shadow-card:0 1px 2px rgba(34,29,22,.04),0 12px 34px -18px rgba(34,29,22,.22);
  --shadow-lift:0 2px 4px rgba(34,29,22,.05),0 26px 60px -28px rgba(34,29,22,.34);
  --grain-op:.05;
  --on-ink:#F2EAD9; /* text used inside always-dark sections */
}

/* ---- Dark theme ----------------------------------------------------------- */
[data-theme="dark"]{
  --paper:#16120D;
  --paper-2:#1C1710;
  --card:#211B13;
  --card-2:#271F16;
  --ink:#F2EAD9;
  --ink-2:#B6AB93;
  --ink-3:#7F7660;
  --line:rgba(242,234,217,.13);
  --line-2:rgba(242,234,217,.06);
  --glass:rgba(28,23,16,.72);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 16px 40px -20px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35),0 30px 70px -30px rgba(0,0,0,.8);
  --grain-op:.06;
  --on-ink:#F2EAD9;
}

/* ---- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);background:var(--paper);color:var(--ink);
  font-size:var(--t-base);line-height:1.65;font-weight:400;
  overflow-x:hidden;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .5s var(--ease),color .5s var(--ease);
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}

/* organic grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{mix-blend-mode:screen}

/* ---- Layout --------------------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s9) 0;position:relative}
.section--tight{padding:var(--s8) 0}
.divider{height:1px;background:var(--line);border:0}

/* always-dark inverted section (used for CTA / hybrid hero / footer) */
.ink-zone{
  --paper:#16120D;--card:#221B13;--card-2:#271F16;
  --ink:#F2EAD9;--ink-2:#B6AB93;--ink-3:#867C66;
  --line:rgba(242,234,217,.14);--line-2:rgba(242,234,217,.06);
  background:#16120D;color:#F2EAD9;
}

/* ---- Typography helpers --------------------------------------------------- */
.kicker{
  font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:var(--s2);
}
.kicker .idx{color:var(--accent)}
.kicker::before{content:"";width:18px;height:1px;background:var(--accent)}

.eyebrow{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.16;
  letter-spacing:-.01em;color:var(--ink)}
.h-display{font-size:clamp(2.6rem,6.2vw,var(--t-5xl));font-weight:900;line-height:1.08}
.h1{font-size:clamp(2.1rem,4.6vw,var(--t-4xl));font-weight:900}
.h2{font-size:clamp(1.8rem,3.4vw,var(--t-3xl));font-weight:700}
.h3{font-size:var(--t-xl);font-weight:700}
.lead{font-size:var(--t-lg);color:var(--ink-2);line-height:1.7;font-weight:300}
.muted{color:var(--ink-2)}.dim{color:var(--ink-3)}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-grotesk);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";letter-spacing:-.02em}
em,.accent{color:var(--accent);font-style:normal}
.u-line{background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 2px no-repeat}

/* section header block */
.sec-head{max-width:760px}
.sec-head .h2{margin:var(--s4) 0 var(--s4)}
.sec-head .lead{max-width:620px}

/* ---- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-sans);
  font-size:var(--t-sm);font-weight:500;padding:0 var(--s5);height:46px;
  border-radius:var(--r-full);transition:all .25s var(--ease);white-space:nowrap;
  border:1px solid transparent;letter-spacing:.01em}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 16px 32px -12px var(--accent)}
.btn-primary .arr{transition:transform .25s var(--ease)}
.btn-primary:hover .arr{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{transform:translateY(-2px);opacity:.9}
.btn-sm{height:38px;padding:0 var(--s4);font-size:var(--t-xs)}
.btn-lg{height:52px;padding:0 var(--s6);font-size:var(--t-base)}
.btn-block{display:flex;width:100%;justify-content:center}

.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--accent);
  font-weight:500;font-size:var(--t-sm);transition:gap .2s var(--ease)}
.tlink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.tlink:hover{gap:9px}.tlink:hover svg{transform:translateX(2px)}

/* ---- Badge / tag ---------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);
  font-size:var(--t-xs);letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.badge-accent{border-color:color-mix(in oklab,var(--accent),transparent 60%);
  color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 90%)}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  padding:3px 9px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink-3)}
.tag-soon{color:var(--gold);border-color:color-mix(in oklab,var(--gold),transparent 60%);
  background:color-mix(in oklab,var(--gold),transparent 90%)}
.tag-live{color:var(--sage);border-color:color-mix(in oklab,var(--sage),transparent 55%);
  background:color-mix(in oklab,var(--sage),transparent 88%)}

/* ---- Card ----------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.card-glow{position:relative;overflow:hidden}
.card-glow::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,0%),
    color-mix(in oklab,var(--accent),transparent 86%),transparent 60%);pointer-events:none}
.card-glow:hover::after{opacity:1}

/* tool icon disc */
.disc{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent),transparent 90%);
  border:1px solid color-mix(in oklab,var(--accent),transparent 70%);color:var(--accent);flex:none}
.disc svg{width:22px;height:22px}

/* ---- Stat ----------------------------------------------------------------- */
.stat .v{font-family:var(--font-grotesk);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);
  line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .v .unit{color:var(--accent);font-size:.55em;margin-left:2px}
.stat .l{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s3)}

/* ---- Nav ------------------------------------------------------------------ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;
  display:flex;align-items:center;transition:background .4s var(--ease),border-color .4s,transform .4s var(--ease);
  border-bottom:1px solid transparent}
.nav.scrolled{background:var(--glass);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom-color:var(--line)}
.nav.hidden{transform:translateY(-100%)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .mark{width:30px;height:30px}
.brand .wm{font-family:var(--font-grotesk);font-weight:700;font-size:1.18rem;letter-spacing:.02em}
.brand .cn{font-size:var(--t-xs);color:var(--ink-3);font-weight:500;letter-spacing:.1em}
.brand .lock{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:var(--s6)}
.nav-links a{font-size:var(--t-sm);color:var(--ink-2);font-weight:500;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:var(--s3)}
.hamburger{display:none;width:42px;height:42px;border-radius:var(--r-sm);place-items:center}
.hamburger span{display:block;width:20px;height:1.6px;background:var(--ink);transition:.3s var(--ease)}
.hamburger span+span{margin-top:5px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:999;background:var(--paper);
  transform:translateY(-100%);transition:transform .45s var(--ease-out);
  display:flex;flex-direction:column;padding:90px var(--s5) var(--s6);gap:var(--s3)}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:var(--font-head);font-size:1.6rem;font-weight:700;padding:var(--s3) 0;
  border-bottom:1px solid var(--line)}

/* ---- Footer --------------------------------------------------------------- */
.footer{padding:var(--s9) 0 var(--s6)}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6)}
.footer h5{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s4)}
.footer ul{display:flex;flex-direction:column;gap:var(--s3)}
.footer ul a{font-size:var(--t-sm);color:var(--ink-2);transition:color .2s}
.footer ul a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--s4);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--ink-3)}
.foot-bottom .links{display:flex;gap:var(--s5);flex-wrap:wrap}
.foot-sub{display:flex;gap:var(--s2);max-width:340px}
.foot-sub input{flex:1;height:42px;padding:0 var(--s4);border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-size:var(--t-sm)}
.foot-sub input:focus{outline:none;border-color:var(--accent)}

/* ---- Reveal animation (opacity always 1; only transform animates so the
   content is never captured/rendered as hidden if timing misbehaves) -------- */
.reveal.in{animation:bk-rise .7s var(--ease-out) both}
.stagger.in>*{animation:bk-rise .7s var(--ease-out) both}
@keyframes bk-rise{from{transform:translateY(22px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.reveal.in,.stagger.in>*{animation:none}}

/* ---- Utility -------------------------------------------------------------- */
.grid{display:grid;gap:var(--s5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}.items-center{align-items:center}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}
.wrap{flex-wrap:wrap}
.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.center{text-align:center}.mx-auto{margin-left:auto;margin-right:auto}
.maxw-680{max-width:680px}.maxw-560{max-width:560px}

/* ---- Settings floating trigger button ------------------------------------ */
#baikr-settings-btn{
  position:fixed;bottom:22px;left:20px;z-index:2147483645;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);color:var(--ink-3);
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:all .3s var(--ease);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
#baikr-settings-btn:hover{
  color:var(--accent);border-color:var(--accent);
  transform:rotate(45deg);box-shadow:0 4px 20px rgba(0,0,0,.25);
}
#baikr-settings-btn.open{
  color:var(--accent);border-color:var(--accent);
  background:color-mix(in oklab,var(--accent),transparent 88%);
  transform:rotate(90deg);
}
#baikr-settings-btn svg{flex:none;display:block}

/* ---- Ecosystem partner links (footer ink-zone) --------------------------- */
.eco-row{padding:var(--s5) 0;border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.eco-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);text-align:center}
.eco-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.eco-link{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  font-size:var(--t-xs);color:var(--ink-3);text-decoration:none;
  transition:all .22s var(--ease);white-space:nowrap;
}
.eco-link:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);
  color:var(--ink-2);transform:translateY(-1px);
}
.eco-link .eco-name{font-weight:600;letter-spacing:.01em;font-size:var(--t-xs)}
.eco-link .eco-sub{font-size:10px;opacity:.6;letter-spacing:.02em}
.eco-link svg{flex:none;opacity:.4;transition:opacity .2s}
.eco-link:hover svg{opacity:.7}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .footer .cols{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--s9:64px;--s8:48px}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .hamburger{display:grid}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .sec-head{max-width:none}
}