/* Final showroom polish: interaction quality, responsive details and motion choreography. */
:root{
  --focus-ring:0 0 0 3px rgba(145,183,91,.32);
  --surface-line:rgba(63,78,54,.11);
}
html{scroll-padding-top:100px;text-rendering:optimizeLegibility}
body{-webkit-font-smoothing:antialiased}
.site-header,.demo-topbar{transition:box-shadow .35s ease,background-color .35s ease}
.site-header .nav-wrap{transition:height .35s cubic-bezier(.2,.8,.2,1)}
.has-scrolled .site-header .nav-wrap{height:68px}
.has-scrolled .demo-topbar{min-height:51px}
.nav-links a,.footer-col a,.footer-contact a,.owner-contact a{transition:color .22s ease}
.mobile-menu{width:44px;height:44px;border-radius:12px;transition:background .2s,transform .2s}
.mobile-menu:hover{background:#e9efe0}
.mobile-menu:active{transform:scale(.94)}
.hero{isolation:isolate}
.hero:before{
  position:absolute;inset:0;z-index:-1;content:"";pointer-events:none;opacity:.26;
  background-image:linear-gradient(rgba(124,146,94,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(124,146,94,.055) 1px,transparent 1px);
  background-size:52px 52px;mask-image:linear-gradient(90deg,transparent 8%,#000 68%,transparent);
}
.hero-copy .eyebrow{padding:9px 13px;border:1px solid #e2e9d8;border-radius:999px;background:rgba(255,255,255,.55)}
.hero h1{max-width:690px;text-wrap:balance}
.hero-art{perspective:1200px}
.browser-main,.browser-side{backface-visibility:hidden;transform-style:preserve-3d}
.browser-main{border-radius:15px}
.browser-side{border-radius:13px}
.hero-browser{transition:box-shadow .4s ease}
.hero-art:hover .browser-main{box-shadow:0 36px 80px rgba(40,57,29,.2)}
.hero-art:hover .browser-side{box-shadow:0 33px 68px rgba(40,57,29,.18)}
.hero-bottom{padding-top:9px}
.hero-rule{position:relative;overflow:hidden}
.hero-rule:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent,#a4c56f,transparent);transform:translateX(-100%);animation:ruleGlide 4.5s ease-in-out infinite}
@keyframes ruleGlide{0%,28%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
.trust-strip{position:relative}
.trust-inner b{transition:color .25s ease}
.trust-inner b:hover{color:#7d9950}
.catalog-toolbar{align-items:center}
.search-box{box-shadow:0 2px 8px rgba(36,48,27,.025)}
.search-box:focus-within{border-color:#a9c57a;box-shadow:0 0 0 4px rgba(169,197,122,.13)}
.search-box input:focus{outline:0}
.filter-chip{min-height:40px}
.filter-chip:hover{border-color:#d8e4c8;background:#fff;color:#435a2f}
.results-meta{align-items:center}
.design-grid{align-items:stretch}
.design-card{
  position:relative;display:flex;flex-direction:column;min-height:100%;
  border-radius:15px;box-shadow:0 2px 8px rgba(32,43,25,.025);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
}
.design-card>a:first-child{display:block;overflow:hidden;border-radius:8px}
.design-preview{transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s}
.design-card:hover .design-preview{transform:scale(1.018);filter:saturate(1.08)}
.preview-page{transform-origin:50% 20%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.design-card:hover .preview-page{transform:translateY(-3px) scale(1.025)}
.design-card .card-meta{margin-top:19px}
.design-card h3{line-height:1.2}
.design-card p{flex:1}
.card-actions{align-items:center}
.card-actions .btn{min-height:42px}
.category-section{position:relative;overflow:hidden}
.category-section:after{
  position:absolute;right:-150px;bottom:-250px;width:490px;height:490px;border:1px solid rgba(117,145,81,.16);
  border-radius:50%;content:"";pointer-events:none;box-shadow:0 0 0 38px rgba(117,145,81,.025),0 0 0 76px rgba(117,145,81,.02)
}
.category-layout{position:relative;z-index:1}
.category-pill{min-height:47px}
.category-pill:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.steps-grid{align-items:stretch}
.step-card{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
.step-card:after{position:absolute;right:-22px;bottom:-32px;width:110px;height:110px;border:1px solid rgba(111,140,70,.13);border-radius:50%;content:"";transition:transform .55s}
.step-card:hover:after{transform:scale(1.35)}
.step-highlight{box-shadow:inset 0 0 0 1px rgba(137,169,88,.07)}
.testimonial-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.about-mark{position:relative;isolation:isolate}
.about-mark:after{position:absolute;inset:12px;border:1px solid rgba(116,142,74,.25);border-radius:50%;content:"";animation:orbitSpin 55s linear infinite}
.about-mark span{position:relative;z-index:1}
.final-cta{isolation:isolate}
.final-cta:before{position:absolute;right:-130px;top:-280px;z-index:-1;width:650px;height:650px;border:1px solid rgba(201,243,106,.12);border-radius:50%;content:"";box-shadow:0 0 0 45px rgba(201,243,106,.025),0 0 0 90px rgba(201,243,106,.018)}
.cta-side .btn{width:100%}
.whatsapp-float,.demo-whatsapp{isolation:isolate}
.whatsapp-float:after,.demo-whatsapp:after{
  position:absolute;inset:-5px;z-index:-1;border:1px solid rgba(37,211,102,.36);border-radius:50%;content:"";
  animation:whatsappPulse 3.2s ease-out infinite
}
@keyframes whatsappPulse{0%{transform:scale(.82);opacity:.8}80%,100%{transform:scale(1.38);opacity:0}}
.modal-backdrop{animation:backdropFade .2s ease both}
.request-dialog{animation:dialogEnter .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes backdropFade{from{opacity:0}to{opacity:1}}
@keyframes dialogEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.request-dialog:focus{outline:0}
.form-grid label{line-height:1.4}
.form-grid input,.form-grid textarea,.form-grid select{min-height:44px}
.form-grid textarea{min-height:106px}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#a0a79a}
.form-feedback{line-height:1.6}
.form-whatsapp-link{display:inline-block;margin-top:5px;color:#236d42;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.submit-btn{transition:transform .25s,background .25s,opacity .25s}
.submit-btn:not(:disabled):hover{transform:translateY(-2px)}
.demo-topbar{padding-inline:max(16px,calc((100% - 1180px)/2))}
.demo-site{isolation:isolate}
.demo-site .demo-nav{transition:min-height .35s ease,border-color .3s}
.demo-site .demo-nav-action,.demo-request{transition:transform .25s,box-shadow .25s,background .25s}
.demo-site .demo-nav-action:hover,.demo-request:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(25,35,20,.1)}
.demo-site .demo-section{scroll-margin-top:82px}
.demo-site .demo-section-head{align-items:flex-end}
.demo-site .demo-section-head p{max-width:380px}
.demo-site .demo-primary:focus-visible,.demo-site .demo-secondary:focus-visible,.demo-nav-action:focus-visible,.demo-request:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.demo-site button:focus-visible,.demo-site a:focus-visible{outline:2px solid var(--demo-accent);outline-offset:4px}
.demo-site .demo-band{isolation:isolate}
.demo-site .demo-band-inner{position:relative;z-index:1}
.demo-site .demo-footer-inner a{transition:color .22s ease}
.demo-site .demo-footer-inner a:hover{color:var(--demo-accent)}
.demo-site .demo-contact-section{scroll-margin-top:80px}
.demo-toast{max-width:min(420px,calc(100% - 40px));line-height:1.6}
.demo-toast.show{animation:toastEnter .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes toastEnter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.demo-list-row,.demo-course,.demo-post,.demo-stat,.demo-product{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.demo-list-row:hover{transform:translateX(4px)}
.demo-product img,.demo-card img{display:block}
.demo-card img,.demo-product img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.demo-card:hover img,.demo-product:hover img{transform:scale(1.055);filter:saturate(1.08)}
.demo-product button{transition:transform .2s,background .2s}
.demo-product button:hover{transform:rotate(90deg);background:var(--demo-accent)}
.demo-post-actions button:hover{color:var(--demo-accent)}
.demo-dashboard .dashboard-side button{transition:background .2s,color .2s,transform .2s}
.demo-dashboard .dashboard-side button:hover{transform:translateX(3px)}
.editorial-mini{transition:transform .35s,background .3s,border-color .3s}
.editorial-mini:hover{transform:translateX(4px)}
.story-item,.portfolio-project-list article,.news-brief-grid article,.education-paths>div,.social-circles article,.forum-category-list article,.landing-feature-grid article,.landing-benefits article,.nonprofit-impact-grid>div,.directory-category-grid a,.saas-capabilities article,.restaurant-menu-list article{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.story-item:hover,.directory-category-grid a:hover,.saas-capabilities article:hover{transform:translateY(-4px)}
.directory-category-grid a:hover{border-color:var(--demo-accent)}
.demo-list-row[hidden]{display:none!important}
@supports ((animation-timeline:view()) and (animation-range:entry 0% cover 45%)){
  .hero-ecommerce-stage>img,.hero-blog-feature>img,.hero-social-collage img,.hero-education-art>img,.hero-nonprofit-image>img,.hero-directory-art>img,.hero-restaurant-image>img,.commerce-story-image img{
    animation:polishImageDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 48%;
  }
  @keyframes polishImageDrift{
    from{transform:scale(1.12) translateY(15px)}
    to{transform:scale(1) translateY(0)}
  }
  .story-business,.story-commerce,.story-blog,.story-portfolio,.story-news,.story-education,.story-social,.story-forum,.story-landing,.story-nonprofit,.story-directory,.story-saas,.story-restaurant{
    animation:sectionSettle linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 24%;
  }
  @keyframes sectionSettle{from{opacity:.82;translate:0 18px}to{opacity:1;translate:0 0}}
}
@media(max-width:760px){
  html{scroll-padding-top:78px}
  .has-scrolled .site-header .nav-wrap{height:60px}
  .demo-topbar{padding-inline:14px}
  .search-box{min-height:46px}
  .filter-scroll{padding:5px 3px 9px;scroll-snap-type:x proximity}
  .filter-chip{scroll-snap-align:start}
  .card-actions .btn{min-height:43px}
  .request-dialog{padding:26px 20px 22px;border-radius:16px;max-height:calc(100dvh - 28px)}
  .modal-backdrop{padding:14px}
  .whatsapp-float,.demo-whatsapp{right:16px;bottom:16px;width:52px;height:52px}
}
@media(max-width:420px){
  .demo-topbar{gap:8px}
  .demo-request{padding:9px 11px;font-size:9px}
  .demo-topbar .back-link{font-size:10px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full-field{grid-column:1}
  .request-intro h2{font-size:35px}
}
@media(prefers-reduced-motion:reduce){
  .hero-rule:after,.about-mark:after,.whatsapp-float:after,.demo-whatsapp:after,.request-dialog,.modal-backdrop,.demo-toast.show,.story-portfolio,.story-news,.story-education,.story-social,.story-forum,.story-landing,.story-nonprofit,.story-directory,.story-saas,.story-restaurant,.hero-ecommerce-stage>img,.hero-blog-feature>img,.hero-social-collage img,.hero-education-art>img,.hero-nonprofit-image>img,.hero-directory-art>img,.hero-restaurant-image>img,.commerce-story-image img,.story-business,.story-commerce,.story-blog{animation:none!important}
  .demo-site .demo-primary,.demo-site .demo-secondary,.demo-list-row,.demo-product,.demo-course,.demo-post,.demo-stat,.demo-product img,.demo-card img,.editorial-mini,.story-item,.directory-category-grid a,.saas-capabilities article{transition:none!important}
}