/* ============================================================
   kloderr — shared design system
   广州客劳得科技有限公司 · Orchestrate Agents. Build the Future.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ============================================================
   Tokens
   ============================================================ */
:root{
  /* brand greens (sampled from logo) */
  --brand:        #0B7A3B;
  --brand-deep:   #06502C;
  --brand-bright: #28B85C;
  --brand-tint:   #E9F4EC;
  --brand-tint-2: #D6EBDC;

  /* light surfaces (warm off-white) */
  --bg:      #FAFAF6;
  --bg-2:    #F1F2EC;
  --surface: #FFFFFF;
  --line:    #E4E6DD;
  --line-2:  #EDEEE7;

  /* ink */
  --ink:    #0C1410;
  --ink-2:  #38423B;
  --muted:  #6B746C;

  /* dark stage */
  --dark:    #06140C;
  --dark-2:  #0A2012;
  --dark-3:  #0E2A18;
  --on-dark:       #EAF2EC;
  --on-dark-soft:  #B9C9BF;
  --on-dark-muted: #7E9286;
  --dark-line: rgba(255,255,255,.10);

  /* type */
  --font-display: "Sora","Noto Sans SC","Noto Sans JP",system-ui,sans-serif;
  --font-sans:    "Manrope","Noto Sans SC","Noto Sans JP",system-ui,sans-serif;

  /* shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(8,20,14,.04), 0 2px 8px rgba(8,20,14,.05);
  --shadow:    0 4px 14px rgba(8,20,14,.06), 0 18px 50px rgba(8,20,14,.08);
  --shadow-lg: 0 10px 30px rgba(8,20,14,.08), 0 40px 90px rgba(8,20,14,.12);
  --glow:      0 0 0 1px rgba(40,184,92,.22), 0 12px 50px rgba(40,184,92,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1200px;
}

/* language-aware font priority */
html[lang="zh"] body{ --font-sans:"Manrope","Noto Sans SC",system-ui,sans-serif; --font-display:"Sora","Noto Sans SC",system-ui,sans-serif; }
html[lang="ja"] body{ --font-sans:"Manrope","Noto Sans JP",system-ui,sans-serif; --font-display:"Sora","Noto Sans JP",system-ui,sans-serif; }
html[lang="en"] body{ --font-sans:"Manrope",system-ui,sans-serif; --font-display:"Sora",system-ui,sans-serif; }

/* ============================================================
   Reset
   ============================================================ */
*{ 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(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

/* ============================================================
   Typography helpers
   ============================================================ */
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.eyebrow{
  font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--brand); display:inline-block; }
.eyebrow.on-dark{ color:var(--brand-bright); }
.eyebrow.on-dark::before{ background:var(--brand-bright); }
.lede{ font-size:19px; color:var(--ink-2); line-height:1.66; }
.mono{ font-family:"Sora",ui-monospace,monospace; letter-spacing:.02em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px;
  transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space:nowrap; will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 6px 20px rgba(11,122,59,.28); }
.btn-primary:hover{ background:#0a6c35; transform:translateY(-2px); box-shadow:0 12px 30px rgba(11,122,59,.34); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand); transform:translateY(-2px); }
.btn-dark{ background:#fff; color:var(--ink); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.btn-on-dark-ghost{ background:rgba(255,255,255,.04); color:var(--on-dark); box-shadow:inset 0 0 0 1.5px var(--dark-line); }
.btn-on-dark-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--brand-bright); color:#fff; transform:translateY(-2px); }
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-lg{ padding:16px 28px; font-size:16px; }

/* ============================================================
   Logo lockup
   ============================================================ */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo img.mark{ height:34px; width:auto; }
.logo img.word{ height:21px; width:auto; }

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:32px; }
.section{ padding-block:104px; position:relative; }
.section.tight{ padding-block:72px; }
.section-head{ max-width:760px; margin-bottom:54px; }
.section-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.4vw,46px); letter-spacing:-.02em; line-height:1.12; margin-top:16px; }
.section-head p{ margin-top:18px; font-size:18px; color:var(--ink-2); }
.center{ text-align:center; margin-inline:auto; }
.center .eyebrow{ justify-content:center; }

.bg-2{ background:var(--bg-2); }
.bg-tint{ background:var(--brand-tint); }

/* dark stage block */
.stage{ background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden; }
.stage h2{ color:#fff; }
.stage .section-head p{ color:var(--on-dark-soft); }
.stage .lede{ color:var(--on-dark-soft); }
.stage-glow{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 0%, rgba(40,184,92,.18), transparent 70%),
    radial-gradient(50% 60% at 100% 30%, rgba(40,184,92,.12), transparent 70%);
}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--brand-tint-2); }
.card-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand); margin-bottom:20px;
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; }
.card p{ margin-top:10px; color:var(--muted); font-size:15.5px; }

.card.on-dark{ background:rgba(255,255,255,.03); border-color:var(--dark-line); }
.card.on-dark:hover{ border-color:rgba(40,184,92,.45); box-shadow:var(--glow); }
.card.on-dark h3{ color:#fff; }
.card.on-dark p{ color:var(--on-dark-soft); }
.card.on-dark .card-icon{ background:rgba(40,184,92,.14); color:var(--brand-bright); }

/* chips / pills */
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  padding:7px 13px; border-radius:999px; background:var(--brand-tint); color:var(--brand-deep); }
.chip.on-dark{ background:rgba(40,184,92,.12); color:var(--brand-bright); }

/* placeholder image slot */
.ph{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(11,122,59,.05) 0 12px, rgba(11,122,59,.02) 12px 24px),
    var(--bg-2);
  border:1px dashed var(--line);
  display:grid; place-items:center; color:var(--muted);
}
.ph span{ font-family:"Sora",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.ph.on-dark{ background:repeating-linear-gradient(135deg, rgba(40,184,92,.08) 0 12px, rgba(40,184,92,.03) 12px 24px), rgba(255,255,255,.02); border-color:var(--dark-line); color:var(--on-dark-muted); }

/* note / placeholder tag for occupied data */
.note{ font-family:"Sora",monospace; font-size:11px; letter-spacing:.04em; color:var(--brand); background:var(--brand-tint); padding:2px 7px; border-radius:6px; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
[data-reveal-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--dark); color:var(--on-dark-soft); padding-block:64px 34px; position:relative; overflow:hidden; }
.footer a{ color:var(--on-dark-soft); transition:color .18s; }
.footer a:hover{ color:#fff; }
.footer .word{ height:22px; }

/* ============================================================
   Language switch
   ============================================================ */
.lang{ display:inline-flex; align-items:center; background:var(--bg-2); border-radius:999px; padding:3px; gap:2px; }
.lang button{ font-size:13px; font-weight:600; color:var(--muted); padding:6px 11px; border-radius:999px; transition:.18s; line-height:1; }
.lang button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.lang.on-dark{ background:rgba(255,255,255,.06); }
.lang.on-dark button{ color:var(--on-dark-muted); }
.lang.on-dark button.active{ background:rgba(255,255,255,.12); color:#fff; box-shadow:none; }

/* utility */
.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.fadeline{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }