@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --paper: #f6f1e6;
  --ink: #221b16;
  --muted: #6b6055;
  --line: #ddd0bd;
  --red: #a83828;
  --red-dark: #7c2a1d;
  --gold: #b8863c;
  --cream: #efe4d0;
  --mono: 'DM Mono', monospace;
  --sans: 'Manrope', sans-serif;
  --serif: 'Playfair Display', serif;

  --bs-primary: var(--red);
  --bs-primary-rgb: 168, 56, 40;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 34, 27, 22;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--sans);
  --bs-link-color: var(--red-dark);
  --bs-link-color-rgb: 124, 42, 29;
  --bs-link-hover-color: var(--red);
  --bs-border-color: var(--line);
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); }
a { text-decoration: none; }
section, header { scroll-margin-top: 90px; }

h1, h2, h3, .display-1, .display-2, .display-3, .display-4 {
  font-weight: 800;
  letter-spacing: -.03em;
}
h1 em, h2 em, h3 em, .display-1 em, .display-2 em, .display-3 em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  color: var(--red);
}
.fw-800 { font-weight: 800; }

/* Buttons */
.btn { border-radius: 3px; font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
.btn-dark { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-color: var(--paper); --bs-btn-hover-color: var(--paper); }
.btn-light { --bs-btn-bg: var(--paper); --bs-btn-border-color: var(--paper); --bs-btn-color: var(--ink); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ink); }
.btn-primary { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red-dark); --bs-btn-hover-border-color: var(--red-dark); --bs-btn-active-bg: var(--red-dark); --bs-btn-active-border-color: var(--red-dark); }
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); }
.text-link { font-size: .76rem; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 5px; white-space: nowrap; }

/* Navbar */
.navbar { background: var(--paper); border-bottom: 1px solid rgba(34, 27, 22, .14); }
.navbar-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.nav-link { color: #5b5247; font-weight: 700; font-size: .82rem; }
.nav-link:hover, .nav-link:focus { color: var(--ink); }
.nav-cta { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red-dark); --bs-btn-hover-border-color: var(--red-dark); }

.brand-mark { width: 22px; height: 22px; display: inline-flex; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.brand-mark span { width: 5px; border-radius: 5px 5px 1px 1px; background: var(--red); display: block; transform: rotate(20deg); }
.brand-mark span:nth-child(1) { height: 11px; }
.brand-mark span:nth-child(2) { height: 19px; background: var(--gold); }
.brand-mark span:nth-child(3) { height: 14px; }

/* Eyebrow label + badge */
.eyebrow { font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red-dark); margin-bottom: 1.2rem; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; background: var(--red); border-radius: 50%; margin-right: 8px; }
.badge-outline { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--gold); border-radius: 30px; font: 600 .68rem var(--mono); letter-spacing: .04em; color: var(--red-dark); }
.badge-outline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Hero */
.hero-intro { max-width: 400px; color: #5a5045; line-height: 1.75; font-size: .95rem; }
.hero-visual { background: var(--cream); position: relative; min-height: 540px; border-radius: 6px; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 32px 0; }
.hero-visual:before { content: ''; width: 400px; height: 400px; border: 1px solid rgba(124, 42, 29, .25); border-radius: 50%; position: absolute; }
.screenshot-frame { position: relative; z-index: 1; width: 250px; padding: 10px; background: #17120f; border-radius: 38px; box-shadow: 16px 22px 0 rgba(34, 27, 22, .07), 0 20px 36px rgba(34, 27, 22, .18); }
.screenshot-frame img { display: block; width: 100%; height: auto; border-radius: 28px; }

/* Feature cards */
.feature-card { min-height: 250px; padding: 26px; position: relative; border-radius: 4px; }
.feature-card-dark { background: var(--ink); color: var(--paper); }
.feature-card-red { background: var(--red); color: var(--paper); }
.feature-card-paper { background: var(--cream); color: var(--ink); }
.feature-icon { font-size: 26px; color: var(--gold); }
.feature-card-dark .feature-icon, .feature-card-red .feature-icon { color: #ecc989; }
.feature-card h3 { margin: 18px 0 10px; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.2; }
.feature-card p { margin: 0; font-size: .82rem; line-height: 1.7; opacity: .8; }

/* Disclaimer strip */
.disclaimer-strip { font: .72rem/1.7 var(--sans); color: var(--muted); }

/* Download / CTA repeat */
.download-band { background: var(--red); color: var(--paper); border-radius: 6px; padding: 60px 6%; }
.download-band .eyebrow { color: #f0c39c; }
.download-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.download-band h2 em { color: var(--ink); }
.download-band .lead-copy { color: #f3d3bb; font-size: .87rem; max-width: 460px; }

/* Footer */
.footer a { color: var(--ink); }
.footer a:hover { color: var(--red); }
.footer .text-muted-brand { color: #7a6f62; }

/* Legal pages */
.lang-switch { font: .68rem var(--mono); color: var(--muted); }
.lang-switch a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-content > p:first-child { font-size: 1.02rem; line-height: 1.7; color: #4a423a; }
.legal-content h2 { margin: 2rem 0 .7rem; font-size: 1.1rem; letter-spacing: -.01em; }
.legal-content h3 { margin: 1.4rem 0 .5rem; font-size: .95rem; }
.legal-content p, .legal-content li { color: #5c534a; font-size: .85rem; line-height: 1.8; }
.legal-content ul { padding-left: 1.2rem; }
.legal-content a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { color: #8a7d6c; font: .62rem var(--mono); }
.legal-note { padding: 14px 16px; background: var(--cream); border-radius: 4px; font-size: .78rem; color: #5c534a; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .15s; }
.reveal-delay-2 { transition-delay: .3s; }

@media (max-width: 991.98px) {
  .hero-visual { min-height: 460px; margin-top: 2.5rem; }
}