/*font-family: "Poppins", sans-serif;*/

/* Start Header */
.header{position:sticky; top:0; z-index:9999; display:none; align-items:center; justify-content: space-between; gap:12px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--neutral-200);}
.header .logo{max-width: 212px;}
.header .hamburger{display: none;}
/* End Header */

/* Start Hero Section with Video Background */
.hero-section{position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.hero-video{position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 1;}
.hero-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(54, 54, 54, 0.6); z-index: 2;}
.hero-wrap{max-width: 1160px; margin: 0 auto;}
.hero-nav{position: fixed; top: 0; left: 0; width: 100%; z-index: 10; padding: 24px 0;}
.hero-nav-content{display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.6); padding: 18px 40px; position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.hero-logo{width: 146px; margin-top: -5px}
.hero-menu{display: flex; align-items: center; gap: 24px;}
.hero-menu a{font-size: 18px; line-height: 24px; font-weight: 500; color: var(--neutral-600); transition: color 0.3s ease; position: relative;}
.hero-menu .btn-primary{color: var(--white) !important;}
.hero-menu a:hover{color: var(--secondary-300);}
.hero-menu a:hover::after{content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--secondary-300);}
.hero-menu .btn-primary:hover::after{background: transparent;}
.hero-content{position: relative; z-index: 5; color: var(--white); padding: 80px 0;}
.hero-content-inner{max-width: 650px;}
.hero-title{color: var(--white); animation: fadeInUp 1s ease-out 0.3s both;}
.hero-subtitle{max-width: 500px; animation: fadeInUp 1s ease-out 0.4s both;}
.hero-download{padding: 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; animation: fadeInUp 1s ease-out 0.5s both;}
.hero-icon{list-style: none; margin: 0; padding: 0; width: 92px; height: 92px; position: relative; flex-shrink: 0;}
.hero-icon li{position: absolute; left: 0; top: 0; width: 100%; opacity: 0; animation: heroIconFade 10s ease-in-out infinite; will-change: opacity;}
.hero-icon li img{width: 100%; height: auto; display: block;}
.hero-icon li:nth-child(1){animation-delay: 0s;}
.hero-icon li:nth-child(2){animation-delay: 2s;}
.hero-icon li:nth-child(3){animation-delay: 4s;}
.hero-icon li:nth-child(4){animation-delay: 6s;}
.hero-icon li:nth-child(5){animation-delay: 8s;}

@keyframes heroIconFade{
  0%{
    opacity: 0;
  }
  8%{
    opacity: 1;
  }
  20%{
    opacity: 1;
  }
  28%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-icon li{
    animation: none;
    opacity: 0;
  }
  .hero-icon li:first-child{
    opacity: 1;
  }
}


.download-text-icons{display: flex; align-items: center; gap: 8px;}
.hero-download-text-bottom{animation: fadeInUp 1s ease-out 0.6s both;}

.one-app-section{position: relative; overflow: hidden; background: var(--secondary-50);}
.one-app-content{max-width: 1240px; margin: 0 auto; width: 100%;}
.one-app-content-left{margin-right: -75px;}
.one-app-content-right{padding-top: 387px; position: relative; padding-left: 120px;}
.one-app-content-right-bg{background: url(../images/one-app-bg.png) no-repeat 0 bottom; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;}
.one-app-content-right-bg:after{content: ''; position: absolute; bottom: 0; left: 96%; width: 1920px; height: 100%; background: var(--info-50);}

.one-app-section .display-2{text-align: center; position: absolute; z-index: 3; left: 0; right: 0; top: 120px;}
.one-app-section .display-2 div{display: inline-block;}
.one-app-section .display-2 span{ color: var(--primary-300); font-size: 64px; line-height: 100%; font-weight: 700;}
.one-app-content .app-icon{width: 220px; position: absolute;}
.app-icon-img{width: 100px; height: 100px; margin: 0 auto; background: var(--white); display: flex; align-items: center; justify-content: center; -moz-border-radius: 999px; -webkit-border-radius: 999px; border-radius: 999px;}
.app-icon-img img{width: 48px; height: 48px; object-fit: cover;}
.app-icon-text{margin-top: 16px; text-align: center;}
.app-left-icon-1{top: -190px; left: -6px; animation: iconFloatUp 3.5s ease-in-out infinite; animation-delay: 0s;}
.app-left-icon-2{top: -6px; left: -150px; animation: iconFloatUp 4.2s ease-in-out infinite; animation-delay: 0.5s;}
.app-left-icon-3{top: 206px; left: -216px; animation: iconFloatUp 3.8s ease-in-out infinite; animation-delay: 1s;}
.app-right-icon-1{top: -136px; right: -6px; animation: iconFloatUp 4s ease-in-out infinite; animation-delay: 0.3s;}
.app-right-icon-2{top: 52px; right: -150px; animation: iconFloatUp 3.7s ease-in-out infinite; animation-delay: 0.7s;}
.app-right-icon-3{top: 264px; right: -216px; animation: iconFloatUp 4.3s ease-in-out infinite; animation-delay: 1.2s;}

/* Icon Float Up Animation - combines vertical and horizontal movement */
@keyframes iconFloatUp{
0%, 100% { 
  transform: translateY(0) translateX(0); 
}
25% { 
  transform: translateY(-12px) translateX(5px); 
}
50% { 
  transform: translateY(-20px) translateX(0); 
}
75% { 
  transform: translateY(-12px) translateX(-5px); 
}
}

.app-bf-section{position: relative; background: var(--secondary-50); z-index: 1;}
.app-bf-scroll-track{height: 500vh; position: relative;}
.app-bf-sticky-inner{position: sticky; top: 0; height: 100vh; min-height: 600px; display: flex; justify-content: center; align-items: center; padding: 120px 0 100px; box-sizing: border-box; background: var(--secondary-50);}
.app-bf-sticky-inner .wrap{width: 100%; max-width: 1556px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; min-height: 0;}
.app-bf-teaser-grid{display: flex; align-items: stretch; justify-content: space-between; gap: 40px; max-width: 1460px; width: 100%; margin: 0 auto; flex: 1; min-height: 400px; max-height: calc(940px - 240px); position: relative;}
.app-bf-teaser-column{flex: 1;}
.app-bf-teaser-copy{max-width: 410px; min-width: 320px; position: relative; min-height: 280px;}
.app-bf-teaser-copy-wrap{position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(60px); transition: opacity 0.55s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), visibility 0.55s ease;}
.app-bf-teaser-copy-wrap.active{position: relative; opacity: 1; visibility: visible; transform: translateY(0);}
.app-bf-teaser-copy-wrap.slide-out{opacity: 0; visibility: hidden; transform: translateY(-40px);}
.app-bf-content-wrapper{width: 100%;}
.app-bf-show-mobile{display: none;}.app-bf-teaser-img{max-width: 750px; width: 100%; flex-shrink: 0; min-width: 300px; min-height: 0; display: flex; flex-direction: column;}
.app-bf-img-wrap{position: relative; width: 100%; overflow: hidden; min-height: 320px; flex: 1; min-height: 0; height: 100%; box-sizing: border-box;}
.app-bf-img-wrap .app-bf-thumbnail{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: scale(0.92); transition: opacity 0.55s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), visibility 0.55s ease;}
.app-bf-img-wrap .app-bf-thumbnail.active{position: relative; opacity: 1; visibility: visible; transform: scale(1); height: 100%; display: flex; align-items: center;}
.app-bf-img-wrap .app-bf-thumbnail.zoom-fade-out{opacity: 0; transform: scale(1.12);}
.app-bf-img-wrap .app-bf-thumbnail > img{width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block;}
.app-bf-fixed-nav{position: absolute; bottom: -40px; left: 0; display: flex; align-items: center; gap: 40px; width: 100%; margin-left: auto; margin-right: auto;}
.app-bf-pagination-wrap{display: flex; align-items: baseline; font-size: 28px; line-height: 36px; font-weight: 600; color: var(--secondary-100);}
.app-bf-numbers{position: relative; display: inline-block; width: 1.2em; text-align: center;}
.app-bf-numbers .app-bf-number{position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease;}
.app-bf-numbers .app-bf-number.active{position: relative; opacity: 1; visibility: visible;}
.app-bf-skip-link{display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.5px; color: var(--secondary-400); border: 1px solid var(--secondary-400); padding: 8px 12px; -moz-border-radius: 999px; -webkit-border-radius: 999px; border-radius: 999px; text-decoration: none; transition: color 0.2s, border-color 0.2s;}
.app-bf-skip-link:hover{color: var(--secondary-300); border-color: var(--secondary-300);}
.app-bf-arrow-svg{flex-shrink: 0;}
.app-bf-skip-link svg path{fill: var(--secondary-400);}
.app-bf-skip-link:hover svg path{fill: var(--secondary-300);}

.app-share-section, .app-share-section .app-bf-sticky-inner{background: var(--info-50);}
.app-share-section .app-bf-pagination-wrap{color: var(--info-100);}
.app-share-section .app-bf-fixed-nav{justify-content: flex-end;}
.app-share-section .app-bf-skip-link{color: var(--info-400); border-color: var(--info-400);}
.app-share-section .app-bf-skip-link:hover{color: var(--info-300); border-color: var(--info-300);}
.app-share-section .app-bf-skip-link svg path{fill: var(--info-400);}
.app-share-section .app-bf-skip-link:hover svg path{fill: var(--info-300);}

.chefs-content{max-width: 1160px; margin: 0 auto;}
.chefs-group{gap: 40px;}        
.chefs-group-item{max-width: 560px; margin-top: 385px; position: relative;}
.chefs-group-item:first-child{margin-top: 0;}
.chefs-group-item-text{position: absolute; max-width: 400px; width: 100%; top: 200px; background: var(--white); padding: 16px; z-index: 2; animation: fadeInUp 1s ease-out both;}
.chefs-group-item-text::before{content: ''; position: absolute; top: -24px; width: 39px; height: 28px;}
.chefs-group-item-left .chefs-group-item-text{right: -295px; -moz-box-shadow: 8px 8px 0 0 var(--secondary-300); -webkit-box-shadow: 8px 8px 0 0 var(--secondary-300); box-shadow: 8px 8px 0 0 var(--secondary-300); animation-delay: 0.3s;}
.chefs-group-item-left .chefs-group-item-text::before{background: url(../images/chef-quote-1.svg) no-repeat center center; left: -24px;}
.chefs-group-item-right .chefs-group-item-text{left: -295px; -moz-box-shadow: 8px 8px 0 0 var(--info-300); -webkit-box-shadow: 8px 8px 0 0 var(--info-300); box-shadow: 8px 8px 0 0 var(--info-300); animation-delay: 0.5s;}
.chefs-group-item-right .chefs-group-item-text::before{background: url(../images/chef-quote-2.svg) no-repeat center center; right: -24px;}


.about-content{gap: 40px;}
.about-img{max-width: 710px; width: 56%;}
.about-text{max-width: 560px; width: 44%;}

.download-content{background: url(../images/download.png) no-repeat center center; background-size: cover; padding: 40px 24px; min-height: 527px; color: var(--white);}
.download-btn{display: none;}
.download-qr-code{display: flex; flex-direction: column; align-items: center;}
.download-qr-code img{background: var(--white); padding: 8px; border-radius: 8px;}

.faq-wrap{max-width: 1200px; margin: 0 auto;}
.faq-accordion{margin-top: 80px;}
.faq-accordion .accordion.faq-accordion-cols {display: flex; gap: 40px; align-items: flex-start;}
.faq-accordion .faq-col {flex: 1; display: flex; flex-direction: column; gap: 24px;}
.faq-accordion .accordion-body{padding-right: 72px;}


.contact-wrap, .content-wrap{max-width: 1160px; margin: 0 auto;}
.contact-content{display: flex; align-items: flex-end; position: relative; padding-bottom: 160px;}
.contact-img{max-width: 710px;}
.contact-text{padding: 40px; max-width: 600px; width: 100%; position: absolute; right: 0; bottom: 0;}

.footer{background: var(--primary-300); padding: 120px 0; -moz-border-radius: 120px 120px 0 0; -webkit-border-radius: 120px 120px 0 0; border-radius: 120px 120px 0 0;}
.footer-menu{margin-top: 40px;}
.footer-menu a{color: var(--white); font-size: 18px; line-height: 24px; font-weight: 500; transition: color 0.3s ease;}
.footer-menu a:hover{color: var(--secondary-300);}
.footer-menu a:hover::after{content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--secondary-300);}
.copyright{margin-top: 40px; color: var(--primary-50);}



.reveal-wrap{width: 100%; height: 100vh; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; --pos: 50%; cursor: grab;}
.reveal-wrap.dragging{cursor: grabbing;}
.reveal-wrap picture, .reveal-wrap picture img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
.layer-left{z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0);}
.layer-right{z-index: 2; clip-path: inset(0 0 0 var(--pos));}
.divider{position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; background: var(--white); transform: translateX(-1px); z-index: 5; pointer-events: none;}
.handle{position: absolute; left: var(--pos); top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: url(../images/drag.png) no-repeat center center; background-size: contain; z-index: 6; pointer-events: none;}