:root{--bg:#0b1218;--panel:#0f1a24;--text:#e6eef6;--muted:#a8b3bf;--link:#7db4ff;--border:#1e2a36;}
*{box-sizing:border-box} html,body{height:100%}
body.container{
  margin:0 auto;max-width:1200px;padding:28px 16px;
  background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;}
h1{font-size:36px;margin:0 0 8px}
h3{margin:0 0 8px;font-size:20px}

.grid{display:grid;gap:16px;grid-template-columns:1fr;}         /* phone: 1 col */
@media (min-width:960px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} } /* desktop: 2 cols */

.card{
  background:var(--panel);border:1px solid var(--border);
  padding:18px;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.card p{color:var(--muted);margin:0 0 12px}
.button{display:inline-block;padding:10px 14px;border-radius:12px;background:#1c2a38;border:1px solid var(--border);color:var(--text);}
.button:hover{background:#213041}

/* Products grid: 2 колонки на десктопе, 1 на мобильных */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .products-grid {
    grid-template-columns: 1fr 1fr;
  }
}