@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#171612; --paper:#f2f0ea; --white:#fbfaf7; --orange:#ff6a3d; --lime:#d7ef73; --muted:#74716a; --line:#d8d4ca; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; line-height:1.55; }
a { color:inherit; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:50; padding:10px 15px; background:#fff; color:#000; border-radius:7px; }
.skip-link:focus { top:16px; }
.site-header,.hero,.workflow,.audiences,.faq,.site-footer { max-width:1240px; margin-inline:auto; }
.site-header { height:86px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:19px; }
.brand-mark,.download-mark { width:38px; height:38px; display:block; object-fit:cover; border-radius:11px; box-shadow:0 7px 18px rgba(113,58,21,.18); }
.site-header nav,.site-footer nav { display:flex; gap:28px; align-items:center; }
.site-header nav a,.site-footer nav a { text-decoration:none; color:#5d5a54; font-size:13px; font-weight:600; }
.site-header nav a:hover,.site-footer nav a:hover { color:var(--orange); }
.nav-download { padding:10px 17px; background:var(--ink); color:#fff!important; border-radius:999px; }

.hero { min-height:700px; padding:86px 38px 115px; display:grid; grid-template-columns:.86fr 1.14fr; align-items:center; gap:76px; }
.kicker,.section-label { margin:0 0 22px; font-size:11px; text-transform:uppercase; letter-spacing:.17em; font-weight:700; }
.kicker { display:flex; align-items:center; gap:9px; }.kicker span { width:7px; height:7px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 5px rgba(255,106,61,.14); }
h1,h2,h3 { font-family:"Manrope",sans-serif; letter-spacing:-.055em; }
h1 { margin:0 0 28px; font-size:clamp(60px,7vw,98px); line-height:.91; font-weight:700; }
h1 em { font-style:normal; color:var(--orange); }
.hero-lede { max-width:550px; color:#65615b; font-size:18px; margin:0 0 34px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.app-store { min-width:178px; min-height:56px; padding:8px 17px; display:flex; align-items:center; gap:11px; background:var(--ink); color:#fff; border-radius:12px; text-decoration:none; transition:transform .18s ease; }
.app-store:hover { transform:translateY(-2px); }.app-store>span:first-child { font-size:29px; line-height:1; }.app-store>span:last-child { display:flex; flex-direction:column; line-height:1.05; }.app-store small { font-size:9px; }.app-store strong { font-size:20px; font-weight:600; }
.text-link { text-decoration:none; font-size:13px; font-weight:700; }.text-link span { color:var(--orange); margin-left:5px; }
.hero-meta { color:#908c84; font-size:11px; margin:17px 0 0; }
.visual-stage { position:relative; height:500px; overflow:hidden; background:#cdc8bd; border-radius:4px; box-shadow:0 30px 80px rgba(42,36,27,.18); }
.room { position:absolute; inset:0; overflow:hidden; }.room-before { clip-path:polygon(0 0,49% 0,49% 100%,0 100%); background:linear-gradient(#c8c1b6 0 65%,#a99578 65%); }.room-after { clip-path:polygon(51% 0,100% 0,100% 100%,51% 100%); background:linear-gradient(#7e9180 0 65%,#c79965 65%); }
.window { position:absolute; width:27%; height:42%; right:12%; top:12%; background:linear-gradient(150deg,#d8e8e8,#a9c4ca); border:10px solid rgba(255,255,255,.78); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.wall-art { position:absolute; width:16%; height:25%; left:12%; top:18%; border:7px solid rgba(255,255,255,.5); background:linear-gradient(140deg,#504d46 50%,#d8a06c 50%); }
.sofa { position:absolute; width:55%; height:24%; left:11%; bottom:17%; background:#6f6558; border-radius:30px 30px 6px 6px; box-shadow:0 14px 22px rgba(0,0,0,.18); }.room-after .sofa { background:#e5ddd0; }
.table { position:absolute; width:24%; height:10%; right:13%; bottom:14%; border-radius:50%; background:#563b28; box-shadow:0 26px 0 -10px #32271f; }
.floor-lines { position:absolute; left:0; right:0; bottom:0; height:35%; background:repeating-linear-gradient(83deg,transparent 0 62px,rgba(58,37,20,.16) 63px 65px); }
.split-handle { position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,.9); transform:translateX(-50%); display:grid; place-items:center; }.split-handle span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.before-label,.after-label { position:absolute; z-index:4; top:18px; padding:7px 11px; background:rgba(23,22,18,.78); color:#fff; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.before-label { left:18px; }.after-label { right:18px; background:var(--orange); }
.material-chip { position:absolute; z-index:5; padding:9px 13px 9px 9px; display:flex; align-items:center; gap:8px; background:#fff; border-radius:8px; font-size:11px; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.18); }.material-chip span { width:22px; height:22px; border-radius:5px; background:repeating-linear-gradient(90deg,#b87a3d 0 5px,#d29a5e 5px 10px); }.chip-one { left:44%; bottom:23px; }.chip-two { right:18px; top:84px; }.chip-two span { background:#7e9180; }

.statement { padding:130px 24px; background:var(--ink); color:#fff; text-align:center; }.statement .section-label { color:var(--lime); }.statement h2,.workflow h2,.audiences h2,.faq h2,.download h2 { margin:0; font-size:clamp(43px,5vw,70px); line-height:1.02; }.statement h2 span { color:var(--orange); }.statement>p:last-child { max-width:650px; margin:30px auto 0; color:#a9a69f; font-size:17px; }
.workflow { padding:125px 28px; }.section-head { display:grid; grid-template-columns:1.2fr .6fr; gap:80px; align-items:end; margin-bottom:65px; }.section-head>p { color:var(--muted); margin:0 0 10px; }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; padding:0; margin:0; }.workflow-grid li { min-height:440px; padding:25px; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); }.workflow-grid li:nth-child(2) { background:#e7ecd5; }.workflow-grid li:nth-child(3) { background:#f4dfd5; }
.step { color:#77736c; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }.mini-visual { height:180px; margin:34px 0 28px; position:relative; display:grid; place-items:center; background:#d9d5cc; overflow:hidden; }.capture { background:linear-gradient(#aabbb7 0 57%,#a47b58 57%); }.capture::before { content:""; position:absolute; width:55%; height:42%; background:#b3afa7; bottom:15%; left:10%; border-radius:20px 20px 3px 3px; }.capture span { z-index:2; width:52px; height:52px; display:grid; place-items:center; background:#fff; border-radius:50%; font-size:25px; }
.transform { grid-template-columns:repeat(3,1fr); gap:8px; padding:22px; background:#d8dfc5; }.transform i { height:110px; background:#be8753; }.transform i:nth-child(2){background:#7e9180}.transform i:nth-child(3){background:#dad0be}.present { grid-template-columns:1fr 1fr; gap:2px; background:#1f1e1b; padding:25px; }.present span { height:110px; display:grid; place-items:end center; padding:8px; color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.1em; background:linear-gradient(#aaa39a 0 60%,#8d755d 60%); }.present span+span { background:linear-gradient(#7e9180 0 60%,#c79965 60%); }
.workflow-grid h3 { margin:0 0 9px; font-size:25px; }.workflow-grid p { color:var(--muted); margin:0; font-size:14px; }
.real-example { max-width:1184px; margin:0 auto 125px; padding:76px; display:grid; grid-template-columns:.82fr 1.18fr; gap:78px; align-items:center; background:#d8ef72; }
.example-copy h2 { margin:0; font-size:clamp(42px,4.6vw,65px); line-height:1.02; }
.example-copy>p:not(.section-label) { max-width:470px; color:#555747; margin:26px 0; }
.example-link { display:inline-flex; gap:10px; align-items:center; font-size:13px; font-weight:800; text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:5px; }
.example-card { display:block; color:var(--ink); background:#fff; text-decoration:none; padding:18px; box-shadow:0 24px 50px rgba(43,48,22,.17); transition:transform .2s ease,box-shadow .2s ease; }
.example-card:hover { transform:translateY(-4px); box-shadow:0 30px 58px rgba(43,48,22,.23); }
.example-topline { display:flex; justify-content:space-between; align-items:center; padding:2px 3px 15px; }
.example-topline span { color:#85827b; font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; }.example-topline strong { font-family:"Manrope",sans-serif; font-size:17px; }
.example-preview { height:270px; display:grid; grid-template-columns:1fr 1fr; gap:3px; overflow:hidden; background:#ddd; }
.example-preview>div { position:relative; overflow:hidden; background:linear-gradient(#cac5bb 0 64%,#9e886d 64%); }
.example-preview .example-after { background:linear-gradient(#d3d3d3 0 64%,#4a2f1e 64%); }
.example-preview i { position:absolute; width:68%; height:27%; left:12%; bottom:17%; border-radius:18px 18px 3px 3px; background:#655f57; box-shadow:0 11px 18px rgba(0,0,0,.16); }
.example-after i { background:#e3ddd3; }
.example-preview span { position:absolute; left:12px; top:12px; padding:5px 8px; border-radius:3px; background:rgba(23,22,18,.76); color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:8px; font-weight:700; }
.example-after span { background:var(--orange); }
.example-details { display:grid; grid-template-columns:1fr 1fr auto; gap:13px; align-items:center; padding-top:15px; }
.example-details>div:not(.estimate) { display:flex; align-items:center; gap:9px; }.example-details p { margin:0; font-size:11px; font-weight:700; line-height:1.25; }.example-details small { display:block; color:#929087; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.swatch { flex:0 0 auto; width:29px; height:29px; border-radius:4px; }.swatch.walnut { background:#4a2f1e; }.swatch.gray { background:#d3d3d3; border:1px solid #c3c3c3; }
.estimate { padding-left:14px; border-left:1px solid #ddd9d0; }.estimate strong { display:block; font-size:11px; white-space:nowrap; }
.feature-band { display:grid; grid-template-columns:.9fr 1.1fr; background:var(--orange); color:#171612; }.feature-intro { padding:110px max(35px,calc((100vw - 1184px)/2)); padding-right:70px; }.feature-intro h2 { margin:0; font-size:clamp(45px,5vw,72px); line-height:1; }.feature-list { background:#23211d; color:#fff; padding:82px max(35px,calc((100vw - 1184px)/2)) 82px 70px; }.feature-list article { display:grid; grid-template-columns:42px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid #45413a; }.feature-list article>span { color:var(--lime); font-size:11px; }.feature-list h3 { font-size:23px; margin:0 0 6px; }.feature-list p { color:#aaa69e; margin:0; font-size:14px; }
.audiences { padding:125px 28px; text-align:center; }.audience-grid { margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }.audience-grid article { min-height:330px; padding:43px; background:#dedad0; }.audience-grid article+article { background:var(--ink); color:#fff; }.audience-grid article>p { color:var(--orange); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; }.audience-grid h3 { font-size:34px; margin:35px 0 30px; }.audience-grid ul { list-style:none; padding:0; margin:0; }.audience-grid li { padding:8px 0; color:#69655e; border-top:1px solid rgba(60,55,47,.13); }.audience-grid article+article li { color:#aaa69e; border-color:#3b3934; }
.faq { padding:0 28px 125px; display:grid; grid-template-columns:.75fr 1.25fr; gap:85px; }.faq-list { border-top:1px solid var(--line); }details { padding:22px 0; border-bottom:1px solid var(--line); }summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; font-family:"Manrope",sans-serif; font-weight:700; font-size:19px; }summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--orange);font-size:24px}details[open] summary::after{content:"−"}details p{color:var(--muted);max-width:650px;margin:14px 35px 0 0}details a{color:var(--orange)}
.download { padding:75px max(28px,calc((100vw - 1184px)/2)); display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; background:var(--lime); }.download-mark { width:70px; height:70px; border-radius:20px; }.download h2 { font-size:clamp(35px,4vw,55px); }.download .section-label { margin-bottom:10px; }.app-store.inverse { background:#fff; color:#171612; }
.site-footer { padding:55px 28px 65px; display:grid; grid-template-columns:1fr auto; gap:25px; }.site-footer>div>p { margin:7px 0 0; color:var(--muted); font-size:13px; }.copyright { grid-column:1/-1; color:#99958d; font-size:11px; margin:10px 0 0; }
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:55px}.hero-copy{text-align:center}.kicker,.hero-actions{justify-content:center}.hero-lede{margin-inline:auto}.visual-stage{width:min(100%,700px);justify-self:center}.section-head,.faq{grid-template-columns:1fr}.workflow-grid{grid-template-columns:1fr}.workflow-grid li{min-height:auto}.real-example{margin-inline:20px;padding:55px 40px;grid-template-columns:1fr;gap:42px}.feature-band{grid-template-columns:1fr}.feature-intro{padding:90px 35px}.feature-list{padding:55px 35px}.download{grid-template-columns:auto 1fr}.download .app-store{grid-column:1/-1;justify-self:start}}
@media(max-width:600px){.site-header{height:72px}.site-header nav a:not(.nav-download){display:none}.site-header,.hero,.workflow,.audiences,.faq{padding-left:20px;padding-right:20px}.hero{padding-top:48px;padding-bottom:85px}.visual-stage{height:360px}.chip-two{display:none}.room-before{clip-path:polygon(0 0,49% 0,49% 100%,0 100%)}.section-head{gap:20px}.real-example{padding:42px 20px;margin-bottom:90px}.example-preview{height:220px}.example-details{grid-template-columns:1fr 1fr}.estimate{grid-column:1/-1;padding:12px 0 0;border-left:0;border-top:1px solid #ddd9d0}.audience-grid{grid-template-columns:1fr}.audience-grid article{padding:30px}.faq{gap:35px}.download{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px}.site-footer{grid-template-columns:1fr}.site-footer nav{flex-wrap:wrap}.copyright{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}