:root{
  --black:#090809; --off-red:#f40000; --vermilion:#f44e3f; --salmon:#f4796b; --coral:#f4998d; --muted:#c4a5a0;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--black),#1a0a0a); color:#f5f5f5; font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:64px 20px}
.badge{display:inline-block;background:rgba(244,78,63,.15);color:var(--salmon);border:1px solid rgba(244,78,63,.4);padding:6px 10px;border-radius:999px;font-size:.8rem;margin-bottom:16px}
.hero{text-align:center;padding:40px 0 20px}
.hero h1{font-size:56px; line-height:1.05; margin:10px 0 8px; letter-spacing:-.02em; font-weight:700; background:linear-gradient(135deg,var(--vermilion),var(--salmon)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.tagline{color:var(--muted); font-size:18px; margin:0 0 24px}
.features{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:40px 0 24px}
.card{background:rgba(244,0,0,.08); border:1px solid rgba(244,78,63,.2); padding:20px; border-radius:16px; transition:all .3s ease}
.card:hover{border-color:var(--vermilion); transform:translateY(-2px); box-shadow:0 8px 20px rgba(244,78,63,.15)}
.card h3{margin:0 0 8px; color:var(--salmon); font-weight:600}
.card p{margin:0; color:#d0d0d0}
.about{margin:40px 0; text-align:center; max-width:700px; margin-left:auto; margin-right:auto}
.about h2{font-size:32px; margin:0 0 16px; color:var(--salmon); font-weight:600}
.about p{color:var(--muted); font-size:17px; line-height:1.6}
.foot{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:48px; color:var(--muted); font-size:14px}
.foot a{color:var(--salmon); text-decoration:none; border-bottom:1px solid rgba(244,121,107,.4); transition:border-color .2s}
.foot a:hover{border-color:var(--vermilion)}