:root{--blue:#0a1fd1;--deep:#06128a;--navy:#050c4f;--orange:#ff8c1a;--orange-d:#e06f00;--bg:#eef2ff}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,sans-serif;color:#141a3a;background:var(--bg)}
header{background:radial-gradient(circle at 20% 40%,#2a4bff 0,var(--blue) 35%,var(--deep) 100%);color:#fff;padding:2rem 1rem;border-bottom:5px solid var(--orange)}
.hero{max-width:1100px;margin:auto;display:flex;gap:2rem;align-items:center}.byte{width:220px;height:220px;border-radius:50%;border:4px solid var(--orange);box-shadow:0 8px 30px rgba(0,0,0,.35);flex-shrink:0;display:block}
h1{margin:0;font-size:2.4rem}.tagline{color:var(--orange);font-weight:700;font-size:1.2rem;margin:.3rem 0}
main,footer{max-width:1100px;margin:auto}main{padding:1rem}h2{color:var(--deep);border-left:5px solid var(--orange);padding-left:.6rem}.small{font-size:.85rem;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.card{background:#fff;border:1px solid #d3dbff;border-top:4px solid var(--blue);border-radius:10px;padding:1rem;box-shadow:0 2px 6px rgba(10,31,209,.06)}.card h3{margin:.2rem 0;font-size:1.05rem;color:var(--navy)}
#soon .card{border-top-color:var(--orange)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;font-size:.9rem;margin:.5rem 0}.card dt{font-weight:600;color:#4a5280}.card dd{margin:0}
.tag{display:inline-block;background:#e3e8ff;color:var(--deep);border-radius:99px;padding:0 .5rem;font-size:.75rem;margin:0 .25rem .25rem 0}
.dl{font-weight:700;color:var(--orange-d)}.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}select,input,button{padding:.5rem;border:1px solid #b9c4f5;border-radius:6px;font:inherit}
button{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:700;cursor:pointer}button:hover{background:var(--orange-d)}
.box{background:linear-gradient(135deg,var(--blue),var(--deep));color:#fff;border-radius:12px;padding:1.2rem;margin:1.5rem 0}.box h2{color:#fff;margin-top:0}.box a{color:#ffb35c}
.promo{display:flex;gap:1.2rem;align-items:center}.promo img{border-radius:50%;border:3px solid var(--orange);flex-shrink:0}
footer{padding:2rem 1rem;font-size:.9rem;border-top:3px solid var(--orange)}a{color:var(--blue)}
@media(max-width:640px){.hero,.promo{flex-direction:column;text-align:center}.byte{width:160px;height:160px}}