/* Сайт «Витрат родини» — vytraty.app.
   Одна тема, темна: сайт продовжує застосунок, а не обрамляє його.
   Без трекерів і без зовнішніх скриптів — це частина обіцянки. */

:root {
  --bg: #0E1015; --bg2: #13161E; --card: #1A1E28; --card2: #20253166;
  --line: #262B38; --line2: #323848;
  --text: #F2F3F7; --soft: #9AA3B5; --dim: #6C7484;
  --accent: #7C8CFF; --accent-2: #5B6CF0; --accent-ink: #0E1015;
  --mint: #4FD1A5; --gold: #F2B84B; --coral: #F08A8A;
  --mint-bg: #4FD1A51A; --gold-bg: #F2B84B1A; --coral-bg: #F08A8A1A; --accent-bg: #7C8CFF1F;
  --display: "Unbounded", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --body: "Golos Text", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 20px; --r-s: 12px;
  --w: 1080px;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--body); }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }
img { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0 }
h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12 }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2 }
h3 { font-size: 18px; line-height: 1.3; font-family: var(--body); font-weight: 600 }
p { margin: 0 0 14px } p:last-child { margin-bottom: 0 }
.soft { color: var(--soft) }
.sm { font-size: 14px; color: var(--soft) }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
code { font-family: var(--mono); font-size: .92em; background: var(--card); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line) }
.wrap { max-width: var(--w); margin-inline: auto; padding-inline: 20px }
.narrow { max-width: 720px }
section { padding: 72px 0 }
@media (max-width: 640px) { section { padding: 52px 0 } }
.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 12px }

/* Шапка */
.top { position: sticky; top: 0; z-index: 10; background: #0E1015E6; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 64px }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-family: var(--display); font-size: 15px }
.brand img { width: 32px; height: 32px; border-radius: 8px }
.nav { margin-left: auto; display: flex; gap: 6px; align-items: center }
.nav a { color: var(--soft); font-size: 15px; padding: 8px 12px; border-radius: 10px }
.nav a:hover { color: var(--text); background: var(--card); text-decoration: none }
.nav a.cta { color: var(--accent-ink); background: var(--accent); font-weight: 600 }
.nav a.cta:hover { background: #8E9CFF }
@media (max-width: 720px) { .nav a:not(.cta) { display: none } }

/* Кнопки */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; font-weight: 600; font-size: 16px; border: 1px solid transparent; cursor: pointer; font-family: var(--body); line-height: 1.2 }
.btn:hover { text-decoration: none }
.btn.primary { background: var(--text); color: var(--accent-ink) }
.btn.primary:hover { background: #fff }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2) }
.btn.ghost:hover { background: var(--card) }
.btn.accent { background: var(--accent); color: var(--accent-ink) }
.btn.accent:hover { background: #8E9CFF }
.btn svg { width: 22px; height: 22px; flex: none }
.btn small { display: block; font-size: 11px; font-weight: 500; opacity: .75; letter-spacing: .02em }
.btn.store { padding: 10px 18px 10px 14px; text-align: left }
.btn.store b { display: block; font-size: 16px; font-weight: 600 }
.btn[aria-disabled="true"] { opacity: .5; cursor: default }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }

/* Герой */
.hero { padding: 64px 0 24px; position: relative; overflow: hidden }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(60% 60% at 70% 30%, #5B6CF033, transparent 70%); pointer-events: none }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--soft); margin-top: 20px; max-width: 34em }
.hero .trust { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 26px; font-size: 14px; color: var(--soft) }
.hero .trust span { display: inline-flex; align-items: center; gap: 8px }
.hero .trust svg { width: 16px; height: 16px; color: var(--mint) }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 36px } .hero { padding-top: 40px } }

/* Телефон */
.phone { width: min(320px, 78vw); margin-inline: auto; border-radius: 44px; padding: 10px; background: #1B1F29; border: 1px solid var(--line2); box-shadow: 0 30px 80px #00000080, inset 0 0 0 1px #ffffff0a; position: relative }
.phone img { border-radius: 34px; width: 100%; height: auto }
.phone.sm { width: min(240px, 60vw); border-radius: 34px; padding: 8px }
.phone.sm img { border-radius: 26px }
.hero > .wrap > .phone { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%) }
.phone .pill { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 86px; height: 26px; background: #000; border-radius: 13px }
.phones { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: nowrap }
.phones .phone.sm { width: min(220px, 46%); max-height: 460px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%) }
.phones .phone.sm:last-child { margin-top: 40px }

/* Картки відповідей */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 20px }
.card .val { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 10px; font-variant-numeric: tabular-nums }
.card .val.mint { color: var(--mint) } .card .val.gold { color: var(--gold) } .card .val.accent { color: var(--accent) }
.card .tag { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600 }
.card p { color: var(--soft); font-size: 15px }

/* Секція з двох колонок */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px } }
.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--soft) }
.checks li b { color: var(--text); font-weight: 600 }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--mint); margin-top: 2px }

/* Панель-виділення */
.panel { background: linear-gradient(135deg, #1B2036, #141720); border: 1px solid var(--line2); border-radius: 28px; padding: 40px; position: relative; overflow: hidden }
.panel::after { content: ""; position: absolute; right: -10%; top: -40%; width: 50%; height: 140%; background: radial-gradient(closest-side, #F2B84B22, transparent); pointer-events: none }
@media (max-width: 640px) { .panel { padding: 26px 20px; border-radius: 22px } }

/* Кроки */
.steps { counter-reset: s; display: grid; gap: 14px; margin-top: 28px }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px }
.step::before { counter-increment: s; content: counter(s); width: 44px; height: 44px; border-radius: 22px; background: var(--accent-bg); color: var(--accent); font-family: var(--display); font-weight: 600; display: flex; align-items: center; justify-content: center }
.step h3 { margin-bottom: 6px }
.step p { color: var(--soft); font-size: 15px }

/* Ціна */
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px }
.price .card { text-align: left }
.price .big { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 8px 0 4px }
.price .big span { font-size: 15px; font-family: var(--body); color: var(--soft); font-weight: 500; letter-spacing: 0 }
.price .best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset }
.ribbon { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 99px; margin-bottom: 8px }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 28px }
details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 18px }
summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; color: var(--soft); font-size: 22px; line-height: 1; flex: none }
details[open] summary::after { content: "–" }
details p { color: var(--soft); padding-bottom: 16px; font-size: 15px }

/* Підвал */
footer { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--soft); font-size: 14px }
footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px }
footer h4 { margin: 0 0 10px; color: var(--text); font-size: 14px; font-weight: 600 }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
footer a { color: var(--soft) } footer a:hover { color: var(--text) }
@media (max-width: 720px) { footer .wrap { grid-template-columns: 1fr } }

/* Порадник кешбеку */
.drop { display: block; border: 2px dashed var(--line2); border-radius: var(--r); padding: 36px 24px; text-align: center; background: var(--bg2); transition: border-color .15s, background .15s; cursor: pointer }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-bg) }
.drop input { display: none }
.drop .big { font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 8px }
.drop .sm { margin-top: 10px }
.result { margin-top: 28px }
.verdict { background: linear-gradient(135deg, #F2B84B26, #1A1E28 60%); border: 1px solid #F2B84B55; border-radius: 22px; padding: 26px }
.verdict .hint { color: var(--gold); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600 }
.verdict .cat { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: 8px 0 6px }
.verdict .edge { color: var(--soft); font-size: 15px }
.verdict.calm { background: var(--card); border-color: var(--line2) }
.tbl { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; font-variant-numeric: tabular-nums }
.tbl th, .tbl td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line) }
.tbl th { color: var(--dim); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase }
.tbl td.n, .tbl th.n { text-align: right; white-space: nowrap }
.tbl .bar { height: 6px; border-radius: 3px; background: var(--accent); min-width: 2px }
.tbl .barwrap { height: 6px; background: var(--line); border-radius: 3px; width: 100%; margin-top: 6px }
.tbl .gold { color: var(--gold) } .tbl .dimt { color: var(--dim) }
.wide { overflow-x: auto }
.err { background: var(--coral-bg); border: 1px solid #F08A8A55; border-radius: var(--r-s); padding: 14px 16px; color: #FBC6C6; font-size: 15px; margin-top: 16px }
.note { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px 16px; font-size: 14px; color: var(--soft); margin-top: 16px }
.howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px }
.howto div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px 16px; font-size: 14px; color: var(--soft) }
.howto b { color: var(--text); display: block; margin-bottom: 4px; font-family: var(--display); font-size: 13px }
.app-cta { margin-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--accent-bg); border: 1px solid #7C8CFF44; border-radius: var(--r); padding: 18px 20px }
.app-cta img { width: 56px; height: 56px; border-radius: 14px; flex: none }
.app-cta p { margin: 0; font-size: 15px; color: var(--soft) } .app-cta b { color: var(--text) }
.app-cta .btn { margin-left: auto }
@media (max-width: 640px) { .app-cta .btn { margin-left: 0; width: 100%; justify-content: center } }

/* Довгий текст */
.prose { max-width: 720px }
.prose h2 { margin-top: 44px; margin-bottom: 14px; font-size: 26px }
.prose h3 { margin-top: 28px; margin-bottom: 8px }
.prose p, .prose li { color: #C9CEDA }
.prose ul { padding-left: 22px } .prose li { margin-bottom: 8px }
.prose .lead { font-size: 19px; color: var(--soft) }