/* =========================================================================
   ВІТРИНА МФО — UA
   ========================================================================= */

:root{
  --bg:#EEF2FF;
  --surface:#FFFFFF;
  --ink:#1E1B4B;
  --ink-2:#3F3D7A;
  --muted:#6B7280;
  --line:#E9EDFB;
  --brand:#4F46E5;
  --brand-soft:#E0E7FF;
  --ok:#16A34A;
  --ok-soft:#DCFCE7;
  --warn-bg:#FFF8E8;
  --warn-line:#FCD34D;
  --cta-1:#FFD34E;
  --cta-2:#F59E0B;
  --radius:18px;
  --shadow:0 6px 18px rgba(79,70,229,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.45;
  padding-bottom:8px;
}
img{max-width:100%;display:block}
button{font:inherit}

/* ---------- шапка (на всю ширину екрана) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;width:100%;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(30,27,75,.05);
}
.topbar-in{
  max-width:760px;margin:0 auto;padding:9px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.brand{display:block;flex:0 1 auto;min-width:0}
.brand img{height:30px;width:auto}
.brand .logo-dark{display:none}
.topbar-geo{
  flex:none;
  font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--brand-soft);border-radius:999px;padding:5px 10px;white-space:nowrap;
}

/* ---------- каркас ---------- */
.app{max-width:760px;margin:0 auto;padding:0 12px 24px}

/* ---------- хедлайн ---------- */
.hero{text-align:center;padding:14px 4px 6px}
.found{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow);
}
.found b{color:var(--brand);font-size:15px}
.dot{
  width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.8s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.hero h1{margin:12px 6px 0;font-size:19px;line-height:1.35;font-weight:800;letter-spacing:-.3px}
.hero h1 .hl{background:linear-gradient(180deg,transparent 62%,#FDE68A 62%);padding:0 3px}

/* ---------- порада ---------- */
.tip{
  display:flex;gap:8px;align-items:center;
  margin:12px 0 14px;padding:9px 12px;
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-left:4px solid #F59E0B;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(245,158,11,.12);
}
.tip i{font-style:normal;font-size:16px;line-height:1;flex:none}
.tip p{margin:0;font-size:12.5px;line-height:1.35;color:#5B4400}
.tip b{color:#7A3E00;font-weight:700}
.tip .tip-max{color:#15803D;font-weight:900}

/* ---------- сітка ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);
  animation:rise .45s ease forwards;
}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none;opacity:1;transform:none}}

/* перші офери — теплий акцент */
.card.is-top{
  background:linear-gradient(180deg,#FFF1E3,#FFFCF8);
  border-color:#FDBA74;
  box-shadow:0 8px 22px rgba(234,88,12,.18);
}
.card.is-top .row+.row{border-top-color:#FBD9B5}
.card.is-top .appr{background:#fff;color:#15803D}

/* пульсуючий обідок — окремим шаром, щоб не збити анімацію появи картки */
.card.is-top::after{
  content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;
  border:2px solid #FB923C;border-radius:var(--radius);
  animation:topRing 2.8s ease-in-out infinite;
}
.grid > .card.is-top:nth-child(2)::after{animation-delay:.5s}
.grid > .card.is-top:nth-child(3)::after{animation-delay:1s}
@keyframes topRing{
  0%,100%{box-shadow:0 0 0 0 rgba(251,146,60,.45)}
  55%    {box-shadow:0 0 0 7px rgba(251,146,60,0)}
}
.card.is-top.is-used::after{display:none}

/* плашка ТОП — помітніша */
.card.is-top .mark-top{
  background:#FFEDD5;color:#C2410C;
  padding:3px 7px;border-radius:999px;font-size:10px;letter-spacing:.2px;
}

/* блик по кнопці топових оферів */
.card.is-top .cta{position:relative;overflow:hidden}
.card.is-top .cta::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  animation:hotSweep 3.2s ease-in-out infinite;
}
.grid > .card.is-top:nth-child(2) .cta::after{animation-delay:.6s}
.grid > .card.is-top:nth-child(3) .cta::after{animation-delay:1.2s}
.card.is-top.is-used .cta::after{display:none}

/* банер з лого */
.logo{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:16/7;display:grid;place-items:center;text-align:center;padding:6px;
}
.logo-text{font-weight:900;font-size:clamp(15px,4.6vw,21px);letter-spacing:-.4px;line-height:1}
.logo-sub{font-size:9.5px;font-weight:600;opacity:.85;margin-top:3px;letter-spacing:.2px}
.logo-img{background:#fff;border:1px solid var(--line);padding:7px}
.logo-img img{
  /* Абсолютне позиціонування, а не grid-елемент: у grid відсоткова height
     не резолвиться, картинка розтягувалась за своїми пропорціями і вилазила
     за низ банера. Тут коробка точно дорівнює банеру мінус падінг.
     --ls: масштаб лого (1 = на всю ширину, 0.6 = −40%). */
  position:absolute;top:7px;left:7px;
  width:calc(100% - 14px);height:calc(100% - 14px);
  object-fit:contain;object-position:center;
  transform:scale(var(--ls,1));
}

/* рядок: схвалення + ТОП / рейтинг */
.meta{
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  margin-top:9px;
}
.appr{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px;border-radius:999px;
  background:var(--ok-soft);color:#15803D;
  font-size:10.5px;font-weight:500;white-space:nowrap;
}
.appr::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}
.appr b{font-weight:800}

.mark{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  font-size:10.5px;font-weight:800;white-space:nowrap;
}
.mark svg{width:12px;height:12px;flex:none}
.mark-top{color:#EA580C}
.mark-rate{color:var(--ink)}

/* рядки умов */
.rows{margin:8px 0 10px;font-size:12px}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:4px 0}
.row+.row{border-top:1px dashed var(--line)}
.row span{color:var(--muted);white-space:nowrap}
.row b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.row b i{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}

/* кнопка */
.cta{
  margin-top:auto;width:100%;border:0;cursor:pointer;
  display:block;text-align:center;text-decoration:none;
  padding:11px 6px;border-radius:999px;
  background:linear-gradient(180deg,var(--cta-1),var(--cta-2));
  color:#3B2500;font-weight:600;font-size:11.5px;letter-spacing:.3px;text-transform:uppercase;
  box-shadow:0 6px 14px rgba(245,158,11,.38);
  transition:transform .12s ease,box-shadow .12s ease;
}
.cta:active{transform:translateY(2px);box-shadow:0 3px 8px rgba(245,158,11,.34)}

/* стан «заявку відкрито» */
.card.is-used{border-color:#BBF7D0;background:#FBFFFC}
.card.is-used .cta{background:#F1F5F9;color:#475569;box-shadow:none}
.card.is-used .logo::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(22,163,74,.82);color:#fff;font-size:26px;font-weight:900;
}

/* ---------- низ ---------- */
.foot{margin:18px 2px 0;font-size:11px;line-height:1.5;color:#8B90A8;text-align:center}
.legal{
  margin:8px 2px 4px;display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:6px;font-size:10.5px;color:#A6AABE;
}
.legal a{color:#A6AABE;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--brand)}

@media (min-width:560px){
  .brand img{height:38px}
  .hero h1{font-size:22px}
  .grid{gap:16px}
  .card{padding:12px}
  .cta{font-size:13px;padding:13px 8px}
  .rows{font-size:13px}
  .row b{font-size:15px}
  .row b i{font-size:13px}
  .logo-sub{font-size:11px}
  .appr,.mark{font-size:12px}
}

@media (max-width:420px){
  .meta{gap:3px}
  .appr,.mark{font-size:10px}
  .appr{padding:3px 6px;gap:4px}
}
@media (max-width:359px){
  .appr,.mark{font-size:9px}
  .card{padding:9px}
}

/* =========================================================================
   ПРОМО-ПОПАП
   ========================================================================= */
body.no-scroll{overflow:hidden}

.ov[hidden]{display:none}        /* інакше display:grid перебиває [hidden] */
.ov{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:18px;
  background:rgba(15,18,40,.62);backdrop-filter:blur(3px);
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.promo{
  position:relative;width:100%;max-width:380px;
  background:var(--surface);border-radius:22px;padding:24px 20px 20px;
  text-align:center;box-shadow:0 24px 60px rgba(15,18,40,.4);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.promo-x{
  position:absolute;top:8px;right:10px;width:30px;height:30px;
  border:0;background:transparent;color:var(--muted);
  font-size:24px;line-height:1;cursor:pointer;border-radius:50%;
}
.promo-x:hover{background:var(--brand-soft);color:var(--ink)}

.promo-badge{
  display:inline-block;background:#FFEDD5;color:#C2410C;
  font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.promo h2{margin:12px 0 2px;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.3px}
.promo-sub{margin:0;font-size:14px;color:var(--muted);font-weight:500}

.promo-timer{
  margin:14px auto 0;display:inline-block;
  font-size:36px;font-weight:900;letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  color:#DC2626;
  background:#FEF2F2;border:1px solid #FECACA;
  border-radius:14px;padding:6px 20px;
}

.promo-note{
  display:flex;gap:9px;align-items:flex-start;text-align:left;
  margin:16px 0 16px;padding:11px 13px;
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:13px;
  font-size:13px;line-height:1.4;color:#5B4400;
}
.promo-note i{font-style:normal;font-size:19px;line-height:1.1;flex:none}
.promo-cta{margin:0;font-size:14px;padding:14px 10px}

/* смужка з таймером після активації.
   --strip-drop — наскільки опустити її нижче шапки */
.promo-strip{
  --strip-drop:50px;           /* на скільки опущена, поки сторінка не прокручена */
  /* у спокої — на 100px нижче шапки; щойно юзер скролить — прилипає
     одразу під шапку (--hdr рахується зі скрипта) */
  position:sticky;top:var(--hdr,57px);z-index:29;
  margin-top:var(--strip-drop);
  background:linear-gradient(90deg,#F59E0B,#EA580C);color:#fff;
  font-size:12px;font-weight:600;text-align:center;padding:7px 12px;
}
.promo-strip b{font-variant-numeric:tabular-nums;font-weight:900}

/* =========================================================================
   СОЦ-ДОКАЗ
   ========================================================================= */
.social{
  position:fixed;right:12px;top:62px;z-index:60;   /* top уточнюється зі скрипта */
  display:flex;align-items:center;gap:10px;
  width:min(240px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:8px 10px 8px 8px;
  box-shadow:0 10px 30px rgba(30,27,75,.18);
  opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.social.is-on{opacity:1;transform:none}
.social-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:var(--brand-soft)}
.social-av svg{width:100%;height:100%;display:block}
.social-txt{min-width:0;flex:1}
.social-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.social-top b{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-time{font-size:10px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.social-meta{font-size:10px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-sum{font-size:10.5px;color:var(--muted);margin-top:3px}
.social-sum b{color:#16A34A;font-weight:900;font-size:12px}

@media (prefers-reduced-motion:reduce){
  .ov,.promo,.social{animation:none;transition:none}
}

/* =========================================================================
   ТЕМНА ТЕМА (вмикається кнопкою в попапі)
   ========================================================================= */
body.dark{
  --bg:#0B0F20;
  --surface:#151A32;
  --ink:#EEF1FF;
  --ink-2:#B9C0EA;
  --muted:#8B93C0;
  --line:#262C50;
  --brand:#93A4FF;
  --brand-soft:#232A52;
  --ok-soft:#10331F;
  --warn-bg:#241C08;
  --warn-line:#7A5A12;
  --cta-1:#4ADE80;
  --cta-2:#16A34A;
  --shadow:0 6px 18px rgba(0,0,0,.45);
}
body.dark .topbar{background:#121736;border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(0,0,0,.4)}
body.dark .brand .logo-light{display:none}
body.dark .brand .logo-dark{display:block}
body.dark .found{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
body.dark .hero h1 .hl{background:linear-gradient(180deg,transparent 62%,rgba(74,222,128,.35) 62%)}
body.dark .tip{color:#F0D9A6;box-shadow:none}
body.dark .tip b{color:#FFCF7A}
body.dark .tip .tip-max{color:#5EEAD4}
body.dark .card{background:var(--surface);border-color:var(--line)}
body.dark .card.is-top{
  background:linear-gradient(180deg,#2A2036,#191E38);
  border-color:#7C5CCB;box-shadow:0 8px 24px rgba(124,92,203,.28);
}
body.dark .card.is-top .row+.row{border-top-color:#3A3160}
body.dark .card.is-top .appr{background:var(--ok-soft)}
body.dark .appr{color:#6EE7A0}
body.dark .mark-top{color:#FDBA74}
body.dark .mark-rate{color:var(--ink)}
body.dark .cta{color:#052E16;box-shadow:0 6px 16px rgba(22,163,74,.45)}
body.dark .card.is-used{background:#13261B;border-color:#1E5033}
body.dark .card.is-used .cta{background:#232A52;color:#8B93C0;box-shadow:none}
body.dark .foot{color:#6E76A0}
body.dark .legal,body.dark .legal a{color:#6E76A0}
body.dark .legal a:hover{color:var(--brand)}
body.dark .social{box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.dark .social-sum b{color:#4ADE80}
body.dark .promo{background:var(--surface)}
body.dark .promo-badge{background:#3A2412;color:#FDBA74}
body.dark .promo-timer{background:#2A1417;border-color:#7F2A2E;color:#FCA5A5}
body.dark .promo-note{color:#F0D9A6}
/* лого компаній завжди на білому — інакше частина з них зникне */
body.dark .logo-img{background:#fff;border-color:#2E3562}

/* =========================================================================
   ГАРЯЧИЙ РЕЖИМ (після активації спецпропозиції)
   — прибираємо шапку-хедлайн і пораду
   — лишаємо 6 карток, підсвічуємо їх
   ========================================================================= */
.hot-head[hidden]{display:none}
.hot-head{padding:16px 6px 40px;text-align:center}   /* 10px + 30px відступу під заголовком */
.hot-head h1{
  margin:0;font-size:24px;line-height:1.2;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(92deg,#FDE047,#FB923C 55%,#F43F5E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

body.dark .hero,
body.dark .tip{display:none}

/* лише перші 6 оферів */
body.dark .grid > .card:nth-child(n+7){display:none}

/* підсвічування «гарячих» карток */
@keyframes hotPulse{
  0%,100%{box-shadow:0 0 0 1.5px rgba(251,146,60,.55), 0 8px 24px rgba(249,115,22,.22)}
  50%    {box-shadow:0 0 0 2.5px rgba(253,224,71,.95), 0 12px 34px rgba(249,115,22,.5)}
}
@keyframes hotSweep{
  0%  {transform:translateX(-120%)}
  60% ,100%{transform:translateX(220%)}
}

body.dark .grid > .card{
  background:linear-gradient(180deg,#2B2135,#191E38);
  border-color:#FB923C;
  /* hotPulse замінює анімацію появи — тому стан «проявлено» ставимо явно */
  opacity:1;transform:none;
  animation:hotPulse 2.4s ease-in-out infinite;
}
body.dark .grid > .card:nth-child(2){animation-delay:.35s}
body.dark .grid > .card:nth-child(3){animation-delay:.7s}
body.dark .grid > .card:nth-child(4){animation-delay:1.05s}
body.dark .grid > .card:nth-child(5){animation-delay:1.4s}
body.dark .grid > .card:nth-child(6){animation-delay:1.75s}

body.dark .grid > .card .row+.row{border-top-color:#463A63}
body.dark .grid > .card .appr{background:#12331F;color:#7BF0AC}
body.dark .grid > .card .mark-rate{color:#FDE047}
body.dark .grid > .card .mark-top{color:#FB923C}

/* блик по кнопці */
body.dark .grid > .card .cta{position:relative;overflow:hidden}
body.dark .grid > .card .cta::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:hotSweep 2.6s ease-in-out infinite;
}
body.dark .grid > .card:nth-child(even) .cta::after{animation-delay:1.3s}

body.dark .card.is-top::after{display:none}
body.dark .card.is-top .mark-top{background:transparent;color:#FB923C;padding:0}

/* натиснуту картку не «гріємо» */
body.dark .grid > .card.is-used{
  animation:none;background:#13261B;border-color:#1E5033;box-shadow:none;
}
body.dark .grid > .card.is-used .cta::after{display:none}

@media (prefers-reduced-motion:reduce){
  body.dark .grid > .card{animation:none;box-shadow:0 0 0 2px rgba(251,146,60,.8)}
  body.dark .grid > .card .cta::after{display:none}
}