:root { font-family: ui-sans-serif, system-ui, sans-serif; color: #24242b; background: #fbf8f2; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 36px)); margin: auto; }
header { border-bottom: 1px solid #e5ded4; }
header .wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 1.2rem; font-weight: 900; text-decoration: none; }
.brand span { color: #ed5c2a; }
nav { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
nav button { font: inherit; border: 1px solid #d9d0c5; background: white; border-radius: 99px; padding: 8px 13px; cursor: pointer; }
.hero { padding: clamp(60px, 9vw, 120px) 0 65px; max-width: 850px; }
.eyebrow { color: #be4d2b; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: .98; letter-spacing: -.075em; margin: 17px 0 26px; }
.lead { font-size: clamp(1.08rem, 2vw, 1.4rem); color: #605d59; line-height: 1.65; max-width: 680px; }
.buttons { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button { display: inline-block; border-radius: 10px; padding: 13px 18px; background: #ee5e2b; color: white; text-decoration: none; font-weight: 750; }
.button.secondary { color: #24242b; background: white; border: 1px solid #dcd5c9; }
.showcase { display: grid; grid-template-columns: 1.4fr .6fr; gap: 28px; align-items: start; padding-bottom: 80px; }
.demo { background: white; border: 1px solid #e4ddd2; border-radius: 20px; box-shadow: 0 25px 65px #38302517; overflow: hidden; }
.demo iframe { display: block; width: 100%; height: 500px; border: 0; }
.demo-foot { padding: 12px 18px; border-top: 1px solid #e7e0d8; font-size: .8rem; color: #6a655e; }
.side { padding: 12px 0; } .side h2 { font-size: 1.55rem; letter-spacing: -.03em; }
.side p, .steps p { color: #615f5a; line-height: 1.65; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 0 85px; border-top: 1px solid #e1d9ce; }
.steps b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f6dacc; color: #a5482a; }
.steps h3 { margin: 16px 0 5px; }
footer { border-top: 1px solid #e1d9ce; padding: 25px 0 45px; color: #6a655e; font-size: .85rem; }
@media(max-width: 750px) { .showcase { grid-template-columns: 1fr; } .demo iframe { height: 380px; } .steps { grid-template-columns: 1fr; gap: 2px; } }