.ribbon{position:sticky;top:0;z-index:30;background:#0f172a;color:#fff;font-size:14px;line-height:1.5;padding:8px 14px;text-align:center}
.ribbon a{color:#7dd3fc;font-weight:700;white-space:nowrap}
.hero.sec{min-height:78vh;background:var(--hero)}
.hero.sec::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 100%)}
.hero .art{position:absolute;inset:auto 0 0 auto;width:min(58vw,520px);opacity:.22;z-index:0;pointer-events:none}
.btn.tg{background:#229ED9;color:#fff}
.lst{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lst .card{display:flex;flex-direction:column;gap:6px}
.lst .ph{font-size:44px;line-height:1;background:var(--bg);border-radius:12px;padding:22px 0;text-align:center}
.lst .pr{font-weight:800;color:var(--c)}
.lst .meta{font-size:14px;color:#57606a}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.feat div{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.feat b{display:block;margin-bottom:4px}
.dmodal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.dmodal[hidden]{display:none}
.dbox{position:relative;background:#fff;color:#1f2328;border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:22px 18px}
.dbox h3{font-size:20px;margin:0 0 6px 28px}
.dbox .x{position:absolute;top:10px;left:10px;border:0;background:#f1f5f9;border-radius:10px;width:36px;height:36px;font-size:16px;cursor:pointer}
.dsub{font-size:15px;color:#57606a;margin:6px 0}
.dmsg{white-space:pre-wrap;word-break:break-word;font-family:inherit;background:#dcf8c6;border-radius:12px;padding:12px;font-size:15px;margin:8px 0}
.dbox .cta{margin-top:12px}
.dbox .btn{flex:1 1 200px}
@media(min-width:900px){.hero.sec{min-height:62vh}}