/* =========================================================
   Tokens / Design system
========================================================= */
:root{
  --primary: #0077cc;         /* брендовый */
  --primary-600:#005fa3;
  --bg:#ffffff;               /* фон */
  --bg-soft:#f5f5f5;          /* мягкий фон блоков */
  --text:#333;                /* основной текст */
  --text-2:#555;              /* вторичный текст */
  --heading:#222;             /* заголовки */

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1200px;
  --gap: 1.5rem;

  /* типографика */
  --fs-hero: clamp(1.9rem, 2.2vw + 1rem, 2.8rem);
  --fs-lead: clamp(.98rem, .6vw + .8rem, 1.2rem);
  --fs-h2: clamp(1.35rem, .8vw + 1rem, 2rem);
  --fs-h3: clamp(1.05rem, .4vw + .9rem, 1.35rem);
  --fs-body: 1rem;

  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light dark; } /* не меняем палитру, но уважаем системные настройки */
}

/* =========================================================
   Base / reset
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 400 var(--fs-body)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

img,svg,video{ display:block; max-width:100%; height:auto; }
img{ background:#eee; }           /* мягкий placeholder */
figure{ margin:0; }

/* CLS-защита: если размеры известны — браузер их учитывает */
img[width][height]{ height:auto; }
/* запасная заглушка пропорций (для забытых картинок) */
img:not([width]):not([height]){ aspect-ratio: 16/9; }

.container{ width:min(92%, var(--maxw)); margin-inline:auto; }
section{ padding-block: clamp(2.4rem, 4vw, 4rem); }
/* рендерим секции по мере появления в вьюпорте */
section[data-lazy]{ content-visibility:auto; contain-intrinsic-size: 1000px; }

/* утилиты */
.grid{ display:grid; gap:var(--gap); }
.card{
  background:#fff; border-radius:var(--radius);
  padding:1.25rem; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; background:var(--bg-soft); font-size:.8rem; }

/* =========================================================
   Header / Navigation
========================================================= */
header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e9e9e9; }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.logo{ font-weight:700; font-size:1.4rem; color:var(--primary); }

.nav-links{ list-style:none; display:flex; gap:var(--gap); margin:0; padding:0; }
.nav-links a{ color:var(--text); font-weight:500; transition:color .2s; }
.nav-links a:hover,.nav-links a.active{ color:var(--primary); }

.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span{ width:24px; height:3px; background:var(--text); border-radius:4px; }

@media (max-width: 768px){
  .nav-links{
    position:absolute; inset-block-start:100%; inset-inline-end:0;
    background:#fff; border:1px solid #e7e7e7; width:230px;
    display:none; flex-direction:column; gap:0;
  }
  .nav-links li{ padding:1rem; border-bottom:1px solid #f2f2f2; }
  .nav-links.show{ display:flex; }
  .hamburger{ display:flex; }
}

/* =========================================================
   Buttons / Links (контраст AA/AAA)
========================================================= */
.btn,.btn-primary{
  --btn-bg: #0B5ED7; --btn-bg-hover:#0847a7; --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.4rem; border-radius:10px; border:0;
  color:var(--btn-fg); background:var(--btn-bg); font-weight:700; letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(11,94,215,.25);
  transition: background-color .25s, box-shadow .25s, transform .05s;
}
.btn:hover,.btn-primary:hover{ background:var(--btn-bg-hover); box-shadow:0 4px 14px rgba(8,71,167,.35); }
.btn:active,.btn-primary:active{ transform:translateY(1px); }
.btn--outline{ background:transparent; color:var(--primary); border:1px solid var(--primary); }

/* контрастная ссылка поверх миниатюры */
.media-tag,.on-media-link{
  position:absolute; inset:auto auto .6rem .6rem;
  padding:.5rem .75rem; border-radius:10px; font-weight:700; line-height:1;
  background:rgba(0,0,0,.65); color:#fff !important;
  backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
}
.on-media-link{ position:static; background:#0B5ED7; box-shadow:0 2px 10px rgba(11,94,215,.25); }
.on-media-link:hover{ background:#0847a7; }

/* =========================================================
   Hero (через <img class="hero__bg"> для корректного LCP)
========================================================= */
.hero{
  min-height: clamp(50vh, 70vh, 82vh);
  display:grid; place-items:center; position:relative; color:#fff;
  background:#1a1a1a; /* fallback пока картинка не пришла */
}
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1; /* не ломает поток, LCP считает картинку */
}
.hero__content,.hero-content{ position:relative; text-align:center; max-width:720px; padding:0 1rem; }
.hero h1{ margin:0 0 .8rem; font-size:var(--fs-hero); line-height:1.2; }
.hero p{ margin:0 0 1.6rem; font-size:var(--fs-lead); }

/* узкий hero для внутренних */
.hero--slim{ min-height: clamp(38vh, 48vh, 55vh); }

/* =========================================================
   Section titles
========================================================= */
.section-title{ text-align:center; margin-bottom:2rem; }
.section-title h2{ margin:0 0 .5rem; color:var(--heading); font-size:var(--fs-h2); }
.section-title p{ margin:0; color:#666; }

/* =========================================================
   Services (главная + /services)
========================================================= */
.services-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.service-card{
  background:var(--bg-soft); border-radius:var(--radius);
  padding:2rem 1.5rem; text-align:center;
  transition: box-shadow .25s ease, transform .05s ease;
}
.service-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); }
.service-card .icon{ font-size:2.4rem; color:var(--primary); margin-bottom:.9rem; }
.service-card h3{ font-size:var(--fs-h3); margin:.4rem 0; }
.service-card p{ color:var(--text-2); font-size:.95rem; margin:.6rem 0 1rem; }
.service-card a{ color:var(--primary); font-weight:700; }

/* =========================================================
   Features (Why choose us)
========================================================= */
.features-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); text-align:center; }
.feature{ padding:1rem; }
.feature .icon{ font-size:2.3rem; color:var(--primary); margin-bottom:.4rem; }
.feature h4{ margin:.2rem 0 .35rem; font-size:1.05rem; }
.feature p{ color:var(--text-2); font-size:.92rem; }

/* =========================================================
   Projects (галерея + фильтры)
========================================================= */
.filter-buttons{ text-align:center; margin-bottom:1.6rem; }
.filter-buttons button{
  margin:.25rem; padding:.55rem 1rem; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--primary); color:var(--primary);
  transition: background .2s,color .2s,border-color .2s;
}
.filter-buttons button:hover,.filter-buttons button.active{ background:var(--primary); color:#fff; }

.project-item{ display:none; transition:opacity .25s ease; }
.project-item.show{ display:block; }
.project-item img{ width:100%; height:auto; border-radius:var(--radius); aspect-ratio: 3/2; object-fit: cover; }
.project-item h4{ margin:.6rem 0 .25rem; }
.project-item p{ margin:0; color:var(--text-2); }

/* =========================================================
   Testimonials
========================================================= */
.testimonials{ background:var(--bg-soft); }
.testimonial-slider{ display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; }
.testimonial{ flex:0 0 300px; background:#fff; border-radius:var(--radius); padding:1.25rem; scroll-snap-align:start; box-shadow:0 6px 16px rgba(0,0,0,.06); }
.testimonial .stars{ color:#ffc107; margin-bottom:.5rem; }
.testimonial h4{ margin:.25rem 0; }
.testimonial p{ margin:.5rem 0 0; color:var(--text-2); }

/* =========================================================
   Blog
========================================================= */
.blog-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.blog-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.06); background:#fff; }
.blog-card img{ width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; }
.blog-card__content{ padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.blog-card__content h3{ margin:.2rem 0; font-size:1.05rem; }
.blog-card__content p{ color:var(--text-2); font-size:.95rem; margin:0; }

/* =========================================================
   ГАЛЕРЕИ внутри сервисных страниц
========================================================= */
.gallery-grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-grid img{ width:100%; height:auto; border-radius:var(--radius-sm); aspect-ratio: 4/3; object-fit:cover; }

/* =========================================================
   Forms (/contact, /careers)
========================================================= */
.form-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }

.form-group{ margin-bottom:1rem; }
.form-group label{ display:block; margin-bottom:.5rem; font-weight:600; }
.form-group input,.form-group textarea,.form-group select{
  width:100%; padding:.78rem; border:1px solid #ccc; border-radius:10px; font-size:1rem;
}
.form-group textarea{ resize:vertical; min-height:120px; }
.btn-submit{ composes: btn; } /* если без postcss — просто добавьте класс .btn */

/* карта */
.map-container{ width:100%; height:320px; border:0; border-radius:var(--radius); overflow:hidden; }

/* Careers: карточки вакансий */
.job-card{ background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:0 8px 22px rgba(0,0,0,.06); }
.job-card h3{ margin:.25rem 0 .5rem; }
.job-card ul{ margin:.35rem 0 .6rem 1.1rem; }

/* =========================================================
   Footer
========================================================= */
footer{ background:#111; color:#ddd; padding-block:2rem; }
footer .footer-content{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
footer h4{ color:#fff; margin:0 0 1rem; font-size:1.05rem; }
footer ul{ list-style:none; padding:0; margin:0; }
footer li{ margin-bottom:.5rem; }
footer a{ color:#ddd; transition:color .2s; }
footer a:hover{ color:var(--primary); }
footer .social-icons{ display:flex; gap:1rem; }
footer .social-icons a{ color:#ddd; font-size:1.25rem; }

/* =========================================================
   Page flags / нюансы
========================================================= */
.page--slim .hero{ min-height: clamp(40vh, 50vh, 55vh); } /* /services и др. */

/* =========================================================
   Motion / accessibility
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
}