/* =====================================================
   THE SCIENCE OF FAT LOSS
   Premium UI v1.0
===================================================== */

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#F6F8FC;

    color:#1A2433;

    line-height:1.7;

    overflow-x:hidden;

}

/* ---------- VARIABLES ---------- */

:root{

--primary:#2563EB;
--secondary:#0EA5E9;

--green:#22C55E;
--orange:#F59E0B;
--red:#EF4444;
--purple:#8B5CF6;

--text:#1F2937;
--gray:#6B7280;

--light:#F8FAFC;

--card:#FFFFFF;

--border:#E5E7EB;

--radius:20px;

--shadow:

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

--transition:.35s;

}

/* ---------- LINKS ---------- */

a{

text-decoration:none;

color:inherit;

}

/* ---------- CONTAINER ---------- */

.section{

padding:100px 8%;

}

.section-title{

font-size:48px;

font-weight:800;

margin-bottom:20px;

text-align:center;

letter-spacing:-1px;

}

.section-subtitle{

max-width:850px;

margin:auto;

margin-bottom:60px;

text-align:center;

font-size:20px;

color:var(--gray);

}

/* ---------- NAVBAR ---------- */

header{

position:fixed;

top:0;

left:0;

width:100%;

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

backdrop-filter:blur(14px);

z-index:1000;

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

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 8%;

}

.logo{

font-size:24px;

font-weight:800;

color:var(--primary);

letter-spacing:-0.5px;

}

.navbar ul{

display:flex;

gap:35px;

list-style:none;

}

.navbar a{

font-weight:600;

transition:var(--transition);

}

.navbar a:hover{

color:var(--primary);

}

/* ---------- HERO ---------- */

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:140px 8% 80px;

gap:70px;

background:

linear-gradient(

135deg,

#FFFFFF,

#EEF5FF

);

}

.badge{

display:inline-block;

padding:10px 18px;

background:#DBEAFE;

color:var(--primary);

border-radius:999px;

font-size:14px;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.05;

margin-bottom:25px;

letter-spacing:-2px;

}

.hero p{

font-size:22px;

color:var(--gray);

max-width:620px;

margin-bottom:40px;

}

/* ---------- BUTTONS ---------- */

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

background:var(--primary);

color:white;

padding:18px 34px;

border-radius:16px;

font-weight:700;

transition:.3s;

box-shadow:0 12px 35px rgba(37,99,235,.25);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

padding:18px 34px;

background:white;

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

border-radius:16px;

font-weight:700;

transition:.3s;

}

.btn-secondary:hover{

background:#F3F4F6;

}

/* ---------- HERO RIGHT ---------- */

.hero-right{

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

}

.circle{

width:180px;

height:180px;

display:flex;

justify-content:center;

align-items:center;

font-size:80px;

background:linear-gradient(

135deg,

#2563EB,

#60A5FA

);

border-radius:50%;

color:white;

box-shadow:

0 30px 70px rgba(37,99,235,.35);

}

.stat-card{

width:220px;

background:white;

padding:28px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:42px;

color:var(--primary);

margin-bottom:8px;

}

.stat-card p{

color:var(--gray);

}

/* ---------- GENERAL CARDS ---------- */

.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:60px;

}

.card{

background:white;

padding:35px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid transparent;

}

.card:hover{

transform:translateY(-10px);

border-color:#DBEAFE;

}

.card h2{

font-size:34px;

margin:10px 0;

color:var(--primary);

}

.card h3{

margin-top:15px;

margin-bottom:15px;

font-size:24px;

}

.card p{

color:var(--gray);

}

.icon{

font-size:50px;

}

/* ---------- DARK SECTION ---------- */

.dark{

background:#0F172A;

color:white;

}

.dark .section-subtitle{

color:#CBD5E1;

}

.dark .card{

background:#1E293B;

color:white;

}

.dark .card p{

color:#CBD5E1;

}

.dark .section-title{

color:white;

}

/* ---------- LIGHT ---------- */

.light{

background:white;

}

/* ---------- ANIMATIONS ---------- */

.card,
.stat-card,
.btn-primary,
.btn-secondary{

transition:

all .35s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:none;

}

}

.hero-left{

animation:fadeUp .8s ease;

}

.hero-right{

animation:fadeUp 1.1s ease;

}

/* ---------- RESPONSIVE ---------- */

@media(max-width:980px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.navbar{

flex-direction:column;

gap:20px;

}

.navbar ul{

flex-wrap:wrap;

justify-content:center;

}

.section-title{

font-size:38px;

}

.hero h1{

font-size:54px;

}

}

/* ==========================================================
   PROTEIN SECTION
========================================================== */

.protein-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:60px;

}

.protein-card{

background:white;

border-radius:24px;

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid #EEF2F7;

}

.protein-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(0,0,0,.08);

}

.protein-card.highlight{

background:linear-gradient(135deg,#2563EB,#3B82F6);

color:white;

}

.protein-card.highlight p{

color:#E0ECFF;

}

.protein-icon{

font-size:52px;

margin-bottom:20px;

}

.protein-card h2{

font-size:42px;

margin-bottom:12px;

}

.protein-card h3{

font-size:24px;

margin-bottom:12px;

}

.protocol-box{

margin-top:60px;

padding:45px;

border-radius:24px;

background:linear-gradient(135deg,#EFF6FF,#DBEAFE);

border-left:6px solid var(--primary);

}

.protocol-box h2{

margin-bottom:15px;

}

/* ==========================================================
   TABLE
========================================================== */

.modern-table{

width:100%;

border-collapse:collapse;

margin-top:60px;

overflow:hidden;

border-radius:20px;

background:white;

box-shadow:var(--shadow);

}

.modern-table thead{

background:var(--primary);

color:white;

}

.modern-table th{

padding:22px;

font-size:17px;

font-weight:700;

text-align:left;

}

.modern-table td{

padding:20px;

border-bottom:1px solid #EEF2F6;

}

.modern-table tbody tr{

transition:.25s;

}

.modern-table tbody tr:hover{

background:#F8FAFF;

}

/* ==========================================================
   ENERGY FLOW
========================================================== */

.energy-container{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:center;

margin-top:70px;

}

.energy-flow{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.box{

width:260px;

padding:18px;

border-radius:18px;

font-weight:700;

text-align:center;

box-shadow:var(--shadow);

}

.green{

background:#DCFCE7;

}

.blue{

background:#DBEAFE;

}

.white{

background:white;

}

.orange{

background:#FEF3C7;

}

.red{

background:#FEE2E2;

}

.purple{

background:#EDE9FE;

}

.arrow{

font-size:34px;

font-weight:700;

color:var(--primary);

}

.science-text{

background:white;

padding:45px;

border-radius:24px;

box-shadow:var(--shadow);

}

.science-text h2{

margin-bottom:25px;

}

.science-text ul{

margin-top:25px;

padding-left:20px;

}

.science-text li{

margin-bottom:12px;

}

/* ==========================================================
   FIVE PILLARS
========================================================== */

.pillars{

display:grid;

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

gap:20px;

margin-top:60px;

}

.pillar{

background:white;

border-radius:24px;

padding:30px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow);

}

.pillar:hover{

transform:translateY(-8px);

}

.pillar-number{

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

margin:auto;

margin-bottom:20px;

}

.diagram{

position:relative;

width:460px;

height:460px;

margin:80px auto;

}

.center-circle{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:130px;

height:130px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#60A5FA);

display:flex;

justify-content:center;

align-items:center;

font-size:48px;

color:white;

box-shadow:

0 20px 50px rgba(37,99,235,.35);

}

.orbit{

position:absolute;

width:90px;

height:90px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

box-shadow:var(--shadow);

}

.orbit1{

top:0;

left:50%;

transform:translateX(-50%);

}

.orbit2{

top:100px;

right:0;

}

.orbit3{

bottom:100px;

right:0;

}

.orbit4{

bottom:0;

left:50%;

transform:translateX(-50%);

}

.orbit5{

top:100px;

left:0;

}

.quote-box{

margin-top:60px;

background:#E0F2FE;

padding:45px;

border-radius:24px;

border-left:6px solid var(--secondary);

}

.quote-box h2{

margin-bottom:15px;

}

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

.timeline{

max-width:900px;

margin:70px auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:55px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(
to bottom,
#2563EB,
#60A5FA
);

border-radius:20px;

}

.timeline-item{

display:flex;

gap:35px;

margin-bottom:45px;

position:relative;

}

.time{

min-width:70px;

height:70px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

box-shadow:0 15px 30px rgba(37,99,235,.25);

z-index:2;

}

.timeline-card{

flex:1;

background:white;

padding:30px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-6px);

}

.timeline-card ul{

margin-top:15px;

padding-left:18px;

}

.timeline-card li{

margin-bottom:10px;

}

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

.progress-line{

display:flex;

justify-content:space-between;

gap:25px;

margin-top:60px;

flex-wrap:wrap;

}

.progress-step{

flex:1;

min-width:180px;

text-align:center;

}

.progress-circle{

width:80px;

height:80px;

margin:auto auto 20px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#60A5FA);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:700;

box-shadow:var(--shadow);

}

/* ==========================================================
   MEDITERRANEAN PLATE
========================================================== */

.plate-wrapper{

display:flex;

justify-content:center;

margin-top:60px;

}

.plate{

width:420px;

height:420px;

border-radius:50%;

overflow:hidden;

display:grid;

grid-template-columns:1fr 1fr;

grid-template-rows:1fr 1fr;

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

border:10px solid white;

}

.vegetables{

grid-row:1 / span 2;

background:#22C55E;

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.protein{

background:#F59E0B;

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.carbs{

background:#2563EB;

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.plate h3{

font-size:24px;

margin:15px 0;

}

.plate p{

font-size:20px;

font-weight:700;

}

.plate-note{

margin-top:35px;

text-align:center;

font-size:18px;

color:var(--gray);

}

/* ==========================================================
   GLP-1
========================================================== */

.glp-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

margin-top:60px;

}

.glp-card{

background:white;

padding:35px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.glp-card:hover{

transform:translateY(-8px);

}

.emoji{

font-size:52px;

margin-bottom:20px;

}

/* ==========================================================
   CHECKLIST
========================================================== */

.checklist{

max-width:700px;

margin:60px auto;

display:flex;

flex-direction:column;

gap:18px;

}

.check-item{

display:flex;

align-items:center;

gap:18px;

background:white;

padding:22px;

border-radius:18px;

box-shadow:var(--shadow);

}

.check-item input{

width:22px;

height:22px;

accent-color:var(--primary);

}

/* ==========================================================
   QUICK FACTS
========================================================== */

.facts-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

margin-top:60px;

}

.fact{

background:linear-gradient(135deg,#2563EB,#60A5FA);

color:white;

padding:45px 30px;

border-radius:24px;

text-align:center;

box-shadow:0 25px 60px rgba(37,99,235,.25);

}

.fact h2{

font-size:48px;

margin-bottom:12px;

}

/* ==========================================================
   REFERENCES
========================================================== */

.reference-list{

margin-top:35px;

max-width:800px;

margin-left:auto;

margin-right:auto;

}

.reference-list li{

background:white;

padding:18px 22px;

margin-bottom:15px;

border-radius:16px;

box-shadow:var(--shadow);

list-style:none;

}

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

footer{

background:#0F172A;

color:white;

padding:80px 8%;

margin-top:100px;

}

.footer-content{

max-width:900px;

margin:auto;

text-align:center;

}

.footer-content h2{

font-size:40px;

margin-bottom:12px;

}

.footer-line{

width:120px;

height:4px;

background:#2563EB;

margin:35px auto;

border-radius:10px;

}

.copyright{

color:#94A3B8;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#94A3B8;

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

header,
.hero-buttons{

display:none;

}

body{

background:white;

}

.section{

padding:40px 0;

page-break-inside:avoid;

}

.card,
.protein-card,
.timeline-card,
.glp-card,
.fact{

box-shadow:none;

border:1px solid #DDD;

}

}

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

@media(max-width:768px){

.section{

padding:70px 24px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.section-title{

font-size:34px;

}

.energy-container{

grid-template-columns:1fr;

}

.pillars{

grid-template-columns:1fr;

}

.diagram{

display:none;

}

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

align-items:flex-start;

}

.time{

margin-bottom:10px;

}

.plate{

width:300px;

height:300px;

}

.modern-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/* ==========================================================
   SMOOTH REVEAL ANIMATION
========================================================== */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

.circle{

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

}

.stat-card:hover,
.card:hover,
.protein-card:hover,
.glp-card:hover,
.fact:hover{

transition:.35s;

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

}