:root { --ink:#18201d; --muted:#65706b; --paper:#f5f3eb; --card:#fffef9; --line:#d9ddd6; --green:#176b4a; --lime:#c9f15a; --night:#12251d; --orange:#ee7651; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; max-width:1240px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(24,32,29,.12); }
.brand { display:flex; align-items:center; gap:10px; font:700 19px "Manrope",sans-serif; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:var(--lime); font-size:16px; }
nav { display:flex; gap:34px; color:#4c5752; font-size:14px; }
nav a:hover { color:var(--green); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; border:1px solid transparent; padding:14px 22px; font-weight:700; cursor:pointer; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-small { padding:10px 17px; font-size:13px; }
.button-ghost { border-color:#bfc6c0; }
.button-primary { background:var(--ink); color:white; box-shadow:0 8px 25px rgba(24,32,29,.14); }
.button-primary:hover { background:var(--green); }
.hero { max-width:1240px; margin:auto; min-height:680px; padding:92px 28px 82px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow span { width:24px; height:2px; background:currentColor; }
h1,h2,h3 { font-family:"Manrope",sans-serif; margin-top:0; }
h1 { max-width:720px; margin-bottom:25px; font-size:clamp(45px,5.3vw,76px); line-height:.99; letter-spacing:-.055em; }
.hero-lede { max-width:620px; margin:0; color:var(--muted); font-size:19px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:26px; margin:34px 0; }
.text-link { font-weight:700; }
.trust-list { display:flex; flex-wrap:wrap; gap:19px; padding:0; margin:0; color:#65706b; font-size:12px; list-style:none; }
.trust-list li::before { content:"✓"; color:var(--green); margin-right:7px; font-weight:800; }
.hero-visual { position:relative; min-height:495px; display:grid; place-items:center; }
.visual-glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#ddff7a 0,#9cd49a 38%,rgba(90,150,120,.12) 68%,transparent 70%); filter:blur(2px); }
.brief-card { position:relative; z-index:1; width:min(100%,500px); border:1px solid rgba(24,32,29,.14); border-radius:22px; background:rgba(255,254,249,.94); box-shadow:0 30px 75px rgba(25,52,39,.2); overflow:hidden; transform:rotate(-1.5deg); }
.brief-topbar { height:54px; padding:0 20px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); font-size:11px; color:#7a837e; }
.brief-topbar span { width:7px; height:7px; border-radius:50%; background:#cbd0ca; }
.brief-topbar b { margin-left:auto; font-weight:500; }
.brief-body { padding:24px; display:grid; grid-template-columns:36px 1fr; gap:23px 12px; }
.brief-index { color:#a7afa9; font:700 11px "Manrope"; }
.brief-body small { color:var(--green); font-weight:800; font-size:10px; letter-spacing:.1em; }
.brief-body p { margin:7px 0 0; font-size:14px; line-height:1.5; }
.code-lines { display:grid; gap:7px; margin-top:10px; }
.code-lines i { display:block; height:8px; border-radius:4px; background:#e2e7df; }
.code-lines i:nth-child(2){ width:80%; }.code-lines i:nth-child(3){ width:61%; }
.signal-card { position:absolute; z-index:2; right:-14px; bottom:45px; display:flex; gap:12px; align-items:center; width:240px; padding:15px; border-radius:15px; color:white; background:var(--night); box-shadow:0 20px 45px rgba(12,35,25,.3); }
.signal-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--lime); color:var(--ink); font-weight:800; }
.signal-card small,.signal-card strong { display:block; }.signal-card small { color:#9eb0a7; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.signal-card strong { margin-top:3px; font-size:11px; }
.workspace-section { padding:100px max(28px,calc((100vw - 1184px)/2)); background:#e9eadf; }
.section-heading { max-width:690px; margin-bottom:43px; }
.section-heading h2,.open-section h2 { margin-bottom:18px; font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-.04em; }
.section-heading>p:last-child { color:var(--muted); font-size:17px; line-height:1.65; }
.workspace-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; }
.planner-card,.output-card { min-height:530px; padding:30px; border:1px solid #d6d9d1; border-radius:22px; background:var(--card); box-shadow:0 8px 26px rgba(36,49,42,.05); }
.planner-card label { display:block; margin:0 0 9px; font-weight:700; font-size:13px; }.planner-card label span { color:#8b948f; font-weight:400; }
textarea { width:100%; min-height:158px; resize:vertical; padding:15px; border:1px solid #cfd5ce; border-radius:12px; background:#fbfaf5; color:var(--ink); font:14px/1.55 "DM Sans"; outline:none; }
textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,74,.1); }
#constraints { min-height:95px; }
.field-meta { display:flex; justify-content:space-between; margin:6px 2px 20px; color:#929a95; font-size:10px; }
.submit-button { width:100%; margin-top:17px; justify-content:space-between; }
.submit-button:disabled { opacity:.55; cursor:wait; transform:none; }
.form-note { margin:13px 5px 0; color:#8a928e; font-size:10px; line-height:1.5; }
.output-card { background:var(--night); color:#edf4ef; }
.output-header { display:flex; align-items:center; justify-content:space-between; color:#a9bbb2; font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(201,241,90,.1); }
.output-header button { border:0; background:none; color:var(--lime); cursor:pointer; }.output-header button:disabled { color:#69786f; }
.output-card h3 { margin:35px 0 20px; font-size:24px; }
.output-content { max-height:385px; overflow:auto; color:#bfcfc6; white-space:pre-wrap; font-size:13px; line-height:1.65; }.output-content ul { padding-left:18px; }
.loading-lines { display:grid; gap:13px; }.loading-lines i { height:11px; border-radius:6px; background:linear-gradient(90deg,#263c32,#476052,#263c32); background-size:200%; animation:pulse 1.4s infinite; }.loading-lines i:nth-child(2){width:88%}.loading-lines i:nth-child(3){width:68%}.loading-lines i:nth-child(4){width:81%}@keyframes pulse{to{background-position:-200%}}
.process-section { max-width:1240px; margin:auto; padding:110px 28px; }.compact { max-width:650px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #c9cec7; }.steps article { padding:29px 40px 20px 0; }.steps article+article { padding-left:35px; border-left:1px solid #c9cec7; }.steps b { color:var(--orange); font-size:11px; }.steps h3 { margin:48px 0 12px; font-size:25px; }.steps p { color:var(--muted); line-height:1.6; }
.open-section { margin:0 22px; padding:80px max(28px,calc((100vw - 1140px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:80px; border-radius:28px; background:var(--green); color:white; }.eyebrow.light { color:var(--lime); }.open-section p { color:#cde1d5; line-height:1.7; }.button-light { margin-top:18px; background:var(--lime); color:var(--ink); }
footer { max-width:1240px; margin:auto; padding:45px 28px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#7a837e; font-size:12px; }footer p:nth-child(2){text-align:center}footer p:last-child{text-align:right}
.legal-page { max-width:820px; margin:0 auto; padding:90px 28px 120px; }.legal-page h1 { max-width:760px; font-size:clamp(42px,6vw,68px); }.legal-date { margin:-8px 0 60px; color:var(--muted); }.legal-page section { padding:28px 0; border-top:1px solid var(--line); }.legal-page section h2 { margin-bottom:12px; font-size:22px; }.legal-page section p { margin:0; color:var(--muted); line-height:1.75; }.legal-page section a { color:var(--green); text-decoration:underline; }
@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:68px}.hero-visual{min-height:440px}.workspace-grid,.open-section{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps article+article{padding-left:0;border-left:0;border-top:1px solid #c9cec7}.steps h3{margin-top:20px}.open-section{gap:15px}footer{grid-template-columns:1fr;gap:12px}footer p:nth-child(2),footer p:last-child{text-align:left}}
@media(max-width:520px){.site-header{padding:0 18px}.site-header>.button{display:none}.hero{padding:54px 20px}.hero-actions{align-items:flex-start;flex-direction:column}.brief-card{transform:none}.signal-card{right:0}.workspace-section,.process-section{padding:75px 20px}.planner-card,.output-card{padding:21px}.open-section{margin:0 10px;padding:55px 24px}}