/* Showroom home */
.brand-light { color: #9fb66f; }
.hero { position: relative; overflow: hidden; padding: 76px 0 28px; background: radial-gradient(ellipse at 76% 42%, #edf3df 0, #f7f8f4 48%, #f7f8f4 75%); }
.hero-grid { min-height: 570px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 35px; }
.hero-copy { position: relative; z-index: 2; padding: 23px 0 52px; }
.hero h1 { margin: 24px 0 21px; font-size: clamp(48px,6vw,76px); line-height: .99; font-weight: 700; letter-spacing: -.075em; }
.hero h1 .hero-accent { color: #839b59; font-family: Georgia,serif; font-weight: 400; font-style: italic; letter-spacing: -.07em; }
.hero-lede { max-width: 470px; color: #70786c; font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 29px; }
.text-link { font-size: 13px; font-weight: 700; }
.text-link span { margin-left: 5px; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 48px; color: #768071; font-size: 11px; line-height: 1.6; }
.hero-proof strong { color: #30392e; font-size: 12px; }
.avatar-stack { display: flex; padding-left: 4px; }
.avatar-stack i { display: grid; place-items: center; width: 31px; height: 31px; margin-left: -5px; border: 2px solid #f7f8f4; border-radius: 50%; background: #dce7c7; color: #34452c; font-size: 11px; font-style: normal; font-weight: 800; }
.avatar-stack i:nth-child(2) { background: #d9e7e5; }.avatar-stack i:nth-child(3) { background: #262e25; color: white; }
.hero-art { position: relative; min-height: 530px; }
.hero-orbit { position: absolute; border: 1px solid #dce6cb; border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; top: 1px; left: 50%; transform: translateX(-50%); }
.orbit-two { width: 410px; height: 410px; top: 55px; left: 50%; transform: translateX(-50%); border-style: dashed; opacity: .8; }
.hero-browser { position: absolute; overflow: hidden; border: 5px solid #fff; border-radius: 13px; background: #fff; box-shadow: 0 28px 65px rgba(40,57,29,.17); }
.browser-main { width: 365px; height: 370px; left: 12%; top: 67px; transform: rotate(-4deg); z-index: 2; }
.browser-bar { height: 25px; display: flex; align-items: center; gap: 4px; padding: 0 9px; background: #f0f1ec; }
.browser-bar span { width: 5px; height: 5px; border-radius: 50%; background: #c7c9c1; }
.browser-bar small { margin: 0 auto; color: #9da197; font-size: 7px; }
.browser-content { position: relative; height: calc(100% - 25px); overflow: hidden; padding: 18px 20px; background: #e8e8dd; }
.mock-nav { display: flex; justify-content: space-between; color: #384033; font-size: 7px; letter-spacing: .08em; }
.mock-nav b { font-size: 12px; letter-spacing: -.05em; }
.mock-title { position: relative; z-index: 2; margin-top: 43px; color: #333c2c; font: 700 43px/ .92 Georgia,serif; letter-spacing: -.06em; }
.mock-title em { color: #829360; font-weight: 400; }
.mock-line { width: 89px; height: 2px; margin-top: 17px; background: #829360; }
.mock-cta { margin-top: 15px; color: #4e5d3c; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.mock-photo { position: absolute; right: -10px; bottom: -24px; width: 180px; height: 155px; border-radius: 90px 90px 0 0; background: linear-gradient(145deg,rgba(215,220,196,.15),rgba(76,91,57,.2)),url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=700&auto=format&fit=crop') center/cover; filter: saturate(.72); }
.browser-side { width: 255px; height: 300px; right: 1%; top: 205px; transform: rotate(7deg); z-index: 3; }
.side-image { height: 154px; background: url('https://images.unsplash.com/photo-1490312278390-ab64016e0aa9?w=600&auto=format&fit=crop') center/cover; }
.side-copy { padding: 14px 16px; background: #f7f1e6; }
.side-copy small { display: block; color: #92846d; font-size: 6px; letter-spacing: .15em; }
.side-copy b { display: block; margin-top: 8px; color: #4d4336; font: 24px/1 Georgia,serif; }
.side-copy span { display: block; margin-top: 13px; color: #897a62; font-size: 7px; font-weight: 800; }
.hero-sticker { position: absolute; top: 40px; right: 7%; z-index: 5; display: flex; flex-direction: column; justify-content: center; width: 91px; height: 91px; padding: 13px; border-radius: 50%; background: var(--lime); color: #283322; transform: rotate(10deg); box-shadow: 0 8px 25px #c6dca4; }
.hero-sticker b { font-size: 10px; letter-spacing: .1em; }.hero-sticker span { font: italic 12px/1.1 Georgia,serif; }.hero-sticker i { position: absolute; right: 12px; top: 9px; font-size: 15px; font-style: normal; }
.float-note { position: absolute; z-index: 6; padding: 11px 15px; border: 1px solid #e7eadf; border-radius: 999px; background: #fff; color: #697363; font-size: 10px; font-weight: 700; box-shadow: 0 8px 25px rgba(20,30,15,.06); }
.note-top { top: 8px; left: 3%; }.note-bottom { right: 6%; bottom: 11px; }
.note-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #9bc947; }
.hero-bottom { display: flex; align-items: center; gap: 22px; color: #9aa192; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.hero-rule { flex: 1; height: 1px; background: #e4e8dc; }
.trust-strip { overflow: hidden; padding: 22px 0; border-block: 1px solid #e8ebe3; background: #fff; }
.trust-inner { display: flex; justify-content: space-between; align-items: center; gap: 22px; white-space: nowrap; color: #a0a69a; font-size: 10px; }
.trust-inner b { color: #4b5447; font: 700 12px 'Manrope',sans-serif; }.trust-inner i { color: #a5c766; font-style: normal; }
.section { padding: 112px 0 120px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 49px; }
.section-heading h2,.category-layout h2,.about-copy h2,.final-cta h2 { margin: 18px 0 0; font-size: clamp(40px,5.2vw,61px); line-height: 1.02; font-weight: 650; }
.section-heading h2 em,.category-layout h2 em,.about-copy h2 em,.final-cta h2 em { color: #82985a; font-family: Georgia,serif; font-weight: 400; }
.section-heading>p { max-width: 360px; margin: 0 0 6px; color: #788074; font-size: 13px; line-height: 1.85; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 19px; margin-bottom: 26px; }
.search-box { display: flex; align-items: center; gap: 10px; width: min(300px,100%); height: 47px; padding: 0 14px; border: 1px solid #e4e8df; border-radius: 9px; background: #fff; color: #92998c; }
.search-box>span { font-size: 20px; }.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #20271e; font-size: 11px; }
.search-box kbd { padding: 3px 5px; border: 1px solid #e7eae2; border-radius: 4px; color: #a3aa9b; font-size: 8px; }
.filter-scroll { display: flex; flex: 1; gap: 7px; overflow-x: auto; padding: 3px; scrollbar-width: none; }.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; padding: 10px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #82897d; font-size: 10px; font-weight: 700; cursor: pointer; }
.filter-chip.active { border-color: #dfe6d3; background: #eaf1de; color: #40532b; }
.results-meta { display: flex; justify-content: space-between; margin: 0 0 14px; color: #9aa194; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.results-meta span:first-child { color: #515c49; letter-spacing: 0; font-size: 11px; }
.design-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.design-card { min-width: 0; padding: 10px 10px 21px; border: 1px solid #e8ebe4; border-radius: 14px; background: #fff; transition: .28s ease; }
.design-card:hover { transform: translateY(-5px); border-color: #d6e2c7; box-shadow: var(--shadow); }
.design-preview { position: relative; display: block; height: 225px; overflow: hidden; border-radius: 8px; background: var(--preview-bg); }
.preview-chrome { position: absolute; top: 0; left: 0; right: 0; height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 9px; background: rgba(255,255,255,.72); }
.preview-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #aab0a4; }
.preview-label { position: absolute; top: 7px; left: 42%; color: #8d9587; font-size: 6px; }
.preview-page { position: absolute; inset: 27px 12px 10px; overflow: hidden; padding: 13px; background: var(--preview-page); color: var(--preview-ink); box-shadow: 0 7px 18px rgba(0,0,0,.06); }
.preview-nav { display: flex; align-items: center; justify-content: space-between; font: 800 7px 'Manrope',sans-serif; letter-spacing: .04em; }
.preview-nav span { font: 6px 'DM Sans',sans-serif; letter-spacing: .08em; opacity: .7; }
.preview-headline { position: relative; z-index: 1; max-width: 75%; margin-top: 29px; font: 700 25px/.98 'Manrope',sans-serif; letter-spacing: -.06em; }
.preview-sub { max-width: 60%; margin-top: 8px; font-size: 6px; line-height: 1.5; opacity: .67; }
.preview-action { display: inline-block; margin-top: 11px; padding: 6px 9px; background: var(--preview-accent); color: var(--preview-button-ink,#fff); font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.preview-image { position: absolute; right: 9px; bottom: 0; width: 43%; height: 60%; background: var(--preview-photo) center/cover; opacity: .88; }
.preview-shape { position: absolute; right: 17px; bottom: 20px; width: 82px; height: 82px; border-radius: 50%; background: var(--preview-accent); opacity: .18; }
.preview-mini-cards { display: flex; gap: 5px; position: absolute; left: 13px; right: 13px; bottom: 10px; }.preview-mini-cards i { flex: 1; height: 35px; border: 1px solid currentColor; border-radius: 2px; opacity: .18; }
.design-card:nth-child(3n+2) .preview-headline { font-family: Georgia,serif; font-weight: 500; }.design-card:nth-child(3n) .preview-page { text-align: center; }.design-card:nth-child(3n) .preview-headline { margin-inline: auto; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 7px 0; color: #899184; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.card-meta span:last-child { color: #a2b57f; }
.design-card h3 { margin: 9px 7px 6px; font-size: 19px; letter-spacing: -.04em; }
.design-card p { min-height: 39px; margin: 0 7px; color: #81887c; font-size: 11px; line-height: 1.65; }
.card-actions { display: flex; gap: 8px; margin: 16px 7px 0; }
.card-actions .btn { min-height: 38px; padding: 0 13px; font-size: 10px; }
.card-actions .btn:first-child { flex: 1; }
.empty-state { padding: 65px 20px; text-align: center; }.empty-state>div { color: #a5bb7c; font-size: 34px; }.empty-state h3 { margin: 10px 0; font-size: 22px; }.empty-state p { color: var(--muted); font-size: 13px; }
.category-section { padding: 96px 0; background: #eaf0e2; }
.category-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 70px; }
.category-layout>div:first-child>p { max-width: 330px; margin-top: 20px; color: #74806c; font-size: 13px; line-height: 1.8; }
.category-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.category-pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 17px; border: 1px solid #d6e0ca; border-radius: 999px; background: rgba(255,255,255,.65); color: #46533c; font-size: 11px; font-weight: 700; transition: .2s; cursor: pointer; }
.category-pill:hover { border-color: #a6c56d; background: #fff; transform: translateY(-2px); }.category-pill span { color: #9bb66b; font-size: 13px; }
.process-section { padding: 110px 0 120px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.step-card { min-height: 290px; padding: 26px; border: 1px solid #e7ebe2; border-radius: 13px; background: #fff; }
.step-highlight { background: #eaf1dd; border-color: #dce6cd; }
.step-number { color: #8a9380; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.step-icon { display: grid; place-items: center; width: 47px; height: 47px; margin-top: 35px; border-radius: 12px; background: #f0f3eb; color: #617b3b; font-size: 22px; }
.step-highlight .step-icon { background: #dce9c8; }
.step-card h3 { margin: 21px 0 8px; font-size: 21px; }
.step-card p { min-height: 57px; color: #80887b; font-size: 11px; line-height: 1.8; }
.step-foot { display: block; margin-top: 23px; color: #71805f; font-size: 9px; font-weight: 700; }
.about-section { padding: 100px 0; background: #f0f1ec; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 100px; }
.about-mark { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 300px; height: 300px; justify-self: center; border-radius: 50%; background: #dfe9d0; color: #748d4a; font-size: 66px; }
.about-mark span { margin-top: 5px; color: #536444; font: 800 12px/1.5 'Manrope',sans-serif; text-align: center; letter-spacing: .18em; }
.about-copy>p { max-width: 490px; margin: 22px 0 25px; color: #778071; font-size: 13px; line-height: 1.9; }
.final-cta { position: relative; overflow: hidden; padding: 85px 0; background: #1c261d; color: #fff; }
.cta-inner { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.final-cta .eyebrow { color: #b5c99b; }.final-cta h2 { font-size: clamp(44px,5.2vw,62px); }.final-cta h2 em { color: #b9d984; }
.cta-side { width: 270px; padding-bottom: 8px; }.cta-side p { margin: 0 0 21px; color: #a9b3a4; font-size: 12px; line-height: 1.7; }
.cta-spark { position: absolute; top: -83px; right: 27%; color: #344333; font-size: 190px; pointer-events: none; }
.owner-contact { display: grid; gap: 9px; margin-top: 17px; }
.owner-contact a { width: fit-content; color: #c6d6b6; font-size: 10px; font-weight: 600; text-decoration: underline; text-decoration-color: #596b50; text-underline-offset: 4px; }
.footer-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 25px; padding-top: 20px; color: #aeb7aa; font-size: 11px; }
.footer-contact span { color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.footer-contact a:hover { color: #d6f49d; }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #f7f8f4; border-radius: 50%; background: #25d366; color: #123d24; font-size: 15px; font-weight: 900; letter-spacing: -.06em; box-shadow: 0 8px 25px rgba(15,70,35,.24); transition: transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 28px rgba(15,70,35,.3); }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: rgba(18,25,18,.64); backdrop-filter: blur(8px); }
.modal-backdrop[hidden] { display: none; }
.request-dialog { position: relative; width: min(670px,100%); max-height: calc(100vh - 44px); overflow-y: auto; padding: 36px; border-radius: 18px; background: #fbfcf8; box-shadow: 0 25px 90px rgba(0,0,0,.25); }
.modal-close { position: absolute; top: 19px; right: 20px; width: 36px; height: 36px; border: 1px solid #e5e9df; border-radius: 50%; background: #fff; font-size: 23px; cursor: pointer; }
.request-intro h2 { margin: 13px 0 8px; font-size: 39px; line-height: 1.03; }.request-intro h2 em { color: #82985a; font-family: Georgia,serif; font-weight: 400; }.request-intro p { margin: 0 0 25px; color: #7b8475; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #4c5845; font-size: 10px; font-weight: 700; }
.form-grid input,.form-grid textarea,.form-grid select { width: 100%; padding: 12px 13px; border: 1px solid #e0e5d9; border-radius: 7px; outline: 0; background: #fff; color: #252b22; font-size: 11px; font-weight: 400; }
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus { border-color: #a7c878; box-shadow: 0 0 0 3px rgba(167,200,120,.15); }
.form-grid textarea { resize: vertical; }.full-field { grid-column: 1/-1; }.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 14px 0; color: #939b8e; font-size: 9px; line-height: 1.5; }
.form-feedback { min-height: 18px; margin-bottom: 8px; color: #4f7133; font-size: 11px; }.form-feedback.error { color: #aa483d; }
.submit-btn { width: 100%; min-height: 48px; }.submit-btn:disabled { cursor: wait; opacity: .65; }
body.modal-open { overflow: hidden; }
@media(max-width:960px) {
 .hero-grid { grid-template-columns: 1fr 1fr; gap: 0; }.hero h1 { font-size: 58px; }.hero-art { transform: scale(.88); transform-origin: center left; width: 115%; }
 .design-grid { grid-template-columns: repeat(2,1fr); }.testimonial-grid { grid-template-columns: repeat(2,1fr); }.catalog-toolbar { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.filter-scroll { width: 100%; }
 .category-layout { gap: 35px; }.about-grid { gap: 45px; }
}
@media(max-width:680px) {
 .hero { padding-top: 48px; }.hero-grid { display: flex; flex-direction: column; align-items: stretch; }.hero-copy { padding-bottom: 5px; }.hero h1 { font-size: clamp(48px,13vw,67px); }.hero-lede { font-size: 13px; }.hero-proof { margin-top: 27px; }
 .hero-art { min-height: 410px; width: 100%; transform: scale(.78); transform-origin: top center; margin-bottom: -85px; }.browser-main { left: 5%; }.browser-side { right: -2%; }.hero-sticker { right: 4%; }.note-top { left: 0; }.note-bottom { right: 0; }
 .hero-bottom { font-size: 7px; gap: 10px; }.trust-inner { width: max-content; gap: 18px; }
 .section { padding: 75px 0 83px; }.section-heading { display: block; margin-bottom: 30px; }.section-heading>p { margin-top: 19px; }
 .design-grid { grid-template-columns: 1fr; gap: 14px; }.testimonial-grid { grid-template-columns: 1fr; }.design-preview { height: 225px; }.design-card p { min-height: 0; }
 .category-section { padding: 76px 0; }.category-layout { grid-template-columns: 1fr; gap: 29px; }.category-layout h2 { font-size: 47px; }
 .process-section { padding: 77px 0; }.steps-grid { grid-template-columns: 1fr; }.step-card { min-height: 260px; }.step-icon { margin-top: 22px; }
 .about-section { padding: 75px 0; }.about-grid { grid-template-columns: 1fr; gap: 43px; }.about-mark { width: 215px; height: 215px; font-size: 46px; }.about-copy h2 { font-size: 48px; }
 .final-cta { padding: 72px 0; }.cta-inner { display: block; }.cta-side { width: auto; margin-top: 28px; }.cta-spark { right: -4%; top: -48px; font-size: 130px; }
 .request-dialog { padding: 29px 20px 22px; }.request-intro h2 { font-size: 34px; }.form-grid { grid-template-columns: 1fr; gap: 13px; }
 .form-grid .full-field { grid-column: auto; }
}