/* Landing TG Sekong – colorful cards */
:root{
  --bg:#0b1220; --ink:#e6eefc; --muted:#9ab0d0; --ring:rgba(88,148,255,.35);
  --card:#0f1628; --card-b:#203052;
  --weather:#2ea0ff; --relay:#22c55e; --suhu:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:radial-gradient(1000px 600px at 20% -10%, #1a3a80 0%, transparent 60%),
             radial-gradient(800px 500px at 100% 0%, #0c3a5a 0%, transparent 55%),
             var(--bg);
  color:var(--ink);
}

.container{max-width:1100px;margin:0 auto;padding:0 16px}

.hero{padding:28px 16px 8px;text-align:left}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;border-radius:8px}
.hero h1{margin:0;font-weight:800;letter-spacing:.3px}
.subtitle{margin:4px 0 2px;color:var(--muted)}

.grid{
  display:grid; gap:16px; padding:18px 0 8px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

.card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
             var(--card);
  border:1px solid var(--card-b); border-radius:16px; padding:16px 16px 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline:0;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.35); border-color:#3a4f7a }
.card:focus-visible{ box-shadow:0 0 0 4px var(--ring) }

.card .icon{ font-size:28px; opacity:.95 }
.card h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:.2px }
.card p{ margin:0; color:var(--muted) }

.new{
  background:#22d3ee; color:#031626; border-radius:999px; font-size:11px; padding:2px 8px;
  margin-left:8px; vertical-align:middle; font-weight:800;
}

.btn{
  align-self:flex-start; margin-top:6px;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:6px 10px; border-radius:10px; font-weight:700;
}

/* Accent borders per card */
.card.weather{ border-color: rgba(46,160,255,.55) }
.card.relay { border-color: rgba(34,197,94,.55) }
.card.suhu { border-color: rgba(239,68,68,.55) }

/* Thin color stripe on top */
.card.weather::before,
.card.relay::before,
.card.suhu::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:16px 16px 0 0;
}
.card.weather::before{ background:linear-gradient(90deg,#3ab9ff,#2ea0ff) }
.card.relay::before { background:linear-gradient(90deg,#34d399,#22c55e) }
.card.suhu::before { background:linear-gradient(90deg,#ff7b6b,#ef4444) }

.footer{
  opacity:.9; color:var(--muted); font-weight:600;
  display:flex; align-items:center; gap:8px;
  padding:18px 16px 28px;
}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block }
.online{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25) }

/* Mobile tweaks */
@media (max-width:480px){
  .grid{ grid-template-columns:1fr }
}