:root{
      --bg: #0f1724;
      --card: #0b1220;
      --muted: #9aa6b2;
      --accent: #1fb6ff;
      --glass: rgba(255,255,255,0.04);
      --radius: 12px;
      color-scheme: dark;
    }

    *{box-sizing:border-box}
    html,body{height:100%;overflow-x: hidden;}
    body{
      
      margin:0;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background: linear-gradient(180deg,#071027 0%, #07111a 60%);
      color: #e6eef6;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      -webkit-tap-highlight-color:transparent;
      line-height:1.4;
    }

    /* container */
    .container{max-width:1200px;margin:0 auto;padding:2rem;}

    /* Header */
    header.header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:40;padding:0.6rem 0}
    .nav{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
    .brand img {
      width: 100px;
    }
    nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
    nav a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:8px}
    nav a:hover{color:var(--accent);background:var(--glass)}
    .containsBtn {
      display: flex;
      gap: 5px;
    }

    .containsBtn a {
      font-size: 16px;
      text-decoration: none;
      text-align: center;
      width: 120px;
      padding: 10px 20px;
      border-radius: 3px;
      border: none;
      background-color: #1fb6ff;
      color: #000000;
      cursor: pointer;
    }

    .accountButton {
      width: 50px;
      height: 50px;
      border: none;
      background: none;
      cursor: pointer;
    }

    .accountButton i {
      font-size: 40px;
      color: #ffffff;
      
    }
    /* HERO */
    .hero{
      height: 900px;
      display:flex;align-items:center;padding:4rem 0;gap:2rem;position:relative;overflow:hidden;
    }

    #ranking table th, tr{
      text-align: center;
    }

    .hero-left{flex:1;max-width:640px}
    .kicker{display:inline-block;background:rgba(255,255,255,0.04);padding:.3rem .6rem;border-radius:999px;color:var(--accent);font-weight:600;font-size:.9rem}
    h1.title{font-size:2.4rem;margin:.6rem 0 1rem;line-height:1.05}
    p.lead{color:var(--muted);margin:0 0 1.4rem}
    .cta{display:flex;gap:.8rem}
    .btn{background:linear-gradient(90deg,var(--accent),#3bd1ff);color:#07111a;padding:.65rem 1rem;border-radius:10px;border:0;font-weight:700;cursor:pointer}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    /* hero-right image/visual */
    .hero-right{flex:1;display:flex;align-items:center;justify-content:center}
    .visual{width:100%;max-width:520px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);box-shadow:0 12px 40px rgba(2,6,23,0.7);padding:1rem}
    .visual img{width:100%;height:320px;object-fit:cover;border-radius:12px}

    /* quick-stats */
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
    .stat{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;border-radius:12px;text-align:center}
    .stat .num{font-weight:700;font-size:1.35rem}
    .stat .label{color:var(--muted);font-size:.9rem}

    /* sections */
    section{padding:4rem 0}
    .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
    .section-title h2{margin:0}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

    /* cards */
    .card-min{background:linear-gradient(180deg,rgba(12, 8, 66, 0.541),transparent);padding:1.2rem;border-radius:12px}
    .card-min h4{margin:.4rem 0}
    .card-min p{color:var(--muted);margin:0}

    /* table */
    table{width:100%;border-collapse:collapse;background:transparent}
    thead th{color:var(--muted);text-align:left;padding:.8rem;border-bottom:1px solid rgba(255,255,255,0.03)}
    tbody td{padding:.9rem 0;border-bottom:1px dashed rgba(255,255,255,0.03)}

    /* responsive grid for features/articles */
    .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

    /* footer */
    footer{padding:2.4rem 0;color:var(--muted)}
    .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

    /* small screens */
    @media (max-width: 1200px){
      .grid-3{grid-template-columns:repeat(1,1fr)}
      .tiles{grid-template-columns:repeat(2,1fr)}
      .stats{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 620px){
      .hero{flex-direction:column;padding:2rem}
      .visual img{height:220px}
      .grid-3{grid-template-columns:1fr}
      .tiles{grid-template-columns:1fr}
      nav ul{display:none}

      .hero-right {
        display: none;
      }
    }

    /* subtle hover */
    .card-min:hover{transform:translateY(-6px);transition:all .25s ease;box-shadow:0 10px 30px rgba(2,6,23,0.6)}

    .card-min canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 280px;
}
@media (max-width: 768px) {
  .card-min canvas {
    max-height: 220px;
  }
}

@media (max-width: 1150px){
  .containsBtn {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
}

@media (max-width: 960px){
  nav {
    display: none;
  }
}


    /* dark toggle */
    .toggle{display:inline-flex;align-items:center;gap:.6rem}
    .small{font-size:.9rem;color:var(--muted)}

    /* helpers */
    .muted{color:var(--muted)}

    #btn-avaliations {
      height: 50px;
      width: 150px;
      border-radius: 4px;
      font-size: 16px;
      margin-left: 10px;
    }

    #btn-avaliations:hover {
      box-shadow: 0px 0px 10px 0px #1fb6ff;
    }