:root { color-scheme: light; --bg: #f6efe6; --paper: rgba(255,255,255,0.78); --ink: #34241d; --muted: #7b675d; --line: rgba(88,58,45,0.14); --accent: #b95c2e; --accent-soft: rgba(185,92,46,0.12); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Georgia", "Times New Roman", serif; color: var(--ink); background: radial-gradient(circle at top, #fff7ef 0%, var(--bg) 52%, #ebdfd2 100%); }
a, a:visited { color: var(--accent); }
a:hover { color: #9c4b23; }
.shell { max-width: 860px; margin: 0 auto; padding: 32px 18px 56px; }
.card { background: var(--paper); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 18px 60px rgba(52,36,29,0.08); overflow: hidden; }
header { padding: 30px 26px 20px; background: linear-gradient(135deg, rgba(185,92,46,0.12), rgba(255,255,255,0.24)); border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; color: var(--accent); font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 0.96; }
.subtitle { margin: 12px 0 0; color: var(--muted); font: 500 0.98rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid var(--line); font: 600 0.86rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
nav a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.home-link { margin-top: 14px; }
.home-link a { display: inline-block; text-decoration: none; padding: 10px 14px; border-radius: 999px; background: var(--accent); color: #fff; border: 1px solid var(--accent); font: 600 0.88rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { padding: 26px; }
.summary { padding: 18px 20px; border-radius: 22px; background: var(--accent-soft); border: 1px solid rgba(185,92,46,0.16); margin-bottom: 22px; }
.summary strong { display: block; margin-bottom: 6px; font: 700 0.95rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
section + section { margin-top: 22px; }
h2 { margin: 0 0 10px; font-size: 1.18rem; }
p, li { margin: 0 0 12px; font: 0.98rem/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
ul { margin: 0; padding-left: 20px; }
footer { padding: 0 26px 26px; color: var(--muted); font: 0.84rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.product { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: center; }
.product img { width: 100%; border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 10px; }
.banner { margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.banner img { width: 100%; display: block; }
.banner p { margin: 0; padding: 10px 12px; font: 0.88rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.65); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.links a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid var(--line); font: 600 0.86rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.links a:hover { border-color: var(--accent); color: var(--accent); }
.app-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: center; }
.app-card img { width: 100%; border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 10px; }
.logo-wrap { margin-top: 16px; }
.logo-wrap img { width: 112px; border-radius: 22px; border: 1px solid var(--line); background: #fff; padding: 10px; }
@media (max-width: 640px) { .shell { padding: 16px 12px 32px; } header, main, footer { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 640px) { .product, .app-card { grid-template-columns: 1fr; gap: 12px; } }