:root { color-scheme: dark; --bg:#03151b; --card:#0a2a32; --line:#17454c; --text:#f3fbfc; --muted:#a9c0c5; --aqua:#25e1cf; --blue:#37adfb; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 85% 5%, #123241 0, transparent 32rem), linear-gradient(160deg, #04191f, #020d12 60%); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 56px 0 40px; }
.shell.compact { min-height: 100vh; display: grid; align-content: center; max-width: 660px; }
.back { color: var(--aqua); text-decoration: none; font-weight: 650; }
header { margin: 54px 0 42px; }
.eyebrow { margin: 24px 0 8px; color: var(--aqua); font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(2.7rem, 8vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
h1 span { color: var(--aqua); }
.effective { color: var(--aqua); font-weight: 700; }
.lead { color: var(--muted); font-size: 1.15rem; max-width: 680px; }
article { display: grid; gap: 14px; }
section, .card { border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 18px 50px #0004; }
section { padding: 24px 26px; }
h2 { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; font-size: 1.15rem; }
h2 b { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; color: #00221f; background: var(--aqua); font-size: .85rem; }
section p { margin: 0; color: var(--muted); }
a { color: var(--aqua); }
.cards { display: grid; gap: 12px; margin-top: 38px; }
.card { padding: 20px 22px; color: var(--text); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--aqua); }
.card strong, .card small { display: block; }
.card small { color: var(--muted); margin-top: 2px; }
.mark { display: flex; gap: 7px; align-items: center; width: 78px; height: 54px; }
.mark span { width: 20px; height: 4px; border-radius: 4px; background: var(--aqua); transform: rotate(-14deg); box-shadow: 0 0 20px #25e1cf88; }
.mark span:nth-child(2) { height: 30px; border-radius: 50%; background: linear-gradient(var(--blue), var(--aqua)); }
.mark span:nth-child(3) { transform: rotate(14deg); }
footer { padding: 36px 4px 12px; color: var(--muted); font-size: .85rem; }
@media (max-width: 520px) { .shell { width: min(100% - 24px, 760px); padding-top: 30px; } header { margin: 38px 4px 28px; } section { padding: 20px; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }