:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #05090b; color: #f4f8f2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 10%, rgba(79,255,65,.12), transparent 28rem), #05090b; }
header, main, footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #243027; }
.brand { color: inherit; text-decoration: none; font-weight: 900; letter-spacing: .08em; }
.brand span { color: #77ff41; }
header a:last-child { color: #b9c4bb; text-decoration: none; }
main { padding: clamp(64px, 9vw, 120px) 0; }
.eyebrow { color: #77ff41; font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
h1 { max-width: 760px; margin: 14px 0 18px; font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: .96; letter-spacing: -.055em; }
.intro { max-width: 620px; color: #aeb9b0; font-size: 1.08rem; line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 48px; }
.card { min-height: 210px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #2d4231; border-radius: 16px; color: inherit; text-decoration: none; background: linear-gradient(145deg, rgba(119,255,65,.09), rgba(9,17,12,.86)); transition: transform .18s ease, border-color .18s ease; }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: #77ff41; outline: none; }
.subnet-card { border-color: #31525b; background: linear-gradient(145deg, rgba(71,230,193,.10), rgba(9,17,20,.88)); }
.subnet-card:hover, .subnet-card:focus-visible { border-color: #47e6c1; }
.subnet-card .open { color: #47e6c1; }
.card small { color: #8fa394; font-weight: 700; letter-spacing: .1em; }
.card h2 { margin: 10px 0 8px; font-size: 1.55rem; }
.card p { margin: 0; color: #afbbb1; line-height: 1.55; }
.open { margin-top: 28px; color: #77ff41; font-weight: 800; }
footer { padding: 24px 0 36px; border-top: 1px solid #243027; color: #7f8c82; font-size: .88rem; }

@media (max-width: 560px) {
  header { min-height: 74px; }
  header a:last-child { font-size: .85rem; }
  main { padding: 56px 0 72px; }
  .card { min-height: 190px; }
}