/* Founder’s Desk V0: a separate founder-product visual system — graphite structure, warm paper, vermilion proof marks, and unhurried editorial rhythm. */
:root { --ink:#1a262e; --ink-soft:#536168; --paper:#f2efe7; --card:#fbfaf6; --line:#d7d3c8; --accent:#da563d; --mint:#3e7c70; --blue:#315b73; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } .grain { position:fixed; z-index:-1; inset:0; opacity:.45; background-image:linear-gradient(rgba(38,63,67,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(38,63,67,.032) 1px,transparent 1px); background-size:36px 36px; pointer-events:none; }
.site-header { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); padding:0 5.5vw; background:rgba(242,239,231,.9); backdrop-filter:blur(12px); }.wordmark { display:flex; align-items:center; gap:9px; color:var(--ink); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; line-height:1.05; text-decoration:none; }.wordmark b { color:var(--accent); }.wordmark-mark { display:grid; width:27px; height:27px; grid-template-columns:repeat(3,1fr); align-items:center; gap:3px; padding:5px; border:1px solid #c9c6bd; border-radius:4px; }.wordmark-mark i { display:block; height:100%; border-radius:1px; background:var(--ink); }.wordmark-mark i:nth-child(2) { height:62%; background:var(--mint); }.wordmark-mark i:nth-child(3) { height:35%; background:var(--accent); }.site-header nav { display:flex; gap:26px; }.site-header nav a { color:#5d686b; font-size:11px; font-weight:700; text-decoration:none; }.site-header nav a:hover { color:var(--accent); }.safe-label { display:flex; align-items:center; gap:6px; color:#568276; font-family:var(--mono); font-size:8px; letter-spacing:.08em; }.safe-label i { width:7px; height:7px; border-radius:50%; background:#64ae93; box-shadow:0 0 0 3px rgba(100,174,147,.13); }
main { max-width:1450px; margin:0 auto; }.hero { position:relative; display:grid; grid-template-columns:80px minmax(0,1fr) 292px; gap:34px; padding:96px 5.5vw 70px; }.hero::before { position:absolute; top:96px; left:0; width:9.3vw; height:3px; content:""; background:var(--accent); }.hero-index { padding-top:13px; color:#7f8b8a; font-family:var(--mono); font-size:9px; letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); }.hero-index b { color:var(--accent); font-size:13px; }.eyebrow { margin:0 0 11px; color:#667b78; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.12em; }.hero h1 { max-width:800px; margin:0; font-size:clamp(3rem,6.1vw,6.25rem); letter-spacing:-.078em; line-height:.86; }.hero h1 em,.section h2 em,.next-copy h2 em { color:var(--accent); font-style:normal; }.hero-deck { max-width:670px; margin:25px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.7; }.hero-chips { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:25px; color:#667673; font-family:var(--mono); font-size:8px; letter-spacing:.03em; }.hero-chips span { display:flex; align-items:center; gap:5px; }.hero-chips i { width:6px; height:6px; border-radius:50%; background:var(--mint); }.hero-chips span:nth-child(2) i { background:var(--accent); }.hero-chips span:nth-child(3) i { background:#7d91a2; }.focus-card { align-self:end; display:grid; gap:17px; border-top:3px solid var(--accent); padding:20px; background:var(--card); box-shadow:9px 9px 0 rgba(43,54,57,.06); }.focus-card p,.focus-card span { margin:0; color:#7a8584; font-family:var(--mono); font-size:8px; letter-spacing:.08em; line-height:1.55; }.focus-card strong { font-size:17px; letter-spacing:-.04em; line-height:1.25; }
.section { border-top:1px solid var(--line); padding:64px 5.5vw; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:30px; }.section h2,.next-copy h2 { max-width:720px; margin:0; font-size:clamp(2rem,3.7vw,3.75rem); letter-spacing:-.065em; line-height:.94; }.section-note { max-width:260px; margin:0; color:#6e7b7d; font-size:10px; line-height:1.55; text-align:right; }.section-note b { color:#3c5e59; }
.pulse-layout { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr); gap:30px; }.update-list { display:grid; border-top:1px solid #c8c6be; }.update { position:relative; display:grid; grid-template-columns:36px 100px minmax(0,1fr) 15px; gap:11px; align-items:start; min-height:104px; border:0; border-bottom:1px solid #c8c6be; padding:17px 14px 17px 0; color:var(--ink); background:transparent; text-align:left; transition:padding .16s ease,background .16s ease; }.update:hover,.update.active { padding-left:13px; background:rgba(255,255,255,.48); }.update.active::before { position:absolute; top:0; bottom:0; left:0; width:3px; content:""; background:var(--accent); }.update-marker { padding-top:3px; color:#919b96; font-family:var(--mono); font-size:10px; }.state { display:inline-flex; width:max-content; align-items:center; border-radius:3px; padding:4px 5px; font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.06em; }.state.live { color:#367666; background:#e5f2ec; }.state.proof { color:#a2503c; background:#f9e6df; }.update strong { display:block; grid-column:3; margin-top:-21px; font-size:14px; letter-spacing:-.025em; line-height:1.28; }.update small { grid-column:3; color:#778483; font-size:9px; line-height:1.5; }.arrow { align-self:center; color:#6b7c79; }.translation-card { min-height:452px; border:1px solid #263f4d; padding:27px; color:#e7f0ec; background:radial-gradient(circle at 100% 0,#466e75 0,transparent 38%),#203d4c; box-shadow:12px 12px 0 rgba(31,50,58,.1); }.translation-meta { display:flex; align-items:center; justify-content:space-between; }.translation-meta > span:last-child { color:#a8c2bc; font-family:var(--mono); font-size:8px; letter-spacing:.08em; }.translation-card h3 { margin:28px 0 30px; color:#fff; font-size:27px; letter-spacing:-.05em; line-height:1.08; }.translation-card dl { margin:0; }.translation-card dl div { display:grid; grid-template-columns:88px 1fr; gap:13px; border-top:1px solid rgba(227,240,234,.16); padding:14px 0; }.translation-card dt { color:#9bbcb4; font-family:var(--mono); font-size:8px; letter-spacing:.06em; }.translation-card dd { margin:0; color:#e0ebe7; font-size:11px; line-height:1.55; }
.reality-section { background:rgba(255,255,255,.22); }.reality-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid #ccc9c0; background:#ccc9c0; }.reality-card { min-height:298px; padding:23px; background:var(--card); }.reality-card.next { background:#f5f0e5; }.reality-card.later { background:#e8ebe7; }.reality-card p,.demo-asset > p,.conversation-card > p,.next-action > p { margin:0; color:#7a8582; font-family:var(--mono); font-size:8px; letter-spacing:.1em; }.reality-card h3 { margin:21px 0 15px; font-size:19px; letter-spacing:-.04em; line-height:1.2; }.reality-card ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.reality-card li { display:flex; align-items:flex-start; gap:7px; color:#677574; font-size:10px; line-height:1.4; }.reality-card li::before { content:"•"; color:var(--mint); }.reality-card.next li::before { color:#b67e41; }.reality-card.later li::before { color:#848b8b; }
.market-layout { display:grid; grid-template-columns:.83fr 1.17fr; gap:24px; }.demo-asset { display:grid; align-content:start; gap:15px; border:1px solid #ced8d2; padding:25px; background:linear-gradient(140deg,#f7fbf8,#eaf4ef); }.asset-icon { display:grid; width:37px; height:37px; place-items:center; color:var(--mint); border:1px solid #a9d0c0; background:#f9fdfb; font-size:20px; }.demo-asset h3,.conversation-card h3 { max-width:440px; margin:4px 0; font-size:25px; letter-spacing:-.05em; line-height:1.1; }.demo-asset > p:not(:first-child) { max-width:380px; margin:0; color:#60716d; font-size:11px; line-height:1.6; }.button-dark { display:flex; width:max-content; align-items:center; gap:12px; margin-top:7px; padding:12px 14px; color:#fff; background:#203d4c; font-size:10px; font-weight:800; text-decoration:none; }.button-dark:hover { background:var(--accent); }.conversation-card { padding:25px; color:#edf3ef; background:#243d45; }.conversation-card > p { color:#a8c0ba; }.conversation-card h3 { max-width:510px; color:#fff; }.conversation-card ol { display:grid; gap:0; margin:25px 0 0; padding:0; list-style:none; }.conversation-card li { display:grid; grid-template-columns:36px 1fr; gap:12px; border-top:1px solid rgba(227,240,234,.16); padding:13px 0; color:#d8e5e0; font-size:11px; line-height:1.5; }.conversation-card b { color:#82c3aa; font-family:var(--mono); font-size:9px; }
.next-section { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:50px; border-bottom:1px solid var(--line); }.next-rule { position:absolute; top:64px; left:0; width:62px; height:3px; background:var(--accent); }.next-copy h2 { margin-top:19px; }.next-copy > p:last-child { max-width:560px; margin:21px 0 0; color:#647371; font-size:13px; line-height:1.7; }.next-action { align-self:end; display:grid; gap:14px; border-left:3px solid var(--accent); padding:19px; background:var(--card); }.next-action strong { font-size:16px; line-height:1.35; }.next-action > span { color:#667876; font-size:10px; line-height:1.5; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1450px; margin:0 auto; padding:22px 5.5vw; color:#75817e; font-size:9px; } footer span { font-family:var(--mono); font-size:8px; letter-spacing:.1em; } footer p { max-width:520px; margin:0; text-align:center; } footer a { color:#315e55; font-size:10px; font-weight:800; text-decoration:none; }
@media (max-width:1000px) { .site-header { padding:0 28px; }.hero { grid-template-columns:45px minmax(0,1fr); padding-right:28px; padding-left:28px; }.focus-card { grid-column:2; max-width:450px; }.section { padding-right:28px; padding-left:28px; }.pulse-layout { grid-template-columns:1fr; }.reality-grid { grid-template-columns:1fr; }.market-layout,.next-section { grid-template-columns:1fr; }.next-action { align-self:auto; max-width:500px; }.next-rule { left:28px; }.site-header nav { gap:15px; } }
@media (max-width:640px) { .site-header { min-height:64px; padding:0 17px; }.site-header nav { display:none; }.safe-label { font-size:7px; }.hero { grid-template-columns:1fr; padding:57px 20px 40px; }.hero::before { top:57px; width:52px; }.hero-index { display:none; }.hero h1 { font-size:clamp(3rem,14vw,4.3rem); }.hero-deck { font-size:12px; }.focus-card { grid-column:auto; margin-top:29px; }.section { padding:42px 20px; }.section-heading { align-items:flex-start; }.section-note { display:none; }.section h2,.next-copy h2 { font-size:clamp(2rem,10vw,3rem); }.update { grid-template-columns:29px 82px minmax(0,1fr) 13px; gap:7px; }.update strong { font-size:12px; }.update small { font-size:8px; }.translation-card { min-height:0; padding:21px; }.translation-card h3 { font-size:24px; }.translation-card dl div { grid-template-columns:73px 1fr; gap:9px; }.reality-card { min-height:auto; }.market-layout { gap:16px; }.demo-asset h3,.conversation-card h3 { font-size:22px; }.next-rule { top:42px; left:20px; }.next-section { gap:28px; }.next-action { padding:16px; } footer { display:grid; gap:9px; padding:20px; } footer p { text-align:left; } }
@media (prefers-reduced-motion:no-preference) { .update { transition:padding .16s cubic-bezier(.23,1,.32,1),background .16s ease; } .button-dark { transition:background .16s ease,transform .16s ease; }.button-dark:active { transform:scale(.97); } }