/* =========================
GLOBAL
========================= */

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

body{

font-family:Arial, Helvetica, sans-serif;
background:#f5f7fa;
color:#111;
line-height:1.6;

}


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

.main-hero{

background:#0A3161;
padding:120px 40px;

}

.hero-container{

max-width:1400px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;

align-items:center;

}

.hero-left h1{

font-size:clamp(2.5rem,5vw,5rem);
line-height:1.1;
color:#fff;

margin-bottom:30px;

font-weight:700;

}

.hero-left p{

font-size:1.2rem;
color:#d9e3f0;

max-width:700px;

}

.hero-right{

display:flex;
justify-content:center;
align-items:center;

}

.hero-right img{

width:100%;
max-width:500px;
height:auto;

object-fit:contain;

}


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

.hero-mockup{

margin-top:40px;

display:flex;
gap:14px;

align-items:center;

flex-wrap:wrap;

}

.hero-mockup input{

width:100%;
max-width:420px;

padding:18px 20px;

border:none;

border-radius:14px;

font-size:1rem;

background:#fff;

color:#222;

outline:none;

box-shadow:0 10px 20px rgba(0,0,0,0.15);

}

.hero-mockup button{

padding:18px 28px;

border:none;

border-radius:14px;

background:#ffffff;

color:#0A3161;

font-size:1rem;
font-weight:700;

cursor:not-allowed;

opacity:0.9;

box-shadow:0 10px 20px rgba(0,0,0,0.15);

}





/* =========================
STRIPE BAR
========================= */

.stripe-bar{

background:#c7e0f4;

padding:25px 40px;

border-bottom:1px solid #d7dee8;

}

.stripe-bar p{

max-width:1200px;
margin:auto;
text-align: left;
font-size:1rem;
font-weight: 800;
color: #0A3161;
line-height:1.7;
opacity: 0.7;

}


/* =========================
EMAIL SECTION
========================= */

/* =========================
EMAIL SECTION - SOFT VERSION
========================= */

.email-section{
padding:35px 20px 45px;
display:flex;
justify-content:center;
background:#f5f7fa;
}

.email-box{
width:100%;
height: auto;
max-width:760px;
background:#edf2f7;
padding:24px 26px;
border-radius:18px;
box-shadow:0 6px 18px rgba(10,49,97,0.08);
text-align:center;
border:1px solid #005a9e;
}

.email{
font-size: clamp(0.85rem, 1.15vw, 1.15rem);
font-weight:500;
color: #005a9e;
line-height:1.4;
opacity: 0.9;
}

.email-box form{
display:flex;
gap:12px;
align-items:center;
justify-content:center;
}

.email-box input{
width:100%;
max-width:420px;
padding:13px 16px;
border:1px solid #c9dcea;
border-radius:999px;
font-size:0.95rem;
outline:none;
background:#fff;
color:#222;
}

.email-box input:focus{
border-color:#0A3161;
box-shadow:0 0 0 3px rgba(10,49,97,0.08);
}

.email-box button{
padding:13px 24px;
background:#005a9e;
color:#fff;
border:none;
border-radius:999px;
font-size:0.95rem;
font-weight:600;
cursor:pointer;
transition:0.3s;
white-space:nowrap;
}

.email-box button:hover{
background:#12498c;
}

@media(max-width:760px){

.email-box{
padding:22px 18px;

}

.email-box form{
flex-direction:column;
}

.email-box input,
.email-box button{
width:100%;
max-width:100%;
}

}




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

.offer-section{

padding:50px 30px;

}

.offer-card{

max-width:1300px;
margin:auto;

background:#fff;

border-radius:25px;

padding:60px;

display:grid;
grid-template-columns:2fr 1fr;
gap:60px;

align-items:center;

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

}

.offer-info h2{

font-size:3rem;
margin-bottom:25px;

color:#0A3161;

}

.offer-info p{

font-size:1.1rem;
margin-bottom:20px;

color:#444;

max-width:800px;

}

.price{

font-size:2rem !important;
font-weight:700;

color:#0A3161 !important;

}

.offer-button{

display:flex;
justify-content:center;
align-items:center;

}

.offer-button a{

display:inline-block;

padding:22px 40px;

background:#0A3161;
color:#fff;

text-decoration:none;

border-radius:14px;

font-size:1rem;
font-weight:700;

transition:0.3s;

}

.offer-button a:hover{

background:#12498c;

}


.offer-card{
position:relative;
}




/* =========================
BUNDLE SECTION
========================= */

.bundle-card{
max-width:1300px;
margin:auto;
background:#fff;
border-radius:25px;
padding:70px 60px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.bundle-left{
position:relative;
padding-top:110px;
}

.bundle-left h2{
font-size:3rem;
margin-bottom:25px;
color:#0A3161;
font-weight: 700;
}

.bundle-left p{
font-size:1.1rem;
margin-bottom:30px;
color:#444;
max-width:800px;
}

.old-price-badge{
position:absolute;
top:0;
left:0;
width:95px;
height:95px;
border-radius:50%;
background:#050505;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:2rem;
box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

.old-price-badge .red-x{
position:absolute;
color:red;
font-size: 5rem;
font-weight:800;
line-height:1;
transform:rotate(-12deg);
opacity:0.85;
}

.launch-price-badge{
width:200px;
height:200px;
border-radius:50%;
background:#0A3161;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border:8px dotted #f5c542;
box-shadow:0 12px 30px rgba(10,49,97,0.22);
}

.launch-label{
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
max-width:155px;
line-height:1.3;
margin-bottom:10px;
color:#f5c542;
}

.launch-price{
font-size: 2.8rem;
font-weight:900;
line-height:1;
}

.bundle-right{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:28px;
}

.bundle-includes{
width:100%;
max-width:420px;
background:#f4f8ff;
border:1px solid rgba(10,49,97,0.10);
border-radius:18px;
padding:28px;
}

.bundle-includes h3{
font-size:1.2rem;
color:#0A3161;
margin-bottom:16px;
}

.bundle-includes ul{
list-style:none;
padding:0;
margin:0;
}

.bundle-includes li{
font-size:1rem;
color:#333;
margin-bottom:12px;
padding-left:26px;
position:relative;
line-height:1.45;
}

.bundle-includes li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#0A3161;
font-weight:900;
}

.bundle-right a{
display:inline-block;
padding:22px 40px;
background:#0A3161;
color:#fff;
text-decoration:none;
border-radius:14px;
font-size:1rem;
font-weight:700;
transition:0.3s;
}

.bundle-right a:hover{
background:#12498c;
}




@media(max-width:900px){

.bundle-card{
grid-template-columns:1fr;
padding:45px 28px;
text-align:center;
}

.bundle-left{
padding-top:95px;
}

.old-price-badge{
left:10%;
transform:translateX(-50%);
width: 70px;
height: 70px;
}

.launch-price-badge{
margin:0 auto;
}

.bundle-left h2{
font-size:2.2rem;
}

}

/* faqs section */

.faq-section {
  max-width: 900px;
  margin: 70px auto;
  padding: 0 20px;
  height: auto;
}

.faq-main-btn {
  width: 100%;
  background: linear-gradient(90deg, #0A3161, #1e5bb8);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 18px 24px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-main-btn span{
    color: #fff;
}


.faq-arrow {
  transition: transform 0.3s ease;
  font-size: 18px;
  color: #fff;
}

.faq-main-btn.active .faq-arrow {
  transform: rotate(180deg);
}

.faq-panel {

    max-height: 0;
    overflow: hidden ;
 
  transition: max-height 0.45s ease;
  background: #fff;
  border-radius: 18px;
  margin-top: 16px;
  padding: 0 28px;
}

.faq-panel.open {
  max-height: 900px;
  padding: 28px;
}

.faq-item {
  margin-bottom: 22px;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #111;
}

.faq-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}


@media(max-width: 768px){
    
    .faq-panel {

    max-height: 0;
    overflow: auto;
    
    
}

}



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

========================= */


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

footer{

background:#081f3d;

padding:60px 20px;

text-align:center;

}

footer p{

color:#fff;
margin-bottom:10px;

}

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

@media(max-width:900px){

.hero-container{

grid-template-columns:1fr;
gap:50px;

}

.hero-left{

text-align:center;

}

.offer-card{

grid-template-columns:1fr;

padding:40px 30px;

}

.offer-info{

text-align:center;

}

.offer-button{

justify-content:center;

}

.offer-info h2{

font-size:2.2rem;

}

.email-box{

padding:40px 25px;

}

}


@media(max-width:600px){

.main-hero{

padding:100px 20px;

}

.hero-left h1{

font-size:2.4rem;

}

.hero-left p{

font-size:1rem;

}

.stripe-bar{

padding:25px 20px;

}

.offer-section{

padding:30px 20px;

}

.offer-card{

padding:35px 25px;

border-radius:20px;

}

.offer-info h2{

font-size:2rem;

}

.price{

font-size:1.7rem !important;

}

.email-box h2{

font-size:1.5rem;

}

}