:root { --ink:#14232b; --paper:#f7f7f2; --accent:#e7773f; --soft:#dce7e5; --muted:#51616a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Inter,system-ui,sans-serif; }
a { color:inherit; }
.demo-bar { padding:.65rem 1rem; background:#111; color:#fff; text-align:center; font-size:.9rem; }
.demo-bar a { color:#fff; font-weight:800; }
.demo-nav,.demo-wrap { width:min(1120px,calc(100% - 2rem)); margin:auto; }
.demo-nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.demo-nav a { text-decoration:none; }
.demo-brand { font-family:Georgia,serif; font-size:1.3rem; font-weight:800; }
.demo-links { display:flex; gap:1rem; align-items:center; font-size:.95rem; }
.demo-hero { padding:5.5rem 0 4rem; background:linear-gradient(120deg,var(--soft),var(--paper) 58%); }
.demo-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center; }
.eyebrow { margin:0 0 .7rem; color:var(--accent); font-size:.82rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.05; margin:0 0 1rem; }
h1 { max-width:760px; font-size:clamp(2.8rem,7vw,5.3rem); letter-spacing:-.04em; }
h2 { font-size:clamp(2rem,4vw,3.2rem); }
h3 { font-size:1.25rem; }
.lead { max-width:640px; color:var(--muted); font-size:1.2rem; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:.75rem 1rem; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; font-weight:800; text-decoration:none; }
.button.alt { background:transparent; color:var(--ink); }
.demo-card { padding:1.5rem; border:1px solid color-mix(in srgb,var(--ink) 15%,transparent); border-radius:10px; background:rgba(255,255,255,.76); box-shadow:0 18px 42px rgba(20,35,43,.09); }
.demo-section { padding:4.6rem 0; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature { min-height:170px; padding:1.25rem; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); border-radius:8px; background:#fff; }
.feature p { color:var(--muted); }
.demo-band { padding:4.6rem 0; background:var(--ink); color:var(--paper); }
.demo-band p { max-width:700px; color:color-mix(in srgb,var(--paper) 76%,transparent); }
.demo-footer { padding:2rem 0; color:var(--muted); font-size:.94rem; }
.trade { --ink:#18212f; --paper:#fbf8f1; --accent:#d66729; --soft:#e4e9ec; }
.local { --ink:#0b414b; --paper:#f8fffd; --accent:#117f8d; --soft:#d3ece6; }
.maker { --ink:#40233c; --paper:#fffaf5; --accent:#b65c45; --soft:#f3ddd0; }
.maker h1,.maker .demo-brand,.publishing h1,.publishing .demo-brand { font-family:Georgia,serif; letter-spacing:-.02em; }
.professional { --ink:#263044; --paper:#f6f7fa; --accent:#6c7893; --soft:#e2e6ef; }
.professional .demo-hero { background:var(--paper); border-bottom:1px solid #d5d9e1; }
.app { --ink:#f4f7ff; --paper:#10162a; --accent:#7ae2b8; --soft:#1d2947; --muted:#c0cadf; background:var(--paper); color:var(--ink); }
.app .demo-nav,.app .demo-hero { background:#10162a; }
.app .demo-hero { background:radial-gradient(circle at 78% 20%,#233c62,transparent 33%),#10162a; }
.app .demo-card,.app .feature { background:#18213a; border-color:#334360; box-shadow:none; }
.app .demo-band { background:#0a0e1b; }
.app .button { background:var(--accent); border-color:var(--accent); color:#10162a; }
.app .button.alt { background:transparent; color:var(--ink); border-color:#7685a4; }
.publishing { --ink:#153747; --paper:#f9f5ed; --accent:#be694d; --soft:#d7e7e8; }
.gallery { padding:4rem 0; }
.gallery-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.gallery-item { display:block; min-height:190px; padding:1.5rem; border:1px solid #cad4d3; border-radius:10px; background:#fff; text-decoration:none; }
.gallery-item:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(20,35,43,.1); }
@media (max-width:760px) { .demo-nav { padding:1rem 0; align-items:flex-start; flex-direction:column; } .demo-links { width:100%; overflow:auto; } .demo-grid,.three,.gallery-list { grid-template-columns:1fr; } .demo-hero,.demo-section,.demo-band { padding:3.5rem 0; } }