/* =========================
   Variables & Base
   ========================= */
:root{
  --accent: #2e5aac;
  --accent-2: #cfa642;
  --muted: #6b6b6b;
  --muted-strong: #394657;
  --card-radius: 14px;
  --card-bg: #ffffff;
  --page-bg: #f5f6f8;          /* серый фон всей страницы */
  --glass: rgba(46,90,172,0.06);
  --max-width: 1200px;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --base: 18px;               /* чуть меньше для удобочитаемости */
  --lead: 1.5;
  --h1: clamp(28px, 4.6vw, 54px);
  --h2: clamp(22px, 2.8vw, 32px);
  --h3: clamp(18px, 2.2vw, 22px);
}

/* Reset + base */
*{box-sizing:border-box}
html, body{height:100%}

html { font-size: var(--base); }
body { font-size: 1rem; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--base);
  line-height:var(--lead);
  color: #0f1720;
  background: var(--page-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utility */
.container{
  max-width:var(--max-width);
  margin:40px auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* Head / Hero */
.header{
  padding:60px 20px;
  text-align:center;
  background: var(--card-bg);
  border-radius:var(--card-radius);
  margin:20px;
  box-shadow: 0 24px 60px rgba(16,28,40,0.12);
}
.header h1{
  margin:0 0 12px;
  font-size:var(--h1);
  color:var(--accent);
  line-height:1.03;
}
.header p{
  margin:0 auto;
  max-width:980px;
  color:var(--muted-strong);
  font-size:1rem;
}

/* Sections */
.section{
  background:var(--card-bg);
  border-radius:var(--card-radius);
  padding:28px;
  box-shadow: 0 14px 40px rgba(16,28,40,0.08);
}

/* Grid */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} }

/* Headings */
h2{font-size:var(--h2);margin:0 0 12px;color:#102030}
h3{font-size:var(--h3);margin:0 0 10px;color:#102030}

/* Lead */
.lead{color:var(--muted-strong);font-size:1rem;margin-bottom:12px}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width:1100px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:1fr} }

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(17,24,39,0.06);
  background:#fff;
  box-shadow: 0 12px 30px rgba(16,28,40,0.06);
}
.gallery-item img{
  display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.9,.2,1);
}
.gallery-item:hover img{ transform:scale(1.06) }
.gallery-caption{
  position:absolute;left:12px;bottom:10px;
  background:linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.22));
  color:#fff;padding:8px 12px;border-radius:8px;font-size:0.95rem;
}

/* Upload mini */
.upload-mini{
  display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;border:1px dashed rgba(17,24,39,0.06);
  background:#fff;
  box-shadow: 0 10px 28px rgba(16,28,40,0.05);
}
.upload-mini .icon{
  width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#5b8fe6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.4rem;
}

/* Metrics */
.metrics{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.metric{
  flex:1 1 180px;background:#fff;padding:18px;border-radius:12px;border:1px solid rgba(17,24,39,0.06);
  text-align:center;box-shadow: 0 12px 32px rgba(16,28,40,0.06);
}
.metric .num{font-size:1.35rem;font-weight:700;color:var(--accent)}
.metric .label{font-size:0.95rem;color:var(--muted)}

/* Cases */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:900px){ .case-grid{grid-template-columns:1fr} }
.case{
  display:flex;gap:14px;align-items:flex-start;border-radius:12px;padding:14px;border:1px solid rgba(17,24,39,0.06);
  background:#fff;box-shadow: 0 12px 32px rgba(16,28,40,0.05);
}
.case img{width:140px;height:96px;border-radius:10px;object-fit:cover}
.case .info h4{margin:0 0 6px;font-size:1.05rem;color:var(--accent)}

/* Testimonials */
.testimonials{display:flex;flex-direction:column;gap:16px}
.test-card{
  display:flex;gap:12px;align-items:flex-start;background:#fff;padding:14px;border-radius:12px;border:1px solid rgba(17,24,39,0.06);
  box-shadow: 0 12px 30px rgba(16,28,40,0.05);
}
.test-card img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.test-card blockquote{margin:0;color:var(--muted-strong);font-size:1rem}

/* Partners */
.partners{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.partner{padding:12px;background:#fff;border-radius:10px;border:1px solid rgba(17,24,39,0.06);min-width:120px;display:flex;align-items:center;justify-content:center;box-shadow: 0 8px 24px rgba(16,28,40,0.04)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){ .faq{grid-template-columns:1fr} }
.faq-item{background:#fff;padding:12px;border-radius:10px;border:1px solid rgba(17,24,39,0.06);box-shadow:0 10px 30px rgba(16,28,40,0.04)}
.faq-item summary{font-weight:600;cursor:pointer;padding:8px;list-style:none}

/* CTA */
.cta-try{
  display:flex;gap:20px;align-items:center;justify-content:space-between;padding:28px;border-radius:14px;
  background: linear-gradient(90deg, var(--accent), #315eb5 50%, var(--accent-2));
  color:#fff;
  box-shadow: 0 20px 60px rgba(16,28,40,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}
.cta-try .left{max-width:66%}
.cta-try .title{font-size:1.35rem;font-weight:700;margin-bottom:8px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.14)}
.cta-try .desc{color:rgba(255,255,255,0.95);font-size:1rem;line-height:1.35}
.cta-try .actions{display:flex;gap:12px;align-items:center}
.cta-try .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.cta-try .btn.primary{background:#fff;color:var(--accent);border:0;box-shadow:0 12px 36px rgba(2,6,23,0.12);min-width:140px;text-align:center}
.cta-try .btn.primary:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(2,6,23,0.14)}
.cta-try .btn.secondary{background: rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.18)}
.cta-try .btn.secondary:hover{background: rgba(255,255,255,0.18)}
.cta-try .btn:focus{outline: 3px solid rgba(255,255,255,0.14); outline-offset:4px}

/* small text */
.smallmuted{color:var(--muted-strong);font-size:0.98rem}

/* Modal for images */
.img-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,18,0.75);z-index:300}
.img-modal img{max-width:92%;max-height:86%;border-radius:12px;box-shadow:0 30px 80px rgba(2,6,18,0.6)}
.img-modal .close{position:absolute;top:22px;right:22px;background:rgba(255,255,255,0.12);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}

/* Accessibility helpers */
a,button{outline-color:rgba(49,104,198,0.18)}
:focus{outline-offset:3px}

/* Responsive */
@media (max-width:720px){
  .cta-try{flex-direction:column;align-items:stretch;text-align:center}
  .cta-try .left{max-width:100%}
  .cta-try .actions{width:100%;justify-content:center}
  .cta-try .btn{width:48%}
  .gallery-item img{height:260px;object-position:center}
  .case img{width:120px;height:80px}
}