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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:#020617;
color:#fff;
min-height:100vh;
overflow-x:hidden;
}

.runtime-shell{
min-height:100vh;
display:flex;
flex-direction:column;
background:
radial-gradient(circle at top,#0f172a 0%,#020617 55%);
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
}

.logo{
font-size:24px;
font-weight:800;
letter-spacing:-1px;
}

.logo span{
color:#38bdf8;
}

.install-btn{
border:none;
background:#0ea5e9;
color:#fff;
padding:10px 18px;
border-radius:14px;
font-weight:700;
font-size:14px;
cursor:pointer;
box-shadow:0 10px 25px rgba(14,165,233,.35);
}

.hero{
flex:1;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.hero-content{
width:100%;
max-width:520px;
}

.badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
font-size:12px;
font-weight:700;
letter-spacing:.4px;
margin-bottom:24px;
backdrop-filter:blur(10px);
}

h1{
font-size:58px;
line-height:.95;
font-weight:900;
letter-spacing:-3px;
margin-bottom:22px;
}

.subtitle{
font-size:18px;
line-height:1.6;
color:#cbd5e1;
margin-bottom:34px;
}

.search-shell{
display:flex;
align-items:center;
gap:12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
padding:12px;
border-radius:24px;
backdrop-filter:blur(14px);
margin-bottom:34px;
}

.search-input{
flex:1;
background:transparent;
border:none;
outline:none;
color:#fff;
font-size:16px;
padding:10px;
}

.search-input::placeholder{
color:#94a3b8;
}

.search-btn{
border:none;
background:#38bdf8;
color:#020617;
padding:14px 22px;
border-radius:16px;
font-weight:800;
cursor:pointer;
}

.quick-actions{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.action-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
min-height:120px;
backdrop-filter:blur(14px);
transition:.25s ease;
}

.action-card:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.09);
}

.icon{
font-size:30px;
margin-bottom:12px;
}

.action-card span{
font-size:15px;
font-weight:700;
}

@media(min-width:768px){

.hero-content{
max-width:920px;
}

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

h1{
font-size:88px;
}

.subtitle{
font-size:22px;
max-width:720px;
}

.search-shell{
padding:16px;
}

.search-input{
font-size:18px;
}

}