/* Home page styles — improved, accessible, and responsive */
:root{
	--bg-900: #0a0e1a;
	--bg-800: #0f1425;
	--nebula-500: #3f5a99;
	--nebula-300: #7aa7d8;
	--text-100: #e8f9ff;
	--muted: #a0b0ce;
	--card-bg: rgba(30,40,60,0.25);
	--glass: rgba(255,255,255,0.03);
	--radius: 12px;
}

html, body {
    overflow-x: hidden; /* Prevent side-scrolling */
}

.home-hero{
	max-width:1180px;
	margin:32px auto;
	padding:28px 18px;
    margin-top: 10px;
}

.hero-inner{
	display:grid;
	grid-template-columns: 1fr 420px;
	gap:28px;
	align-items:center;
}

.hero-left{
	padding:12px 8px;
}

.hero-logo{
	width:96px;height:96px;border-radius:18px;display:block;
	box-shadow:0 10px 30px rgba(63,0,255,0.12);border:1px solid rgba(163,247,255,0.04);
}

.hero-left h1{
	font-family:'Bebas Neue', cursive;font-size:48px;margin:10px 0 6px;color:var(--nebula-300);
	line-height:1;
}

.hero-sub{color:var(--text-100);font-size:17px;margin-bottom:18px;max-width:62ch}

.hero-ctas{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.btn.primary{background: #4a7ac5;color: #f0f7ff;box-shadow: 0 4px 12px rgba(0,0,0,0.3);}
.btn.primary:hover {background: #3a6fb5;}
.btn.ghost{background:transparent;border:1px solid rgba(163,247,255,0.08);color:var(--nebula-300)}
.btn:focus{outline:3px solid rgba(163,247,255,0.12);outline-offset:3px}

.hero-right .hero-card{background:var(--glass);padding:10px;border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.hero-right img{width:100%;height:auto;border-radius:10px;display:block}

/* Hero polish */
.home-hero{position:relative;overflow:visible}
.home-hero::before{content:'';position:absolute;inset:-40px -10% auto -10%;height:240px;background:radial-gradient(ellipse at center, rgba(163,247,255,0.06), transparent 30%);filter:blur(30px);pointer-events:none;z-index:0}
.hero-inner > *{position:relative;z-index:1}
.hero-left h1{font-size:56px;letter-spacing:0.5px}
.hero-sub{font-size:18px;opacity:0.95}
.btn.primary{padding:12px 20px;font-size:1rem}
.btn.ghost{padding:12px 18px}
.btn.outline{padding:12px 14px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text-100)}
.hero-ctas .btn{transition:transform .12s ease, box-shadow .12s ease}
.hero-ctas .btn:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(63,0,255,0.12)}

/* hero-left animate-in */
.hero-left.animate-in{opacity:0;transform:translateY(6px);animation:heroIn .7s ease forwards}
@keyframes heroIn{to{opacity:1;transform:none}}

.features{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,300px);justify-content:center;gap:12px}
.feature{background:rgba(30, 40, 60, 0.25);width:300px;height:300px;box-sizing:border-box;padding:14px;border-radius:10px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:transform .16s ease,box-shadow .16s ease;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.feature:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.4)}
.feature-icon{width:120px;height:120px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;background:rgba(30, 40, 60, 0.15);box-shadow:inset 0 0 8px rgba(0,0,0,0.2);overflow:hidden}
.feature-icon img{width:100%;height:100%;object-fit:cover;display:block}
.feature h3{color:var(--nebula-300);margin-bottom:6px;font-size:1rem}
.feature p{color:var(--muted);font-size:13px;flex:1}


/* small helpers */
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* Responsive */
@media (max-width:980px){.hero-inner{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.features{grid-template-columns:1fr}.hero-left h1{font-size:34px}.hero-logo{width:72px;height:72px}}

/* subtle animation for entrance */
@keyframes floatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home-hero, .feature, .hero-card{animation:floatIn .45s ease both}