/*==================================================
FITNESS NORMIE
STYLE.CSS V3
==================================================*/

/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

}

body{

font-family:"Segoe UI",Arial,sans-serif;

font-size:16px;

line-height:1.7;

background:#ffffff;

color:#111827;

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

button{

border:none;

outline:none;

background:none;

cursor:pointer;

font:inherit;

}

ul{

list-style:none;

}



/*==================================================
ROOT
==================================================*/

:root{

--amazon:#FFD814;

--amazon-hover:#F7CA00;

--heading:#111827;

--text:#5B6472;

--white:#ffffff;

--light:#fafafa;

--border:#ececec;

--container:1240px;

--radius-sm:14px;

--radius-md:22px;

--radius-lg:32px;

--shadow-1:

0 6px 18px rgba(0,0,0,.05);

--shadow-2:

0 18px 45px rgba(0,0,0,.08);

--shadow-3:

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

--transition:.35s ease;

--section-space:120px;

}



/*==================================================
COMMON
==================================================*/

.container{

width:min(var(--container),92%);

margin:auto;

}

section{

padding:var(--section-space) 0;

position:relative;

overflow:hidden;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-flex;

align-items:center;

justify-content:center;

padding:9px 18px;

border-radius:999px;

background:#FFF8E5;

font-size:13px;

font-weight:800;

letter-spacing:.08em;

margin-bottom:20px;

}

.section-title{

font-family:"Segoe UI",Arial,sans-serif;

font-size:58px;

font-weight:700;

line-height:1.08;

letter-spacing:-2px;

color:var(--heading);

margin-bottom:20px;

}

.section-subtitle{

max-width:760px;

margin:auto;

font-size:18px;

color:var(--text);

line-height:1.9;

}



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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:58px;

padding:0 34px;

border-radius:14px;

font-size:17px;

font-weight:700;

transition:var(--transition);

}

.btn-primary{

background:var(--amazon);

color:#111;

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

}

.btn-primary:hover{

background:var(--amazon-hover);

transform:translateY(-4px);

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

}

.btn-outline{

background:#fff;

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

color:#111;

}

.btn-outline:hover{

transform:translateY(-4px);

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

}



/*==================================================
PREMIUM IMAGE FRAME
==================================================*/

.image-frame{

position:relative;

padding:18px;

background:#fff;

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

border-radius:30px;

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

transition:var(--transition);

overflow:hidden;

}

.image-frame:hover{

transform:translateY(-8px);

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

}

.image-frame::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:4px;

background:linear-gradient(

90deg,

#FFD814,

#FFE77A,

#FFD814

);

}

.image-frame img{

border-radius:20px;

}



/*==================================================
PROGRESS BAR
==================================================*/

.progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:#FFD814;

z-index:99999;

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.05);

transition:.35s ease;

}

.header.scrolled{

background:#fff;

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

}

.navbar{

height:84px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

flex-shrink:0;

}

.logo img{

height:52px;

width:auto;

display:block;

transition:.3s;

}

.logo:hover img{

transform:scale(1.03);

}

.nav-links{

display:flex;

align-items:center;

gap:42px;

}

.nav-links a{

font-size:16px;

font-weight:700;

color:#111827;

position:relative;

transition:.3s;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#FFD814;

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.nav-btn{

height:52px;

padding-inline:28px;

}



/*==================================================
MENU BUTTON
==================================================*/

.menu-toggle{

display:none;

width:42px;

height:42px;

flex-direction:column;

justify-content:center;

gap:6px;

}

.menu-toggle span{

width:26px;

height:2px;

background:#111;

border-radius:20px;

transition:.3s;

}



/*==================================================
MOBILE MENU
==================================================*/

.mobile-menu{

position:fixed;

top:84px;

left:0;

width:100%;

background:#fff;

padding:30px;

display:none;

flex-direction:column;

gap:22px;

border-top:1px solid #eee;

box-shadow:0 25px 60px rgba(0,0,0,.08);

z-index:999;

}

.mobile-menu.active{

display:flex;

}

.mobile-menu a{

font-size:18px;

font-weight:700;

}



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

.hero{

padding-top:170px;

padding-bottom:120px;

background:

linear-gradient(180deg,#ffffff 0%,#fafafa 100%);

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:90px;

}

.hero-content{

max-width:620px;

}

.hero-rating{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:#FFF8E5;

border-radius:999px;

font-size:14px;

font-weight:700;

margin-bottom:26px;

color:#5B4A00;

}

.hero h1{

font-family:"Segoe UI",Arial,sans-serif;

font-size:72px;

font-weight:700;

line-height:1.02;

letter-spacing:-3px;

margin-bottom:24px;

color:#111827;

}

.hero p{

font-size:20px;

line-height:1.9;

color:#5B6472;

margin-bottom:36px;

max-width:560px;

}

.hero-features{

display:grid;

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

gap:18px;

margin-bottom:42px;

}

.hero-features div{

display:flex;

align-items:center;

justify-content:center;

padding:16px;

background:#fff;

border:1px solid #ECECEC;

border-radius:16px;

font-weight:700;

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

transition:.3s;

}

.hero-features div:hover{

transform:translateY(-5px);

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

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}



/*==================================================
HERO IMAGE
==================================================*/

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:580px;

}

.hero-image::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,216,20,.28),

rgba(255,216,20,.10),

transparent 70%);

filter:blur(8px);

}

.hero-image img{

position:relative;

z-index:2;

width:100%;

max-width:430px;

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

animation:floatBottle 5s ease-in-out infinite;

}

@keyframes floatBottle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



/*==================================================
FLOATING CARDS
==================================================*/

.floating-card{

position:absolute;

z-index:3;

padding:15px 18px;

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

backdrop-filter:blur(10px);

border:1px solid #ECECEC;

border-radius:18px;

font-size:15px;

font-weight:700;

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

}

.card-1{

top:70px;

left:-10px;

}

.card-2{

top:250px;

right:-15px;

}

.card-3{

bottom:70px;

left:20px;

}

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

.feature-nav{

padding:100px 0;

background:#fafafa;

}

.feature-nav-grid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.feature-link{

position:relative;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:34px;

background:#fff;

border:1px solid #ECECEC;

border-radius:28px;

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

transition:.35s ease;

overflow:hidden;

}

.feature-link::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#FFD814,#FFE77A,#FFD814);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.feature-link:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.feature-link:hover::before{

transform:scaleX(1);

}

.feature-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

background:#FFF8E5;

border-radius:18px;

margin-bottom:24px;

transition:.35s;

}

.feature-link:hover .feature-icon{

transform:scale(1.08) rotate(-5deg);

}

.feature-link h3{

font-size:26px;

font-weight:700;

margin-bottom:12px;

color:#111827;

}

.feature-link p{

font-size:16px;

line-height:1.8;

color:#5B6472;

margin-bottom:26px;

}

.feature-link span{

margin-top:auto;

font-size:15px;

font-weight:700;

color:#111827;

transition:.35s;

}

.feature-link:hover span{

padding-left:8px;

color:#C28A00;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.feature-nav-grid{

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

}

}

@media(max-width:768px){

.feature-nav{

padding:80px 0;

}

.feature-nav-grid{

grid-template-columns:1fr;

gap:22px;

}

.feature-link{

padding:28px;

border-radius:22px;

}

.feature-icon{

width:60px;

height:60px;

font-size:30px;

}

.feature-link h3{

font-size:22px;

}

.feature-link p{

font-size:15px;

}

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

.benefits{

background:#ffffff;

}

.benefits-grid{

display:grid;

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

gap:30px;

}

.benefit-card{

position:relative;

background:#fff;

padding:42px 36px;

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

border-radius:28px;

overflow:hidden;

transition:var(--transition);

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

}

.benefit-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#FFD814,#FFE77A,#FFD814);

}

.benefit-card:hover{

transform:translateY(-10px);

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

}

.benefit-card h3{

font-family:"Segoe UI",Arial,sans-serif;

font-size:28px;

margin-bottom:16px;

color:var(--heading);

}

.benefit-card p{

font-size:17px;

line-height:1.9;

color:var(--text);

}



/*==================================================
COMMON SECTION LAYOUT
==================================================*/

.comparison,
.hair,
.digestion,
.foam,
.nutrition,
.feedback{

background:#fff;

}

.comparison:nth-of-type(even),
.foam,
.feedback{

background:#fafafa;

}

.comparison-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.comparison-wrapper.reverse{

grid-template-columns:1fr 1fr;

}

.comparison-content{

display:flex;

flex-direction:column;

justify-content:center;

}

.comparison-content .section-tag{

align-self:flex-start;

}

.comparison-content .section-title{

margin-top:6px;

margin-bottom:20px;

}

.comparison-content .section-subtitle{

margin:0 0 40px;

max-width:100%;

text-align:left;

}



/*==================================================
IMAGE
==================================================*/

.comparison-image{

display:flex;

justify-content:center;

align-items:center;

}

.comparison-image .image-frame{

width:100%;

max-width:560px;

}



/*==================================================
POINTS
==================================================*/

.compare-item{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:30px;

}

.compare-icon{

width:48px;

height:48px;

border-radius:50%;

background:#FFD814;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

font-weight:800;

flex-shrink:0;

box-shadow:

0 10px 24px rgba(255,216,20,.35);

}

.compare-item h3{

font-family:"Segoe UI",Arial,sans-serif;

font-size:24px;

margin-bottom:8px;

color:#111827;

}

.compare-item p{

font-size:17px;

line-height:1.8;

color:#5B6472;

}



/*==================================================
BUTTON INSIDE SECTIONS
==================================================*/

.comparison-content .btn{

margin-top:14px;

align-self:flex-start;

}



/*==================================================
SECTION IMAGE HOVER
==================================================*/

.comparison-image .image-frame{

transition:.35s;

}

.comparison-image:hover .image-frame{

transform:translateY(-8px);

box-shadow:

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

}
/*==================================================
USAGE
==================================================*/

.usage{

background:#ffffff;

}

.usage-wrapper{

max-width:1000px;

margin:60px auto 0;

}

.usage .image-frame{

padding:22px;

border-radius:32px;

}



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

.faq{

background:#fafafa;

}

.faq-wrapper{

max-width:900px;

margin:60px auto 0;

}

.faq-item{

background:#fff;

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

border-radius:22px;

margin-bottom:18px;

overflow:hidden;

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

transition:var(--transition);

}

.faq-item:hover{

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

}

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:28px 30px;

font-family:"Segoe UI",Arial,sans-serif;

font-size:22px;

font-weight:700;

text-align:left;

}

.faq-question span{

font-size:30px;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.faq-answer p{

padding:0 30px 30px;

font-size:17px;

line-height:1.9;

color:var(--text);

}

.faq-item.active .faq-answer{

max-height:260px;

}

.faq-item.active .faq-question span{

transform:rotate(45deg);

}



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

.cta{

padding:130px 0;

background:#ffffff;

}

.cta-box{

position:relative;

overflow:hidden;

background:

linear-gradient(135deg,#111827,#1E293B);

border-radius:36px;

padding:90px 70px;

text-align:center;

color:#fff;

}

.cta-box::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:rgba(255,216,20,.12);

}

.cta-box::after{

content:"";

position:absolute;

bottom:-120px;

left:-120px;

width:240px;

height:240px;

border-radius:50%;

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

}

.cta-box>*{

position:relative;

z-index:2;

}

.cta .section-tag{

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

color:#fff;

}

.cta-box h2{

font-family:"Segoe UI",Arial,sans-serif;

font-size:58px;

line-height:1.1;

margin:24px 0;

}

.cta-box p{

max-width:760px;

margin:auto;

font-size:19px;

line-height:1.9;

opacity:.92;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:42px;

flex-wrap:wrap;

}

.cta .btn-outline{

background:#fff;

border:none;

}



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

.footer{

background:#111827;

color:#fff;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:55px;

margin-bottom:55px;

}

.footer-logo{

height:56px;

width:auto;

margin-bottom:24px;

}

.footer-brand p{

max-width:360px;

opacity:.82;

line-height:1.9;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links h4{

font-family:"Segoe UI",Arial,sans-serif;

font-size:22px;

margin-bottom:8px;

}

.footer-links a{

opacity:.78;

transition:.3s;

}

.footer-links a:hover{

opacity:1;

color:#FFD814;

}

.footer-bottom{

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

padding-top:28px;

text-align:center;

opacity:.72;

font-size:15px;

}



/*==================================================
MOBILE BUY BUTTON
==================================================*/

.mobile-buy{

display:none;

position:fixed;

left:20px;

right:20px;

bottom:20px;

z-index:9999;

}

.mobile-buy a{

display:flex;

align-items:center;

justify-content:center;

height:60px;

border-radius:18px;

background:#FFD814;

color:#111;

font-size:18px;

font-weight:800;

box-shadow:0 18px 45px rgba(0,0,0,.22);

transition:.3s;

}

.mobile-buy a:hover{

transform:translateY(-3px);

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

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.show{

opacity:1;

transform:translateY(0);

}

.image-frame,
.benefit-card,
.faq-item,
.btn,
.compare-item{

transition:all .35s ease;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:1200px){

.hero h1{

font-size:60px;

}

.section-title{

font-size:48px;

}

.hero-grid,
.comparison-wrapper{

gap:60px;

}

}



/*==================================================
992px
==================================================*/

@media(max-width:992px){

:root{

--section-space:90px;

}

.nav-links{

display:none;

}

.nav-btn{

display:none;

}

.menu-toggle{

display:flex;

}

.hero{

padding-top:130px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-content{

max-width:100%;

}

.hero p{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

order:-1;

min-height:auto;

}

.hero-image img{

max-width:360px;

}


.hero-features{

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

}

.benefits-grid{

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

}

.comparison-wrapper,

.comparison-wrapper.reverse{

grid-template-columns:1fr;

gap:60px;

}

.comparison-image{

order:-1;

}

.comparison-content{

text-align:center;

}

.comparison-content .section-tag{

align-self:center;

}

.comparison-content .section-subtitle{

text-align:center;

}

.compare-item{

text-align:left;

}

.comparison-content .btn{

align-self:center;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.mobile-buy{

display:block;

}

.footer{

padding-bottom:110px;

}

}



/*==================================================
768px
==================================================*/

@media(max-width:768px){

:root{

--section-space:70px;

}

.container{

width:94%;

}

.section-heading{

margin-bottom:45px;

}

.section-title{

font-size:36px;

letter-spacing:-1px;

}

.section-subtitle{

font-size:16px;

line-height:1.8;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:17px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.benefits-grid{

grid-template-columns:1fr;

}

.image-frame{

padding:14px;

border-radius:22px;

}

.image-frame img{

border-radius:14px;

}

.compare-item{

gap:14px;

margin-bottom:24px;

}

.compare-icon{

width:42px;

height:42px;

font-size:16px;

}

.compare-item h3{

font-size:21px;

}

.compare-item p{

font-size:15px;

}

.faq-question{

padding:22px;

font-size:18px;

}

.faq-answer p{

padding:0 22px 22px;

font-size:15px;

}

.cta{

padding:80px 0;

}

.cta-box{

padding:55px 28px;

border-radius:28px;

}

.cta-box h2{

font-size:38px;

}

.cta-box p{

font-size:16px;

}

.cta-buttons{

flex-direction:column;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.footer-logo{

margin-inline:auto;

}

.footer-brand p{

margin:auto;

}

}



/*==================================================
480px
==================================================*/

@media(max-width:480px){

.hero{

padding-top:115px;

}

.hero h1{

font-size:36px;

}

.hero-image img{

max-width:270px;

}

.hero-rating{

font-size:12px;

padding:8px 14px;

}

.section-title{

font-size:30px;

}

.btn{

height:54px;

font-size:16px;

}

.mobile-buy{

left:15px;

right:15px;

bottom:15px;

}

.mobile-buy a{

height:56px;

font-size:17px;

}

}



/*==================================================
1400px+
==================================================*/

@media(min-width:1400px){

.container{

max-width:1320px;

}

}