/* SellUp — світла тепла тема.
   Задача протилежна до «панелі»: сайт має читатись як розмова з людиною,
   яка рахує ваші гроші. Тому папір, серіфні заголовки, м'які картки. */

:root {
    --paper:     #FFF9F2;
    --paper-2:   #FFFFFF;
    --paper-3:   #FDF1E3;
    --ink:       #17120D;
    --ink-soft:  #5C5248;   /* 7.1:1 на --paper */
    --ink-faint: #8A7D70;
    --rule:      #E9DCCB;
    --rule-soft: #F2E8DA;

    --hot:       #D8431F;   /* дія, акцент */
    --hot-dark:  #B5330F;
    --hot-tint:  #FCEAE4;
    --money:     #0E5C45;   /* прибуток, підтвердження */
    --money-tint:#E4F1EB;

    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 9px;

    --shadow: 0 1px 2px rgba(80,55,30,.05), 0 8px 24px -12px rgba(80,55,30,.18);
    --shadow-lift: 0 2px 4px rgba(80,55,30,.06), 0 18px 40px -18px rgba(80,55,30,.28);

    --page: 1180px;
    --pad: clamp(20px, 5vw, 56px);

    --serif: 'Literata', Georgia, serif;
    --sans:  'Golos Text', 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Тепле світло по кутах — щоб сторінка не була пласким кремовим прямокутником. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 12% 0%, rgba(216,67,31,.06), transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 12%, rgba(14,92,69,.05), transparent 60%);
}

.page { position: relative; z-index: 1; }

.inner { max-width: var(--page); margin: 0 auto; padding-inline: var(--pad); }

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.015em;
    margin: 0;
}

p { margin: 0; }

/* ——— Кнопки ————————————————————————————————————————————————— */

.b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 15px 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease,
                border-color .16s ease, box-shadow .16s ease;
}

.b--hot { background: var(--hot); color: #fff; box-shadow: var(--shadow); }
.b--hot:hover { background: var(--hot-dark); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.b--line { border-color: var(--rule); background: var(--paper-2); color: var(--ink); }
.b--line:hover { border-color: var(--hot); color: var(--hot); }

.b:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--hot);
    outline-offset: 2px;
}

/* ——— Шапка у два рядки ——————————————————————————————————————
   Верхня смужка несе обіцянку, яку інакше довелось би повторювати в кожному
   першому екрані; нижній рядок — навігація. */

.strip {
    background: var(--ink);
    color: #F6EDE2;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
}

.strip__in {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    padding-block: 9px;
}

.strip b { color: #FFC9B6; font-weight: 600; }

.top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 249, 242, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
}

.top__in { display: flex; align-items: center; gap: 24px; height: 76px; }

.brand {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.44rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.brand i { font-style: normal; color: var(--hot); }

.menu { display: flex; gap: 24px; margin-left: auto; font-size: 0.95rem; }

.menu a { color: var(--ink-soft); text-decoration: none; padding-block: 6px; }
.menu a:hover { color: var(--hot); }
.menu a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--hot); }

.top .b { min-height: 44px; padding: 10px 20px; font-size: .9rem; }

@media (max-width: 940px) {
    .menu { display: none; }
    .top .b { margin-left: auto; }
}

/* ——— Перший екран ——————————————————————————————————————————— */

.lede { padding: clamp(44px, 7vw, 88px) 0 clamp(32px, 4vw, 52px); text-align: center; }

.tag {
    display: inline-block;
    background: var(--hot-tint);
    color: var(--hot-dark);
    border-radius: 999px;
    padding: 7px 17px;
    font-size: .84rem;
    font-weight: 600;
    margin-bottom: 22px;
}

.lede h1 {
    font-size: clamp(2.3rem, 5.4vw, 4.1rem);
    max-width: 17ch;
    margin: 0 auto 22px;
}

.lede h1 span {
    color: var(--hot);
    /* Слід маркера, а не підкреслення: на переносі рядка підкреслення
       розсипається на окремі шматки разом із пробілами, а заливка
       повторюється цілою плямою на кожному рядку. */
    background: linear-gradient(180deg,
        transparent 62%, rgba(216, 67, 31, .18) 62%, rgba(216, 67, 31, .18) 94%,
        transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: .06em;
}

.lede p.big {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 58ch;
    margin: 0 auto 32px;
}

.lede__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.lede__fine { margin-top: 18px; font-size: .88rem; color: var(--ink-faint); }

/* ——— Смуга показників ——————————————————————————————————————— */

.stats {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    margin-bottom: clamp(40px, 6vw, 80px);
}

.stat { padding: clamp(24px, 3vw, 34px); border-right: 1px solid var(--rule-soft); text-align: center; }
.stat:last-child { border-right: 0; }

.stat b {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--money);
    line-height: 1;
    margin-bottom: 9px;
}

.stat span { font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 820px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

/* ——— Секції ————————————————————————————————————————————————— */

section { padding: clamp(52px, 8vw, 96px) 0; }

.sect__head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 48px); }

.eyebrow {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hot);
    margin-bottom: 14px;
}

.sect__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); margin-bottom: 14px; }
.sect__head p { color: var(--ink-soft); font-size: 1.04rem; }

/* Послуги */

.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.svc__item {
    display: block;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 32px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.svc__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #E0CDB6; }

.svc__ico {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--hot-tint);
    color: var(--hot-dark);
    margin-bottom: 18px;
}

.svc__item h3 { font-size: 1.2rem; margin-bottom: 10px; }
.svc__item p { color: var(--ink-soft); font-size: .96rem; }

.more {
    display: inline-block;
    margin-top: 16px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--hot);
}
.more::after { content: ' →'; }

/* Етапи */

.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.flow__s {
    background: var(--paper-3);
    border-radius: var(--r-lg);
    padding: clamp(22px, 2.6vw, 30px);
    position: relative;
}

.flow__n {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 700;
    color: rgba(216, 67, 31, .28);
    line-height: 1;
    margin-bottom: 10px;
}

.flow__s h3 { font-size: 1.1rem; margin-bottom: 8px; }
.flow__s p { color: var(--ink-soft); font-size: .93rem; }

/* Дві колонки */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }

@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }

.ticks { list-style: none; margin: 0; padding: 0; }

.ticks li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 1rem;
}

.ticks svg { color: var(--money); margin-top: 4px; }
.ticks b { display: block; }
.ticks span { color: var(--ink-soft); font-size: .92rem; }

/* Тарифи */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 18px; }

.plan {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 30px);
    box-shadow: var(--shadow);
}

.plan--star { border: 2px solid var(--hot); position: relative; }

.plan--star::after {
    content: 'Найчастіше';
    position: absolute;
    top: -12px; left: 24px;
    background: var(--hot);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

.plan__name { font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }

.plan__price { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.plan__price small { font-size: .95rem; font-weight: 400; color: var(--ink-soft); }

.plan__unit { font-size: .92rem; color: var(--ink-soft); margin-bottom: 16px; }

.plan ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--ink-soft); }
.plan li { padding: 7px 0 7px 20px; position: relative; }
.plan li::before { content: '•'; position: absolute; left: 4px; color: var(--hot); }

.pricenote {
    margin-top: 24px;
    background: var(--money-tint);
    border-radius: var(--r-md);
    padding: 20px 24px;
    font-size: .98rem;
    color: #17402F;
}
.pricenote a { color: var(--money); font-weight: 600; }

/* Питання */

.qa details {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    overflow: hidden;
}

.qa summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 52px 20px 24px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.06rem;
    position: relative;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
    content: '+';
    position: absolute;
    right: 22px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--hot);
    line-height: 1;
}

.qa details[open] summary::after { content: '–'; }
.qa p { padding: 0 24px 22px; color: var(--ink-soft); max-width: 78ch; }

/* ——— Заявка ————————————————————————————————————————————————— */

.apply {
    background: var(--ink);
    color: #F7EFE5;
    border-radius: var(--r-lg);
    padding: clamp(28px, 5vw, 56px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: start;
}

.apply h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 14px; }
.apply > div > p { color: #D7C8B8; margin-bottom: 22px; }

.apply ul { list-style: none; margin: 0; padding: 0; font-size: .96rem; color: #D7C8B8; }
.apply ul li { padding: 9px 0 9px 26px; position: relative; }
.apply ul li::before { content: '✓'; position: absolute; left: 0; color: #FFC9B6; font-weight: 700; }

.fld { margin-bottom: 15px; }

.fld label { display: block; font-size: .86rem; font-weight: 600; color: #C9B8A6; margin-bottom: 7px; }

.fld input, .fld textarea {
    width: 100%;
    background: #221C16;
    border: 1px solid #3A312A;
    border-radius: var(--r-sm);
    color: #FBF5EE;
    font-family: var(--sans);
    font-size: 1rem;
    padding: 14px 15px;
}

.fld input:focus, .fld textarea:focus { border-color: var(--hot); outline: none; }
.fld textarea { resize: vertical; min-height: 92px; }

.agree { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .82rem; color: #A99A8B; margin: 16px 0 20px; }
.agree input { margin-top: 3px; accent-color: var(--hot); width: 17px; height: 17px; }
.agree a { color: #D7C8B8; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.frm .b--hot { width: 100%; }

.frm__say { margin-top: 14px; font-size: .92rem; min-height: 1.4em; color: #FFC9B6; }
.frm__say[data-kind="ok"] { color: #9EE6C4; }

@media (max-width: 880px) { .apply { grid-template-columns: 1fr; } }

/* ——— Підвал ————————————————————————————————————————————————— */

.sitemap { border-top: 1px solid var(--rule); padding: clamp(36px, 5vw, 56px) 0 8px; }
.sitemap__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; }
.sitemap h3 { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li { margin-bottom: 9px; }
.sitemap a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.sitemap a:hover { color: var(--hot); }

.base { padding: 30px 0 48px; color: var(--ink-faint); font-size: .87rem; }
.base__in { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; }
.base a { color: var(--ink-soft); text-decoration: none; }
.base a:hover { color: var(--hot); }
.base__end { margin-left: auto; }

/* ——— Поява ——————————————————————————————————————————————————— */

.js .up { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.up.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .up { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ——— Текстові сторінки ————————————————————————————————————————
   Тут читають, а не сканують. Вужча колонка, більший інтерліньяж,
   заголовки без зайвого пафосу. */

.crumb {
    border-bottom: 1px solid var(--rule-soft);
    padding: 13px 0;
    font-size: .85rem;
    color: var(--ink-faint);
}
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--hot); }
.crumb span { color: var(--rule); }
.crumb [aria-current] { color: var(--ink); }

.intro { display: grid; gap: 15px; max-width: 64ch; }
.intro p { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-soft); }
.intro strong { color: var(--ink); font-weight: 600; }

.stamp { margin-top: 22px; font-size: .88rem; color: var(--ink-faint); }

.body { padding-top: clamp(20px, 3vw, 34px); }
.body__in { max-width: 72ch; }

.body h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin: clamp(38px, 5vw, 58px) 0 16px;
    padding-top: clamp(26px, 4vw, 38px);
    border-top: 1px solid var(--rule);
}
.body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.body p { margin-bottom: 15px; color: var(--ink-soft); font-size: 1.03rem; }
.body strong { color: var(--ink); font-weight: 600; }
.body a { color: var(--hot-dark); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.body a:hover { text-decoration-thickness: 2px; }

.dots { list-style: none; margin: 18px 0; padding: 0; }
.dots li {
    position: relative;
    padding: 11px 0 11px 26px;
    border-bottom: 1px dashed var(--rule);
    color: var(--ink-soft);
}
.dots li::before {
    content: '';
    position: absolute;
    left: 4px; top: 21px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hot);
}

.walk { list-style: none; margin: 20px 0; padding: 0; counter-reset: w; }
.walk li {
    counter-increment: w;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--rule);
}
.walk li::before {
    content: counter(w);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--hot-tint);
    color: var(--hot-dark);
    font-weight: 700;
    font-size: .88rem;
}
.walk b { display: block; margin-bottom: 3px; }
.walk span { color: var(--ink-soft); font-size: .95rem; }

/* Таблиця. На вузькому екрані прокручується сама таблиця, а не сторінка. */
.tscroll {
    overflow-x: auto;
    margin: 22px 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-2);
}
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.tbl th {
    text-align: left;
    padding: 14px 16px;
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--ink); font-weight: 600; }
.tbl a { color: var(--hot-dark); }

.pull {
    margin: 26px 0;
    padding: 22px 26px;
    background: var(--money-tint);
    border-left: 4px solid var(--money);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #12362A;
}

.svc__item .stamp { margin: 0 0 10px; font-size: .82rem; color: var(--hot); font-weight: 600; }

/* ——— Цілі для пальця ——————————————————————————————————————————
   Хлібні крихти були заввишки 14 px. Поля роблять рядок вищим, вигляд
   при цьому не змінюється. */

.crumb a, .crumb [aria-current] {
    display: inline-block;
    padding-block: 9px;
}

.agree input { width: 22px; height: 22px; }

/* Рядок згоди — це ціль для дотику, а не просто текст. */
.agree { min-height: 44px; align-items: center; padding-block: 4px; }
.agree input { margin-top: 0; }

/* Посилання в карті сайту — навігація, по якій тикають пальцем. */
.sitemap a, .base a { display: inline-block; padding-block: 6px; }
.sitemap li { margin-bottom: 2px; }

/* ——— Меню на телефоні ————————————————————————————————————————
   Розкривається прапорцем і міткою, без скрипта: навігація не повинна
   залежати від того, чи виконався JS. Раніше нижче 940 px меню просто
   зникало, і з телефона до тарифів можна було дійти лише через підвал. */

.navbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lines {
    display: none;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: 2px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    cursor: pointer;
    position: relative;
    flex: none;
}

.lines span,
.lines span::before,
.lines span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform: translateX(-50%);
    transition: transform .2s ease, background-color .2s ease;
}

.lines span { top: 50%; margin-top: -1px; }
.lines span::before { top: -6px; left: 0; transform: none; }
.lines span::after  { top: 6px;  left: 0; transform: none; }

.navbox:checked + .lines { border-color: var(--hot); }
.navbox:checked + .lines span { background: transparent; }
.navbox:checked + .lines span::before { transform: translateY(6px) rotate(45deg); background: var(--hot); }
.navbox:checked + .lines span::after  { transform: translateY(-6px) rotate(-45deg); background: var(--hot); }

.navbox:focus-visible + .lines { outline: 3px solid var(--hot); outline-offset: 2px; }

.menu__cta { display: none; }

@media (max-width: 940px) {
    .top__in { position: relative; }
    .lines { display: block; }

    .menu {
        display: block;
        position: absolute;
        top: calc(100% + 8px);
        left: var(--pad);
        right: var(--pad);
        margin: 0;
        background: var(--paper-2);
        border: 1px solid var(--rule);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-lift);
        /* Ховаємо висотою, а не display: посилання лишаються в розмітці. */
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height .25s ease, padding .25s ease;
    }

    .navbox:checked ~ .menu {
        max-height: 70vh;
        overflow-y: auto;
        padding: 8px 0;
    }

    .menu a {
        display: block;
        padding: 14px 22px;
        color: var(--ink);
        font-size: 1.02rem;
    }

    .menu a:hover { background: var(--paper-3); color: var(--hot); }
    .menu a[aria-current] { box-shadow: none; color: var(--hot); font-weight: 600; }

    .menu__cta {
        display: block;
        color: var(--hot) !important;
        font-weight: 700;
        border-top: 1px solid var(--rule);
        margin-top: 6px;
    }

    .top .b { margin-left: 10px; }
}

/* На вузьких екранах кнопка в шапці тиснула назву — лишаємо значок і
   меню, а заявка доступна прямо з меню. */
@media (max-width: 420px) {
    .top .b { display: none; }
}