:root{
  --bg:#fbfbfd;
  --text:#0f172a;
  --muted:#55627a;
  --brand:#f97316;
  --brand2:#ffb703;
  --card:#fff;
  --line:#e6e8ef;
  --chip:#f3f5f9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{width:min(1140px,92%);margin-inline:auto}
/* header */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:900}
.brand small{color:var(--muted);font-weight:700}
.menu a{color:var(--muted);text-decoration:none;margin-left:16px;padding:8px 10px;border-radius:10px}
.menu a.active,.menu a:hover{background:#f1f4f9;color:#0f172a}
/* hero */
.page-head{padding:28px 0 8px}
.page-head h1{margin:0 0 6px;font-size:30px}
.page-head p{margin:0;color:var(--muted)}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:18px 0 38px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.card::before{content:"";position:absolute;inset:-30% -30% auto -30%;height:60%;background:radial-gradient(60% 60% at 20% 0%, rgba(249,115,22,.09), transparent);transition:transform .35s ease}
.card:hover::before{transform:translateY(-4px)}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(15,23,42,.12)}
.head{display:flex;align-items:center;gap:12px}
.icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:linear-gradient(135deg,#fff,#fffdfa)}
.title{margin:4px 0 2px;font-weight:800}
.desc{color:var(--muted);margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:12px;color:#334155}
.cta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid #0f172a;text-decoration:none;color:#0f172a;font-weight:700}
.btn:hover{background:#0f172a;color:#fff}
.badge{padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#111;font-weight:800;border:1px solid rgba(0,0,0,.06)}
/* footer */
.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
.footer a{color:inherit;text-decoration:none}
.tech-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
/* motion */
@keyframes rise { from{transform:translateY(6px);opacity:0} to{transform:translateY(0);opacity:1}}
.card{animation:rise .28s ease both}
/* responsive */
@media (max-width: 900px){
  .footer .cols{grid-template-columns:1fr 1fr}
}