:root{

  --bg:#0f172a;
  --card:#1e293b;
  --text:#f8fafc;
  --secondary:#94a3b8;
  --accent:#f59e0b;

}

body.light{

  --bg:#f1f5f9;
  --card:#ffffff;
  --text:#111827;
  --secondary:#475569;
  --accent:#f59e0b;

}

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

body{

  min-height:100vh;

  font-family:Arial,Helvetica,sans-serif;

  background:var(--bg);

  color:var(--text);

  text-align:center;

  padding:20px;

  transition:
    background .2s,
    color .2s;

}

/* =========================
   HEADER
========================= */

.header{

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  margin-bottom:30px;

}

.menu-btn{

  position:absolute;

  right:15px;

  font-size:24px;

  cursor:pointer;

  padding:5px 10px;

}

/* =========================
   MENU
========================= */

.menu{

  position:fixed;

  top:60px;

  right:15px;

  background:var(--card);

  border-radius:10px;

  padding:10px;

  display:none;

  flex-direction:column;

  gap:4px;

  box-shadow:0 10px 30px rgba(0,0,0,.4);

  z-index:1000;

}

.menu a,
.menu button{

  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 12px;

  width:100%;

  background:none;

  border:none;

  color:var(--text);

  text-decoration:none;

  text-align:left;

  font-size:15px;

  cursor:pointer;

  border-radius:6px;

}

.menu a:hover,
.menu button:hover{

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

}

body.light .menu a:hover,
body.light .menu button:hover{

  background:rgba(0,0,0,.08);

}

/* =========================
   CONTENT
========================= */

.wrapper{

  min-height:calc(100vh - 80px);

  display:flex;

  align-items:center;

  justify-content:center;

}

.card{

  width:100%;

  max-width:700px;

  background:var(--card);

  border-radius:20px;

  padding:50px 30px;

  box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.logo{

  font-size:70px;

  margin-bottom:20px;

}

h1{

  font-size:3rem;

  margin-bottom:15px;

}

.subtitle{

  font-size:1.2rem;

  color:var(--secondary);

  margin-bottom:35px;

}

.badge{

  display:inline-block;

  background:var(--accent);

  color:#111827;

  font-weight:bold;

  padding:10px 18px;

  border-radius:999px;

  margin-bottom:30px;

}

.features{

  text-align:left;

  max-width:420px;

  margin:0 auto;

  line-height:1.9;

}

footer{

  margin-top:35px;

  font-size:.9rem;

  color:var(--secondary);

}