:root{
  --bg-dark:#273346;
  --primary:#1c85f0;
  --text:#1d2230;
  --muted:#6b768a;
  --card:#ffffff;
  --card-ghost:#ecf0f7;
  --radius:14px;
  --shadow:0 8px 24px rgba(20,28,40,.08);
  --shadow-soft:0 6px 18px rgba(20,28,40,.06);
  --container:1720px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}

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

/* ===== HERO full-bleed ===== */
section{padding:80px 0}
.hero{background:var(--bg-dark);color:#fff;padding:0;}
.hero-wrap{
  display:grid;
  grid-template-columns:50vw 50vw;
  grid-template-rows:auto 1fr;
  min-height:100vh;
}

.hero-topbar{
  grid-column:1;
  grid-row:1;
  display:flex;align-items:center;gap:16px;
  padding:24px clamp(24px,4vw,48px);
}
.brand img{height:60px;width:auto}

/* языковое меню */
.lang-switch{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;font-weight:700;font-size:14px;
  cursor:pointer
}
.lang-btn svg{opacity:.9}
.lang-menu{
  position:absolute;left:0;top:calc(100% + 8px);
  background:#fff;color:var(--text);
  border:1px solid #e6ebf3;border-radius:12px;
  box-shadow:var(--shadow);min-width:200px;
  overflow:hidden;
  opacity:0;transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:10
}
.lang-switch.open .lang-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  cursor:pointer
}
.lang-item:hover{background:#f6f9fe}

/* ПРАВКИ: вместо эмодзи используем PNG-иконки флагов */
.lang-flag{
  display:inline-flex;
  width:18px;height:18px;
  border-radius:3px;
  overflow:hidden;
  line-height:0;
  flex-shrink:0;
}
.lang-flag img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Левая колонка — основной текст */
.hero-left{
  grid-column:1;
  grid-row:2;
  display:flex;flex-direction:column;
  padding:0 clamp(24px,4vw,24px) 24px;
}
.hero-body{display:flex;flex-direction:column;justify-content:center;flex:1}
.eyebrow{
  display:inline-block;
  width:max-content;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:12px;letter-spacing:.02em;color:#e8eef7;margin-bottom:16px;background:rgba(255,255,255,.06)
}
h1{font-size:46px;line-height:1.1;margin:0 0 16px}
.lead{font-size:18px;color:#d7dfeb;margin:0 0 20px}

.inline-feats{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 28px}
.feat{display:flex;align-items:center;gap:10px;font-weight:600;color:#eef4ff}
.feat svg{width:20px;height:20px;opacity:.95}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;background:var(--primary);color:#fff;border:none;border-radius:10px;
  font-weight:700;cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ripple_effects{position:absolute;inset:0;pointer-events:none}
.btn .ripple_effects::after{
  content:'';position:absolute;height:350%;width:200%;top:0;left:-100%;
  background:rgba(255,255,255,.6);border-radius:100%;
  transform:scale(0);animation:tildaripple 6s linear infinite
}
@keyframes tildaripple{20%{opacity:0;transform:scale(2.5)}100%{opacity:0;transform:scale(2.5)}}

/* Правая колонка — картинка 50vw × 100vh */
.hero-right{
  grid-column:2;
  grid-row:1 / span 2;
  position:relative;width:50vw;height:100vh;overflow:hidden
}
.hero-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}

/* ===== Общие секции ===== */
.section-title{font-size:34px;margin:0 0 24px}
.section-lead{color:var(--muted);margin-bottom:32px}
.left{text-align:left}
.grid{display:grid;gap:22px}

/* --- БАЗОВЫЙ СТИЛЬ КАРТОЧЕК (с синей полоской) --- */
.card{
  position:relative;
  background:var(--card);
  border:1px solid #eef1f6;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s ease,transform .6s ease, box-shadow .18s ease, transform .18s ease;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg, var(--primary), rgba(28,133,240,0.15));
}
.card.show{opacity:1;transform:translateY(0)}
@media (hover:hover){
  .card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,28,40,.10); }
}

/* Крупнее иконки в карточках */
.card .icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--card-ghost);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--primary);box-shadow:var(--shadow-soft);
  flex:0 0 auto;
}
.card .icon svg, .card .icon img{ width:20px;height:20px; }

/* Services */
.services .grid{grid-template-columns:repeat(4,minmax(260px,1fr))}
.services .card h3{margin:6px 0 6px;font-size:18px}
.services .card p{margin:0;color:#4a566b}

/* Our Services (в секции why) */
.why .card h3{margin:6px 0 6px;font-size:18px}
.why .card p{margin:0;color:#4a566b}

/* Approach */
.approach .card h3{margin:6px 0 6px;font-size:18px}
.approach .card p{margin:0;color:#4a566b}

/* Contact */
.contact .card h3{margin:6px 0 6px;font-size:18px}
.contact .card a{margin:0;color:#1c85f0}

/* Why Choose Us (сеткой) */
.why .why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch}
.why .photo{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);
  grid-column:1;grid-row:1 / span 2; position:relative;
}
.why .photo::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--primary), rgba(28,133,240,0.15));
  z-index:2;
}
.why .photo img{width:100%;height:100%;object-fit:cover}
.why .card{height:100%}

/* Approach (грид карточек преимуществ) */
.approach .grid{grid-template-columns:repeat(4,minmax(260px,1fr))}
.approach .card .thumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin-bottom:12px;background:#e9eef7}
.approach .card h3{margin:4px 0 8px}
.cta-wrap{display:flex;justify-content:center;margin-top:26px}

/* ===== Contact split (форма на две строки) ===== */
.contact .board{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:24px;align-items:stretch}
.contact .card{height:100%}
.contact .email{grid-column:1;grid-row:1}
.contact .tg{grid-column:1;grid-row:2}

.form-card{
  grid-column:2;grid-row:1 / span 2;
  padding:24px;border-radius:var(--radius);
  background:#273346;border:1px solid #1f2a3a;box-shadow:var(--shadow);
  color:#fff;display:flex;flex-direction:column;gap:18px
}
.form-heading{font-size:26px;font-weight:700;margin:0}
.form-subheading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* поля формы */
.field{position:relative;margin-top:10px;}
.icon-in{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;
}
.icon-in svg{width:20px;height:20px;display:block}
.input{
  width:100%;height:56px;
  padding:0 14px 0 46px;
  border:1px solid rgba(255,255,255,.28);border-radius:10px;
  background:rgba(255,255,255,.06);font:inherit;color:#fff;font-size:16px
}
.input::placeholder{color:rgba(255,255,255,.7)}
.input:focus{outline:none;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.1)}
.form-card .btn{width:100%;height:58px;font-size:16px}
.form-note{margin:4px 0 0;color:rgba(255,255,255,.75);font-size:14px}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* ---------- Footer (универсальные стили + совместимость со старой/новой разметкой) ---------- */
footer{background:var(--bg-dark);padding:40px 0}

/* Старая разметка центрировала логотип */
.footer-brand{display:flex;justify-content:center}
.footer-brand img{height:34px;width:auto;opacity:.95}

/* Новая разметка (site-footer) + Fallback, если нет .footer-left/.footer-row */
.site-footer{background:var(--bg-dark);padding:28px 0}
.site-footer .footer-row,
.site-footer > .container,          /* fallback: если не добавили .footer-row */
footer .footer-row{                 /* fallback: если нет класса на footer */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}

/* Размер логотипа — работают все варианты обёрток */
.site-footer .footer-left img,
.site-footer img,
footer .footer-left img{
  height:34px;
  width:auto;
  display:block;
}

/* Цвет/размер копирайта — работает и при отсутствии .site-footer */
.site-footer .footer-copy,
footer .footer-copy{
  color:rgba(255,255,255,.85);
  font-size:14px;
}

/* Ссылки в футере (если копирайт — ссылка) */
.site-footer a,
footer a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
}

/* Mobile: центрируем и ставим текст под логотипом */
@media (max-width:700px){
  .site-footer .footer-row,
  .site-footer > .container,
  footer .footer-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .site-footer .footer-left img,
  .footer-brand img{
    margin:0 auto;
  }
}

/* --- Our Approach (extended stripes) --- */
.approach-extended { padding: 80px 0; background:#f8fbff; }
.approach-extended .section-title { margin-bottom: 16px; }
.ao-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(340px, 1fr));
  gap:20px;
}
.ao-item{
  position:relative;
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 20px 20px 24px;
  background:linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  border:1px solid #eef1f6;border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ao-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--primary), rgba(28,133,240,0.15));
}
.ao-icon{
  flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;background:var(--card-ghost);
  box-shadow:var(--shadow-soft);color:var(--primary);
}
.ao-icon img{ width:22px;height:22px;object-fit:contain; }
.ao-content h3{ margin:2px 0 6px; font-size:18px; }
.ao-content p{ margin:0; color:#4a566b; }

@media (hover:hover){
  .ao-item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,28,40,.10); }
}

/* Responsive */
@media (max-width:1300px){
  .services .grid{grid-template-columns:repeat(2,minmax(260px,1fr))}
  .approach .grid{grid-template-columns:repeat(2,minmax(260px,1fr))}
}
@media (max-width:1100px){
  .ao-grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .why .why-grid{grid-template-columns:1fr}
  .why .photo{grid-column:1;grid-row:auto}
}
@media (max-width:820px){
  .hero-wrap{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:unset}
  .hero-topbar{grid-column:1;grid-row:1;gap:14px}
  .hero-right{grid-column:1;grid-row:2;width:100%;height:auto;padding:0 20px;margin-top:14px}
  .hero-right img{position:static;width:100%;height:auto;border-radius:16px}
  .hero-left{grid-column:1;grid-row:3;padding:40px 20px 100px 20px}
  h1{font-size:34px}

  .contact .board{grid-template-columns:1fr;grid-template-rows:auto}
  .form-card{grid-column:1;grid-row:auto}
}

/* Our Approach: fix 588px edge case */
@media (max-width:620px){
  .approach .grid{
    grid-template-columns:repeat(2, minmax(240px,1fr));
    gap:16px;
  }
}

@media (max-width:560px){
  .services .grid{grid-template-columns:1fr}
  .approach .grid{grid-template-columns:1fr}
  .inline-feats{gap:12px}
  .ao-item{ padding:18px; }
  .ao-icon{ width:42px; height:42px; }
}

/* Перестановка в контактах: форма первой на мобилке */
@media (max-width:820px){
  .contact .board {
    display: flex;
    flex-direction: column;
  }
  .contact .form-card { order: 1; }
  .contact .email,
  .contact .tg { order: 2; }
}

/* убираем полоски в блоке "Why Leading Businesses Choose Us" — (если нужно оставить, удали это правило) */
.approach .card::before {
  content: none;
}