.demo-header nav { display: flex; align-items: center; gap: 24px; }
.demo-header nav a { text-decoration: none; color: var(--muted); font-size: .83rem; }
.demo-header nav .button { color: #100b06; }
.demo-hero { width: min(100% - 40px, var(--max)); margin: 0 auto; min-height: 690px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(40px, 7vw, 100px); padding: 80px 0; }
.demo-hero h1 { font-size: clamp(3.3rem, 6vw, 6.1rem); }
.demo-hero h1 em { color: var(--orange); font-style: normal; }
.demo-hero-copy > p:not(.eyebrow):not(.synthetic-alert) { max-width: 660px; margin: 28px 0; color: #ccc4b8; font-size: 1.15rem; }
.demo-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.synthetic-alert { margin: 44px 0 0; padding: 17px 20px; border-left: 2px solid var(--orange); background: rgba(240,120,36,.07); color: #bdb4a7; font-size: .8rem; max-width: 680px; }
.synthetic-alert strong { color: var(--orange); letter-spacing: .12em; margin-right: 8px; }
.hero-proofline { margin: 30px 0 0; padding: 13px 0 0 16px; border-left: 1px solid rgba(240,120,36,.55); color: #e7ded2 !important; font-size: .86rem !important; letter-spacing: .01em; }
.hero-proofline span { display: block; color: var(--orange); font: .64rem ui-monospace, monospace; letter-spacing: .14em; margin-bottom: 4px; }
.demo-hero-visual { height: min(56vw, 560px); min-height: 380px; position: relative; border: 1px solid rgba(240,120,36,.28); background: linear-gradient(160deg, rgba(9,8,6,.05), rgba(9,8,6,.7)), url('/assets/assetguard-platform.webp') center / cover; filter: saturate(.75); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.demo-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,120,36,.12) 1px, transparent 1px), linear-gradient(rgba(240,120,36,.12) 1px, transparent 1px); background-size: 20% 20%; opacity: .45; pointer-events: none; }
.visual-screen { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; border: 1px solid rgba(240,120,36,.42); background: rgba(9,8,6,.82); backdrop-filter: blur(13px); padding: 20px; display: grid; }
.visual-screen span, .visual-screen small { font: .68rem ui-monospace, monospace; color: var(--orange); letter-spacing: .1em; }
.visual-screen strong { font-family: 'Clash Display', sans-serif; font-size: 2.5rem; line-height: 1.15; margin: 13px 0; }
.visual-screen small { color: var(--muted); }
.signal-band { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(38px, 7vw, 90px); align-items: center; padding: 72px max(20px, calc((100vw - var(--max))/2)); border-block: 1px solid var(--line); background: #0c0a08; }
.signal-band-heading h2 { font-size: clamp(2.5rem, 4vw, 4.3rem); }
.signal-band-heading > p:last-child { color: var(--muted); max-width: 470px; margin: 24px 0 0; }
.signal-band-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.signal-band-grid article { min-height: 155px; padding: 22px; background: #17130e; }
.signal-band-grid article > span { color: var(--orange); font: .64rem ui-monospace, monospace; letter-spacing: .1em; }
.signal-band-grid strong { display: block; margin: 20px 0 5px; font: 1.2rem 'Clash Display', sans-serif; }
.signal-band-grid p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.record-section { border-block: 1px solid var(--line); background: radial-gradient(circle at 75% 10%, rgba(240,120,36,.1), transparent 34%), #100e0b; padding: 100px max(20px, calc((100vw - var(--max))/2)); }
.record-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: end; }
.record-heading h2 { font-size: clamp(2.7rem, 4.8vw, 5rem); }
.record-heading > p { color: var(--muted); margin: 0; max-width: 440px; }
.record-toolbar { display: flex; margin: 55px 0 14px; border-bottom: 1px solid rgba(240,120,36,.4); }
.record-tab { flex: 1; min-height: 88px; padding: 20px; border: 1px solid var(--line); background: #17130e; color: var(--muted); text-align: left; cursor: pointer; display: grid; gap: 6px; }
.record-tab + .record-tab { border-left: 0; }
.record-tab.is-active { background: #24180e; border-color: rgba(240,120,36,.7); box-shadow: inset 0 3px var(--orange); color: var(--paper); }
.record-tab span { color: var(--orange); font: .68rem ui-monospace, monospace; letter-spacing: .1em; }
.record-tab strong { font: 1.2rem 'Clash Display', sans-serif; }
.record-tab:focus-visible, #download-manifest:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 3px; }
.record-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; }
.asset-card, .condition-card { background: linear-gradient(140deg, #1a1712, #0b0a08); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); min-width: 0; }
.card-top { display: flex; justify-content: space-between; gap: 10px; color: var(--orange); font: .65rem ui-monospace, monospace; letter-spacing: .1em; }
.status-pill { color: #c9b9a6; border: 1px solid var(--line); padding: 4px 7px; }
.asset-schematic { height: 250px; margin: 32px 0 25px; position: relative; overflow: hidden; border: 1px solid rgba(240,120,36,.25); background: radial-gradient(circle at 50% 50%, rgba(240,120,36,.14), transparent 40%), repeating-linear-gradient(0deg, transparent 0 45px, rgba(240,120,36,.06) 45px 46px), repeating-linear-gradient(90deg, transparent 0 55px, rgba(240,120,36,.06) 55px 56px), #0c0c0b; }
.asset-schematic::before { content: ""; position: absolute; left: 14%; right: 14%; top: 22%; bottom: 23%; transform: skew(-14deg); border: 2px solid rgba(240,120,36,.55); background: linear-gradient(90deg, transparent 45%, rgba(240,120,36,.08) 46%, transparent 47%); }
.asset-schematic i { position: absolute; left: 24%; right: 24%; top: 49%; border-top: 1px dashed rgba(244,239,230,.55); }
.asset-schematic b { position: absolute; right: 26%; top: 46%; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 8px rgba(240,120,36,.16); }
.asset-schematic span { position: absolute; z-index: 1; color: #bfb5a6; font: .65rem ui-monospace, monospace; letter-spacing: .08em; }
.schematic-a { left: 19%; top: 28%; }
.schematic-zone { right: 10%; bottom: 12%; }
.asset-card h3 { margin: 0 0 8px; font-size: 1.4rem; }
.asset-card > p { margin: 0; color: var(--muted); font-size: .85rem; }
.asset-fields { display: grid; grid-template-columns: 1fr 1fr; margin: 25px 0 0; gap: 1px; background: var(--line); }
.asset-fields div { background: #0d0b08; padding: 13px; min-width: 0; }
.asset-fields dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.asset-fields dd { margin: 5px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.priority-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 55px 0 30px; }
.priority-row div { display: grid; gap: 6px; }
.priority-row small { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.priority-row strong { font: clamp(1.8rem, 3vw, 2.8rem) 'Clash Display', sans-serif; color: var(--orange); line-height: 1; }
.evidence-values { border-block: 1px solid var(--line); }
.evidence-values div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: .85rem; }
.evidence-values div:first-child { border-top: 0; }
.evidence-values span { color: var(--muted); }
.evidence-values strong { text-align: right; }
.condition-card > p { color: #cbc3b6; font-size: .94rem; min-height: 80px; }
.review-gate { border: 1px solid rgba(240,120,36,.35); padding: 17px 19px; display: grid; gap: 4px; }
.review-gate span { color: var(--orange); font: .65rem ui-monospace, monospace; letter-spacing: .1em; }
.review-gate strong { font-family: 'Clash Display'; }
.review-gate small { color: var(--muted); }
.lineage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin-top: 14px; }
.lineage-grid article { background: #17130e; padding: 22px; }
.lineage-grid span { color: var(--orange); font: .65rem ui-monospace, monospace; letter-spacing: .1em; }
.lineage-grid strong { display: block; margin: 18px 0 5px; font-family: 'Clash Display'; font-size: 1.07rem; }
.lineage-grid p { color: var(--muted); font-size: .78rem; margin: 0; }
.download-row { display: flex; justify-content: space-between; align-items: center; gap: 30px; border: 1px solid rgba(240,120,36,.38); padding: 25px 30px; margin-top: 16px; }
.download-row strong { font-family: 'Clash Display'; font-size: 1.2rem; }
.download-row p { color: var(--muted); margin: 4px 0 0; max-width: 780px; font-size: .85rem; }
.download-row button { white-space: nowrap; cursor: pointer; }
.pilot-section { padding: 115px max(20px, calc((100vw - var(--max))/2)); }
.pilot-heading { max-width: 900px; }
.pilot-heading h2 { font-size: clamp(2.8rem, 4.9vw, 5.2rem); }
.pilot-heading > p:last-child { color: var(--muted); font-size: 1.05rem; max-width: 750px; }
.pilot-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 50px 0 24px; }
.pilot-flow article { border-top: 2px solid var(--orange); background: #17130e; padding: 24px; min-height: 260px; }
.pilot-flow span { font: .7rem ui-monospace, monospace; color: var(--orange); }
.pilot-flow h3 { font-size: 1.35rem; margin: 50px 0 10px; }
.pilot-flow p { color: var(--muted); font-size: .86rem; margin: 0; }
.pilot-boundary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.pilot-boundary div { background: #0f0d0a; padding: 24px; }
.pilot-boundary span { font: .65rem ui-monospace, monospace; letter-spacing: .1em; color: var(--orange); }
.pilot-boundary p { color: #bfb7ab; margin: 12px 0 0; font-size: .83rem; }
.demo-close { padding: 100px max(20px, calc((100vw - var(--max))/2)); display: flex; justify-content: space-between; align-items: end; gap: 50px; background: var(--paper); color: #17130f; }
.demo-close .eyebrow { color: #ae5416; }
.demo-close h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
.demo-close p:last-child { color: #655e55; max-width: 650px; }
.demo-close-actions { display: grid; gap: 12px; min-width: 260px; }
.demo-close-actions a:not(.button) { text-decoration: none; font-family: 'Clash Display'; }
.demo-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 28px max(20px, calc((100vw - var(--max))/2)); color: var(--muted); font-size: .72rem; }
.demo-footer a { text-decoration: none; }
@media (max-width: 950px) { .demo-header nav a:not(.button) { display: none; } .demo-hero, .record-heading, .record-layout, .signal-band { grid-template-columns: 1fr; } .demo-hero-visual { height: 460px; } .lineage-grid, .pilot-flow { grid-template-columns: repeat(2, 1fr); } .pilot-boundary { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .demo-header .brand-mark { width: 30px; height: 30px; } .demo-header .brand strong { font-size: .78rem; } .demo-header .brand small { font-size: .51rem; } .demo-header nav .button { padding-inline: 9px; min-height: 38px; font-size: .72rem !important; white-space: nowrap; } .demo-hero { width: min(100% - 30px, var(--max)); padding: 55px 0 65px; min-height: auto; } .demo-hero h1 { font-size: clamp(2.9rem, 13vw, 4.2rem); } .demo-hero-visual { height: 360px; min-height: 0; } .demo-actions { flex-direction: column; align-items: stretch; } .demo-actions .button { width: 100%; } .hero-proofline { margin-top: 24px; } .signal-band { padding-block: 70px; } .signal-band-grid { grid-template-columns: 1fr; } .signal-band-grid article { min-height: 0; } .record-section, .pilot-section, .demo-close { padding-block: 80px; } .record-heading { gap: 20px; } .record-toolbar { margin-top: 35px; } .record-tab { padding: 13px; min-height: 80px; } .record-tab strong { font-size: 1rem; } .record-layout, .lineage-grid, .pilot-flow { grid-template-columns: 1fr; } .asset-schematic { height: 200px; } .priority-row strong { font-size: 1.7rem; } .download-row, .demo-close { flex-direction: column; align-items: stretch; } .download-row button { white-space: normal; } .pilot-flow article { min-height: 180px; } .pilot-flow h3 { margin-top: 25px; } .demo-footer { align-items: flex-start; flex-direction: column; } }