/* KINGAI OPS · 2026 global product design authority */
:root{
  --ops-bg:#FFFFFF;
  --ops-paper:#FFFFFF;
  --ops-surface:#FFFFFF;
  --ops-soft:#F7F7F8;
  --ops-text:#111111;
  --ops-muted:#5F6368;
  --ops-muted-2:#8A8A8E;
  --ops-line:rgba(17,17,17,.08);
  --ops-line-strong:rgba(17,17,17,.14);
  --ops-focus:#246BFD;
  --ops-blue:#246BFD;
  --ops-blue-soft:#EEF4FF;
  --ops-green:#237B55;
  --ops-green-soft:#EEF7F2;
  --ops-violet:#6757D9;
  --ops-gold:#B38A32;
  --ops-shadow:0 28px 80px rgba(17,17,17,.09);
  --ops-shadow-soft:0 14px 40px rgba(17,17,17,.055);
  --ops-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html{color-scheme:light!important;background:var(--ops-bg)!important;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ops-font)!important;
  background:
    radial-gradient(circle at 82% -4%,rgba(36,107,253,.045),transparent 30rem),
    radial-gradient(circle at 8% 22%,rgba(103,87,217,.025),transparent 28rem),
    #fff!important;
  color:var(--ops-text)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#DCE8FF;color:#111}

/* Navigation: translucent hierarchy, not decorative glass everywhere */
.announcement,.announce{background:#F7F7F8!important;color:var(--ops-muted)!important;border-color:var(--ops-line)!important}
.announcement .dot,.announce .live{background:var(--ops-green)!important}
.site-header,.site-nav-wrap,.topbar,.nav{
  background:rgba(255,255,255,.82)!important;
  border-color:var(--ops-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
}
.site-nav{min-height:68px!important}
.brand,.nav-links a,.navlinks a{color:var(--ops-text)!important}
.brand{font-weight:700!important;letter-spacing:-.025em!important}
.brand-mark,.brandmark{background:url('/assets/kingai-mark.svg') center/contain no-repeat!important;color:transparent!important;font-size:0!important;border-radius:0!important;box-shadow:none!important}
.nav-links a,.navlinks a{font-weight:560!important}
.nav-links a.active,.navlinks a.active{background:#F5F5F7!important;color:#111!important}

/* Actions */
.button,.btn{
  min-height:44px!important;
  border-radius:12px!important;
  border:1px solid var(--ops-line-strong)!important;
  background:#fff!important;
  color:var(--ops-text)!important;
  box-shadow:none!important;
  font-weight:620!important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease,border-color .18s ease!important;
}
.button:hover,.btn:hover{transform:translateY(-1px)!important;background:#F7F7F8!important;box-shadow:var(--ops-shadow-soft)!important}
.button:not(.ghost),.btn.blue,.button.primary,.btn.primary{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
  box-shadow:0 9px 24px rgba(17,17,17,.14)!important;
}
.button:not(.ghost):hover,.btn.blue:hover,.button.primary:hover,.btn.primary:hover{background:#262626!important;border-color:#262626!important;box-shadow:0 13px 30px rgba(17,17,17,.17)!important}
.button.ghost,.btn.light,.btn.secondary{background:#fff!important;color:#111!important}

/* Hero and page typography */
.hero,.pagehero,.page-hero,.section{background:transparent!important;color:var(--ops-text)!important}
.hero{padding-block:clamp(76px,8vw,124px)!important;min-height:auto!important}
.pagehero,.page-hero{padding-block:clamp(68px,7vw,104px)!important}
.hero h1,.pagehero h1,.page-hero h1{
  font-size:clamp(54px,6.5vw,88px)!important;
  line-height:1!important;
  letter-spacing:-.065em!important;
  font-weight:690!important;
  max-width:14ch!important;
  text-wrap:balance;
}
.section-head h2,.content h2,.cta h2{
  color:var(--ops-text)!important;
  font-size:clamp(36px,4.6vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.052em!important;
  font-weight:680!important;
  text-wrap:balance;
}
.hero p,.pagehero p,.page-hero p,.section-head p,.content p,.cta p{
  color:var(--ops-muted)!important;
  font-size:clamp(17px,1.35vw,20px)!important;
  line-height:1.66!important;
  letter-spacing:-.012em!important;
}
.eyebrow,.label,.kicker,.crumb{color:#6D6F73!important;font-weight:650!important;letter-spacing:.075em!important}
.hero h1 span,.pagehero h1 span,.page-hero h1 span{color:inherit!important}
.hero-actions,.actions{gap:10px!important}

/* Sections and surfaces */
.section{padding-block:clamp(82px,8vw,126px)!important}
.section.alt,.section.white{background:#F7F7F8!important;border-color:rgba(17,17,17,.055)!important}
.section.dark{background:#111!important;color:#F5F5F7!important;border-color:rgba(255,255,255,.09)!important}
.section.dark h2,.section.dark h3,.section.dark b{color:#F5F5F7!important}
.section.dark p,.section.dark small{color:#A1A1A6!important}
.proof span,.hero-proof span{background:#F7F7F8!important;color:var(--ops-muted)!important;border-color:var(--ops-line)!important}

.demo-frame,.product-visual,.macwindow,.console-preview,.metric-board{
  background:#F7F7F8!important;
  border:1px solid var(--ops-line)!important;
  box-shadow:var(--ops-shadow)!important;
  border-radius:28px!important;
}
.demo-head,.window-head{background:rgba(255,255,255,.88)!important;color:var(--ops-muted)!important;border-color:var(--ops-line)!important}
.preview-label,.caption{color:var(--ops-muted)!important}

.card,.repo,.step,.metric,.panel,.stat,.feature{
  background:#fff!important;
  color:var(--ops-text)!important;
  border:1px solid var(--ops-line)!important;
  box-shadow:none!important;
  border-radius:22px!important;
}
.card:hover,.repo:hover,.step:hover,.feature:hover{transform:translateY(-2px)!important;border-color:var(--ops-line-strong)!important;box-shadow:0 18px 46px rgba(17,17,17,.06)!important}
.card h3,.repo h3,.feature b,.panel h3{color:#111!important;font-weight:650!important;letter-spacing:-.025em!important}
.card p,.repo p,.step small,.metric small,.panel p,.feature p{color:var(--ops-muted)!important}
.card .icon,.step span{background:#F2F5FA!important;color:#246BFD!important}
.ops-state,.status-ok,.success,.healthy{color:var(--ops-green)!important}

/* CTA: quiet confidence over decorative gradients */
.cta{
  background:#F7F7F8!important;
  color:var(--ops-text)!important;
  border:1px solid var(--ops-line)!important;
  border-radius:28px!important;
  box-shadow:none!important;
}

/* Footer and forms */
.footer,footer{background:#F7F7F8!important;color:var(--ops-muted)!important;border-top:1px solid var(--ops-line)!important}
.footer a,footer a{color:#54565A!important}
input,textarea,select{background:#fff!important;color:var(--ops-text)!important;border-color:var(--ops-line-strong)!important;border-radius:12px!important}
input:focus,textarea:focus,select:focus{border-color:#246BFD!important;box-shadow:0 0 0 4px rgba(36,107,253,.10)!important}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(36,107,253,.28)!important;outline-offset:3px!important}

/* Operational console-style data stays dense and legible */
table{border-color:var(--ops-line)!important}
th{background:#F7F7F8!important;color:#5F6368!important;font-weight:620!important}
td{border-color:var(--ops-line)!important}
code,pre{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
pre{background:#111!important;color:#F5F5F7!important;border-color:rgba(255,255,255,.08)!important;border-radius:16px!important}

@media(max-width:980px){
  .nav-links,.navlinks{background:rgba(255,255,255,.97)!important;border-color:var(--ops-line)!important;box-shadow:0 22px 56px rgba(17,17,17,.10)!important}
  .hero h1,.pagehero h1,.page-hero h1{font-size:clamp(48px,9vw,70px)!important;max-width:16ch!important}
}
@media(max-width:640px){
  .hero{padding-block:56px!important}
  .pagehero,.page-hero{padding-block:54px!important}
  .hero h1,.pagehero h1,.page-hero h1{font-size:clamp(40px,12vw,54px)!important;line-height:1.03!important;letter-spacing:-.058em!important}
  .section{padding-block:72px!important}
  .section-head h2,.content h2,.cta h2{font-size:clamp(34px,9vw,44px)!important;line-height:1.08!important}
  .demo-frame,.product-visual,.macwindow,.console-preview{border-radius:22px!important}
  .card,.repo,.step,.metric,.panel,.stat,.feature{border-radius:18px!important}
  .hero-actions,.actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .btn,.actions .btn{width:100%!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}