:root {
  --ink: #1a1a1a;
  --ink-soft: #666666;
  --muted: #999999;
  --line: #edecef;
  --paper: #f8f8f8;
  --white: #ffffff;
  --navy: #1a1a1a;
  --navy-2: #333333;
  --mint: #ff6e5f;
  --mint-strong: #e95e52;
  --orange: #ffc235;
  --blue: #7bc4ff;
  --shadow: 0 20px 60px rgba(23, 47, 75, 0.1);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { overflow: hidden; }
.section-pad { padding-left: clamp(22px, 5vw, 84px); padding-right: clamp(22px, 5vw, 84px); }

.topbar {
  position: sticky; top: 0; z-index: 30; height: 76px;
  display: flex; align-items: center; gap: 34px; padding: 0 clamp(22px, 5vw, 84px);
  color: #fff; background: rgba(16, 34, 57, 0.92); border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; color: var(--navy); background: var(--mint);
  border-radius: 12px; font-size: 12px; font-weight: 900; letter-spacing: -.08em; box-shadow: 0 6px 18px rgba(255,110,95,.14);
}
.brand-mark.small { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
.brand-copy, .footer-brand div { display: grid; gap: 2px; }
.brand-copy strong, .footer-brand strong { font-size: 15px; letter-spacing: .08em; }
.brand-copy small, .footer-brand small { color: rgba(255,255,255,.48); font-size: 7px; letter-spacing: .12em; }
.main-nav { display: flex; align-self: stretch; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a { position: relative; display: flex; align-items: center; height: 100%; color: rgba(255,255,255,.6); font-size: 13px; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mint); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.pilot-status { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.6); font-size: 12px; white-space: nowrap; }
.pilot-status i, .live-badge i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px rgba(233,94,82,.13); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 17px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(13,31,51,.15); }
.button-primary { color: var(--navy); background: var(--mint); }
.button-primary:hover { background: #ffd0ca; }
.button-ghost { color: inherit; background: transparent; border: 1px solid rgba(255,255,255,.18); }
.button-ghost:hover { background: rgba(255,255,255,.08); }
.button-dark { color: #fff; background: var(--navy); }
.button-dark:hover { background: var(--navy-2); }
.button-light { color: var(--navy); background: #fff; }
.button-large { min-height: 50px; padding: 0 21px; border-radius: 12px; font-size: 13px; }
.button-icon { font-size: 22px; font-weight: 300; line-height: 0; }
.shortcut { color: rgba(20,38,61,.48); font-size: 10px; font-weight: 600; }
.full-width { width: 100%; }
.mobile-menu { display: none; margin-left: auto; width: 40px; height: 40px; padding: 10px; color: #fff; background: transparent; }
.mobile-menu span { display: block; height: 1px; margin: 5px 0; background: currentColor; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .85fr); align-items: center; min-height: 590px; padding-top: 76px; padding-bottom: 75px; color: #fff; background: var(--navy); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 700px; height: 700px; right: -180px; top: -260px; border: 1px solid rgba(255,110,95,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,110,95,.018), 0 0 0 140px rgba(255,110,95,.014), 0 0 0 210px rgba(255,110,95,.01); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 9%; bottom: -180px; width: 310px; height: 310px; border-radius: 50%; background: rgba(233,94,82,.09); filter: blur(80px); }
.hero-copy { max-width: 630px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--mint-strong); }
h1, h2, h3, p { margin-top: 0; }
.keep-together { white-space: nowrap; }
h1 { margin: 25px 0 21px; font-size: clamp(42px, 5vw, 76px); line-height: 1.06; letter-spacing: -.075em; font-weight: 750; }
h1 em, h2 em { color: var(--mint); font-style: normal; }
.hero-lede { max-width: 560px; color: rgba(255,255,255,.63); font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; }
.text-link { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; }
.text-link span, .role-card a span { margin-left: 5px; color: var(--mint); font-size: 17px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; color: rgba(255,255,255,.44); font-size: 10px; }
.hero-trust b { margin-right: 6px; color: var(--mint); font-size: 9px; }
.app-reference { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; color: rgba(255,255,255,.46); font-size: 10px; }
.app-reference b { color: rgba(255,255,255,.78); font-weight: 650; }
.reference-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(255,110,95,.14); }
.hero-visual { position: relative; min-height: 405px; max-width: 580px; margin-left: auto; width: 100%; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,110,95,.16); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 450px; height: 178px; left: 12%; top: 27%; }
.orbit-two { width: 420px; height: 150px; left: 12%; top: 29%; transform: rotate(34deg); }
.radar-card, .supply-card { position: absolute; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(23,50,80,.82); box-shadow: 0 26px 55px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.radar-card { left: 4%; top: 8%; width: 278px; }
.supply-card { right: 0; bottom: 7%; width: 295px; background: rgba(248,251,253,.95); color: var(--ink); border-color: rgba(255,255,255,.4); }
.radar-topline, .supply-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.mini-label { display: block; margin-bottom: 7px; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.supply-card .mini-label { color: var(--muted); }
.radar-topline strong, .supply-heading strong { display: block; font-size: 12px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.radar-number { display: flex; align-items: baseline; gap: 4px; margin: 29px 0 12px; }
.radar-number strong { font-size: 50px; line-height: 1; letter-spacing: -.08em; }
.radar-number span { color: rgba(255,255,255,.35); font-size: 11px; }
.radar-chart { display: flex; align-items: end; gap: 7px; height: 73px; padding-top: 7px; border-bottom: 1px solid rgba(255,255,255,.12); }
.radar-chart span { flex: 1; border-radius: 4px 4px 0 0; background: rgba(123,196,255,.32); }
.radar-chart span.current { background: var(--mint); }
.radar-axis { display: flex; justify-content: space-between; margin-top: 9px; color: rgba(255,255,255,.35); font-size: 8px; }
.supply-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--navy); background: var(--mint); border-radius: 9px; font-size: 21px; }
.supply-heading > div { margin-right: auto; }
.supply-count { color: var(--navy); font-size: 24px; font-weight: 800; letter-spacing: -.07em; }
.supply-count small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.supply-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.supply-pills span { padding: 7px 8px; color: var(--ink-soft); background: #edf3f5; border-radius: 6px; font-size: 9px; }
.supply-pills b { color: var(--mint-strong); }
.map-preview { position: relative; height: 100px; margin-top: 15px; overflow: hidden; border-radius: 11px; background: #f9e3df; background-image: linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size: 29px 29px; }
.map-road { position: absolute; height: 2px; background: rgba(255,255,255,.85); transform-origin: left center; }
.road-a { left: -10px; top: 70px; width: 220px; transform: rotate(-19deg); }
.road-b { left: 70px; top: -10px; width: 160px; transform: rotate(51deg); }
.map-pin { position: absolute; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 2px 7px rgba(21,64,71,.28); }
.pin-a { left: 27%; top: 42%; }.pin-b { left: 65%; top: 26%; background: var(--orange); }.pin-c { left: 77%; top: 65%; }
.map-label { position: absolute; right: 10px; bottom: 9px; color: rgba(20,38,61,.54); font-size: 8px; font-weight: 700; }
.floating-chip { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: var(--navy); background: #fff; box-shadow: 0 14px 26px rgba(0,0,0,.13); font-size: 9px; font-weight: 800; }
.chip-match { right: 4%; top: 11%; }.chip-safe { left: 0; bottom: 2%; color: #2a786a; background: #e7fbf5; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-bottom: 1px solid var(--line); }
.metric-item { position: relative; display: grid; gap: 4px; padding: 29px 20px 31px 0; }
.metric-item:not(:first-child) { padding-left: 34px; }
.metric-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 28px; bottom: 28px; width: 1px; background: var(--line); }
.metric-item strong { color: var(--navy); font-size: 34px; letter-spacing: -.08em; }
.metric-item span { color: var(--ink); font-size: 12px; font-weight: 750; }.metric-item small { color: var(--muted); font-size: 10px; }

.tasks-section { padding-top: 105px; padding-bottom: 116px; background: var(--paper); }
.section-heading h2 { margin: 18px 0 17px; color: var(--navy); font-size: clamp(32px, 4vw, 53px); line-height: 1.1; letter-spacing: -.075em; }
.section-heading h2 em { color: var(--mint-strong); }
.section-heading > p, .split-heading > p { max-width: 330px; margin-top: 40px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; }.split-heading > p { margin-bottom: 5px; }
.task-toolbar { display: flex; align-items: center; gap: 13px; margin-top: 50px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.search-box { display: flex; align-items: center; gap: 9px; width: 245px; padding: 0 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.search-box span { font-size: 23px; line-height: 0; }.search-box input { width: 100%; height: 39px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.search-box input::placeholder { color: #9baaba; }
.filter-tabs { display: flex; flex: 1; gap: 5px; overflow-x: auto; scrollbar-width: none; }.filter-tabs::-webkit-scrollbar { display:none; }
.filter-tab { flex-shrink: 0; padding: 9px 12px; color: var(--ink-soft); background: transparent; border-radius: 8px; font-size: 11px; }.filter-tab:hover { background: #edf3f4; }.filter-tab.active { color: var(--navy); background: #e1f7f1; font-weight: 800; }.filter-tab b { margin-left: 3px; color: var(--mint-strong); font-size: 9px; }
.sort-button { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 9px 0 9px 10px; color: var(--ink-soft); background: transparent; font-size: 11px; }.sort-button span { color: var(--muted); font-size: 17px; }
.task-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 48px; padding-top: 25px; }.list-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; color: var(--ink); font-size: 12px; font-weight: 750; }.data-note { color: var(--muted); font-size: 10px; font-weight: 500; }
.task-list { display: grid; gap: 10px; }.task-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 22px; padding: 22px 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease; }.task-card:hover { transform: translateY(-3px); border-color: #b9d9d6; box-shadow: 0 14px 32px rgba(42,70,95,.08); }.task-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--mint-strong)); }
.task-main { min-width: 0; }.task-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }.task-category { padding: 5px 7px; color: #257569; background: #e7f8f3; border-radius: 5px; font-size: 9px; font-weight: 800; }.task-urgency { padding: 5px 7px; color: #a86b20; background: #fff4df; border-radius: 5px; font-size: 9px; font-weight: 750; }.task-time { margin-left: auto; color: var(--muted); font-size: 10px; }
.task-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 16px; letter-spacing: -.035em; }.task-desc { max-width: 640px; margin-bottom: 13px; overflow: hidden; color: var(--ink-soft); font-size: 11px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }.task-meta { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 10px; }.task-meta span { display: inline-flex; align-items: center; gap: 4px; }.task-meta strong { color: var(--ink-soft); font-weight: 700; }.task-side { display: grid; align-content: space-between; justify-items: end; min-width: 111px; }.task-budget { color: var(--navy); font-size: 12px; font-weight: 800; text-align: right; }.task-budget small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }.task-score { color: var(--mint-strong); font-size: 10px; font-weight: 800; }.task-detail-button { display: inline-flex; align-items: center; gap: 4px; padding: 7px 0; color: var(--navy); background: transparent; font-size: 10px; font-weight: 800; }.task-detail-button:hover { color: var(--mint-strong); }.task-detail-button span { font-size: 15px; }
.load-more { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; padding: 14px; color: var(--ink-soft); background: transparent; border: 1px dashed #c6d2dc; border-radius: 11px; font-size: 11px; font-weight: 750; }.load-more:hover { color: var(--navy); border-color: var(--mint-strong); background: #f0fbf8; }.load-more span { color: var(--mint-strong); font-size: 16px; }
.task-aside { display: grid; align-content: start; gap: 15px; }.match-card, .mini-flow-card { padding: 24px; border-radius: 17px; }.match-card { color: #fff; background: linear-gradient(145deg, #173454 0%, #102239 100%); box-shadow: 0 17px 35px rgba(16,34,57,.16); }.card-kicker { color: var(--mint); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.spark { margin-right: 5px; font-size: 16px; }.beta { margin-left: 5px; padding: 4px 5px; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; font-size: 7px; letter-spacing: .08em; }.match-card h3 { margin: 25px 0 11px; font-size: 22px; line-height: 1.25; letter-spacing: -.06em; }.match-card p { color: rgba(255,255,255,.57); font-size: 11px; line-height: 1.65; }.match-score-row { display: flex; justify-content: space-between; margin-top: 26px; color: rgba(255,255,255,.55); font-size: 10px; }.match-score-row strong { color: var(--mint); }.score-bar { height: 5px; margin: 10px 0 13px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.15); }.score-bar i { display: block; width: 89%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-strong), var(--mint)); }.match-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 23px; }.match-tags span { padding: 5px 6px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); border-radius: 5px; font-size: 9px; }.mini-flow-card { color: var(--ink); background: #fff1ef; }.mini-flow-card .card-kicker { margin-bottom: 19px; color: #6e8b91; }.mini-flow-step { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-top: 1px solid rgba(66,112,111,.14); font-size: 11px; }.mini-flow-step b { color: var(--mint-strong); font-size: 9px; }.mini-flow-step i { margin-left: auto; color: #91a6a9; font-style: normal; }.mini-flow-step:last-child i { color: var(--mint-strong); }
.empty-state { display: grid; justify-items: center; gap: 7px; padding: 45px 20px; color: var(--ink-soft); border: 1px dashed #cad6df; border-radius: 14px; background: #fff; }.empty-state strong { color: var(--navy); font-size: 14px; }.empty-state span { color: var(--muted); font-size: 11px; }.empty-icon { display:grid;place-items:center;width:38px;height:38px;color:var(--mint-strong);background:#e4f7f1;border-radius:12px;font-size:21px; }

.capabilities-section { padding-top: 106px; padding-bottom: 120px; background: #fff; }.centered-heading { text-align: center; }.centered-heading > p { max-width: 460px; margin: 0 auto; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1100px; margin: 52px auto 0; }.capability-card { position: relative; display: grid; align-content: start; justify-items: start; min-height: 208px; padding: 25px 25px 21px; color: var(--ink); text-align: left; background: #f8fafb; border: 1px solid var(--line); border-radius: 16px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease; }.capability-card:hover { transform: translateY(-5px); background: #effaf7; box-shadow: var(--shadow); }.capability-card.featured { color: #fff; background: var(--navy); border-color: var(--navy); }.capability-index { color: var(--muted); font-size: 9px; font-weight: 800; }.featured .capability-index { color: rgba(255,255,255,.4); }.capability-icon { display: grid; place-items: center; width: 39px; height: 39px; margin: 23px 0 14px; color: var(--mint-strong); background: #e4f7f1; border-radius: 11px; font-size: 20px; }.featured .capability-icon { color: var(--navy); background: var(--mint); }.capability-card strong { margin-bottom: 6px; font-size: 18px; letter-spacing: -.04em; }.capability-card > span:not(.capability-index):not(.capability-icon) { color: var(--ink-soft); font-size: 10px; }.featured > span:not(.capability-index):not(.capability-icon) { color: rgba(255,255,255,.53); }.capability-card b { margin-top: auto; color: var(--mint-strong); font-size: 10px; }.featured b { color: var(--mint); }

.workflow-section { padding-top: 100px; padding-bottom: 105px; background: var(--paper); }.workflow-panel { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; min-height: 395px; padding: 66px clamp(28px, 6vw, 92px); overflow: hidden; color: #fff; background: var(--navy); border-radius: var(--radius-lg); }.workflow-panel::after { content: ""; position: absolute; right: -100px; bottom: -220px; width: 500px; height: 500px; border: 1px solid rgba(255,110,95,.13); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,110,95,.03), 0 0 0 100px rgba(255,110,95,.025), 0 0 0 150px rgba(255,110,95,.02); }.workflow-heading h2 { color: #fff; }.workflow-heading p { max-width: 310px; margin-top: 0; color: rgba(255,255,255,.58); line-height: 1.8; }.workflow-steps { position: relative; z-index: 1; display: grid; align-content: center; }.workflow-step { display: flex; align-items: center; gap: 18px; padding: 11px 15px; border: 1px solid transparent; border-radius: 13px; }.workflow-step.active { background: rgba(255,255,255,.08); border-color: rgba(255,110,95,.2); }.workflow-step > span { display:grid;place-items:center;width:34px;height:34px;color:var(--mint);border:1px solid rgba(255,110,95,.35);border-radius:50%;font-size:9px;font-weight:850; }.workflow-step strong { display:block;margin-bottom:4px;font-size:13px; }.workflow-step small { color: rgba(255,255,255,.46); font-size:10px; }.workflow-connector { width: 1px; height: 15px; margin-left: 32px; background: rgba(255,110,95,.3); }

.roles-section { padding-top: 92px; padding-bottom: 110px; background: #fff; }.roles-heading > p { max-width: 340px; }.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }.role-card { position: relative; min-height: 250px; padding: 25px 27px; overflow: hidden; border-radius: 17px; }.role-card::after { content: ""; position: absolute; right: -42px; bottom: -55px; width: 155px; height: 155px; border: 1px solid rgba(20,38,61,.09); border-radius: 50%; box-shadow: 0 0 0 28px rgba(20,38,61,.025), 0 0 0 56px rgba(20,38,61,.018); }.client-role { background: #e5f6f0; }.pilot-role { background: #fff2dc; }.enterprise-role { background: #e8f0ff; }.role-number { color: rgba(20,38,61,.35); font-size: 9px; font-weight: 850; }.role-emoji { display: grid; place-items: center; width: 38px; height: 38px; margin: 28px 0 17px; color: var(--navy); background: rgba(255,255,255,.65); border-radius: 11px; font-size: 21px; }.role-card h3 { margin-bottom: 9px; font-size: 18px; letter-spacing: -.04em; }.role-card p { max-width: 255px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }.role-card a { position: relative; z-index: 1; display: inline-block; margin-top: 8px; color: var(--navy); font-size: 10px; font-weight: 800; }

.closing-cta { position: relative; padding-top: 91px; padding-bottom: 92px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #11263d, #183a55); }.closing-inner { position: relative; z-index: 1; max-width: 650px; }.closing-cta h2 { margin: 21px 0 17px; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.07em; }.closing-cta p { max-width: 500px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.8; }.closing-cta .button { margin-top: 16px; }.closing-decoration { position: absolute; right: 8%; top: 50%; width: 330px; height: 330px; transform: translateY(-50%); border: 1px solid rgba(255,110,95,.2); border-radius: 50%; }.closing-decoration span { position:absolute;display:block;width:9px;height:9px;border:2px solid var(--mint);border-radius:50%;background:var(--navy); }.closing-decoration span:nth-child(1) { left: 17%; top: 20%; }.closing-decoration span:nth-child(2) { right: 10%; top: 45%; background: var(--orange); border-color: var(--orange); }.closing-decoration span:nth-child(3) { left: 43%; bottom: 8%; }.closing-decoration::before, .closing-decoration::after { content:"";position:absolute;inset:40px;border:1px solid rgba(255,110,95,.16);border-radius:50%; }.closing-decoration::after { inset: 84px; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 88px; color: #fff; background: var(--navy); }.footer-brand small { color: rgba(255,255,255,.38); }.footer-note, .footer-copy { color: rgba(255,255,255,.35); font-size: 9px; }.footer-note { margin-left: auto; }
.mobile-tabbar { display: none; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(9,23,39,.65); backdrop-filter: blur(10px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(100%, 545px); max-height: min(760px, calc(100vh - 40px)); overflow: auto; padding: 34px; color: var(--ink); background: #fff; border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.25); animation: modal-in .35s var(--ease); }.modal-close { position: absolute; top: 16px; right: 17px; display:grid;place-items:center;width:29px;height:29px;color:var(--muted);background:#f0f4f6;border-radius:50%;font-size:20px;font-weight:300; }.modal-close:hover { color:var(--navy); background:#e3eeef; }.modal-kicker { color: var(--mint-strong); font-size: 9px; font-weight: 850; letter-spacing: .14em; }.modal h2 { margin: 13px 0 10px; color: var(--navy); font-size: 29px; letter-spacing: -.06em; }.modal-description { color: var(--ink-soft); font-size: 12px; line-height: 1.75; }.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 23px 0; }.detail-cell { padding: 13px; background: #f4f8f9; border-radius: 10px; }.detail-cell small { display:block;margin-bottom:5px;color:var(--muted);font-size:9px; }.detail-cell strong { color:var(--navy); font-size:12px; }.detail-risk { display:flex;gap:10px;padding:14px;color:#286b60;background:#e8f8f2;border-radius:11px; }.detail-risk > span { display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;color:var(--navy);background:var(--mint);border-radius:50%;font-size:12px;font-weight:900; }.detail-risk strong { display:block;margin-bottom:4px;font-size:10px; }.detail-risk p { margin:0;color:#49706b;font-size:10px;line-height:1.6; }.modal-actions { display:flex;gap:9px;margin-top:22px; }.modal-actions .button { flex: 1; }.publish-modal form { display: grid; gap: 14px; margin-top: 22px; }.publish-modal label { display:grid;gap:7px;color:var(--ink);font-size:10px;font-weight:800; }.publish-modal input, .publish-modal select, .publish-modal textarea { width:100%; padding:11px 12px;color:var(--ink);background:#f6f9fa;border:1px solid var(--line);border-radius:9px;outline:0;font-size:11px;resize:vertical; }.publish-modal input:focus, .publish-modal select:focus, .publish-modal textarea:focus { border-color: var(--mint-strong); box-shadow: 0 0 0 3px rgba(233,94,82,.12); }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.form-hint { display:flex;gap:7px;align-items:center;color:var(--muted);font-size:9px;line-height:1.5; }.form-hint span { color:var(--mint-strong);font-size:14px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; display:flex;align-items:center;gap:10px;min-width:230px;padding:13px 16px;color:#fff;background:var(--navy);border:1px solid rgba(255,110,95,.28);border-radius:12px;box-shadow:0 18px 40px rgba(13,31,51,.2);transform:translateY(30px);opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s var(--ease); }.toast.show { transform:translateY(0);opacity:1; }.toast > span { display:grid;place-items:center;width:24px;height:24px;color:var(--navy);background:var(--mint);border-radius:50%;font-size:12px;font-weight:900; }.toast strong, .toast small { display:block; }.toast strong { margin-bottom:3px;font-size:11px; }.toast small { color:rgba(255,255,255,.58);font-size:9px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1080px) {
  .topbar { gap: 18px; }.main-nav { gap: 17px; }.top-actions .button-ghost { display:none; }
  .hero { grid-template-columns: 1fr .85fr; }.hero-visual { transform: scale(.88); transform-origin: right center; margin-right: -28px; }
  .task-layout { gap: 25px; }.workflow-panel { gap: 35px; padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 820px) {
  .topbar { height: 66px; }.mobile-menu { display:block; }.main-nav { position:absolute;left:0;right:0;top:66px;display:none;align-items:stretch;flex-direction:column;height:auto;padding:12px 22px;background:rgba(16,34,57,.98);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 12px 25px rgba(0,0,0,.18); }.main-nav.open { display:flex; }.main-nav a { height:41px; }.main-nav a.active::after { right:auto;bottom:5px;width:35px; }.top-actions { margin-left:auto; }.top-actions .pilot-status { display:none; }.top-actions .button-primary { min-height:36px;padding:0 11px;font-size:10px; }.shortcut { display:none; }
  .hero { display:block; padding-top:65px; padding-bottom:50px; }.hero-copy { max-width: 650px; }.hero-visual { width:min(100%, 580px); min-height:400px; margin: 30px auto 0; transform:none; }.metrics { grid-template-columns: repeat(2,1fr); }.metric-item:nth-child(2)::after { display:none; }.metric-item:nth-child(3) { border-top:1px solid var(--line); }.metric-item:nth-child(4) { border-top:1px solid var(--line); }
  .split-heading { display:block; }.section-heading > p, .split-heading > p { margin:22px 0 0; max-width:500px; }.task-toolbar { flex-wrap:wrap; }.search-box { flex:1;min-width:220px; }.filter-tabs { order:3;flex-basis:100%; }.sort-button { margin-left:auto; }.task-layout { grid-template-columns:1fr; }.task-aside { grid-template-columns:1fr 1fr; }.capability-grid { grid-template-columns:repeat(2,1fr); }.workflow-panel { grid-template-columns:1fr;padding:48px 33px; }.workflow-heading p { max-width:500px; }.role-grid { grid-template-columns:1fr; }.role-card { min-height:190px; }.role-emoji { margin-top:17px; }.role-card p { max-width:450px; }.closing-decoration { right:-100px; opacity:.7; }.footer { align-items:flex-start;flex-wrap:wrap;padding-top:24px;padding-bottom:24px; }.footer-note { margin-left:0;order:3;flex-basis:100%; }.footer-copy { margin-left:auto; }
}
@media (max-width: 560px) {
  .section-pad { padding-left:18px;padding-right:18px; }.topbar { padding-left:18px;padding-right:18px; }.brand-copy small { display:none; }.top-actions .button-primary { display:none; }.hero { min-height:0;padding-top:52px; }.hero h1 { font-size:43px; }.hero-lede { font-size:13px; }.hero-actions { gap:16px; }.hero-trust { gap:10px 16px;line-height:1.5; }.hero-visual { min-height:355px; transform:scale(.86);transform-origin:top left;width:116%;margin-bottom:-48px; }.radar-card { left:0; }.supply-card { right:-20px; }.chip-match { right:0; }.metrics { grid-template-columns:1fr 1fr; }.metric-item { padding:21px 8px 22px 0; }.metric-item:not(:first-child) { padding-left:15px; }.metric-item:not(:last-child)::after { top:19px;bottom:19px; }.metric-item strong { font-size:27px; }.metric-item span { font-size:10px; }.metric-item small { font-size:8px; }
  .tasks-section, .capabilities-section { padding-top:75px;padding-bottom:78px; }.section-heading h2 { font-size:36px; }.task-toolbar { margin-top:30px; }.search-box { flex-basis:100%; }.sort-button { margin-left:0; }.task-card { grid-template-columns:1fr;gap:15px;padding:19px 18px; }.task-time { margin-left:auto; }.task-side { display:flex;align-items:center;justify-content:space-between;min-width:0; }.task-budget { text-align:left; }.task-detail-button { padding-top:0; }.task-desc { white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }.task-aside { grid-template-columns:1fr; }.capability-grid { grid-template-columns:1fr; }.capability-card { min-height:185px; }.workflow-section, .roles-section { padding-top:70px;padding-bottom:70px; }.workflow-panel { padding:38px 22px; }.workflow-step { padding-left:8px;padding-right:8px; }.workflow-step small { font-size:9px; }.role-card { min-height:220px; }.closing-cta { padding-top:70px;padding-bottom:70px; }.closing-decoration { width:250px;height:250px;right:-120px; }.footer-copy { flex-basis:100%;margin-left:0; }.modal { padding:27px 20px; }.form-row, .detail-grid { grid-template-columns:1fr; }.modal-actions { flex-direction:column; }.toast { right:15px;left:15px;bottom:15px; }
}

@media (max-width: 560px) {
  body { padding-bottom: 68px; }
  .app-reference { gap: 6px; line-height: 1.5; }
  .app-reference b { flex-basis: 100%; padding-left: 14px; }
  .mobile-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding: 7px 8px 5px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(26,26,26,.08); backdrop-filter: blur(16px); }
  .mobile-tabbar a, .mobile-tabbar button { display: grid; place-items: center; gap: 2px; min-width: 0; color: var(--muted); background: transparent; }
  .mobile-tabbar a.active { color: var(--mint-strong); }
  .mobile-tabbar span { display: grid; place-items: center; width: 28px; height: 28px; font-size: 18px; }
  .mobile-tabbar button span { width: 42px; height: 42px; margin-top: -18px; color: #fff; background: var(--mint); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(233,94,82,.28); font-size: 23px; }
  .mobile-tabbar small { font-size: 9px; line-height: 1; }
}