:root { --b: #007aff; --g: #8e8e93; }
body { font-family: system-ui; margin: 0; display: flex; flex-direction: column; height: 100dvh; }
.container { max-width: 480px; margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column; }
/* Кнопки */
.btn { padding: 12px 20px; border-radius: 12px; border: 1px solid var(--b); background: var(--b); color: #fff; cursor: pointer; }
.btn-outline { background: #fff; color: var(--b); }

.landing-page { font-family: sans-serif; line-height: 1.6; color: #333; }

.navbar { display: flex; justify-content: space-between; padding: 20px 5%; align-items: center; }

.hero { text-align: center; padding: 100px 20px; background: #f4f7f6; }
.hero h1 { font-size: 3rem; margin-bottom: 20px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 50px 5%; }
.feature-card { padding: 20px; border: 1px solid #ddd; border-radius: 8px; transition: 0.3s; }
.feature-card:hover { border-color: #007bff; }

.btn-primary { background: #007bff; color: white; padding: 12px 30px; border: none; border-radius: 5px; cursor: pointer; }
.btn-outline { background: transparent; border: 1px solid #007bff; padding: 8px 20px; border-radius: 5px; cursor: pointer; }

.footer { text-align: center; padding: 40px; border-top: 1px solid #eee; margin-top: 50px; }