/* ==========================================================
   AIR FRYER PRO
   DESKTOP
========================================================== */

/* ==========================================================
   BODY
========================================================== */

body{

    min-width:320px;

    overflow-x:hidden;

}

/* ==========================================================
   BACKGROUND
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(244,180,0,.08),
            transparent 40%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(244,180,0,.05),
            transparent 35%
        );

    pointer-events:none;

    z-index:-2;

}

/* ==========================================================
   SECTIONS
========================================================== */

section{

    overflow:hidden;

}

/* ==========================================================
   SECTION ALT
========================================================== */

.trust,
.experience,
.bonus,
.guarantee{

    background:var(--color-surface);

}

.transformation,
.ebook-content,
.offer,
.cta-final{

    background:var(--color-surface-alt);

}


/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    display:flex;

    align-items:center;

    z-index:var(--z-header);

    transition:var(--transition);

    background:rgba(255,253,248,.80);

    backdrop-filter:blur(18px);

    border-bottom:1px solid transparent;

}

.header.scrolled{

    border-color:var(--color-border);

    box-shadow:var(--shadow-sm);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:52px;

}

.logo-title{

    display:block;

    font-size:1.1rem;

    font-weight:800;

    color:var(--color-text);

}

.logo-pro{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:10px;

    padding:5px 10px;

    background:#F5B400;

    color:#111;

    border-radius:6px;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

    line-height:1;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-list{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-list a{

    position:relative;

    font-weight:600;

    transition:var(--transition);

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}

.nav-list a:hover::after{

    width:100%;

}


/*======================================
 HERO V2
======================================*/

.hero-v2{

    position:relative;

    overflow:hidden;

    background:#FFFDF8;

    padding:95px 0 45px;
	
	animation:heroFade .9s ease;

}

/*=========================
Container
=========================*/

.hero-v2__container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:40px;

    min-height:620px;

    position:relative;

    z-index:20;

}

/*=========================
Texto
=========================*/

.hero-v2__content{

    position:relative;

    z-index:80;

}

/*=========================
Palco
=========================*/

.hero-v2__stage{

    position:relative;

    width:100%;

    height:640px;

}


/*======================================
Camadas
======================================*/

.hero-v2__background{

    position:absolute;

    inset:0;

    z-index:5;

}

.hero-v2__shadow{

    position:absolute;

    inset:0;

    z-index:10;

    pointer-events:none;

}

.hero-v2__light{

    position:absolute;

    inset:0;

    z-index:70;

    pointer-events:none;

}

.hero-v2__shadow img,
.hero-v2__light img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*======================================
Livro aberto
======================================*/

.hero-v2__open-book{

    position:absolute;

    left:12%;

    bottom:-4;

    width:86%;

    z-index:30;
	
	transform:
        perspective(1600px)
        rotateX(6deg)
        rotateZ(-10deg);

}

/*======================================
Livro
======================================*/

.hero-v2__book{

    position:absolute;

    left:18%;

    bottom:15%;

    width:42%;

    z-index:40;
	
	transform:rotate(-8deg);

    filter:
        drop-shadow(0 28px 40px rgba(0,0,0,.20));
		
	animation:bookFloat 7s ease-in-out infinite;

}

/*======================================
Prato
======================================*/

.hero-v2__dish{

    position:absolute;

    right:8%;

    bottom:33%;

    width:58%;

    z-index:50;
	
	transform:rotate(5deg);

    filter:
        drop-shadow(0 35px 45px rgba(0,0,0,.18));
		
	animation:dishFloat 5s ease-in-out infinite;


}

/*======================================
BACKGROUND
======================================*/

.hero-v2__background{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 78% 28%,
        rgba(255,191,0,.12),
        transparent 38%),

        radial-gradient(circle at 25% 12%,
        rgba(255,255,255,.95),
        transparent 52%),

        linear-gradient(
            180deg,
            #FFFDF8 0%,
            #FFF8EE 100%
        );

}

.hero-v2__light{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

    z-index:60;

}

.hero-v2__light img{

    width:1250px;

    max-width:none;

    opacity:.32;
	
	transform:translateY(-15px);

}

.hero-v2__shadow{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    pointer-events:none;

    z-index:15;

}

.hero-v2__shadow img{

    width:980px;

    max-width:none;

    opacity:.75;
	
	transform:translateY(18px);

}

.hero-v2__open-book{

    position:absolute;

    left:5%;

    bottom:-1%;

    width:88%;

    transform:

        perspective(1600px)

        rotateX(4deg)

        rotateZ(-8deg);

    z-index:30;
	
	animation:openBookFloat 9s ease-in-out infinite;


}

.hero-v2__book{

    position:absolute;

    left:12%;

    bottom:16%;

    width:44%;

    transform:

        rotate(-9deg);

    filter:

        drop-shadow(0 30px 45px rgba(0,0,0,.18));

    z-index:45;

}

.hero-v2__dish{

    position:absolute;

    right:-2%;

    bottom:32%;

    width:56%;

    transform:

        rotate(6deg);

    filter:

        drop-shadow(0 45px 55px rgba(0,0,0,.22));

    z-index:55;

}

.hero-v2__stage{

    position:relative;

    width:100%;

    height:600px;

    isolation:isolate;
	
	overflow:visible;

}

.hero-v2__badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 16px;;

    border-radius:999px;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    font-size:.88rem;

    font-weight:600;

    margin-bottom:14px;

}

.hero-v2__badge span{

    color:#F4B400;

}

.hero-v2__title{

	font-size:3.3rem;

    line-height:1.02;

    font-weight:800;

    color:#181818;

    margin-bottom:26px;

}

.hero-v2__title span{

    display:block;

    color:#F4B400;

    font-size:4.2rem;

}

.hero-v2__description{

    font-size:1.05rem;

    line-height:1.65;

    color:#5E5E5E;

    max-width:500px;

    margin-bottom:22px;

}

.hero-v2__chips{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;

}

.hero-v2__chips span{

    background:#ffffff;

   padding:9px 15px;

    border-radius:999px;

    font-size:.86rem;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.06);
	
	transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.hero-v2__chips span:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}


.hero-v2__cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:290px;

	height:58px;

    border-radius:18px;

    font-size:1.05rem;

    font-weight:700;

    letter-spacing:.4px;
	
	transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hero-v2__cta:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(244,180,0,.28);

}

.hero-v2__secure{

    margin-top:14px;

    font-size:.82rem;

    color:#777;

}

.hero-v2__stage::before{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    right:8%;

    top:7%;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(244,180,0,.16),

        rgba(244,180,0,.05),

        transparent 72%

    );

    filter:blur(18px);

    z-index:20;
	
	opacity:.85;

}

.hero-v2__stage::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:18%;

    bottom:22%;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,255,255,.32),

        transparent 70%

    );

    filter:blur(22px);

    z-index:22;

}






/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bookFloat{

		0%,100%{

		transform:
		rotate(-8deg)
		translateY(0);

		}

		50%{

		transform:
		rotate(-8deg)
		translateY(8px);

		}

	}
	
	
@keyframes dishFloat{

		0%,100%{

		transform:
		rotate(5deg)
		translateY(0);

		}

		50%{

		transform:
		rotate(5deg)
		translateY(-10px);

		}

	}
	
	
@keyframes openBookFloat{

		0%,100%{

		transform:
		rotate(-8deg)
		translateY(0);

		}

		50%{

		transform:
		rotate(-8deg)
		translateY(5px);

		}

	}
	
	
@keyframes heroFade{

		from{

		opacity:0;

		transform:translateY(25px);

		}

		to{

		opacity:1;

		transform:none;

		}

	}




/* ==========================================================
   PREMIUM EFFECT
========================================================== */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 75% 45%,

            rgba(244,180,0,.16),

            transparent 40%

        );

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,220,110,.10),

            transparent 70%

        );

    pointer-events:none;

}

/* ==========================================================
   TRUST
========================================================== */

.trust{

    position:relative;

}

.trust-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.trust-card{

    padding:40px 32px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.trust-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.trust-icon{

    width:74px;

    height:74px;

    margin:0 auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#FFF4D5;

    font-size:2rem;

}

.trust-card h3{

    margin-bottom:16px;

}

.trust-card p{

    font-size:.95rem;

}

/* ==========================================================
   TRANSFORMATION
========================================================== */

.transformation-grid{

    display:grid;

    grid-template-columns:1fr 420px 1fr;

    align-items:center;

    gap:50px;

    margin-top:80px;

}

.before-card,
.after-card{

    padding:46px;

    border-radius:var(--radius-xl);

    background:#FFFFFF;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-sm);

}

.card-label{

    display:inline-flex;

    padding:10px 22px;

    border-radius:999px;

    background:#FFE6E6;

    color:#D63A3A;

    font-weight:700;

    margin-bottom:30px;

}

.card-label.success{

    background:#EAF9EF;

    color:#17A34A;

}

.before-card ul,
.after-card ul{

    display:grid;

    gap:22px;

}

.before-card li,
.after-card li{

    font-size:1.05rem;

}

.transformation-center{

    display:flex;

    justify-content:center;

}

.transformation-center img{

    width:360px;

    filter:

        drop-shadow(0 35px 70px rgba(0,0,0,.18));

}

/* ==========================================================
   BENEFITS
========================================================== */

.benefits-layout{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.benefit-large{

    min-height:320px;

}

.benefit-large,
.benefit-card,
.benefit-wide{

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    padding:44px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.benefit-large:hover,
.benefit-card:hover,
.benefit-wide:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.benefit-wide{

    grid-column:1/-1;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.benefit-icon{

    width:76px;

    height:76px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF4D5;

    font-size:2rem;

   margin-bottom:18px;

}

.benefit-large h3,
.benefit-card h3{

    margin-bottom:18px;

}

.benefit-wide h3{

    margin-bottom:10px;

}

/* ==========================================================
   EXPERIENCE
========================================================== */

.experience-showcase{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:60px;

    align-items:center;

}

.showcase-main{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.showcase-main::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(244,180,0,.16),

        transparent 70%

    );

    z-index:1;

}

.showcase-main img{

    position:relative;

    width:520px;

    z-index:2;

    filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

}

.showcase-pages{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.showcase-pages img{

    border-radius:22px;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.showcase-pages img:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:var(--shadow-lg);

}

.showcase-highlight{

    grid-column:1/-1;

    margin-top:30px;

    padding:34px;

    background:var(--gradient-primary);

    border-radius:var(--radius-xl);

    text-align:center;

}

.highlight-content span{

    display:block;

    font-size:.9rem;

    letter-spacing:2px;

    font-weight:700;

}

.highlight-content strong{

    display:block;

    font-size:5rem;

    line-height:1;

    margin:12px 0;

}

.highlight-content small{

    font-size:1.1rem;

    font-weight:600;

}

/* ==========================================================
   CONTENT
========================================================== */

.content-layout{

    display:grid;

    grid-template-columns:1fr 430px 1fr;

    gap:60px;

    align-items:center;

}

.content-column{

    display:grid;

    gap:22px;

}

.content-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 26px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:20px;

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

    font-weight:600;

}

.content-item:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-md);

}

.content-book{

    display:flex;

    justify-content:center;

}

.content-book img{

    width:400px;

    filter:drop-shadow(0 40px 80px rgba(0,0,0,.18));

}

/* ==========================================================
   BONUS
========================================================== */

.bonus-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

.bonus-card{

    display:flex;

    gap:28px;

    padding:30px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.bonus-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.bonus-card img{

    width:130px;

    border-radius:16px;

    flex-shrink:0;

}

.bonus-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.bonus-tag{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    background:#FFF4D5;

    color:#C28700;

    font-size:.78rem;

    font-weight:700;

}

.bonus-info h3{

    margin-bottom:14px;

}

.bonus-value{

    margin-top:60px;

    display:flex;

    justify-content:center;

    gap:30px;

}

.value-box{

    width:260px;

    padding:28px;

    background:#FFFFFF;

    border-radius:24px;

    text-align:center;

    border:1px solid var(--color-border);

}

.value-box small{

    display:block;

    margin-bottom:10px;

    color:var(--color-text-muted);

}

.value-box strong{

    font-size:2rem;

    font-weight:800;

}

.value-box.highlight{

    background:var(--gradient-primary);

}

/* ==========================================================
   TARGET
========================================================== */

.target-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    align-items:center;

    gap:90px;

}

.target-image{

    position:relative;

}

.target-image::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:40px;

    background:radial-gradient(

        rgba(244,180,0,.18),

        transparent 75%

    );

    z-index:1;

}

.target-image img{

    position:relative;

    border-radius:36px;

    box-shadow:var(--shadow-lg);

    z-index:2;

}

.target-content{

    max-width:650px;

}

.target-content h2{

    margin:20px 0 28px;

}

.target-content>p{

    margin-bottom:34px;

}

.target-list{

    display:grid;

    gap:18px;

}

.target-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:1.05rem;

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:70px;

}

.timeline-item{

    position:relative;

    padding:42px 30px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.timeline-item:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.timeline-number{

    width:70px;

    height:70px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-primary);

    font-size:1.4rem;

    font-weight:800;

}

.timeline-item h3{

    margin-bottom:18px;

}

/* ==========================================================
   OFFER
========================================================== */

.offer-wrapper{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:60px;

    align-items:start;

}

.offer-left h2{

    margin:20px 0 26px;

}

.offer-left>p{

    margin-bottom:40px;

}

.offer-products{

    display:grid;

    gap:22px;

}

.offer-product{

    display:flex;

    align-items:center;

    gap:22px;

    padding:22px;

    background:#FFFFFF;

    border-radius:24px;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-xs);

}

.offer-product img{

    width:90px;

    border-radius:16px;

}

.offer-card{

    position:sticky;

    top:120px;

    padding:42px;

    background:#FFFFFF;

    border-radius:36px;

    border:2px solid rgba(244,180,0,.25);

    box-shadow:var(--shadow-xl);

}

.offer-badge{

    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;

    background:#FFF4D5;

    color:#C28700;

    font-size:.82rem;

    font-weight:700;

}

.offer-prices{

    margin:34px 0;

    display:grid;

    gap:18px;

}

.price-line{

    display:flex;

    justify-content:space-between;

}

.total-value{

    margin:30px 0;

    padding:22px 0;

    border-top:1px solid var(--color-border);

    border-bottom:1px solid var(--color-border);

    display:flex;

    justify-content:space-between;

    font-weight:700;

}

.today-price{

    text-align:center;

    margin:40px 0;

}

.price{

    margin:16px 0;

}

.currency{

    font-size:2rem;

    vertical-align:top;

}

.value{

    font-size:5rem;

    font-weight:800;

    line-height:1;

}

.offer-security{

    display:grid;

    gap:14px;

    margin:34px 0;

}

.payment-methods{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.payment-methods img{

    height:32px;

    width:auto;

}

/* ==========================================================
   GUARANTEE
========================================================== */

.guarantee-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    align-items:center;

    gap:80px;

}

.guarantee-seal{

    display:flex;

    justify-content:center;

}

.guarantee-seal img{

    width:260px;

}

.guarantee-content h2{

    margin:20px 0 26px;

}

.guarantee-content>p{

    margin-bottom:32px;

}

.guarantee-list{

    display:grid;

    gap:18px;

}

/* ==========================================================
   FAQ
========================================================== */

.faq-wrapper{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    margin-bottom:22px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:22px;

    overflow:hidden;

}

.faq-question{

    width:100%;

    padding:28px;

    text-align:left;

    font-size:1.05rem;

    font-weight:700;

}

.faq-answer{

    padding:0 28px 28px;

    color:var(--color-text-light);

}

/* ==========================================================
   CTA FINAL
========================================================== */

.cta-final{

    color:#FFFFFF;

    background:linear-gradient(

        180deg,

        #1B1B1B,

        #0F0F0F

    );

}

.cta-wrapper{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.cta-book{

    width:320px;

    margin:0 auto 50px;

    filter:drop-shadow(0 35px 80px rgba(0,0,0,.40));

}

.cta-final h2{

    color:#FFFFFF;

    margin:20px 0 28px;

}

.cta-final p{

    color:rgba(255,255,255,.75);

    max-width:700px;

    margin:0 auto 42px;

}

.cta-final .section-tag{

    background:rgba(255,255,255,.08);

    color:#FFD86A;

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:90px 0 40px;

    background:#111111;

    color:#FFFFFF;

}

.footer-top{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:80px;

    margin-bottom:60px;

}

.footer-brand img{

    width:90px;

    margin-bottom:24px;

}

.footer-brand h3{

    margin-bottom:18px;

}

.footer-brand p{

    color:rgba(255,255,255,.65);

}

.footer-columns{

    display:grid;

    grid-template-columns:repeat(3,1fr);

	gap:22px;

}

.footer-column h4{

    margin-bottom:24px;

}

.footer-column ul{

    display:grid;

    gap:14px;

}

.footer-column a{

    color:rgba(255,255,255,.70);

    transition:var(--transition);

}

.footer-column a:hover{

    color:#FFFFFF;

}

.footer-security li{

    color:rgba(255,255,255,.70);

}

.footer-payments{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    padding:40px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-payments img{

    height:32px;

}

.footer-bottom{

    text-align:center;

    margin-top:40px;

}

.footer-bottom p{

    color:rgba(255,255,255,.50);

}

/* ==========================================================
   HEADER DESKTOP
========================================================== */

.menu-toggle{

    display:none !important;

}

.mobile-menu{

    display:none !important;

}

.mobile-nav{

    display:none !important;

}

.nav-mobile{

    display:none !important;

}

.header{

    height:88px;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:48px;

    height:100%;

}

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo-title{

    font-size:2rem;

    font-weight:800;

    letter-spacing:-1px;

    text-transform:uppercase;

    color:#111;

}

.logo-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:8px;

    padding:4px 10px;

    border-radius:8px;

    background:#F5B400;

    color:#111;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.nav-list{

    display:flex;

    align-items:center;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-list a{

    font-weight:600;

}

.btn-header{

    margin-left:auto;

}

/*==========================================================
HEADER SCROLLED
==========================================================*/

.header{

    transition:
    background .35s ease,
    box-shadow .35s ease,
    padding .35s ease;

}

.header-scrolled{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    box-shadow:

    0 10px 35px rgba(0,0,0,.08);

}


/*==========================================================
ACTIVE MENU
==========================================================*/

.nav a{

    position:relative;

    display:inline-flex;

    align-items:center;

    height:44px;

    color:#222;

    text-decoration:none;

    transition:
        color .30s ease;

}

.nav a.active{

    color:var(--primary);

}

.nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    border-radius:999px;

    background:#F4B400;

    transform:translateX(-50%);

    transition:all .30s ease;

}

.nav a:hover::after,

.nav a.active::after{

    width:80%;

}

.nav a:hover::after,

.nav a.active::after{

    width:80%;

}

.nav a:hover{

    color:var(--primary);

    transform:translateY(-2px);

}

.nav a{

    transition:
        color .30s ease,
        transform .30s ease;

}


/*==========================================================
REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:

    translateY(45px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.reveal.revealed{

    opacity:1;

    transform:none;

}


/*==========================================================
BODY LOADED
==========================================================*/

body{

    opacity:0;

    transition:opacity .4s ease;

}

body.loaded{

    opacity:1;

}


/*==========================================================
BACK TO TOP
==========================================================*/

.back-top{

    position:fixed;

    right:28px;

    bottom:28px;

    width:54px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:red;

    color:#111;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

    box-shadow:

    0 12px 35px rgba(0,0,0,.18);

}

.back-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-top:hover{

    transform:

    translateY(-5px);

}


/*==========================================================
FAQ
==========================================================*/

.faq-item{

    overflow:hidden;

    transition:.35s;

}

.faq-question{

    cursor:pointer;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

    max-height .45s ease,

    padding .35s ease;

}

.faq-item.active .faq-answer{

    max-height:450px;

}


/*==========================================================
BUTTONS
==========================================================*/

.btn{

    transition:

    transform .25s ease,

    box-shadow .25s ease,

    background .25s ease;

}

.btn:hover{

    box-shadow:

    0 18px 35px rgba(0,0,0,.12);

}


/*==========================================================
PERFORMANCE
==========================================================*/

img{

    image-rendering:auto;

    -webkit-user-drag:none;

    user-select:none;

}

/*==========================================================
PARALLAX PREMIUM
==========================================================*/

.hero-v2{

    perspective:1800px;

}

.hero-v2__stage{

    transform-style:preserve-3d;

}

.hero-v2__dish{

    transition:
        transform .25s linear;

    will-change:transform;

}

.hero-v2__book{

    transition:
        transform .25s linear;

    will-change:transform;

}

.hero-v2__open-book{

    transition:
        transform .25s linear;

    will-change:transform;

}

/*==========================================================
CTA PREMIUM
==========================================================*/

.hero-v2__cta{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

.hero-v2__cta::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:left .8s ease;

    z-index:1;

}

.hero-v2__cta:hover::before{

    left:170%;

}

.hero-v2__cta span{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    white-space:nowrap;

}


/*==========================================================
MAGNETIC CTA
==========================================================*/

.hero-v2__cta{

    will-change:transform;

    transition:
        transform .25s ease,
        box-shadow .35s ease;

}

.hero-v2__cta:hover{

    box-shadow:
        0 20px 45px rgba(244,180,0,.28);

}

/*==========================================================
HERO INTRO
==========================================================*/

.hero-v2__badge{

    animation:fadeUp .6s .10s both;

}

.hero-v2__title{

    animation:fadeUp .6s .20s both;

}

.hero-v2__description{

    animation:fadeUp .6s .35s both;

}

.hero-v2__chips{

    animation:fadeUp .6s .50s both;

}

.hero-v2__actions{

    animation:fadeUp .6s .65s both;

}

.hero-v2__stage{

    animation:heroScene .9s .20s both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(22px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes heroScene{

from{

opacity:0;

transform:translateX(40px) scale(.96);

}

to{

opacity:1;

transform:translateX(0) scale(1);

}

}

/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

.hero-v2 *{

animation:none!important;

transition:none!important;

}

}

/*==========================================================
RENDER PERFORMANCE
==========================================================*/

.hero-v2{

    contain:layout paint;

    isolation:isolate;

}

.hero-v2__stage{

    will-change:transform;

    transform:translateZ(0);

}

.hero-v2__book,

.hero-v2__open-book,

.hero-v2__dish{

    backface-visibility:hidden;

    transform-style:preserve-3d;

    will-change:transform;

}

/*==========================================================
GPU OPTIMIZATION
==========================================================*/

.hero-v2__book,

.hero-v2__open-book,

.hero-v2__dish,

.hero-v2__light,

.hero-v2__shadow{

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

    perspective:1000px;

    will-change:transform,opacity;

}

/*==========================================================
CURSOR PREMIUM
==========================================================*/

.hero-v2__cta{

    cursor:pointer;

}

.hero-v2__chips span{

    cursor:default;

}

.hero-v2__book,

.hero-v2__open-book,

.hero-v2__dish{

    cursor:default;

}

/*==========================================================
PREMIUM HOVER
==========================================================*/

.hero-v2__book,
.hero-v2__open-book,
.hero-v2__dish{

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        filter .35s cubic-bezier(.22,.61,.36,1);

}

.hero-v2__stage:hover .hero-v2__dish{

    filter:
        drop-shadow(0 45px 65px rgba(0,0,0,.22));

}

.hero-v2__stage:hover .hero-v2__book{

    filter:
        drop-shadow(0 28px 48px rgba(0,0,0,.20));

}


/*==========================================================
PREMIUM RENDER
==========================================================*/

.hero-v2{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

.hero-v2 img{

    image-rendering:auto;

    backface-visibility:hidden;

    transform:translateZ(0);

}

.hero-v2__title{

    text-wrap:balance;

}

.hero-v2__description{

    text-wrap:pretty;

}