/* --- FORCE BG DIAGNOSTIC --- */
html, body { margin:0; padding:0; }
body{
  /* принудительно включаем фото на фоне */
  background: url("assets/bg.webp") center / cover no-repeat fixed !important;
  position: relative;
}
/* временно отключаем вуаль, чтобы точно увидеть фото */
body::before{ content:none !important; }
/* --- /FORCE BG DIAGNOSTIC --- */


:root{
  --bg:#f7fafc;
  --text:#0f172a;
  --muted:#475569;
  --accent:#2563eb;
  --accent-2:#0ea5e9;
  --card:#ffffff;
  --ring:#e2e8f0;
}

*{ box-sizing:border-box }

/* === Global background (photo + soft veil) === */
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, #e6f0ff 0%, #f8fafc 40%, #f1f5f9 100%),
    url("assets/bg.webp") center / cover no-repeat fixed; /* <— ВАЖНО: без начального слеша */
}
body{
  position: relative; /* чтобы вуаль была поверх фона body */
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;          /* было -1 — из-за этого вуаль могла оказаться под фоном */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

.container{ max-width:1100px; margin:0 auto; padding:24px }

.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ring);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}

/* Icon buttons in the top nav */
.nav a.icon-btn{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.nav a.icon-btn svg{ width:20px; height:20px; display:block; }

/* фирменный синий */
.nav a.icon-btn.linkedin{ color:#0A66C2; }
.nav a.icon-btn.linkedin:hover{ filter:brightness(1.1); }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand .logo{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px rgba(37,99,235,.35);
}

/* Hero uses page background — no own background here */
.hero{
  padding:64px 24px 32px;
  position:relative;
  isolation:isolate;
  border-radius:24px;
  background: transparent;
}

.h1{ font-size:44px; line-height:1.05; margin:0 0 8px }
.h2{ font-size:28px; margin:20px 0 8px }
.h3{ font-size:20px; margin:16px 0 8px; color:var(--muted) }
.lead{ font-size:18px; color:var(--muted); max-width:800px }

.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 20px rgba(2,6,23,.04);
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; padding:6px 10px;
  border:1px solid var(--ring);
  border-radius:999px;
  background:#fff;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:12px;
  border:1px solid var(--ring);
  padding:12px 16px;
  font-weight:600;
  background:#fff;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; border:none;
  box-shadow:0 10px 24px rgba(37,99,235,.3);
}

.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--ring);
  background:#fff;
  outline:none;
}
.input:focus{
  box-shadow:0 0 0 4px rgba(37,99,235,.2);
  border-color:var(--accent);
}

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }

.footer{
  margin-top:40px; padding:24px;
  border-top:1px solid var(--ring);
  color:var(--muted);
  font-size:14px;
  background:#fff;
}

.kpi{ display:flex; align-items:baseline; gap:8px }
.kpi .num{ font-size:34px; font-weight:800 }
.kpi .sub{ color:var(--muted); font-size:12px }

/* Responsive */
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:600px){
  .grid-3, .grid-2{ grid-template-columns:1fr }
  .h1{ font-size:34px }
}