*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  min-height:100vh;
  background:#070809;
  color:#eceef2;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-0.01em;
}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:0.78em;letter-spacing:0}
.top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.35rem 4vw 0;
  max-width:1280px;
  margin:0 auto;
}
.mark{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:1.35rem;
  font-weight:500;
  text-decoration:none;
  letter-spacing:-0.03em;
}
.mail{
  font-size:0.85rem;
  color:#9aa0ab;
  text-decoration:none;
  border-bottom:1px solid #2a2e36;
}
.mail:hover{color:#eceef2;border-color:#4ce0c0}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:minmax(260px,34rem) minmax(0,1fr);
  gap:3rem 3.5rem;
  align-items:start;
  padding:4.5rem 4vw 4rem;
  max-width:1280px;
  margin:0 auto;
}
.where{
  margin:0 0 1rem;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#4ce0c0;
}
h1{
  margin:0 0 1.25rem;
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:clamp(2.05rem,4.4vw,3.15rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-0.03em;
}
.lead{
  margin:0 0 1.75rem;
  max-width:32rem;
  font-size:1.05rem;
  color:#b4bac4;
}
.cta-row{display:flex;flex-wrap:wrap;gap:0.75rem 1rem;align-items:center}
.cta{
  display:inline-block;
  padding:0.72rem 1.15rem;
  background:#4ce0c0;
  color:#06110e;
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:-0.02em;
  border-radius:4px;
}
.cta:hover{background:#6aebd0}
.cta-ghost{
  font-size:0.88rem;
  color:#9aa0ab;
  text-decoration:none;
  border-bottom:1px solid #2a2e36;
}
.cta-ghost:hover{color:#eceef2}

/* Product frames */
.stage{min-width:0;display:flex;flex-direction:column;gap:0.85rem}
.win{
  background:#101216;
  border:1px solid #262b34;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.win-bar{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.5rem 0.75rem;
  background:#0c0e12;
  border-bottom:1px solid #1e232c;
  font-size:0.72rem;
  color:#8b919c;
}
.dots{display:flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:#2a303a;display:block}
.dots i:first-child{background:#3a3333}
.win-title{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-weight:500;
  color:#c9ced6;
  letter-spacing:0;
}
.win-live{margin-left:auto;display:flex;align-items:center;gap:0.4rem;font-size:0.68rem}
.win-live b{
  width:6px;height:6px;border-radius:50%;background:#4ce0c0;
  display:inline-block;box-shadow:0 0 0 3px rgba(76,224,192,.18);
}
.win-body{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:320px}
.side{
  background:#0c0e12;
  border-right:1px solid #1e232c;
  padding:0.85rem 0.6rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-size:0.72rem;
}
.side-brand{
  margin:0 0.4rem 0.6rem;
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:0.82rem;
  color:#eceef2;
}
.nav-item{
  display:block;
  padding:0.38rem 0.5rem;
  border-radius:5px;
  color:#8b919c;
}
.nav-item.is-on{background:#171b22;color:#4ce0c0;font-weight:500}
.side-foot{
  margin-top:auto;
  display:flex;
  gap:0.45rem;
  align-items:center;
  padding:0.55rem 0.4rem 0.2rem;
  border-top:1px solid #1e232c;
}
.side-foot strong{display:block;font-size:0.72rem;font-weight:500}
.side-foot em{display:block;font-style:normal;color:#6d7380;font-size:0.64rem}
.pane{min-width:0;padding:0.7rem 0.75rem 0.5rem}
.pane-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-end;
  margin-bottom:0.65rem;
}
.pane-head h3{margin:0;font-size:0.92rem;font-weight:600;letter-spacing:-0.02em}
.pane-head p{margin:0.15rem 0 0;font-size:0.7rem;color:#8b919c}
.stats{display:flex;gap:0.85rem;font-size:0.68rem;color:#8b919c}
.stats b{color:#eceef2;font-weight:600;margin-right:0.2rem}
.filters{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.55rem;align-items:center}
.chip{
  font-size:0.65rem;
  padding:0.18rem 0.5rem;
  border:1px solid #2a303a;
  border-radius:999px;
  color:#9aa0ab;
}
.chip.is-on{border-color:#4ce0c0;color:#4ce0c0;background:rgba(76,224,192,.08)}
.search{
  margin-left:auto;
  font-size:0.65rem;
  color:#5c6370;
  border:1px solid #2a303a;
  border-radius:5px;
  padding:0.2rem 0.55rem;
  min-width:9rem;
}
.grid{
  width:100%;
  border-collapse:collapse;
  font-size:0.72rem;
}
.grid th{
  text-align:left;
  font-size:0.62rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#6d7380;
  padding:0.35rem 0.4rem;
  border-bottom:1px solid #232833;
}
.grid td{
  padding:0.42rem 0.4rem;
  border-bottom:1px solid #1a1e26;
  white-space:nowrap;
  color:#c9ced6;
}
.grid tr.is-sel td{background:rgba(76,224,192,.06);color:#eceef2}
.who{display:inline-flex;align-items:center;gap:0.4rem}
.av,.avatar{
  width:1.35rem;height:1.35rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.55rem;font-weight:600;letter-spacing:0.02em;
  background:#1d3a34;color:#4ce0c0;flex:none;
  font-style:normal;
}
.av-2{background:#243044;color:#9bb7e8}
.av-3{background:#2a2e24;color:#c5c48a}
.av-4{background:#2c2438;color:#c4b0e4}
.av-5{background:#2a2620;color:#d0b896}
.pill{
  display:inline-block;
  font-size:0.62rem;
  font-weight:500;
  padding:0.12rem 0.45rem;
  border-radius:999px;
  letter-spacing:0.01em;
}
.pill-live{background:rgba(76,224,192,.14);color:#4ce0c0}
.pill-route{background:rgba(76,224,192,.07);color:#8eead4;border:1px solid rgba(76,224,192,.25)}
.pill-wait{background:#1a1d24;color:#a0a6b3}
.pill-done{background:transparent;color:#6d7380;border:1px solid #2a303a}
.warn{color:#4ce0c0}
.dim{color:#6d7380}

/* Job detail */
.frame-row{display:grid;grid-template-columns:1.05fr 0.95fr;gap:0.85rem}
.job{padding:0.85rem 0.9rem 1rem;font-size:0.75rem}
.job-hero{display:flex;justify-content:space-between;gap:0.75rem;margin-bottom:0.85rem}
.kicker{margin:0;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:#4ce0c0;font-weight:500}
.job h3{margin:0.2rem 0 0.2rem;font-size:0.95rem;font-weight:600}
.addr{margin:0;color:#8b919c;font-size:0.7rem}
.sla{
  text-align:right;
  background:#0c0e12;
  border:1px solid #262b34;
  border-radius:8px;
  padding:0.45rem 0.65rem;
  min-width:5.5rem;
}
.sla span{display:block;font-size:0.6rem;color:#8b919c;text-transform:uppercase;letter-spacing:0.08em}
.sla strong{display:block;font-size:1.05rem;color:#4ce0c0;font-weight:500}
.assign{
  display:flex;align-items:center;gap:0.55rem;
  padding:0.55rem 0.6rem;background:#0c0e12;border:1px solid #1e232c;border-radius:8px;
  margin-bottom:0.75rem;
}
.assign strong{display:block;font-size:0.78rem}
.assign em{display:block;font-style:normal;color:#8b919c;font-size:0.65rem}
.assign .pill{margin-left:auto}
.tl{margin:0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:3.1rem 1fr;gap:0.65rem;padding:0.4rem 0;border-top:1px solid #1a1e26}
.tl li:first-child{border-top:0}
.tl strong{font-size:0.74rem;font-weight:500}
.tl p{margin:0.1rem 0 0;color:#8b919c;font-size:0.68rem}
.tl .is-now strong{color:#4ce0c0}
.parts{display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;margin-top:0.7rem;padding-top:0.65rem;border-top:1px solid #1e232c}
.parts span{font-size:0.62rem;color:#6d7380;margin-right:0.25rem;text-transform:uppercase;letter-spacing:0.06em}
.parts b{font-size:0.65rem;font-weight:500;background:#0c0e12;border:1px solid #262b34;padding:0.18rem 0.4rem;border-radius:4px}

/* Crew */
.crew{display:grid;grid-template-columns:1fr 0.9fr;min-height:280px}
.crew-list{margin:0;padding:0.35rem 0;list-style:none;border-right:1px solid #1e232c}
.crew-list li{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.48rem 0.7rem;font-size:0.72rem;
  min-width:0;
}
.crew-list li.is-on{background:rgba(76,224,192,.06)}
.crew-list li > div{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.crew-list strong{
  display:block;
  font-weight:500;
  font-size:0.74rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-list em{
  display:block;
  font-style:normal;
  color:#8b919c;
  font-size:0.64rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crew-list .pill{margin-left:auto;flex:none;white-space:nowrap}
.map{padding:0.7rem 0.7rem 0.8rem}
.map-label{margin:0 0 0.5rem;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:#6d7380}
.map-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.35rem;
}
.map-grid span{
  position:relative;
  background:#0c0e12;
  border:1px solid #1e232c;
  border-radius:5px;
  padding:0.55rem 0.45rem 0.45rem;
  font-size:0.62rem;
  color:#8b919c;
}
.map-grid .hot{color:#c9ced6;border-color:#2a403c}
.map-grid .hot i,.map-grid .is-now i{
  position:absolute;top:7px;right:7px;
  width:6px;height:6px;border-radius:50%;background:#4ce0c0;
  box-shadow:0 0 0 3px rgba(76,224,192,.16);
}
.map-grid .is-now{border-color:#4ce0c0;color:#eceef2}

/* Rest of page */
.what,.how,.scope,.foot-cta{
  padding:0 4vw 3.5rem;
  max-width:46rem;
  margin:0 auto;
}
h2{
  margin:0 0 1rem;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#4ce0c0;
  font-weight:500;
}
.what ul,.how ol{margin:0;padding:0;list-style:none}
.what li,.how li{
  padding:0.95rem 0;
  border-top:1px solid #1e232c;
  font-size:1.05rem;
}
.what li:last-child,.how li:last-child{border-bottom:1px solid #1e232c}
.how li{display:flex;gap:1.1rem}
.how span{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:#4ce0c0;
  min-width:1.8rem;
  font-size:0.9rem;
}
.foot-cta p{margin:0 0 1.35rem;color:#8b919c;max-width:32rem;font-size:0.95rem}
footer{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  padding:1.5rem 4vw 2.5rem;
  max-width:1280px;margin:0 auto;
  border-top:1px solid #1e232c;
  font-size:0.82rem;color:#6d7380;
}
footer a{color:#9aa0ab;text-decoration:none}
footer a:hover{color:#eceef2}


.scope dl{margin:0}
.scope dl > div{
  display:grid;
  grid-template-columns:6.5rem 1fr;
  gap:0.75rem;
  padding:0.7rem 0;
  border-top:1px solid #1e232c;
  font-size:0.98rem;
}
.scope dl > div:last-child{border-bottom:1px solid #1e232c}
.scope dt{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#8b919c;
  padding-top:0.18rem;
}
.scope dd{margin:0;color:#eceef2}

@media (max-width:1080px){
  .hero{grid-template-columns:1fr;padding-top:3rem}
  .win-body{grid-template-columns:108px minmax(0,1fr)}
}
@media (max-width:780px){
  .frame-row,.crew{grid-template-columns:1fr}
  .crew-list{border-right:0;border-bottom:1px solid #1e232c}
  .search{margin-left:0}
  .win-body{grid-template-columns:1fr}
  .side{display:none}
  .grid td:nth-child(3),.grid th:nth-child(3),
  .grid td:nth-child(6),.grid th:nth-child(6){display:none}
  .stage{overflow-x:auto}
}
@media (max-width:640px){
  html{font-size:15px}
  .hero{padding:2.5rem 5vw 2.5rem}
  .what,.how,.scope,.foot-cta{padding-left:5vw;padding-right:5vw}
}