:root{
  /* ---- 土 / earth base (light) ---- */
  --bg:#F6F0E4;
  --bg-2:#F1E9D8;
  --bg-3:#EADFCA;
  --panel:#FCF8F0;
  --panel-2:#FDFAF2;
  --panel-3:#FFFDF7;
  --line:rgba(158,118,58,.20);
  --line-soft:rgba(158,118,58,.12);
  --hair:rgba(158,118,58,.30);
  /* ---- 火 / primary ---- */
  --fire:#C8442C;
  --fire-bright:#E05A3C;
  --fire-deep:#A8321C;
  --fire-glow:rgba(200,68,44,.26);
  --btn-text:#FFFDF8;
  /* ---- 木 / secondary / positive ---- */
  --wood:#3E7A55;
  --wood-bright:#4E9167;
  --wood-deep:#2E6042;
  --wood-glow:rgba(62,122,85,.22);
  --wood-soft:rgba(62,122,85,.11);
  /* ---- 土金 / gold accent ---- */
  --earth:#C08A3E;
  --earth-soft:rgba(192,138,62,.14);
  --earth-glow:rgba(192,138,62,.24);
  /* ---- 暖中性文字 ---- */
  --text:#3E3428;
  --text-2:#6E6353;
  --text-3:#9B8C74;
  --metal-glow:rgba(62,52,40,.16);
  /* ---- theme surfaces ---- */
  --nav-bg:rgba(246,240,228,.78);
  --nav-bg-solid:rgba(246,240,228,.96);
  --mobile-bg:rgba(252,248,240,.98);
  --chip-bg:rgba(255,253,247,.90);
  --code-bg:#221810;
  --code-head:rgba(255,255,255,.04);
  --grid-line:rgba(158,118,58,.075);
  --glow-a:rgba(192,138,62,.12);
  --glow-b:rgba(200,68,44,.08);
  --glow-c:rgba(62,122,85,.06);
  --grad-text-a:#6E5638;
  --head-tint:rgba(120,90,40,.045);
  --shadow-card:0 24px 60px -34px rgba(110,80,30,.40),0 0 0 1px rgba(200,68,44,.05);
  --shadow-code:0 30px 80px -42px rgba(110,80,30,.45);
  --shadow-chip:0 10px 30px -12px rgba(110,80,30,.35);
  --shadow-menu:0 30px 60px -20px rgba(60,40,10,.35);
  --ring-a:rgba(192,138,62,.30);
  --ring-b:rgba(200,68,44,.18);
  --fw-center-a:rgba(200,68,44,.16);
  --fw-center-b:rgba(252,248,240,.94);
  --fw-center-line:rgba(200,68,44,.34);
  --col-hl-a:rgba(200,68,44,.07);
  --col-hl-b:rgba(192,138,62,.05);
  --cta-glow:rgba(200,68,44,.13);
  --footer-bg:linear-gradient(180deg,transparent,rgba(241,233,216,.9));
  --logo-core:rgba(255,255,255,.92);
  --label-alpha:.85;
  /* ---- layout ---- */
  --maxw:1200px;
  --nav-h:74px;
  --radius:18px;
  --radius-sm:12px;
  --font-sans:'Inter',-apple-system,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue','Noto Sans SC','Noto Sans TC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-display:'Space Grotesk','Inter',-apple-system,'SF Pro Display','Noto Sans SC','Noto Sans TC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;
}

/* ============ Dark mode — 土 深咖 #2E2419 ============ */
:root[data-theme="dark"]{
  --bg:#2E2419;
  --bg-2:#352A1D;
  --bg-3:#3D3121;
  --panel:rgba(255,242,222,.05);
  --panel-2:rgba(255,242,222,.08);
  --panel-3:rgba(255,242,222,.12);
  --line:rgba(255,232,200,.14);
  --line-soft:rgba(255,232,200,.08);
  --hair:rgba(255,232,200,.24);
  --fire:#E0553C;
  --fire-bright:#F0734F;
  --fire-deep:#C8442C;
  --fire-glow:rgba(224,85,60,.32);
  --btn-text:#FFF8F0;
  --wood:#55A876;
  --wood-bright:#74C292;
  --wood-deep:#3E7A55;
  --wood-glow:rgba(85,168,118,.26);
  --wood-soft:rgba(85,168,118,.14);
  --earth:#D9A64A;
  --earth-soft:rgba(217,166,74,.15);
  --earth-glow:rgba(217,166,74,.30);
  --text:#F5EDE0;
  --text-2:#CDBFAA;
  --text-3:#9C8D74;
  --metal-glow:rgba(245,237,224,.20);
  --nav-bg:rgba(46,36,25,.78);
  --nav-bg-solid:rgba(46,36,25,.95);
  --mobile-bg:rgba(46,36,25,.98);
  --chip-bg:rgba(30,22,13,.88);
  --code-bg:#1A120A;
  --code-head:rgba(255,255,255,.03);
  --grid-line:rgba(255,232,200,.05);
  --glow-a:rgba(217,166,74,.10);
  --glow-b:rgba(224,85,60,.09);
  --glow-c:rgba(85,168,118,.05);
  --grad-text-a:#F5EDE0;
  --head-tint:rgba(255,255,255,.025);
  --shadow-card:0 24px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(224,85,60,.06);
  --shadow-code:0 30px 80px -40px rgba(0,0,0,.75);
  --shadow-chip:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-menu:0 30px 60px -20px rgba(0,0,0,.8);
  --ring-a:rgba(217,166,74,.32);
  --ring-b:rgba(224,85,60,.20);
  --fw-center-a:rgba(224,85,60,.20);
  --fw-center-b:rgba(30,22,13,.92);
  --fw-center-line:rgba(224,85,60,.34);
  --col-hl-a:rgba(224,85,60,.10);
  --col-hl-b:rgba(217,166,74,.06);
  --cta-glow:rgba(224,85,60,.15);
  --footer-bg:linear-gradient(180deg,transparent,rgba(40,31,20,.9));
  --logo-core:rgba(255,255,255,.85);
  --label-alpha:.78;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#2E2419;
    --bg-2:#352A1D;
    --bg-3:#3D3121;
    --panel:rgba(255,242,222,.05);
    --panel-2:rgba(255,242,222,.08);
    --panel-3:rgba(255,242,222,.12);
    --line:rgba(255,232,200,.14);
    --line-soft:rgba(255,232,200,.08);
    --hair:rgba(255,232,200,.24);
    --fire:#E0553C;
    --fire-bright:#F0734F;
    --fire-deep:#C8442C;
    --fire-glow:rgba(224,85,60,.32);
    --btn-text:#FFF8F0;
    --wood:#55A876;
    --wood-bright:#74C292;
    --wood-deep:#3E7A55;
    --wood-glow:rgba(85,168,118,.26);
    --wood-soft:rgba(85,168,118,.14);
    --earth:#D9A64A;
    --earth-soft:rgba(217,166,74,.15);
    --earth-glow:rgba(217,166,74,.30);
    --text:#F5EDE0;
    --text-2:#CDBFAA;
    --text-3:#9C8D74;
    --metal-glow:rgba(245,237,224,.20);
    --nav-bg:rgba(46,36,25,.78);
    --nav-bg-solid:rgba(46,36,25,.95);
    --mobile-bg:rgba(46,36,25,.98);
    --chip-bg:rgba(30,22,13,.88);
    --code-bg:#1A120A;
    --code-head:rgba(255,255,255,.03);
    --grid-line:rgba(255,232,200,.05);
    --glow-a:rgba(217,166,74,.10);
    --glow-b:rgba(224,85,60,.09);
    --glow-c:rgba(85,168,118,.05);
    --grad-text-a:#F5EDE0;
    --head-tint:rgba(255,255,255,.025);
    --shadow-card:0 24px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(224,85,60,.06);
    --shadow-code:0 30px 80px -40px rgba(0,0,0,.75);
    --shadow-chip:0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-menu:0 30px 60px -20px rgba(0,0,0,.8);
    --ring-a:rgba(217,166,74,.32);
    --ring-b:rgba(224,85,60,.20);
    --fw-center-a:rgba(224,85,60,.20);
    --fw-center-b:rgba(30,22,13,.92);
    --fw-center-line:rgba(224,85,60,.34);
    --col-hl-a:rgba(224,85,60,.10);
    --col-hl-b:rgba(217,166,74,.06);
    --cta-glow:rgba(224,85,60,.15);
    --footer-bg:linear-gradient(180deg,transparent,rgba(40,31,20,.9));
    --logo-core:rgba(255,255,255,.85);
    --label-alpha:.78;
  }
}

/* ============ Reset & base ============ */
*,*::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(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--fire-glow);color:var(--btn-text)}
/* Ambient background: faint warm glows + grid (theme adaptive) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 15% -5%, var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, var(--glow-b), transparent 60%),
    radial-gradient(1200px 800px at 50% 110%, var(--glow-c), transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
/* Legacy inline-SVG accents (stroke/fill attrs cannot hold var()) —
   override presentation attributes so icons follow the theme. */
svg [stroke="#3DDC84"],svg [fill="#3DDC84"]{stroke:var(--wood);fill:var(--wood)}
svg [stroke="#FF5A3C"],svg [fill="#FF5A3C"]{stroke:var(--fire);fill:var(--fire)}
svg [stroke="#FF8A5C"],svg [fill="#FF8A5C"]{stroke:var(--fire-bright);fill:var(--fire-bright)}
svg [stroke="#F5B93C"],svg [fill="#F5B93C"]{stroke:var(--earth);fill:var(--earth)}
svg [stroke="#F7EFE2"],svg [fill="#F7EFE2"]{stroke:var(--text);fill:var(--text)}
svg [stroke="#FFF8EE"],svg [fill="#FFF8EE"]{stroke:var(--text);fill:var(--text)}
svg [fill="#8d99ab"]{fill:var(--text-2)}
svg [fill="#8D99AB"]{fill:var(--text-2)}

/* ============ Layout helpers ============ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:110px 0;position:relative}
.section.tight{padding:72px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fire);margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--fire);opacity:.7}
.eyebrow .num{color:var(--text-3)}
.eyebrow .bar{width:26px;height:1px;background:var(--fire);opacity:.7;display:inline-block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.02em;color: var(--wood);}
.section-title{font-size:clamp(30px,4.4vw,46px);margin-bottom:18px;letter-spacing:-.025em}
.section-sub{font-size:clamp(16px,1.6vw,19px);color:var(--text-2);max-width:720px;font-weight:400;line-height:1.65}
.lead{color:var(--text-2);font-size:17px;max-width:640px}
.grad-text{
  background:linear-gradient(100deg,var(--grad-text-a) 8%,var(--earth) 48%,var(--fire) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.muted{color:var(--text-2)}
.center{text-align:center;margin-inline:auto}
.center .section-sub{margin-inline:auto}
.center .eyebrow::before{display:none}
.center .eyebrow::after{content:"";width:26px;height:1px;background:var(--fire);opacity:.7;display:inline-block}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:13px 26px;border-radius:12px;border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  background:linear-gradient(135deg,var(--fire-deep),var(--fire));
  color:var(--btn-text);box-shadow:0 8px 30px -8px var(--fire-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px var(--fire-glow);background:linear-gradient(135deg,var(--fire),var(--fire-bright))}
.btn-ghost{
  border-color:var(--line);color:var(--text);background:var(--panel);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--hair);background:var(--panel-2);transform:translateY(-2px)}
.btn-sm{padding:9px 17px;font-size:14px;border-radius:10px}
.btn-lg{padding:16px 32px;font-size:16px;border-radius:14px}

/* ============ Nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  background:var(--nav-bg);border-bottom:1px solid var(--line-soft);
  transition:background .3s ease,border-color .3s ease;
}
.nav.scrolled{background:var(--nav-bg-solid);border-color:var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand .logo{width:55px;height:55px;flex:none}
.brand .mlogo{width:35px;height:35px;flex:none}
.brand .tag{font-size:11px;color:var(--text-3);font-weight:500;letter-spacing:.06em;display:block;line-height:1;margin-top:2px;font-family:var(--font-mono);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--text-2);padding:9px 13px;border-radius:9px;
  transition:color .15s ease,background .15s ease;
}
.nav-links a:hover{color:var(--text);background:var(--panel)}
.nav-links a.active{color:var(--fire)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang-switch{
  position:relative;display:flex;align-items:center;gap:4px;
  border:1px solid var(--line);border-radius:10px;padding:5px 6px;background:var(--panel);
}
.lang-switch a{font-size:12.5px;font-weight:600;padding:4px 8px;border-radius:7px;color:var(--text-3);transition:all .15s ease}
.lang-switch a.on{color:var(--btn-text);background:var(--fire)}
.lang-switch a:not(.on):hover{color:var(--text)}
/* Theme toggle (sun/moon) — sits inside the lang pill */
.theme-toggle{
  width:28px;height:26px;border-radius:7px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-3);transition:all .18s ease;flex:none;
}
.theme-toggle:hover{color:var(--fire);background:var(--panel-3)}
.theme-toggle svg{width:15px;height:15px}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}
.nav-burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.nav-burger span{display:block;width:18px;height:2px;background:var(--text);position:relative;transition:.2s}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);transition:.2s}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-burger.open span{background:transparent}
.nav-burger.open span::before{top:0;transform:rotate(45deg)}
.nav-burger.open span::after{top:0;transform:rotate(-45deg)}
/* Mobile drawer */
.mobile-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--mobile-bg);border-bottom:1px solid var(--line);
  padding:20px 24px 28px;display:none;flex-direction:column;gap:4px;
  box-shadow:var(--shadow-menu);
}
.mobile-menu.open{display:flex;animation:fadeIn .25s ease}
.mobile-menu a{font-size:17px;font-weight:600;padding:13px 8px;border-radius:10px;color:var(--text-2)}
.mobile-menu a:hover{color:var(--fire);background:var(--panel)}
.mobile-menu .mm-cta{margin-top:14px}

/* ============ Hero ============ */
.hero{position:relative;padding:calc(var(--nav-h) + 64px) 0 60px;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--text-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:28px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--fire);box-shadow:0 0 12px var(--fire-glow);animation:pulse 2.4s infinite}
.hero h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:-.035em;margin-bottom:26px;font-weight:700}
.hero-sub{font-size:clamp(17px,2vw,21px);color:var(--text-2);max-width:760px;margin:0 auto 40px;line-height:1.7;font-weight:400}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:flex;gap:0;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:40px;max-width:900px;margin:0 auto}
.hero-stat{flex:1;min-width:150px;padding:8px 20px;text-align:center}
.hero-stat + .hero-stat{border-left:1px solid var(--line-soft)}
.hero-stat .v{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--text)}
.hero-stat .v em{font-style:normal;color:var(--fire)}
.hero-stat .l{font-size:12.5px;color:var(--text-3);margin-top:4px;letter-spacing:.04em}
.hero-visual{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-visual canvas{width:100%;height:100%;opacity:.9}
/* floating API chips */
.api-chip{
  position:absolute;z-index:1;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  background:var(--chip-bg);border:1px solid var(--line);
  padding:10px 15px;border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-chip);
  animation:floaty 7s ease-in-out infinite;
}
.api-chip .m{color:var(--fire);font-weight:600}
.api-chip .tag{width:7px;height:7px;border-radius:50%;background:var(--fire);box-shadow:0 0 10px var(--fire-glow)}
.api-chip .tag.fire{background:var(--fire);box-shadow:0 0 10px var(--fire-glow)}
.api-chip .tag.earth{background:var(--earth);box-shadow:0 0 10px var(--earth-glow)}

/* ============ Glass cards ============ */
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:30px;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow-card)}
.card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--panel-2);border:1px solid var(--line-soft)}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--text-2);font-size:15px;line-height:1.65}
.card .link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;font-weight:600;color:var(--fire)}
.card .link svg{width:15px;height:15px;transition:transform .2s ease}
.card:hover .link svg{transform:translateX(4px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

/* ============ Problem / before-after ============ */
.problem-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.problem-item{position:relative;padding:28px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--panel)}
.problem-item .n{font-family:var(--font-mono);font-size:13px;color:var(--fire);letter-spacing:.1em;margin-bottom:14px}
.problem-item h3{font-size:19px;margin-bottom:12px}
.problem-item p{color:var(--text-2);font-size:14.5px;line-height:1.65}
.problem-item .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.problem-item .tags span{font-size:12px;color:var(--text-2);border:1px solid var(--line);border-radius:7px;padding:4px 10px;background:var(--bg-2)}
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.ba{position:relative;border-radius:var(--radius);padding:26px;border:1px solid var(--line-soft);overflow:hidden;min-height:280px;background:var(--bg-3)}
.ba .ba-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ba.before .ba-label{color:var(--fire)}
.ba.after .ba-label{color:var(--wood)}
.ba .ba-arrow{position:absolute;top:50%;right:-14px;transform:translateY(-50%);z-index:3;width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--wood)}
.ba .ba-arrow svg{width:14px;height:14px}
.chaos-node{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--fire);opacity:.75;animation:chaos 4s infinite ease-in-out}
.graph-demo{position:relative;height:210px}

/* ============ Knowledge graph section ============ */
.kg-canvas{width:100%;height:440px;border-radius:var(--radius);border:1px solid var(--line-soft);background:radial-gradient(700px 340px at 50% 30%, var(--fire-glow), transparent 70%), var(--bg-2);margin-top:48px}
.kg-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.kg-legend span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.kg-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.kg-legend .w{color:var(--fire)}.kg-legend .m{color:var(--wood)}.kg-legend .f{color:var(--earth)}.kg-legend .e{color:var(--fire-bright)}.kg-legend .g{color:var(--text)}

/* ============ API code block ============ */
.code-wrap{border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:var(--code-bg);box-shadow:var(--shadow-code)}
.code-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:var(--code-head)}
.code-head .dot{width:11px;height:11px;border-radius:50%;background:#1d2530}
.code-head .dot:first-child{background:var(--fire);opacity:.85}
.code-head .dot:nth-child(2){background:var(--earth);opacity:.85}
.code-head .dot:nth-child(3){background:var(--wood);opacity:.85}
.code-head .fn{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);margin-left:10px}
.code-body{overflow-x:auto}
.code-body pre{padding:22px 24px;font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:var(--text-2);min-width:520px}
/* code syntax colors are tuned for the always-dark code surface */
.code-body pre .t{color:#B8A88E}
.code-body pre .k{color:#D9A64A}
.code-body pre .s{color:#E07A5F}
.code-body pre .n{color:#74C292}
.code-body pre .c{color:#8A7C66;font-style:italic}
.code-body pre .m{color:#E0553C}
.api-layout{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.api-side{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:6px}
.api-side .endpoint{font-family:var(--font-mono);font-size:13px;padding:11px 15px;border-radius:10px;color:var(--text-2);border:1px solid transparent;display:flex;align-items:center;gap:10px;transition:all .15s ease}
.api-side .endpoint .meth{font-weight:700;font-size:11.5px;width:38px;flex:none}
.api-side .endpoint .meth.get{color:var(--wood)}
.api-side .endpoint .meth.post{color:var(--earth)}
.api-side .endpoint:hover{background:var(--panel);border-color:var(--line-soft)}
.api-side .endpoint.active{background:var(--panel-2);border-color:var(--line);color:var(--text)}
.sdk-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.sdk-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;transition:all .18s ease}
.sdk-chip:hover{border-color:var(--hair);background:var(--panel-2);transform:translateY(-2px)}
.sdk-chip svg{width:18px;height:18px}

/* ============ Customers ============ */
.cust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.cust-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px;transition:all .2s ease}
.cust-card:hover{border-color:var(--line);background:var(--panel-2);transform:translateY(-3px)}
.cust-card .ic{width:42px;height:42px;border-radius:11px;background:var(--bg-3);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cust-card .ic svg{width:21px;height:21px}
.cust-card h3{font-size:17px;margin-bottom:12px}
.cust-card ul{list-style:none}
.cust-card li{font-size:13.5px;color:var(--text-2);padding:5px 0 5px 18px;position:relative;line-height:1.5}
.cust-card li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:2px;background:var(--wood);opacity:.8}

/* ============ Flywheel ============ */
.flywheel{position:relative;width:min(560px,88vw);aspect-ratio:1;margin:56px auto 0}
.fw-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--ring-a);animation:spin 40s linear infinite}
.fw-ring.r2{inset:14%;border-color:var(--ring-b);border-style:solid;animation-direction:reverse;animation-duration:60s}
.fw-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fw-node .dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 18px currentColor}
.fw-node .t{font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap;font-family:var(--font-display)}
.fw-node .s{font-size:10.5px;color:var(--text-3);font-family:var(--font-mono)}
.fw-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 35% 30%, var(--fw-center-a), var(--fw-center-b) 70%);border:1px solid var(--fw-center-line);box-shadow:0 0 60px -10px var(--fire-glow)}
.fw-center .inner{font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--fire-bright);line-height:1.3}
.fw-arrow{position:absolute;width:16px;height:16px;color:var(--fire)}
.flywheel .fw-arrow svg{width:16px;height:16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Comparison table ============ */
.cmp-table{width:100%;border-collapse:collapse;margin-top:48px;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.cmp-table th,.cmp-table td{padding:20px 24px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:15px}
.cmp-table th{font-family:var(--font-display);font-weight:600;color:var(--text);background:var(--head-tint);font-size:15px}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table td .dim{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;display:block;margin-top:3px}
.cmp-table .col-hl{background:linear-gradient(135deg,var(--col-hl-a),var(--col-hl-b));border-left:2px solid var(--fire)}
.cmp-table tr:last-child td.col-hl{border-bottom-left-radius:0}
.cmp-table .mine{font-weight:600;color:var(--fire)}
.cmp-table .chk{color:var(--wood);font-weight:700}
.cmp-table .dash{color:var(--text-3)}

/* ============ CTA band ============ */
.cta-band{position:relative;text-align:center;padding:110px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 120%, var(--cta-glow), transparent 70%);pointer-events:none}
.cta-band h2{font-size:clamp(32px,5vw,56px);margin-bottom:22px}
.cta-band p{color:var(--text-2);max-width:620px;margin:0 auto 38px;font-size:17px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============ Footer ============ */
.footer{border-top:1px solid var(--line-soft);padding:64px 0 40px;background:var(--footer-bg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px}
.footer-brand p{color:var(--text-3);font-size:13.5px;max-width:260px;margin-top:14px;line-height:1.7}
.footer h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;font-family:var(--font-mono);font-weight:600}
.footer-col a{display:block;font-size:14px;color:var(--text-2);padding:6px 0;transition:color .15s ease}
.footer-col a:hover{color:var(--fire)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:52px;padding-top:26px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.footer-bottom .copy{font-size:13px;color:var(--text-3)}
.footer-bottom .legal{display:flex;gap:22px}
.footer-bottom .legal a{font-size:13px;color:var(--text-3)}
.footer-bottom .legal a:hover{color:var(--text-2)}

/* ============ Page hero (sub-pages) ============ */
.page-hero{padding:calc(var(--nav-h) + 90px) 0 70px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.03em;margin-bottom:20px}
.page-hero .lead{font-size:18px}
.page-hero .crumb{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px;display:flex;gap:8px;align-items:center}
.page-hero .crumb a{color:var(--text-2)}
.page-hero .crumb a:hover{color:var(--fire)}
.page-hero .crumb .sep{color:var(--text-3)}
/* Feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:36px 0}
.feature-row .fr-text h3{font-size:26px;margin-bottom:14px}
.feature-row .fr-text p{color:var(--text-2);font-size:16px;line-height:1.7;margin-bottom:14px}
.feature-row .fr-text ul{list-style:none;margin-top:10px}
.feature-row .fr-text li{font-size:14.5px;color:var(--text-2);padding:6px 0 6px 22px;position:relative}
.feature-row .fr-text li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;background:var(--wood);box-shadow:0 0 8px var(--wood-glow)}
.feature-row .fr-visual{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-3);min-height:280px;display:flex;align-items:center;justify-content:center;position:relative}
/* Timeline */
.timeline{position:relative;margin-top:48px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--fire),transparent)}
.tl-item{position:relative;padding:0 0 34px}
.tl-item::before{content:"";position:absolute;left:-34px;top:6px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:2px solid var(--fire);box-shadow:0 0 0 4px var(--fire-glow)}
.tl-item h3{font-size:18px;margin-bottom:8px}
.tl-item p{color:var(--text-2);font-size:14.5px;line-height:1.65}
/* FAQ */
.faq-item{border:1px solid var(--line-soft);border-radius:14px;margin-bottom:14px;background:var(--panel);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .chev{width:18px;height:18px;flex:none;color:var(--fire);transition:transform .2s ease}
.faq-item[open] summary .chev{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 24px 22px;color:var(--text-2);font-size:14.5px;line-height:1.7}
/* Endpoints table */
.ep-table{width:100%;border-collapse:collapse;margin-top:40px;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--panel);font-size:14px}
.ep-table th,.ep-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
.ep-table th{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--head-tint);font-weight:600}
.ep-table tr:last-child td{border-bottom:0}
.ep-table .ep-method{font-family:var(--font-mono);font-weight:700;font-size:12px;padding:3px 9px;border-radius:6px}
.ep-table .ep-method.get{color:var(--wood);background:var(--wood-soft)}
.ep-table .ep-method.post{color:var(--earth);background:var(--earth-soft)}
.ep-table code{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2)}
/* Dataset chips */
.data-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.data-chips span{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);border:1px solid var(--line);padding:7px 14px;border-radius:8px;background:var(--panel)}
.data-chips span b{color:var(--fire);font-weight:600}
.big-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.big-num{border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px;background:var(--panel);text-align:center}
.big-num .v{font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.02em}
.big-num .v em{font-style:normal;color:var(--fire)}
.big-num .l{font-size:13px;color:var(--text-3);margin-top:6px}

/* ============ Animations ============ */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes chaos{0%,100%{transform:translate(0,0);opacity:.5}25%{transform:translate(14px,-18px);opacity:.9}50%{transform:translate(-10px,12px);opacity:.4}75%{transform:translate(8px,20px);opacity:.8}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .grid-4,.grid-6{grid-template-columns:repeat(2,1fr)}
  .cust-grid{grid-template-columns:repeat(2,1fr)}
  .api-layout{grid-template-columns:1fr}
  .api-side{position:static;flex-direction:row;flex-wrap:wrap}
  .big-nums{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-links,.nav-right .btn{display:none}
  .nav-burger{display:flex}
  .nav-right .lang-switch{margin-left:auto}
  .grid-2,.grid-3,.problem-list,.ba-wrap,.feature-row,.grid-4,.grid-6{grid-template-columns:1fr}
  .cust-grid{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--nav-h) + 40px);min-height:auto}
  .hero-stats{flex-direction:column;gap:18px}
  .hero-stat + .hero-stat{border-left:0}
  .section{padding:72px 0}
  .hero-stat{padding:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .feature-row{gap:30px;padding:24px 0}
  .big-nums{grid-template-columns:1fr 1fr}
  .kg-canvas{height:320px}
}
@media (max-width:520px){
  .big-nums{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .api-chip{font-size:10.5px;padding:7px 10px}
  .btn{padding:12px 20px;font-size:14.5px}
}
.hide-m{display:flex}
@media (max-width:820px){.hide-m{display:none!important}}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}
.legal-body .section-title{font-size:clamp(22px,2.6vw,30px);margin:14px 0 12px;letter-spacing:-.02em}
.legal-body p{color:var(--text-2);font-size:15.5px;line-height:1.78;margin:0 0 16px;max-width:780px}
.legal-body ul{margin:0 0 20px;padding:0;list-style:none;max-width:780px}
.legal-body ul li{color:var(--text-2);font-size:15px;line-height:1.72;padding:4px 0 4px 22px;position:relative}
.legal-body ul li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--fire);opacity:.75}
.legal-body .eyebrow{margin-top:46px}
.legal-body .eyebrow:first-child{margin-top:0}
.legal-body a{color:var(--fire);text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--fire-bright)}
.legal-meta{font-family:var(--font-mono);font-size:13px;color:var(--text-3);letter-spacing:.05em}