@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#182e36; --night:#13262d; --paper:#f6f1e9; --sand:#e7dfd2; --coral:#cf715c; --mint:#bfd6ca; --line:rgba(24,46,54,.17); --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(246,241,233,.93); position:sticky; top:0; z-index:3; backdrop-filter:blur(13px); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.055em; }
.brand-mark,.tiny-mark { width:25px; height:25px; display:inline-block; position:relative; transform:rotate(-10deg); }
.brand-mark i,.brand-mark b,.tiny-mark i,.tiny-mark b { position:absolute; display:block; border-radius:2px; transform:skewY(-24deg); }
.brand-mark i,.tiny-mark i { width:13px; height:22px; background:var(--coral); left:1px; top:2px; }
.brand-mark b,.tiny-mark b { width:14px; height:22px; background:var(--ink); right:0; top:0; }
.site-header nav { display:flex; gap:30px; font-size:13px; font-weight:600; }
.site-header nav a { opacity:.72; transition:opacity .18s ease; }.site-header nav a:hover { opacity:1; }
.header-cta { border:1px solid var(--ink); border-radius:999px; padding:10px 16px; font-size:13px; font-weight:600; }
.hero { min-height:720px; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr); gap:60px; padding:clamp(58px,9vw,124px) clamp(22px,8vw,124px) 72px; overflow:hidden; }
.hero-copy { max-width:650px; align-self:center; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:#58676a; font:500 11px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }.eyebrow span { width:18px; height:1px; background:var(--coral); }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:27px; font:700 clamp(50px,6vw,88px)/.93 var(--serif); letter-spacing:-.065em; } h1 em,h2 em { color:var(--coral); font-weight:600; }
.hero-text { max-width:540px; margin-bottom:31px; color:#526167; font-size:17px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }.button { display:inline-flex; gap:17px; align-items:center; justify-content:center; font-size:14px; font-weight:700; transition:transform .16s ease,background .16s ease; }.button:hover { transform:translateY(-2px); }.button-primary { min-height:52px; padding:0 22px; border-radius:3px; background:var(--ink); color:white; }.button-primary span,.button-buy span { font-size:20px; font-weight:400; }.button-link { color:#40595f; }.button-link span { color:var(--coral); }
.hero-facts { display:flex; gap:27px; margin:60px 0 0; padding-top:20px; border-top:1px solid var(--line); }.hero-facts div { max-width:124px; }.hero-facts dt { margin-bottom:5px; color:var(--coral); font:700 20px/1 var(--mono); }.hero-facts dd { margin:0; color:#657276; font-size:11px; line-height:1.35; }
.hero-art { min-height:520px; position:relative; display:grid; place-items:center; }.art-orbit { position:absolute; border-radius:50%; border:1px solid rgba(207,113,92,.35); }.orbit-one { width:470px; height:470px; background:linear-gradient(135deg,rgba(191,214,202,.72),rgba(191,214,202,0)); }.orbit-two { width:620px; height:620px; border-color:rgba(24,46,54,.12); }.proposal-card { z-index:1; width:min(330px,68vw); aspect-ratio:210/297; background:#fbfaf5; box-shadow:26px 30px 0 #dfd4c4, 0 24px 55px rgba(15,32,38,.2); padding:26px 25px; position:relative; overflow:hidden; transform:rotate(5deg); }.proposal-card:before { content:''; position:absolute; right:-60px; top:72px; width:220px; height:220px; background:var(--coral); clip-path:polygon(38% 0,100% 0,100% 100%,0 65%); opacity:.92; }.proposal-top { display:flex; align-items:center; gap:7px; font:500 6px var(--mono); letter-spacing:.12em; position:relative; z-index:1; }.proposal-top small { margin-left:auto; font-size:6px; }.tiny-mark { width:15px; height:15px; transform:scale(.62) rotate(-10deg); transform-origin:left center; margin-right:-5px; }.proposal-title { margin-top:48px; position:relative; z-index:1; }.proposal-title p,.proposal-total span,.proposal-client span { font:500 6px var(--mono); letter-spacing:.12em; }.proposal-title h2 { margin:8px 0; font:700 26px/.95 var(--serif); letter-spacing:-.07em; }.proposal-client { margin-top:30px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; }.proposal-client strong { font-size:11px; }.proposal-client small { font-size:7px; color:#667; }.proposal-items { margin-top:24px; display:grid; gap:10px; }.proposal-items span { height:22px; border-bottom:1px solid #c5c9c4; }.proposal-items span:before { content:''; display:block; width:55%; height:4px; background:#c7c9c1; }.proposal-total { padding-top:14px; margin-top:23px; display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--ink); }.proposal-total strong { font:700 15px var(--mono); }.art-caption { position:absolute; bottom:0; right:0; color:#68777a; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.proof-strip { min-height:106px; display:flex; justify-content:space-between; align-items:center; gap:30px; padding:25px clamp(22px,8vw,124px); background:var(--ink); color:white; }.proof-strip p { max-width:420px; margin:0; font:500 15px/1.45 var(--serif); letter-spacing:.01em; }.proof-strip div { display:flex; gap:22px; flex-wrap:wrap; }.proof-strip span { color:#dce6df; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.features { padding:124px clamp(22px,8vw,124px); }.section-heading { max-width:760px; }.section-heading h2 { margin:0; font:700 clamp(37px,4.2vw,60px)/1.02 var(--serif); letter-spacing:-.055em; }.feature-grid { margin-top:54px; display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-auto-rows:310px; gap:14px; }.feature { position:relative; overflow:hidden; padding:29px; border:1px solid var(--line); background:#faf7f0; }.feature-large { grid-row:span 2; background:#e5dbcd; }.feature-ink { background:var(--ink); color:white; }.feature-index { color:var(--coral); font:500 11px var(--mono); }.feature h3 { margin:26px 0 14px; font:700 28px/1.02 var(--serif); letter-spacing:-.045em; }.feature p { max-width:360px; color:#5e6d70; font-size:14px; line-height:1.55; }.feature-ink p { color:#c5d0cb; }.template-lines { position:absolute; bottom:30px; right:30px; width:55%; height:115px; display:grid; gap:11px; }.template-lines i { height:11px; display:block; background:rgba(24,46,54,.16); }.template-lines i:nth-child(2) { width:82%; }.template-lines i:nth-child(3) { width:65%; }.template-lines b { position:absolute; width:45px; height:45px; right:0; top:-35px; background:var(--coral); }.ink-seal { position:absolute; right:-25px; bottom:-25px; width:155px; height:155px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; transform:rotate(17deg); }.ink-seal:before { content:''; position:absolute; inset:12px; border:1px solid var(--coral); border-radius:50%; }.ink-seal span { font:600 13px/1 var(--mono); letter-spacing:.1em; text-align:center; color:var(--coral); }.pdf-sheet { position:absolute; width:105px; height:135px; right:24px; bottom:-15px; padding:16px; background:white; box-shadow:11px 10px 0 rgba(207,113,92,.9); }.pdf-sheet span { color:var(--coral); font:700 17px var(--mono); }.pdf-sheet i { display:block; height:5px; background:#d4d9d4; margin-top:12px; }.folder-shape { position:absolute; right:25px; bottom:24px; width:138px; height:83px; background:var(--mint); border-radius:2px; }.folder-shape:before { content:''; position:absolute; width:58px; height:20px; top:-12px; left:0; background:var(--mint); border-radius:3px 3px 0 0; }.folder-shape span { position:absolute; width:68px; height:68px; right:14px; top:-23px; background:var(--coral); clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%); }
.workflow { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; padding:108px clamp(22px,8vw,124px); background:#d3e0d7; }.workflow-copy h2 { font:700 clamp(42px,5vw,70px)/.96 var(--serif); letter-spacing:-.065em; }.workflow-copy>p:last-child { max-width:420px; color:#496063; line-height:1.6; }.workflow ol { padding:0; margin:0; list-style:none; border-top:1px solid rgba(24,46,54,.25); }.workflow li { display:grid; grid-template-columns:57px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid rgba(24,46,54,.25); }.workflow li>span { color:var(--coral); font:500 12px var(--mono); }.workflow li strong { font:700 23px var(--serif); letter-spacing:-.035em; }.workflow li p { margin:6px 0 0; color:#51666a; font-size:14px; line-height:1.5; }
.license { display:grid; grid-template-columns:1.12fr .88fr; padding:clamp(22px,5vw,78px); background:var(--paper); }.license-card { padding:clamp(40px,7vw,100px); background:var(--night); color:white; }.eyebrow-light { color:#b9c8c3; }.license-card h2 { margin:0 0 25px; font:700 clamp(43px,5vw,67px)/.98 var(--serif); letter-spacing:-.065em; }.license-card>p:not(.eyebrow) { max-width:480px; color:#d1ddd8; font-size:15px; line-height:1.68; }.license-card ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 20px; padding:25px 0 0; margin:35px 0 0; list-style:none; border-top:1px solid rgba(255,255,255,.2); color:#d4e0db; font:500 11px var(--mono); }.license-card li:before { content:'•'; color:var(--coral); margin-right:8px; }.price-card { padding:clamp(40px,6vw,86px) clamp(32px,5vw,65px); background:#e9b8a9; color:var(--ink); }.price-card>p:first-child { font:500 11px var(--mono); letter-spacing:.09em; }.price-card h3 { margin:35px 0 26px; font:700 37px/.98 var(--serif); letter-spacing:-.055em; }.price { display:flex; align-items:baseline; margin-top:20px; }.price span,.price sup { font:600 18px var(--mono); }.price strong { margin-left:5px; font:700 82px/.78 var(--serif); letter-spacing:-.08em; }.price sup { margin-left:3px; }.price-card small { display:block; margin-top:15px; color:#435359; font-size:12px; }.button-buy { width:100%; min-height:53px; margin-top:37px; padding:0 17px; justify-content:space-between; background:var(--ink); color:white; border-radius:3px; }.price-note { margin:18px 0 0; color:#566166; font-size:11px; line-height:1.45; }
.faq { padding:110px clamp(22px,8vw,124px) 124px; }.faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 45px; margin-top:50px; }.faq details { padding:21px 0; border-top:1px solid var(--line); }.faq summary { cursor:pointer; font:700 21px/1.2 var(--serif); letter-spacing:-.03em; list-style:none; }.faq summary:after { content:'+'; float:right; color:var(--coral); font:400 23px var(--sans); }.faq details[open] summary:after { content:'−'; }.faq details p { max-width:490px; margin:13px 28px 0 0; color:#627174; font-size:14px; line-height:1.56; }
footer { display:grid; grid-template-columns:1fr 1fr auto; gap:25px; align-items:center; padding:38px clamp(22px,8vw,124px); border-top:1px solid var(--line); } footer p { margin:0; color:#637175; font-size:13px; } footer small { color:#788487; font:400 10px var(--mono); }
@media (max-width:900px) { .hero,.workflow,.license { grid-template-columns:1fr; }.hero { gap:25px; }.hero-art { min-height:400px; }.proposal-card { width:270px; }.feature-grid { grid-template-columns:1fr 1fr; grid-auto-rows:290px; }.feature-large { grid-row:span 1; grid-column:span 2; }.site-header nav { display:none; }.proof-strip { align-items:flex-start; flex-direction:column; }.faq-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .site-header { height:66px; }.header-cta { padding:8px 12px; }.hero { min-height:auto; padding-top:70px; }.hero-facts { gap:14px; }.hero-facts dt { font-size:17px; }.hero-art { min-height:350px; }.orbit-one { width:320px; height:320px; }.orbit-two { width:410px; height:410px; }.feature-grid { grid-template-columns:1fr; grid-auto-rows:300px; }.feature-large { grid-column:auto; }.license-card ul { grid-template-columns:1fr; }.price strong { font-size:74px; }.faq { padding-top:75px; } footer { grid-template-columns:1fr; } }