/* Фундація Множина — закрита система. Палітра і типографіка з mnozhyna.foundation */

:root{
  --blue:        #4671B9;
  --blue-light:  #507BC3;
  --blue-deep:   #38598F;
  --bg:          #F7F7F7;
  --ink:         #2E2E2E;
  --ink-soft:    #6B7280;
  --accent:      #FBB936;
  --accent-soft: #FFDA91;
  --line:        #E4E7EC;
  --ok:          #2E9E6B;
  --err:         #D7483B;
  --radius:      18px;

  /* єдині криві плавності */
  --ease:      cubic-bezier(.22,.9,.28,1);    /* м'який виліт */
  --ease-soft: cubic-bezier(.33,0,.2,1);      /* рівний перехід */
  --t-fast:    .28s;
  --t-base:    .45s;
  --t-slow:    .7s;
}

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

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; color:inherit; }

/* ───────────────────────────────── каркас ───────────────────────────────── */
.page{
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(380px,46%) 1fr;
}

/* ───────────────────── поява сторінки ───────────────────── */
@keyframes enter{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}
@keyframes enter-left{
  from{ opacity:0; transform:translateX(-24px) }
  to  { opacity:1; transform:none }
}

.brand__logo      { animation:enter-left .8s var(--ease) .05s both; }
.brand__title     { animation:enter-left .8s var(--ease) .18s both; }
.brand__text      { animation:enter-left .8s var(--ease) .28s both; }
.brand__foot      { animation:enter .8s var(--ease) .38s both; }
.card             { animation:enter .8s var(--ease) .12s both; }
.legal            { animation:enter .8s var(--ease) .3s both; }

/* ─────────────────────────── брендова панель ────────────────────────────── */
.brand{
  position:relative;
  overflow:hidden;
  padding:44px 48px 36px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--blue-light) 62%,var(--blue-deep) 100%);
  color:#fff;
}

.brand__motif{
  position:absolute;
  opacity:.10;
  pointer-events:none;
  user-select:none;
}
.brand__motif{
  right:-120px; top:90px;
  width:420px; height:auto;
  animation:drift 22s ease-in-out infinite alternate;
}
.brand__motif--2{
  right:auto; left:-180px; top:auto; bottom:-150px;
  width:340px;
  transform:scaleX(-1);
  opacity:.07;
  animation-duration:28s;
  animation-direction:alternate-reverse;
}
@keyframes drift{
  from{ transform:translateY(0) }
  to  { transform:translateY(-34px) }
}
.brand__motif--2{ animation-name:drift2 }
@keyframes drift2{
  from{ transform:scaleX(-1) translateY(0) }
  to  { transform:scaleX(-1) translateY(26px) }
}

.brand__logo{ position:relative; display:inline-flex; width:max-content; }
.brand__logo img{ display:block; width:86px; height:auto; }

.brand__body{ position:relative; margin-top:auto; padding-top:60px; }

.brand__eyebrow{
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-soft);
}

.brand__title{
  margin:0 0 18px;
  font-size:clamp(36px,4.8vw,62px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.025em;
}

.brand__text{
  margin:0;
  max-width:42ch;
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  color:rgba(255,255,255,.86);
}

.brand__foot{
  position:relative;
  margin:48px 0 0;
  font-size:13px;
  font-weight:300;
  color:rgba(255,255,255,.6);
}

/* ────────────────────────────── панель форми ───────────────────────────── */
.panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:48px 40px;
}

.card{
  width:100%;
  max-width:452px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 24px 60px -32px rgba(46,46,46,.22);
  padding:34px 36px 30px;
  transition:height .5s var(--ease), box-shadow var(--t-base) var(--ease-soft);
  will-change:height;
}
/* під час зміни вкладки картка плавно змінює висоту */
.card.is-morphing{ overflow:hidden; }

/* ──────────────────────────────── таби ─────────────────────────────────── */
.tabs{
  position:relative;
  display:flex;
  gap:4px;
  margin:-4px -4px 26px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.tab{
  flex:1;
  padding:10px 8px;
  border:0;
  background:none;
  font-size:15px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  border-radius:10px;
  transition:color .2s ease,background .2s ease;
}
.tab:hover{ color:var(--ink); background:rgba(80,123,195,.06); }
.tab.is-active{ color:var(--blue); font-weight:600; }

.tabs__ink{
  position:absolute;
  bottom:-1px; left:0;
  height:2px; width:50%;
  background:var(--blue);
  border-radius:2px;
  transition:transform .5s var(--ease);
}
.tabs__ink.is-right{ transform:translateX(100%); }

.tabs.is-hidden{ display:none; }

/* ──────────────────────────────── вʼюшки ──────────────────────────────── */
.view{ display:none; }
.view.is-active{
  display:block;
  animation:rise .5s var(--ease) both;
  animation-delay:.06s;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(12px) scale(.99) }
  to  { opacity:1; transform:none }
}

/* кожен блок усередині вʼюшки виїжджає з невеликою затримкою.
   fill:backwards, а не both — інакше кінцевий transform:none
   перебив би :hover/:active у кнопок та полів */
.view.is-active > *{ animation:rise .5s var(--ease) backwards; }
.view.is-active > *:nth-child(1){ animation-delay:.04s }
.view.is-active > *:nth-child(2){ animation-delay:.08s }
.view.is-active > *:nth-child(3){ animation-delay:.12s }
.view.is-active > *:nth-child(4){ animation-delay:.16s }
.view.is-active > *:nth-child(5){ animation-delay:.20s }
.view.is-active > *:nth-child(6){ animation-delay:.24s }
.view.is-active > *:nth-child(7){ animation-delay:.28s }

.view__title{
  margin:0 0 6px;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.01em;
}
.view__sub{
  margin:0 0 24px;
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  color:var(--ink-soft);
}

/* ──────────────────────────────── поля ────────────────────────────────── */
.field{ margin-bottom:16px; }
.field label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}

.field input{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FCFCFD;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  transition:border-color var(--t-fast) var(--ease-soft),
             box-shadow var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft),
             transform .2s var(--ease);
}
.field input:focus{ transform:translateY(-1px); }
.field input::placeholder{ color:#AFB6C0; font-weight:300; }
.field input:focus{
  outline:0;
  background:#fff;
  border-color:var(--blue-light);
  box-shadow:0 0 0 3px rgba(80,123,195,.14);
}
.field.is-bad input{
  border-color:var(--err);
  box-shadow:0 0 0 3px rgba(215,72,59,.1);
}

.pw{ position:relative; }
.pw input{ padding-right:46px; }
.pw__eye{
  position:absolute; right:6px; top:6px;
  width:36px; height:36px;
  border:0; border-radius:9px;
  background:none;
  cursor:pointer;
  opacity:.5;
  transition:opacity .18s ease,background .18s ease;
}
.pw__eye:hover{ opacity:1; background:rgba(80,123,195,.08); }
.pw__eye::before{
  content:'';
  position:absolute; inset:0;
  background:currentColor;
  -webkit-mask:var(--eye) center/20px no-repeat;
          mask:var(--eye) center/20px no-repeat;
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.pw__eye.is-on::before{
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* ─────────────────────────────── кнопки ───────────────────────────────── */
.btn{
  position:relative;
  width:100%;
  height:52px;
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  overflow:hidden;
  transition:background var(--t-fast) var(--ease-soft),
             transform .22s var(--ease),
             box-shadow var(--t-fast) var(--ease-soft);
}
.btn:hover{ background:var(--blue-light); box-shadow:0 14px 28px -14px rgba(70,113,185,.75); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); transition-duration:.08s; }
.btn svg{ transition:transform .25s ease; }
.btn:hover svg{ animation:arrow .7s ease-in-out infinite alternate; }
@keyframes arrow{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }

.btn.is-busy{ pointer-events:none; color:transparent; }
.btn.is-busy svg{ opacity:0; }
.btn.is-busy::after{
  content:'';
  position:absolute;
  width:20px; height:20px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.btn--ghost{
  background:transparent;
  color:var(--blue);
  border:1px solid var(--line);
  margin-top:22px;
}
.btn--ghost:hover{ background:rgba(80,123,195,.07); color:var(--blue); box-shadow:none; }

.switch{
  margin:18px 0 0;
  text-align:center;
  font-size:14px;
  font-weight:300;
  color:var(--ink-soft);
}
.link{
  border:0; padding:0;
  background:none;
  color:var(--blue);
  font-weight:600;
  cursor:pointer;
  text-underline-offset:3px;
}
.link:hover{ text-decoration:underline; }

/* ─────────────────────────────── службове ─────────────────────────────── */
.msg{
  margin:0 0 4px;
  max-height:0;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.45;
  opacity:0;
  transform:translateY(-4px);
  transition:max-height var(--t-base) var(--ease),
             opacity var(--t-fast) var(--ease-soft),
             transform var(--t-base) var(--ease),
             margin var(--t-base) var(--ease);
}
.msg.is-on{ transform:none; }
.msg.is-on{ max-height:80px; opacity:1; margin-bottom:14px; }
.msg.is-err{ color:var(--err); }
.msg.is-ok{ color:var(--ok); }

.legal{
  max-width:452px;
  margin:0;
  text-align:center;
  font-size:12px;
  font-weight:300;
  color:#9AA1AC;
}

/* ───────────────────────── анімація «обробка заявки» ───────────────────── */
.view--proc{ text-align:center; }
.view--proc .view__sub{ margin-bottom:28px; }

.proc__anim{
  position:relative;
  width:132px; height:132px;
  margin:6px auto 26px;
  display:grid;
  place-items:center;
}

.proc__rings{
  width:132px; height:132px;
  overflow:visible;
  animation:breathe 5.5s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1) }
  50%    { transform:scale(1.05) }
}
.ring{
  fill:none;
  stroke:var(--blue-light);
  stroke-linecap:round;
  transform-origin:60px 60px;
}
.ring--1{ stroke-width:3;   stroke-dasharray:120 220; stroke-opacity:.85; animation:turn 5.2s linear infinite, fade-in .9s var(--ease) both; }
.ring--2{ stroke-width:2.5; stroke-dasharray:70 190;  stroke-opacity:.6;  animation:turn 6.8s linear infinite reverse, fade-in .9s var(--ease) .08s both; }
.ring--3{ stroke-width:2.5; stroke-dasharray:48 130;  stroke-opacity:.45; animation:turn 4.4s linear infinite, fade-in .9s var(--ease) .16s both; }
.ring--4{ stroke-width:2.5; stroke-dasharray:26 70;   stroke-opacity:.35; animation:turn 3.2s linear infinite reverse, fade-in .9s var(--ease) .24s both; }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes turn{ to{ transform:rotate(360deg) } }

.proc__core{
  position:absolute;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(251,185,54,.5);
  animation:pulse 3.2s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(251,185,54,.45);  transform:scale(1) }
  60% { box-shadow:0 0 0 26px rgba(251,185,54,0); transform:scale(1.18) }
  100%{ box-shadow:0 0 0 0 rgba(251,185,54,0);    transform:scale(1) }
}

.dots{ font-style:normal; }
.dots b{ font-weight:600; opacity:.2; animation:dot 1.4s ease-in-out infinite; }
.dots b:nth-child(2){ animation-delay:.2s }
.dots b:nth-child(3){ animation-delay:.4s }
@keyframes dot{ 0%,100%{opacity:.2} 50%{opacity:1} }

.steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  text-align:left;
}
.step{
  position:relative;
  padding:12px 16px 12px 44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FCFCFD;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(14px) scale(.985);
  animation:step-in .75s var(--ease) forwards;
}
.step:nth-child(1){ animation-delay:.30s }
.step:nth-child(2){ animation-delay:.62s }
.step:nth-child(3){ animation-delay:.94s }
@keyframes step-in{ to{ opacity:1; transform:none } }

/* галочка проявляється трохи пізніше за сам рядок */
.step::before{ opacity:0; animation:tick-in .5s var(--ease) forwards; }
.step:nth-child(1)::before{ animation-delay:.52s }
.step:nth-child(2)::before{ animation-delay:.84s }
.step:nth-child(3)::before{ animation-delay:1.16s }
@keyframes tick-in{
  0%  { opacity:0; transform:scale(.4) }
  60% { opacity:1; transform:scale(1.18) }
  100%{ opacity:1; transform:scale(1) }
}

.step::before{
  content:'';
  position:absolute;
  left:15px; top:50%;
  width:16px; height:16px;
  margin-top:-8px;
  border-radius:50%;
  border:2px solid var(--line);
  background:#fff;
  box-sizing:border-box;
}

/* усі кроки — завершені */
.step::before{
  border-color:var(--ok);
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.step{ color:var(--ink); }

/* ───────────────────────────── адаптивність ───────────────────────────── */
@media (max-width:980px){
  .page{ grid-template-columns:1fr; }
  .brand{ padding:28px 24px 34px; }
  .brand__body{ padding-top:34px; }
  .brand__foot{ display:none; }
  .brand__motif{ width:300px; right:-110px; top:30px; }
  .brand__motif--2{ display:none; }
  .panel{ padding:28px 16px 40px; }
  .card{ padding:28px 20px 24px; }
}

/* Якщо в системі вимкнені ефекти анімації — не глушимо все повністю,
   а лишаємо плавні проявлення і прибираємо тільки рух та нескінченні цикли. */
@media (prefers-reduced-motion:reduce){
  .view.is-active,
  .view.is-active > *,
  .step,
  .step::before,
  .brand__logo, .brand__title, .brand__text, .brand__foot,
  .card, .legal{
    animation-name:fade-in !important;
    animation-duration:.45s !important;
    transform:none !important;
  }

  /* нескінченні цикли — геть */
  .ring, .proc__rings, .proc__core, .brand__motif{ animation:none !important; }

  /* мікрорух на наведення/фокус — геть, плавність кольору лишається */
  .btn:hover, .btn:active, .field input:focus{ transform:none !important; }
}