/* ==============================================
   DESIGN TOKENS – Ria Money Transfer co-brand
   Palette from the official Ria style guide:
   Ria Orange #FF6100 · Navy Blue #001133 ·
   Background Orange #FAD2BE · Background Blue #CDE1E1
   ============================================== */

:root {
  /* Ria brand colors */
  --ria-orange: #FF6100;
  --ria-orange-hover: #FF7519;
  --navy: #001133;
  /* riamoneytransfer.com's bg-surface-dark / text-foreground-dark section tokens */
  --ria-surface-dark: #160800;
  --ria-foreground-dark: #FAFAFA;
  /* Lightened tints of the brand Background Orange (#FAD2BE) */
  --bg-orange: #FCE4D6;
  --bg-orange-soft: #FEF7F2;
  --bg-blue: #CDE1E1;
  --bg-blue-soft: #EDF5F5;

  /* Lombard24 green – CTAs/buttons keep the house style; accents outside the
     hero and the why-ria band are green too (Ria orange stays only there) */
  --green-primary: #4CC35D;
  --green-primary-hover: #5fd06e;
  --green-text: #00A918; /* brand text-accent token shared with the gold landing */
  --green-bg-light: #EEFFF1;
  /* Selected-state (badge) pairing from the buyback landing – a light-green
     chip so active states don't read as buttons (buttons = solid green) */
  --green-badge: #1E7A2E;
  --green-badge-bg: #E6FFEA;
  --green-badge-bg-hover: #DBF3DF; /* also the illustration blob tint */

  /* Derived text/border shades (navy-based). Contrast on white:
     body 9:1 (AAA), muted 5.6:1 (AA+) – also clears the tinted section fills */
  --text-body: #3D4963;
  --text-muted: #5C6883;
  --border-gray: #D9DCE3;
  --border-light: #E7E9EE;
  --bg-gray: #FAFAFB; /* also the neutral hover for bordered chips/tabs – matches lombard24.ee secondary buttons */
  --white: #ffffff;
  --star-amber: #FFB300;

  /* Typography – Gilroy, shared with the other Lombard24 landings */
  --font-main: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout – matches .container-block (1770px) on lombard24.ee */
  --max-width: 1770px;

  /* Spacing scale – shared with the gold/buyback landings */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 60px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0px 16px 32px -8px rgba(12, 12, 13, 0.12),
                 0px 4px 8px -2px rgba(12, 12, 13, 0.08);
  --shadow-card-sm: 0px 16px 16px -8px rgba(12, 12, 13, 0.1),
                    0px 4px 4px -4px rgba(12, 12, 13, 0.05);
}

/* ==============================================
   CSS RESET & BASE
   ============================================== */

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

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  /* Keep the scrollbar gutter reserved on classic-scrollbar systems, so the
     contact-modal scroll lock (body overflow:hidden) doesn't shift the page */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  color: var(--text-body);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px; /* matches lombard24.ee .container-block (1770px, 40px → 1690px content) */
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

h1 { font-size: 72px; line-height: 1.08; }

h2 { font-size: 46px; }

h3 { font-size: 24px; }

h4 { font-size: 18px; }

/* SVG flags from the inline sprite – sized per context; the hairline
   ring keeps white stripes visible on white cards */
.flag {
  display: inline-block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 17, 51, 0.1);
  flex-shrink: 0;
}

/* ==============================================
   UTILITIES
   ============================================== */

.svg-sprite { display: none; }

/* Glue an inline icon (e.g. the calc info button) to the word before it */
.nowrap { white-space: nowrap; }

/* Inline text link – underlined in-copy anchor (the global reset strips
   underlines from every other <a>) */
.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .text-link:hover { color: var(--green-text); }
}

.text-link:focus-visible {
  outline: 3px solid rgba(76, 195, 93, 0.4);
  border-radius: 2px;
}

/* ==============================================
   REUSABLE COMPONENTS
   ============================================== */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 33px;
  font-family: var(--font-main);
  font-size: 18px;
  min-height: 50px;
  line-height: 1.15;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-primary {
  background: var(--green-primary);
  color: var(--white);
  border: 1px solid rgba(0, 106, 15, 0.2);
  box-shadow: inset 0px 2px 4px #00DF20, inset 0px -2px 14px 0px #00FF24;
}

@media (hover: hover) {
  .btn-primary:hover { background: var(--green-primary-hover); }
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border-gray);
}

@media (hover: hover) {
  /* Navy-tinted wash reads correctly on white and on the peach hero alike */
  .btn-secondary:hover { background: rgba(0, 17, 51, 0.05); }
}

.btn-icon {
  gap: 12px;
}

.btn-icon svg { flex-shrink: 0; }

/* Sticky CTA – revealed by JS once the hero CTAs scroll out of view and
   hidden again over the footer contact block.
   Desktop: a floating green pill centered above where the live-site HelpCrunch
   bubble sits (66px). Mobile: a full-width white bar – copy left, pill right. */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  pointer-events: none; /* desktop: only the pill is interactive */
  visibility: hidden;
  transform: translateY(120%);
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.sticky-cta.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 0.35s ease, visibility 0s linear 0s;
}

/* Desktop: floating centered pill – no bar chrome, copy hidden */
.sticky-cta__bar {
  display: flex;
  justify-content: center;
  padding: 0 16px calc(66px + env(safe-area-inset-bottom));
}

.sticky-cta__title { display: none; }

.sticky-cta .btn-primary {
  pointer-events: auto;
  width: auto; /* hug the label; overrides the global full-width mobile buttons */
  box-shadow: inset 0px 2px 4px #00DF20, inset 0px -2px 14px 0px #00FF24, var(--shadow-card);
}

/* Mobile: full-width white bar – copy left, button right */
@media (max-width: 768px) {
  .sticky-cta {
    pointer-events: auto;
    background: var(--white);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  }

  .sticky-cta__bar {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
  }

  .sticky-cta__title {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--navy);
  }

  .sticky-cta .btn-primary {
    flex-shrink: 0;
    box-shadow: inset 0px 2px 4px #00DF20, inset 0px -2px 14px 0px #00FF24;
  }
}

@media (max-width: 480px) {
  .sticky-cta__title { font-size: 16px; }

  .sticky-cta .btn-primary {
    font-size: 16px;
    min-height: 48px;
    padding: 8px 20px;
    border-radius: var(--radius-full);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta.is-visible { transition: none; }
}

/* Contact-channel modal – same pattern as the buyback landing */

.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 17, 51, 0.55);
}

.quote-modal[hidden] { display: none; }

.quote-modal__dialog {
  width: min(464px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.09);
  outline: none;
  animation: quote-modal-in 0.25s ease;
}

@keyframes quote-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-modal__dialog { animation: none; }
}

.quote-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.quote-modal__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
}

.quote-modal__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0; /* bigger hit area without pushing the layout */
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .quote-modal__close:hover { color: var(--navy); }
}

.quote-modal__channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
}

.quote-modal__channels .btn {
  font-size: 16px;
  min-height: 48px;
  padding: 0 20px;
  gap: 10px;
}

.quote-modal__channels .btn svg { flex-shrink: 0; }

/* Scroll lock while the modal is open */
body.quote-modal-open { overflow: hidden; }

/* Section heading */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.section-sub {
  font-size: 18px;
  color: var(--text-body);
  max-width: 720px;
}

/* Branch card */

.branch-card {
  position: relative; /* anchors .ria-badge */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  background: var(--white);
  box-shadow: var(--shadow-card-sm);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* «Принимаем Ria» marker – miniature of the why-ria band's ria wordmark */
.ria-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 24px;
  height: 16px;
  color: var(--ria-orange);
}

@media (hover: hover) {
  .branch-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

.branch-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.branch-card h3 {
  font-size: 16px;
  line-height: 1.15;
  padding-right: 32px; /* keep long names clear of the ria mark */
}

.branch-card .address {
  font-size: 14px;
  color: var(--navy);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 120%;
}

.branch-card .address svg {
  flex-shrink: 0;
  width: 15px;
  height: 20px;
}

.branch-card .rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 16px;
  color: var(--navy);
  line-height: 1;
}

.branch-card .rating .stars {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
  transform: translateY(-2px);
}

.branch-card .rating .stars svg {
  width: 16px;
  height: 16px;
  display: block;
}

.star-half {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.star-half .star-bg {
  filter: saturate(0);
  opacity: 0.25;
}

.star-half .star-fill {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
}

/* ==============================================
   SCROLL REVEAL ANIMATIONS
   ============================================== */

.reveal {
  transition: opacity 0.5s ease, transform 0.5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.reveal.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child items */

.reveal-stagger > .reveal.visible:nth-child(1) { transition-delay: 0s; }

.reveal-stagger > .reveal.visible:nth-child(2) { transition-delay: 0.15s; }

.reveal-stagger > .reveal.visible:nth-child(3) { transition-delay: 0.3s; }

.reveal-stagger > .reveal.visible:nth-child(4) { transition-delay: 0.45s; }

.reveal-stagger > .reveal.visible:nth-child(5) { transition-delay: 0.6s; }

.reveal-stagger > .reveal.visible:nth-child(6) { transition-delay: 0.75s; }

.reveal-stagger > .reveal.visible:nth-child(7) { transition-delay: 0.9s; }

.reveal-stagger > .reveal.visible:nth-child(8) { transition-delay: 1.05s; }

/* The 12 destination chips ripple faster than the big stagger cards */

.dest-grid > .reveal.visible:nth-child(1) { transition-delay: 0s; }

.dest-grid > .reveal.visible:nth-child(2) { transition-delay: 0.06s; }

.dest-grid > .reveal.visible:nth-child(3) { transition-delay: 0.12s; }

.dest-grid > .reveal.visible:nth-child(4) { transition-delay: 0.18s; }

.dest-grid > .reveal.visible:nth-child(5) { transition-delay: 0.24s; }

.dest-grid > .reveal.visible:nth-child(6) { transition-delay: 0.3s; }

.dest-grid > .reveal.visible:nth-child(7) { transition-delay: 0.36s; }

.dest-grid > .reveal.visible:nth-child(8) { transition-delay: 0.42s; }

.dest-grid > .reveal.visible:nth-child(9) { transition-delay: 0.48s; }

.dest-grid > .reveal.visible:nth-child(10) { transition-delay: 0.54s; }

.dest-grid > .reveal.visible:nth-child(11) { transition-delay: 0.6s; }

.dest-grid > .reveal.visible:nth-child(12) { transition-delay: 0.66s; }

/* Hero entrance – CSS keyframes (no JS timing dependency).
   JS locks inline styles on animationend to prevent iOS scroll-back fill-mode recompute. */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroImageFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-anim {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
}

.hero-anim-delay-1 { animation-delay: 0.1s; }

.hero-anim-delay-2 { animation-delay: 0.2s; }

.hero-image-anim {
  opacity: 0;
  animation: heroImageFadeIn 0.7s ease 0.15s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim,
  .hero-image-anim,
  .reveal,
  .reveal.reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==============================================
   SECTION-SPECIFIC LAYOUTS
   Ordered by document flow
   ============================================== */

/* --- Section divider --- */

.section-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 0 auto;
}

/* --- Hero --- */

.hero {
  padding: 32px 0;
  display: flex;
  justify-content: center;
}

/* Photo panel: the rounded container is a full-bleed photograph under a
   dark scrim, all hero copy switches to white (example.png pattern). The
   scrim is left-weighted where the text sits; the calculator card brings
   its own white surface so the right edge can stay lighter. */

.hero-inner.container {
  position: relative;
  isolation: isolate; /* keep the z-index dance local to the panel */
  overflow: hidden;
  border-radius: 32px;
  display: flex;
  /* copy starts at the padding edge like on kokkuost; the calculator card
     then rides the right padding edge (margin auto below) */
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-xl);
  padding: 80px 160px;
  max-width: calc(var(--max-width) - 64px);
  width: calc(100% - 64px);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the couple sits just left of center – keep their faces in the upper
     half of whatever slice the cover-crop leaves */
  object-position: 50% 30%;
}

/* Scrim – ::after paints above the image (later in tree order, same z-index)
   but under the z-index:1 content */
.hero-inner.container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    rgba(9, 13, 23, 0.82) 0%,
    rgba(9, 13, 23, 0.58) 52%,
    rgba(9, 13, 23, 0.30) 100%);
}

/* The copy and the card ride above photo+scrim. hero-top/ctas/calc carry
   their own z-index because ≤1200 dissolves .hero-content (display:contents) */
.hero-content,
.hero-top,
.hero-ctas,
.hero-calc {
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* grow into the free width (up to a readable measure) so the copy fills
     the card and the calculator stays at the right edge */
  flex: 1;
  min-width: 0;
  max-width: 880px;
}

.hero-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero h1 { color: var(--white); }

.hero-subline {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  max-width: 640px;
}

/* In-copy link + ghost button re-inked for the dark photo */

@media (hover: hover) {
  .hero .text-link:hover { color: var(--green-primary); }
}

.hero .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

@media (hover: hover) {
  .hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.85);
  }
}

/* Two-tone lockup on the photo: the sprite's wordmark is inked white
   in-place (official navy was invisible on the dark scrim); the «ria»
   glyph keeps its official orange – it clears 3:1 over the scrim */

.hero-ctas {
  display: flex;
  gap: 13px;
}

/* Brand lockup: the official "ria Money Transfer" logo (colors baked into
   the sprite symbol – official orange #F36C2A / navy #010D2F) */

.cobrand {
  display: flex;
  align-items: center;
}

.cobrand__lockup {
  width: 120px;
  height: 40px;
}

/* --- Hero calculator card ---
   The cost calculator sits where the transfer scene used to: one white card
   on the soft-orange panel – stacked controls over a tinted live "receipt".
   Default state is fully server-rendered (Украина / 100 €) so the card reads
   as a worked example without JS; the script only rewrites the numbers.
   Tariffs are indicative – CALC_DATA in js/main.js. */

.hero-calc {
  width: 460px;
  flex-shrink: 0;
  margin-left: auto; /* card pinned to the right padding edge */
}

.calc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 56px 52px;
  text-align: left; /* the column hero layout centers text; the card stays left-aligned */
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.calc__controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.calc-field__label {
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
}

/* Country – native <select> (mobile pickers for free) dressed as a field;
   the flag is swapped by JS, the chevron is the lombard24.ee header-menu
   glyph from the sprite */

.calc-select {
  position: relative;
}

.calc-select .flag {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 21px;
  pointer-events: none;
}

.calc-select__chevron {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 9px;
  color: var(--navy);
  pointer-events: none;
}

/* Underline fields – no boxes; everything in the card shares one left edge */

.calc-select select {
  width: 100%;
  min-height: 52px;
  padding: 0 30px 0 42px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--border-gray);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.calc-select select:hover { border-color: var(--text-muted); }

/* Chrome paints the option popup itself and inherits the field's 18px/700
   into it – reset the list to plain reading size (Safari's native popup
   ignores this, which is fine) */
.calc-select option {
  font-size: 16px;
  font-weight: 400;
}

/* «Другая страна…» – no flag to show */
.calc-select.is-other .flag { display: none; }

.calc-select.is-other select { padding-left: 0; }

/* Amount – spinners hidden (presets + keypad cover it), € pinned inside */

.calc-amount {
  position: relative;
}

.calc-amount input {
  width: 100%;
  min-height: 52px;
  padding: 0 34px 0 0;
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--border-gray);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.calc-amount input:hover { border-color: var(--text-muted); }

.calc-amount input::-webkit-outer-spin-button,
.calc-amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-amount input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-amount__cur {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  pointer-events: none;
}

/* Focus lives on the underline itself – a ring around a borderless field
   would draw the box back */
.calc-select select:focus-visible,
.calc-amount input:focus-visible {
  outline: none;
  border-color: var(--green-primary);
}

.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Borderless ghost chips: nothing when idle, super-light gray on hover,
   light-green fill when selected */
.calc-preset {
  flex: 1; /* the chips share the row and stretch to the card's full width */
  border: 0;
  background: transparent;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  padding: 7px 4px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .calc-preset:not(.is-active):hover { background: #F4F5F7; }
}

.calc-preset:focus-visible { outline: 3px solid rgba(76, 195, 93, 0.4); }

.calc-preset.is-active {
  background: var(--green-badge-bg);
  color: var(--green-badge);
}

/* Result – the live "receipt" runs flush with the fields above: fee and
   total rows, then the headline receive amount with the rate underneath */

.calc__result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding-top: 18px;
}

/* Info icon after «Получатель получит» – hover/focus shows the "approximate
   figures" disclaimer; on touch the tap toggles .is-open (JS). The bubble is
   anchored to the receive row, not the icon, so it never clips the card edges. */

.calc-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .calc-info:hover { color: var(--navy); }
}

.calc-info:focus-visible {
  outline: 3px solid rgba(76, 195, 93, 0.4);
  border-radius: 50%;
}

.calc-info svg {
  width: 16px;
  height: 16px;
}

.calc-info__tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  white-space: normal; /* the .nowrap glue on the label must not reach the bubble */
  padding: 10px 12px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 10;
}

.calc-info:hover .calc-info__tip,
.calc-info:focus-visible .calc-info__tip,
.calc-info.is-open .calc-info__tip {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .calc-info__tip { transition: none; }
}

.calc-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 15px;
  color: var(--navy);
}

.calc-row strong {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-row--total span { font-weight: 700; }

/* One receipt row: label left, amount right, tops aligned; rate tucked
   right underneath */
.calc-receive {
  position: relative; /* the info tooltip pops up over this row */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 17, 51, 0.12);
}

/* Same size as the «К оплате» row label – the two key lines match.
   Tight line-height keeps its glyphs optically top-level with the number */
.calc-receive__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}

.calc-receive__amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--green-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right; /* values ride the right edge, like the rows above */
}

.calc-receive__meta {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: right;
}

/* «Другая страна» – the receipt yields to a talk-to-us message */

.calc-other {
  display: none;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
}

.calc__result.is-other .calc-other { display: block; }

.calc__result.is-other .calc-rows,
.calc__result.is-other .calc-receive { display: none; }

/* --- Destinations --- */

.destinations {
  position: relative;
  padding: var(--space-3xl) 0;
  overflow: hidden; /* the page edge cuts the globe halves */
}

.destinations .container {
  position: relative; /* content rides above the globe decor */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Globe half – peeks from the left page edge, vertically centered on the
   section; pure decor behind the content. The 100vw term caps the visible
   half to the free space beside the 700px grid (minus a 16px gap each side),
   so no window width lets it touch the chips. Past ~1590px the width cap
   (570px) stops growing while the centered 700px grid keeps drifting right
   with the viewport, so `left` has to drift too – pinned at 0 grew the gap
   unbounded on wide monitors. The offset is derived from the layout
   constants (grid half-width 350 + target gap 160 + globe half-width 285),
   so past that width the globe floats free of the edge and tracks the grid
   at a constant 160px instead of bleeding off the page. */

.dest-globe {
  position: absolute;
  top: 50%;
  left: max(0px, calc(50vw - 795px));
  width: min(570px, calc(100vw - 732px));
  transform: translate(-50%, -50%);
  line-height: 0;
  pointer-events: none;
}

.dest-globe img {
  width: 100%;
  height: auto;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  width: 100%;
  max-width: 700px; /* the chip-width dial: 3 equal columns split this */
}

.dest-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}

.dest-chip .flag {
  width: 36px;
  height: 27px;
  border-radius: 4px;
}

/* "+ ещё около 185 стран" line under the grid */

.dest-more {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

/* --- How it works: one formula, no steps ---
   Документ + Наличные = Деньги дома */

.how {
  padding: var(--space-3xl) 0;
}

.how .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Numbered stepper: four equal columns, a dotted connector running through
   the icon row, number badges on the icons.
   Steps 1–3 are the visitor's actions, step 4 is the payoff. */
.how-steps {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1330px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  text-align: center;
}

/* Dotted connector to the next step, drawn at icon mid-height */
.how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 36px;
  left: calc(50% + 52px);
  width: calc(100% - 104px);
  border-top: 3px dotted var(--green-primary);
  opacity: 0.45;
}

.how-step__illu {
  position: relative;
  /* in the stacked (row) layout a long label otherwise flex-shrinks the
     icon – the text must wrap instead, never the icon */
  flex-shrink: 0;
}

.how-step__illu img {
  display: block;
  width: 72px;
  height: 72px;
}

.how-step__num {
  position: absolute;
  top: -2px;
  left: -10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 0 3px var(--white);
}

.how-step__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.how-step__label strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.how-step__label span {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.35;
}


/* --- Why Ria: navy stats band --- */

.why-ria {
  padding: var(--space-3xl) 0;
}

.why-ria__band {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  background: var(--ria-surface-dark);
  border-radius: var(--radius-xl);
  padding: 72px;
  color: var(--ria-foreground-dark);
}

.why-ria__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1.2;
}

.why-ria__mark {
  width: 84px;
  height: 56px;
  color: var(--ria-orange);
}

.why-ria__intro h2 {
  color: var(--white);
  font-size: 40px;
}

.why-ria__intro p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
}

.why-ria__stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
  padding-left: var(--space-2xl);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ria-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ria-stat__number {
  font-size: 56px;
  font-weight: 800;
  color: var(--ria-orange);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ria-stat__label {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.78);
}

/* --- Reputation & branches --- */

/* --- Receive – incoming Ria transfers paid out in cash --- */

.receive {
  padding: var(--space-3xl) 0;
}

/* Narrower than the global container so the block sits visually centered
   inside the full-bleed tint instead of hugging the page edges.
   Two rows: intro copy + illustration, then the three steps across. */
.receive-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1240px;
}

.receive-top {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.receive-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.receive-intro h2 { font-size: 46px; }

.receive-intro p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 600px;
}

.receive-illu {
  flex-shrink: 0;
  width: 400px;
  line-height: 0;
}

.receive-illu img {
  width: 100%;
  height: auto;
}

/* Steps row: a titled action list that answers the intro's promise */
.receive-how {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.receive-how__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
}

.receive-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.receive-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
}

.receive-step__num {
  flex-shrink: 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--green-primary);
  line-height: 1;
}

.receive-step__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.receive-step__label strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.receive-step__label span {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.35;
}

.why-choose {
  padding: var(--space-3xl) 0;
}

.why-choose > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reputation-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  padding: 0 32px;
  scroll-margin-top: 24px;
}

.reputation-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
  width: 100%;
}

.reputation-stat {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 367px;
  flex-shrink: 0;
}

.stat-counter {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-counter .stat-icon { flex-shrink: 0; }

.stat-numbers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-numbers .label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}

.stat-numbers .number {
  font-size: 48px;
  font-weight: 800;
  color: var(--green-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.reputation-stat > p {
  font-size: 18px;
  color: var(--text-body);
  line-height: 1.5;
}

.branch-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  flex: 1;
  min-width: 0;
}

/* --- FAQ --- */

.faq {
  padding: var(--space-3xl) 0;
}

.faq > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 807px;
}

.faq h2 {
  line-height: 1.15;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.faq-item {
  background: var(--white);
  box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
  border-radius: 20px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 0 24px;
  gap: 24px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  /* Button reset (semantic <button>) */
  background: none;
  border: none;
  font-family: var(--font-main);
  text-align: left;
  width: 100%;
}

.faq-question .toggle {
  font-size: 48px;
  line-height: 1.15;
  color: var(--green-primary);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.faq-answer > p {
  overflow: hidden;
  padding: 0 24px;
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.6;
  transition: padding 0.2s ease;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer > p {
  padding: 8px 24px 20px;
}

.faq-item.open .toggle { transform: rotate(45deg); }

/* --- Contact CTA (inside FAQ) --- */

.contact-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 120px;
}

.contact-cta-block h3 {
  line-height: 1.15;
  text-align: center;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

/* Labels never break – tight buttons wrap to the next row as a whole */
.contact-buttons .btn { white-space: nowrap; }

.contact-buttons .btn img,
.contact-buttons .btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Legal note --- */

.legal-note {
  margin-top: var(--space-2xl);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ==============================================
   RESPONSIVE BREAKPOINTS
   Descending order: 1600 → 1400 → 1200 → 768 → 480 → 360
   ============================================== */

/* --- Large desktops ≤1600px --- */

@media (max-width: 1600px) {
  .hero { padding: 20px 0; }

  .hero-inner.container { padding: 80px 88px; }

  .hero-content { width: auto; flex: 1; min-width: 0; }

  .destinations { padding: 100px 0; }

  .how { padding: 100px 0; }

  .why-ria { padding: 100px 0; }

  .why-ria__band { padding: 60px; }

  .why-choose { padding: 100px 0; }

  .branch-cards { gap: 24px; }

  .faq { padding: 100px 0; }
}

/* --- Intermediate ≤1400px --- */

@media (max-width: 1400px) {
  h1 { font-size: 56px; }

  h2 { font-size: 40px; }

  .hero { padding: 20px 0; }

  .hero-inner.container { padding: 80px; }

  .hero-subline { font-size: 18px; }

  .hero-calc { width: 424px; }

  .destinations { padding: var(--space-2xl) 0; }

  .dest-grid { gap: 14px 16px; }

  .dest-globe { width: min(510px, calc(100vw - 732px)); }

  .dest-chip { font-size: 16px; padding: 14px 16px; }

  .dest-chip .flag { width: 32px; height: 24px; }

  .how { padding: var(--space-2xl) 0; }

  .how .container { gap: 48px; }

  .how-step__label strong { font-size: 18px; }

  .why-ria { padding: var(--space-2xl) 0; }

  .why-ria__band { padding: 56px; gap: var(--space-xl); }

  .why-ria__intro h2 { font-size: 34px; }

  .why-ria__intro p { font-size: 16px; }

  .why-ria__stats { padding-left: var(--space-xl); gap: 32px; }

  .ria-stat__number { font-size: 46px; }

  .ria-stat__label { font-size: 16px; }

  .why-choose { padding: var(--space-2xl) 0; }

  .reputation-content { gap: 48px; }

  .reputation-stat { width: 320px; }

  .stat-numbers .number { font-size: 46px; }

  .stat-numbers .label { font-size: 18px; }

  .reputation-stat > p { font-size: 16px; }

  .stat-icon {
    width: 140px;
    height: auto;
  }

  .branch-card { padding: 16px; }

  .branch-cards { gap: 20px; }

  .branch-card .rating .stars { gap: 2px; }

  .branch-card .rating .stars svg { width: 12px; height: 12px; }

  .star-half { width: 12px; height: 12px; }

  .star-half svg { width: 12px; height: 12px; }

  .faq { padding: var(--space-2xl) 0; }
}

/* --- Tablets / column layout ≤1200px --- */

@media (max-width: 1200px) {
  .container { padding: 0 20px; } /* lombard24.ee drops to 20px below desktop */

  .hero { padding: 32px 0; }

  .hero-inner.container {
    flex-direction: column;
    padding: 48px 40px;
    text-align: center;
    gap: 40px;
  }

  /* Column layout: copy on top, card below – re-aim the scrim vertically
     (dark up where the white text sits, easing toward the card) */
  .hero-inner.container::after {
    background: linear-gradient(180deg,
      rgba(9, 13, 23, 0.82) 0%,
      rgba(9, 13, 23, 0.56) 55%,
      rgba(9, 13, 23, 0.40) 100%);
  }

  /* The tall stacked panel takes a narrow slice of the photo – aim it left
     of the subjects: tablets still catch the couple next to the card, phones
     get calm sofa/wall ambience instead of cropped face fragments peeking
     around the card edge */
  .hero-bg { object-position: 10% 30%; }

  /* Column layout interleaves the visual between the heading block and the
     CTAs: dissolve the content wrapper so its children become hero-inner flex
     items, then order them – logos+heading, animation, CTAs, chips */
  .hero-content { display: contents; }

  .hero-top {
    order: 0;
    align-items: center;
    gap: 28px;
  }

  .cobrand { justify-content: center; }

  .hero-calc { order: 1; width: 100%; max-width: 480px; margin: 0 auto; }

  .hero-ctas { order: 2; justify-content: center; }

  h1 { font-size: 44px; }

  /* No side room next to the grid – the globe drops to the bottom of the
     block as a full, centered closing illustration */
  .dest-globe {
    position: static;
    width: min(420px, 78%);
    margin: 48px auto 0;
    transform: none;
  }

  /* stacked stepper: each step becomes a left-aligned row, numbers carry
     the sequence so the connectors are dropped. The list shrink-wraps to its
     widest row – full-width rows read as glued to the left edge on phones */
  .how-steps {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* hug the natural row width and center that box – a fixed cap (480px)
       force-wrapped the widest subline and left dead air on the right,
       so the centered block still read as left-shifted */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    /* on phones the rows clamp to the gutter width – keep a small indent
       so the icons don't sit glued to the screen edge */
    padding: 0 16px;
  }

  .how-step {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 0;
    width: 100%;
    text-align: left;
  }

  .how-step:not(:last-child)::after { display: none; }

  .how-step__illu img { width: 64px; height: 64px; }

  .receive-inner {
    gap: 40px;
    /* stacked mode: cap the measure so the block centers like .how-steps –
       the desktop 1240px track would leave the right half of the tint empty */
    max-width: 640px;
  }

  .receive-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* Stacked mode: the counter scene leads the block – above the heading,
     flush with the left text edge */
  .receive-illu {
    order: -1;
    align-self: flex-start;
    width: min(380px, 100%);
  }

  .receive-intro h2 { font-size: 38px; }

  .receive-steps { grid-template-columns: 1fr; gap: 16px; }

  .why-ria__band {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 40px;
  }

  .why-ria__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 48px;
    padding-left: 0;
    border-left: none;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    width: 100%;
  }

  .why-choose { padding: var(--space-2xl) 0; }

  .reputation-content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .reputation-stat {
    width: 100%;
    max-width: 600px;
    align-items: center;
    text-align: center;
  }

  .stat-numbers { text-align: left; }

  .reputation-stat > p { text-align: center; }

  .branch-cards { width: 100%; }

}

/* --- Small tablets / large phones ≤768px --- */

@media (max-width: 768px) {
  .container { padding: 0 20px; }

  .section-divider { margin-top: 8px; margin-bottom: 8px; }

  h1 { font-size: 34px; }

  h2 { font-size: 30px; }

  .hero { padding: 24px 20px; }

  .hero-inner.container {
    padding: 40px 20px;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
  }

  .hero-subline { font-size: 16px; }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }

  .hero-ctas .btn { width: 100%; }

  .cobrand__lockup { width: 96px; height: 32px; }

  .section-sub { font-size: 16px; }

  .destinations { padding: var(--space-xl) 0; }

  .destinations .container { gap: 40px; }

  /* Phone chips: 2 capped columns – narrower than the fluid grid was on
     small tablets – and extra block padding so the pills read taller */
  .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 400px; }

  .dest-chip { font-size: 14px; padding: 16px 14px; gap: 10px; border-radius: var(--radius-md); }

  .dest-chip .flag { width: 28px; height: 21px; }

  .dest-more { font-size: 19px; }

  .how { padding: var(--space-xl) 0; }

  .how .container { gap: 40px; }

  .calc { border-radius: var(--radius-lg); padding: 48px 36px; }

  .why-ria { padding: var(--space-xl) 0; }

  .why-ria__band { padding: 40px 24px; gap: 40px; }

  .why-ria__mark { width: 64px; height: 43px; }

  .why-ria__intro h2 { font-size: 28px; }

  .receive { padding: var(--space-xl) 0; }

  .receive-intro h2 { font-size: 30px; }

  .receive-illu { width: min(300px, 100%); }

  .receive-how__title { font-size: 19px; }

  .receive-steps li { padding: 14px 16px; gap: 12px; }

  .receive-step__num { font-size: 28px; }

  .receive-step__label strong { font-size: 16.5px; }

  .why-ria__stats { flex-direction: column; gap: 28px; padding-top: 32px; }

  .ria-stat__number { font-size: 40px; }

  .why-choose { padding: var(--space-xl) 0; }

  .reputation-block { padding: 0; gap: 40px; }

  .branch-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  .faq { padding: var(--space-xl) 0; }

  .faq-content { gap: 40px; }

  .faq-list { gap: 16px; }

  .faq-question { font-size: 16px; min-height: 64px; }

  .contact-cta-block { margin-top: 64px; gap: 28px; }

  .contact-cta-block h3 { font-size: 22px; }

  .contact-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .contact-buttons .btn { width: 100%; }

  .legal-note { margin-top: var(--space-xl); font-size: 12px; }
}

/* --- Phones ≤480px --- */

@media (max-width: 480px) {
  h1 { font-size: 30px; }

  h2 { font-size: 26px; }

  .dest-more { font-size: 17px; }

  .how-step { gap: 14px; }

  .how-step__illu img { width: 56px; height: 56px; }

  .how-step__num { width: 24px; height: 24px; font-size: 13px; left: -8px; }

  .how-step__label strong { font-size: 17px; }

  .how-step__label span { font-size: 13.5px; }

  .calc-receive__amount { font-size: 30px; }

  /* Phones: the four remaining presets fill the row on one line – «1 000 €»
     drops out (it kept the other chips from fitting; still typeable in the field) */
  .calc-presets { flex-wrap: nowrap; }

  .calc-preset[data-calc-preset="1000"] { display: none; }

  .faq-question { padding: 0 16px; }

  .faq-item.open .faq-answer > p { padding: 8px 16px 16px; }

  .faq-answer > p { padding: 0 16px; }
}

/* --- Compact phones ≤360px --- */

@media (max-width: 360px) {
  /* The doubled card padding leaves too little room for the preset row on
     320px screens – ease it so the four chips still share one line */
  .calc { padding: 40px 20px; }

  /* Copy + pill no longer fit side by side – the pill takes the whole bar */
  .sticky-cta__title { display: none; }

  .sticky-cta .btn-primary { width: 100%; }
}