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

body{
  font-family: Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background: linear-gradient(
  135deg,
  #0f2027,
  #203a43,
  #2c5364
);
  color:#fff;
  min-height:100vh;
  overflow-x:hidden
}

/* ===== HEADER ===== */
header{
  text-align:center;
  padding:4rem 2rem;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.15)
}
header h1{
  font-size:3rem;
  font-weight:800;
  background:linear-gradient(45deg,#fff,#a8edea);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.header-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:2rem
}
.header-link{
  padding:.7rem 1.4rem;
  border-radius:50px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  transition:.3s
}
.header-link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.25)
}
.header-subtitle{
  margin-top:1.5rem;
  opacity:.9
}

a{
color: #ff5252;
}
/* ===== TABS ===== */
.tabs{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:center;
  gap:1rem;
  padding:1rem;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(20px)
}
.tabs button{
  padding:.9rem 2rem;
  border-radius:50px;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.3s
}
.tabs button.active{
  background:linear-gradient(135deg,#667eea,#764ba2);
  border-color:#fff
}
.tabs button:hover{
  transform:translateY(-2px)
}

/* ===== CONTENT ===== */
.container{max-width:2500px;margin:auto;padding:2rem}
.tab-content{display:none;animation:fade .5s ease}
.tab-content.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1}}

/* ===== ALERT ===== */
.alert{
  background:rgba(255,193,7,.2);
  border-left:5px solid #ffc107;
  padding:2rem;
  border-radius:16px
}
.alert h3{color:#ffd700;margin-bottom:1rem}
.alert code{
  background:rgba(0,0,0,.4);
  padding:.25rem .5rem;
  border-radius:6px
}

/* ===== DEVICE GRID ===== */
.device-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:2rem
}
.device{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  padding:2rem;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.25);
  transition:.3s
}
.device:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,.4)
}
.device h3{margin-bottom:1rem;font-size:1.5rem}

/* TAG */
.tag{
  display:inline-block;
  padding:.4rem .8rem;
  border-radius:20px;
  background:rgba(255,255,255,.2);
  font-size:.8rem;
  margin-right:.4rem
}

/* BUG */
.bug{
  background:rgba(255,82,82,.2);
  border-left:4px solid #ff5252;
  padding:1rem;
  border-radius:10px;
  margin:1rem 0
}

/* BUTTON */
.btn-container{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{
  padding:.7rem 1.4rem;
  border-radius:50px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  transition:.3s
}
.btn:hover{transform:translateY(-2px)}
.btn-twrp{background:#4e73df}
.btn-orange{background:#fd7e14}
.btn-shrp{background:#6f42c1}

.button_d{
padding:.1rem 1rem;
  border-radius:7px;
  text-decoration:none;
  color:#000;
  font-weight:300;
  transition:.2s
}
.button_d:hover{transform:translateY(-2px)}
.btn-download{background:#00FFFF}
/* FOOTER */
footer{
  text-align:center;
  padding:2rem;
  background:rgba(0,0,0,.35);
  margin-top:3rem
}

@media(max-width:768px){
  header h1{font-size:2.1rem}
  .tabs{flex-wrap:wrap}
}