:root{
    --navy:#1e2142; --navy-2:#2a2e58; --navy-ink:#f3f4fa;
    --green:#007a33; --green-hover:#006128; --green-tint:#e6f3ea; --green-ink:#ffffff;
    --ground:#f5f7f8; --surface:#ffffff; --surface-2:#eef1f4;
    --ink:#1b1d2b; --body:#3f4353; --muted:#646a7c; --line:#dde1e7; --line-strong:#c6ccd6;
    --shadow:0 1px 2px rgba(30,33,66,.06), 0 14px 34px -20px rgba(30,33,66,.35);
    --maxw:1180px;
    --f-body:'Open Sans',"Segoe UI",Helvetica,Arial,sans-serif;
    --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --navy:#0f1128; --navy-2:#1b1e3f; --navy-ink:#f3f4fa;
      --green:#2fb862; --green-hover:#46cc77; --green-tint:#14301e; --green-ink:#08140c;
      --ground:#14162b; --surface:#1c1f3a; --surface-2:#23264a;
      --ink:#eef0f6; --body:#c5c9d8; --muted:#8f95a8; --line:#2f3358; --line-strong:#41467a;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --navy:#0f1128; --navy-2:#1b1e3f; --navy-ink:#f3f4fa;
    --green:#2fb862; --green-hover:#46cc77; --green-tint:#14301e; --green-ink:#08140c;
    --ground:#14162b; --surface:#1c1f3a; --surface-2:#23264a;
    --ink:#eef0f6; --body:#c5c9d8; --muted:#8f95a8; --line:#2f3358; --line-strong:#41467a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
  a{color:inherit; text-decoration:none}
  h1,h2,h3,h4{margin:0; line-height:1.15; text-wrap:balance; letter-spacing:-.015em}
  h1{font-weight:800} h2{font-weight:800} h3{font-weight:700}
  p{margin:0}
  img{max-width:100%; display:block}
  .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}
  .mono{font-family:var(--f-mono)}
  .eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:500}
  .eyebrow.mut{color:var(--muted)}
  :focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}

  /* buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-body); font-weight:700; font-size:15px; padding:12px 22px; border-radius:6px; border:1.5px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; white-space:nowrap}
  .btn-green{background:var(--green); color:var(--green-ink)}
  .btn-green:hover{background:var(--green-hover)}
  .btn-outline{border-color:var(--line-strong); color:var(--ink); background:transparent}
  .btn-outline:hover{border-color:var(--ink)}
  .btn-white{background:var(--surface); color:var(--navy); border-color:transparent}
  .btn-white:hover{background:var(--surface-2)}
  .btn-sm{padding:8px 14px; font-size:13.5px}

  /* utility bar */
  .util{background:var(--navy); color:var(--navy-ink); font-size:13px}
  .util .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px}
  .util a{opacity:.9} .util a:hover{opacity:1; text-decoration:underline}
  .util .l{display:flex; gap:22px}
  .util .r{display:flex; gap:18px; align-items:center}

  /* nav */
  header.nav{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex; align-items:center; gap:20px; height:70px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
  .brand .mark{display:inline-grid; grid-auto-flow:column; gap:2px}
  .brand .mark i{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-style:normal; font-size:12px; font-weight:800}
  .brand .mark i:nth-child(2){background:var(--green)}
  nav.main{display:flex; gap:16px; min-width:0}
  nav.main a{white-space:nowrap; font-size:14.5px; font-weight:600; color:var(--body); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
  nav.main a:hover{color:var(--ink); border-color:var(--green)}
  .nav .spacer{flex:1}
  .icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:6px; border:1.5px solid var(--line-strong); background:transparent; color:var(--body); cursor:pointer; font-size:16px}
  .icon-btn:hover{color:var(--ink); border-color:var(--ink)}
  .hide-md{display:inline-flex}

  /* hero */
  .hero{padding-block:64px 56px; background:linear-gradient(180deg, var(--surface) 0%, var(--ground) 100%)}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .hero h1{font-size:clamp(36px,5vw,58px); margin-top:16px; color:var(--ink)}
  .hero h1 em{font-style:normal; color:var(--green)}
  .lede{margin-top:20px; font-size:19px; line-height:1.55; color:var(--body); max-width:36ch}
  .cta-row{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
  .proof{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap}
  .proof div{display:flex; flex-direction:column; gap:2px}
  .proof b{font-size:17px; font-weight:800; color:var(--ink)}
  .proof span{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

  /* hero panel: an order moving through an agentic ERP */
  .panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
  .panel-top{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--navy); color:var(--navy-ink); font-family:var(--f-mono); font-size:12px}
  .panel-top .live{display:inline-flex; align-items:center; gap:7px}
  .panel-top .live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(0,122,51,.25)}
  .steps{padding:14px 18px 6px; display:grid; gap:10px}
  .step{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--ground)}
  .step .who{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:4px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
  .step .who.human{background:var(--navy); color:var(--navy-ink)}
  .step .who.agent{background:var(--green-tint); color:var(--green)}
  .step .t{display:block; font-weight:700; font-size:14.5px; color:var(--ink)}
  .step .s{display:block; font-size:12.5px; color:var(--muted); margin-top:1px}
  .step .st{font-family:var(--f-mono); font-size:11.5px; color:var(--green); white-space:nowrap}
  .step .st.wait{color:var(--muted)}
  .panel-foot{display:flex; justify-content:space-between; gap:12px; padding:12px 18px 16px; font-family:var(--f-mono); font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line); margin-top:8px; flex-wrap:wrap}
  .panel-foot b{color:var(--ink); font-weight:500}

  /* featured three cards */
  .feat{padding-block:0 64px}
  .cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px 26px; display:flex; flex-direction:column; gap:12px; position:relative}
  .card.lead{border-color:var(--green); border-width:2px}
  .card .pill{position:absolute; top:-12px; left:22px; background:var(--green); color:var(--green-ink); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
  .card h3{font-size:21px}
  .card p{color:var(--body); font-size:15px}
  .card .more{margin-top:auto; padding-top:8px; color:var(--green); font-weight:700; font-size:14.5px}
  .card .more::after{content:" ›"}
  .ico{width:44px; height:44px; border-radius:10px; background:var(--green-tint); color:var(--green); display:grid; place-items:center}
  .ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

  /* section frame */
  section.band{padding-block:80px}
  section.band.white{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .sec-head{max-width:64ch; margin-bottom:40px}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px}
  .sec-head p{color:var(--body); margin-top:14px; font-size:17px}

  /* manufacturing */
  .mfg-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
  .path{display:grid; gap:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
  .ph{display:grid; grid-template-columns:52px 1fr; gap:18px; padding:22px 24px; border-bottom:1px solid var(--line)}
  .ph:last-child{border-bottom:none}
  .ph .n{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; background:var(--navy); color:var(--navy-ink)}
  .ph.now .n{background:var(--green); color:var(--green-ink)}
  .ph h3{font-size:18px}
  .ph p{color:var(--body); font-size:15px; margin-top:6px}
  .ph .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
  .chip{font-family:var(--f-mono); font-size:11.5px; padding:4px 9px; border:1px solid var(--line); border-radius:4px; color:var(--muted); background:var(--ground)}
  .record{background:var(--navy); color:var(--navy-ink); border-radius:12px; padding:30px 28px}
  .record h3{font-size:20px; color:#fff}
  .record .eyebrow{color:var(--green)}
  :root[data-theme="dark"] .record .eyebrow, .record .eyebrow{color:#5fd68a}
  .record p{color:rgba(243,244,250,.78); font-size:15px; margin-top:10px}
  .prods{display:grid; gap:10px; margin-top:20px}
  .prd{display:grid; grid-template-columns:1fr auto; gap:10px; padding:14px 16px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.04)}
  .prd b{font-size:15px; color:#fff} .prd span{font-size:13px; color:rgba(243,244,250,.7); display:block; margin-top:2px}
  .prd .d{font-family:var(--f-mono); font-size:11px; color:#5fd68a; letter-spacing:.06em; align-self:start; white-space:nowrap}
  .modes{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
  .modes span{font-family:var(--f-mono); font-size:12px; padding:6px 10px; border-radius:4px; background:rgba(255,255,255,.08); color:#fff}
  .modes span b{color:#5fd68a; font-weight:500}

  /* clients */
  .clients{margin-top:48px; padding-top:32px; border-top:1px solid var(--line)}
  .clients .lab{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
  .logos{display:flex; gap:34px; align-items:center; flex-wrap:wrap}
  .logos img{height:40px; width:auto; filter:grayscale(1); opacity:.75; transition:filter .2s, opacity .2s}
  .logos img:hover{filter:none; opacity:1}
  :root[data-theme="dark"] .logos img{filter:grayscale(1) invert(1) brightness(1.4)}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logos img{filter:grayscale(1) invert(1) brightness(1.4)} }

  /* agentic thesis band */
  .thesis{background:var(--navy); color:var(--navy-ink); padding-block:84px}
  .thesis .eyebrow{color:#5fd68a}
  .thesis h2{font-size:clamp(30px,4vw,48px); color:#fff; max-width:22ch; margin-top:14px}
  .thesis .big{font-size:19px; color:rgba(243,244,250,.8); max-width:56ch; margin-top:20px}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
  .pillar{border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:26px 24px; background:rgba(255,255,255,.04)}
  .pillar .k{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#5fd68a}
  .pillar h3{font-size:20px; color:#fff; margin-top:10px}
  .pillar p{color:rgba(243,244,250,.75); font-size:15px; margin-top:8px}
  .thesis .cta-row{margin-top:40px}

  /* what we build grid */
  .grid6{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .svc{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 24px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s}
  .svc:hover{border-color:var(--green); box-shadow:var(--shadow)}
  .svc h3{font-size:18px}
  .svc p{color:var(--body); font-size:14.5px}
  .svc .ex{margin-top:auto; padding-top:8px; font-size:13.5px; color:var(--muted)}
  .svc .ex a{color:var(--green); font-weight:700}
  .svc .ex a:hover{text-decoration:underline}

  /* case study */
  .case{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .case ul{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
  .case li{display:grid; grid-template-columns:22px 1fr; gap:12px; color:var(--body); font-size:15.5px}
  .case li::before{content:""; width:22px; height:22px; border-radius:50%; background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat; margin-top:2px}
  .case li b{color:var(--ink)}
  .phones{position:relative; max-width:440px; margin:0 auto; padding-right:96px; padding-bottom:28px}
  .phone{background:#141626; border-radius:44px; padding:10px; box-shadow:var(--shadow)}
  .phone img{border-radius:34px; width:100%; height:auto; background:#000}
  .phone.main{max-width:330px}
  .phone.second{position:absolute; right:0; bottom:-24px; width:200px; border-radius:32px; padding:7px; box-shadow:0 20px 50px -18px rgba(0,0,0,.55)}
  .phone.second img{border-radius:26px}

  /* contact */
  .contact{padding-block:80px; background:var(--surface); border-top:1px solid var(--line)}
  .contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start}
  .contact h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px}
  .contact p.l{color:var(--body); margin-top:14px; font-size:17px; max-width:44ch}
  .reach{display:grid; gap:14px; margin-top:28px}
  .reach a{display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; color:var(--ink)}
  .reach a:hover{color:var(--green)}
  .reach .ico{width:38px; height:38px}
  form.f{background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:28px; display:grid; gap:16px; grid-template-columns:1fr 1fr}
  .fld{display:grid; gap:6px}
  .fld.full{grid-column:1/-1}
  .fld label{font-size:13.5px; font-weight:700; color:var(--ink)}
  .fld input,.fld select,.fld textarea{font:inherit; font-size:15px; padding:11px 12px; border:1.5px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); width:100%}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,122,51,.15)}
  .fld textarea{min-height:110px; resize:vertical}
  form.f .btn{grid-column:1/-1; justify-self:start}
  .form-note{grid-column:1/-1; font-size:12.5px; color:var(--muted)}

  /* faq */
  .faq{padding-block:72px}
  .faq .sec-head{margin-bottom:24px}
  details{border-top:1px solid var(--line); padding:0}
  details:last-of-type{border-bottom:1px solid var(--line)}
  summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 4px; font-weight:700; font-size:17px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; font-size:22px; color:var(--green); font-weight:400; flex:none}
  details[open] summary::after{content:"–"}
  details p{padding:0 4px 22px; color:var(--body); max-width:70ch}

  /* footer */
  footer{background:var(--navy); color:var(--navy-ink)}
  .foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-block:52px 28px}
  .foot .brand{color:#fff}
  .foot .brand .mark i{background:#fff; color:var(--navy)} .foot .brand .mark i:nth-child(2){background:var(--green); color:#fff}
  .foot p{color:rgba(243,244,250,.7); font-size:14px; max-width:34ch; margin-top:12px}
  .foot h4{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#5fd68a; margin:0 0 14px; font-weight:500}
  .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
  .foot ul a{font-size:14px; color:rgba(243,244,250,.82)} .foot ul a:hover{color:#fff; text-decoration:underline}
  .foot-base{border-top:1px solid rgba(255,255,255,.14); padding-block:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:rgba(243,244,250,.6)}

  @media (max-width:1200px){ .hide-md{display:none} }
  @media (max-width:960px){
    .hero-grid,.mfg-grid,.case,.contact-grid{grid-template-columns:1fr; gap:36px}
    .cards3,.grid6,.pillars{grid-template-columns:1fr 1fr}
    nav.main,.hide-md,.util .l{display:none}
    .foot{grid-template-columns:1fr 1fr}
  }
  @media (max-width:600px){
    .cards3,.grid6,.pillars,.foot{grid-template-columns:1fr}
    form.f{grid-template-columns:1fr; padding:20px}
    .fld.full{grid-column:auto}
    .step{grid-template-columns:1fr; gap:6px}
    .step .st{justify-self:start}
    .hero{padding-block:44px 40px}
    .phones{padding-right:0; padding-bottom:0}
    .phone.second{display:none}
    section.band,.thesis,.contact{padding-block:56px}
  }

  /* AI in manufacturing teaser */
  .aim{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:40px; transition:border-color .15s, box-shadow .15s}
  .aim:hover{border-color:var(--green); box-shadow:var(--shadow)}
  .aim h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px}
  .aim p.l{color:var(--body); margin-top:14px; font-size:17px; max-width:52ch}
  .aim .more{display:inline-block; margin-top:22px; color:var(--green); font-weight:700; font-size:15px}
  .aim .more::after{content:" ›"}
  .aim-sig{display:grid; gap:10px}
  .sig{display:grid; grid-template-columns:96px 1fr; gap:4px 14px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--ground)}
  .sig .k{grid-row:1/3; align-self:center; font-weight:800; font-size:14px; color:var(--ink)}
  .sig .v{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em}
  .sig .o{font-size:13.5px; color:var(--green); font-weight:600}
  .sig .o::before{content:"→ "}
  @media (max-width:960px){ .aim{grid-template-columns:1fr; padding:28px} }
  @media (max-width:600px){ .sig{grid-template-columns:1fr} .sig .k{grid-row:auto} }

  .record .integ{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14)}
  .record .integ .modes{margin-top:12px}
  .record .integ p{font-size:13.5px; margin-top:12px}