:root{
    --ink:#FFFFFF;
    --ink-2:#F3F4EF;
    --ink-3:#E8EAE2;
    --paper:#0E1F2B;
    --paper-2:#1B3A4E;
    --amber:#F2A93B;
    --amber-dim:#92400E;
    --teal:#0F766E;
    --muted:#5B6670;
    --line: rgba(14,31,43,0.12);
    --radius: 3px;

    /* dedicated dark palette for the hero's live-log terminal only */
    --term-bg:#132A3A;
    --term-bg-2:#1B3A4E;
    --term-text:#ECEEE8;
    --term-muted:#8FA1A8;
    --term-line: rgba(236,238,232,0.12);
    --term-teal:#4FA8A0;
    --term-amber:#F2A93B;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--paper);
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media (max-width:700px){ .wrap{padding:0 20px;} }

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:1.15rem;
    color:var(--paper);
  }
  .logo .dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 3px rgba(242,169,59,0.22);
  }
  .navlinks{display:flex; gap:34px; align-items:center;}
  .navlinks a{
    font-size:0.92rem; color:var(--muted); text-decoration:none;
    transition:color .15s ease;
  }
  .navlinks a:hover{color:var(--paper);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    padding:10px 18px;
    border-radius:var(--radius);
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:all .15s ease;
  }
  .btn-primary{ background:var(--amber); color:var(--paper); font-weight:500; }
  .btn-primary:hover{ background:#ffbe5c; }
  .btn-ghost{ border-color:var(--line); color:var(--paper); background:transparent; }
  .btn-ghost:hover{ border-color:var(--muted); }
  .navcta{display:flex; gap:12px; align-items:center;}
  .menu-toggle{
    display:none;
    width:38px; height:38px;
    align-items:center; justify-content:center;
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--paper);
    font-size:1rem;
    cursor:pointer;
  }
  .menu-toggle:hover{ border-color:var(--muted); }
  @media (max-width:820px){
    nav{ position:relative; }
    .navlinks{ display:none; }
    .navlinks.open{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--ink-2);
      border-bottom:1px solid var(--line);
      padding:6px 0 12px;
    }
    .navlinks.open a{
      padding:13px 4px;
      border-bottom:1px solid var(--line);
    }
    .navcta .btn-ghost{ display:none; }
    .menu-toggle{ display:inline-flex; }
  }

  /* ---------- hero ---------- */
  .hero{
    padding:100px 0 70px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(15,118,110,0.08), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(242,169,59,0.10), transparent 60%);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  }
  @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.12em;
    display:flex; align-items:center; gap:10px;
    margin-bottom:20px;
  }
  .eyebrow::before{
    content:''; width:22px; height:1px; background:var(--teal);
  }
  h1{
    font-size:clamp(2.3rem, 4.6vw, 3.4rem);
    line-height:1.06;
    margin-bottom:22px;
  }
  h1 em{
    font-style:normal;
    color:var(--amber-dim);
  }
  .hero-sub{
    color:var(--muted);
    font-size:1.08rem;
    max-width:520px;
    margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:14px; margin-bottom:38px;}
  .hero-note{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    color:var(--muted);
  }

  /* signature: live agent log panel — intentionally kept dark, like a real terminal */
  .terminal{
    background:var(--term-bg);
    border:1px solid var(--term-line);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.35);
  }
  .term-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--term-line);
    background:var(--term-bg-2);
  }
  .term-dots{display:flex; gap:6px;}
  .term-dots span{width:8px; height:8px; border-radius:50%; background:rgba(236,238,232,0.18);}
  .term-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    color:var(--term-muted);
  }
  .term-status{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    color:var(--term-teal);
    display:flex; align-items:center; gap:6px;
  }
  .term-status .pulse{
    width:6px; height:6px; border-radius:50%; background:var(--term-teal);
    animation:pulse 1.6s infinite ease-in-out;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }
  .term-body{
    padding:20px 18px 22px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    min-height:300px;
  }
  .term-line{
    display:flex; gap:12px;
    padding:6px 0;
    opacity:0;
    animation:reveal .4s forwards;
  }
  .term-line .t{ color:var(--term-muted); flex-shrink:0; width:64px;}
  .term-line .msg{color:var(--term-text);}
  .term-line.ok .msg::before{ content:'✓  '; color:var(--term-teal); }
  .term-line.heal{ background:rgba(242,169,59,0.08); border-left:2px solid var(--term-amber); padding-left:10px; margin-left:-12px;}
  .term-line.heal .msg::before{ content:'⚠ self-healing —  '; color:var(--term-amber); }
  .term-line.info .msg{color:var(--term-muted);}
  @keyframes reveal{ to{opacity:1;} }
  .term-cursor{ display:inline-block; width:6px; height:13px; background:var(--term-amber); vertical-align:middle; animation:blink 1s steps(1) infinite;}
  @keyframes blink{ 50%{opacity:0;} }

  /* ---------- stat strip ---------- */
  .stats{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--ink-2);
  }
  .stats-row{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:34px 0;
  }
  @media (max-width:760px){ .stats-row{grid-template-columns:repeat(2,1fr); row-gap:28px;} }
  .stat{ text-align:left; padding-right:20px; }
  .stat .num{
    font-family:'Space Grotesk', sans-serif;
    font-size:2rem; font-weight:700; color:var(--amber-dim);
  }
  .stat .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem; color:var(--muted); margin-top:6px;
  }

  /* ---------- sections ---------- */
  section{padding:96px 0;}
  .section-head{
    max-width:640px; margin-bottom:56px;
  }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px; }
  .section-head p{ color:var(--muted); font-size:1.02rem; }
  .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.1em;
    margin-bottom:14px; display:block;
  }

  /* agent cards */
  .agent-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:8px; overflow:hidden;
  }
  @media (max-width:560px){ .agent-grid{grid-template-columns:1fr;} }
  .agent-card{
    background:var(--ink);
    padding:34px 28px;
  }
  .agent-card .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; color:var(--amber-dim);
    margin-bottom:16px; display:block;
  }
  .agent-card h3{ font-size:1.2rem; margin-bottom:12px;}
  .agent-card p{ color:var(--muted); font-size:0.94rem; }

  /* heal flow diagram */
  .flow{
    display:flex; align-items:stretch; gap:0;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:36px 28px;
    overflow-x:auto;
  }
  .flow-step{
    flex:1; min-width:170px;
    position:relative;
    padding:0 22px;
    text-align:left;
  }
  .flow-step:not(:last-child)::after{
    content:'';
    position:absolute; top:16px; right:-1px; width:100%; height:1px;
    background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  }
  .flow-step .n{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; color:var(--muted);
    display:block; margin-bottom:14px;
  }
  .flow-step h4{ font-size:1rem; margin-bottom:8px; color:var(--paper); font-family:'Space Grotesk'; font-weight:600;}
  .flow-step p{ font-size:0.86rem; color:var(--muted); }
  .flow-step.heal .n{ color:var(--amber-dim); }
  .flow-step.heal{ background:rgba(242,169,59,0.08); border-radius:6px; }

  /* two-col feature rows */
  .feature-row{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
    padding:64px 0;
    border-top:1px solid var(--line);
  }
  .feature-row:last-child{border-bottom:1px solid var(--line);}
  @media (max-width:860px){ .feature-row{grid-template-columns:1fr; gap:32px;} }
  .feature-row.reverse .fr-visual{order:2;}
  @media (max-width:860px){ .feature-row.reverse .fr-visual{order:0;} }
  .fr-text h3{ font-size:1.5rem; margin-bottom:14px; }
  .fr-text p{ color:var(--muted); margin-bottom:18px; }
  .fr-list{ list-style:none; }
  .fr-list li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:0.92rem; color:var(--paper); margin-bottom:10px;
  }
  .fr-list li::before{
    content:'—'; color:var(--teal); flex-shrink:0;
  }
  .fr-visual{
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:26px;
    min-height:220px;
  }
  .fr-visual .cap{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--muted);
    margin-bottom:16px; text-transform:uppercase; letter-spacing:0.08em;
  }

  /* recorder visual */
  .rec-row{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:5px; margin-bottom:8px; background:var(--ink-3); font-family:'IBM Plex Mono', monospace; font-size:0.8rem;}
  .rec-row .badge{ background:var(--teal); color:var(--ink); font-size:0.65rem; padding:2px 7px; border-radius:3px; font-weight:600;}
  .rec-arrow{ text-align:center; color:var(--muted); font-family:'IBM Plex Mono'; font-size:0.9rem; margin:10px 0;}
  .rec-prompt{ background:var(--ink); border:1px dashed var(--amber-dim); border-radius:5px; padding:14px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--amber-dim);}

  /* device farm visual */
  .farm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .farm-node{ aspect-ratio:1; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--muted); background:var(--ink);}
  .farm-node.on{ border-color:var(--teal); color:var(--teal); }
  .farm-node.on::before{ content:'●'; margin-right:4px; font-size:0.6rem; }

  /* perf visual */
  .perf-wave{ height:120px; position:relative; }
  .perf-wave svg{ width:100%; height:100%; }

  /* a11y visual */
  .a11y-list{ list-style:none; }
  .a11y-list li{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.86rem;}
  .a11y-pass{ color:var(--teal); font-family:'IBM Plex Mono', monospace; font-size:0.72rem;}
  .a11y-manual{ color:var(--amber-dim); font-family:'IBM Plex Mono', monospace; font-size:0.72rem;}

  /* mcp visual */
  .mcp-tools{ display:flex; flex-wrap:wrap; gap:8px; }
  .mcp-tools span{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; padding:6px 10px; border:1px solid var(--line); border-radius:4px; color:var(--paper);}

  /* cta */
  .cta{
    background:linear-gradient(180deg, var(--ink-2), var(--ink));
    border-top:1px solid var(--line);
    text-align:left;
    padding:100px 0;
  }
  .cta-inner{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
  }
  .cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:560px; }
  .cta p{ color:var(--muted); margin-top:14px; max-width:480px; }

  footer{
    border-top:1px solid var(--line);
    padding:36px 0;
  }
  .foot-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  .foot-row .mono{ font-size:0.78rem; color:var(--muted); }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

/* ---------- shared additions for sub-pages ---------- */
.navlinks a.active{ color:var(--paper); }
.navlinks a.active::after{ content:''; }

.subhero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 800px 420px at 10% -20%, rgba(15,118,110,0.07), transparent 60%);
}
.crumb{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  color:var(--muted);
  margin-bottom:22px;
}
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--teal); }
.subhero h1{ font-size:clamp(2rem, 4vw, 2.9rem); max-width:760px; }
.subhero .hero-sub{ max-width:620px; }

.pagenav{
  display:flex; gap:0; border-bottom:1px solid var(--line); overflow-x:auto;
}
.pagenav a{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  color:var(--muted); text-decoration:none;
  padding:18px 22px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:all .15s ease;
}
.pagenav a:hover{ color:var(--paper); }
.pagenav a.active{ color:var(--amber-dim); border-bottom-color:var(--amber-dim); }

.table{
  width:100%; border-collapse:collapse;
  font-size:0.9rem;
}
.table th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.table td{
  padding:16px; border-bottom:1px solid var(--line); color:var(--paper); vertical-align:top;
}
.table td.mono-cell{ font-family:'IBM Plex Mono', monospace; color:var(--amber-dim); font-size:0.85rem; white-space:nowrap;}
.table tr:last-child td{ border-bottom:none; }

.card-plain{
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:28px;
}
.pill{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  border:1px solid var(--line); border-radius:20px; padding:5px 12px; color:var(--muted); margin:0 8px 8px 0;
}
.pill.on{ border-color:var(--teal); color:var(--teal); }

.split-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:760px){ .split-cols{grid-template-columns:1fr;} }

.next-links{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
@media (max-width:760px){ .next-links{grid-template-columns:1fr;} }
.next-links a{
  display:block; background:var(--ink); padding:26px 24px; text-decoration:none;
  transition:background .15s ease;
}
.next-links a:hover{ background:var(--ink-2); }
.next-links .nl-kicker{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; display:block;}
.next-links h4{ font-family:'Space Grotesk'; font-size:1.05rem; color:var(--paper); margin-bottom:6px; }
.next-links p{ font-size:0.86rem; color:var(--muted); }