:root {
  --bg: #91a8d0;
  --panel: #f6f7fb;
  --line: #4f6ea7;
  --text: #16243f;
  --muted: #36507f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #6f8fc9 0%, #9db5dd 28%, #89a3d1 100%);
}

.site-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px;
}

.browser-chrome {
  border: 1px solid #1f3f77;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(6, 18, 52, 0.35);
}

.chrome-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #eef5ff;
  background: linear-gradient(180deg, #2f5da4 0%, #153f7f 100%);
  border-bottom: 1px solid #102f61;
  font-size: 13px;
}

.orb { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.red { background: #d94e4e; }
.yellow { background: #e7bc44; }
.green { background: #50b36f; }

.chrome-bar {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: linear-gradient(180deg, #f6fbff 0%, #cbdcf8 100%);
}

.btn-lite {
  border: 1px solid #6d88bb;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #dbe8ff 100%);
  padding: 4px 7px;
  font-size: 12px;
}

.address {
  border: 1px solid #7990be;
  background: #fff;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  color: #2f4470;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window {
  border: 1px solid #2f4c82;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #e8eefb;
  padding: 12px;
}

.panel {
  border: 1px solid #5a76a8;
  background: linear-gradient(180deg, #ffffff 0%, var(--panel) 100%);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 14px;
  box-shadow: inset 0 1px 0 #fff;
}

h1 {
  margin: 8px 0 4px;
  font-size: clamp(34px, 6vw, 54px);
  line-height: .95;
  color: #0f2e66;
  text-shadow: 1px 1px 0 #fff;
}

h2 {
  margin: 0 0 10px;
  font-size: clamp(17px, 2.9vw, 27px);
  color: #203d6c;
}

h3 { margin: 0 0 10px; color: #173563; }
h4 { margin: 0 0 6px; color: #183665; }

.lead {
  max-width: 760px;
  color: #24426f;
  line-height: 1.5;
  margin: 0;
}

.muted { color: var(--muted); margin-top: -2px; font-size: 13px; }

.cta-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  padding: 9px 13px;
  font-size: 13px;
  border: 1px solid #4f6ea7;
  cursor: pointer;
}

.btn.xp {
  background: linear-gradient(180deg, #fffed7 0%, #f4cf63 100%);
  color: #483900;
}

.btn.ghost {
  background: linear-gradient(180deg, #ffffff 0%, #d8e6ff 100%);
  color: #224173;
}

.stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stats div {
  border: 1px solid #7b93be;
  border-radius: 6px;
  background: #f8fbff;
  padding: 10px;
}

.stats strong { display: block; margin-bottom: 4px; color: #11366f; }
.stats span { font-size: 12px; color: #365077; }

.demo-card {
  border: 1px solid #7c93be;
  border-radius: 7px;
  background: #fbfdff;
  padding: 10px;
}

.demo-note {
  margin: 0;
  border: 1px solid #8ca3c8;
  border-radius: 6px;
  background: #fff;
  min-height: 220px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #29466f;
  white-space: pre-wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.grid article {
  border: 1px solid #7c93be;
  border-radius: 6px;
  padding: 10px;
  background: #fbfdff;
}

.grid p,
details p {
  margin: 0;
  color: #334f75;
  line-height: 1.45;
  font-size: 13px;
}

details {
  border: 1px solid #7b94be;
  border-radius: 6px;
  background: #fbfdff;
  padding: 8px 10px;
  margin-bottom: 8px;
}

summary {
  font-weight: 700;
  cursor: pointer;
}

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.footer a { color: #1e3f76; }

@media (max-width: 860px) {
  .stats,
  .grid {
    grid-template-columns: 1fr;
  }

  .chrome-bar {
    grid-template-columns: auto auto auto;
  }

  .address {
    grid-column: 1 / -1;
  }
}