/*======================================================
BREAKING BOOKS
Premium Landing Page
Part 1
======================================================*/


/*=============================
Google Font
=============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap');


/*=============================
CSS Variables
=============================*/

:root{

--bg:#07080D;

--bg2:#0D1018;

--surface:#11151F;

--surface2:#191F2D;

--border:#262E40;

--text:#F5F7FA;

--muted:#9BA4B5;

--primary:#F4B53F;

--primary2:#FFD66B;

--gradient:
linear-gradient(
135deg,
#F4B53F,
#FFD66B
);

--shadow:
0 20px 60px rgba(0,0,0,.35);

--radius:24px;

--transition:.35s cubic-bezier(.4,0,.2,1);

--container:1240px;

}



/*=============================
Reset
=============================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:inherit;

cursor:pointer;

}

input,
textarea{

font-family:inherit;

}

section{

padding:120px 0;

position:relative;

}



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

.container{

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

margin:auto;

}



/*=============================
Scrollbar
=============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090A10;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#F4B53F,
#D48A0B
);

border-radius:20px;

}



/*=============================
Selection
=============================*/

::selection{

background:#F4B53F;

color:#111;

}



/*=============================
Animated Background
=============================*/

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at 20% 20%,
rgba(255,180,50,.13),
transparent 30%),

radial-gradient(circle at 80% 10%,
rgba(255,150,40,.08),
transparent 30%),

radial-gradient(circle at 50% 100%,
rgba(255,190,50,.08),
transparent 40%);

z-index:-5;

}



/*=============================
Noise Layer
=============================*/

.noise{

position:fixed;

inset:0;

opacity:.04;

pointer-events:none;

z-index:-3;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



/*=============================
Cursor Glow
=============================*/

.cursor-glow{

position:fixed;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(244,181,63,.18),

transparent 70%);

pointer-events:none;

left:50%;

top:50%;

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

filter:blur(20px);

z-index:-2;

transition:

left .12s linear,

top .12s linear;

}



/*=============================
Scroll Progress
=============================*/

.scroll-progress{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:var(--gradient);

z-index:9999;

}



/*=============================
Loader
=============================*/

.loader{

position:fixed;

inset:0;

background:#07080D;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

gap:30px;

z-index:99999;

transition:.7s;

}

.loader-logo{

font-size:40px;

font-weight:800;

font-family:'Space Grotesk',sans-serif;

letter-spacing:-1px;

}

.loader-logo span{

color:#F4B53F;

}

.loader-line{

width:260px;

height:4px;

background:#222;

overflow:hidden;

border-radius:50px;

}

.loader-line span{

display:block;

height:100%;

width:40%;

background:var(--gradient);

animation:loading 1.4s infinite;

}

@keyframes loading{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(350%);

}

}



/*=============================
Navbar
=============================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:24px 0;

transition:var(--transition);

}

.navbar.scrolled{

padding:14px 0;

background:rgba(10,12,20,.7);

backdrop-filter:blur(18px);

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

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:30px;

font-weight:800;

font-family:'Space Grotesk',sans-serif;

letter-spacing:-1px;

}

.logo span{

color:var(--primary);

}

.nav-links{

display:flex;

gap:42px;

list-style:none;

}

.nav-links a{

font-weight:500;

font-size:15px;

color:var(--muted);

position:relative;

transition:.3s;

}

.nav-links a:hover{

color:#fff;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--gradient);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}



/*=============================
YouTube Button
=============================*/

.youtube-btn{

padding:13px 26px;

border-radius:100px;

background:var(--gradient);

color:#111;

font-weight:700;

box-shadow:

0 10px 30px rgba(244,181,63,.35);

transition:var(--transition);

}

.youtube-btn:hover{

transform:

translateY(-4px)

scale(1.03);

}



/*=============================
Hero
=============================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:140px;

position:relative;

overflow:hidden;

}

.hero-container{

display:grid;

grid-template-columns:

1.1fr

.9fr;

gap:80px;

align-items:center;

}



/*=============================
Hero Tag
=============================*/

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:100px;

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

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

font-size:14px;

margin-bottom:28px;

}

.hero-tag span{

width:8px;

height:8px;

border-radius:50%;

background:#00ff95;

box-shadow:

0 0 12px #00ff95;

}



/*=============================
Hero Heading
=============================*/

.hero h1{

font-family:'Space Grotesk',sans-serif;

font-size:82px;

line-height:.95;

letter-spacing:-4px;

margin-bottom:28px;

}

.hero h1 span{

display:block;

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:var(--muted);

max-width:620px;

margin-bottom:40px;

}



/*=============================
Hero Buttons
=============================*/

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.primary-btn{

padding:18px 36px;

border-radius:100px;

background:var(--gradient);

color:#111;

font-weight:700;

transition:var(--transition);

box-shadow:

0 20px 50px rgba(244,181,63,.3);

}

.primary-btn:hover{

transform:

translateY(-5px)

scale(1.03);

}

.secondary-btn{

padding:18px 36px;

border-radius:100px;

border:1px solid rgba(255,255,255,.12);

transition:var(--transition);

}

.secondary-btn:hover{

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

}



/*=============================
Hero Stats
=============================*/

.hero-stats{

display:flex;

gap:50px;

margin-top:30px;

}

.stat h2{

font-size:42px;

font-weight:800;

font-family:'Space Grotesk',sans-serif;

color:#fff;

}

.stat p{

font-size:15px;

color:var(--muted);

margin-top:5px;

}
/*======================================================
PART 2
Hero Cards • Trusted • Section Headings
Bento Grid • Premium Course Cards
======================================================*/


/*=============================
Hero Right
=============================*/

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.glass-card{

width:100%;

max-width:430px;

padding:40px;

border-radius:32px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:blur(22px);

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

box-shadow:

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

position:relative;

overflow:hidden;

transition:.4s;

}

.glass-card:hover{

transform:
translateY(-10px);

box-shadow:

0 50px 100px rgba(0,0,0,.45),

0 0 50px rgba(244,181,63,.15);

}

.glass-card::before{

content:"";

position:absolute;

top:-100px;

left:-120px;

width:250px;

height:250px;

background:

radial-gradient(circle,

rgba(255,255,255,.15),

transparent);

}

.card-top{

display:flex;

align-items:center;

gap:10px;

margin-bottom:24px;

font-size:14px;

color:var(--muted);

}

.live-dot{

width:10px;

height:10px;

border-radius:50%;

background:#00ff88;

box-shadow:

0 0 12px #00ff88;

animation:pulse 1.8s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.4);

}

100%{

transform:scale(1);

}

}

.glass-card h3{

font-size:34px;

line-height:1.15;

margin-bottom:20px;

font-family:'Space Grotesk',sans-serif;

}

.glass-card p{

color:var(--muted);

line-height:2;

margin-bottom:30px;

}

.progress-line{

height:8px;

background:#222;

border-radius:50px;

overflow:hidden;

margin-bottom:12px;

}

.progress-line span{

display:block;

height:100%;

border-radius:50px;

background:var(--gradient);

}



/*=============================
Floating Card
=============================*/

.floating-card{

position:absolute;

right:-30px;

bottom:-20px;

padding:22px;

border-radius:24px;

background:#141923;

border:1px solid rgba(255,255,255,.06);

box-shadow:

0 20px 50px rgba(0,0,0,.35);

animation:floatCard 4s ease-in-out infinite;

}

.floating-card h4{

font-size:14px;

color:var(--muted);

margin-bottom:10px;

}

.floating-card strong{

display:block;

font-size:18px;

margin-bottom:8px;

}

.floating-card span{

font-size:14px;

color:var(--primary);

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}



/*=============================
Scroll Indicator
=============================*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

width:28px;

height:48px;

border-radius:30px;

border:2px solid rgba(255,255,255,.2);

}

.scroll-indicator span{

position:absolute;

left:50%;

top:8px;

width:5px;

height:10px;

border-radius:50px;

background:var(--primary);

transform:translateX(-50%);

animation:scrollDown 1.6s infinite;

}

@keyframes scrollDown{

0%{

opacity:1;

top:8px;

}

100%{

opacity:0;

top:24px;

}

}



/*=============================
Trusted Section
=============================*/

.trusted{

padding:90px 0;

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

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

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

}

.trusted p{

text-align:center;

font-size:18px;

color:var(--muted);

margin-bottom:60px;

}

.trusted-grid{

display:grid;

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

gap:30px;

}

.trusted-grid div{

padding:40px;

border-radius:24px;

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

border:1px solid rgba(255,255,255,.05);

transition:.35s;

text-align:center;

}

.trusted-grid div:hover{

transform:translateY(-8px);

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

}

.trusted-grid h2{

font-size:46px;

font-family:'Space Grotesk',sans-serif;

margin-bottom:10px;

}

.trusted-grid span{

color:var(--muted);

font-size:15px;

}



/*=============================
Section Header
=============================*/

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 90px;

}

.section-tag{

display:inline-block;

padding:10px 20px;

border-radius:100px;

background:rgba(244,181,63,.12);

color:var(--primary);

font-size:14px;

font-weight:600;

margin-bottom:24px;

}

.section-header h2{

font-size:58px;

font-family:'Space Grotesk',sans-serif;

line-height:1.1;

margin-bottom:22px;

letter-spacing:-2px;

}

.section-header p{

font-size:19px;

color:var(--muted);

}



/*=============================
Bento Grid
=============================*/

.bento-grid{

display:grid;

grid-template-columns:

repeat(12,1fr);

gap:24px;

}

.large{

grid-column:span 7;

min-height:420px;

}

.wide{

grid-column:span 12;

}

.course-card{

grid-column:span 5;

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.06);

border-radius:28px;

padding:38px;

position:relative;

overflow:hidden;

transition:.45s;

cursor:pointer;

}



/*=============================
Card Glow
=============================*/

.course-card::before{

content:"";

position:absolute;

left:-40%;

top:-40%;

width:250px;

height:250px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(244,181,63,.18),

transparent 70%);

opacity:0;

transition:.5s;

}

.course-card:hover::before{

opacity:1;

}

.course-card:hover{

transform:

translateY(-12px)

rotateX(2deg);

border-color:

rgba(244,181,63,.4);

box-shadow:

0 30px 80px rgba(0,0,0,.35),

0 0 40px rgba(244,181,63,.08);

}



/*=============================
Course Badge
=============================*/

.course-badge{

display:inline-block;

padding:8px 16px;

border-radius:100px;

background:rgba(244,181,63,.12);

color:var(--primary);

font-size:13px;

font-weight:600;

margin-bottom:28px;

}



/*=============================
Course Icons
=============================*/

.course-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

border-radius:20px;

margin-bottom:28px;

background:

linear-gradient(

135deg,

rgba(244,181,63,.16),

rgba(255,255,255,.05)

);

}



/*=============================
Course Typography
=============================*/

.course-card h3{

font-size:32px;

margin-bottom:12px;

font-family:'Space Grotesk',sans-serif;

}

.course-card span{

display:block;

font-size:15px;

color:var(--primary);

margin-bottom:18px;

}

.course-card p{

color:var(--muted);

font-size:17px;

line-height:1.8;

}

.course-card a{

display:inline-flex;

margin-top:32px;

font-weight:700;

color:var(--primary);

transition:.3s;

}

.course-card:hover a{

transform:translateX(8px);

}



/*=============================
Launch Card
=============================*/

.launch-content small{

display:block;

letter-spacing:2px;

text-transform:uppercase;

color:var(--primary);

margin-bottom:18px;

}

.launch-content h3{

font-size:46px;

margin-bottom:20px;

}

.launch-btn{

margin-top:40px;

display:inline-flex;

padding:18px 34px;

border-radius:100px;

background:var(--gradient);

color:#111;

font-weight:700;

transition:.35s;

}

.launch-btn:hover{

transform:scale(1.05);

box-shadow:

0 20px 40px rgba(244,181,63,.35);

}
/*======================================================
PART 3
Why Breaking Books
Resources
About
Testimonials
======================================================*/


/*==================================
Why Section
==================================*/

.why{

padding:140px 0;

position:relative;

}

.feature-grid{

display:grid;

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

gap:28px;

}

.feature-card{

position:relative;

padding:40px;

border-radius:28px;

overflow:hidden;

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.06);

transition:.4s;

cursor:pointer;

}

.feature-card::before{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

border-radius:50%;

background:

radial-gradient(circle,

rgba(244,181,63,.18),

transparent 70%);

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

transition:.5s;

}

.feature-card:hover::before{

width:500px;

height:500px;

}

.feature-card:hover{

transform:

translateY(-12px);

border-color:

rgba(244,181,63,.25);

box-shadow:

0 30px 80px rgba(0,0,0,.35);

}

.feature-number{

font-size:60px;

font-family:'Space Grotesk',sans-serif;

font-weight:700;

color:rgba(244,181,63,.15);

margin-bottom:20px;

}

.feature-card h3{

font-size:28px;

margin-bottom:18px;

font-family:'Space Grotesk',sans-serif;

position:relative;

z-index:2;

}

.feature-card p{

color:var(--muted);

font-size:16px;

line-height:1.8;

position:relative;

z-index:2;

}



/*==================================
Resources
==================================*/

.resources{

padding:150px 0;

}

.resource-grid{

display:grid;

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

gap:24px;

}

.resource-card{

padding:40px;

border-radius:28px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.05);

transition:.4s;

text-align:center;

position:relative;

overflow:hidden;

}

.resource-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
45deg,
transparent,

rgba(255,255,255,.05),

transparent

);

transform:translateX(-120%);

transition:.7s;

}

.resource-card:hover::after{

transform:translateX(120%);

}

.resource-card:hover{

transform:

translateY(-10px);

box-shadow:

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

}

.resource-icon{

width:90px;

height:90px;

border-radius:24px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

background:

linear-gradient(
135deg,

rgba(244,181,63,.15),

rgba(255,255,255,.05)

);

margin-bottom:30px;

}

.resource-card h3{

font-size:24px;

margin-bottom:16px;

font-family:'Space Grotesk',sans-serif;

}

.resource-card p{

color:var(--muted);

line-height:1.8;

}



/*==================================
About
==================================*/

.about{

padding:160px 0;

position:relative;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.about-glow{

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(244,181,63,.22),

transparent 70%);

filter:blur(40px);

}

.about-card{

position:relative;

padding:60px;

border-radius:32px;

background:

linear-gradient(
180deg,

rgba(255,255,255,.07),

rgba(255,255,255,.03)

);

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

backdrop-filter:blur(20px);

box-shadow:

0 35px 90px rgba(0,0,0,.4);

}

.about-card span{

color:var(--primary);

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

font-size:14px;

}

.about-card h3{

margin:24px 0;

font-size:42px;

line-height:1.2;

font-family:'Space Grotesk',sans-serif;

}

.about-card p{

color:var(--muted);

font-size:18px;

}

.about-content h2{

font-size:60px;

margin-bottom:30px;

line-height:1.1;

font-family:'Space Grotesk',sans-serif;

}

.about-content p{

font-size:18px;

line-height:1.9;

color:var(--muted);

margin-bottom:24px;

}

.about-highlights{

display:grid;

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

gap:18px;

margin-top:40px;

}

.about-highlights div{

padding:20px;

border-radius:18px;

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

border:1px solid rgba(255,255,255,.05);

font-weight:600;

transition:.3s;

}

.about-highlights div:hover{

background:rgba(244,181,63,.08);

transform:translateY(-4px);

}



/*==================================
Testimonials
==================================*/

.testimonials{

padding:150px 0;

}

.testimonial-grid{

display:grid;

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

gap:28px;

}

.testimonial-card{

padding:40px;

border-radius:28px;

background:

linear-gradient(
180deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.testimonial-card:hover{

transform:

translateY(-10px);

box-shadow:

0 30px 80px rgba(0,0,0,.35);

}

.stars{

font-size:22px;

color:#FFD66B;

margin-bottom:24px;

letter-spacing:3px;

}

.testimonial-card p{

font-size:17px;

line-height:1.8;

color:var(--muted);

margin-bottom:30px;

font-style:italic;

}

.testimonial-card h4{

font-size:22px;

margin-bottom:8px;

font-family:'Space Grotesk',sans-serif;

}

.testimonial-card span{

color:var(--primary);

font-size:15px;

}
/*======================================================
PART 4
FAQ
CONTACT
FOOTER
RESPONSIVE
======================================================*/


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

.faq{

padding:160px 0;

}

.faq-container{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}

.faq-item{

border-radius:24px;

overflow:hidden;

background:

linear-gradient(

180deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.faq-item:hover{

border-color:

rgba(244,181,63,.25);

}

.faq-question{

width:100%;

padding:30px 34px;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

color:#fff;

font-size:20px;

font-weight:600;

cursor:pointer;

}

.faq-question span{

font-size:30px;

color:var(--primary);

transition:.35s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

}

.faq-answer p{

padding:

0 34px

30px;

color:var(--muted);

line-height:1.8;

font-size:16px;

}

.faq-item.active .faq-answer{

max-height:220px;

}

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

transform:rotate(45deg);

}



/*==============================
CONTACT
==============================*/

.contact{

padding:170px 0;

position:relative;

}

.contact-card{

max-width:900px;

margin:auto;

padding:70px;

border-radius:36px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.08),

rgba(255,255,255,.03)

);

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

backdrop-filter:blur(18px);

box-shadow:

0 40px 100px rgba(0,0,0,.45);

text-align:center;

}

.contact-card h2{

font-size:56px;

margin-bottom:24px;

font-family:'Space Grotesk',sans-serif;

}

.contact-card p{

max-width:650px;

margin:auto;

margin-bottom:50px;

color:var(--muted);

font-size:18px;

}

.contact form{

display:flex;

flex-direction:column;

gap:24px;

}

.input-group{

width:100%;

}

.input-group input,

.input-group textarea{

width:100%;

padding:20px 24px;

background:#10141F;

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

border-radius:18px;

color:#fff;

font-size:17px;

transition:.3s;

resize:none;

}

.input-group input:focus,

.input-group textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(244,181,63,.08);

}

.contact button{

margin:auto;

margin-top:10px;

border:none;

}



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

footer{

margin-top:120px;

padding-top:90px;

background:#090B10;

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

}

.footer-grid{

display:grid;

grid-template-columns:

2fr

1fr

1fr;

gap:60px;

padding-bottom:70px;

}

.footer-grid h3{

font-size:34px;

font-family:'Space Grotesk',sans-serif;

margin-bottom:18px;

}

.footer-grid h3 span{

color:var(--primary);

}

.footer-grid h4{

font-size:20px;

margin-bottom:24px;

}

.footer-grid p{

color:var(--muted);

line-height:1.9;

}

.footer-grid a{

display:block;

margin-bottom:14px;

color:var(--muted);

transition:.3s;

}

.footer-grid a:hover{

color:var(--primary);

padding-left:8px;

}

.footer-bottom{

padding:30px;

text-align:center;

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

font-size:15px;

color:var(--muted);

}



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

.menu-btn{

display:none;

font-size:32px;

background:none;

border:none;

color:#fff;

cursor:pointer;

}



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

@media(max-width:1100px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

margin-top:70px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

}

.bento-grid{

grid-template-columns:1fr;

}

.course-card,

.large,

.wide{

grid-column:auto;

}

.resource-grid{

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

}

.feature-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.trusted-grid{

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

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}



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

@media(max-width:768px){

section{

padding:90px 0;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:52px;

letter-spacing:-2px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

gap:30px;

}

.nav-links{

display:none;

}

.youtube-btn{

display:none;

}

.menu-btn{

display:block;

}

.section-header h2{

font-size:42px;

}

.contact-card{

padding:40px 24px;

}

.contact-card h2{

font-size:38px;

}

.feature-grid{

grid-template-columns:1fr;

}

.resource-grid{

grid-template-columns:1fr;

}

.trusted-grid{

grid-template-columns:1fr;

}

.about-highlights{

grid-template-columns:1fr;

}

.glass-card{

padding:30px;

}

.floating-card{

display:none;

}

}



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

@media(max-width:480px){

.hero h1{

font-size:42px;

}

.logo{

font-size:26px;

}

.section-header h2{

font-size:34px;

}

.contact-card h2{

font-size:30px;

}

.stat h2{

font-size:34px;

}

.course-card{

padding:28px;

}

}

/*======================================================
PART 5
Premium Effects & Polish
======================================================*/


/*==============================
Gradient Mesh
==============================*/

.mesh-gradient{

position:fixed;

inset:0;

z-index:-10;

overflow:hidden;

pointer-events:none;

}

.mesh-gradient::before,

.mesh-gradient::after{

content:"";

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.45;

animation:blobMove 18s ease-in-out infinite;

}

.mesh-gradient::before{

width:600px;

height:600px;

background:#F4B53F;

top:-150px;

left:-120px;

}

.mesh-gradient::after{

width:700px;

height:700px;

background:#ff7b00;

bottom:-200px;

right:-180px;

animation-delay:8s;

}

@keyframes blobMove{

0%,100%{

transform:translate(0,0) scale(1);

}

50%{

transform:translate(120px,-80px) scale(1.15);

}

}



/*==============================
Spotlight Hover
==============================*/

.course-card,

.feature-card,

.resource-card,

.testimonial-card{

position:relative;

overflow:hidden;

}

.course-card::after,

.feature-card::after,

.resource-card::after,

.testimonial-card::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at var(--x,50%) var(--y,50%),

rgba(255,255,255,.08),

transparent 45%

);

opacity:0;

transition:.25s;

pointer-events:none;

}

.course-card:hover::after,

.feature-card:hover::after,

.resource-card:hover::after,

.testimonial-card:hover::after{

opacity:1;

}



/*==============================
3D Card Hover
==============================*/

.course-card,

.feature-card,

.resource-card,

.testimonial-card{

transform-style:preserve-3d;

will-change:transform;

transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}



/*==============================
Magnetic Buttons
==============================*/

.primary-btn,

.secondary-btn,

.youtube-btn,

.launch-btn{

position:relative;

overflow:hidden;

}

.primary-btn::before,

.youtube-btn::before,

.launch-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.7s;

}

.primary-btn:hover::before,

.youtube-btn:hover::before,

.launch-btn:hover::before{

left:120%;

}



/*==============================
Floating Animation
==============================*/

.glass-card{

animation:floatGlass 7s ease-in-out infinite;

}

@keyframes floatGlass{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}



/*==============================
Image Shine
==============================*/

.about-card{

overflow:hidden;

}

.about-card::before{

content:"";

position:absolute;

left:-150%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.about-card:hover::before{

left:180%;

}



/*==============================
Fade Up Animation
==============================*/

.reveal{

opacity:0;

transform:

translateY(70px);

transition:

opacity .9s ease,

transform .9s ease;

}

.reveal.active{

opacity:1;

transform:

translateY(0);

}



/*==============================
Pulse
==============================*/

@keyframes glow{

0%,100%{

box-shadow:

0 0 0 rgba(244,181,63,.4);

}

50%{

box-shadow:

0 0 40px rgba(244,181,63,.35);

}

}

.primary-btn{

animation:glow 4s infinite;

}



/*==============================
Hover Lift
==============================*/

.course-card:hover,

.feature-card:hover,

.resource-card:hover,

.testimonial-card:hover{

z-index:10;

}



/*==============================
Glass Blur
==============================*/

.glass-card,

.contact-card,

.about-card{

backdrop-filter:blur(18px);

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

}



/*==============================
Divider
==============================*/

.section-header::after{

content:"";

display:block;

width:90px;

height:4px;

border-radius:20px;

margin:32px auto 0;

background:var(--gradient);

}



/*==============================
Text Gradient
==============================*/

.gradient-text{

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



/*==============================
Utilities
==============================*/

.text-center{

text-align:center;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:30px;

}

.mt-4{

margin-top:40px;

}

.mb-2{

margin-bottom:20px;

}

.mb-3{

margin-bottom:30px;

}

.mb-4{

margin-bottom:40px;

}

.hidden{

display:none;

}



/*==============================
Smooth Images
==============================*/

img{

transition:.4s;

}

img:hover{

transform:scale(1.04);

}



/*==============================
Accessibility
==============================*/

:focus-visible{

outline:2px solid var(--primary);

outline-offset:4px;

border-radius:10px;

}



/*==============================
Reduced Motion
==============================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}