:root{
  --navy-deep:#0B1526;
  --navy:#0E1C33;
  --navy-mid:#132846;
  --brand-blue:#36558B;
  --brand-line:#3E6BAE;
  --accent:#7FA3D8;
  --accent-2:#8FB4E6;
  --text-light:#F4F7FB;
  --text-muted:#AEC0D8;
  --ink:#101E36;
  --ink-muted:#5B6B84;
  --bg-soft:#F4F6FA;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  background:#fff;
  font-weight:400;
}

h1,h2,h3,h4,.brand-font{
  font-weight:700;
  letter-spacing:-0.01em;
}

.accent-text{ color:var(--accent-2); }

/* ---------- Navbar ---------- */
.navbar-mgb{
  background:rgba(11,21,38,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.navbar-mgb .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:1.3rem;
  color:var(--text-light);
}
.navbar-mgb .navbar-brand img{ height:36px; width:auto; max-width:100%; }
.navbar-mgb .navbar-brand .brand-word{ white-space:nowrap; }
.navbar-mgb .navbar-toggler{
  border-color:rgba(255,255,255,0.55);
  padding:.35rem .55rem;
}
.navbar-mgb .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(127,163,216,0.4); }
.navbar-mgb .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-mgb .nav-link{
  color:var(--text-muted);
  font-weight:500;
  padding:.5rem 1rem;
  transition:color .15s ease;
}
.navbar-mgb .nav-link:hover,
.navbar-mgb .nav-link:focus{ color:var(--text-light); }
.navbar-mgb .nav-link.active{ color:#fff; font-weight:600; }
.btn-brand{
  background:var(--brand-line);
  border:1px solid var(--brand-line);
  color:#fff;
  font-weight:600;
  padding:.55rem 1.4rem;
  border-radius:8px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-brand:hover{
  background:#4d7cc4;
  border-color:#4d7cc4;
  color:#fff;
  transform:translateY(-1px);
}
.btn-outline-brand{
  border:1px solid rgba(255,255,255,0.35);
  color:var(--text-light);
  font-weight:600;
  padding:.55rem 1.4rem;
  border-radius:8px;
  transition:all .15s ease;
}
.btn-outline-brand:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.6);
  color:#fff;
}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 900px 700px at 88% -10%, rgba(54,85,139,0.40) 0%, rgba(54,85,139,0) 60%),
    radial-gradient(ellipse 700px 500px at 8% 110%, rgba(54,85,139,0.28) 0%, rgba(54,85,139,0) 65%),
    linear-gradient(155deg, #0B1526 0%, #0E1C33 45%, #0B1526 100%);
  overflow:hidden;
  padding-top:7.5rem;
  padding-bottom:4rem;
}
.hero svg.network{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  opacity:.9;
}
.hero-content{ position:relative; z-index:2; }
.hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--accent-2);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  background:rgba(127,163,216,0.12);
  border:1px solid rgba(127,163,216,0.3);
  padding:.4rem .9rem;
  border-radius:999px;
  margin-bottom:1.5rem;
}
.hero .eyebrow-audio{
  display:flex;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  font-family:inherit;
  line-height:1.3;
  text-align:center;
  background:var(--brand-line);
  border:1px solid var(--brand-line);
  color:#fff;
}
.hero .eyebrow-audio:hover{
  background:#4d7cc4;
  border-color:#4d7cc4;
}
.eyebrow-audio:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}
.eyebrow-audio i{ font-size:1rem; }
.hero .eyebrow-audio.is-playing{
  background:#2c4a78;
  border-color:#2c4a78;
}
.eyebrow-audio.is-playing i{
  animation:pitchPulse 1.1s ease-in-out infinite;
}
@keyframes pitchPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.5; }
}
.hero h1{
  color:var(--text-light);
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  line-height:1.1;
  margin-bottom:1.4rem;
}
.hero p.lead{
  color:var(--text-muted);
  font-size:1.15rem;
  max-width:980px;
  line-height:1.6;
  margin-bottom:2.2rem;
}

/* ---------- Page header band (interior pages) ---------- */
.page-header{
  position:relative;
  background:
    radial-gradient(ellipse 800px 500px at 90% -20%, rgba(54,85,139,0.38) 0%, rgba(54,85,139,0) 60%),
    linear-gradient(155deg, #0B1526 0%, #0E1C33 45%, #0B1526 100%);
  overflow:hidden;
  padding-top:6.5rem;
  padding-bottom:2.5rem;
}
.page-header svg.network{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  opacity:.85;
}
.page-header-content{ position:relative; z-index:2; }
.page-header .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--accent-2);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  background:rgba(127,163,216,0.12);
  border:1px solid rgba(127,163,216,0.3);
  padding:.4rem .9rem;
  border-radius:999px;
  margin-bottom:1.25rem;
}
.page-header h1{
  color:var(--text-light);
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.15;
  margin-bottom:1rem;
}
.page-header p.lead{
  color:var(--text-muted);
  font-size:1.1rem;
  max-width:620px;
  line-height:1.6;
  margin-bottom:0;
}

/* ---------- Section framing ---------- */
section{ padding:3.5rem 0; }
.section-label{
  text-transform:none;
  color:var(--brand-line);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  margin-bottom:.75rem;
  display:block;
}
.section-title{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom:1rem;
}
.section-sub{
  color:var(--ink-muted);
  font-size:1.05rem;
  max-width:620px;
  line-height:1.6;
}
.text-center .section-sub{ margin-left:auto; margin-right:auto; }
.section-sub-wide{ max-width:900px; }

/* ---------- About ---------- */
.about-badges .badge-pill{
  display:inline-block;
  background:#EEF2F9;
  color:var(--brand-blue);
  border:1px solid #DCE4F0;
  padding:.5rem 1rem;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  margin:.25rem .4rem .25rem 0;
}
.about-visual{
  position:relative;
  background:linear-gradient(160deg, #0E1C33, #16294A);
  border-radius:20px;
  padding:3rem 2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  overflow:hidden;
}
.about-visual img{ width:140px; position:relative; z-index:2; filter:drop-shadow(0 12px 30px rgba(0,0,0,.4)); }
.about-visual svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.8; }

/* ---------- Services / cards ---------- */
.bg-soft{ background:var(--bg-soft); }
.service-card{
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:16px;
  padding:2rem 1.75rem;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(16,30,54,0.08);
  border-color:#D7E0EF;
}
.service-icon{
  width:52px; height:52px;
  border-radius:12px;
  background:linear-gradient(145deg, var(--brand-blue), var(--brand-line));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.35rem;
  margin-bottom:1.25rem;
}
.service-card h3{ font-size:1.15rem; margin-bottom:.6rem; color:var(--ink); }
.service-card p{ color:var(--ink-muted); font-size:.95rem; line-height:1.6; margin-bottom:0; }

/* ---------- Why Businesses Choose Us: icon + title inline ---------- */
/* Scoped to #why-choose so the "What We Automate" section above (which
   shares .service-card/.service-icon) keeps its own stacked layout. */
#why-choose .choose-header{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:.8rem;
}
#why-choose .service-icon{
  width:clamp(40px, 6vw, 52px);
  height:clamp(40px, 6vw, 52px);
  font-size:clamp(1.05rem, 2.2vw, 1.35rem);
  margin-bottom:0;
  flex-shrink:0;
}
#why-choose .service-card h3{ margin-bottom:0; font-size:1.05rem; }

/* ---------- Quick-nav: "Choose the area you want to improve" ---------- */
.quicknav-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:768px){ .quicknav-grid{ grid-template-columns:repeat(3,1fr); } }
.quicknav-card{
  display:block;
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:14px;
  padding:1.25rem 1.3rem;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quicknav-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(16,30,54,0.08);
  border-color:#D7E0EF;
}
.quicknav-dot{
  width:10px; height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:.5rem;
  flex-shrink:0;
}
.quicknav-card h3{
  display:flex;
  align-items:center;
  font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.35rem;
}
.quicknav-card p{ font-size:.82rem; color:var(--ink-muted); margin-bottom:0; line-height:1.5; }

/* ---------- Category sections ---------- */
/* These 6 sections stack directly one after another, so the default
   site-wide section padding (5.5rem top+bottom) doubles up into a
   large gap between the last card of one category and the next
   heading. Tightened just for this run of sections. */
.category-section{ padding:2.75rem 0; }
.category-heading{ display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.category-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.category-heading h2{ font-size:1.5rem; margin-bottom:0; }
.category-sub{ color:var(--ink-muted); font-size:.95rem; margin-bottom:0; }

/* Category accent colors - reused consistently for the quick-nav dot,
   the section heading dot, and (lightly) the card accent below. */
.accent-sales{ background:#2F9E5B; }
.accent-service{ background:var(--brand-blue); }
.accent-marketing{ background:#D9A125; }
.accent-operations{ background:#1E7A6E; }
.accent-finance{ background:#D64550; }
.accent-research{ background:#6B4FBB; }
.accent-neutral{ background:#9CA3AF; }

/* ---------- Standardized bot card (name + one sentence + outcome) ---------- */
.bot-card{
  background:#fff;
  border:1px solid #E7EBF2;
  border-left:3px solid transparent;
  border-radius:14px;
  padding:1.5rem 1.7rem;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bot-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(16,30,54,0.08);
}
.bot-card.accent-sales{ border-left-color:#2F9E5B; }
.bot-card.accent-service{ border-left-color:var(--brand-blue); }
.bot-card.accent-marketing{ border-left-color:#D9A125; }
.bot-card.accent-operations{ border-left-color:#1E7A6E; }
.bot-card.accent-finance{ border-left-color:#D64550; }
.bot-card.accent-research{ border-left-color:#6B4FBB; }
.bot-card.accent-neutral{ border-left-color:#9CA3AF; }
.bot-card h3{ font-size:1.1rem; margin-bottom:.7rem; }
.bot-does{
  font-size:.92rem;
  color:var(--ink-muted);
  line-height:1.55;
  margin-bottom:.6rem;
}
.bot-outcome{ font-size:.88rem; color:var(--ink); margin-bottom:0; line-height:1.5; }
.bot-outcome strong{ color:var(--brand-blue); font-weight:700; }

/* ---------- Top 5 highlight ---------- */
.top-five-band{
  background:linear-gradient(155deg, #0B1526 0%, #10233F 100%);
  color:var(--text-light);
  border-radius:24px;
  padding:3rem 2.5rem;
}
.top-five-list{ counter-reset:top-five; list-style:none; padding-left:0; margin-bottom:1.5rem; }
.top-five-list li{
  counter-increment:top-five;
  position:relative;
  padding-left:2.6rem;
  margin-bottom:1rem;
  font-weight:600;
  font-size:1.05rem;
  color:#fff;
}
.top-five-list li span{
  display:block;
  font-weight:400;
  font-size:.88rem;
  color:var(--text-muted);
  margin-top:.15rem;
}
.top-five-list li::before{
  content:counter(top-five);
  position:absolute; left:0; top:-.1rem;
  width:32px; height:32px;
  border-radius:50%;
  border:2px solid var(--accent-2);
  color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}

/* ---------- Live activity table status rows ---------- */
/* border-left renders fine directly on <tr> (Bootstrap tables use
   border-collapse: collapse, which lets row borders paint). But a
   <tr>'s background-color does NOT reliably show through its <td>
   children in real table layout - only in the mobile stacked-card
   view below, where display:block turns tr/td into normal boxes.
   Bootstrap's own striping avoids relying on this too (it uses an
   inset box-shadow on the cells instead of a tr background), which
   is the same tell. So the tint goes on both: the tr (for the
   mobile card case) and each td, scoped by #liveRunsTable so it
   outranks Bootstrap's own ".table > :not(caption) > * > *" rule
   (for the real desktop table case). */
#liveRunsTable tbody tr.status-row-success{ background-color:#E7F3EC; border-left:4px solid #2F9E5B; }
#liveRunsTable tbody tr.status-row-success td{ background-color:#E7F3EC; }
#liveRunsTable tbody tr.status-row-failed{ background-color:#E5E9EE; border-left:4px solid #4B5563; }
#liveRunsTable tbody tr.status-row-failed td{ background-color:#E5E9EE; }
#liveRunsTable tbody tr.status-row-pending{ background-color:#E7F3F1; border-left:4px solid #1E7A6E; }
#liveRunsTable tbody tr.status-row-pending td{ background-color:#E7F3F1; }
#liveRunsTable tbody tr.status-row-running{ background-color:#EAF1FC; border-left:4px solid #3E6BAE; }
#liveRunsTable tbody tr.status-row-running td{ background-color:#EAF1FC; }
#liveRunsTable tbody tr.status-row-neutral{ background-color:#F1F2F4; border-left:4px solid #9CA3AF; }
#liveRunsTable tbody tr.status-row-neutral td{ background-color:#F1F2F4; }

/* Solid rounded pill for the status label itself, inside the tinted row. */
.status-pill{
  display:inline-block;
  padding:.3rem .75rem;
  border-radius:999px;
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}
.status-pill-success{ background-color:#2F9E5B; }
.status-pill-failed{ background-color:#4B5563; }
.status-pill-pending{ background-color:#1E7A6E; }
.status-pill-running{ background-color:#3E6BAE; }
.status-pill-neutral{ background-color:#9CA3AF; }

/* Table text was rendering at the full 1rem body size, which felt
   large for a dense 5-column table - sized down on tablet/desktop
   only; the mobile stacked-card view keeps its own sizing below. */
@media (min-width: 768px){
  #liveRunsTable{ font-size:.9rem; }
}

/* ---------- "What You'll See" framing list (demos.html) ---------- */
.see-list{
  list-style:none;
  padding-left:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem 1.5rem;
  margin-bottom:0;
}
.see-list li{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1rem;
  color:var(--ink);
  font-weight:500;
}
.see-list li i{ color:var(--brand-line); font-size:1.1rem; flex-shrink:0; }
@media (max-width:575.98px){
  .see-list{ grid-template-columns:1fr; }
}

/* ---------- Video / demo cards ---------- */
.video-card{
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:16px;
  overflow:hidden;
  height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(16,30,54,0.08);
}
.video-frame{
  position:relative;
  background:linear-gradient(160deg, #0E1C33, #16294A);
}
.video-frame .placeholder-note{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  color:var(--text-muted);
  text-align:center;
  padding:1rem;
}
.video-frame .placeholder-note i{ font-size:2.2rem; color:var(--accent-2); }
.video-frame .placeholder-note span{ font-size:.85rem; }
.video-frame video{ width:100%; height:100%; object-fit:cover; background:#000; }
.video-card .video-body{ padding:1.5rem 1.6rem; }
.video-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.video-tag{
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.02em;
  padding:.3rem .7rem;
}
.video-tag.tag-blue{ background:#EEF2F9; border:1px solid #D7E0EF; color:var(--brand-blue); }
.video-tag.tag-teal{ background:#E7F3F1; border:1px solid #CFE6E1; color:#1E7A6E; }
.video-tag.tag-amber{ background:#F3EFE3; border:1px solid #E5DCC2; color:#8A6D1D; }
.video-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.video-card p{ color:var(--ink-muted); font-size:.92rem; line-height:1.6; margin-bottom:.9rem; }
.video-card p:last-of-type{ margin-bottom:0; }
.video-original-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600;
  color:var(--brand-blue); text-decoration:none;
}
.video-original-link:hover{ color:var(--accent-2); text-decoration:underline; }
.video-original-link i{ font-size:.78rem; }

/* ---------- Tweet / community cards ---------- */
.tweet-card{
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:16px;
  padding:1.5rem;
  height:100%;
}
.tweet-card .tweet-head{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem;
}
.tweet-card .tweet-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--brand-blue), var(--brand-line));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; flex-shrink:0;
}
.tweet-card .tweet-name{ font-weight:600; font-size:.95rem; color:var(--ink); }
.tweet-card .tweet-handle{ color:var(--ink-muted); font-size:.85rem; }
.tweet-card .tweet-body{ color:var(--ink); font-size:.95rem; line-height:1.55; margin-bottom:.9rem; }
.tweet-card .tweet-meta{ color:var(--ink-muted); font-size:.8rem; border-top:1px solid #EEF1F6; padding-top:.75rem; }
.tweet-placeholder-note{
  background:#EEF2F9;
  border:1px dashed #C6D4E8;
  color:var(--brand-blue);
  border-radius:12px;
  padding:1rem 1.25rem;
  font-size:.88rem;
  line-height:1.5;
}

/* ---------- Contact page ---------- */
.contact-card{
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:20px;
  padding:2.5rem;
}
.contact-info-item{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid #EEF1F6;
}
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .icon{
  width:44px; height:44px; flex-shrink:0;
  border-radius:10px;
  background:#EEF2F9;
  color:var(--brand-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.contact-info-item h4{ font-size:.95rem; margin-bottom:.2rem; }
.contact-info-item a, .contact-info-item span{ color:var(--ink-muted); font-size:.92rem; text-decoration:none; }
.contact-info-item a:hover{ color:var(--brand-blue); }

/* ---------- Process (light section, reuses .service-card) ---------- */
.step-number{
  font-size:1.5rem;
  color:var(--brand-line);
  font-weight:800;
  margin-right:.5rem;
}

/* ---------- Scale statement banner ---------- */
.scale-band{
  background:linear-gradient(155deg, #0B1526 0%, #10233F 100%);
  padding:3.5rem 0;
}
.scale-statement{
  color:#fff;
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:1.25rem;
}
.scale-sub{
  color:var(--text-muted);
  font-size:1.2rem;
  line-height:1.6;
  max-width:680px;
  margin:0 auto 2rem;
}
.scale-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
.scale-badge{
  display:inline-block;
  background:rgba(127,163,216,0.12);
  border:1px solid rgba(127,163,216,0.32);
  color:var(--accent-2);
  font-weight:600;
  font-size:.9rem;
  padding:.55rem 1.15rem;
  border-radius:999px;
}

/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(135deg, var(--brand-blue), var(--navy-deep) 120%);
  border-radius:24px;
  padding:3.5rem 2.5rem;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.75rem; color:#fff; }
.cta-band p{ color:var(--text-muted); max-width:480px; margin-bottom:0; }

/* ---------- Agent Web teaser (soft link to Agent-Ranking) ---------- */
/* Deliberately distinct from .cta-band above - light card instead of a
   dark gradient - so this secondary offer never competes visually with
   the primary "Get In Touch" CTA that follows it. */
.agent-web-band{
  background:#fff;
  border:1px solid #E7EBF2;
  border-left:4px solid #198754;
  border-radius:24px;
  padding:4.5rem 3rem;
  box-shadow:0 20px 45px rgba(16,30,54,0.06);
}
.agent-web-label{
  display:inline-block;
  color:#198754;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  margin-bottom:.75rem;
}
.agent-web-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:1rem; color:var(--ink); }
.agent-web-band p{ color:var(--ink-muted); line-height:1.6; margin-bottom:1rem; }
.agent-web-emphasis{ color:var(--ink); font-weight:600; margin-bottom:0; }

/* ---------- Footer ---------- */
footer{
  background:var(--navy-deep);
  color:var(--text-muted);
  padding:3.5rem 0 1.75rem;
}
footer .footer-brand{
  display:flex; align-items:center; gap:.6rem;
  color:#fff; font-weight:700; font-size:1.2rem; margin-bottom:.9rem;
}
footer .footer-brand img{ height:30px; max-width:100%; }
footer .footer-brand .brand-word{ white-space:nowrap; }
footer p.footer-desc{ max-width:320px; font-size:.92rem; line-height:1.6; }
footer h6{ color:#fff; font-weight:600; font-size:.85rem; letter-spacing:.03em; margin-bottom:1rem; }
footer a.footer-link{ color:var(--text-muted); text-decoration:none; font-size:.92rem; display:block; margin-bottom:.6rem; transition:color .15s ease; }
footer a.footer-link:hover{ color:#fff; }
footer .footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); margin-top:2.5rem; padding-top:1.5rem; font-size:.82rem; }
footer .social-links{ display:flex; gap:.7rem; }
footer .social-links a{
  width:38px; height:38px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-light);
  font-size:1.05rem;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
footer .social-links a:hover{
  background:rgba(127,163,216,0.16);
  border-color:rgba(127,163,216,0.5);
  color:#fff;
  transform:translateY(-2px);
}

/* ---------- Global responsive images ---------- */
img{ max-width:100%; height:auto; }

@media (max-width: 767.98px){
  .hero{ padding-bottom:2.5rem; }
  .agent-web-band{ padding:2.75rem 1.75rem; }

  /* "Bots, actually running" live activity table becomes stacked
     cards on small screens instead of a cramped 5-column table
     that forces horizontal scrolling. */
  #liveRunsTable thead{ display:none; }
  #liveRunsTable, #liveRunsTable tbody, #liveRunsTable tr, #liveRunsTable td{
    display:block; width:100%;
  }
  #liveRunsTable{ border:none; }
  #liveRunsTable tr{
    background:#fff;
    border:1px solid #E7EBF2;
    border-radius:14px;
    padding:.9rem 1.1rem;
    margin-bottom:.85rem;
    box-shadow:0 10px 24px rgba(16,30,54,0.05);
  }
  #liveRunsTable tr:last-child{ margin-bottom:0; }
  #liveRunsTable td{
    border:none;
    padding:.35rem 0;
  }
  #liveRunsTable td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-weight:700;
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--ink-muted);
    margin-bottom:.15rem;
  }
  #liveRunsTable td[colspan]{ text-align:center; }
  #liveRunsTable td[data-label="Summary"]{ display:none; }
}

@media (max-width: 575.98px){
  .navbar-mgb .navbar-brand img{ height:26px; }
  .navbar-mgb .navbar-brand{ font-size:1.05rem; }
  footer .footer-brand img{ height:24px; }
  footer .footer-brand{ font-size:1.05rem; }
  .about-visual img{ width:110px; }

  /* Hero's two buttons (Get Started / See bot ideas) stack full-width
     instead of sitting side by side or wrapping awkwardly. The
     container's own gutter gives the left/right breathing room. */
  .hero .d-flex.flex-wrap.gap-3{ flex-direction:column; align-items:stretch; }
  .hero .d-flex.flex-wrap.gap-3 .btn{ width:100%; }

  /* The single CTA-band button (bot-ideas.html, demos.html, index.html
     closing sections) goes full-width and centers instead of sitting
     right-aligned per text-lg-end, which only applies at lg+. */
  .cta-band .col-lg-5 a.btn, .agent-web-band .col-lg-4 a.btn{ display:block; width:100%; text-align:center; }
}