@import "/static/fonts.css";

/* ═══════════════════════════════════════════════════════════════════
   «Обіцянка» — Фонд Солідарності з Україною
   Ідея оформлення: обіцянка як засвідчений запис. Тепле «паперове»
   тло, слабкий шрифт із характером у заголовках, червона печатка як
   єдиний акцент, тонкі лінії замість рамок і тіней.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* чорнило */
  --ink:      #10182e;
  --ink-2:    #3b4661;
  --ink-3:    #78839e;
  --ink-4:    #a2abbf;

  /* акцент Фонду */
  --red:      #ff3131;
  --red-deep: #cf1723;
  --red-wash: #fff2f1;

  /* папір */
  --paper:    #fbf9f6;
  --paper-2:  #f4f1ea;
  --card:     #ffffff;
  --rule:     #e5e0d6;
  --rule-2:   #efebe3;

  /* стани */
  --ok:       #0d7a55;
  --ok-wash:  #eefaf4;
  --ok-bright:#2ebd76;   /* печатка успіху — світліша за колір статусів */
  --wait:     #a86a06;
  --wait-wash:#fdf5e6;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow: 0 1px 2px rgba(16,24,46,.04), 0 8px 24px -12px rgba(16,24,46,.14);
  --shadow-lift: 0 2px 4px rgba(16,24,46,.05), 0 18px 40px -20px rgba(16,24,46,.28);

  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: "Fira Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: light;
}

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

html{ -webkit-text-size-adjust: 100% }

body{
  margin:0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ледь помітне зерно паперу — щоб тло не було мертвим */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity:.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ── типографіка ─────────────────────────────────────────────── */

h1, h2, h3, .display{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.14;
  margin: 0 0 .6rem;
}
h1{ font-size: clamp(2rem, 1.35rem + 2.5vw, 3rem); line-height: 1.08; letter-spacing: -.025em }
h2{ font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem) }
h3{ font-size: 1.08rem }

p{ margin: 0 0 1.1rem }
a{ color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 2px }
a:hover{ color: var(--red) }

.lead{
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  color: var(--ink-2);
  max-width: 34em;
}
.muted{ color: var(--ink-3) }
.small{ font-size: .9rem }

/* службовий підпис — маленькі великі літери з розрядкою */
.kicker{
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1 }

.money{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.money-red{ color: var(--red-deep) }

/* ── каркас ──────────────────────────────────────────────────── */

.wrap{ width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 1.5rem }
main{ flex: 1 0 auto; position: relative; z-index: 1; padding: 2.8rem 0 5rem }
.narrow{ max-width: 26rem }
.prose{ max-width: 40rem }

/* ── шапка ───────────────────────────────────────────────────── */

.site-head{
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,249,246,.88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap{
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px;
}
.brand{
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
}
.seal{
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 1px var(--red);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.brand:hover .seal{ transform: rotate(-8deg) }
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.16rem;
             color: var(--ink); letter-spacing: -.02em; line-height: 1.1 }
.brand-sub{ display: block; font-size: .74rem; color: var(--ink-3); letter-spacing: .02em;
            font-family: var(--font-body); font-weight: 400 }

.site-nav{ margin-left: auto; display: flex; align-items: center; gap: .35rem }
.site-nav a{
  color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: var(--r-sm);
}
.site-nav a:hover{ color: var(--ink); background: var(--paper-2) }
.site-nav .who{
  color: var(--ink-3); font-size: .9rem; padding-right: .5rem;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-nav form{ margin: 0; display: flex }

/* ── кнопки ──────────────────────────────────────────────────── */

.btn{
  --btn-bg: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  line-height: 1.2;
  padding: .72rem 1.4rem;
  border: 0; border-radius: var(--r);
  background: var(--btn-bg); color: #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.14) inset, 0 1px 2px rgba(16,24,46,.16);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ background: var(--red-deep); color:#fff; box-shadow: 0 2px 10px rgba(207,23,35,.3) }
.btn:active{ transform: translateY(1px) }
.btn:disabled{ opacity:.45; cursor: not-allowed; box-shadow:none }
.btn-ghost{
  background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn-ghost:hover{ background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4) }
.btn-sm{ padding: .45rem 1rem; font-size: .92rem }
.btn-lg{ padding: .85rem 1.8rem; font-size: 1.06rem }
.btn-block{ width: 100% }

/* стрілка «назад» */
.back{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .93rem; color: var(--ink-3); text-decoration: none; font-weight: 500;
  margin: 0 0 1.4rem;
}
.back:hover{ color: var(--red-deep) }

/* ── картки й панелі ─────────────────────────────────────────── */

.card{
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
}
.panel{
  background: var(--paper-2);
  border-radius: var(--r);
  padding: 1.05rem 1.2rem;
  color: var(--ink-2);
  font-size: .96rem;
}
.panel-quiet{ background: transparent; border: 1px dashed var(--rule); }
.err{
  background: var(--red-wash);
  color: #9d1420;
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
  margin: 0 0 1.3rem;
  font-size: .96rem;
}
.empty{
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-3);
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(229,224,214,.18) 12px 13px);
}

/* ── чіп статусу ─────────────────────────────────────────────── */

.chip{
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: .28rem .7rem .28rem .6rem;
  border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
  white-space: nowrap;
}
.chip::before{
  content:""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-4); flex: 0 0 auto;
}
.chip-live{ background: #eef2fb; color: #24355e } .chip-live::before{ background: #3d5aa8 }
.chip-wait{ background: var(--wait-wash); color: var(--wait) } .chip-wait::before{ background: var(--wait) }
.chip-ok{ background: var(--ok-wash); color: var(--ok) } .chip-ok::before{ background: var(--ok) }
.chip-bad{ background: var(--red-wash); color: #9d1420 } .chip-bad::before{ background: var(--red) }

/* ── головна: перший екран ───────────────────────────────────── */

.hero{ padding: 1rem 0 2.6rem; position: relative }
.hero h1{ max-width: 15ch }
.hero .lead{ margin-bottom: 1.9rem }
.hero-cta{ display: flex; gap: .8rem; flex-wrap: wrap; align-items: center }

/* печатка у кутку першого екрана */
.hero-stamp{
  position: absolute; right: 0; top: .5rem;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  transform: rotate(-9deg);
  opacity: .92;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  padding: 1rem;
  box-shadow: inset 0 0 0 5px rgba(255,49,49,.12);
}
.hero-stamp span{ display:block; font-size: .62rem; letter-spacing: .22em;
                  font-family: var(--font-body); font-weight: 600; margin-top: .25rem }
@media (max-width: 780px){ .hero-stamp{ display: none } }

/* три такти: як це працює */
.beats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  margin: 0 0 3rem;
}
.beat{
  padding: 1.2rem 1.4rem 1.3rem 0;
  border-right: 1px solid var(--rule);
}
.beat:last-child{ border-right: 0 }
.beat b{ display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.02rem }
.beat p{ margin: .25rem 0 0; font-size: .93rem; color: var(--ink-3) }
.beat i{
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  color: var(--red); font-size: .8rem; letter-spacing: .04em;
  display: block; margin-bottom: .5rem;
}
@media (max-width: 700px){
  .beats{ grid-template-columns: 1fr }
  .beat{ border-right: 0; border-bottom: 1px solid var(--rule); padding: 1rem 0 1.1rem }
  .beat:last-child{ border-bottom: 0 }
}

/* лічильники */
.figures{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; margin: 0 0 3.2rem;
}
.figure{ background: var(--card); padding: 1.3rem 1.4rem }
.figure b{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.figure span{ display: block; margin-top: .35rem }
.figure-red b{ color: var(--red-deep) }
@media (max-width: 620px){ .figures{ grid-template-columns: 1fr } }

/* заголовок секції з лінією */
.section-head{
  display: flex; align-items: baseline; gap: 1rem;
  margin: 0 0 1.3rem;
}
.section-head h2{ margin: 0 }
.section-head::after{
  content:""; flex: 1 1 auto; height: 1px; background: var(--rule);
}

/* ── список обіцянок ─────────────────────────────────────────── */

.promise-list{ display: grid; gap: 1rem }
.promise-card{
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem 1.15rem;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.promise-card::before{
  content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red); opacity: .85;
  transition: width .2s ease;
}
a.promise-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--rule-2);
}
a.promise-card:hover::before{ width: 6px }
.promise-top{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.2rem;
}
.promise-title{
  font-family: var(--font-display); font-weight: 700; font-size: 1.14rem;
  color: var(--ink); line-height: 1.3; letter-spacing: -.015em;
}
.promise-card .money{ font-size: 1.16rem }
.promise-meta{
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .6rem; color: var(--ink-3); font-size: .9rem;
}
.promise-meta .dot{ color: var(--ink-4) }

/* тонка смужка «скільки часу минуло» */
.track{
  margin-top: 1rem; height: 2px; border-radius: 2px;
  background: var(--rule-2); overflow: hidden;
}
.track i{ display: block; height: 100%; background: var(--red); opacity: .7 }


/* Клік по всій картці веде в подробиці: посилання в заголовку розтягується
   на всю картку. Усе, що всередині клікається саме по собі (кнопки, форми),
   піднімаємо над цим прозорим шаром класом .above. */
a.stretched{ color: inherit; text-decoration: none }
a.stretched::after{ content:""; position: absolute; inset: 0; z-index: 1 }
.promise-card:has(a.stretched):hover{
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
}
.promise-card:has(a.stretched:focus-visible){
  outline: 2px solid var(--red); outline-offset: 3px;
}
a.stretched:focus-visible{ outline: none }
.promise-card .above,
.promise-card form,
.promise-card .btn,
.promise-card a:not(.stretched){ position: relative; z-index: 2 }

/* ── сторінка обіцянки ───────────────────────────────────────── */

.promise-head{ margin: 0 0 2.4rem }
.promise-head h1{ max-width: 20ch; margin-bottom: .8rem }

.split{
  display: grid; grid-template-columns: minmax(0,1fr) 20.5rem;
  gap: 3rem; align-items: start;
}
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap: 2rem } }

.aside{ position: sticky; top: 90px }
@media (max-width: 900px){ .aside{ position: static } }

.record{
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.record-top{
  padding: 1.4rem 1.5rem 1.3rem;
  border-bottom: 1px dashed var(--rule);
  background:
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}
.record-top .money{ font-size: 2.15rem; display: block; line-height: 1.1 }
.record-rows{ padding: .4rem 1.5rem 1.2rem }
.record-row{
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule-2);
  font-size: .95rem;
}
.record-row:last-child{ border-bottom: 0 }
.record-row b{ color: var(--ink); font-weight: 600; text-align: right }
.record-note{
  padding: 1.05rem 1.5rem; background: var(--paper-2);
  font-size: .9rem; color: var(--ink-2);
  border-top: 1px solid var(--rule);
}

/* галерея знімків */
.shots{ display: flex; gap: .7rem; flex-wrap: wrap }
.shots img{
  width: 148px; height: 148px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--rule); display: block;
  transition: transform .2s ease;
}
.shots a:hover img{ transform: scale(1.02) }

/* блок «критерії» */
.criteria{
  white-space: pre-line;
  font-size: 1.06rem; color: var(--ink-2);
  border-left: 2px solid var(--rule);
  padding-left: 1.2rem;
}

/* ── форми ───────────────────────────────────────────────────── */

.field{ margin: 0 0 1.35rem }
label{ display: block; font-size: .92rem; font-weight: 500; color: var(--ink);
       margin: 0 0 .4rem }
label .opt{ color: var(--ink-3); font-weight: 400 }
.hint{ color: var(--ink-3); font-size: .87rem; margin-top: .45rem }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], textarea, select{
  width: 100%;
  padding: .74rem .9rem;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{ color: var(--ink-4) }
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255,49,49,.14);
}
textarea{ resize: vertical; line-height: 1.55 }
input[type=date]{ min-height: 3rem; appearance: none }
input[type=date]::-webkit-calendar-picker-indicator{ cursor: pointer; opacity: .5 }
input[type=date]:hover::-webkit-calendar-picker-indicator{ opacity: 1 }

/* поле суми з гривнею */
.amount-field{ position: relative }
.amount-field input{
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  padding: .6rem 2.6rem .6rem .9rem; font-variant-numeric: tabular-nums;
}
.amount-field::after{
  content:"₴"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  color: var(--ink-4); pointer-events: none;
}

/* вибір із двох варіантів — картками */
.choices{ display: grid; gap: .7rem }
.choice{
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: .85rem 1rem; cursor: pointer; background: var(--card);
  font-weight: 400; margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover{ border-color: var(--ink-4) }
.choice input{ margin: .3rem 0 0; accent-color: var(--red); flex: 0 0 auto }
.choice b{ display: block; color: var(--ink); font-weight: 600; font-size: .98rem }
.choice span{ display: block; color: var(--ink-3); font-size: .89rem }
.choice:has(input:checked){ border-color: var(--red); background: var(--red-wash) }

.check{
  display: flex; gap: .7rem; align-items: flex-start;
  font-weight: 400; font-size: .95rem; color: var(--ink-2); margin: 0;
}
.check input{ margin: .3rem 0 0; accent-color: var(--red); flex: 0 0 auto;
              width: 18px; height: 18px }

/* зона для знімків */
.dropzone{
  border: 1.5px dashed var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 1.3rem;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.over{ border-color: var(--red); background: var(--red-wash) }
.dropzone .filelist{ color: var(--ink-3); font-size: .9rem; margin-top: .7rem }
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}

/* ── таблиці (адмінка) ───────────────────────────────────────── */

.table-wrap{ overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg);
             background: var(--card) }
table{ width: 100%; border-collapse: collapse; font-size: .93rem }
th{
  text-align: left; font-weight: 600; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .85rem 1rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td{ padding: .8rem 1rem; border-bottom: 1px solid var(--rule-2); vertical-align: top }
tbody tr:last-child td{ border-bottom: 0 }
tbody tr:hover{ background: var(--paper) }
td.num, th.num{ font-variant-numeric: tabular-nums }
.mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem }

/* ── арбітраж ────────────────────────────────────────────────── */

.case-red{
  border: 1px solid #f6d4d4;
  background: linear-gradient(180deg, #fffafa, #fff6f5);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.35rem;
}
.msg{ padding: .7rem 0; border-bottom: 1px solid rgba(0,0,0,.05) }
.msg:last-of-type{ border-bottom: 0 }
.msg b{ font-size: .86rem; color: var(--ink); display: block }
.msg div{ white-space: pre-line }

/* ── модальне вікно ──────────────────────────────────────────── */

.modal{
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(16,24,46,.5);
  backdrop-filter: blur(3px);
}
.modal.open{ display: flex; animation: fade .18s ease both }
.modal-box{
  background: var(--card); border-radius: var(--r-lg);
  max-width: 27rem; width: 100%; padding: 1.8rem;
  box-shadow: var(--shadow-lift);
  animation: rise .25s cubic-bezier(.2,.8,.3,1) both;
}

/* ── підвал ──────────────────────────────────────────────────── */

.site-foot{
  flex: 0 0 auto; position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 2rem 0;
  font-size: .9rem; color: var(--ink-3);
}
.site-foot .wrap{ display: flex; gap: 1rem 1.6rem; flex-wrap: wrap; align-items: center }
.site-foot a{ color: var(--ink-2); text-decoration: none }
.site-foot a:hover{ color: var(--red-deep) }
.site-foot .spacer{ margin-left: auto }

/* ── рух ─────────────────────────────────────────────────────── */

@keyframes rise{ from{ opacity: 0; transform: translateY(10px) } to{ opacity: 1; transform: none } }
@keyframes fade{ from{ opacity: 0 } to{ opacity: 1 } }

.rise{ animation: rise .5s cubic-bezier(.2,.8,.3,1) both;
       animation-delay: calc(var(--i, 0) * 70ms) }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── дрібниці ────────────────────────────────────────────────── */

.stack > * + *{ margin-top: 1.4rem }
.row{ display: flex; gap: .7rem; flex-wrap: wrap; align-items: center }
.mt0{ margin-top: 0 } .mb0{ margin-bottom: 0 }
.mt2{ margin-top: 2.2rem } .mt3{ margin-top: 3rem }
hr{ border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0 }



/* ═══ головна у стилі Duolingo ═══════════════════════════════════════
   Дві колонки: сцена ліворуч, заголовок і дві кнопки одна під одною
   праворуч. Кнопки з «товстим низом» — впізнаваний прийом Duolingo,
   але кольори наші. */

.hero-duo{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 3rem;
  min-height: min(74vh, 620px);
  padding: 1rem 0 3.5rem;
}
.hero-copy h1{
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.1rem);
  line-height: 1.1;
  max-width: 13ch;
  margin-bottom: 2rem;
}
.hero-buttons{ display: grid; gap: .85rem; max-width: 22rem }

.btn-duo{
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-duo-primary{
  background: var(--red); color: #fff;
  box-shadow: 0 4px 0 var(--red-deep);
}
.btn-duo-primary:hover{ background: #ff4747; color: #fff }
.btn-duo-plain{
  background: var(--card); color: var(--ink);
  box-shadow: 0 4px 0 var(--rule), inset 0 0 0 2px var(--rule);
}
.btn-duo-plain:hover{ background: #fff; color: var(--red-deep) }
.btn-duo:active{ transform: translateY(4px); box-shadow: none }
.btn-duo:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px }

/* ── сцена: усе рухається саме по собі й ніколи не зупиняється ── */
.scene{ display: flex; justify-content: center }
.scene-svg{ width: 100%; max-width: 460px; height: auto; overflow: visible }

.fl{ animation: floaty var(--t, 6s) ease-in-out var(--d, 0s) infinite;
     transform-box: fill-box; transform-origin: center }
@keyframes floaty{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)) }
  50%     { transform: translateY(-16px) rotate(calc(var(--r, 0deg) * .3)) }
}

.seal-wrap{ animation: breathe 4.6s ease-in-out infinite;
            transform-box: fill-box; transform-origin: center }
@keyframes breathe{
  0%, 100%{ transform: scale(1) rotate(-3deg) }
  50%     { transform: scale(1.045) rotate(3deg) }
}
.seal-tick{
  stroke-dasharray: 92;
  animation: tick 4.6s ease-in-out infinite;
}
@keyframes tick{
  0%      { stroke-dashoffset: 92 }
  22%, 82%{ stroke-dashoffset: 0 }
  100%    { stroke-dashoffset: 92 }
}

.sp{ animation: spark 3.4s ease-in-out var(--d, 0s) infinite }
@keyframes spark{
  0%, 100%{ opacity: .25; transform: translateY(0) }
  50%     { opacity: 1; transform: translateY(-10px) }
}

@media (prefers-reduced-motion: reduce){
  .fl, .seal-wrap, .seal-tick, .sp{ animation: none }
  .seal-tick{ stroke-dashoffset: 0 }
}

/* ── три пояснення ── */
.feats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem;
  padding: 3.5rem 0;
  border-top: 2px solid var(--rule);
}
.feat{ text-align: center }
.feat-icon{ margin-bottom: 1rem; line-height: 0 }
.feat h3{ font-size: 1.2rem; margin-bottom: .5rem }
.feat p{ color: var(--ink-3); font-size: .98rem; max-width: 26ch; margin: 0 auto }

/* ── лічильники ── */
.figures-duo{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; padding: 2.6rem 0 3.4rem;
  border-top: 2px solid var(--rule);
  text-align: center;
}
.fig b{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.fig span{ display: block; margin-top: .35rem; color: var(--ink-3); font-size: .95rem }
.fig-red b{ color: var(--red-deep) }

.promises-duo{ padding-top: 1rem }
.promises-duo h2{ text-align: center; margin-bottom: 1.8rem }

@media (max-width: 900px){
  .hero-duo{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
    min-height: 0;
    padding-top: 0;
  }
  .hero-copy h1{ max-width: none; margin-left: auto; margin-right: auto }
  .hero-buttons{ margin: 0 auto }
  .scene-svg{ max-width: 340px }
  .feats{ grid-template-columns: 1fr; gap: 2.2rem }
  .figures-duo{ grid-template-columns: 1fr; gap: 1.6rem }
}


/* ── маскот-печатка ──────────────────────────────────────────────── */

.ms{ animation: ms-hop 2.6s ease-in-out infinite;
     transform-box: fill-box; transform-origin: 50% 92% }
@keyframes ms-hop{
  0%, 100%{ transform: translateY(0) scale(1, 1) }
  28%     { transform: translateY(-16px) scale(.985, 1.02) }
  56%     { transform: translateY(0) scale(1.03, .97) }
  70%     { transform: translateY(-4px) scale(1, 1) }
}

.ms-shadow{ animation: ms-shade 2.6s ease-in-out infinite;
            transform-box: fill-box; transform-origin: center }
@keyframes ms-shade{
  0%, 100%{ transform: scale(1); opacity: .09 }
  28%     { transform: scale(.86); opacity: .05 }
  56%     { transform: scale(1.05); opacity: .11 }
}

/* кліпає рідко й швидко — саме це робить погляд живим */
.ms-eye{ animation: ms-blink 5.2s ease-in-out infinite;
         transform-box: fill-box; transform-origin: center }
.ms-eye-2{ animation-delay: .04s }
@keyframes ms-blink{
  0%, 92%, 100%{ transform: scaleY(1) }
  95%          { transform: scaleY(.08) }
}

.ms-arm{ transform-box: fill-box; transform-origin: 85% 50% }
.ms-arm-r{ transform-origin: 15% 50%; animation: ms-wave 3.4s ease-in-out infinite }
.ms-arm-l{ animation: ms-sway 3.4s ease-in-out infinite }
@keyframes ms-wave{
  0%, 62%, 100%{ transform: rotate(0deg) }
  70%          { transform: rotate(-26deg) }
  78%          { transform: rotate(-6deg) }
  86%          { transform: rotate(-24deg) }
}
@keyframes ms-sway{
  0%, 100%{ transform: rotate(0deg) }
  50%     { transform: rotate(7deg) }
}

/* ── варіант 2: «гроші повернулися» ──────────────────────────────
   Усі частини живуть на спільному шестисекундному такті: кожна бере
   свій відрізок відсотків, тому сцена читається як одна дія. */

.story .st-coin{ animation: st-coin 6s ease-in-out infinite;
                 transform-box: fill-box; transform-origin: center }
@keyframes st-coin{
  0%      { transform: translateY(-230px); opacity: 0 }
  4%      { opacity: 1 }
  12%     { transform: translateY(0) }
  16%     { transform: translateY(-16px) }
  20%, 76%{ transform: translateY(0) }
  88%     { transform: translateY(-240px); opacity: 1 }
  94%, 100%{ transform: translateY(-240px); opacity: 0 }
}

.story .st-shackle{ transform-box: fill-box; transform-origin: 50% 100%;
                    animation: st-lock 6s ease-in-out infinite }
@keyframes st-lock{
  0%, 16%  { transform: translateY(-14px) }
  24%, 74% { transform: translateY(0) }
  80%, 100%{ transform: translateY(-14px) }
}

.story .st-ring{
  stroke-dasharray: 880;
  animation: st-ring 6s linear infinite;
}
@keyframes st-ring{
  0%, 24%  { stroke-dashoffset: 880 }
  62%      { stroke-dashoffset: 0 }
  92%      { stroke-dashoffset: 0 }
  93%, 100%{ stroke-dashoffset: 880 }
}

.story .st-seal{ transform-box: fill-box; transform-origin: center;
                 animation: st-seal 6s ease-out infinite }
@keyframes st-seal{
  0%, 62%  { transform: scale(2.4) rotate(-16deg); opacity: 0 }
  70%      { transform: scale(1) rotate(-6deg); opacity: 1 }
  74%      { transform: scale(1.06) rotate(-6deg); opacity: 1 }
  90%      { transform: scale(1) rotate(-6deg); opacity: 1 }
  95%, 100%{ transform: scale(1) rotate(-6deg); opacity: 0 }
}
.story .st-tick{ stroke-dasharray: 80; animation: st-tick 6s ease-out infinite }
@keyframes st-tick{
  0%, 70%  { stroke-dashoffset: 80 }
  78%, 94% { stroke-dashoffset: 0 }
  95%, 100%{ stroke-dashoffset: 80 }
}

.story .st-card{ transform-box: fill-box; transform-origin: center;
                 animation: st-card 6s ease-in-out infinite }
@keyframes st-card{
  0%, 66%, 100%{ transform: scale(1) }
  71%          { transform: scale(.965) }
  76%          { transform: scale(1) }
}

@media (prefers-reduced-motion: reduce){
  .ms, .ms-shadow, .ms-eye, .ms-arm,
  .story .st-coin, .story .st-shackle, .story .st-ring,
  .story .st-seal, .story .st-tick, .story .st-card{ animation: none }
  .story .st-ring{ stroke-dashoffset: 0 }
  .story .st-tick{ stroke-dashoffset: 0 }
  .story .st-seal{ opacity: 1 }
}

/* ── повернення з оплати ─────────────────────────────── */

.paid{ max-width: 31rem; margin: 1.5rem auto 0; text-align: center }
.paid .lead{ margin-left: auto; margin-right: auto }
.paid .row{ justify-content: center }
.paid .panel{ text-align: left; margin-top: 1.6rem }

.paid-mark{ display: inline-block; line-height: 0; margin-bottom: 1.5rem }
.paid-mark-ok{
  color: var(--ok-bright);
  animation: stamp .5s cubic-bezier(.2,.9,.3,1.5) both;
  filter: drop-shadow(0 12px 26px rgba(46,189,118,.34));
}
.paid-mark-wait{ color: var(--ink-4) }
.paid-mark-bad{ color: var(--red);
  filter: drop-shadow(0 12px 26px rgba(255,49,49,.28)) }
.pulse{ animation: pulse 1.9s ease-in-out infinite }

@keyframes stamp{
  from{ opacity: 0; transform: scale(.55) rotate(-14deg) }
  to  { opacity: 1; transform: none }
}
@keyframes pulse{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* полотно з конфеті лежить поверх усього, але кліки крізь нього проходять */
#confetti{
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 40;
}

@media (max-width: 560px){
  body{ font-size: 16px }
  .wrap{ padding: 0 1.1rem }
  main{ padding: 2rem 0 3.5rem }
  .card, .promise-card{ padding: 1.1rem 1.15rem }
  .record-top, .record-rows, .record-note{ padding-left: 1.15rem; padding-right: 1.15rem }
  /* на вузькому екрані шапка не має переповнюватися:
     лишаємо печатку замість повного знака й ховаємо другорядне */
  .site-head .wrap{ min-height: 58px; gap: .5rem }
  .site-nav{ gap: .1rem }
  .site-nav a{ padding: .4rem .45rem; font-size: .9rem }
  .site-nav .btn{ padding: .42rem .8rem; font-size: .9rem }
  .site-nav .who{ display: none }
  .brand-sub, .brand-name{ display: none }
  .hide-sm{ display: none }
}