:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0d1730;
  color: #f4f3fb;
  line-height: 1.65;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 2%, #264677 0, transparent 28rem), linear-gradient(#101e3b, #171b34 65%, #121424); }
a { color: #c9e6ff; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #f8d7b0; outline-offset: 4px; border-radius: 3px; }
.shell { width: min(100% - 2.25rem, 48rem); margin-inline: auto; }
header { border-bottom: 1px solid #ffffff24; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; font-size: 1.25rem; letter-spacing: .03em; font-weight: 650; }
.orb { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: radial-gradient(circle at 67% 70%, #d7e9ff, #80b5eb 45%, #4b78c9 70%, #bed6fe 96%); box-shadow: 0 0 0 2px #dbe9ff7a, 0 0 18px #8ec8ff8f; }
nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
nav a { font-size: .91rem; text-decoration: none; color: #d7e4f4; }
nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: #e8b89d; text-underline-offset: .35rem; }
main { padding-block: 3rem 5rem; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 1.25rem; }
h2 { font-size: 1.24rem; line-height: 1.3; margin: 2.25rem 0 .65rem; }
h3 { font-size: 1.04rem; line-height: 1.4; margin: .35rem 0 .7rem; }
p, li { color: #e0e6f1; }
p { margin: .8rem 0; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: .45rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: #b3cbed; font-weight: 700; margin: 0 0 .8rem; }
.lead { font-size: 1.1rem; max-width: 42rem; }
.review { margin: 0 0 2rem; padding: 1rem 1.15rem; border: 1px solid #e2bb8175; border-radius: 1rem; background: #563d293b; color: #ffe1ba; }
.review strong { color: #fff0da; }
.panel { border-radius: 1.25rem; border: 1px solid #ffffff2b; background: #ffffff0d; padding: 1.35rem 1.5rem; margin: 1.5rem 0; }
.panel h2 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.grid .panel { margin: .5rem 0 0; padding: 1.1rem; }
.grid .eyebrow { font-size: .64rem; }
.featured { margin-block: 2.5rem; }
.cta { display: inline-block; border-radius: 999px; background: #dbd1ff; color: #1b2144; padding: .7rem 1.15rem; text-decoration: none; font-weight: 700; }
.cta:hover { background: #eee9ff; }
.fine { font-size: .9rem; color: #b9c6d9; }
footer { border-top: 1px solid #ffffff24; padding-block: 1.25rem 2rem; color: #bac8da; font-size: .88rem; }
@media (max-width: 620px) { .top { align-items: flex-start; flex-direction: column; } main { padding-top: 2rem; } .panel { padding: 1.1rem; } }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .orb { animation: breathe 7s ease-in-out infinite; } @keyframes breathe { 50% { box-shadow: 0 0 0 2px #dbe9ff9c, 0 0 26px #8ec8ffad; } } }