:root{

--orange:#f57a3f;
--yellow:#f7b442;
--grey:#343740;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html,body{

height:100%;

}

body{

font-family:"Inter",sans-serif;
background:#1f2026;
overflow-x:hidden;
color:white;

}

#embers{

position:fixed;
inset:0;
width:100%;
height:100%;
z-index:0;

}

.overlay{

position:fixed;
inset:0;

background:
radial-gradient(circle at center,
rgba(0,0,0,.15),
rgba(0,0,0,.55));

z-index:1;

}

.hero{

position:relative;
z-index:2;

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

padding:60px 24px;

text-align:center;

}

.content{

max-width:900px;

}

.logo{

display:inline-block;

padding:10px 22px;

border-radius:999px;

font-weight:800;

letter-spacing:5px;

margin-bottom:30px;

}

h1{

font-size:clamp(3rem,8vw,5.5rem);

line-height:1.05;

margin-bottom:24px;

}

p{

font-size:1.3rem;

max-width:760px;

margin:auto;

color:#eeeeee;

}

.button{

display:inline-block;

margin-top:48px;

padding:18px 42px;

border-radius:10px;

background:var(--orange);

color:white;

text-decoration:none;

font-weight:700;

font-size:1.15rem;

transition:.25s;

box-shadow:0 12px 35px rgba(245,122,63,.4);

}

.button:hover{

background:var(--yellow);

color:#222;

transform:translateY(-3px);

box-shadow:0 15px 45px rgba(247,180,66,.55);

}

.cards{

margin-top:70px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:22px;

}

.card{

padding:28px;

background:rgba(255,255,255,.07);

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.08);

border-radius:16px;

font-size:1.05rem;

line-height:1.8;

transition:.25s;

}

.card:hover{

transform:translateY(-5px);

background:rgba(255,255,255,.12);

}