:root { color-scheme: light; --bg:#101010; --surface:#fff; --ink:#111; --muted: color-mix(in srgb, var(--ink) 68%, transparent); --soft: color-mix(in srgb, var(--surface) 74%, var(--accent2)); --accent:#f97316; --accent2:#fde68a; --radius: 8px; font-family: var(--font-body); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-body); letter-spacing: 0; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; opacity:.42; background: var(--texture); mix-blend-mode: screen; }
body[data-type="serif"] { --font-body: Charter, Georgia, 'Times New Roman', serif; --font-display: Georgia, 'Times New Roman', serif; }
body[data-type="mono"] { --font-body: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; --font-display: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
body[data-type="sans"] { --font-body: Avenir Next, Trebuchet MS, Verdana, sans-serif; --font-display: Avenir Next, Trebuchet MS, Verdana, sans-serif; }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 42px; position: relative; z-index: 1; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; color: color-mix(in srgb, var(--surface) 82%, white); margin-bottom: 26px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; text-transform:uppercase; font-size:.78rem; }
.mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--surface) 30%, transparent); background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 10%, transparent); }
.domain { font-size:.82rem; opacity:.76; }
.hero { background: var(--surface); border-radius: var(--radius); overflow:hidden; min-height: 520px; box-shadow: 0 24px 80px rgb(0 0 0 / .24); outline:1px solid color-mix(in srgb, white 10%, transparent); }
.hero-inner { min-height: 520px; display:grid; grid-template-columns: 1.08fr .92fr; }
.copy { padding: clamp(28px, 5vw, 58px); display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
.kicker { margin:0; color: var(--accent); font-weight:900; text-transform:uppercase; font-size:.76rem; }
h1 { margin:0; font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7.2rem); line-height:.88; letter-spacing:0; max-width:780px; }
.promise { color: var(--muted); max-width: 660px; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height:1.55; margin: 22px 0 0; }
.hero-tools { display:flex; flex-wrap:wrap; gap:10px; }
.chip { border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); padding:9px 11px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, white); font-size:.82rem; font-weight:800; }
.visual { min-height: 520px; padding: clamp(22px, 4vw, 44px); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, var(--bg)), color-mix(in srgb, var(--accent2) 18%, var(--bg))); color: var(--surface); position:relative; overflow:hidden; }
.visual::after { content:""; position:absolute; inset:14px; border:1px solid color-mix(in srgb, var(--surface) 22%, transparent); border-radius: calc(var(--radius) - 2px); pointer-events:none; }
.motif { height:100%; min-height:430px; display:grid; gap:14px; align-content:center; position:relative; z-index:1; }
.metric-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.metric { background: rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .2); border-radius: var(--radius); padding:14px; backdrop-filter: blur(8px); }
.metric strong { display:block; font-size: clamp(1.2rem, 2vw, 1.75rem); font-variant-numeric: tabular-nums; }
.metric span { opacity:.78; font-size:.74rem; text-transform:uppercase; }
.diagram { display:grid; gap:10px; }
.node { background: rgb(255 255 255 / .14); border:1px solid rgb(255 255 255 / .24); padding:14px 16px; border-radius: var(--radius); font-weight:900; position:relative; }
.node::before { content:""; position:absolute; left:-22px; top:50%; width:18px; height:1px; background:rgb(255 255 255 / .34); }
.node:first-child::before { display:none; }
.panel-band { display:grid; grid-template-columns: .85fr 1.15fr; gap:18px; margin-top:18px; }
.panel { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: 0 18px 60px rgb(0 0 0 / .18); outline:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.panel h2 { margin:0 0 16px; font-size:1rem; text-transform:uppercase; color: var(--accent); }
.workflow { list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:item; }
.workflow li { counter-increment:item; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; color:var(--muted); }
.workflow li::before { content: counter(item, decimal-leading-zero); width:42px; height:42px; display:grid; place-items:center; background: var(--ink); color: var(--surface); border-radius: 50%; font-weight:900; font-size:.78rem; }
.cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.capability { min-height: 158px; border-radius: var(--radius); border:1px solid color-mix(in srgb, var(--ink) 13%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white), color-mix(in srgb, var(--accent2) 12%, var(--surface))); padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
.capability b { color: var(--accent); font-size:.75rem; text-transform:uppercase; }
.capability p { margin: 22px 0 0; line-height:1.45; }
.workspace { margin-top:18px; display:grid; grid-template-columns: 1fr 320px; gap:18px; }
textarea { width:100%; min-height:156px; resize:vertical; padding:14px; border-radius: var(--radius); border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--surface) 88%, white); color:inherit; font:inherit; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
button { border:0; border-radius: var(--radius); padding:10px 13px; background: var(--ink); color:var(--surface); font:inherit; font-weight:900; cursor:pointer; transition-property: scale, opacity, background-color; transition-duration:150ms; transition-timing-function:cubic-bezier(0.2,0,0,1); }
button.secondary { background: color-mix(in srgb, var(--accent) 76%, black); }
button:active { scale:.96; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent); outline-offset:2px; }
.checks { display:grid; gap:10px; }
.checks label { display:flex; gap:10px; align-items:flex-start; line-height:1.35; color:var(--muted); }
input { accent-color: var(--accent); }
.footer { color: color-mix(in srgb, var(--surface) 74%, white); margin-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.83rem; }
[data-variant="diff-studio"] .visual { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 42px), linear-gradient(140deg, #0f172a, #172554); }
[data-variant="diff-studio"] .node { font-size:.86rem; border-left:4px solid var(--accent2); }
[data-variant="node-map"] .motif { grid-template-columns:1fr 1fr; align-content:center; }
[data-variant="node-map"] .diagram { transform: rotate(-4deg); }
[data-variant="terminal-map"] .visual { background-image: linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(140deg, #08111f, #1e3a8a); background-size: 28px 28px, 28px 28px, auto; }
[data-variant="radar"] .visual::before { content:""; position:absolute; width:380px; aspect-ratio:1; border-radius:50%; border:1px solid rgb(255 255 255 / .25); left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 58px rgb(255 255 255 / .05), 0 0 0 118px rgb(255 255 255 / .035); }
[data-variant="library"] .cards { grid-template-columns: 1.2fr .9fr .9fr; }
[data-variant="scanner"] .visual { background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / .08), rgb(255 255 255 / .08) 1px, transparent 1px, transparent 14px), linear-gradient(140deg, #082f49, #1e1b4b); }
[data-variant="finance-map"] .metric-grid, [data-variant="dispatch"] .metric-grid { grid-template-columns:1fr; }
[data-variant="vault"] .visual::before, [data-variant="crypto-vault"] .visual::before { content:""; position:absolute; inset:80px; border:22px solid rgb(255 255 255 / .14); transform:rotate(45deg); }
[data-variant="deck"] .capability:nth-child(2) { transform: translateY(12px); }
[data-variant="workflow-rail"] .workflow li::before { border-radius: var(--radius); }
@media (max-width: 900px) { .hero-inner, .panel-band, .workspace { grid-template-columns:1fr; } .visual, .hero, .hero-inner { min-height:auto; } .cards { grid-template-columns:1fr; } .metric-grid { grid-template-columns:1fr; } .shell { width:min(100% - 22px, 1180px); } }
@media (prefers-reduced-motion: no-preference) { .hero { animation: rise .6s cubic-bezier(0.2,0,0,1) both; } .panel { animation: rise .55s cubic-bezier(0.2,0,0,1) both; } .panel:nth-of-type(2) { animation-delay:.08s; } @keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }