:root {
  --bg: #07101d;
  --panel: rgba(15, 27, 45, .72);
  --line: rgba(167, 196, 226, .13);
  --text: #f2f7fb;
  --muted: #9eb0c4;
  --accent: #78e3bf;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 4%, rgba(31, 111, 104, .18), transparent 32rem),
    radial-gradient(circle at 89% 18%, rgba(47, 83, 157, .20), transparent 36rem),
    linear-gradient(145deg, #07101d 0%, #091321 56%, #07101a 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .12;
  pointer-events: none;
}

.ambient-one { top: -12rem; left: -8rem; background: #35d6aa; }
.ambient-two { right: -13rem; bottom: -12rem; background: #5687ff; }

.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 40px; }

.hero { padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.brand-row { display: flex; align-items: center; gap: 18px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(120, 227, 191, .34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(120, 227, 191, .18), rgba(120, 227, 191, .04));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.18);
  color: #9af0d2;
  font-weight: 800;
  letter-spacing: -.04em;
}

.eyebrow { margin: 0 0 8px; color: #71dcb9; font-size: 11px; font-weight: 750; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); line-height: .95; letter-spacing: -.055em; }
.intro { max-width: 600px; margin: 30px 0 0 74px; color: var(--muted); font-size: 17px; line-height: 1.75; }

.clock { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.clock span { display: block; font-size: 24px; font-weight: 720; letter-spacing: -.03em; }
.clock small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 45px 0 22px; }
h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.count { color: var(--muted); font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative;
  display: flex;
  min-height: 240px;
  padding: 24px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(145deg, rgba(18, 34, 54, .83), rgba(12, 23, 38, .62));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 50px rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -90px;
  border-radius: 50%;
  background: var(--glow, #71dcb9);
  opacity: .07;
  filter: blur(20px);
}

.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(143, 202, 229, .28);
  background: linear-gradient(145deg, rgba(22, 41, 64, .92), rgba(13, 26, 43, .72));
  outline: none;
}
.card:focus-visible { box-shadow: 0 0 0 3px rgba(120,227,191,.18); }
.card-gitea { --glow: #f28a59; }
.card-memos { --glow: #75bfff; }
.card-registry { --glow: #8496ff; }

.card-top, .card-foot { display: flex; align-items: center; justify-content: space-between; }
.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  color: #dcecf4;
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.state { color: #a8b8c7; font-size: 12px; }
.state i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #65dbb4; box-shadow: 0 0 12px rgba(101,219,180,.7); }
.state.api i { background: #98a7ff; box-shadow: 0 0 12px rgba(152,167,255,.7); }
.card-copy { margin: 34px 0 28px; }
.card h3 { margin: 0 0 9px; font-size: 25px; letter-spacing: -.035em; }
.card p { max-width: 370px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.card-foot { margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.065); color: #bfd0df; font-size: 12px; }
.card-foot b { font-size: 17px; font-weight: 500; transition: transform .2s ease; }
.card:hover .card-foot b { transform: translate(2px, -2px); }

footer { display: flex; justify-content: space-between; margin-top: 34px; color: #61778c; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.footer-note { font-weight: 500; letter-spacing: .08em; }

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1120px); padding-top: 34px; }
  .hero { padding-bottom: 35px; }
  .brand-row { align-items: flex-start; }
  .brand-mark { width: 48px; height: 48px; border-radius: 14px; }
  .clock { display: none; }
  .intro { margin: 24px 0 0; font-size: 15px; }
  .section-head { margin-top: 34px; }
  .grid { grid-template-columns: 1fr; }
  .card { min-height: 220px; }
  .footer-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}