:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #02090d; color: #f5f8f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% 0%, #07332d, transparent 32%), #02090d; }
.page { width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 64px; }
.nav { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid #203a32; }
.logo { color: #fff; text-decoration: none; font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; }
.logo span { color: #18e979; }
.back { color: #18e979; text-decoration: none; font-size: .85rem; }
.hero { padding: 72px 0 54px; max-width: 720px; }
.eyebrow { color: #18e979; font-size: .72rem; letter-spacing: .14em; font-weight: 700; }
h1 { margin: 14px 0; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1; letter-spacing: -.06em; }
h1 span { color: #18e979; }
.hero p, .content p, li { color: #c8d4ce; line-height: 1.65; }
.content { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; }
.panel { border: 1px solid #29473c; border-radius: 14px; padding: 26px; background: linear-gradient(135deg, #08191c, #041014); }
h2 { margin-top: 0; font-size: 1.2rem; }
li { margin: 10px 0; }
.cta { display: inline-block; margin-top: 14px; padding: 13px 18px; border-radius: 7px; color: #fff; background: #099f4c; text-decoration: none; font-weight: 700; }
@media (max-width: 700px) { .content { grid-template-columns: 1fr; } .hero { padding-top: 48px; } }