:root {
  color-scheme: light;
  --bg: #eef5fb;
  --ink: #102033;
  --muted: #66758a;
  --line: rgba(116, 139, 166, .24);
  --panel: rgba(255, 255, 255, .82);
  --blue: #1677ff;
  --cyan: #05b7c8;
  --green: #14a46f;
  --shadow: 0 24px 70px rgba(25, 57, 99, .16);
  font-family: "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(22, 119, 255, .18), transparent 29%),
    radial-gradient(circle at 90% 4%, rgba(5, 183, 200, .19), transparent 27%),
    linear-gradient(135deg, #f8fbff 0%, #edf5fb 48%, #e9f1ff 100%);
}

.ambient { position: fixed; width: 42vw; aspect-ratio: 1; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: .12; }
.ambient-a { left: -20vw; top: -22vw; background: var(--blue); }
.ambient-b { right: -18vw; bottom: -26vw; background: var(--cyan); }
.shell { position: relative; width: min(1180px, calc(100% - 40px)); margin: auto; padding: 22px 0 20px; }
.masthead, footer { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid rgba(255, 255, 255, .72); border-radius: 13px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 30px rgba(22, 119, 255, .24); color: #fff; font-weight: 900;
}
.brand strong { display: block; font-size: 17px; }
.brand small { display: block; margin-top: 2px; color: #71839a; font-size: 9px; letter-spacing: .2em; }
.system-state {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .76); border-radius: 999px;
  background: rgba(255, 255, 255, .66); box-shadow: 0 10px 28px rgba(25, 57, 99, .08);
  color: var(--muted); font-size: 12px;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(20, 164, 111, .1); }
.hero { padding: clamp(56px, 8vh, 86px) 0 clamp(40px, 6vh, 64px); }
.eyebrow, .product-label { color: #2382ff; font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 14px 0 16px; font-size: clamp(30px, 3.7vw, 42px); line-height: 1.13; letter-spacing: -.045em; }
h1 span { color: transparent; background: linear-gradient(90deg, var(--blue), var(--cyan)); background-clip: text; }
.lead { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.78; }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product {
  position: relative; min-height: 292px; overflow: hidden; padding: 26px;
  border: 1px solid rgba(255, 255, 255, .76); border-radius: 26px;
  color: inherit; text-decoration: none; background: var(--panel);
  box-shadow: var(--shadow); backdrop-filter: blur(18px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product:hover { transform: translateY(-4px); border-color: rgba(22, 119, 255, .28); box-shadow: 0 30px 76px rgba(25, 57, 99, .2); }
.product::after { content: ""; position: absolute; inset: auto -15% -62% 28%; height: 82%; background: radial-gradient(circle, rgba(22, 119, 255, .15), transparent 68%); }
.tariff::after { background: radial-gradient(circle, rgba(5, 183, 200, .16), transparent 68%); }
.product-top { display: flex; justify-content: space-between; align-items: center; }
.product-index { color: #7890ac; font: 11px "Cascadia Mono", Consolas, monospace; }
.service-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--muted); font-size: 11px; }
.service-pill i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.service-pill i.online { background: var(--green); box-shadow: 0 0 0 5px rgba(20, 164, 111, .09); }
.service-pill i.warning { background: #e98b19; }
.service-pill i.offline { background: #dc2626; }
.icon-grid, .rate-bars { display: flex; align-items: end; gap: 7px; height: 54px; margin: 28px 0 14px; }
.icon-grid { display: grid; grid-template-columns: repeat(2, 20px); align-content: end; }
.icon-grid span { width: 20px; height: 20px; border: 1px solid rgba(22, 119, 255, .44); border-radius: 6px; background: rgba(22, 119, 255, .1); }
.rate-bars span { width: 9px; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--cyan), var(--blue)); }
.rate-bars span:nth-child(1) { height: 22px; } .rate-bars span:nth-child(2) { height: 40px; }
.rate-bars span:nth-child(3) { height: 31px; } .rate-bars span:nth-child(4) { height: 50px; }
.product h2 { margin: 6px 0 9px; font-size: 25px; letter-spacing: -.035em; }
.product > p:not(.product-label) { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.enter { position: absolute; z-index: 1; right: 26px; bottom: 24px; color: #1d5fae; font-size: 12px; font-weight: 800; }
.enter b { display: inline-grid; width: 27px; height: 27px; margin-left: 7px; place-items: center; border-radius: 50%; background: rgba(22, 119, 255, .1); }
footer { padding-top: 28px; color: #71839a; font-size: 11px; letter-spacing: .06em; }

@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 620px); }
  .hero { padding: 54px 0 38px; }
  .products { grid-template-columns: 1fr; }
  .product { min-height: 280px; }
  .system-state { max-width: 145px; text-align: right; }
  footer { gap: 14px; align-items: flex-start; flex-direction: column; }
}