:root{
	--bg: #0b1014;
	--panel: #0f1720;
	--panel-2: #0c141b;
	--text: #dbe7ea;
	--muted: #a6bac3;
	--primary: #16a34a;
	--primary-2:#22c55e;
	--card:#0e141b;
	--stroke:#1a2631;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--text);
	background: radial-gradient(1000px 500px at 20% -20%, #12331d 0, transparent 60%),
							radial-gradient(1000px 500px at 80% -20%, #10273a 0, transparent 60%),
							var(--bg);
	min-height: 100vh;
	line-height: 1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;backdrop-filter: blur(8px); background:#0b1014cc; border-bottom:1px solid var(--stroke); z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:0.3px}
nav a{color:var(--muted);text-decoration:none;margin-left:16px}
nav a.active, nav a:hover{color:var(--text)}

.hero{padding:72px 0 48px;border-bottom:1px solid var(--stroke)}
.hero-inner{max-width:820px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px;font-weight:800}
.hero .lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:10px;border:1px solid var(--stroke);text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-2));color:#06240f;border:1px solid #27b058}
.btn-ghost{background:transparent;color:var(--text)}
.btn[disabled]{opacity:0.6;cursor:not-allowed}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.emoji-img{width:1.15em;height:1.15em;vertical-align:-0.2em;image-rendering:-webkit-optimize-contrast}
.emoji-hero{width:1.2em;height:1.2em;vertical-align:-0.15em}

.features{padding:40px 0}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:16px}
.card{background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid var(--stroke);border-radius:14px;padding:16px}
.feature .feature-emoji{font-size:28px;margin-bottom:8px}
.card:hover{border-color:#244356}

.promo{padding:48px 0;border-top:1px solid var(--stroke)}
.promo-inner{max-width:740px}
.promo h2{margin:0 0 8px}

.store-hero{padding:48px 0 16px;border-bottom:1px solid var(--stroke)}
.packages{padding:24px 0}
.package-card{display:flex;flex-direction:column;background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid var(--stroke);border-radius:14px;padding:16px}
.package-card h3{margin:0 0 8px}
.package-badge{display:inline-flex;gap:6px;align-items:center;color:#c8f8d6;background:#06240f;border:1px solid #1a5b34;border-radius:999px;font-size:12px;padding:4px 8px;margin-bottom:10px}
.package-badge .emoji-icon{width:16px;height:16px;image-rendering: -webkit-optimize-contrast; border-radius:3px}
.package-price{font-size:24px;font-weight:800;margin:8px 0 12px}
.package-details{color:var(--muted);font-size:14px}
.package-cta{margin-top:auto}
.package-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.package-card:hover{transform:translateY(-2px);border-color:#244356;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* reveal on scroll */
.reveal-on-scroll{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
.small{font-size:12px}
.muted{color:var(--muted)}
.site-footer{padding:28px 0;border-top:1px solid var(--stroke);margin-top:32px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.emoji{filter: drop-shadow(0 2px 0 rgba(0,0,0,.2));}

.footer-links{display:flex;gap:8px;align-items:center}
.footer-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--stroke);border-radius:999px;text-decoration:none;color:var(--muted);background:linear-gradient(180deg, var(--panel), var(--panel-2))}
.footer-links a:hover{color:var(--text);border-color:#244356}

/* small media tweaks */
@media (hover:hover){
	.package-cta .btn-primary:hover{filter:brightness(1.05)}
}

/* username verification */
.verify-row{display:flex;gap:8px;flex-wrap:wrap}
.verify-row input{flex:1 1 240px;min-width:140px;background:var(--panel-2);border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;color:var(--text)}
.verify-status{margin-top:6px}
.is-valid{color:#9af8b3}
.is-invalid{color:#ffb4b4}
.package-card .btn[aria-disabled="true"]{opacity:0.6;pointer-events:none}
.verify-ack{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--muted)}

/* simple modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:50}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,10,14,.6);backdrop-filter:blur(2px)}
.modal-card{position:relative;max-width:420px;width:92%;background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid var(--stroke);border-radius:14px;padding:16px;box-shadow:0 20px 48px rgba(0,0,0,.35)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* legal content pages */
.legal-content{padding:32px 0 48px}
.legal-content h1{margin-bottom:16px}
.legal-content h2{margin:32px 0 16px;color:var(--primary-2);border-bottom:1px solid var(--stroke);padding-bottom:8px}
.legal-content h3{margin:24px 0 12px;color:var(--text)}
.legal-content p{margin:12px 0;line-height:1.7}
.legal-content ul, .legal-content ol{margin:12px 0;padding-left:24px}
.legal-content li{margin:8px 0}
.legal-content a{color:var(--primary-2);text-decoration:none}
.legal-content a:hover{color:var(--primary);text-decoration:underline}
.legal-content strong{color:var(--text)}

/* faq section */
.faq{padding:32px 0}
.faq h2{margin-bottom:24px}
.faq details{margin:12px 0;border:1px solid var(--stroke);border-radius:10px;background:linear-gradient(180deg, var(--panel), var(--panel-2))}
.faq summary{padding:16px;cursor:pointer;font-weight:600;border-radius:10px}
.faq summary:hover{background:rgba(255,255,255,0.05)}
.faq details[open] summary{border-bottom:1px solid var(--stroke);border-radius:10px 10px 0 0}
.faq details p{margin:0;padding:16px;color:var(--muted);line-height:1.6}