:root {
  --navy: #17365d;
  --navy-2: #0f2744;
  --blue: #4472c4;
  --blue-2: #2f5fae;
  --pale: #d9eaf7;
  --green: #d9ead3;
  --green-text: #2e6b39;
  --yellow: #fff2cc;
  --yellow-text: #7b5c00;
  --red: #f4cccc;
  --red-text: #8a2222;
  --ink: #172033;
  --muted: #667085;
  --line: #d9dee8;
  --line-strong: #c5cedb;
  --bg: #f4f7fb;
  --card: #ffffff;
  --locked: #eef1f5;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--navy-2); color: white; padding: 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--blue); display: grid; place-items: center; font-weight: 800; }
.side-brand strong { display: block; font-size: 14px; letter-spacing: .04em; }
.side-brand small { display: block; margin-top: 4px; opacity: .65; font-size: 11px; }
.side-nav { display: grid; gap: 6px; margin-top: 6px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 10px 9px; border-radius: 9px; color: rgba(255,255,255,.9); font-size: 13px; }
.side-link:hover { background: rgba(255,255,255,.08); }
.side-link.disabled { opacity: .48; cursor: default; }
.side-code { width: 38px; font-size: 10px; font-weight: 800; color: #a9c6ef; letter-spacing: .05em; }
.side-section-title { padding: 14px 9px 2px; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.42); font-weight: 800; }
.side-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 16px 8px 0; font-size: 12px; color: rgba(255,255,255,.8); }
.side-footer small { display: block; margin-top: 5px; color: rgba(255,255,255,.45); }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #61c873; margin-right: 6px; }
.workspace-shell { min-width: 0; }
.topbar { height: 64px; background: white; border-bottom: 1px solid var(--line); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.topbar strong { font-size: 14px; color: var(--navy); }
.topbar-sub { color: var(--muted); font-size: 12px; margin-left: 10px; }
.top-user { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--pale); color: var(--navy); font-size: 11px; font-weight: 800; }
.main { max-width: 1500px; margin: 0 auto; padding: 26px 30px 44px; }
.page-header { margin-bottom: 20px; }
.page-title { margin: 0; font-size: 28px; color: var(--navy); }
.page-subtitle { margin: 7px 0 0; color: var(--muted); }
.hero { background: linear-gradient(135deg, var(--navy), #244f85); color: white; padding: 27px; border-radius: 16px; margin-bottom: 20px; }
.hero h1 { margin: 0 0 8px; font-size: 29px; }
.hero p { margin: 0; opacity: .9; max-width: 900px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(23,54,93,.045); }
.card h2, .card h3 { color: var(--ink); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }
.kpi { font-size: 28px; font-weight: 800; color: var(--navy); margin: 5px 0; }
.kpi-sm { font-size: 21px; font-weight: 800; color: var(--navy); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.btn { border: none; border-radius: 9px; padding: 9px 13px; background: var(--blue); color: white; font-weight: 700; font-size: 13px; }
.btn:hover { background: var(--blue-2); }
.btn.secondary { background: white; color: var(--navy); border: 1px solid var(--line-strong); }
.btn.success { background: #3c8b4a; }
.btn.warning { background: #b08412; }
.btn.danger { background: #a63a3a; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.badge { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--pale); color: var(--navy); }
.badge.green, .badge.APPROVED, .badge.COMPLETED, .badge.READY { background: var(--green); color: var(--green-text); }
.badge.yellow, .badge.PENDING, .badge.REVIEW, .badge.IN_PROGRESS { background: var(--yellow); color: var(--yellow-text); }
.badge.red, .badge.REJECTED, .badge.BLOCKED { background: var(--red); color: var(--red-text); }
.badge.LOCKED { background: var(--locked); color: #7a8491; }
.list { display: grid; gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: white; }
.item:hover { border-color: #abc1e0; }
.form { display: grid; gap: 13px; }
label { font-weight: 700; font-size: 12px; display: grid; gap: 6px; }
input, select, textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; background: white; color: var(--ink); }
textarea { min-height: 88px; resize: vertical; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--yellow); border: 1px solid #e7cf85; color: #654f0b; }
.error { padding: 12px 14px; border-radius: 10px; background: var(--red); border: 1px solid #d99; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.section-title { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; }
.section-title h3 { margin: 0; }
.process-rail-wrap { overflow-x: auto; padding-bottom: 6px; }
.process-rail { display: flex; min-width: 1320px; gap: 7px; }
.process-step { width: 72px; flex: 0 0 72px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 7px; background: white; text-align: center; }
.process-step strong { display: block; font-size: 12px; color: var(--navy); }
.process-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.process-step.COMPLETED, .process-step.READY { border-color: #a9d3b0; background: #f5fbf6; }
.process-step.REVIEW, .process-step.IN_PROGRESS { border-color: #e2c75d; background: #fffaf0; }
.process-step.BLOCKED { border-color: #dfabab; background: #fff8f8; }
.process-step.LOCKED { background: #f5f6f8; opacity: .65; }
.project-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.project-head h1 { margin: 0; font-size: 24px; color: var(--navy); }
.project-meta { margin-top: 6px; color: var(--muted); font-size: 13px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.metric .label { color: var(--muted); font-size: 11px; }
.metric .value { color: var(--navy); font-size: 22px; font-weight: 800; margin-top: 4px; }
.doc-card { border: 1px solid var(--line); border-radius: 11px; padding: 13px; background: white; }
.doc-card + .doc-card { margin-top: 10px; }
.doc-actions { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.module-gate { border-left: 4px solid var(--blue); }
.audit-row { display: grid; grid-template-columns: 150px 1fr 190px 160px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.empty { padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 10px; }
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 82px minmax(0,1fr); }
  .sidebar { padding: 18px 9px; }
  .side-brand span:not(.brand-mark), .side-link span:last-child, .side-section-title, .side-footer { display: none; }
  .side-link { justify-content: center; }
  .side-code { width: auto; }
  .metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; display: flex; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; }
  .side-brand { border: 0; padding: 0; }
  .side-nav { display: flex; margin: 0; }
  .side-link.disabled { display: none; }
  .topbar { padding: 0 14px; }
  .topbar-sub, .top-user span:last-child { display: none; }
  .main { padding: 16px; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: span 12; }
  .metrics { grid-template-columns: repeat(2,1fr); }
  .audit-row { grid-template-columns: 1fr; gap: 4px; }
}
.revision-upload { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); display: grid; grid-template-columns: 1.2fr 1fr 150px auto; gap: 8px; align-items: end; }
.revision-upload input { font-size: 12px; padding: 8px; }
@media (max-width: 1000px) { .revision-upload { grid-template-columns: 1fr; } }
/* Sprint 0.2 – M02 Extraction & Review */
.m02-panel { border-left-color: #6f42c1; }
.m02-source-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin:14px 0; }
.m02-source { border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fafbff; }
.m02-run-tabs { display:flex; gap:8px; overflow-x:auto; padding:8px 0 14px; }
.run-tab { border:1px solid var(--line); background:white; border-radius:9px; padding:8px 11px; text-align:left; min-width:180px; color:var(--ink); }
.run-tab.active { border-color:#6f42c1; box-shadow:0 0 0 2px rgba(111,66,193,.12); }
.run-tab strong,.run-tab span { display:block; font-size:11px; }
.run-tab span { color:var(--muted); margin-top:3px; }
.m02-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
.m02-summary>div { border:1px solid var(--line); border-radius:9px; padding:10px; background:#f8fafc; }
.m02-summary span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; }
.m02-summary strong { display:block; font-size:18px; color:var(--navy); margin-top:4px; }
.m02-scope-note { margin-bottom:12px; }
.m02-flag { border:1px solid var(--line); border-radius:10px; padding:11px; margin:8px 0; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.m02-flag.BLOCKING { border-color:#d99; background:#fff8f8; }
.m02-object-list { display:grid; gap:11px; margin-top:13px; }
.m02-object { border:1px solid var(--line); border-radius:12px; padding:14px; background:white; }
.m02-object-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.type-pill { display:inline-block; background:#ede7f6; color:#5b36a2; border-radius:999px; padding:3px 8px; font-size:10px; font-weight:800; margin-right:8px; }
.evidence-box { margin-top:10px; padding:11px; border-radius:9px; background:#f6f8fb; border-left:3px solid #6f42c1; font-size:13px; line-height:1.45; }
.evidence-label { font-size:10px; font-weight:800; color:var(--muted); margin-bottom:6px; }
.m02-attrs { margin-top:8px; overflow-x:auto; color:#4b5563; font-size:11px; }
.m02-finalize { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; }
@media(max-width:760px){ .m02-summary{grid-template-columns:repeat(2,1fr)} .m02-finalize{align-items:stretch;flex-direction:column} }


/* Sprint 1.7 – Project Control Center */
.control-center { overflow: hidden; }
.control-summary { display:grid; grid-template-columns:minmax(0,1.6fr) auto auto; gap:18px; align-items:center; margin:14px 0; padding:16px; border:1px solid #d9e2ec; border-radius:14px; background:#f8fbfe; }
.control-kpis { display:flex; gap:10px; }
.control-kpis span { min-width:86px; padding:10px 12px; border:1px solid #d9e2ec; border-radius:10px; background:white; text-align:center; }
.control-kpis strong { display:block; font-size:20px; color:#1f4e78; }
.control-kpis small { display:block; color:#667085; margin-top:2px; }
.progress-track { height:8px; background:#e8eef5; border-radius:999px; overflow:hidden; margin:8px 0 16px; }
.progress-value { height:100%; background:#2f6f9f; border-radius:999px; transition:width .2s ease; }
.module-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.module-pick { appearance:none; border:1px solid #d9e2ec; border-radius:12px; background:white; color:inherit; padding:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; cursor:pointer; }
.module-pick:hover { border-color:#7ca6c6; background:#f8fbfe; }
.module-pick.selected { box-shadow:0 0 0 2px #2f6f9f inset; border-color:#2f6f9f; }
.module-pick span:first-child { min-width:0; }
.module-pick strong,.module-pick small { display:block; }
.module-pick small { color:#667085; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.module-pick.BLOCKED { background:#fff7f2; }
.module-pick.REVIEW { background:#fffbea; }
.module-pick.READY { background:#f2fbf5; }
.module-pick.LOCKED { opacity:.62; }
.module-workspace { scroll-margin-top:16px; }
#module-M00,#module-M01 { scroll-margin-top:16px; }
@media (max-width:900px) { .control-summary { grid-template-columns:1fr; } .control-kpis { flex-wrap:wrap; } }

/* CIREXON master integration — public website + product shell */
:root {
  --cx-primary:#0865ff;
  --cx-primary-dark:#004bd6;
  --cx-deep:#0a2540;
  --cx-deep-2:#071b31;
  --cx-sky:#4da3ff;
  --cx-green:#10b981;
  --cx-orange:#ff980b;
  --cx-purple:#8b5cf6;
  --cx-teal:#0da7a3;
  --cx-surface:#f8fafc;
}
.cirexon-mark { position:relative; width:38px; height:38px; display:inline-block; flex:0 0 auto; }
.cirexon-mark::before,.cirexon-mark::after,.cirexon-mark i,.cirexon-mark b { content:""; position:absolute; display:block; width:12px; height:34px; top:2px; border-radius:2px; transform-origin:center; }
.cirexon-mark::before { left:9px; background:#fff; transform:skew(-31deg); }
.cirexon-mark::after { right:9px; background:#3d91ff; transform:skew(-31deg); }
.cirexon-mark i { left:9px; background:#2f73c7; transform:skew(31deg); }
.cirexon-mark b { right:9px; background:#fff; transform:skew(31deg); }
.cirexon-mark.large { width:46px; height:46px; }
.marketing-brand .cirexon-mark::before,.marketing-brand .cirexon-mark b { background:var(--cx-deep); }
.marketing-brand .cirexon-mark i { background:#184b83; }
.marketing-brand .cirexon-mark::after { background:#2788ff; }

.marketing-page { min-height:100vh; background:#fff; color:var(--cx-deep); }
.marketing-nav { height:72px; padding:0 clamp(20px,4vw,68px); display:flex; align-items:center; gap:32px; border-bottom:1px solid #e5ebf3; background:rgba(255,255,255,.96); position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.marketing-brand { display:flex; align-items:center; gap:12px; margin-right:auto; }
.marketing-brand strong { display:block; font-size:20px; letter-spacing:.18em; line-height:1; }
.marketing-brand small { display:block; margin-top:6px; font-size:8px; letter-spacing:.15em; color:#607088; font-weight:700; }
.marketing-links { display:flex; gap:28px; font-size:13px; font-weight:700; }
.marketing-links a:hover { color:var(--cx-primary); }
.marketing-cta,.marketing-ghost { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:10px; padding:0 20px; font-weight:800; font-size:13px; }
.marketing-cta { color:#fff; background:linear-gradient(135deg,var(--cx-primary),#1479ff); box-shadow:0 12px 30px rgba(8,101,255,.22); }
.marketing-cta:hover { background:linear-gradient(135deg,var(--cx-primary-dark),var(--cx-primary)); }
.marketing-ghost { border:1px solid #cdd7e5; background:white; }
.small-cta { min-height:42px; padding:0 18px; white-space:nowrap; }
.marketing-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); min-height:590px; overflow:hidden; background:radial-gradient(circle at 80% 8%,rgba(77,163,255,.22),transparent 34%),linear-gradient(120deg,#fbfdff 0%,#f0f6ff 58%,#e6f0ff 100%); }
.marketing-hero-copy { padding:clamp(52px,7vw,104px) clamp(26px,5vw,80px); align-self:center; }
.eyebrow { display:inline-block; font-size:11px; font-weight:900; letter-spacing:.16em; color:var(--cx-primary); margin-bottom:18px; }
.eyebrow.dark { color:#9ab5d3; }
.marketing-hero h1 { margin:0; max-width:770px; font-size:clamp(44px,5.4vw,78px); letter-spacing:-.045em; line-height:.98; }
.marketing-hero h1 em { color:var(--cx-primary); font-style:normal; }
.marketing-hero h2 { font-size:clamp(22px,2.2vw,32px); margin:18px 0 12px; }
.marketing-hero p { max-width:700px; font-size:18px; line-height:1.55; color:#4b6079; margin:0; }
.marketing-actions { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:38px; max-width:760px; }
.hero-proof span { border-top:2px solid #dce6f2; padding-top:12px; }
.hero-proof strong,.hero-proof small { display:block; }
.hero-proof strong { font-size:13px; }
.hero-proof small { color:#6c7d91; margin-top:5px; font-size:11px; line-height:1.35; }
.marketing-hero-panel { min-height:590px; display:grid; place-items:center; padding:40px 48px 40px 0; position:relative; }
.marketing-hero-panel::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:linear-gradient(140deg,#0b3764,#07192e); opacity:.97; }
.mock-window { width:min(600px,94%); min-height:390px; border-radius:18px; background:#fff; box-shadow:0 34px 90px rgba(7,27,49,.32); overflow:hidden; position:relative; z-index:2; transform:perspective(1400px) rotateY(-5deg) rotateX(1deg); border:1px solid rgba(255,255,255,.5); }
.mock-top { height:54px; display:flex; align-items:center; gap:12px; padding:0 18px; background:var(--cx-deep-2); color:#fff; font-size:12px; }
.mini-mark { width:27px; height:27px; display:grid; place-items:center; background:var(--cx-primary); border-radius:7px; font-size:9px; font-weight:900; }
.mock-user { margin-left:auto; color:#aac0da; }
.mock-body { padding:22px; }
.mock-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.mock-title span small,.mock-title span strong { display:block; }
.mock-title small { color:#7a8ba0; font-size:10px; }
.mock-title strong { font-size:20px; margin-top:4px; }
.mock-title>b { color:var(--cx-primary); font-size:24px; }
.mock-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.mock-kpis span { border:1px solid #e1e7f0; border-radius:10px; padding:12px; background:#fbfdff; }
.mock-kpis small,.mock-kpis strong { display:block; }
.mock-kpis small { color:#7a8ba0; font-size:9px; }
.mock-kpis strong { font-size:18px; margin-top:5px; }
.mock-chart { height:100px; margin:16px 0; border:1px solid #e1e7f0; border-radius:10px; position:relative; overflow:hidden; background:linear-gradient(#fff,#fbfdff); }
.mock-chart::before { content:""; position:absolute; inset:20px 14px; background:repeating-linear-gradient(to bottom,#edf1f6 0,#edf1f6 1px,transparent 1px,transparent 26px); }
.chart-line { position:absolute; left:18px; right:18px; height:3px; border-radius:99px; transform-origin:left center; }
.chart-line.one { top:68px; background:var(--cx-primary); transform:rotate(-8deg); }
.chart-line.two { top:56px; background:var(--cx-green); transform:rotate(-4deg); }
.chart-line.three { top:76px; background:var(--cx-orange); transform:rotate(-12deg); }
.mock-modules { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.mock-modules span { padding:8px; border-radius:8px; border:1px solid #e1e7f0; }
.mock-modules b,.mock-modules small { display:block; }
.mock-modules b { font-size:11px; }
.mock-modules small { margin-top:3px; font-size:7px; }
.mock-modules .done { background:#f1fbf5; border-color:#bde5ca; }
.mock-modules .review { background:#fff9e9; border-color:#edd893; }
.mock-modules .locked { background:#f4f6f9; color:#8793a3; }
.lifecycle-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:#dfe7f1; border-top:1px solid #dfe7f1; border-bottom:1px solid #dfe7f1; }
.lifecycle-card { padding:28px 24px; background:#fff; min-height:230px; position:relative; }
.lifecycle-card::before { content:""; height:4px; position:absolute; left:0; top:0; right:0; background:#aebdce; }
.lifecycle-card.implemented::before { background:var(--cx-primary); }
.lifecycle-card:nth-child(2)::before { background:var(--cx-sky); }.lifecycle-card:nth-child(3)::before{background:var(--cx-green)}.lifecycle-card:nth-child(4)::before{background:var(--cx-orange)}.lifecycle-card:nth-child(5)::before{background:var(--cx-purple)}.lifecycle-card:nth-child(6)::before{background:var(--cx-teal)}
.lifecycle-code { color:#91a0b3; font-size:10px; font-weight:900; letter-spacing:.12em; }
.lifecycle-card h3 { font-size:20px; margin:14px 0 2px; }.lifecycle-card h4{font-size:12px;color:#63758b;margin:0 0 14px}.lifecycle-card p{font-size:13px;line-height:1.5;color:#52657b}.lifecycle-card>small{font-size:9px;font-weight:900;color:#8391a2;text-transform:uppercase;letter-spacing:.08em}.lifecycle-card.implemented>small{color:var(--cx-primary)}
.why-section { padding:72px clamp(24px,5vw,78px); }
.section-kicker { font-size:12px; font-weight:900; letter-spacing:.16em; color:#53667d; margin-bottom:26px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e4eaf2; border:1px solid #e4eaf2; }
.why-grid article { padding:30px; background:#fff; min-height:190px; }.why-grid article>span{color:var(--cx-primary);font-size:12px;font-weight:900}.why-grid h3{margin:28px 0 10px;font-size:18px}.why-grid p{margin:0;color:#68798d;font-size:13px;line-height:1.55}
.audience-section { padding:72px clamp(24px,5vw,78px); background:#eef4fb; display:grid; grid-template-columns:minmax(240px,.65fr) 1.35fr; gap:64px; }
.audience-heading h2 { font-size:clamp(30px,3.1vw,48px); line-height:1.1; letter-spacing:-.035em; margin:0; max-width:520px; color:var(--cx-deep); }
.audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.audience-grid article { padding:28px; background:#fff; border:1px solid #dce6f1; border-radius:14px; }
.audience-grid h3 { font-size:19px; line-height:1.25; margin:0 0 18px; color:var(--cx-deep); }
.audience-grid p { font-size:16px; line-height:1.6; color:#4b6079; margin:0; }
.status-section { padding:72px clamp(24px,5vw,78px); background:var(--cx-deep); color:#fff; display:grid; grid-template-columns:minmax(260px,.72fr) 1.28fr; gap:64px; }
.status-section h2 { font-size:clamp(30px,3.1vw,48px); line-height:1.08; margin:0; max-width:520px; }
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.status-grid article{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;background:rgba(255,255,255,.045)}.status-grid article>strong{display:block;font-size:15px;margin-bottom:10px}.status-grid p{font-size:12px;line-height:1.55;color:#b7c9da;margin:12px 0 0}.status-chip{font-size:8px;font-weight:900;letter-spacing:.08em;padding:5px 7px;border-radius:999px}.status-chip.live{background:#143f2b;color:#73e1a1}.status-chip.plan{background:#2a3153;color:#b9c4ff}.status-chip.pending{background:#503e18;color:#f5d77e}
.marketing-footer { min-height:90px; padding:0 clamp(24px,5vw,78px); display:flex; align-items:center; gap:18px; border-top:1px solid #e3e9f0; }.marketing-footer strong{letter-spacing:.18em}.marketing-footer span{color:#7c8b9d;font-size:12px}.marketing-footer a{margin-left:auto;color:var(--cx-primary);font-weight:800;font-size:12px}

/* CIREXON workspace rebrand */
.sidebar { background:var(--cx-deep-2); }
.brand-mark { background:var(--cx-primary); }
.side-code { color:#9bc5ff; }
.topbar strong,.page-title,.kpi,.kpi-sm,.project-head h1,.metric .value { color:var(--cx-deep); }
.btn:not(.secondary) { background:var(--cx-primary); }
.progress-value { background:var(--cx-primary); }
.module-pick.selected { box-shadow:0 0 0 2px var(--cx-primary) inset; border-color:var(--cx-primary); }

@media(max-width:1100px){.marketing-links{display:none}.marketing-hero{grid-template-columns:1fr}.marketing-hero-panel{padding:20px 24px 60px;min-height:480px}.lifecycle-strip{grid-template-columns:repeat(3,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.audience-section,.status-section{grid-template-columns:1fr}}
@media(max-width:700px){.marketing-nav{padding:0 14px}.marketing-brand small{display:none}.small-cta{padding:0 12px}.marketing-hero-copy{padding:52px 20px}.marketing-hero h1{font-size:44px}.marketing-hero p{font-size:16px}.hero-proof{grid-template-columns:1fr}.marketing-hero-panel{display:none}.lifecycle-strip{grid-template-columns:1fr}.lifecycle-card{min-height:auto}.why-grid,.audience-grid,.status-grid{grid-template-columns:1fr}.why-section,.audience-section,.status-section{padding:50px 20px}.marketing-footer{padding:0 20px}.marketing-footer span{display:none}}

/* Reference direction: photographic hero, device previews, compact lifecycle cards. */
.marketing-page{background:#f7f9fd}
.marketing-nav{height:70px;box-shadow:0 2px 14px rgba(9,32,63,.07)}
.marketing-hero{
  min-height:548px;
  grid-template-columns:minmax(0,53%) minmax(0,47%);
  position:relative;
  isolation:isolate;
  background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.89) 27%,rgba(255,255,255,.25) 58%,rgba(8,34,67,.06) 100%),url('/cirexon-construction-hero.png');
  background-size:cover;
  background-position:center 48%;
}
.marketing-hero-copy{position:relative;z-index:3;align-self:start;padding:clamp(48px,5.4vw,78px) 20px 70px clamp(28px,5.5vw,88px)}
.marketing-hero h1{max-width:660px;font-size:clamp(43px,4.5vw,67px);line-height:1.02;letter-spacing:-.045em}
.marketing-hero h2{font-size:clamp(20px,2vw,27px);margin:20px 0 12px}
.marketing-hero p{max-width:505px;color:#2e4058;font-size:clamp(15px,1.3vw,18px);line-height:1.47}
.marketing-actions{margin-top:24px}
.marketing-ghost{box-shadow:0 4px 15px rgba(9,32,63,.09)}
.hero-values{position:absolute;top:34px;right:clamp(20px,3vw,52px);z-index:3;display:grid;gap:11px;width:190px;color:white;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.hero-values span{display:grid;grid-template-columns:26px 1fr;column-gap:8px;align-items:start}
.hero-values svg{grid-row:span 2;border:1px solid rgba(255,255,255,.8);border-radius:6px;padding:3px;width:26px;height:26px}
.hero-values strong{font-size:10px;line-height:1.2}.hero-values small{font-size:9px;line-height:1.25}
.marketing-hero-panel{z-index:4;min-height:548px;padding:110px clamp(22px,4vw,65px) 12px 0;place-items:end center}
.marketing-hero-panel::before{display:none}
.mock-device{width:min(590px,100%);filter:drop-shadow(0 20px 28px rgba(5,27,55,.36))}
.mock-window{transform:none;border-radius:10px 10px 2px 2px;width:100%;min-height:0;border:9px solid #172231;box-shadow:none}
.mock-top{height:33px;font-size:10px;padding:0 10px}
.mini-mark{width:18px;height:18px;font-size:11px;border-radius:3px}
.mock-body{padding:16px;background:#f8fbff}
.mock-title strong{font-size:17px}
.mock-title>b{font-size:18px}
.mock-kpis{margin-top:12px}
.mock-kpis span{padding:9px}
.mock-kpis strong{font-size:14px}
.mock-chart{height:82px;margin:12px 0}
.mock-modules{gap:5px}
.mock-modules span{padding:5px}
.mock-device-base{height:12px;background:linear-gradient(#b8c4d0,#657487);width:112%;margin-left:-6%;border-radius:1px 1px 48% 48%;box-shadow:0 2px 1px #455262}
.mock-phone{position:absolute;right:clamp(2px,1vw,18px);bottom:-48px;width:125px;min-height:235px;padding:25px 9px 12px;border:6px solid #102035;border-radius:23px;background:#fff;box-shadow:0 12px 24px rgba(7,27,49,.27);font-size:8px;color:#0a2540}
.mock-phone-notch{position:absolute;top:2px;left:32%;width:36%;height:7px;border-radius:8px;background:#102035}
.mock-phone>strong{display:block;color:#0865ff;letter-spacing:.1em;font-size:10px;margin-bottom:14px}
.mock-phone>small,.mock-phone>b,.mock-phone>em{display:block;font-style:normal;margin-bottom:6px}
.mock-phone-bar{height:5px;border-radius:5px;background:linear-gradient(90deg,#0865ff 82%,#e5edf7 82%);margin:8px 0}
.mock-phone>span{display:block;border-top:1px solid #e4eaf1;padding:6px 0;font-size:7px}
.lifecycle-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;background:transparent;border:0;margin:-4px clamp(20px,5vw,74px) 0;position:relative;z-index:6;box-shadow:0 10px 25px rgba(12,40,70,.12)}
.lifecycle-card{min-height:156px;padding:17px 12px 13px;background:#fff;box-shadow:none}
.lifecycle-card::before{display:none}
.lifecycle-card h3{font-size:17px;margin:6px 0 2px}
.lifecycle-card h4{margin:0 0 8px;font-size:11px}
.lifecycle-card p{font-size:11px;line-height:1.3;margin:0 0 6px}
.lifecycle-card>small{font-size:8px}
.lifecycle-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;color:#fff;background:#0865ff}
.lifecycle-card:nth-child(2) .lifecycle-icon{background:#4da3ff}
.lifecycle-card:nth-child(3) .lifecycle-icon{background:#10b981}
.lifecycle-card:nth-child(4) .lifecycle-icon{background:#ff980b}
.lifecycle-card:nth-child(5) .lifecycle-icon{background:#8b5cf6}
.lifecycle-card:nth-child(6) .lifecycle-icon{background:#0da7a3}
.why-section{padding-top:56px;background:#fff}
.why-grid{grid-template-columns:repeat(4,1fr);border:0;background:#fff}
.why-grid article{padding:18px;min-height:150px}
.why-grid article>span{display:grid;place-items:center;width:28px;height:28px;color:#0865ff;border:1px solid #d7e7ff;border-radius:6px}
.why-grid h3{margin:14px 0 8px}
@media(max-width:1100px){
  .marketing-hero{grid-template-columns:minmax(0,50%) minmax(0,50%);min-height:530px}
  .marketing-hero-panel{min-height:530px;padding-top:190px}
  .hero-values{top:20px;right:18px;width:170px}
  .lifecycle-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .marketing-hero{display:block;min-height:0;background-position:58% center;background-image:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.73)),url('/cirexon-construction-hero.png')}
  .marketing-hero-copy{padding:52px 22px 24px}
  .marketing-hero h1{font-size:clamp(42px,9vw,62px)}
  .hero-values{display:none}
  .marketing-hero-panel{display:grid;min-height:0;padding:0 34px 48px 22px}
  .mock-phone{right:12px;bottom:12px;transform:scale(.82);transform-origin:bottom right}
  .lifecycle-strip{margin:0 14px;grid-template-columns:repeat(2,1fr)}
  .lifecycle-card{min-height:150px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:470px){.marketing-hero-panel{padding-right:22px}.mock-phone{display:none}.lifecycle-strip,.why-grid{grid-template-columns:1fr}.lifecycle-card{min-height:0}.marketing-brand strong{font-size:17px}}