/* =========================================================
   Amoney.kz — раскладки секций лендинга (главная, «Как это работает», калькулятор)
   Подключать после components.css. Mobile-first 480 / 768 / 1200.
   ========================================================= */

/* ---------- Hero ---------- */
.am-hero { position: relative; overflow: hidden; margin-top: var(--am-space-3); background: var(--am-green-700); color: var(--am-on-dark); border-radius: var(--am-r-hero); padding: 28px var(--am-space-5) var(--am-space-6); display: flex; flex-direction: column; gap: var(--am-space-4); }
.am-hero__rings { position: absolute; right: -140px; top: -120px; width: 320px; height: 320px; border-radius: 50%; opacity: 0.18; pointer-events: none; background: radial-gradient(circle, transparent 99px, #73CC87 100px, #73CC87 102px, transparent 103px, transparent 149px, #73CC87 150px, #73CC87 152px, transparent 153px); }
.am-hero__content { position: relative; display: flex; flex-direction: column; gap: var(--am-space-4); min-width: 0; }
.am-hero .am-h1 { color: var(--am-on-dark); }
.am-hero .am-lead { opacity: 0.92; max-width: 560px; }
.am-hero__buttons { display: flex; flex-direction: column; gap: var(--am-space-3); }
.am-hero__ghost { display: none !important; }
.am-hero__car { position: relative; align-self: center; width: 100%; max-width: 350px; }
.am-hero__badge { display: none; }
.am-proof { display: flex; align-items: center; gap: 10px; font-size: var(--am-fs-sm); }
.am-proof__avatars { display: flex; }
.am-proof__avatars i { width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--am-green-700); background: var(--am-green-400); }
.am-proof__avatars i:first-child { margin-left: 0; }
.am-proof__avatars i:nth-child(2) { background: var(--am-blue-50); }
.am-proof__avatars i:nth-child(3) { background: var(--am-page); }
.am-proof__avatars i:nth-child(4) { background: var(--am-green-900); }

@media (min-width: 768px) {
  .am-hero { padding: var(--am-space-12) var(--am-space-10); gap: var(--am-space-8); }
  .am-hero__buttons { flex-direction: row; }
  .am-hero__ghost { display: inline-flex !important; }
  .am-hero__car { max-width: 520px; align-self: flex-start; padding-top: 20px; }
  .am-hero__badge { display: flex; position: absolute; right: 0; top: 0; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--am-surface); color: var(--am-ink); box-shadow: var(--am-shadow-badge); }
  .am-hero__badge b { display: block; font-size: 14px; line-height: 18px; }
  .am-hero__badge small { display: block; font-size: 12px; color: var(--am-muted); }
}
@media (min-width: 1200px) {
  .am-hero { margin-top: var(--am-space-5); flex-direction: row; align-items: center; gap: var(--am-space-14); padding: 72px var(--am-space-16); }
  .am-hero__rings { right: -120px; top: -160px; width: 620px; height: 620px; background: radial-gradient(circle, transparent 138px, #73CC87 139px, #73CC87 141px, transparent 142px, transparent 218px, #73CC87 219px, #73CC87 221px, transparent 222px, transparent 298px, #73CC87 299px, #73CC87 301px, transparent 302px); }
  .am-hero__content { flex: 1; gap: 26px; }
  .am-proof { font-size: 15px; gap: 12px; }
  .am-proof__avatars i { width: 36px; height: 36px; margin-left: -10px; }
}

/* ---------- Калькулятор ---------- */
.am-calc { background: var(--am-surface); color: var(--am-text); border-radius: var(--am-r-card); padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.am-calc__head { display: flex; justify-content: space-between; align-items: center; }
.am-calc__title { font-size: 21px; font-weight: var(--am-fw-bold); color: var(--am-ink); }
.am-calc__result { background: var(--am-page); border-radius: 16px; padding: var(--am-space-4); display: flex; flex-direction: column; gap: var(--am-space-2); }
.am-calc__limit { font-size: var(--am-fs-xs); color: var(--am-green-700); }
.am-calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-space-2); border-top: 1px solid var(--am-line); padding-top: 10px; }
.am-calc__grid div { display: flex; flex-direction: column; }
.am-calc__grid span { font-size: var(--am-fs-xs); color: var(--am-muted); }
.am-calc__grid b { font-size: 15px; font-weight: var(--am-fw-semibold); font-variant-numeric: tabular-nums; }
.am-calc__note { font-size: var(--am-fs-xs); color: var(--am-muted); text-align: center; }
.am-calc legend { font-size: 15px; margin-bottom: var(--am-space-2); padding: 0; }
@media (min-width: 768px) { .am-calc { padding: 28px; gap: var(--am-space-5); } .am-calc__title { font-size: 22px; } .am-calc__grid b { font-size: 16px; } }
@media (min-width: 1200px) { .am-hero .am-calc { width: 480px; flex-shrink: 0; box-shadow: var(--am-shadow-float); } }

/* ---------- Цифры доверия ---------- */
.am-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--am-space-3); }
@media (min-width: 1200px) { .am-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--am-space-4); margin-top: var(--am-space-5); } }

/* ---------- Бенто «Условия» ---------- */
.am-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-space-3); }
.am-tile { min-height: 150px; background: var(--am-surface); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--am-space-3); }
.am-tile__label { font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); color: var(--am-green-700); }
.am-tile__value { display: block; font-size: 36px; line-height: 38px; font-weight: var(--am-fw-bold); color: var(--am-ink); letter-spacing: -1px; }
.am-tile__value--sm { font-size: 26px; line-height: 30px; }
.am-tile__text { display: block; font-size: 18px; line-height: 23px; font-weight: var(--am-fw-bold); }
.am-tile__sub { display: block; font-size: var(--am-fs-xs); }
.am-tile--big { grid-column: span 2; background: var(--am-green-700); color: var(--am-on-dark); padding: var(--am-space-6) var(--am-space-5); }
.am-tile--big .am-tile__label { color: var(--am-green-400); }
.am-tile--big h3 { font-size: 26px; line-height: 30px; font-weight: var(--am-fw-bold); margin: var(--am-space-2) 0; }
.am-tile--big p { display: none; }
.am-tile--blue { background: var(--am-blue-50); }
.am-tile--accent { background: var(--am-green-400); color: var(--am-green-900); }
.am-tile--accent .am-tile__label { color: var(--am-green-900); }
.am-checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.am-checklist li { display: flex; align-items: center; gap: var(--am-space-3); background: rgba(255, 255, 255, 0.10); border-radius: var(--am-r-btn); padding: var(--am-space-3) 14px; font-size: 15px; }
.am-checklist li::before { content: '✓'; width: 26px; height: 26px; border-radius: 50%; background: var(--am-green-400); color: var(--am-green-900); font-weight: var(--am-fw-bold); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 768px) {
  .am-tile { min-height: 200px; border-radius: var(--am-r-card); padding: 28px; }
  .am-tile--big p { display: block; font-size: 17px; line-height: 26px; opacity: 0.92; max-width: 420px; }
  .am-tile--big h3 { font-size: 34px; line-height: 40px; }
}
@media (min-width: 1200px) {
  .am-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 240px 240px; gap: var(--am-space-4); }
  .am-tile--big { grid-row: span 2; padding: 36px; }
  .am-tile__value { font-size: 48px; line-height: 50px; }
  .am-tile__value--sm { font-size: 40px; line-height: 44px; }
  .am-tile__text { font-size: 24px; line-height: 30px; }
  .am-tile__sub { font-size: 15px; line-height: 21px; }
  .am-checklist li { padding: 14px var(--am-space-4); font-size: 16px; }
}

/* ---------- «Как получить» + превью телефона ---------- */
.am-how { display: grid; grid-template-columns: 1fr; gap: var(--am-space-4); align-items: center; }
.am-how .am-h2 { margin-bottom: var(--am-space-4); }
.am-phone { border-radius: 22px; background: var(--am-surface); box-shadow: inset 0 0 0 1px var(--am-line); padding: 18px; display: flex; flex-direction: column; gap: var(--am-space-3); }
.am-phone__meta { display: flex; justify-content: space-between; font-size: var(--am-fs-xs); color: var(--am-muted); }
.am-phone__meta span:first-child { color: var(--am-green-700); font-weight: var(--am-fw-semibold); }
.am-phone__title { font-size: 20px; font-weight: var(--am-fw-bold); color: var(--am-ink); }
.am-phone .am-shot:nth-child(n+5), .am-phone__cta, .am-phone__hint { display: none; }
@media (min-width: 768px) {
  .am-phone { width: 420px; margin: 0 auto; border-radius: 40px; background: var(--am-green-900); padding: 12px; box-shadow: 0 30px 60px rgba(16, 35, 23, 0.25); }
  .am-phone__screen { border-radius: 30px; background: var(--am-surface); padding: 22px; display: flex; flex-direction: column; gap: var(--am-space-3); min-height: 616px; }
  .am-phone .am-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-phone .am-shot { min-height: 72px; flex-direction: row; text-align: left; justify-content: flex-start; }
  .am-phone .am-shot:nth-child(n+5), .am-phone__hint { display: flex; }
  .am-phone__hint { font-size: var(--am-fs-sm); }
  .am-phone__cta { display: flex; margin-top: auto; height: 50px; border-radius: var(--am-r-btn); background: var(--am-green-700); color: var(--am-on-dark); font-weight: var(--am-fw-semibold); align-items: center; justify-content: center; }
}
@media (min-width: 1200px) { .am-how { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--am-space-16); } .am-how .am-h2 { margin-bottom: 28px; } }

/* ---------- Требования ---------- */
.am-req { display: grid; grid-template-columns: 1fr; gap: var(--am-space-3); }
.am-ticks, .am-dots { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.am-ticks li::before { content: '✓'; color: var(--am-green-700); font-weight: var(--am-fw-bold); margin-right: 10px; }
.am-dots li::before { content: '•'; color: var(--am-green-700); margin-right: 10px; }
.am-req .am-h3 { margin-bottom: var(--am-space-3); }
@media (min-width: 768px) { .am-req { grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-ticks { font-size: 16px; gap: 12px; } }
@media (min-width: 1200px) { .am-req { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--am-space-4); } }

/* ---------- FAQ-блок на главной ---------- */
.am-faq { display: grid; grid-template-columns: 1fr; gap: var(--am-space-4); }
.am-faq__side { display: flex; flex-direction: column; gap: var(--am-space-3); }
@media (min-width: 1200px) { .am-faq { grid-template-columns: 380px minmax(0, 1fr); gap: var(--am-space-14); } }

/* ---------- Финальный CTA ---------- */
.am-cta { margin-top: var(--am-section-gap); background: var(--am-green-900); color: var(--am-on-dark); border-radius: var(--am-r-hero); padding: 28px var(--am-space-5); display: flex; flex-direction: column; gap: 14px; }
.am-cta__title { font-size: 28px; line-height: 32px; font-weight: var(--am-fw-bold); letter-spacing: -0.5px; }
.am-cta p { opacity: 0.85; }
.am-cta__buttons { display: flex; flex-direction: column; gap: var(--am-space-3); }
.am-cta__calc { display: none !important; }
@media (min-width: 768px) {
  .am-cta { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--am-space-14) var(--am-space-16); gap: var(--am-space-10); }
  .am-cta__title { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; margin-bottom: 10px; }
  .am-cta__buttons { flex-direction: row; }
  .am-cta__calc { display: inline-flex !important; }
}
.am-hero__badge-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--am-green-400); color: var(--am-green-900); font-size: 14px; font-weight: var(--am-fw-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Страница калькулятора ---------- */
.am-calc-page { display: grid; grid-template-columns: 1fr; gap: var(--am-space-4); }
.am-calc-summary { display: flex; flex-direction: column; gap: var(--am-space-3); }
.am-calc-summary__pay { font-size: 40px; line-height: 44px; font-weight: var(--am-fw-bold); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { .am-calc-page { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; gap: var(--am-space-6); } .am-calc--page { padding: var(--am-space-8); } }