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

:root{
--bg: #0a1118;
--fg: #f0f7ff;
--muted: #8fa3b8;
--card: #0f1920;
--edge: #1a2832;
--accent: #00d4aa; /* fresh mint green */
--accent-2: #4dd0e1; /* sky blue */
--accent-3: #26c6da; /* ocean blend */
--shadow: 0 10px 30px rgba(0,212,170,0.12);
--gradient-fresh: linear-gradient(135deg, #00d4aa 0%, #4dd0e1 50%, #26c6da 100%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family: 'Poppins', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
background: radial-gradient(1200px 800px at 80% -10%, rgba(77,208,225,0.08), transparent 60%),
radial-gradient(900px 600px at -10% 20%, rgba(0,212,170,0.06), transparent 60%),
radial-gradient(800px 1000px at 50% 100%, rgba(38,198,218,0.04), transparent 70%),
var(--bg);
color:var(--fg);
}
/* Container responsive padding */
.container{max-width:1100px; margin:0 auto; padding:clamp(20px, 4vw, 40px) clamp(16px, 3vw, 24px)}
/* Hero responsive adjustments */
.hero{ text-align:center; padding:clamp(32px, 8vh, 64px) 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:clamp(180px, 20vh, 240px)}
.title{ font-family: 'Poppins', sans-serif; font-size: clamp(24px, 5.5vw, 54px); line-height:1.1; margin: 8px 0 6px; font-weight:700; }
.subtitle{ color: var(--muted); margin-top:0; font-size:clamp(14px, 2.5vw, 18px); max-width:600px; font-weight:400 }
/* Badge responsive */
.badge{ display:inline-block; background:var(--gradient-fresh); color:white; padding:clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 18px); border-radius:999px; box-shadow:var(--shadow); font-weight:600; font-size:clamp(16px, 2.5vw, 20px); text-shadow: 0 1px 2px rgba(0,0,0,0.2) }
.pulse{ position:relative }
.pulse::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(0,212,170,0.5); animation:pulse 2s infinite }
@keyframes pulse{ 0%{opacity:.8; transform:scale(.95)} 70%{opacity:0; transform:scale(1.2)} 100%{opacity:0} }


/* Cards with better spacing and consistent height */
.card{ background:linear-gradient(180deg, rgba(0,212,170,0.03), transparent 30%) , var(--card); border:1px solid var(--edge); border-radius:18px; padding:clamp(18px, 3vw, 28px); box-shadow:0 1px 0 rgba(240,247,255,0.02) inset, var(--shadow); width:100%; transition: transform .15s ease, box-shadow .15s ease }
.card h3{ margin-top:0; margin-bottom:12px; font-size:clamp(18px, 2.5vw, 22px); font-family: 'Poppins', sans-serif; font-weight:600 }
.card p{ margin:10px 0; line-height:1.6; font-weight:400 }
.card:hover{ transform: translateY(-3px); box-shadow:0 1px 0 rgba(240,247,255,0.02) inset, 0 12px 40px rgba(0,212,170,0.15) }
/* Responsive grid: stacks nicely on mobile, 2 cols on tablet, 3 cols on desktop */
.grid{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); margin-top:22px }

/* On tablets and up, ensure cards have consistent height */
@media (min-width: 768px) {
	.grid > .card { display:flex; flex-direction:column; justify-content:space-between }
	.grid > .card h3 { margin-top:0 }
	.grid > .card .btn { margin-top:auto }
}

/* On very small screens, force single column */
@media (max-width: 640px) {
	.grid { grid-template-columns: 1fr }
}
/* Countdown tiles responsive */
.countdown{ display:flex; gap:clamp(10px, 2vw, 16px); justify-content:center; flex-wrap:wrap; margin:18px 0 }
.tile{ background:#0e1a24; border:1px solid var(--edge); border-radius:14px; padding:clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 16px); min-width:clamp(64px, 15vw, 80px); flex:1 1 clamp(70px, 18vw, 100px); text-align:center; box-shadow:var(--shadow)}
.tile span{ display:block; font-size:clamp(18px, 4vw, 34px); font-weight:700; line-height:1.2; font-family: 'Poppins', sans-serif }
.tile label{ display:block; font-size:clamp(9px, 1.5vw, 11px); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; font-weight:500 }
.centered{ text-align:center }
.muted{ color:var(--muted) }
.small{ font-size:12px }
.btn{ background: var(--gradient-fresh); border:none; color:white; padding:12px 16px; font-family: 'Poppins', sans-serif; font-weight:600; border-radius:999px; cursor:pointer; box-shadow:var(--shadow); transition: transform .08s ease; text-decoration:none; display:inline-block; text-shadow: 0 1px 2px rgba(0,0,0,0.1) }
.btn:active{ transform: translateY(1px) }
.btn:hover{ text-decoration:none }
.input{ width:100%; background:#0e1a24; border:1px solid var(--edge); color:var(--fg); padding:12px 14px; border-radius:12px; margin:10px 0 12px; font-family: 'Inter', sans-serif }
/* Footer responsive */
.footer{ text-align:center; margin:clamp(24px, 5vh, 40px) 0 clamp(12px, 2vh, 20px); color:var(--muted); font-size:clamp(12px, 1.8vw, 14px) }


/* Modals */
.modal{ position:fixed; inset:0; display:grid; place-items:center; backdrop-filter: blur(4px); background: rgba(8,8,12,0.6); z-index:20 }
.modal.hidden{ display:none }
.modal .modal-content{ background: var(--card); border:1px solid var(--edge); border-radius:20px; width:min(1100px, 92vw); box-shadow: var(--shadow); padding:18px }
.modal h3{ margin:6px 8px 10px }
.embed-wrap{ aspect-ratio: 16/9; width:100%; border-radius:14px; overflow:hidden; border:1px solid var(--edge) }
.embed-wrap iframe{ width:100%; height:100%; border:0; background:#0b0b0f }
.close{ background:#181821; border:1px solid var(--edge); color:var(--fg); border-radius:10px; padding:6px 10px; float:right; cursor:pointer }

/* Make purchase button fill its card on narrow screens */
.pay .btn{ display:block; width:100%; }

/* Slight lift for cards to separate visual stacks on small screens - REMOVED, now using hover effect above */

@media (max-width:520px){
	.hero{ gap:8px }
}

/* Additional mobile polish for narrow devices */
@media (max-width:420px){
	.grid{ gap:16px }
	.countdown{ gap:8px }
}


@media (prefers-reduced-motion: reduce){ .pulse::after{ display:none } }