/* ====== FONT (если файл есть — подключится) ====== */
@font-face{
  font-family:'Gerbera';
  src:url('../assets/fonts/Gerbera.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ====== BASE ====== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Gerbera',system-ui,Arial,sans-serif; color:#111; background:#fff; }
img{ display:block; max-width:100%; height:auto; }

.container-1440{ width:1440px; max-width:100%; margin-inline:auto; padding-inline:64px; }

/* ====== TOKENS ====== */
:root{
  --ps-purple:#6c3ef5;
  --ps-muted:#6b7280;
  --ps-card:#fff;
  --ps-border:#e8e8ef;
  --ps-shadow:0 20px 60px rgba(0,0,0,.12);
  --radius-lg:28px;
  --hero-bg-offset:140px;   /* сдвиг фото вниз */
}

/* ====== HEADER ====== */
.paysend-header{ border-bottom:1px solid #ececec; background:#fff; }
.paysend-header .container-1440{ display:flex; align-items:center; min-height:72px; }
.ps-logo img{ height:28px; width:auto; }

/* ====== HERO ====== */
.hero{ position:relative; min-height:100vh; padding:72px 0 80px; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:url("../assets/hero-bg.jpg") no-repeat;
  background-size:cover;
  background-position:center var(--hero-bg-offset);
  z-index:0;
}
.hero__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.88) 0%,
                                       rgba(255,255,255,0) 25% 70%,
                                       rgba(255,255,255,.88) 100%);
}
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }

.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.hero__title{ font-size:48px; line-height:1.1; letter-spacing:-0.02em; margin:0 0 16px; }
.hero__subtitle{ font-size:24px; line-height:1.45; color:var(--ps-muted); margin:0 0 32px; max-width:60ch; }

.hero__features{ display:flex; gap:48px; list-style:none; margin:36px 0 0; padding:0; align-self:flex-start; }
.feature{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; text-align:left; }
.feature__icon{ width:44px; height:44px; }
.feature__text{ font-size:16px; }

/* карточка */
.hero__card{
  background:var(--ps-card);
  border:1px solid var(--ps-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--ps-shadow);
  padding:32px 36px;
  max-width:680px;
  margin-left:auto;
  display:flex; flex-direction:column;
}

.field{ display:block; margin-bottom:24px; }
.field__label{ display:block; color:var(--ps-muted); font-size:14px; margin-bottom:8px; }
.field__control{ display:grid; grid-template-columns:1fr auto; align-items:center;
  border:1px solid var(--ps-border); border-radius:14px; padding:12px 14px; background:#fff;
  transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.field__control:focus-within{ border-color:var(--ps-purple); box-shadow:0 0 0 3px rgba(108,62,245,.1); }
.field__control input{ border:0; outline:0; font-size:20px; padding:8px 6px; width:100%; background:transparent; }
.field__suffix{ display:inline-flex; align-items:center; gap:10px; padding-left:10px; }
.flag-wrap{ display:inline-flex; }
.flag-img{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }
.cur{ font-weight:700; }

.meta{ display:grid; gap:16px; margin:20px 0 40px; }
.meta>div{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; }
.meta dt{ color:var(--ps-muted); font-weight:500; }
.meta dd{ margin:0; }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px; border:0; background:var(--ps-purple); color:#fff;
  font-weight:600; box-shadow:0 8px 22px rgba(108,62,245,.25); cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(108,62,245,.35); }
.btn-primary:active{ transform:translateY(0); }
.hero__cta{ align-self:center; }

/* ====== SOCIAL PROOF ====== */
.social-proof{ padding-top:65px; padding-bottom:24px; background:#fff; }
.sp__title{ margin:0 0 20px; font-size:28px; line-height:1.35; letter-spacing:-0.01em; }
.sp__subtitle{ margin:0; font-size:16px; line-height:1.6; color:var(--ps-muted); }

/* ====== TRUSTPILOT + AWARDS ====== */
.awards{ padding:56px 0; background:#fff; }
.awards__trustpilot{ display:flex; justify-content:center; margin-bottom:40px; }
.awards__trustpilot img{ height:48px; width:auto; }

.awards__list{ display:grid; grid-template-columns:repeat(2,minmax(260px,380px)); gap:40px; list-style:none; padding:0; margin:0; justify-content:center; }
.awards__item img{ width:100%; object-fit:contain; border:4px solid #f9d9c6; }

/* ====== BENEFITS ====== */
.benefits{ padding:72px 0; background:#fff; }
.benefits__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 64px; }
.benefit{ display:flex; flex-direction:column; align-items:flex-start; }
.benefit__icon{ width:64px; height:64px; margin-bottom:17px; }
.benefit__title{ font-size:20px; font-weight:600; margin:0 0 17px; }
.benefit__text{ font-size:16px; color:var(--ps-muted); margin:0; }

/* ====== ANIMATIONS ====== */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

.hero__title { animation:fadeInUp 0.6s ease-out; }
.hero__subtitle { animation:fadeInUp 0.6s ease-out 0.1s both; }
.hero__features { animation:fadeInUp 0.6s ease-out 0.2s both; }
.hero__card { animation:fadeInUp 0.8s ease-out 0.3s both; }

/* Индикатор прокрутки */
.scroll-indicator {
  display:none; /* Скрываем индикаторы */
}

/* ====== FOOTER ====== */
.site-footer {
  background:#f8f8f8;
  padding:48px 0 32px;
  margin-top:80px;
  border-top:1px solid #e8e8ef;
}

.footer__location {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  color:#666;
  font-size:14px;
}
.footer__flag {
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
}

.footer__top {
  padding-bottom:32px;
  border-bottom:1px solid #e0e0e0;
  margin-bottom:28px;
}

.footer__logo {
  display:block;
  margin-bottom:20px;
}
.footer__logo img {
  height:28px;
  width:auto;
  opacity:0.7;
  transition:opacity 0.2s ease;
}
.footer__logo:hover img { opacity:0.9; }

.footer__legal {
  padding:8px 0 24px;
  max-width:900px;
}
.footer__legal p {
  margin:0 0 12px;
  font-size:13px;
  line-height:1.6;
  color:#666;
}
.footer__legal p:first-child {
  font-weight:500;
  color:#333;
}
.footer__disclaimer,
.footer__trademarks {
  font-size:12px;
  color:#999;
  margin-top:20px;
}

.footer__payments {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:center;
  padding-top:24px;
  padding-bottom:16px;
  border-top:1px solid #e0e0e0;
}
.footer__payments img {
  height:40px;
  width:auto;
  opacity:0.7;
  transition:opacity 0.2s ease;
}
.footer__payments img:hover { opacity:1; }

.footer__payments-secondary {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:center;
  padding-bottom:32px;
}
.footer__payments-secondary img {
  height:36px;
  width:auto;
  opacity:0.7;
  transition:opacity 0.2s ease;
}
.footer__payments-secondary img:hover { opacity:1; }

.footer__socials {
  display:flex;
  gap:20px;
  align-items:center;
}

.social-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  border:1px solid #e0e0e0;
  transition:all 0.2s ease;
}
.social-link:hover {
  background:var(--ps-purple);
  border-color:var(--ps-purple);
  transform:translateY(-2px);
}
.social-link img {
  width:18px;
  height:18px;
  opacity:0.6;
  transition:opacity 0.2s ease, filter 0.2s ease;
}
.social-link:hover img {
  opacity:1;
  filter:brightness(0) invert(1);
}

/* ====== ADAPTIVE ====== */
@media (max-width:1024px){
  .container-1440{ padding-inline:32px; }
  .paysend-header .container-1440{ min-height:64px; }
  .ps-logo img{ height:24px; }
  .hero{ padding-top:64px; }
  .hero__inner{ grid-template-columns:1fr; gap:28px; }
  .hero__card{ margin:0; max-width:720px; }
  .benefits__grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
  /* Footer */
  .footer__payments{ gap:24px; }
  .footer__payments img{ height:32px; }
  .footer__payments-secondary{ gap:24px; }
  .footer__payments-secondary img{ height:28px; }
}
@media (max-width:640px){
  .container-1440{ padding-inline:16px; }
  .paysend-header .container-1440{ min-height:56px; }
  .ps-logo img{ height:20px; }
  
  /* Отключаем анимации на мобильных */
  .hero__title,
  .hero__subtitle,
  .hero__features,
  .hero__card { 
    animation:none;
    opacity:1;
    transform:none;
  }
  
  /* Hero секция */
  .hero{ 
    padding:20px 0 40px; 
    min-height:auto;
    background:#fafafa;
  }
  .hero__bg{ 
    opacity:0.1; /* Делаем фон очень светлым на мобильных */
  }
  .hero__inner{ 
    padding-top:20px;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .hero__copy{
    width:100%;
  }
  .hero__title{ 
    font-size:32px; 
    line-height:1.2;
    margin-bottom:16px;
  }
  .hero__subtitle{ 
    font-size:18px;
    line-height:1.4;
    margin-bottom:28px;
    color:#666;
  }
  
  /* Горизонтальная прокрутка для features */
  .hero__features { 
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:hidden; /* Скрываем прокрутку, так как все 3 элемента помещаются */
    overflow-y:hidden;
    padding-bottom:12px;
    position:relative;
    justify-content:space-between;
    width:100%;
  }
  
  /* Полностью скрываем полосу прокрутки */
  .hero__features::-webkit-scrollbar { 
    display:none;
  }
  .hero__features {
    -ms-overflow-style:none;  /* IE and Edge */
    scrollbar-width:none;  /* Firefox */
  }
  
  .feature { 
    flex:1 1 auto;
    width:calc((100% - 16px) / 3); /* Ровно 3 элемента на экране */
    min-width:100px;
    max-width:130px;
    background:#fff;
    padding:20px 14px;
    border-radius:16px;
    border:1px solid rgba(108, 62, 245, 0.08);
    box-shadow:0 3px 10px rgba(0, 0, 0, 0.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  
  .feature__icon { 
    width:48px; 
    height:48px;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    /* Убираем обводку */
  }
  
  .feature__icon img {
    width:100%;
    height:100%;
    filter: brightness(0) saturate(100%) invert(41%) sepia(86%) saturate(1591%) hue-rotate(238deg) brightness(97%) contrast(97%);
  }
  
  .feature__text {
    font-size:14px;
    line-height:1.35;
    color:#2c2c2c;
    font-weight:500;
  }
  
  /* Карточка формы */
  .hero__card{ 
    padding:20px; 
    border-radius:20px;
    margin-top:24px;
    width:100%;
    max-width:100%;
    background:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
  }
  .field__control input{ 
    font-size:18px; 
    padding:6px 4px;
  }
  .field__label{
    font-size:13px;
  }
  .meta{
    margin:16px 0 24px;
    gap:12px;
  }
  .meta dt, .meta dd{
    font-size:14px;
  }
  .btn-primary{
    padding:16px 24px;
    font-size:16px;
  }
  .awards{ padding:40px 0; }
  .awards__trustpilot{ margin-bottom:28px; }
  .awards__trustpilot img{ height:40px; }
  .awards__list{ grid-template-columns:1fr; gap:24px; }
  .benefits__grid{ grid-template-columns:1fr; gap:32px; }
  /* Footer mobile */
  .site-footer{ padding:32px 0 24px; margin-top:48px; }
  .footer__location{ margin-bottom:16px; }
  .footer__top{ padding-bottom:24px; margin-bottom:20px; }
  .footer__logo{ margin-bottom:16px; }
  .footer__logo img{ height:24px; }
  .footer__socials{ gap:12px; }
  .social-link{ width:32px; height:32px; }
  .social-link img{ width:16px; height:16px; }
  .footer__legal p{ font-size:12px; }
  .footer__disclaimer, .footer__trademarks{ font-size:11px; }
  .footer__payments{ gap:20px; justify-content:center; }
  .footer__payments img{ height:32px; } /* Увеличиваем размер */
  .footer__payments-secondary{ gap:20px; justify-content:center; }
  .footer__payments-secondary img{ height:28px; } /* Увеличиваем размер */
}
@media (max-width:420px){ 
  .hero__title{ 
    font-size:26px;
  }
  .hero__subtitle{ 
    font-size:16px;
  }
  .hero__card{ 
    padding:16px;
  }
  .field__control input{ 
    font-size:16px;
  }
  .meta dt, .meta dd{
    font-size:13px;
  }
  /* На очень маленьких экранах */
  .hero__features { 
    gap:6px;
  }
  .feature { 
    width:calc((100% - 12px) / 3);
    min-width:95px;
    padding:14px 10px;
  }
  .feature__icon { 
    width:40px; 
    height:40px;
  }
  .feature__text {
    font-size:12px;
  }
  .btn-primary{ 
    width:100%; 
    padding:14px 20px;
    font-size:15px;
  }
  .footer__payments img{ height:28px; }
  .footer__payments-secondary img{ height:24px; }
}