/* ===== KotoCredit — design tokens ===== */
:root{
  --orange: #F7941E;
  --orange-dark: #E07E0C;
  --charcoal: #2E2E2E;
  --charcoal-soft: #5B5B5B;
  --gold: #F4B32B;
  --cream: #FBF3E4;
  --cream-deep: #F5E9D3;
  --white: #FFFFFF;
  --line: #EAE0CB;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 12px 32px rgba(46,46,46,.08);
  --shadow-soft: 0 6px 18px rgba(46,46,46,.06);
  --container: 1140px;
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@font-face{
  font-family:"Nunito";
  src: local("Nunito");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,243,228,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mascot{border-radius:8px}
.brand-word{font-size:22px; font-weight:800; color:var(--charcoal); letter-spacing:-.01em}
.brand-word.small{font-size:18px}
.accent{color:var(--orange-dark)}
.header-login{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font);
  font-weight:800; font-size:15px; color:var(--charcoal);
  background: var(--white);
  border:1px solid var(--line);
  padding:11px 18px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.header-login:hover{ background:#FFF1DE; border-color:var(--orange); }
.header-login svg{ color:var(--orange-dark); }

/* ===== Login modal ===== */
.modal-overlay{
  /* НЕ display:none — Chrome autofill сканує форми в статичному HTML при завантаженні
     сторінки і не класифікує поля, яких display:none прибирає з рендер-дерева повністю.
     visibility+opacity лишає форму "видимою" для парсера автозаповнення (хоч і невидимою
     й неклікабельною для юзера), тому Chrome розпізнає #applyPhone одразу, а не лише
     після відкриття модалки. */
  visibility:hidden; opacity:0; pointer-events:none;
  position:fixed; inset:0; z-index:100;
  background: rgba(20,14,60,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.is-open{ visibility:visible; opacity:1; pointer-events:auto; }
.modal-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 28px 28px;
  width:100%; max-width:460px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.modal-back{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  font-family: var(--font); font-weight:700; font-size:14px;
  color: var(--orange-dark);
  padding:0; margin-bottom:18px;
}
.modal-title{
  font-size:21px; font-weight:800; margin:0 0 10px;
  letter-spacing:-.01em;
}
.modal-desc{
  font-size:14px; line-height:1.55; color:var(--charcoal-soft);
  margin:0 0 22px;
}

/* ===== Buttons ===== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--orange);
  color:#fff;
  font-family: var(--font);
  font-weight:800; font-size:17px;
  border:none; border-radius: 999px;
  padding:16px 28px;
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
  box-shadow: 0 10px 22px rgba(224,126,12,.4);
}
.btn-primary:hover{background:var(--orange-dark)}
.btn-primary:active{transform: scale(.98)}
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--white);
  color: var(--charcoal);
  font-weight:800; font-size:15px;
  border:2px solid var(--orange);
  border-radius: 999px;
  padding:12px 20px;
  transition: background .15s ease;
}
.btn-secondary:hover{background: #FFF1DE}
.btn-block{width:100%}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:#2E2494;
  min-height: 680px;
  display:flex;
  align-items:center;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-img{
  width:100%; height:100%;
  object-fit:cover; object-position: 22% center;
  display:block;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(26,18,90,0) 32%, rgba(26,18,90,.28) 62%, rgba(26,18,90,.55) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  width:100%;
  max-width: 1500px;
  margin: 0 auto;
  display:flex;
  justify-content:flex-end;
  padding: 40px 24px;
}
.hero-content{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hero-copy{
  background: var(--orange);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
}
.eyebrow{
  display:inline-block;
  background: rgba(255,255,255,.96);
  color: var(--orange-dark);
  font-weight:800; font-size:12.5px;
  padding:6px 13px;
  border-radius:999px;
  margin-bottom:14px;
}
.hero h1{
  font-size: 44px;
  line-height:1.05;
  font-weight:900;
  margin:0 0 10px;
  letter-spacing:-.02em;
  color:#fff;
  text-transform:uppercase;
}
.hero-sub{
  font-size:16.5px; font-weight:700; line-height:1.4;
  color: rgba(255,255,255,.95);
  max-width:420px;
  margin:0 0 14px;
}
.hero-points{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.hero-points li{
  font-weight:700; font-size:12.5px;
  color:#fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  padding: 6px 12px;
  border-radius: 999px;
  white-space:nowrap;
}

/* ===== Calculator card (hero quick-apply) ===== */
.calc-wrap{ width:100%; max-width:440px; }
.calc-heading{
  font-size:19px; font-weight:700; line-height:1.3;
  color:#fff; margin:0 0 14px;
}
.calc-heading b{ color: var(--gold); font-weight:900; }
.calc-card{
  position:relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 26px 28px 24px;
  width:100%;
  max-width:440px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.field-label{ display:block; font-weight:700; font-size:14px; margin:0 0 10px; }

.calc-success-icon{
  width:56px; height:56px; border-radius:50%;
  background: var(--orange);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
  box-shadow: 0 8px 18px rgba(224,126,12,.35);
}

.calc-row{ margin-bottom:18px; }
.calc-row-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:10px;
  font-weight:700;
}
.calc-row-head output{
  font-size:19px; font-weight:800; color: var(--orange-dark);
}
.calc-scale{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:#9A9A9A; margin-top:6px;
}
.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) var(--fill,40%), var(--line) var(--fill,40%), var(--line) 100%);
  outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px; height:24px; border-radius:50%;
  background: var(--white);
  border:5px solid var(--orange);
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.slider::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background: var(--white);
  border:5px solid var(--orange);
  cursor:pointer;
}
.calc-divider{ height:1px; background:var(--line); margin: 20px 0; }

.phone-field{
  display:flex; align-items:center;
  border:2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow:hidden;
  margin-bottom:20px;
  transition:border-color .15s ease;
}
.phone-field:focus-within{ border-color: var(--orange); }
.phone-prefix{
  padding:14px 12px; font-weight:800; color:var(--charcoal-soft);
  background: var(--cream-deep);
  border-right:2px solid var(--line);
}
.phone-field input{
  flex:1; border:none; outline:none;
  padding:14px 14px; font-size:16px; font-family:var(--font);
  background:transparent; color:var(--charcoal);
}

.text-field{
  border:2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow:hidden;
  margin-bottom:20px;
  transition:border-color .15s ease;
}
.text-field:focus-within{ border-color: var(--orange); }
.text-field input{
  width:100%; border:none; outline:none;
  padding:14px 14px; font-size:16px; font-family:var(--font);
  background:transparent; color:var(--charcoal);
  box-sizing:border-box;
}
.req{ color:#E0574C; }

.field-error{
  color:#E0574C; font-size:13px; font-weight:600;
  margin:-14px 0 16px;
}

.consent{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12px; color:var(--charcoal-soft); line-height:1.5;
  margin:14px 0 18px; cursor:pointer;
}
.consent input{ margin-top:2px; accent-color: #9A9A9A; }
.consent a{ text-decoration:underline; color:var(--charcoal); }

/* ===== Trust strip ===== */
.trust-strip{ background: var(--charcoal); padding: 26px 0; }
.trust-inner{
  display:grid; grid-template-columns: repeat(4,1fr); gap:16px;
  text-align:center;
}
.trust-item strong{ display:block; font-size:24px; color:var(--gold); font-weight:800; }
.trust-item span{ font-size:13px; color:#C7C7C7; }

/* ===== Sections generic ===== */
.section{ padding: 72px 0; }
.section-title{
  font-size:32px; font-weight:800; text-align:center;
  margin:0 0 10px; letter-spacing:-.01em;
}
.section-sub{
  text-align:center; color:var(--charcoal-soft);
  max-width:560px; margin:0 auto 44px; font-size:15.5px;
}


/* ===== Benefits ===== */
.cards-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px;
}
.benefit-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding:26px 22px;
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.benefit-icon{
  width:52px; height:52px; border-radius:14px;
  background: #FFF1DE;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:16px;
}
.benefit-card h3{ margin:0 0 8px; font-size:17px; }
.benefit-card p{ margin:0; font-size:14px; color:var(--charcoal-soft); line-height:1.5; }

/* ===== Steps ===== */
.steps{ background: var(--white); }
.steps-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.step{ text-align:center; padding: 0 12px; }
.step-num{
  width:48px; height:48px; border-radius:50%;
  background: var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px;
  margin: 0 auto 16px;
}
.step h3{ margin:0 0 8px; font-size:18px; }
.step p{ margin:0; color:var(--charcoal-soft); font-size:14.5px; line-height:1.55; }

/* ===== Warning box (НБУ) ===== */
.warning-section{ padding: 0 0 72px; }
.warning-box{
  background:#FFF6E4; border:1px solid #F4D98A;
  border-radius: var(--radius-md);
  padding:20px 24px;
  font-size:13.5px; line-height:1.6; color:#7A5A00;
  max-width:820px; margin:0 auto;
}
.warning-box strong{ display:block; margin-bottom:6px; color:#5C4300; }

/* ===== Reviews ===== */
.reviews-note{ font-style: italic; }
.reviews-grid{ grid-template-columns: repeat(3,1fr); }
.review-card{
  background: var(--white);
  border-radius: var(--radius-md);
  border:1px solid var(--line);
  padding:24px 22px;
  box-shadow: var(--shadow-soft);
}
.review-stars{ color: var(--gold); letter-spacing:2px; margin-bottom:12px; }
.review-card p{ font-size:14.5px; line-height:1.6; color:var(--charcoal-soft); margin:0 0 14px; }
.review-author{ font-weight:700; font-size:13.5px; }

/* ===== FAQ ===== */
.faq{ background: var(--white); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px; background: var(--cream);
}
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:22px; color:var(--orange); font-weight:400; margin-left:12px;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin:12px 0 0; font-size:14px; color:var(--charcoal-soft); line-height:1.6; }

/* ===== Footer ===== */
.site-footer{ background: var(--charcoal); color:#D8D8D8; padding: 48px 0 30px; }
.footer-inner{ max-width:760px; margin:0 auto; text-align:center; }
.footer-brand{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; }
.footer-brand .brand-word{ color:#fff; }
.footer-brand .accent{ color:var(--gold); }
.footer-legal{ font-size:12.5px; line-height:1.7; color:#ADADAD; margin:0 0 14px; }
.footer-legal em{ color:#D8D8D8; font-style:normal; }
.footer-legal a{ color: var(--gold); text-decoration:underline; }
.footer-links{ display:flex; gap:20px; justify-content:center; margin: 20px 0 18px; font-size:13px; }
.footer-links a{ color:#D8D8D8; }
.footer-copy{ font-size:12px; color:#7A7A7A; margin:0; }

/* ===== Responsive ===== */
/* Wide desktop: copy and calculator sit side by side so the card is always fully visible without scrolling */
@media (min-width: 1400px){
  .hero{ min-height:0; }
  .hero-inner{ align-items:center; }
  .hero-content{
    max-width: 900px;
    flex-direction: row;
    align-items:center;
    gap:40px;
  }
  .hero-copy{ flex:1 1 400px; max-width:400px; }
  .calc-wrap{ flex:0 0 420px; }
}

/* Tablet & mobile: banner + content stacked (no text-over-face overlap) */
@media (max-width: 980px){
  .hero{ display:block; min-height:auto; }
  .hero-bg{ position:relative; height:280px; }
  .hero-bg-img{ object-position: 34% 30%; }
  .hero-bg::after{ display:none; }
  .hero-inner{ position:relative; padding:20px 20px 44px; justify-content:center; }
  .hero-content{ max-width:560px; }
  .calc-wrap{ order:1; }
  .hero-copy{
    order:2;
    text-align:center;
    margin-top:8px;
  }
  .hero-points{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .calc-heading{ text-align:center; }
}
@media (max-width: 760px){
  .hero-bg{ height:230px; }
}

@media (max-width: 980px){
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .steps-grid{ grid-template-columns:1fr; gap:34px; }
  .offer-grid{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width:560px){
  .hero h1{ font-size:32px; }
  .cards-grid{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
  .section-title{ font-size:26px; }
}