:root { --bg: #0a0c14; --ink: #f4f1ea; --muted: rgba(244,241,234,0.62); --accent: #f2b95a; --surface: rgba(255,255,255,0.07); --stroke: rgba(255,255,255,0.14); }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: -20% -20% auto -20%; height: 70vh; background: radial-gradient(60% 60% at 30% 30%, rgba(242,185,90,0.28), rgba(242,185,90,0) 70%), radial-gradient(50% 50% at 80% 70%, rgba(74,132,181,0.22), rgba(74,132,181,0) 70%); filter: blur(30px); z-index: -1; pointer-events: none; }
.display { font-family: "Bricolage Grotesque", "Avenir Next Condensed", system-ui, sans-serif; letter-spacing: -0.02em; }
main { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }
header { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
header img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
h1 { font-size: 44px; font-weight: 800; line-height: 1; margin: 0; color: var(--accent); }
h2 { font-size: 26px; font-weight: 700; margin: 40px 0 12px; }
h3 { font-size: 18px; font-weight: 700; margin: 24px 0 6px; }
p, li { color: var(--muted); font-size: 17px; }
p strong, li strong { color: var(--ink); font-weight: 600; }
a { color: var(--accent); }
.lead { color: var(--ink); font-size: 20px; }
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 20px 0 8px; }
.store { display: inline-flex; align-items: center; gap: 10px; font-family: "Bricolage Grotesque", "Avenir Next Condensed", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: #1a1206; background: var(--accent); text-decoration: none; padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 30px rgba(242,185,90,0.28); }
.store::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.4 12.6c0-2.5 2.1-3.7 2.2-3.8-1.2-1.7-3-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.7-4.1zM13.9 5.1c.7-.8 1.2-2 1-3.1-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.6 2.9-1.4z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.4 12.6c0-2.5 2.1-3.7 2.2-3.8-1.2-1.7-3-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.7-4.1zM13.9 5.1c.7-.8 1.2-2 1-3.1-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.6 2.9-1.4z'/></svg>") center / contain no-repeat; }
.store:hover { filter: brightness(1.06); }
.cta-note { color: var(--muted); font-size: 15px; }
.card { background: var(--surface); border: 1px solid var(--stroke); border-radius: 22px; padding: 20px 22px; margin: 18px 0; }
.lang { display: flex; gap: 8px; margin: 0 0 28px; }
.lang button { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--surface); color: var(--ink); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--accent); color: #1a1206; border-color: var(--accent); }
[hidden] { display: none !important; }
footer { margin-top: 56px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--stroke); padding-top: 18px; }
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--muted); margin: 0 0 6px; }