/* ===============================
   🔥 MINDSET ELITE CLEAN UI v2
================================ */

:root{

  /* BACKGROUNDS */
  --bg:#0a0f1c;
  --bg-soft:#111827;
  --card:#1a2336;

  /* PRIMARY */
  --primary:#00e0ff;
  --primary-soft:#00e0ff33;

  /* TEXT */
  --text:#ffffff;
  --text-soft:#cbd5e1;

  /* EXTRA (compatibilidade com suas páginas) */
  --cyan:#00e0ff;
  --panel:#1a2336;
  --stroke:rgba(255,255,255,.08);

  /* SHADOWS */
  --shadow-1:0 10px 25px rgba(0,0,0,.25);
  --shadow-2:0 20px 45px rgba(0,224,255,.25);

  /* RADIUS */
  --radius:18px;
  --radius-lg:18px;
  --radius-xl:24px;
}

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

html,body{
  height:100%;
}

body{
  font-family:'Orbitron',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ===============================
   NAVBAR
================================ */

.navbar{
  position:fixed;
  top:0;
  width:100%;
  height:70px;
  background:rgba(10,15,28,.85);
  backdrop-filter:blur(10px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  z-index:1000;
}

.navbar a{
  text-decoration:none;
  color:var(--text-soft);
  font-size:14px;
  transition:.2s;
}

.navbar a:hover{
  color:var(--primary);
}

/* ===============================
   CONTAINER
================================ */

.container{
  max-width:1200px;
  margin:auto;
  padding:110px 20px 100px;
}

/* ===============================
   FOOTER MOBILE
================================ */

.app-footer{
  position:fixed;
  bottom:0;
  width:100%;
  height:70px;
  background:rgba(10,15,28,.95);
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:1000;
}

.app-footer a{
  color:var(--text-soft);
  text-decoration:none;
  font-size:13px;
  transition:.2s;
}

.app-footer a:hover{
  color:var(--primary);
}

@media(min-width:769px){
  .app-footer{ display:none; }
}

@media(max-width:768px){
  .navbar{ display:none; }
}

/* ===============================
   BOTÕES
================================ */

.btn{
  background:var(--primary);
  color:#000;
  padding:14px 30px;
  border-radius:var(--radius);
  text-decoration:none;
  display:inline-block;
  font-weight:bold;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
}