/* ═══════════════════════════════════════════
   BOTLESS SYSTEMS — Design System
   Dark code-aesthetic, no images, pure CSS
   ═══════════════════════════════════════════ */

:root {
  --bg:           #07070b;
  --bg-2:         #0a0a12;
  --surface:      #0f0f1a;
  --surface-2:    #141422;
  --surface-3:    #1a1a2e;
  --border:       rgba(255,255,255,0.06);
  --border-2:     rgba(255,255,255,0.10);
  --border-accent:rgba(59,130,246,0.25);
  --text:         #e2e4ea;
  --text-2:       #a0a4b4;
  --text-3:       #8a8ea0;
  --text-4:       #3a3e50;
  --accent:       #3b82f6;
  --accent-dim:   #2563eb;
  --accent-soft:  rgba(59,130,246,0.08);
  --accent-glow:  rgba(59,130,246,0.15);
  --green:        #22c55e;
  --green-dim:    #16a34a;
  --green-soft:   rgba(34,197,94,0.08);
  --amber:        #f59e0b;
  --red:          #ef4444;
  --mono:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:       6px;
  --radius-lg:    12px;
  --max-w:        1200px;
  --nav-h:        64px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration:none; transition: color .2s; }
a:hover { color: #60a5fa; }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }

/* ── BACKGROUND EFFECTS ── */
.grid-bg {
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.geo-accent {
  position:fixed; top:-200px; right:-200px;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
  animation: float-orb 20s ease-in-out infinite;
}
.geo-accent--2 {
  top:auto; bottom:-200px; right:auto; left:-200px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(99,102,241,0.04) 0%, transparent 70%);
  animation-delay: -10s; animation-duration:25s;
}
.geo-accent--3 {
  position:fixed; top:40%; left:60%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(34,197,94,0.03) 0%, transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
  animation: float-orb 18s ease-in-out infinite reverse;
}
@keyframes float-orb {
  0%,100% { transform:translate(0,0) scale(1); }
  25% { transform:translate(30px,-20px) scale(1.1); }
  50% { transform:translate(-20px,30px) scale(0.95); }
  75% { transform:translate(20px,20px) scale(1.05); }
}

.revealed { opacity:1 !important; transform:translateY(0) !important; }

/* ── LAYOUT ── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.section { padding: 100px 0; }
.section--alt { background: var(--bg-2); }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 { font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:var(--text); }
h1 { font-size:clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size:clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size:clamp(1.2rem, 2vw, 1.5rem); }
.section-title { margin-bottom:16px; }
.section-sub { color:var(--text-2); font-size:1.1rem; max-width:640px; margin-bottom:48px; }
.mono { font-family:var(--mono); }
.label {
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:var(--accent); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:12px; display:block;
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }
html { scrollbar-width:thin; scrollbar-color:var(--surface-3) var(--bg); }

/* ── NOISE TEXTURE ── */
body::before {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px 256px;
}

/* ── BOOT SEQUENCE ── */
#bootOverlay {
  position:fixed; inset:0; z-index:10000;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, transform .6s ease;
}
#bootOverlay.boot-exit { opacity:0; transform:scale(1.02); pointer-events:none; }
.boot-content { text-align:left; width:500px; max-width:90vw; }
.boot-logo {
  font-family:var(--mono); font-size:1.4rem; font-weight:700; color:var(--text);
  margin-bottom:24px;
}
.boot-cursor { color:var(--accent); animation:blink .9s step-end infinite; }
.boot-line {
  font-family:var(--mono); font-size:.8rem; color:var(--text-3);
  line-height:2; animation:boot-line-in .3s ease;
}
@keyframes boot-line-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.boot-bar {
  margin-top:20px; height:2px; background:var(--surface-3); border-radius:1px; overflow:hidden;
}
.boot-bar__fill {
  height:100%; width:0%; background:var(--accent); transition:width .3s ease;
  box-shadow:0 0 8px var(--accent-glow);
}

/* ── PARTICLE CANVAS ── */
.particle-canvas {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero { position:relative; }
.hero .particle-canvas { pointer-events:all; }

/* ── CURSOR GLOW ── */
.cursor-glow {
  position:fixed; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
  pointer-events:none; z-index:0; transform:translate(-50%,-50%);
  will-change:left,top;
  display:none;
}
@media (hover:hover) { .cursor-glow { display:block; } }

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--accent), #6366f1, var(--accent));
  background-size:200% 100%; animation:progress-gradient 3s linear infinite;
  z-index:101; width:0%; box-shadow:0 0 10px var(--accent-glow);
}
@keyframes progress-gradient { to{background-position:-200% 0} }

/* ── MARQUEE TICKER ── */
.marquee {
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:14px 0; background:var(--surface);
}
.marquee__track {
  display:inline-block; animation:marquee 30s linear infinite;
}
.marquee__item {
  display:inline-block; padding:0 32px;
  font-family:var(--mono); font-size:.8rem; color:var(--text-3);
  letter-spacing:.05em; text-transform:uppercase;
}
.marquee__item .dot {
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--accent); margin:0 16px; vertical-align:middle; opacity:.5;
}
@keyframes marquee { to{transform:translateX(-50%)} }

/* ── NAV ── */
.nav {
  position:fixed; top:2px; left:0; right:0;
  height:var(--nav-h); z-index:100;
  background:var(--surface);
  border-bottom:none;
}
.nav::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 5%, var(--accent) 50%, transparent 95%);
  opacity:.3; transition:opacity .4s;
}
.nav.scrolled { background:var(--surface-2); box-shadow:0 4px 24px rgba(0,0,0,0.4); }
.nav.scrolled::after { opacity:.7; }
.nav__inner {
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav__logo {
  font-family:var(--mono); font-size:1rem; font-weight:600;
  color:var(--text); text-decoration:none; letter-spacing:-0.02em;
}
.nav__logo:hover { color:var(--text); }
.cursor {
  animation: blink .9s step-end infinite;
  color:var(--accent);
}
@keyframes blink { 50% { opacity:0; } }
.nav__links { display:flex; gap:32px; align-items:center; }
.nav__links a {
  font-size:.875rem; font-weight:500; color:var(--text-2);
  text-decoration:none; transition:color .2s; position:relative;
}
.nav__links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--accent); transform:scaleX(0);
  transform-origin:right; transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.nav__links a:hover { color:var(--text); }
.nav__links a:hover::after { transform:scaleX(1); transform-origin:left; }
.nav__burger {
  display:none; background:none; border:none; cursor:pointer;
  width:32px; height:24px; position:relative;
}
.nav__burger span {
  display:block; width:100%; height:2px;
  background:var(--text-2); position:absolute; left:0;
  transition:all .3s;
}
.nav__burger span:first-child { top:4px; }
.nav__burger span:last-child { bottom:4px; }
.nav__burger.open span:first-child { top:11px; transform:rotate(45deg); }
.nav__burger.open span:last-child { bottom:11px; transform:rotate(-45deg); }

/* ── HERO ── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:var(--nav-h); position:relative;
}
.hero__inner {
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  position:relative; z-index:1; width:100%;
}
.hero__label { margin-bottom:20px; }
.hero__h1 {
  margin-bottom:24px;
  background:linear-gradient(110deg, var(--text) 0%, #60a5fa 40%, var(--text) 55%, var(--text-2) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 8s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{background-position:100% 0} 50%{background-position:0% 0} }
.hero__h1 .highlight {
  background:linear-gradient(135deg, #60a5fa, #3b82f6, #6366f1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero__sub { color:var(--text-2); font-size:1.15rem; margin-bottom:36px; max-width:520px; }
.hero__ctas { display:flex; gap:16px; flex-wrap:wrap; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius);
  font-family:var(--sans); font-size:.9rem; font-weight:600;
  text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  border:none; position:relative;
}
.btn--primary {
  background:linear-gradient(135deg, var(--accent), #6366f1);
  color:#fff;
  box-shadow:0 0 20px rgba(59,130,246,0.25), 0 0 60px rgba(59,130,246,0.1);
}
.btn--primary:hover { color:#fff; box-shadow:0 0 30px rgba(59,130,246,0.4), 0 0 80px rgba(99,102,241,0.15); }
.btn--primary::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(59,130,246,0.6), rgba(99,102,241,0.6), rgba(59,130,246,0.6));
  background-size:200% 200%; z-index:-1;
  animation:btn-gradient 4s ease infinite;
  filter:blur(8px); opacity:0; transition:opacity .3s;
}
.btn--primary:hover::after { opacity:1; }
@keyframes btn-gradient {
  0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}
}
.btn--ghost {
  background:transparent; color:var(--text-2);
  border:1px solid var(--border-2); transition:all .3s;
}
.btn--ghost:hover { border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.btn--sm { padding:10px 20px; font-size:.8rem; }

/* ── TERMINAL MOCKUP (hero right) ── */
.terminal {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); overflow:hidden;
  font-family:var(--mono); font-size:.82rem;
  box-shadow:0 24px 80px rgba(0,0,0,0.5), 0 0 40px rgba(59,130,246,0.05);
  position:relative;
}
.terminal::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg, rgba(59,130,246,0.15), transparent 50%, rgba(99,102,241,0.1));
  opacity:0; transition:opacity .5s;
}
.terminal:hover::before { opacity:1; }
.terminal__bar {
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.terminal__dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--text-4);
}
.terminal__dot:nth-child(1) { background:#ef4444; opacity:.7; }
.terminal__dot:nth-child(2) { background:#f59e0b; opacity:.7; }
.terminal__dot:nth-child(3) { background:#22c55e; opacity:.7; }
.terminal__title { margin-left:auto; color:var(--text-3); font-size:.7rem; }
.terminal__body { padding:20px; line-height:1.9; color:var(--text-2); min-height:280px; }
.terminal__body .cmd { color:var(--green); }
.terminal__body .flag { color:var(--accent); }
.terminal__body .comment { color:var(--text-4); }
.terminal__body .out { color:var(--text-2); }
.terminal__body .success { color:var(--green); }
.terminal__body .num { color:var(--amber); }

/* ── CIRCUIT DIVIDER ── */
.divider-circuit { width:100%; height:20px; display:block; margin:0; }
.divider-circuit path { animation:circuit-flow 8s linear infinite; }
@keyframes circuit-flow { to { stroke-dashoffset:-40; } }

/* ── FEATURE/SERVICE CARDS ── */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px 28px;
  transition:all .3s; position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(59,130,246,0.25), transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.card:hover::before { opacity:1; }
.card:hover { border-color:var(--border-accent); transform:translateY(-2px); box-shadow:0 8px 40px rgba(0,0,0,0.3); }
.card__icon {
  width:48px; height:48px; border-radius:var(--radius);
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--accent);
}
.card__icon--green { background:var(--green-soft); color:var(--green); }
.card h3 { margin-bottom:12px; }
.card p { color:var(--text-2); font-size:.92rem; }
.card__link {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px; font-size:.85rem; font-weight:600;
}

/* ── METRICS ROW ── */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:48px 0; }
.metric { text-align:center; }
.metric__num {
  font-family:var(--mono); font-size:2.4rem; font-weight:700;
  background:linear-gradient(135deg, #60a5fa, #22c55e);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.metric__label { color:var(--text-3); font-size:.85rem; margin-top:4px; }

/* ── CASE STUDY CARDS ── */
.case-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:24px; }
.case-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
  transition:all .3s; position:relative; overflow:hidden;
}
.case-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:linear-gradient(90deg, var(--accent), var(--green));
  opacity:0; transition:opacity .3s;
}
.case-card:hover { border-color:var(--border-accent); }
.case-card:hover::before { opacity:1; }
.case-card__badge {
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  color:var(--accent); background:var(--accent-soft);
  padding:4px 10px; border-radius:4px; display:inline-block; margin-bottom:16px;
}
.case-card h3 { margin-bottom:8px; }
.case-card__loc { color:var(--text-3); font-size:.85rem; margin-bottom:12px; }
.case-card p { color:var(--text-2); font-size:.9rem; margin-bottom:16px; }
.case-card__metrics { display:flex; gap:20px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.case-card__stat-num { font-family:var(--mono); font-weight:600; color:var(--green); font-size:1.1rem; }
.case-card__stat-label { color:var(--text-3); font-size:.75rem; }

/* ── PROCESS / STEPS ── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; counter-reset:step; }
.step {
  position:relative; padding:32px 24px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); counter-increment:step;
}
.step::before {
  content:counter(step, decimal-leading-zero);
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  color:var(--accent); margin-bottom:16px; display:block;
}
.step h3 { margin-bottom:8px; font-size:1.1rem; }
.step p { color:var(--text-2); font-size:.88rem; }

/* ── CTA SECTION ── */
.cta-section {
  text-align:center; padding:100px 0;
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.cta-section h2 { margin-bottom:16px; }
.cta-section p { color:var(--text-2); margin-bottom:36px; max-width:500px; margin-left:auto; margin-right:auto; }

/* ── FAQ ── */
.faq-list { max-width:720px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; cursor:pointer; font-weight:600; font-size:.95rem;
  color:var(--text); background:none; border:none; width:100%;
  text-align:left; font-family:var(--sans);
}
.faq-q::after { content:'+'; font-family:var(--mono); color:var(--text-3); font-size:1.2rem; transition:transform .3s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; color:var(--text-2); font-size:.9rem; line-height:1.7; }
.faq-item.open .faq-a { max-height:400px; padding-bottom:20px; }

/* ── FOOTER ── */
.footer {
  border-top:1px solid var(--border);
  padding:64px 0 100px; /* extra bottom for status bar */
  background:var(--bg-2);
}
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer__tagline { color:var(--text-2); margin-top:8px; font-size:.9rem; }
.footer__location { color:var(--text-3); margin-top:4px; font-size:.8rem; }
.footer__col h4, .footer__heading { font-size:.8rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-weight:700; }
.footer__col a { display:block; color:var(--text-2); font-size:.88rem; margin-bottom:8px; text-decoration:none; }
.footer__col a:hover { color:var(--text); }
.footer__bottom {
  display:flex; align-items:center; gap:8px;
  padding-top:24px; border-top:1px solid var(--border);
  font-size:.8rem; color:var(--text-3);
}
.footer__sep { opacity:.4; }

/* ── STATUS BAR ── */
.status-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:28px; background:var(--surface-2);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:90;
  font-family:var(--mono); font-size:.65rem; color:var(--text-4);
}

/* ── CHATBOT ── */
.chatbot { position:fixed; bottom:44px; right:24px; z-index:200; }
.chatbot__toggle {
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; position:relative;
  box-shadow:0 4px 24px rgba(59,130,246,0.3);
  transition:all .3s;
}
.chatbot__toggle:hover { transform:scale(1.05); box-shadow:0 6px 32px rgba(59,130,246,0.4); }
.chatbot__pulse {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
  animation:chat-pulse 3s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%,100% { transform:scale(1); opacity:0; }
  50% { transform:scale(1.2); opacity:.4; }
}
.chatbot__window {
  position:absolute; bottom:72px; right:0;
  width:380px; max-height:520px;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); overflow:hidden;
  display:none; flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.chatbot__window.open { display:flex; }
.chatbot__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.chatbot__title { font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--text); }
.chatbot__close {
  background:none; border:none; color:var(--text-3);
  font-size:1.4rem; cursor:pointer; line-height:1;
}
.chatbot__close:hover { color:var(--text); }
.chatbot__messages {
  flex:1; overflow-y:auto; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  min-height:300px; max-height:360px;
  scrollbar-width:none;
}
.chatbot__messages::-webkit-scrollbar { display:none; }
.chatbot__msg {
  max-width:85%; padding:12px 16px;
  border-radius:4px; font-size:.88rem; line-height:1.6;
  animation:msg-in .3s ease;
}
@keyframes msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chatbot__msg--bot {
  background:var(--surface-2); border-left:2px solid var(--accent);
  color:var(--text); align-self:flex-start;
}
.chatbot__msg--user {
  background:rgba(34,197,94,0.06); border-left:2px solid var(--green);
  color:var(--text); align-self:flex-end;
}
.chatbot__msg--typing { color:var(--text-3); font-family:var(--mono); font-size:.8rem; }
.chatbot__msg--typing::after { content:'▊'; animation:blink .8s step-end infinite; }
.chatbot__quick-replies { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chatbot__qr {
  background:transparent; border:1px solid var(--surface-3);
  color:var(--text-2); padding:8px 14px; border-radius:4px;
  font-family:var(--mono); font-size:.75rem; cursor:pointer;
  transition:all .2s;
}
.chatbot__qr::before { content:'> '; opacity:.4; }
.chatbot__qr:hover { border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.chatbot__input-wrap {
  display:flex; gap:8px; padding:16px;
  border-top:1px solid var(--border); background:var(--surface-2);
}
.chatbot__input {
  flex:1; background:var(--bg); border:1px solid var(--border);
  border-radius:4px; color:var(--text); padding:10px 14px;
  font-family:var(--mono); font-size:.82rem; outline:none;
  transition:border-color .2s;
}
.chatbot__input:focus { border-color:var(--accent); }
.chatbot__input::placeholder { color:var(--text-4); }
.chatbot__send {
  background:var(--accent); border:none; border-radius:4px;
  width:38px; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; transition:background .2s;
}
.chatbot__send:hover { background:var(--accent-dim); }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding:calc(var(--nav-h) + 16px) 0 0;
  font-size:.8rem; color:var(--text-3);
}
.breadcrumb a { color:var(--text-3); }
.breadcrumb a:hover { color:var(--text-2); }
.breadcrumb .sep { margin:0 8px; opacity:.4; }

/* ── PAGE HERO (inner pages) ── */
.page-hero { padding:32px 0 24px; }
.breadcrumb + .page-hero { padding-top:20px; }
.page-hero + .section,
.page-hero + .section--alt { padding-top:48px; }
.page-hero .label { margin-bottom:16px; }
.page-hero h1 { margin-bottom:16px; }
.page-hero__sub { color:var(--text-2); font-size:1.1rem; max-width:640px; }

/* ── CONTENT BLOCKS ── */
.content-block { padding:80px 0; }
.content-block h2 { margin-bottom:16px; }
.content-block p { color:var(--text-2); max-width:720px; margin-bottom:20px; }
.content-block ul { margin:16px 0 24px 20px; }
.content-block li { color:var(--text-2); margin-bottom:8px; position:relative; padding-left:20px; }
.content-block li::before { content:'→'; position:absolute; left:0; color:var(--accent); }

/* ── CODE BLOCK DECORATION ── */
.code-decor {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  font-family:var(--mono); font-size:.8rem;
  color:var(--text-3); line-height:2; overflow-x:auto;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns:1fr; gap:40px; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 768px) {
  .nav__links { display:none; position:fixed; inset:0; top:var(--nav-h); background:rgba(7,7,11,0.97); flex-direction:column; align-items:center; justify-content:center; gap:32px; }
  .nav__links.open { display:flex; }
  .nav__burger { display:block; }
  .hero { min-height:auto; padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px; }
  .cards { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .metrics { grid-template-columns:repeat(2,1fr); gap:16px; }
  .footer__grid { grid-template-columns:1fr; gap:24px; }
  .chatbot__window { width:calc(100vw - 32px); right:-8px; }
  .status-bar { display:none; }
  .section { padding:60px 0; }
}
@media (max-width: 480px) {
  .hero__ctas { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
  .metric__num { font-size:1.8rem; }
}