/* ================= BASE ================= */

.alt-bg{
background:#F8FAFC;
}

.narrow{
max-width:900px;
margin:auto;
background:white;
padding:50px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.narrow p{
margin-bottom:18px;
font-size:15px;
color:#667085;
line-height:1.7;
}

/* ================= GRID ================= */

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

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

.card{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
transition:all 0.3s ease;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 25px 50px rgba(0,0,0,0.12);
}

.card i{
width:32px;
height:32px;
margin-bottom:12px;
color:#5878BA;
}

.card h3{
margin-bottom:8px;
color:#1F2A44;
font-size:18px;
}

.card p{
color:#667085;
font-size:14px;
line-height:1.6;
}

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

.hero-points{
list-style:none;
margin-top:15px;
}

.hero-points li{
margin-bottom:10px;
padding-left:18px;
position:relative;
color:#e2e8f0;
}

.hero-points li::before{
content:"•";
position:absolute;
left:0;
color:white;
font-size:18px;
}

/* ================= SPLIT SECTION ================= */

.split-section{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;

background:white;
padding:50px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.split-text{
border-left:4px solid #5878BA;
padding-left:20px;
}

.split-text p{
margin-bottom:15px;
color:#667085;
line-height:1.7;
}

.styled-list{
margin-top:15px;
padding-left:20px;
}

.styled-list li{
margin-bottom:10px;
color:#475467;
}

/* RIGHT SIDE MINI CARDS */

.split-cards{
display:flex;
flex-direction:column;
gap:15px;
}

.mini-card{
background:#F1F5F9;
padding:20px;
border-radius:12px;
transition:0.3s ease;
}

.mini-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.mini-card h4{
margin-bottom:6px;
color:#1F2A44;
}

.mini-card p{
font-size:14px;
color:#667085;
}

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

.contact-highlight{
background:#1F2A44;
color:white;
text-align:center;
}

.contact-box{
display:flex;
justify-content:center;
gap:60px;
margin-top:30px;
}

.contact-box h3{
margin-bottom:5px;
}

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

.cta{
background:#1F2A44;
color:white;
padding:70px 0;
text-align:center;
}

.cta h2{
font-size:32px;
margin-bottom:15px;
}

.cta p{
margin-bottom:25px;
color:#cbd5e1;
}

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

@media(max-width:992px){

.grid-3{
grid-template-columns:repeat(2,1fr);
}

.split-section{
grid-template-columns:1fr;
padding:30px;
}

.narrow{
padding:30px;
}

.contact-box{
flex-direction:column;
gap:20px;
}

}

@media(max-width:576px){

.grid-3{
grid-template-columns:1fr;
}

}

/* ================= HOW ATERA (SCOPED + SAFE) ================= */

.atera-page .how-atera{
background:#F8FAFC; /* match alt-bg */
}

.atera-page .how-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:25px;
margin-top:40px;
}

.atera-page .how-card{
background:white;
padding:25px;
border-radius:14px;
text-align:center;
transition:all 0.3s ease;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.atera-page .how-card:hover{
transform:translateY(-6px);
box-shadow:0 25px 50px rgba(0,0,0,0.12);
}

.atera-page .how-card .icon{
width:48px;
height:48px;
margin:0 auto 12px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:#5878BA; /* same as card icon */
color:#fff;
}

.atera-page .how-card h3{
margin-bottom:8px;
font-size:16px;
color:#1F2A44;
}

.atera-page .how-card p{
font-size:14px;
color:#667085;
line-height:1.6;
}

/* RESPONSIVE */

@media(max-width:992px){
.atera-page .how-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:576px){
.atera-page .how-grid{
grid-template-columns:1fr;
}
}

/* ================= HOW ATERA (FINAL SAFE) ================= */

.atera-page .how-atera{
background:#F8FAFC;
}

.atera-page .how-atera-grid{
grid-template-columns:repeat(4,1fr);
}

.atera-page .how-card{
border-top:3px solid #5878BA;
}

/* RESPONSIVE */

@media(max-width:992px){
.atera-page .how-atera-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:576px){
.atera-page .how-atera-grid{
grid-template-columns:1fr;
}
}

/* ================= QUANTUM CUSTOM ================= */

.quantum-page .quantum-highlight{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.highlight-box{
background:#1F2A44;
color:white;
padding:30px;
border-radius:14px;
text-align:center;
}

.highlight-box i{
margin-bottom:10px;
}

/* TIMELINE */

.quantum-timeline{
display:flex;
justify-content:space-between;
margin-top:40px;
}

.timeline-item{
text-align:center;
max-width:200px;
}

/* LIST STYLE */

.quantum-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:40px;
}

.list-item{
display:flex;
gap:15px;
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* STRIP */

.quantum-strip{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
margin-top:30px;
}

.quantum-strip span{
background:white;
padding:10px 18px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}