@font-face { font-family:"Caveat"; src:url("/assets/caveat-600.ttf") format("truetype"); font-weight:600; font-display:swap; }
:root { --bg:#f6f7ff; --panel:#fff; --text:#111a36; --muted:#687398; --line:#dfe4f5; --accent:#5b54f6; --accent2:#2d7dff; --soft:#e8e8ff; --gold:#f4b860; }
@media (prefers-color-scheme: dark) { :root { --bg:#07122b; --panel:#101d3f; --text:#f7f7ff; --muted:#9aa6cf; --line:#1d2e59; --accent:#7c5cff; --accent2:#2d7dff; --soft:#1c265a; --gold:#f4b860; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); background-image:radial-gradient(circle at 88% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),radial-gradient(circle at 5% 65%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 32%); color:var(--text); font:17px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); }
.wrap { max-width:760px; margin:0 auto; padding:28px 22px 60px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:56px; }
.logo { display:flex; align-items:center; gap:10px; font:600 28px/1 "Caveat", cursive; color:var(--text); text-decoration:none; }
.logo b { width:38px; height:38px; border-radius:12px; background:url("/assets/persi-owl.webp?v=barn2") center/cover; box-shadow:0 0 24px color-mix(in srgb, var(--accent2) 36%, transparent); font-size:0; }
h1 { font:600 clamp(45px, 7vw, 68px)/.98 "Caveat", cursive; letter-spacing:0; margin:0 0 18px; max-width:680px; }
.lead { font-size:20px; color:var(--muted); margin:0 0 30px; max-width:600px; }
.cta { display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; text-decoration:none; font-weight:650; padding:14px 22px; border-radius:99px; box-shadow:0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent); }
.badge { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--soft); padding:5px 10px; border-radius:99px; margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:64px 0; }
.grid div { background:color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:16px; padding:18px; box-shadow:0 14px 40px color-mix(in srgb, #04091d 9%, transparent); backdrop-filter:blur(12px); }
.grid b { display:block; margin-bottom:4px; }
.grid span { color:var(--muted); font-size:15px; }
footer { border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:18px; }
footer a { color:var(--muted); }
.doc h1 { font:700 34px/1.15 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; } .doc h2 { font-size:20px; margin:34px 0 8px; } .doc p, .doc li { color:var(--text); } .doc .muted { color:var(--muted); }
.logo b { width:44px; height:44px; flex:none; }
.logo .wm { display:flex; flex-direction:column; line-height:.9; }
.logo .wm small { font:600 11px/1.2 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }