:root { --ink:#111114; --paper:#f5f3ee; --muted:#a6a3ad; --violet:#7656ff; --line:rgba(255,255,255,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:"DM Sans",sans-serif; min-height:100vh; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.12; z-index:3; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); }
.page-shell { width:min(1200px,calc(100% - 48px)); margin:auto; padding:32px 0 26px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; }
.brand { display:flex; gap:10px; align-items:flex-start; color:var(--paper); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.05; }
.brand-mark { color:var(--violet); font:600 42px/.55 "Fraunces",serif; letter-spacing:-.1em; }
.topbar-note,.eyebrow,.kicker,.footer-note,.step-count { color:#bebbc4; font:500 10px "DM Mono",monospace; letter-spacing:.13em; }
.topbar-note { display:flex; gap:9px; align-items:center; }.topbar-note i { display:inline-block; background:var(--violet); height:7px; width:7px; border-radius:50%; box-shadow:0 0 12px var(--violet); }
.brief-card { min-height:690px; padding:38px 6.1% 24px; border:1px solid var(--line); border-radius:30px; background:radial-gradient(circle at 93% 4%,rgba(118,86,255,.2),transparent 24%),linear-gradient(130deg,#1b1b20,#141418 65%); display:flex; flex-direction:column; overflow:hidden; }
.card-head { display:flex; justify-content:space-between; align-items:center; }.eyebrow,.kicker { margin:0; color:#beb9d6; }.progress-wrap { display:flex; gap:11px; align-items:center; font:500 10px "DM Mono",monospace; }.progress-track { height:2px; width:90px; background:#3e3b45; }.progress-bar { height:100%; width:10%; background:var(--violet); transition:width .35s ease; }
form { flex:1; display:flex; align-items:center; }.step { display:none; width:100%; max-width:865px; padding:42px 0 30px; animation:enter .38s ease both; }.step.active { display:block; }.kicker { margin-bottom:16px; color:var(--violet); }.step h1,.step h2 { margin:0; color:#fff; font:600 clamp(45px,6vw,80px)/.94 "Fraunces",serif; letter-spacing:-.055em; }.step h2 { font-size:clamp(38px,5.2vw,66px); }.step em { color:var(--violet); font-style:italic; }.intro { max-width:560px; margin:23px 0 30px; color:#c9c6ce; line-height:1.55; font-size:15px; }.field-label { display:block; color:#eeeaf3; margin-bottom:10px; font-size:12px; font-weight:600; letter-spacing:.04em; }.field-label span { color:#89858f; font-weight:400; }
textarea { display:block; width:min(100%,760px); height:155px; padding:16px 0; border:0; border-bottom:1px solid #6a6670; outline:0; border-radius:0; resize:vertical; background:transparent; color:#fff; font-size:23px; font-weight:600; line-height:1.45; transition:border .2s; } textarea:focus { border-color:var(--violet); } textarea::placeholder,input::placeholder { color:#77737d; font-weight:400; }.project-name-field { display:block; max-width:760px; margin-top:16px; color:#bbb5c3; font-size:12px; }.project-name-field span { color:#807a87; }.project-name-field input { display:block; width:100%; padding:9px 0; border:0; border-bottom:1px solid #625d67; outline:0; background:transparent; color:#fff; font-size:20px; font-weight:600; }.project-name-field input:focus { border-color:var(--violet); }.field-hint { margin:10px 0; color:#8f8a96; font-size:11px; }.mini-prompts { display:flex; gap:18px; margin-top:15px; color:#898590; font:10px "DM Mono",monospace; letter-spacing:.08em; }.conditional-field { display:none; max-width:730px; margin-top:18px; color:#bdb8c4; font-size:12px; }.conditional-field.visible { display:block; animation:enter .25s ease both; }.conditional-field input { display:block; width:100%; padding:12px 0; border:0; border-bottom:1px solid #706a76; outline:0; background:transparent; color:#fff; font-size:19px; font-weight:600; }.conditional-field input:focus { border-color:var(--violet); }
.choice-grid { display:grid; gap:10px; max-width:730px; }.choices-2 { grid-template-columns:repeat(2,1fr); }.choices-3 { grid-template-columns:repeat(3,1fr); }.choice-card { position:relative; min-height:128px; padding:16px; text-align:left; color:#efedf1; border:1px solid #4c4951; border-radius:13px; background:rgba(255,255,255,.015); overflow:hidden; transition:.2s; }.choice-card b { display:block; margin-bottom:32px; color:#908b9a; font:10px "DM Mono",monospace; font-weight:400; }.choice-card span { font-size:17px; line-height:1.15; }.choice-card:hover,.choice-card.selected { border-color:var(--violet); background:linear-gradient(135deg,rgba(118,86,255,.28),rgba(118,86,255,.06)); transform:translateY(-2px); }.choice-card.selected:after { content:"✓"; position:absolute; right:14px; top:12px; color:#fff; }
.color-layout { display:grid; grid-template-columns:260px 1fr; gap:45px; align-items:center; max-width:700px; }.color-preview { aspect-ratio:1; display:grid; place-items:center; padding:25px; border-radius:16px; background:#7656ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); transition:background .2s; }.color-preview span { color:#fff; font-size:24px; font-weight:700; line-height:.9; letter-spacing:-.07em; }.color-controls { min-width:0; } input[type=color],input[type=file] { position:absolute; opacity:0; pointer-events:none; }.color-wheel { position:relative; width:190px; aspect-ratio:1; border-radius:50%; cursor:crosshair; background:conic-gradient(#f35a5a,#f5d34d,#4bcd7c,#42bee3,#735aff,#dc5bc5,#f35a5a); box-shadow:inset 0 0 0 1px #fff3; }.color-wheel::after { content:""; position:absolute; inset:24%; border-radius:50%; background:#18171b; box-shadow:0 0 0 1px #ffffff18; }.wheel-knob { position:absolute; z-index:1; left:82%; top:20%; width:25px; height:25px; border:3px solid #fff; border-radius:50%; background:#7656ff; transform:translate(-50%,-50%); box-shadow:0 2px 8px #0007; pointer-events:none; }.tone-spectrum { height:13px; width:min(100%,360px); position:relative; margin-top:21px; border-radius:50px; cursor:crosshair; background:linear-gradient(90deg,#fff,#a3a3a3,#000); }.tone-knob { position:absolute; left:50%; top:50%; width:22px; height:22px; border:3px solid #fff; border-radius:50%; background:#777; transform:translate(-50%,-50%); box-shadow:0 2px 8px #0007; pointer-events:none; }.color-controls output { display:block; margin:15px 0; color:#fff; font:500 25px "DM Mono",monospace; letter-spacing:-.04em; }.swatches { display:flex; gap:8px; }.swatches button { width:23px; height:23px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--swatch); }.swatches button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.font-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:790px; max-height:340px; overflow:auto; padding-right:5px; }.font-option { min-height:90px; padding:14px 17px; text-align:left; color:#fff; background:#1b1a1f; border:1px solid #48454e; border-radius:12px; transition:.2s; }.font-option:hover,.font-option.selected { border-color:var(--violet); background:#211f2a; }.font-sample { display:block; font-size:23px; line-height:1.15; }.font-option small { display:block; margin-top:7px; color:#9b97a1; font-size:10px; }.dm-sans{font-family:"DM Sans"}.space-grotesk{font-family:"Space Grotesk"}.fraunces{font-family:"Fraunces"}.manrope{font-family:"Manrope"}.playfair{font-family:"Playfair Display"}.archivo{font-family:"Archivo"}.work-sans{font-family:"Work Sans"}.cormorant{font-family:"Cormorant Garamond";font-size:27px}.baskerville{font-family:"Libre Baskerville";font-size:19px}.bebas{font-family:"Bebas Neue";font-size:28px;letter-spacing:.02em}.type-toolbox { max-width:790px; margin-top:18px; padding:13px 14px; border:1px solid #48454e; border-radius:12px; background:#17161a; }.toolbox-label { display:block; margin-bottom:10px; color:#98939f; font:9px "DM Mono",monospace; letter-spacing:.1em; }.type-controls { display:flex; gap:7px; }.type-control { min-width:39px; height:34px; border:1px solid #504c56; border-radius:6px; background:#222026; color:#f8f5f9; }.type-control.selected { border-color:var(--violet); background:#3b2b77; }.type-control.strong { font-weight:800; }.type-control.italic { font-family:"Fraunces"; font-style:italic; }.type-control.uppercase { font-size:12px; }.type-preview { margin:12px 0 0; color:#fff; font-size:21px; transition:.2s; }
.style-options { display:grid; grid-template-columns:repeat(3,1fr); max-width:730px; border-top:1px solid #4a4650; }.style-options button { display:flex; justify-content:space-between; padding:17px 8px; color:#f3f0f5; background:none; border:0; border-bottom:1px solid #4a4650; text-align:left; font-size:16px; }.style-options button i { color:#817c88; font-style:normal; }.style-options button.selected { color:var(--violet); }.style-options button.selected i { color:var(--violet); }
.checks { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; max-width:680px; }.checks label { display:flex; align-items:center; gap:11px; color:#dedbe2; font-size:15px; }.checks input { appearance:none; width:19px; height:19px; margin:0; border:1px solid #817b86; border-radius:4px; background:#1c1a20; }.checks input:checked { border-color:var(--violet); background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='m7.6 14.6-4-4 1.5-1.5 2.5 2.5 6-6 1.5 1.5z'/%3E%3C/svg%3E") center/16px no-repeat; }.inline-field { display:block; max-width:680px; margin-top:22px; color:#aaa5b0; font-size:12px; }.inline-field input { display:block; width:100%; padding:9px 0; color:#fff; outline:0; border:0; border-bottom:1px solid #5a5660; background:transparent; }
.file-upload { display:flex; align-items:center; gap:9px; width:max-content; margin-top:20px; padding:11px 14px; color:#eeeaf3; border:1px dashed #645d70; border-radius:9px; cursor:pointer; font-size:13px; }.file-upload:hover { border-color:var(--violet); background:#7656ff12; }.file-upload span { color:var(--violet); font-size:20px; }.file-upload small { color:#928d97; }.file-names { margin:9px 0 0; color:#aaa4b1; font-size:11px; }.contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 32px; max-width:710px; }.contact-fields label { color:#b8b4be; font-size:11px; letter-spacing:.04em; }.contact-fields label small { color:#817b88; }.contact-fields input { display:block; width:100%; padding:11px 0; color:#fff; border:0; border-bottom:1px solid #5e5963; outline:0; background:transparent; font-size:20px; font-weight:600; }.contact-fields input:focus,.inline-field input:focus { border-color:var(--violet); }.domain-question { max-width:710px; margin-top:28px; padding-top:20px; border-top:1px solid #45414b; }.domain-options { display:flex; gap:9px; }.domain-options button { padding:10px 14px; color:#ebe8ee; border:1px solid #5a5560; border-radius:22px; background:transparent; font-size:13px; }.domain-options button.selected { color:#fff; border-color:var(--violet); background:#7656ff40; }.domain-input,.domain-help { display:none; }.domain-input.visible { display:block; margin-top:14px; color:#bbb5c2; font-size:12px; }.domain-input input { display:block; width:100%; padding:9px 0; border:0; border-bottom:1px solid #655f6b; outline:0; background:transparent; color:#fff; font-size:19px; font-weight:600; }.domain-help.visible { display:block; margin:14px 0 0; color:#bdb8c5; font-size:13px; line-height:1.45; }.summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:730px; border-top:1px solid #45414b; }.summary-item { padding:15px 18px 15px 0; border-bottom:1px solid #45414b; }.summary-item:nth-child(odd) { margin-right:18px; }.summary-item dt { margin-bottom:5px; color:var(--violet); font:10px "DM Mono",monospace; letter-spacing:.08em; }.summary-item dd { margin:0; color:#e9e6eb; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }.summary-color { display:inline-flex; align-items:center; gap:8px; }.summary-color i { width:14px; height:14px; background:var(--summary-color); border-radius:50%; }.review-note { margin:18px 0 0; color:#bdb8c4; font-size:12px; }
.error-message { min-height:18px; margin:0 0 8px; color:#ff9696; font-size:12px; }.card-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-top:15px; border-top:1px solid #403d45; }.nav-button { display:inline-flex; align-items:center; gap:8px; width:max-content; padding:8px 0; border:0; background:none; color:#fff; font-size:14px; }.nav-button:hover { color:var(--violet); }.nav-button:focus-visible,.choice-card:focus-visible,.font-option:focus-visible,.style-options button:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }.back { opacity:.5; }.back:not(:disabled) { opacity:1; }.back:disabled { pointer-events:none; }.next { justify-self:end; padding:11px 17px; border-radius:30px; background:var(--violet); }.next:hover { color:#fff; background:#8970ff; }.footer-note { margin:20px 0 0; text-align:center; color:#706c76; font-size:9px; }.footer-note span { color:var(--violet); }
.success-modal { position:fixed; z-index:8; inset:0; display:none; place-items:center; padding:24px; background:#0d0c10e8; }.success-modal.open { display:grid; }.success-content { max-width:580px; padding:50px; border:1px solid #5a526f; border-radius:25px; background:radial-gradient(circle at top right,#4b367b,#1a181e 50%); }.success-content h2 { margin:0; font:600 clamp(42px,7vw,68px)/.95 "Fraunces",serif; letter-spacing:-.05em; }.success-content h2 em { color:#9a87ff; }.success-content p:not(.kicker) { color:#d0cbd5; line-height:1.55; }.success-content button { margin-top:12px; padding:12px 18px; border:0; border-radius:30px; background:#fff; color:#19161e; font-weight:600; }
@keyframes enter { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
@media (max-width:650px) { .page-shell { width:min(100% - 26px,1200px); padding-top:21px; }.topbar { margin-bottom:19px; }.topbar-note { font-size:8px; }.brief-card { min-height:calc(100vh - 118px); padding:27px 22px 18px; border-radius:21px; }.step { padding:34px 0 20px; }.step h1 { font-size:52px; }.step h2 { font-size:43px; }.intro { margin:18px 0 25px; font-size:14px; }.choices-2,.choices-3 { grid-template-columns:repeat(2,1fr); }.choice-card { min-height:105px; }.choice-card b { margin-bottom:20px; }.choice-card span { font-size:15px; }.color-layout { grid-template-columns:1fr; gap:25px; }.color-preview { aspect-ratio:2.2/1; }.font-list { grid-template-columns:1fr; max-height:315px; overflow:auto; padding-right:3px; }.style-options { grid-template-columns:repeat(2,1fr); }.checks,.contact-fields,.summary { grid-template-columns:1fr; }.summary-item:nth-child(odd) { margin-right:0; }.card-footer { padding-top:10px; }.nav-button span { display:none; }.next span { display:inline; }.step-count { font-size:9px; }.mini-prompts { gap:9px; font-size:8px; }.success-content { padding:34px 28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }