:root{
      --primary:#007B8C;
      --secondary:#F2C94C;
      --dark:#0f172a;
      --border:rgba(255,255,255,0.12);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --shadow:0 18px 40px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Ubuntu,sans-serif;
      background:var(--dark);
      color:var(--text);
      line-height:1.65;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    h1,h2,h3,h4,p,span,a,li,div{
      overflow-wrap:anywhere;
      word-break:break-word;
      hyphens:auto;
    }

    .topbar{
      position:sticky; top:0; z-index:50;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding:14px 18px;
      background:rgba(15,23,42,.92);
      border-bottom:1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    .topbar a{
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.9px;
      font-size:.85rem;
      color:#fff;
    }
    .topbar a:hover{color:var(--secondary)}
    .topbar .right{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

    header{
      padding:72px 18px 46px;
      text-align:center;
      background:radial-gradient(circle at 50% 20%, #1f2937 0%, #0f172a 55%, #0b1224 100%);
      border-bottom:1px solid var(--border);
    }
    h1{
      font-family:'Montserrat',sans-serif;
      margin:0 auto;
      max-width:1100px;
      font-size:2.4rem;
      font-weight:900;
      letter-spacing:.5px;
      line-height:1.2;
    }
    .sub{
      margin:14px auto 0;
      max-width:900px;
      color:var(--muted);
      font-size:1.05rem;
    }

    .tools{
      max-width:1200px;
      margin: -22px auto 14px;
      padding:0 18px;
      position:relative;
      z-index:10;
    }
    .search{
      display:flex; gap:10px; align-items:center;
      background:rgba(255,255,255,.06);
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px 14px;
      box-shadow:var(--shadow);
      min-width:0;
    }
    .search input{
      width:100%;
      border:0; outline:none;
      background:transparent;
      color:#fff;
      font-size:1rem;
      font-weight:650;
      min-width:0;
    }
    .search .hint{
      color:var(--muted);
      font-size:.9rem;
      white-space:nowrap;
      flex-shrink:0;
    }

    .wrap{
      max-width:1200px;
      margin: 10px auto 64px;
      padding:0 18px;
    }
    .section-title{
      margin: 22px 0 10px;
      font-family:'Montserrat',sans-serif;
      font-weight:900;
      font-size:1.1rem;
      letter-spacing:.4px;
      color:#fff;
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
      gap:18px;
    }

    .card{
      background:rgba(255,255,255,.05);
      border:1px solid var(--border);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 12px 26px rgba(0,0,0,.28);
      transition:.18s ease;
      display:flex; flex-direction:column;
      min-height: 240px;
      min-width:0;
    }
    .card:hover{
      transform: translateY(-4px);
      border-color: rgba(242,201,76,.55);
      box-shadow:0 18px 40px rgba(0,0,0,.40);
    }

    .hero{
      height: 84px;
      background: linear-gradient(45deg, #0f172a, #334155);
      flex-shrink:0;
      position:relative;
      overflow:hidden;
    }
    .hero.hasimg{ background-size:cover; background-position:center; }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(90deg, rgba(15,23,42,.85), rgba(15,23,42,.35));
    }

    .content{
      padding:16px 16px 18px;
      display:flex; flex-direction:column;
      gap:10px;
      flex:1;
      min-width:0;
    }
    .tag{
      display:inline-flex;
      width:max-content;
      max-width:100%;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.18);
      font-weight:900;
      font-size:.72rem;
      letter-spacing:.6px;
      text-transform:uppercase;
      color:#fff;
    }
    .title{
      font-family:'Montserrat',sans-serif;
      font-weight:900;
      font-size:1.12rem;
      line-height:1.25;
      margin:0;
      color:#fff;
      min-width:0;
    }
    .desc{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      flex:1;
      min-width:0;
    }
    .more{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:900;
      letter-spacing:.4px;
      text-transform:uppercase;
      font-size:.82rem;
      color:var(--secondary);
      flex-shrink:0;
    }
    .card:hover .more{color:#fff}

    .vip{ border:2px solid rgba(242,201,76,.85); }
    .vip .hero{ background: linear-gradient(45deg, #0f172a, #0ea5e9); }

    footer{
      border-top:1px solid var(--border);
      padding:34px 18px;
      text-align:center;
      color:var(--muted);
      font-size:.9rem;
      background:#070c18;
    }
    footer a{color:#fff;font-weight:800}
    footer a:hover{color:var(--secondary)}

    @media (max-width:520px){
      h1{font-size:1.85rem}
      .topbar{flex-direction:column; align-items:flex-start}
      .topbar .right{width:100%; justify-content:flex-start}
      .search .hint{display:none}
    }