:root{--olive:#2F696B;--olive2:#1F4B4D;--yellow:#FFD93B;--ink:#111;--paper:#fff;--bg:#f6f4e8}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--ink)}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.nav{background:var(--olive);color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:12px 18px}
.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-weight:800;font-size:22px}
.brand img{width:40px;height:40px;animation:spin 8s linear infinite}
.brand em{color:var(--yellow);font-style:normal}
@keyframes spin{to{transform:rotate(360deg)}}
nav a{color:#fff;text-decoration:none;margin-left:12px}.hi{margin-left:12px;opacity:.9}
.btn{display:inline-block;border:0;border-radius:12px;padding:10px 18px;font-weight:700;cursor:pointer;text-decoration:none;transition:.2s}
.btn.yellow{background:var(--yellow);color:var(--ink)}.btn.yellow:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.btn.olive{background:var(--olive2);color:#fff}.btn.ghost{background:rgba(255,255,255,.15);color:#fff}
.btn.sm{padding:6px 12px;font-size:13px}
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;white-space:nowrap;font-size:13px}
.ticker-in{display:inline-block;padding:6px 0;animation:slide 22s linear infinite}
@keyframes slide{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;align-items:center;padding:36px 0}
@media(max-width:800px){.hero{grid-template-columns:1fr}}
.pill{display:inline-block;background:#111;color:#fff;border-radius:99px;padding:6px 14px;font-size:13px}
.dot{display:inline-block;width:8px;height:8px;background:#4ade80;border-radius:50%;margin-right:6px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
h1{font-size:46px;margin:14px 0}mark{background:var(--yellow);padding:0 8px;border-radius:8px;transform:rotate(-1deg);display:inline-block}
.sub{font-size:17px;opacity:.8}
.search{display:flex;gap:8px;margin:16px 0}.search input{flex:1;padding:12px;border-radius:12px;border:2px solid var(--olive)}
.stats{display:flex;gap:12px;flex-wrap:wrap}.stat{background:#fff;border-radius:14px;padding:12px 18px;min-width:130px;box-shadow:0 4px 14px rgba(47,105,107,.15);border-top:4px solid var(--olive)}
.stat b{font-size:20px;display:block}.stat span{font-size:12px;opacity:.7}.stat.live{border-color:#22c55e}
.hero-card{background:var(--olive);color:#fff;border-radius:20px;padding:22px;animation:floaty 4s ease-in-out infinite;box-shadow:0 20px 40px rgba(47,105,107,.4)}
@keyframes floaty{50%{transform:translateY(-8px)}}
.plate{background:var(--yellow);color:#111;font-weight:900;font-size:30px;border-radius:10px;padding:8px 16px;display:inline-block;border:3px solid #111;letter-spacing:1px;box-shadow:4px 4px 0 #111}
.plate.sm{font-size:20px}.plate span{margin:0 6px}
.hc-row{display:flex;justify-content:space-between;margin-top:12px}.muted{opacity:.7}.ok{background:#22c55e;color:#fff;border-radius:99px;padding:2px 10px;font-size:12px}.warn{background:#f59e0b;color:#111;border-radius:99px;padding:2px 10px;font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 20px}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
.card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.bar{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:14px}.track{flex:1;background:#eee;border-radius:99px;height:10px;overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,var(--olive),var(--yellow));animation:grow 1s}
@keyframes grow{from{width:0}}
.steps li{margin:8px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding-bottom:30px}
.p-card{background:#fff;border-radius:16px;padding:16px;border-left:6px solid var(--olive);box-shadow:0 6px 18px rgba(0,0,0,.08);transition:.2s}
.p-card:hover{transform:translateY(-4px) scale(1.01)}
.p-card .meta{font-size:12px;opacity:.6;margin:6px 0}.p-card .row{display:flex;justify-content:space-between;align-items:center}
.auth{max-width:420px;margin:40px auto;background:#fff;padding:28px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.auth input{width:100%;padding:12px;margin:8px 0;border-radius:10px;border:2px solid #ddd}
.auth button{width:100%}.alert{background:#fee;border:1px solid #f99;padding:10px;border-radius:10px;margin:10px 0}
.demo{background:#fffae6;border:2px dashed var(--olive);padding:10px;border-radius:10px;margin:10px 0}
.src{list-style:none;padding:0}.src li{padding:6px 0;border-bottom:1px solid #eee;font-size:14px}.tag{background:var(--olive);color:#fff;font-size:11px;border-radius:6px;padding:2px 8px}
.rev{border:1px solid #eee;border-radius:12px;padding:10px;margin:8px 0}
.foot{padding:26px 18px;opacity:.6;font-size:13px;text-align:center}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.in{opacity:1;transform:none}
.grid1{display:grid;grid-template-columns:1fr;gap:16px;margin:10px 0 20px}
.days{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:8px}.day{background:#fff;border-radius:14px;padding:12px 18px;text-decoration:none;color:#111;box-shadow:0 4px 14px rgba(0,0,0,.08);border:2px solid transparent;transition:.2s;display:flex;flex-direction:column;gap:2px}.day b{font-size:17px}.day span{font-size:12px;opacity:.6}.day:hover{transform:translateY(-2px)}.day.on{border-color:var(--olive);box-shadow:0 6px 18px rgba(47,105,107,.3)}
.barlink{text-decoration:none;color:inherit;display:block;border-radius:10px}.barlink:hover .bar{background:#eef2e2}