:root{
      --bg0:#0b0f14;
      --bg1:#0f1622;
      --panel:#101a28;
      --card:#f6f8fb;
      --text:#e8eef6;
      --muted:#a7b4c6;
      --muted2:#6b7a92;
      --line:rgba(255,255,255,.10);
      --accent:#3b82f6;
      --accent2:#2563eb;
      --success:#22c55e;
      --shadow: 0 18px 50px rgba(0,0,0,.35);
      --shadow2: 0 10px 28px rgba(0,0,0,.25);
      --radius:16px;
      --radius2:14px;
      --max: 1120px;
      --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.25), transparent 60%),
        radial-gradient(900px 520px at 80% 20%, rgba(34,197,94,.14), transparent 60%),
        linear-gradient(180deg, #0b0f14 0%, #0b0f14 35%, #0a0e13 100%);
      min-height:100vh;
    }

    a{color:inherit; text-decoration:none}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}

    /* Top nav */
    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.65));
      border-bottom:1px solid var(--line);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .logo{
      width:34px; height:34px; border-radius:10px;
      background:conic-gradient(from 180deg, #3b82f6, #60a5fa, #22c55e, #3b82f6);
      box-shadow:0 10px 30px rgba(59,130,246,.18);
    }
    .navlinks{display:flex; gap:18px; font-weight:600; color:var(--muted);}
    .navlinks a{padding:8px 10px; border-radius:10px;}
    .navlinks a.active{color:var(--text); background:rgba(255,255,255,.06);}

    /* Hero */
    .hero{
      padding:44px 0 18px;
    }
    .hero h1{
      margin:0 0 14px;
      font-size: clamp(34px, 5vw, 54px);
      line-height:1.05;
      letter-spacing:-.8px;
    }
    .hero p{
      margin:0;
      color:var(--muted);
      max-width: 74ch;
      font-size: 16px;
      line-height:1.6;
    }

    .controls{
      margin-top:22px;
      display:flex;
      gap:14px;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Search */
    .search{
      flex: 1 1 320px;
      display:flex; align-items:center; gap:10px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      border-radius:14px;
      padding:12px 14px;
      box-shadow: var(--shadow2);
    }
    .search svg{opacity:.9}
    .search input{
      width:100%;
      background:transparent;
      border:0;
      outline:none;
      color:var(--text);
      font-size:15px;
    }
    .search input::placeholder{color:rgba(167,180,198,.75)}

    /* Tabs */
    .tabs{
      display:flex;
      gap:10px;
      flex: 0 0 auto;
      padding:6px;
      border-radius:14px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
    }
    .tab{
      border:0;
      background:transparent;
      color:var(--muted);
      font-weight:700;
      padding:10px 12px;
      border-radius:12px;
      cursor:pointer;
      transition: .15s ease;
      white-space:nowrap;
    }
    .tab:hover{color:var(--text); background:rgba(255,255,255,.05)}
    .tab.active{color:var(--text); background:rgba(59,130,246,.18); border:1px solid rgba(59,130,246,.25);}

    /* Grid */
    main{padding: 18px 0 46px;}
    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
    }
    @media (max-width: 980px){
      .grid{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 620px){
      .grid{grid-template-columns: 1fr;}
    }

    /* Card */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,248,251,.92));
      color:#0b1220;
      border-radius: var(--radius);
      padding:18px 18px 16px;
      box-shadow: var(--shadow);
      border:1px solid rgba(0,0,0,.06);
      position:relative;
      overflow:hidden;
      min-height: 190px;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 26px 70px rgba(0,0,0,.35);
    }
    .card .top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .icon{
      width:34px; height:34px;
      border-radius:12px;
      background: rgba(15,23,42,.06);
      display:grid; place-items:center;
      border:1px solid rgba(15,23,42,.08);
    }
    .title{
      margin:10px 0 6px;
      font-size: 18px;
      font-weight: 900;
      letter-spacing:-.2px;
    }
    .desc{
      margin:0 0 12px;
      color:#4b5b73;
      font-size: 13.6px;
      line-height:1.45;
      min-height: 40px;
    }
    .meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top: 10px;
    }
    .updated{
      color:#64748b;
      font-size: 12px;
      font-weight:700;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius: 999px;
      background: rgba(34,197,94,.14);
      border:1px solid rgba(34,197,94,.22);
      color:#0f5132;
      font-weight:900;
      font-size: 11px;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .badge span{
      display:inline-block;
      width:10px; height:10px;
      border-radius:999px;
      background: var(--success);
      box-shadow:0 0 0 3px rgba(34,197,94,.18);
    }

    .cta{
      margin-top: 12px;
      display:flex;
      justify-content:flex-end;
    }
    .btn{
      border:0;
      cursor:pointer;
      background: var(--accent);
      color:white;
      font-weight:900;
      font-size: 12px;
      padding:10px 14px;
      border-radius: 999px;
      letter-spacing:.3px;
      box-shadow: 0 10px 22px rgba(59,130,246,.25);
      transition:.15s ease;
    }
    .btn:hover{background: var(--accent2); transform: translateY(-1px);}
    .btn:active{transform: translateY(0px);}

    /* Empty state */
    .empty{
      display:none;
      margin:28px 0 0;
      padding:18px;
      border-radius:14px;
      border:1px dashed rgba(255,255,255,.18);
      color:var(--muted);
      background: rgba(255,255,255,.04);
    }

    /* Footer */
    footer{
      border-top:1px solid var(--line);
      padding:18px 0 26px;
      color:var(--muted);
      background: rgba(0,0,0,.12);
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .foot a{
      color:var(--muted);
      font-weight:700;
    }
    .foot a:hover{color:var(--text)}
    .small{font-size:12px; opacity:.85}