/* ═══ HumanRobot — Shared Site CSS ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }

:root {
  --bg: #0b0b14; --bg-card: #12121f; --bg-surface: #1a1a2e;
  --border: #1e1e35; --border-mid: #2a2a4a;
  --text: #e2e2f5; --text-2: #9090b8; --text-3: #5a5a80;
  --accent: #38bdf8; --accent-glow: rgba(56,189,248,.18); --accent-dim: rgba(56,189,248,.08);
  --green: #34d399; --green-dim: rgba(52,211,153,.1);
  --blue: #60a5fa; --blue-dim: rgba(96,165,250,.1);
  --pink: #f472b6;
  --font-h: 'Syne', sans-serif;
  --font-b: 'Inter', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --r: 14px; --gap: clamp(60px,9vh,110px); --w: 1140px;
}
[data-theme="light"] {
  --bg: #f5f7fa; --bg-card: #ffffff; --bg-surface: #eef0f4;
  --border: #e0e3ea; --border-mid: #cdd1da;
  --text: #1a1a2e; --text-2: #4a4a6a; --text-3: #8888a4;
  --accent: #0284c7; --accent-glow: rgba(2,132,199,.08); --accent-dim: rgba(2,132,199,.04);
  --green: #059669; --green-dim: rgba(5,150,105,.05);
  --blue: #2563eb; --blue-dim: rgba(37,99,235,.05);
  --pink: #db2777;
}
[data-theme="light"] #aurora {
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgba(14,165,233,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(96,165,250,.04) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 40% 80%, rgba(56,189,248,.03) 0%, transparent 70%);
}
[data-theme="light"] nav.stuck { background: rgba(245,247,250,.96) }
[data-theme="light"] .btn-accent { background: linear-gradient(135deg,#0284c7 0%,#38bdf8 100%); color:#fff; box-shadow:0 4px 20px rgba(2,132,199,.25) }
[data-theme="light"] .nav-btn { background: linear-gradient(135deg,#0284c7 0%,#38bdf8 100%) !important; color:#fff !important }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body { font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden }
::selection { background: var(--accent); color: var(--bg) }
.w { max-width: var(--w); margin: 0 auto; padding: 0 clamp(20px,5vw,48px) }

/* Aurora */
#aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgba(14,165,233,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(96,165,250,.12) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 40% 80%, rgba(56,189,248,.1) 0%, transparent 70%);
}
#grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(167,139,250,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(167,139,250,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
}

/* Nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px;
  display: flex; align-items: center;
  transition: background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.stuck { background: rgba(11,11,20,.95); border-color: var(--border) }
.nav-inner { max-width: var(--w); width: 100%; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; align-items: center; justify-content: space-between }
.logo { font-family: var(--font-m); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px }
.logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: blink 3s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.nav-menu { display: flex; align-items: center; gap: 4px }
.nav-menu a { padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color .15s, background .15s }
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.04) }
.nav-btn { margin-left: 8px; padding: 8px 20px !important; border-radius: 8px !important; background: linear-gradient(135deg,#1a1a35 0%,#ffffff 100%) !important; color: #0b0b14 !important; font-weight: 600 !important; font-size: 13px !important; box-shadow: 0 2px 16px rgba(0,0,0,.4); transition: opacity .15s !important }
.nav-btn:hover { opacity: .9 !important }
@media(max-width:640px) { .nav-menu a:not(.nav-btn) { display: none } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 10px; font-family: var(--font-b); font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all .2s ease }
.btn-accent { background: linear-gradient(135deg,#1a1a35 0%,#ffffff 100%); color: #0b0b14; box-shadow: 0 4px 20px rgba(0,0,0,.4) }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.5) }
.btn-outline { background: transparent; color: var(--text-2); border: 1px solid var(--border-mid) }
.btn-outline:hover { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,.03) }
.btn svg { width: 16px; height: 16px }

/* Typography */
section { position: relative; z-index: 1 }
.sec-pad { padding: var(--gap) 0 }
.tag { font-family: var(--font-m); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 10px }
.tag::before { content: ''; width: 24px; height: 1px; background: var(--accent); opacity: .5 }
.sec-h { font-family: var(--font-h); font-size: clamp(28px,4vw,48px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px }
.sec-sub { font-size: clamp(15px,1.5vw,18px); color: var(--text-2); max-width: 560px; line-height: 1.65 }
hr.line { border: none; border-top: 1px solid var(--border); position: relative; z-index: 1 }

/* Hero */
.page-hero { position: relative; z-index: 1; padding: 140px 0 80px }
.page-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 8px; border: 1px solid var(--border-mid); border-radius: 100px; font-family: var(--font-m); font-size: 12px; color: var(--text-2); background: rgba(255,255,255,.02); margin-bottom: 32px }
.page-badge-pill { padding: 2px 8px; border-radius: 100px; background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 600 }
.page-hero h1 { font-family: var(--font-h); font-size: clamp(36px,6vw,68px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; margin-bottom: 24px }
.page-hero h1 .g { background: linear-gradient(135deg,#38bdf8 0%,#818cf8 45%,#34d399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px); font-weight: 300; color: var(--text-2); max-width: 600px; margin: 0 0 40px; line-height: 1.65 }
.page-hero-btns { display: flex; gap: 12px; flex-wrap: wrap }

/* Feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px }
@media(max-width:900px) { .feat-grid { grid-template-columns: repeat(2,1fr) } }
@media(max-width:560px) { .feat-grid { grid-template-columns: 1fr } }
.feat-card { padding: clamp(24px,2.5vw,36px); border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-card); transition: border-color .25s, transform .25s }
.feat-card:hover { border-color: var(--border-mid); transform: translateY(-3px) }
.feat-ico { font-size: 28px; margin-bottom: 14px }
.feat-card h3 { font-family: var(--font-h); font-size: 17px; font-weight: 700; margin-bottom: 8px }
.feat-card p { font-size: 14px; color: var(--text-2); line-height: 1.6 }

/* Process steps */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 48px; max-width: 720px }
.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border) }
.step:last-child { border-bottom: none }
.step-num { font-family: var(--font-m); font-size: 13px; color: var(--accent); min-width: 32px; padding-top: 3px }
.step h3 { font-family: var(--font-h); font-size: 18px; font-weight: 700; margin-bottom: 8px }
.step p { font-size: 15px; color: var(--text-2); line-height: 1.65 }

/* CTA box */
.cta-wrap { padding: var(--gap) 0; text-align: center; position: relative; z-index: 1 }
.cta-box { max-width: 680px; margin: 0 auto; padding: clamp(48px,6vw,80px) clamp(24px,5vw,64px); border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-mid); position: relative; overflow: hidden }
.cta-box::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg,transparent,var(--accent),var(--blue),transparent) }
.cta-box h2 { font-family: var(--font-h); font-size: clamp(26px,3.5vw,42px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; line-height: 1.1 }
.cta-price { font-size: 18px; color: var(--text-2); margin-bottom: 32px }
.cta-price strong { color: var(--text); font-weight: 600 }

/* Footer */
footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 40px 0 }
.foot-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px }
.foot-brand { font-family: var(--font-m); font-size: 13px; color: var(--text-3) }
.foot-company { font-size: 12px; color: var(--text-3); opacity: .7; margin-top: 8px; line-height: 1.6 }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap }
.foot-links a { font-size: 13px; color: var(--text-3); text-decoration: none; transition: color .15s }
.foot-links a:hover { color: var(--text-2) }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--text-3); margin-bottom: 20px }
.breadcrumb a { color: var(--text-3); text-decoration: none; transition: color .15s }
.breadcrumb a:hover { color: var(--accent) }
.breadcrumb span { margin: 0 8px }

/* Metrics row */
.metrics-row { display: flex; gap: clamp(24px,4vw,56px); flex-wrap: wrap; margin-top: 48px; padding: 32px; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-card) }
.metric { display: flex; flex-direction: column; gap: 4px }
.metric-val { font-family: var(--font-h); font-size: clamp(28px,3vw,40px); font-weight: 800; letter-spacing: -.03em; color: var(--accent) }
.metric-lbl { font-size: 13px; color: var(--text-3) }

/* Integrations */
.integr-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px }
.integr-pill { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); font-size: 13px; color: var(--text-2); font-family: var(--font-m) }

/* Theme toggle */
#theme-toggle { background: none; border: 1px solid var(--border-mid); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; color: var(--text-2); display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; flex-shrink: 0; margin-left: 4px }