.design-demo { --demo-ink:#15201d; position:relative; overflow:hidden; margin:-40px; color:var(--demo-ink); background:#f7f7f3; font-family:Inter,Arial,sans-serif; }
.design-demo * { box-sizing:border-box; }
.design-demo a { color:inherit; }
.demo-switcher { position:sticky; top:8px; z-index:20; width:max-content; max-width:calc(100% - 32px); margin:16px auto -58px; padding:6px; display:flex; gap:4px; overflow:auto; background:rgba(255,255,255,.88); border:1px solid rgba(20,30,28,.12); border-radius:999px; box-shadow:0 8px 30px rgba(20,30,28,.12); backdrop-filter:blur(16px); }
.demo-switcher a { padding:9px 14px; border-radius:999px; font-size:.8rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.demo-switcher a.active { color:#fff; background:#183c36; }
.demo-disclaimer { position:relative; z-index:10; padding:18px clamp(20px,5vw,60px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; color:#fff; background:#162a26; }
.demo-disclaimer span { padding:6px 9px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.demo-disclaimer p { margin:0; color:rgba(255,255,255,.72); }
.demo-disclaimer a { padding:10px 14px; color:#162a26; background:#fff; border-radius:999px; font-weight:800; text-decoration:none; }
/* ERP */
.erp-demo { padding-top:76px; color:#24332f; background:#edf1ef; }
.erp-topbar { min-height:76px; padding:0 28px; display:grid; grid-template-columns:220px minmax(220px,520px) 1fr; align-items:center; gap:22px; background:#fff; border-bottom:1px solid #dce4e0; }
.erp-brand { color:#173b35!important; font-size:1.5rem; font-weight:900; text-decoration:none; letter-spacing:-.05em; }.erp-brand span{color:#3da88e}
.erp-search { height:42px; padding:0 14px; display:flex; align-items:center; gap:8px; background:#f2f5f3; border-radius:10px; }.erp-search input{width:100%;border:0;outline:0;background:transparent;font:inherit}.erp-search span{font-size:1.5rem;color:#70827d}
.erp-user{justify-self:end;display:flex;align-items:center;gap:10px}.erp-user>span,.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#245f54;font-size:.78rem;font-weight:900}.erp-user div{display:grid}.erp-user small{color:#71817d}
.erp-layout{display:grid;grid-template-columns:220px 1fr;min-height:760px}.erp-sidebar{padding:28px 16px;display:flex;flex-direction:column;gap:7px;color:#dce8e4;background:#173b35}.erp-sidebar>p{margin:0 14px 12px;color:#89a9a1;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.erp-sidebar>a{padding:12px 14px;display:flex;gap:12px;align-items:center;border-radius:9px;text-decoration:none;font-weight:700}.erp-sidebar>a.active,.erp-sidebar>a:hover{background:#28564e}.erp-sidebar>a span{width:20px;text-align:center}.erp-sidebar-help{margin-top:auto;padding:16px;display:grid;gap:5px;background:#224b44;border-radius:12px}.erp-sidebar-help small{color:#a9c0ba;line-height:1.45}
.erp-content{padding:38px clamp(22px,4vw,52px);min-width:0}.erp-welcome{display:flex;justify-content:space-between;align-items:end;gap:20px}.erp-welcome p,.erp-panel header p{margin:0 0 5px;color:#74837f;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.erp-welcome h1{margin:0 0 5px;color:#183c36;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.04em}.erp-welcome>div>span{color:#6b7b77}.erp-welcome button{padding:12px 17px;color:#fff;background:#237965;border:0;border-radius:9px;font-weight:800}
.erp-kpis{margin:30px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.erp-kpis article{padding:18px;display:flex;gap:13px;background:#fff;border:1px solid #dfe6e3;border-radius:14px;box-shadow:0 8px 25px rgba(26,55,48,.05)}.erp-kpis article>div{min-width:0;display:grid;gap:4px}.erp-kpis small{color:#73827e}.erp-kpis strong{font-size:1.35rem;color:#21352f}.erp-kpis em{color:#709088;font-size:.7rem;font-style:normal}.erp-kpi-icon{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:10px;font-weight:900}.erp-kpi-icon.blue{color:#39798f;background:#dff2f5}.erp-kpi-icon.amber{color:#a56c24;background:#fff0cf}.erp-kpi-icon.green{color:#28745c;background:#dff4eb}.erp-kpi-icon.rose{color:#a54b61;background:#f9e2e8}
.erp-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.erp-panel{padding:22px;background:#fff;border:1px solid #dfe6e3;border-radius:14px}.erp-panel header{display:flex;justify-content:space-between;align-items:start;gap:12px}.erp-panel h2{margin:0;color:#21352f;font-size:1.2rem}.erp-panel header a{color:#287765;font-size:.8rem;font-weight:800}.erp-task-list{margin:15px 0 0;padding:0;list-style:none}.erp-task-list li{padding:13px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border-top:1px solid #edf0ef}.erp-task-list div{display:grid;gap:3px}.erp-task-list small,.erp-customer small{color:#74837f}.erp-check{width:22px;height:22px;border:2px solid #aac0ba;border-radius:7px;background:#fff}.erp-check.done{border-color:#2f8b75;background:#2f8b75}.erp-check.done:after{content:'✓';color:#fff}.tag{padding:5px 8px;border-radius:999px;font-size:.65rem}.tag.high{color:#9a485a;background:#f8e3e8}.tag.normal{color:#8b661e;background:#fff0ca}.tag.low{color:#55746d;background:#eaf1ef}.erp-customer{padding:13px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-top:1px solid #edf0ef}.erp-customer:first-of-type{margin-top:15px}.erp-customer div{display:grid;gap:3px}.erp-customer time{color:#84928f;font-size:.72rem}.avatar.sand{color:#79571d;background:#f2dba9}.avatar.plum{background:#74516e}.erp-progress{margin-top:18px}.erp-progress header>strong{color:#237965}.progress-track{height:10px;margin:20px 0 12px;overflow:hidden;background:#e9efed;border-radius:999px}.progress-track i{display:block;width:74%;height:100%;background:linear-gradient(90deg,#2a806d,#73b8a6);border-radius:inherit}.progress-labels{display:flex;justify-content:space-between;gap:14px;color:#74837f;font-size:.76rem}.progress-labels span{display:grid;gap:3px}.progress-labels b{color:#293c37}
/* Shop */
.shop-demo{padding-top:58px;color:#282720;background:#f8f4ec;font-family:Arial,sans-serif}.shop-announcement{padding:9px;text-align:center;color:#f9f4e9;background:#24251f;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}.shop-header{min-height:84px;padding:0 clamp(20px,5vw,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #d7d0c2}.shop-logo{display:grid;justify-self:start;font-family:Georgia,serif;font-size:1.45rem;font-weight:800;text-decoration:none;letter-spacing:.08em}.shop-logo span{font:600 .48rem Arial,sans-serif;letter-spacing:.28em}.shop-header>nav{display:flex;gap:28px}.shop-header>nav a{font-size:.83rem;text-decoration:none}.shop-actions{justify-self:end;display:flex;align-items:center;gap:7px}.shop-actions button,.shop-menu{padding:7px;background:transparent;border:0;font:inherit}.shop-actions b{padding:3px 6px;color:#fff;background:#26271f;border-radius:50%;font-size:.63rem}.shop-menu{display:none}.shop-hero{min-height:600px;display:grid;grid-template-columns:1.1fr .9fr;background:#e6dfd1}.shop-hero-art{position:relative;overflow:hidden;min-height:520px;background:linear-gradient(145deg,#b9c0aa,#d8c9af)}.shop-sun{position:absolute;left:10%;top:12%;width:190px;height:190px;border-radius:50%;background:#e6aa72;opacity:.62}.shop-plinth{position:absolute;left:20%;right:16%;bottom:0;height:42%;background:#c7b393;clip-path:polygon(7% 15%,100% 0,94% 100%,0 100%)}.shop-vase{position:absolute;z-index:2;bottom:30%;display:block;background:#776d5d;box-shadow:0 25px 35px rgba(50,40,30,.2)}.shop-vase.one{left:35%;width:120px;height:180px;border-radius:45% 45% 18% 18%}.shop-vase.one:before{content:'';position:absolute;left:36px;top:-52px;width:48px;height:70px;background:#776d5d}.shop-vase.two{left:61%;width:85px;height:125px;border-radius:10px 10px 45% 45%;background:#d8d0bd}.shop-hero-copy{padding:clamp(45px,8vw,110px);display:flex;flex-direction:column;justify-content:center;align-items:start}.shop-hero-copy p,.shop-products header p,.shop-story p{margin:0 0 15px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.shop-hero-copy h1{margin:0 0 22px;font:500 clamp(2.8rem,6vw,5.3rem)/.95 Georgia,serif;letter-spacing:-.05em}.shop-hero-copy>span{max-width:500px;line-height:1.7;color:#5e5a50}.shop-hero-copy a,.shop-story a{margin-top:30px;padding-bottom:6px;display:flex;gap:35px;border-bottom:1px solid;text-decoration:none;font-weight:800}.shop-benefits{padding:18px clamp(20px,6vw,80px);display:flex;justify-content:space-around;gap:20px;border-bottom:1px solid #d9d1c4}.shop-benefits span{display:flex;align-items:center;gap:9px;font-size:.75rem}.shop-benefits b{font-size:1.1rem}.shop-products{padding:clamp(60px,8vw,110px) clamp(20px,6vw,80px)}.shop-products>header{display:flex;justify-content:space-between;align-items:end}.shop-products h2,.shop-story h2{margin:0;font:500 clamp(2rem,4vw,3.4rem) Georgia,serif}.shop-products header>a{font-size:.8rem}.product-grid{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.product-grid article{position:relative}.product-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e5dbcc}.product-image button{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.8);font-size:1rem}.product-image em{position:absolute;left:12px;top:12px;padding:6px 8px;color:#fff;background:#2e332b;font-size:.62rem;font-style:normal;text-transform:uppercase}.product-grid article>p{margin:15px 0 5px;color:#787164;font-size:.68rem;text-transform:uppercase}.product-grid h3{margin:0 0 8px;font:500 1rem Georgia,serif}.product-grid strong{font-size:.85rem}.object{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);display:block}.bowl{width:62%;height:30%;border-radius:10% 10% 50% 50%;background:#a8795e;box-shadow:inset 0 14px rgba(255,255,255,.16)}.lamp{width:48%;height:42%;border-radius:50% 50% 8% 8%;background:#eee5d2}.lamp:after{content:'';position:absolute;left:48%;top:95%;width:4%;height:48%;background:#847b6f}.chair{width:54%;height:48%;border:12px solid #73634d;border-bottom:0;border-radius:10px}.chair:after{content:'';position:absolute;left:-12px;right:-12px;bottom:-22px;height:25px;background:#73634d}.carafe{width:38%;height:52%;border-radius:35% 35% 18% 18%;background:rgba(70,76,70,.78)}.carafe:before{content:'';position:absolute;left:35%;top:-24%;width:30%;height:30%;background:inherit}.linen{background:#d8d1c3}.moss{background:#bec2aa}.ink{background:#b9b5ae}.shop-story{display:grid;grid-template-columns:.8fr 1.2fr;min-height:500px;background:#31342d;color:#f5f0e5}.shop-story>div:first-child{padding:clamp(45px,8vw,100px);display:flex;flex-direction:column;justify-content:center;align-items:start}.shop-story>div>span{max-width:520px;margin-top:22px;color:#c8c7bd;line-height:1.7}.story-art{position:relative;overflow:hidden;background:#8e927d}.story-art i{position:absolute;left:12%;right:18%;bottom:0;height:70%;background:#d0b58d;clip-path:polygon(8% 10%,95% 0,100% 100%,0 100%)}.story-art b{position:absolute;left:38%;bottom:30%;width:25%;height:45%;border-radius:50% 50% 14% 14%;background:#565a4c}.story-art span{position:absolute;left:65%;bottom:27%;width:18%;height:35%;border-radius:12% 12% 50% 50%;background:#e0d6c1}
/* Experience */
.experience-demo{padding-top:58px;color:#24423d;background:#f6eee5;font-family:Arial,sans-serif}.experience-header{position:absolute;z-index:5;top:80px;left:0;right:0;padding:0 clamp(22px,6vw,82px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.experience-logo{display:grid;justify-self:start;font:700 1.45rem Georgia,serif;text-decoration:none}.experience-logo span{font:600 .54rem Arial,sans-serif;letter-spacing:.18em}.experience-header nav{display:flex;gap:28px}.experience-header nav a{font-size:.82rem;text-decoration:none}.experience-book{justify-self:end;padding:11px 15px;border:1px solid;border-radius:999px;font-size:.78rem;font-weight:800;text-decoration:none}.experience-hero{position:relative;min-height:750px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f4d9c8,#e9d8d1 46%,#b9d7cd)}.experience-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}.experience-copy p,.experience-moments>header p,.experience-gift>div>p,.experience-about>p{margin:0 0 15px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.experience-copy h1{margin:0;font:500 clamp(4rem,10vw,8.5rem)/.82 Georgia,serif;letter-spacing:-.065em}.experience-copy>span{max-width:480px;margin-top:28px;line-height:1.6}.experience-copy a{margin-top:30px;padding:13px 18px;display:flex;gap:25px;color:#fff;background:#315f56;border-radius:999px;font-weight:800;text-decoration:none}.experience-note{position:absolute;left:6%;bottom:12%;display:flex;gap:10px;align-items:start}.experience-note span{font-size:.7rem}.experience-note p{margin:0;font:italic 1rem Georgia,serif}.experience-orbit{position:absolute;inset:0}.orb{position:absolute;display:block;border-radius:50%;filter:blur(1px)}.orb-one{width:380px;height:380px;left:-100px;top:20%;background:#e5ad91}.orb-two{width:280px;height:280px;right:4%;top:12%;background:#eec9a8}.orb-three{width:190px;height:190px;right:19%;bottom:4%;background:#89bbb0}.experience-orbit i{position:absolute;inset:12% 23%;border:1px solid rgba(49,95,86,.22);border-radius:50%;transform:rotate(-12deg)}.wave-divider{height:150px;margin-top:-2px;line-height:0}.wave-divider svg{width:100%;height:100%}.wave-one{background:#f6eee5}.wave-one path{fill:#dce7dd}.experience-moments{padding:60px clamp(20px,6vw,80px) 100px;background:#dce7dd}.experience-moments>header{text-align:center}.experience-moments h2,.experience-gift h2{margin:0;font:500 clamp(2.8rem,6vw,5rem)/.95 Georgia,serif}.moment-track{margin-top:50px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.moment{padding:12px 12px 26px;background:#f8f3ea;border-radius:150px 150px 20px 20px}.moment>span{width:28px;height:28px;margin:10px;display:grid;place-items:center;border:1px solid;border-radius:50%;font-size:.65rem}.moment-art{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:140px 140px 12px 12px}.forest .moment-art{background:linear-gradient(#93b3a4,#526f64)}.forest .moment-art i,.forest .moment-art b{position:absolute;bottom:0;width:24%;height:75%;background:#315348;clip-path:polygon(50% 0,100% 100%,0 100%)}.forest .moment-art i{left:18%}.forest .moment-art b{right:18%;height:58%}.table .moment-art{background:linear-gradient(#e8b99d,#d38d75)}.table .moment-art i{position:absolute;left:12%;right:12%;bottom:22%;height:15%;background:#7f5947;border-radius:50%}.table .moment-art b{position:absolute;left:48%;bottom:8%;width:4%;height:30%;background:#6f4f42}.coast .moment-art{background:linear-gradient(#badad9 55%,#6a9e9c 55%)}.coast .moment-art i{position:absolute;left:20%;bottom:12%;width:60%;height:18%;background:#e1b071;border-radius:50%}.coast .moment-art b{position:absolute;left:48%;bottom:28%;width:3%;height:35%;background:#315348}.moment h3{margin:20px 10px 7px;font:500 1.4rem Georgia,serif}.moment p{margin:0 10px 18px;color:#58716b;line-height:1.5}.moment a{margin:0 10px;font-size:.78rem;font-weight:800}.wave-two{background:#dce7dd}.wave-two path{fill:#edc8b5}.experience-gift{padding:60px clamp(25px,7vw,95px) 110px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(35px,8vw,110px);background:#edc8b5}.gift-art{position:relative;aspect-ratio:1;display:grid;place-items:center;background:#e9b79f;border-radius:50%;transform:rotate(-5deg)}.gift-art span{position:relative;z-index:2;font:italic 2rem Georgia,serif}.gift-art i,.gift-art b{position:absolute;background:#315f56}.gift-art i{width:48%;height:34%}.gift-art b{width:8%;height:56%}.experience-gift>div:last-child>span{display:block;max-width:520px;margin-top:24px;color:#5f6f69;line-height:1.7}.experience-gift a{display:inline-block;margin-top:28px;padding-bottom:6px;border-bottom:1px solid;font-weight:800;text-decoration:none}.experience-about{padding:120px 20px;text-align:center;background:#24443e;color:#f6eee5}.experience-about blockquote{max-width:900px;margin:25px auto 35px;font:italic clamp(2.2rem,5vw,4.6rem)/1.12 Georgia,serif}.experience-about a{color:#f6eee5;font-weight:800}
.reveal-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:900px){.design-demo{margin:-20px -15px}.erp-topbar{grid-template-columns:1fr auto}.erp-search{display:none}.erp-layout{grid-template-columns:72px 1fr}.erp-sidebar{padding-inline:10px}.erp-sidebar>p,.erp-sidebar>a:not(.active){font-size:0}.erp-sidebar>a{justify-content:center}.erp-sidebar>a span{font-size:1rem}.erp-sidebar-help{display:none}.erp-kpis{grid-template-columns:repeat(2,1fr)}.erp-columns{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.experience-header nav{display:none}}
@media(max-width:650px){.demo-switcher{margin-bottom:-52px}.demo-switcher a{padding:8px 10px}.demo-disclaimer{grid-template-columns:1fr}.demo-disclaimer a{width:fit-content}.erp-topbar{padding:0 14px}.erp-user div{display:none}.erp-layout{display:block}.erp-sidebar{padding:8px;flex-direction:row;overflow:auto}.erp-sidebar>p{display:none}.erp-sidebar>a,.erp-sidebar>a:not(.active){font-size:0}.erp-content{padding:28px 14px}.erp-welcome{align-items:start}.erp-kpis{grid-template-columns:1fr}.progress-labels{flex-direction:column}.shop-header{grid-template-columns:auto 1fr auto}.shop-menu{display:block}.shop-logo{justify-self:center}.shop-header>nav,.shop-actions button:nth-child(-n+2){display:none}.shop-hero{grid-template-columns:1fr}.shop-hero-art{min-height:400px}.shop-hero-copy{padding:55px 24px}.shop-benefits{align-items:flex-start;flex-direction:column}.product-grid{grid-template-columns:1fr 1fr;gap:12px}.shop-story{grid-template-columns:1fr}.story-art{min-height:350px}.experience-header{grid-template-columns:1fr auto;padding-inline:20px}.experience-hero{min-height:680px}.experience-note{display:none}.moment-track{grid-template-columns:1fr}.moment{max-width:430px;margin:auto}.experience-gift{grid-template-columns:1fr}.gift-art{max-width:420px}.experience-copy h1{font-size:clamp(3.4rem,20vw,6rem)}}
@media(max-width:650px){.demo-switcher{width:calc(100% - 28px);justify-content:center;overflow:visible}.demo-switcher a{padding:8px 7px;font-size:.69rem}}
@media(prefers-reduced-motion:reduce){.reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}}