@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --paper:#f2f6f2; --surface:#fff; --ink:#17372e; --soft:#5f746d; --sage:#3f7864; --mint:#d9efe4; --lime:#ddef87; --line:rgba(23,55,46,.13); --shadow:0 28px 80px rgba(18,48,39,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--paper); font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a,button { color:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid var(--sage); outline-offset:4px; }
.site-header { width:min(1180px,calc(100% - 64px)); min-height:92px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.landing-brand { min-height:44px; display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700; letter-spacing:-.04em; }
.landing-brand > span:last-child > span { color:var(--sage); font-weight:800; }
.landing-brand__mark { width:39px; height:39px; display:grid; place-items:center; border-radius:12px 12px 15px 15px; color:#fff; background:var(--ink); }
.landing-brand__mark svg { width:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.language-button { min-width:48px; min-height:44px; border:1px solid var(--line); border-radius:99px; background:rgba(255,255,255,.72); font-weight:800; cursor:pointer; }
main { overflow:hidden; }
.landing-hero { width:min(1180px,calc(100% - 64px)); min-height:calc(100vh - 92px); margin:auto; padding:54px 0 90px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.78fr); gap:8vw; align-items:center; }
.landing-eyebrow { margin:0 0 17px; color:var(--sage); font-size:11px; font-weight:800; letter-spacing:.18em; }
.landing-hero h1,.section-intro h2,.launch-note h2 { margin:0; font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(48px,6.2vw,84px); line-height:.94; letter-spacing:-.065em; }
.landing-hero h1 em { color:var(--sage); font-style:normal; }
.landing-lead { max-width:660px; margin:28px 0 0; color:var(--soft); font-size:clamp(17px,1.7vw,21px); line-height:1.65; }
.landing-actions { margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.landing-primary { min-height:54px; padding:0 22px; display:inline-flex; align-items:center; gap:18px; border-radius:17px; background:var(--ink); color:#fff; text-decoration:none; font-weight:800; box-shadow:0 13px 35px rgba(23,55,46,.18); transition:transform .2s ease,box-shadow .2s ease; }
.landing-primary:hover { transform:translateY(-2px); box-shadow:0 17px 42px rgba(23,55,46,.24); }
.time-note { color:var(--soft); font-size:13px; line-height:1.5; }
.time-note b { color:var(--ink); }
.product-scene { position:relative; min-height:610px; display:flex; flex-direction:column; justify-content:center; }
.room-frame { position:relative; width:88%; height:310px; margin-left:auto; overflow:hidden; border-radius:34px; background:linear-gradient(150deg,#dbe9de,#bdd7ca); box-shadow:var(--shadow); }
.room-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(23,55,46,.18)); }
.room-frame__label { position:absolute; z-index:3; top:24px; left:26px; padding:8px 11px; border-radius:99px; background:rgba(255,255,255,.84); font-size:9px; font-weight:800; letter-spacing:.16em; }
.room-frame__window { position:absolute; top:0; right:36px; width:45%; height:58%; border:1px solid rgba(255,255,255,.65); border-top:0; background:linear-gradient(150deg,rgba(255,255,255,.45),rgba(217,239,228,.35)); }
.room-frame__window::before,.room-frame__window::after { content:""; position:absolute; background:rgba(255,255,255,.6); }
.room-frame__window::before { width:1px; inset-block:0; left:50%; }.room-frame__window::after { height:1px; inset-inline:0; top:50%; }
.room-frame__sofa { position:absolute; left:30px; bottom:36px; width:62%; height:91px; border-radius:31px 31px 14px 14px; background:#678f80; box-shadow:inset 0 32px rgba(255,255,255,.09); }
.room-frame__table { position:absolute; z-index:2; right:25px; bottom:34px; width:37%; height:56px; border-radius:50%; background:#8c755d; transform:rotate(-4deg); box-shadow:0 18px 0 -14px #5d5043; }
.room-frame__table i { position:absolute; width:14px; height:20px; bottom:28px; border-radius:3px; background:#fff; }.room-frame__table i:nth-child(1){left:22px}.room-frame__table i:nth-child(2){left:50px;background:#ddef87}.room-frame__table i:nth-child(3){right:18px;width:24px;height:9px;background:#17372e}
.focus-ring { position:absolute; z-index:4; right:19px; bottom:12px; width:44%; height:92px; border:2px solid var(--lime); border-radius:50%; box-shadow:0 0 0 7px rgba(221,239,135,.18); }
.next-step-card { position:relative; z-index:5; width:86%; margin:-28px 0 0; padding:27px; border:1px solid rgba(255,255,255,.18); border-radius:28px; color:#fff; background:#17372e; box-shadow:var(--shadow); }
.next-step-card__meta { display:flex; justify-content:space-between; color:var(--lime); font-size:9px; font-weight:800; letter-spacing:.16em; }
.next-step-card__kicker { margin:25px 0 8px; color:rgba(255,255,255,.58); font-size:9px; font-weight:800; letter-spacing:.13em; }
.next-step-card h2 { margin:0; font-family:'Bricolage Grotesque',sans-serif; font-size:30px; letter-spacing:-.04em; }
.next-step-card > p:not(.next-step-card__kicker) { margin:12px 0 22px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.6; }
.next-step-card__done { min-height:49px; display:flex; align-items:center; gap:11px; padding:8px 13px; border-radius:15px; background:rgba(221,239,135,.12); font-size:13px; font-weight:700; }.next-step-card__done span:first-child { width:29px; height:29px; display:grid; place-items:center; border-radius:10px; background:var(--lime); color:var(--ink); }
.how-it-works { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:120px 0; display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; border-top:1px solid var(--line); }
.section-intro h2 { font-size:clamp(42px,5vw,66px); }
.method-list { margin:0; padding:0; list-style:none; display:grid; }
.method-list li { padding:26px 0; display:grid; grid-template-columns:48px 1fr; gap:20px; border-bottom:1px solid var(--line); }
.method-list li > span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--mint); font-weight:800; }
.method-list h3 { margin:0 0 7px; font-family:'Bricolage Grotesque',sans-serif; font-size:25px; letter-spacing:-.03em; }.method-list p { margin:0; color:var(--soft); line-height:1.65; }
.promise-grid { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:0 0 120px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.promise-grid article { padding:30px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.64); }
.promise-grid article > span { width:45px; height:45px; display:grid; place-items:center; border-radius:15px; background:var(--mint); font-size:20px; }.promise-grid h3 { margin:27px 0 9px; font-family:'Bricolage Grotesque',sans-serif; font-size:24px; letter-spacing:-.03em; }.promise-grid p { margin:0; color:var(--soft); line-height:1.65; }
.launch-note { width:min(1180px,calc(100% - 64px)); margin:0 auto 28px; padding:clamp(38px,7vw,84px); border-radius:36px; background:var(--ink); color:#fff; text-align:center; }.launch-note .landing-eyebrow { color:var(--lime); }.launch-note h2 { max-width:780px; margin:auto; font-size:clamp(39px,5.6vw,70px); }.launch-note > p:last-child { max-width:650px; margin:24px auto 0; color:rgba(255,255,255,.68); font-size:17px; line-height:1.7; }
.landing-footer { width:min(1180px,calc(100% - 64px)); min-height:100px; margin:auto; display:flex; align-items:center; gap:24px; color:var(--soft); font-size:12px; }.landing-footer a { margin-left:auto; min-height:44px; display:flex; align-items:center; }
@media (max-width:840px) { .landing-hero { grid-template-columns:1fr; padding-top:30px; gap:55px; }.product-scene { min-height:560px; width:min(520px,100%); margin:auto; }.how-it-works { grid-template-columns:1fr; gap:35px; }.promise-grid { grid-template-columns:1fr; }.landing-footer { flex-wrap:wrap; padding:26px 0; }.landing-footer a { margin-left:0; } }
@media (max-width:620px) { .site-header,.landing-hero,.how-it-works,.promise-grid,.launch-note,.landing-footer { width:calc(100% - 32px); }.site-header { min-height:76px; }.landing-brand { font-size:20px; }.landing-hero { min-height:auto; padding:38px 0 72px; }.landing-hero h1 { font-size:clamp(44px,13.7vw,58px); }.landing-lead { font-size:16px; line-height:1.62; }.landing-actions { align-items:flex-start; flex-direction:column; }.landing-primary { width:100%; justify-content:space-between; }.product-scene { min-height:490px; }.room-frame { width:94%; height:250px; }.next-step-card { width:94%; padding:22px; }.next-step-card h2 { font-size:27px; }.how-it-works { padding:86px 0; }.promise-grid { padding-bottom:86px; }.launch-note { margin-bottom:16px; border-radius:27px; }.landing-footer { display:grid; gap:5px; }.landing-footer a { width:max-content; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.landing-primary { transition:none; } }