@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --ink:#0E1420;
    --panel:#161F32;
    --panel-line:#28334C;
    --amber:#F2A93B;
    --cyan:#5EEAD4;
    --muted:#8792A8;
    --text:#E8ECF3;
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'Inter', sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--amber); color:var(--ink); }

  :focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
  }

  .skip-link{
    position:absolute;
    left:16px;
    top:-60px;
    background:var(--amber);
    color:var(--ink);
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    padding:10px 16px;
    border-radius:4px;
    z-index:100;
    transition:top 0.15s ease;
  }
  .skip-link:focus{
    top:16px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(14,20,32,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-line);
  }
  nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
  }
  .logo{
    font-family:var(--mono);
    font-weight:600;
    font-size:18px;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .logo::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 8px var(--amber);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.35; }
  }
  .nav-links{
    display:flex;
    gap:36px;
    font-size:14px;
    color:var(--muted);
  }
  .nav-links a:hover{ color:var(--text); }
  .nav-cta{
    font-family:var(--mono);
    font-size:13px;
    padding:9px 18px;
    border:1px solid var(--panel-line);
    border-radius:4px;
    color:var(--text);
  }
  .nav-cta:hover{ border-color:var(--cyan); color:var(--cyan); }
  .nav-mid{ display:flex; align-items:center; gap:36px; }

  @media (max-width:720px){
    .nav-links{ display:none; }
  }

  /* ---------- HERO ---------- */
  header.hero{
    padding:96px 0 64px;
    border-bottom:1px solid var(--panel-line);
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:64px;
    align-items:start;
  }
  @media (max-width:960px){
    .hero-grid{ grid-template-columns:1fr; }
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }
  .eyebrow::before{
    content:'';
    width:24px;
    height:1px;
    background:var(--cyan);
  }

  h1{
    font-family:var(--sans);
    font-weight:700;
    font-size:clamp(36px, 5vw, 58px);
    line-height:1.06;
    letter-spacing:-0.02em;
    margin-bottom:24px;
  }
  h1 em{
    font-style:normal;
    color:var(--amber);
  }

  .hero p.lede{
    font-size:18px;
    color:var(--muted);
    max-width:46ch;
    margin-bottom:36px;
  }

  .cta-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

  .btn-primary{
    font-family:var(--mono);
    font-size:14px;
    font-weight:500;
    background:var(--amber);
    color:var(--ink);
    padding:14px 24px;
    border-radius:4px;
    display:inline-block;
    transition:transform 0.15s ease;
  }
  .btn-primary:hover{ transform:translateY(-1px); }

  .btn-ghost{
    font-family:var(--mono);
    font-size:14px;
    color:var(--muted);
    padding:14px 8px;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-ghost:hover{ color:var(--text); }

  /* ---------- LIVE LOG (signature element) ---------- */
  .console{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:8px;
    overflow:hidden;
  }
  .console-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--panel-line);
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
  }
  .console-head .live{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--cyan);
  }
  .live-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cyan);
    animation:pulse 1.6s ease-in-out infinite;
  }
  .console-body{
    height:340px;
    overflow:hidden;
    position:relative;
    font-family:var(--mono);
    font-size:12.5px;
  }
  .console-body::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 70%, var(--panel) 100%);
    pointer-events:none;
  }
  .log-line{
    display:flex;
    gap:12px;
    padding:9px 16px;
    border-bottom:1px solid rgba(40,51,76,0.5);
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .log-line .ts{ color:#4E5A72; flex-shrink:0; }
  .log-line .agent{ color:var(--cyan); flex-shrink:0; }
  .log-line .status{ margin-left:auto; flex-shrink:0; }
  .log-line .status.done{ color:var(--cyan); }
  .log-line .status.flag{ color:var(--amber); }
  .log-line .status.working{ color:var(--muted); }

  @media (prefers-reduced-motion: reduce){
    .live-dot, .logo::before{ animation:none; }
  }

  /* ---------- LOGOS / TRUST ---------- */
  .trust{
    padding:40px 0;
    border-bottom:1px solid var(--panel-line);
  }
  .trust .wrap{
    display:flex;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
  }
  .trust-label{
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .trust-names{
    display:flex;
    gap:36px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:14px;
    color:#4E5A72;
  }

  /* ---------- SECTIONS ---------- */
  section{ padding:88px 0; border-bottom:1px solid var(--panel-line); }

  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-tag{
    font-family:var(--mono);
    font-size:12px;
    color:var(--amber);
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:14px;
  }
  h2{
    font-size:clamp(26px, 3.5vw, 36px);
    font-weight:700;
    letter-spacing:-0.01em;
    margin-bottom:16px;
  }
  .section-head p{ color:var(--muted); font-size:16px; }

  /* Roles grid */
  .roles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:1px;
    background:var(--panel-line);
    border:1px solid var(--panel-line);
    border-radius:8px;
    overflow:hidden;
  }

  .role-card{
    background:var(--ink);
    padding:32px;
  }
  .role-card .role-tag{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:16px;
  }
  .role-card h3{
    font-size:19px;
    font-weight:600;
    margin-bottom:10px;
  }
  .role-card p{
    color:var(--muted);
    font-size:14.5px;
    margin-bottom:20px;
  }
  .role-card .metric{
    font-family:var(--mono);
    font-size:13px;
    color:var(--cyan);
    border-top:1px solid var(--panel-line);
    padding-top:16px;
  }

  /* Handoff / how it works */
  .handoff{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
  @media (max-width:900px){ .handoff{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .handoff{ grid-template-columns:1fr; } }

  .handoff-step{
    padding:24px 0 0;
    border-top:2px solid var(--panel-line);
    position:relative;
  }
  .handoff-step.active{ border-top-color:var(--amber); }
  .handoff-step .step-label{
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    margin-bottom:12px;
  }
  .handoff-step.active .step-label{ color:var(--amber); }
  .handoff-step h4{ font-size:16px; font-weight:600; margin-bottom:8px; }
  .handoff-step p{ font-size:14px; color:var(--muted); }

  /* Escalation callout */
  .callout{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-left:3px solid var(--amber);
    border-radius:6px;
    padding:24px 28px;
    margin-top:48px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .callout .icon{
    font-family:var(--mono);
    color:var(--amber);
    font-size:13px;
    flex-shrink:0;
    margin-top:2px;
  }
  .callout p{ color:var(--muted); font-size:14.5px; }
  .callout strong{ color:var(--text); }

  /* Global reach strip */
  .global-strip{
    padding:56px 0;
    border-bottom:1px solid var(--panel-line);
  }
  .global-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
  }
  @media (max-width:720px){ .global-grid{ grid-template-columns:1fr; } }
  .global-stat{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .global-stat .num{
    font-family:var(--mono);
    font-size:28px;
    font-weight:600;
    color:var(--amber);
    flex-shrink:0;
    line-height:1;
  }
  .global-stat .label{
    font-size:14px;
    color:var(--muted);
    padding-top:2px;
  }
  .global-stat .label strong{ color:var(--text); display:block; font-size:15px; margin-bottom:2px; }

  /* Pricing */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }

  .plan{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:8px;
    padding:32px;
    display:flex;
    flex-direction:column;
  }
  .plan.featured{
    border-color:var(--amber);
    position:relative;
  }
  .plan.featured::before{
    content:'Most deployed';
    position:absolute;
    top:-12px;
    left:32px;
    background:var(--amber);
    color:var(--ink);
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:3px;
    letter-spacing:0.04em;
  }
  .plan-name{
    font-family:var(--mono);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin-bottom:16px;
  }
  .plan-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:8px;
  }
  .plan-price .amount{
    font-family:var(--sans);
    font-size:38px;
    font-weight:700;
  }
  .plan-price .period{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
  }
  .plan-desc{
    font-size:14px;
    color:var(--muted);
    margin-bottom:24px;
    padding-bottom:24px;
    border-bottom:1px solid var(--panel-line);
  }
  .plan-features{
    list-style:none;
    margin-bottom:28px;
    flex-grow:1;
  }
  .plan-features li{
    font-size:14px;
    color:var(--text);
    padding:8px 0;
    display:flex;
    gap:10px;
  }
  .plan-features li::before{
    content:'—';
    color:var(--cyan);
    flex-shrink:0;
  }
  .plan-cta{
    font-family:var(--mono);
    font-size:13px;
    text-align:center;
    padding:12px;
    border-radius:4px;
    border:1px solid var(--panel-line);
  }
  .plan.featured .plan-cta{
    background:var(--amber);
    color:var(--ink);
    border-color:var(--amber);
    font-weight:500;
  }
  .plan:not(.featured) .plan-cta:hover{ border-color:var(--cyan); color:var(--cyan); }

  .pricing-note{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    margin-top:32px;
    text-align:center;
  }

  /* CTA band */
  .cta-band{
    text-align:center;
    padding:96px 32px;
  }
  .cta-band h2{ margin-bottom:16px; }
  .cta-band p{ color:var(--muted); margin-bottom:36px; max-width:52ch; margin-left:auto; margin-right:auto; }

  /* Footer */
  footer{ padding:48px 0; }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  footer .fine{ font-family:var(--mono); font-size:12px; color:var(--muted); }