:root {
  --bg: #900A3E;
  --card: #4A031C;
  --text: #FFE4E1;
  --muted: #FFCEC8;
  --primary: #FFCEC8;
  --primary-600: #FFE4E1;
  --accent: #8B5CF6;
  --border: #4A031C;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container { max-width: 960px; margin: 0 auto; padding: 24px; }

.header { display: flex; align-items: center; justify-content: space-between; }
.brand .logo { font-weight: 800; font-size: 22px; color: var(--text); text-decoration: none; }
.nav a { 
  color: var(--muted); 
  text-decoration: none; 
  margin-left: 16px; 
  display: inline-block;
  position: relative;
}
.nav a[aria-current="page"], .nav a:hover { color: var(--text); }

.main { padding-top: 16px; }

.hero { text-align: center; padding: 64px 16px; background: linear-gradient(180deg, rgba(100,5,40,0.35), rgba(200,150,140,0.8)); border: 1px solid var(--border); border-radius: 16px; }
.hero h1 { font-size: 36px; margin: 0 0 12px; }
.subheadline { color: var(--muted); margin: 0 auto 24px; max-width: 720px; }
.cta { display: inline-block; background: var(--primary); color: #6B0529; padding: 0px 0px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 24px; }
.cta:hover { background: var(--primary-600); }

.faq { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; color: #4A031C; }
.faq h2 { margin-top: 0; color: var(--text); font-size: 24px; font-weight: 700; }
details { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; color: #4A031C; }

.download { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; }
.store-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.store { background: rgba(255, 255, 255, 0.7); color: var(--muted); padding: 10px 14px; border: 1px dashed var(--border); border-radius: 10px; text-decoration: none; }
.store.disabled { pointer-events: none; opacity: 0.7; }

.prose h1, .prose h2, .prose h3 { margin-top: 0; }
.prose ul { padding-left: 18px; }
.prose a { color: var(--accent); }

.footer { color: var(--muted); text-align: center; border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px; }
.footer a { color: #FFFFFF; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.social { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; }
.social h2 { margin-top: 0; color: var(--text); }
.social p { color: var(--muted); margin-bottom: 24px; }
.social-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.social-link { display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, rgba(100,5,40,0.8), rgba(200,150,140,1)); color: var(--text); padding: 18px 36px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s ease; min-width: 180px; }
.social-link:hover { background: linear-gradient(180deg, rgba(120,10,50,0.9), rgba(220,170,160,1)); transform: translateY(-2px); }
.social-link span { font-weight: 600; font-size: 20px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 28px; }
}



