/* ===================================================
   AI Business Starter Kit™
   Version 1.0
   NewMarketing Centre™
=================================================== */
/* HERO BRANDING */

.hero-brand{

text-align:center;

margin-bottom:60px;

}

.hero-logo{

width:520px;

max-width:90%;

margin:auto;

display:block;

}
:root{

--navy:#0d1b2a;
--navy-light:#13293d;
--gold:#d4af37;
--gold-light:#f4d06f;
--white:#ffffff;
--light:#f7f8fa;
--text:#243447;
--grey:#6c757d;

--radius:16px;
--shadow:0 10px 30px rgba(0,0,0,.12);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:var(--light);
color:var(--text);
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(1180px,92%);
margin:auto;

}


}

.btn-nav:hover{

transform:translateY(-2px);

}

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

.hero{

background:linear-gradient(135deg,var(--navy),var(--navy-light));

padding:90px 0;

color:white;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

.eyebrow{

display:inline-block;

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

padding:8px 18px;

border-radius:30px;

font-size:.85rem;

letter-spacing:1px;

margin-bottom:22px;

color:var(--gold-light);

}

.hero h1{

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

font-size:3.4rem;

line-height:1.1;

margin-bottom:28px;

}

.lead{

font-size:1.15rem;

opacity:.92;

margin-bottom:35px;

}

.hero-checklist{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-bottom:40px;

font-size:1.05rem;

}

.hero-buttons{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.btn-primary{

background:var(--gold);

color:var(--navy);

padding:16px 34px;

font-weight:700;

border-radius:50px;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:2px solid white;

color:white;

padding:16px 34px;

border-radius:50px;

transition:.3s;

}

.btn-secondary:hover{

background:white;
color:var(--navy);

}

.hero-image{

text-align:center;

}

.hero-image img{

max-width:420px;

margin:auto;

border-radius:24px;

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

}

/* ==========================
 STATS
========================== */

.stats{

margin-top:-45px;
padding-bottom:70px;

}

.stats .container{

display:grid;

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

gap:25px;

}

.stat-card{

background:white;

padding:35px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

}

.stat-card h2{

font-size:2.6rem;

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

color:var(--gold);

margin-bottom:10px;

}
/* ==========================
   GENERAL SECTIONS
========================== */

section{

padding:90px 0;

}

section h2{

font-family:'Manrope',sans-serif;
font-size:2.5rem;
text-align:center;
margin-bottom:20px;
color:var(--navy);

}

.section-intro{

max-width:760px;
margin:0 auto 50px;
text-align:center;
color:var(--grey);
font-size:1.1rem;

}

/* ==========================
   ABOUT
========================== */

.about-grid{

display:grid;
grid-template-columns:380px 1fr;
gap:60px;
align-items:center;

}

.about img{

border-radius:20px;
box-shadow:var(--shadow);

}

.about h2{

text-align:left;

}

.about p{

margin-bottom:20px;

}

/* ==========================
   CHAPTER CARDS
========================== */

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;

}

.card{

background:white;
padding:35px;
border-radius:16px;
box-shadow:var(--shadow);
transition:.3s;

}

.card:hover{

transform:translateY(-8px);

}

.card h3{

color:var(--gold);
margin-bottom:10px;

}

.card h4{

font-family:'Manrope',sans-serif;
margin-bottom:15px;
color:var(--navy);

}

/* ==========================
   CLEAR FRAMEWORK
========================== */

.framework{

background:var(--navy);
color:white;

}

.framework h2{

color:white;

}

.framework-box{

max-width:1100px;
margin:auto;

}

.framework-grid{

margin-top:50px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:25px;

}

.framework-grid div{

background:rgba(255,255,255,.08);
padding:30px;
border-radius:16px;
text-align:center;

}

.framework-grid h3{

font-size:2.2rem;
color:var(--gold);
margin-bottom:15px;

}

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

.benefit-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;

}

.benefit{

background:white;
padding:35px;
border-radius:16px;
box-shadow:var(--shadow);

}

.benefit h3{

margin-bottom:15px;
color:var(--navy);

}

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

.bonus{

background:#eef2f7;

}

.bonus-grid{

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

}

.bonus-card{

background:white;
padding:30px;
text-align:center;
border-radius:16px;
font-weight:600;
box-shadow:var(--shadow);

}

/* ==========================
   PRICING
========================== */

.pricing{

background:linear-gradient(180deg,#f8f9fb,#edf2f7);

}

.pricing-card{

max-width:620px;
margin:auto;
background:white;
padding:60px;
border-radius:24px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.15);

}

.product-label{

display:inline-block;
background:var(--gold);
color:var(--navy);
padding:8px 18px;
border-radius:50px;
font-size:.85rem;
font-weight:700;
margin-bottom:20px;

}

.price{

font-size:4rem;
font-family:'Manrope',sans-serif;
color:var(--gold);
margin:20px 0 10px;

}

.price-note{

margin-bottom:30px;
color:var(--grey);

}

.price-list{

margin:35px 0;
text-align:left;

}

.price-list li{

padding:10px 0;
font-size:1.05rem;

}

.btn-buy{

display:inline-block;
background:var(--gold);
color:var(--navy);
padding:18px 42px;
border-radius:50px;
font-weight:700;
font-size:1.1rem;
transition:.3s;

}

.btn-buy:hover{

transform:translateY(-3px);

}

.secure{

margin-top:20px;
font-size:.95rem;
color:var(--grey);

}
/* ==========================
   WHO IT'S FOR
========================== */

.who{

background:#ffffff;

}

.who-grid{

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

}

.who-card{

background:#f8f9fb;
padding:35px;
border-radius:16px;
box-shadow:var(--shadow);
text-align:center;
transition:.3s;

}

.who-card:hover{

transform:translateY(-6px);

}

.who-card h3{

margin-bottom:15px;
color:var(--navy);

}

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

.faq{

background:#eef2f7;

}

.faq-item{

background:white;
padding:30px;
border-radius:16px;
margin-bottom:20px;
box-shadow:var(--shadow);

}

.faq-item h3{

color:var(--navy);
margin-bottom:12px;

}

.faq-item p{

color:var(--text);

}

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

.final-cta{

background:linear-gradient(135deg,var(--navy),var(--navy-light));
color:white;
text-align:center;

}

.final-cta h2{

color:white;

}

.final-cta p{

max-width:760px;
margin:0 auto 40px;
font-size:1.15rem;

}

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

footer{

background:#08131f;
color:white;
padding-top:70px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
padding-bottom:50px;

}

.footer-logo{

width:180px;
margin-bottom:20px;

}

.footer-column h4{

margin-bottom:18px;
color:var(--gold);

}

.footer-column ul li{

margin-bottom:10px;

}

.footer-column a{

color:white;
transition:.3s;

}

.footer-column a:hover{

color:var(--gold);

}

.footer-column p{

margin-bottom:10px;
opacity:.9;

}

.copyright{

border-top:1px solid rgba(255,255,255,.12);
padding:25px 0;
text-align:center;
font-size:.95rem;
opacity:.8;

}

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

.btn-primary,
.btn-secondary,
.btn-buy,
.btn-nav{

cursor:pointer;

}

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

@media (max-width:992px){

.hero-grid,
.about-grid,
.footer-grid{

grid-template-columns:1fr;

}

.stats .container{

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

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.about h2{

text-align:center;

}

.about img{

max-width:340px;
margin:auto;

}

nav{

display:none;

}

header .container{

justify-content:space-between;

}

}

@media (max-width:768px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:2.4rem;

}

section{

padding:70px 0;

}

section h2{

font-size:2rem;

}

.stats .container{

grid-template-columns:1fr;

}

.pricing-card{

padding:40px 25px;

}

.price{

font-size:3rem;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary,
.btn-buy{

width:100%;
text-align:center;

}

}

@media (max-width:480px){

.container{

width:94%;

}

.logo img{

height:48px;

}

.hero h1{

font-size:2rem;

}

.lead{

font-size:1rem;

}

.card,
.benefit,
.bonus-card,
.who-card,
.faq-item{

padding:25px;

}

}

/* ==========================
   END
========================== */