@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap’);

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

body{
font-family:’Inter’,sans-serif;
background:linear-gradient(135deg,#f8fafc,#ecfdf5);
color:#1e2937;
padding:20px;
}

/* HEADER */
.header{
text-align:center;
margin-bottom:40px;
}

.logo{
font-size:32px;
font-weight:700;
color:#10b981;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

/* TABS */
.tabs{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:40px;
}

.tab-btn{
padding:12px 22px;
border:none;
border-radius:999px;
background:#f1f5f9;
color:#475569;
cursor:pointer;
font-weight:600;
font-size:15px;
transition:all 0.3s ease;
}

.tab-btn.active{
background:#10b981;
color:white;
box-shadow:0 4px 15px rgba(16,185,129,0.25);
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:24px;
max-width:1100px;
margin:auto;
}

.card{
background:#fff;
padding:28px 24px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
position:relative;
transition:all 0.4s ease;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(16,185,129,0.15);
}

.platform-icon{
width:62px;
height:62px;
background:#ffffff;
color:#10b981;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
margin-bottom:16px;
font-size:32px;
box-shadow:0 6px 15px rgba(16,185,129,0.15);
border:2px solid #10b981;
}

.live-badge{
position:absolute;
top:20px;
right:20px;
background:#10b981;
color:#fff;
padding:6px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

h3{
margin-bottom:12px;
color:#1e2937;
font-size:1.35rem;
}

.features{
list-style:none;
margin:16px 0 20px;
}

.features li{
font-size:15px;
margin-bottom:9px;
display:flex;
align-items:center;
gap:8px;
color:#334155;
}

.features i{
color:#10b981;
font-size:18px;
}

.price{
font-size:24px;
font-weight:700;
color:#10b981;
margin:12px 0 8px;
}

.success{
color:#10b981;
font-size:15px;
font-weight:600;
margin-bottom:18px;
}

.btn{
display:block;
padding:14px;
background:linear-gradient(135deg, #10b981, #059669);
color:#fff;
border-radius:999px;
text-align:center;
text-decoration:none;
font-weight:600;
font-size:16px;
transition:all 0.3s ease;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(16,185,129,0.25);
}

/* POPUP */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.65);
z-index: 1000;
align-items: center;
justify-content: center;
}

.popup-content {
background: #fff;
padding: 35px 30px;
border-radius: 24px;
text-align: center;
max-width: 380px;
width: 90%;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.popup h2 {
margin-bottom: 12px;
color: #1e2937;
}

.popup p {
color: #64748b;
margin-bottom: 28px;
}

.contact-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #10b981;
color: white;
padding: 15px;
margin: 12px 0;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.contact-btn:hover {
background: #059669;
transform: translateY(-3px);
}

.close-btn {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #94a3b8;
}

/* HIDE / SHOW PLANS */
.plan{display:none;}
.plan.active{display:block;}

/* MOBILE */
@media(max-width:700px){
.grid{grid-template-columns:1fr;}
.header{margin-bottom:30px;}
}

// Tab Switching
const buttons = document.querySelectorAll(“.tab-btn”);
const plans = document.querySelectorAll(“.plan”);

buttons.forEach(button => {
button.addEventListener(“click”, () => {
buttons.forEach(btn => btn.classList.remove(“active”));
plans.forEach(plan => plan.classList.remove(“active”));

button.classList.add(“active”);
document.getElementById(button.dataset.tab).classList.add(“active”);
});
});

// Popup Functionality
const popup = document.getElementById(‘orderPopup’);
const buyButtons = document.querySelectorAll(‘.buy-btn’);
const closeBtn = document.querySelector(‘.close-btn’);

buyButtons.forEach(btn => {
btn.addEventListener(‘click’, (e) => {
e.preventDefault();
popup.style.display = ‘flex’;
});
});

closeBtn.addEventListener(‘click’, () => {
popup.style.display = ‘none’;
});

popup.addEventListener(‘click’, (e) => {
if (e.target === popup) {
popup.style.display = ‘none’;
}
});