:root { --ink:#102a2b; --cream:#f5f0e6; --paper:#fffdf8; --lime:#c8f15a; --orange:#f06d3b; --line:#d8d7cf; }
* { 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; }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,72px); border-bottom:1px solid var(--line); background:rgba(255,253,248,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { text-decoration:none; font:800 19px "Manrope",sans-serif; letter-spacing:-.04em; display:flex; align-items:center; gap:9px; }
.brand span { display:grid; place-items:center; width:30px; height:30px; background:var(--ink); color:var(--lime); border-radius:50%; }
.nav nav { display:flex; align-items:center; gap:30px; }
.nav nav>a { text-decoration:none; font-weight:600; font-size:14px; }
.button { display:inline-flex; justify-content:center; align-items:center; padding:15px 22px; background:var(--ink); color:white; text-decoration:none; border-radius:4px; font-weight:700; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:5px 5px 0 var(--lime); }
.button-small { padding:10px 15px; color:white!important; }
.hero { min-height:calc(100vh - 78px); padding:clamp(70px,9vw,130px) clamp(24px,7vw,110px); display:grid; grid-template-columns:1.05fr .95fr; gap:8vw; align-items:center; overflow:hidden; background:radial-gradient(circle at 86% 10%,rgba(200,241,90,.24),transparent 30%); }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; margin:0 0 22px; color:#537071; }
h1,h2,h3 { font-family:"Manrope",sans-serif; letter-spacing:-.055em; margin-top:0; }
h1 { font-size:clamp(50px,6.5vw,94px); line-height:.98; margin-bottom:28px; }
h1 em { color:var(--orange); font-style:normal; }
.lede { font-size:clamp(17px,1.5vw,21px); line-height:1.65; max-width:650px; color:#4d6263; }
.actions { display:flex; align-items:center; gap:26px; margin-top:35px; }
.text-link { font-weight:700; text-underline-offset:5px; }
.text-link span { color:var(--orange); margin-left:5px; }
.demo-link { display:inline-block; margin-left:24px; }
.trust { display:flex; gap:28px; list-style:none; padding:0; margin:38px 0 0; color:#607172; font-size:13px; }
.trust li:before { content:"✓"; color:var(--orange); font-weight:800; margin-right:7px; }
.hero-card { transform:rotate(2deg); filter:drop-shadow(20px 25px 0 rgba(16,42,43,.1)); }
.browser-bar { height:42px; background:#e9e5da; display:flex; align-items:center; gap:7px; padding:0 14px; border-radius:8px 8px 0 0; }
.browser-bar i { width:9px; height:9px; border-radius:50%; background:#baa; }.browser-bar i:nth-child(2){background:#dbb75f}.browser-bar i:nth-child(3){background:#83b583}.browser-bar span{font-size:10px;margin-left:10px;color:#7b7b70}
.mock-site { background:#102222; color:white; min-height:530px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; }
.mock-nav { display:flex; justify-content:space-between; font-size:12px; letter-spacing:.12em; }.mock-nav span{color:var(--lime)}
.mock-copy { padding:45px 5%; }.mock-copy small{font-size:9px;letter-spacing:.2em;color:#a8b7b1}.mock-copy strong{display:block;font:700 clamp(36px,4vw,64px)/1.05 "Manrope";letter-spacing:-.05em;margin:17px 0}.mock-copy p{color:#bac7c2;max-width:330px}.mock-copy button{background:var(--lime);border:0;padding:13px 17px;font-weight:700;margin-top:10px}
.mock-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #39504c; padding-top:20px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.mock-stats b{color:var(--lime);display:block;margin-bottom:5px}
.proof { padding:clamp(70px,9vw,130px) clamp(24px,7vw,110px); background:var(--cream); display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:center; }.proof h2,.section-heading h2{font-size:clamp(38px,5vw,68px);line-height:1.05}.proof>div>p:not(.eyebrow){font-size:18px;line-height:1.7;color:#59696a;margin-bottom:28px}
.concept { min-height:470px; background:#0c0c0c; color:#f1eadb; padding:50px; display:flex; flex-direction:column; justify-content:center; position:relative; box-shadow:16px 16px 0 var(--orange); }.concept-mark{position:absolute;top:35px;font-weight:800;letter-spacing:.2em}.concept-mark span{color:#cba94f}.concept>p{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#cba94f}.concept h3{font-family:Georgia,serif;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.04em;margin:12px 0 25px}.concept h3 i{color:#cba94f}.concept-button{border:1px solid #cba94f;width:max-content;padding:12px 18px;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.concept small{position:absolute;bottom:20px;color:#777;font-size:10px}
.package { padding:clamp(70px,9vw,130px) clamp(24px,7vw,110px); }.section-heading{max-width:780px;margin-bottom:70px}.package-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw}.deliverables>div{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:25px 0;border-top:1px solid var(--line)}.deliverables b{color:var(--orange)}.deliverables strong{display:block;font:700 20px "Manrope";margin-bottom:8px}.deliverables span{line-height:1.55;color:#5c6d6e}
.price-card{background:var(--ink);color:white;padding:42px;align-self:start;position:sticky;top:110px}.price-card>p:first-child{text-transform:uppercase;letter-spacing:.17em;font-size:11px;color:var(--lime)}.price{font:800 82px "Manrope";letter-spacing:-.07em}.price sup{font-size:28px;vertical-align:top;margin-right:5px}.muted{color:#aebcba}.price-card hr{border:0;border-top:1px solid #355052;margin:25px 0}.price-card ul{padding-left:19px;line-height:1.7;color:#d5dddb}.price-card li{margin:11px 0}.price-card .button{width:100%;background:var(--lime);color:var(--ink);margin-top:20px}.price-card .button:hover{box-shadow:5px 5px 0 var(--orange)}
.process{padding:clamp(70px,8vw,110px) clamp(24px,7vw,110px);background:#edf5df}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}.steps span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;font-weight:700;margin-bottom:35px}.steps h3{font-size:24px}.steps p{color:#5b6d69;line-height:1.65}
.cta{text-align:center;padding:clamp(80px,10vw,150px) 24px;background:var(--orange);color:#161d1d}.cta .eyebrow{color:#4d2d20}.cta h2{font-size:clamp(42px,6vw,78px);max-width:900px;margin:0 auto 20px;line-height:1.03}.cta>p:not(.eyebrow){font-size:20px}.button-light{background:var(--paper);color:var(--ink);margin-top:20px}.button-light:hover{box-shadow:5px 5px 0 var(--ink)}
footer{min-height:130px;padding:35px clamp(24px,5vw,72px);display:flex;align-items:center;gap:35px;background:var(--ink);color:white}footer p{margin-right:auto;color:#aebcba}footer>a:last-child{color:var(--lime)}
@media(max-width:800px){.nav nav>a:not(.button){display:none}.hero,.proof,.package-grid{grid-template-columns:1fr}.hero-card{margin-top:25px}.mock-site{min-height:440px}.proof{gap:60px}.price-card{position:static}.steps{grid-template-columns:1fr}.steps>div{border-top:1px solid #b8c7a3;padding-top:30px}.trust{flex-wrap:wrap;gap:12px 20px}footer{align-items:flex-start;flex-direction:column;gap:12px}footer p{margin:0}.concept{padding:35px}}
@media(max-width:480px){.nav{height:68px}.brand{font-size:16px}.button-small{font-size:12px}.hero{padding-top:60px}.actions{align-items:flex-start;flex-direction:column}.hero-card{filter:drop-shadow(8px 10px 0 rgba(16,42,43,.1))}.mock-stats{gap:8px}.concept{min-height:400px}.price-card{padding:30px}.price{font-size:68px}.demo-link{display:block;margin:16px 0 0}}