:root{
  --ink:#0b0e13;
  --muted:#5f6b7a;
  --card:#0f172a;
  --line:rgba(255,255,255,.12);

  --brand:#ffc400;
  --c1:#22c55e; /* green */
  --c2:#2563eb; /* cobalt */
  --c3:#ef4444; /* red */
  --c4:#06b6d4; /* teal */
  --c5:#a855f7; /* violet */
  --grad:conic-gradient(from 180deg at 50% 50%, rgba(255,196,0,.35), rgba(37,99,235,.28), rgba(6,182,212,.28), rgba(168,85,247,.28), rgba(239,68,68,.28), rgba(255,196,0,.35));
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fafafa,#eef2ff 60%, #ffffff);
  position:relative;
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; z-index:-1; filter:blur(40px); opacity:.7; pointer-events:none}
.blob{position:absolute; width:520px; height:520px; border-radius:50%; background:var(--grad); mix-blend-mode:multiply}
.b1{top:-160px; left:-120px}
.b2{bottom:-220px; right:-160px}
.b3{top:40%; left:50%; transform:translate(-40%,-40%); width:620px; height:620px; opacity:.5}

.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.88));
  border-bottom:3px solid var(--brand);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.3px}
.badge{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--brand); color:#111; box-shadow:0 10px 24px rgba(255,196,0,.4)}
.nav{display:flex; gap:12px; margin-left:auto}
.nav a{color:#0b0e13; text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600}
.nav a:hover{background:rgba(37,99,235,.10)}

.wrap{max-width:1160px; margin:0 auto; padding:24px 16px 48px}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:end; margin:10px 0 20px}
.hero .title{font-size:38px; line-height:1.15; margin:0 0 4px; background:linear-gradient(90deg,#0b0e13, #2563eb 40%, #06b6d4 70%, #ffc400); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:0; color:#223}
.hero .panel{border-radius:16px; padding:14px; background:linear-gradient(180deg,#ffffffcc,#ffffffaa); border:1px solid #e5e7eb; box-shadow:0 18px 40px rgba(2,6,23,.08)}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid{grid-template-columns:1fr} .hero{grid-template-columns:1fr} }

.card{
  position:relative;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid #e6e8ee;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:5px;
  background:linear-gradient(90deg,var(--c2),var(--c4),var(--brand),var(--c5));
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(2,6,23,.12)}
.card h3{margin:0 0 6px; font-size:20px}
.card p{margin:0; color:#3a3f47}
.card .act{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}

.btn{display:inline-block; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:700; color:#0b0e13; border:1px solid #e5e7eb; background:linear-gradient(90deg,#ffc400,#fbbf24)}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:linear-gradient(90deg,#ffffff,#f8fafc)}

.table{width:100%; border:1px solid #e6e8ee; border-radius:14px; overflow:hidden; border-collapse:separate; border-spacing:0; background:#fff; box-shadow:0 10px 26px rgba(2,6,23,.06)}
.table th,.table td{padding:12px 12px; border-bottom:1px solid #edf1f7; text-align:left; vertical-align:top}
.table th{background:linear-gradient(90deg,#2563eb,#06b6d4); color:#fff; font-weight:800}
.table tr:last-child td{border-bottom:none}

.kit{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0}
.tag{padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#0b0e13; border:1px solid #e5e7eb; background:linear-gradient(90deg,#e0f2fe,#fef9c3)}

.foot{border-top:1px solid #e6e8ee; padding:16px; color:#334155; background:linear-gradient(180deg,#fff,#f8fafc)}
.mono{font-family:ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; color:#475569}