:root { --bg: #050608; --fg: #EDEDF0; --muted: #86898F; --line: #1C1F26; --signal: #4CD9C0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font-family: 'Inter', sans-serif; line-height: 1.7; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
a { color: var(--signal); text-decoration: none; }

nav { position: sticky; top: 0; z-index: 40; background: rgba(5,6,8,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
nav .navwrap { max-width: 900px; margin: 0 auto; padding: 0 8vw; height: 60px; display: flex; justify-content: space-between; align-items: center; }
nav .brand { font-family: 'Space Grotesk'; font-size: 0.95rem; }
nav .links { display: flex; gap: 20px; font-size: 0.86rem; align-items: center; }
nav .links a { color: var(--muted); }
nav .links a.current, nav .links a:hover { color: var(--signal); }
.cta-link { background: var(--signal); color: #05221d !important; padding: 7px 14px; border-radius: 4px; font-weight: 600; }

.wrap { max-width: 760px; margin: 0 auto; padding: 60px 8vw 100px; }
.back { display:inline-block; margin-bottom: 30px; color: var(--muted); font-size: 0.85rem; }
.back:hover { color: var(--signal); }

.art-tag { color: var(--signal); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 14px; }
h1.art-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 600; margin-bottom: 10px; line-height: 1.18; }
.art-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 34px; }
article p { color: #C8CDD6; font-size: 1rem; margin-bottom: 18px; max-width: 66ch; }
article p b { color: var(--fg); }
.pull { border-left: 2px solid var(--signal); padding-left: 18px; color: var(--fg); font-size: 1.05rem; font-style: italic; margin: 28px 0; max-width: 60ch; }

footer { border-top: 1px solid var(--line); padding: 30px 8vw; color: var(--muted); font-size: 0.82rem; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
footer .flinks { display: flex; gap: 20px; flex-wrap: wrap; }

/* Background motion field */
#field { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; }
.mote { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--muted); opacity: 0.3; }
@keyframes drift { from { transform: translateY(0);} to { transform: translateY(-40px);} }
nav, .wrap, footer { position: relative; z-index: 2; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Reading progress bar (article pages) */
#readProgress { position: fixed; top: 0; left: 0; height: 2px; background: var(--signal); z-index: 50; width: 0%; }

/* FAQ accordion */
.faq-item { cursor: pointer; }
.faq-item h3 { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item h3::after { content: '+'; color: var(--signal); font-weight: 400; font-size: 1.2rem; flex-shrink: 0; transition: transform 0.25s; }
.faq-item.open h3::after { transform: rotate(45deg); }
.faq-item p { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, margin-top 0.35s ease; margin-top: 0; }
.faq-item.open p { max-height: 300px; margin-top: 10px; }