.top{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#0b5d57,#12827a,#f2b84b) 1}
.hero2{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;padding:30px;margin:0 0 10px;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);background:radial-gradient(800px 320px at 90% 0%,rgba(18,130,122,.2),transparent),var(--surface)}
.hero2 h1{margin-top:0}
.hero-art{width:100%;max-width:230px;justify-self:center;filter:drop-shadow(0 18px 22px rgba(11,93,87,.28))}
.art-body{fill:var(--brand)}
.art-screen{fill:#e9f6f3}
.art-key{fill:rgba(255,255,255,.22)}
.art-key.a{fill:var(--accent)}
.art-txt{fill:#0b5d57;font:700 30px Georgia,serif}
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.badges li{font-size:.85rem;font-weight:600;color:var(--link);background:var(--bg);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.calc{border-top:4px solid var(--brand2)}
.result{box-shadow:0 12px 28px -12px rgba(11,93,87,.65)}
section.cat:nth-of-type(2) .cards a{border-left:4px solid #0b5d57}
section.cat:nth-of-type(3) .cards a{border-left:4px solid #c2410c}
section.cat:nth-of-type(4) .cards a{border-left:4px solid #4338ca}
section.cat:nth-of-type(5) .cards a{border-left:4px solid #a16207}
.cards a:hover{box-shadow:var(--shadow)}
@media (max-width:720px){.hero2{grid-template-columns:1fr;padding:20px}.hero-art{display:none}}
.donut-box{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-top:6px}
.donut-svg{width:150px;height:150px;flex:none}
.donut-legend{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:.95rem}
.donut-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}
.keys{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.keys button{padding:10px 2px;font-size:.88rem;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.keys button:hover{border-color:var(--link)}