:root {
  --bg: #0b0c10;
  --fg: #e6e6e6;
  --muted: #a0a0a0;
  --accent: #ff6a00;
  --accent-2: #ff2e2e;
  --card: #131419;
  --border: #23242b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
}

.container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(11, 12, 16, 0.7);
  backdrop-filter: blur(8px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.brand {
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo { width: 28px; height: 28px; display: inline-block; }
.nav a {
  color: var(--fg);
  text-decoration: none;
  margin-left: 16px;
}
.nav a:hover { color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 24px 0 48px;
  color: var(--muted);
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main.container { flex: 1; }
.site-footer { margin-top: auto; }
.made-by { margin-top: 8px; }
.made-by a { color: var(--fg); text-decoration: none; }
.made-by a:hover { color: var(--accent); }

main {
  padding: 24px 0;
}

.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.badge-preview {
  display: inline-block;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }

.hero-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-visual img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.feature-list { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.feature { list-style: disc; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-card img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 10px;
  background: #222;
}
.user-card a { color: var(--fg); text-decoration: none; font-weight: 700; }
.user-card a:hover { color: var(--accent); }
.muted { color: var(--muted); }

.verified-icon { width: 18px; height: 18px; display: inline-block; margin-left: 6px; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; }
.verified-icon.blue { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 22" aria-label="Verified account" role="img" xmlns="http://www.w3.org/2000/svg"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" fill="%230098ff"></path></g></svg>'); }
.verified-icon.yellow { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 22" aria-label="Verified account" role="img" xmlns="http://www.w3.org/2000/svg"><g><linearGradient gradientUnits="userSpaceOnUse" id="a" x1="4.411" x2="18.083" y1="2.495" y2="21.508"><stop offset="0" stop-color="%23f4e72a"></stop><stop offset=".539" stop-color="%23cd8105"></stop><stop offset=".68" stop-color="%23cb7b00"></stop><stop offset="1" stop-color="%23f4ec26"></stop><stop offset="1" stop-color="%23f4e72a"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="b" x1="5.355" x2="16.361" y1="3.395" y2="19.133"><stop offset="0" stop-color="%23f9e87f"></stop><stop offset=".406" stop-color="%23e2b719"></stop><stop offset=".989" stop-color="%23e2b719"></stop></linearGradient><g clip-rule="evenodd" fill-rule="evenodd"><path d="M13.324 3.848L11 1.6 8.676 3.848l-3.201-.453-.559 3.184L2.06 8.095 3.48 11l-1.42 2.904 2.856 1.516.559 3.184 3.201-.452L11 20.4l2.324-2.248 3.201.452.559-3.184 2.856-1.516L18.52 11l1.42-2.905-2.856-1.516-.559-3.184zm-7.09 7.575l3.428 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z" fill="url(%23a)"></path><path d="M13.101 4.533L11 2.5 8.899 4.533l-2.895-.41-.505 2.88-2.583 1.37L4.2 11l-1.284 2.627 2.583 1.37.505 2.88 2.895-.41L11 19.5l2.101-2.033 2.895.41.505-2.88 2.583-1.37L17.8 11l1.284-2.627-2.583-1.37-.505-2.88zm-6.868 6.89l3.429 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z" fill="url(%23b)"></path><path d="M6.233 11.423l3.429 3.428 5.65-6.17.038-.033-.005 1.398-5.683 6.206-3.429-3.429-.003-1.405.005.003z" fill="%23d18800"></path></g></g></svg>'); }
.verified-icon.gray { background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 22" aria-label="Verified account" role="img" xmlns="http://www.w3.org/2000/svg"><g><path clip-rule="evenodd" d="M12.05 2.056c-.568-.608-1.532-.608-2.1 0l-1.393 1.49c-.284.303-.685.47-1.1.455L5.42 3.932c-.832-.028-1.514.654-1.486 1.486l.069 2.039c.014.415-.152.816-.456 1.1l-1.49 1.392c-.608.568-.608 1.533 0 2.101l1.49 1.393c.304.284.47.684.456 1.1l-.07 2.038c-.027.832.655 1.514 1.487 1.486l2.038-.069c.415-.014.816.152 1.1.455l1.392 1.49c.569.609 1.533.609 2.102 0l1.393-1.49c.283-.303.684-.47 1.099-.455l2.038.069c.832.028 1.515-.654 1.486-1.486L18 14.542c-.015-.415.152-.815.455-1.099l1.49-1.393c.608-.568.608-1.533 0-2.101l-1.49-1.393c-.303-.283-.47-.684-.455-1.1l.068-2.038c.029-.832-.654-1.514-1.486-1.486l-2.038.07c-.415.013-.816-.153-1.1-.456zm-5.817 9.367l3.429 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z" fill="%23829aab" fill-rule="evenodd"></path></g></svg>'); }
.search {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}
.search input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f1015;
  color: var(--fg);
  width: 100%;
  min-width: 100%;
}

.proofs { display: grid; gap: 12px; }
.proof { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.proof a { color: var(--accent); }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
}