/* styles.css — mobile-first, быстрый */

:root {
  --primary: #0f62fe;
  --success: #22c55e;
  --light: #f8fafc;
  --gray: #64748b;
  --dark: #0f172a;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.05);
  --transition: 0.2s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--dark);
  background: white;
}

.container { max-width:1200px; margin:0 auto; padding:0 16px; }

.skip-link {
  position:absolute; top:-100px; left:0; background:var(--primary); color:white;
  padding:8px 16px; z-index:1000;
}
.skip-link:focus { top:0; }

.header {
  background:white; box-shadow:0 1px 4px rgba(0,0,0,0.05);
  position:sticky; top:0; z-index:100;
}
.header .container { display:flex; justify-content:space-between; align-items:center; height:64px; }

.logo { font-size:1.4rem; font-weight:700; color:var(--primary); text-decoration:none; }

.menu-toggle { display:none; }
.burger { display:flex; flex-direction:column; justify-content:space-around; width:24px; height:20px; cursor:pointer; }
.burger span { height:2px; background:var(--dark); transition:var(--transition); }
.menu-toggle:checked + .burger span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle:checked + .burger span:nth-child(2) { opacity:0; }
.menu-toggle:checked + .burger span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

.nav { display:none; position:absolute; top:64px; left:0; width:100%; background:white; padding:16px; box-shadow:0 4px 8px rgba(0,0,0,0.1); }
.menu-toggle:checked ~ .nav { display:block; }
.nav-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.nav a { text-decoration:none; color:var(--dark); font-weight:500; display:block; padding:8px; }
.nav a:hover, .nav a:focus { color:var(--primary); }

.hero {
  background:linear-gradient(135deg, var(--primary), #3b82f6);
  color:white; text-align:center; padding:80px 16px 60px;
}
.hero h1 { font-size:2.2rem; margin-bottom:16px; }
.hero-text { font-size:1.1rem; max-width:720px; margin:0 auto 32px; opacity:0.95; }

.btn {
  display:inline-block; padding:14px 28px; border-radius:var(--radius);
  font-weight:600; text-decoration:none; transition:var(--transition);
  min-width:160px; text-align:center;
}
.btn-primary { background:white; color:var(--primary); }
.btn-primary:hover { background:rgba(255,255,255,0.9); transform:translateY(-1px); }
.btn-outline { background:transparent; border:2px solid white; color:white; }
.btn-outline:hover { background:rgba(255,255,255,0.15); }

.section { padding:60px 0; }
.bg-light { background:var(--light); }

h2 { font-size:2rem; text-align:center; margin-bottom:40px; }

.grid-3, .grid-2 { display:grid; gap:24px; }

.advantage-card, .step-card, .strategy {
  background:white; padding:24px; border-radius:var(--radius);
  box-shadow:var(--shadow); text-align:center;
}

.icon { width:44px; height:44px; fill:var(--primary); margin-bottom:12px; }

.step-number {
  display:block; width:44px; height:44px; background:var(--primary); color:white;
  border-radius:50%; line-height:44px; margin:0 auto 16px; font-weight:bold;
}

.big { font-size:2.8rem; font-weight:700; color:var(--primary); }

.reviews-grid { display:grid; gap:24px; }
.review {
  background:white; padding:24px; border-radius:var(--radius);
  box-shadow:var(--shadow); font-style:italic;
}
.review footer { margin-top:12px; color:var(--gray); font-style:normal; }

details { background:white; margin-bottom:12px; border-radius:var(--radius); box-shadow:var(--shadow); }
summary { padding:16px 24px; font-weight:600; cursor:pointer; }
details p { padding:0 24px 20px; }

.contact-form { max-width:560px; margin:32px auto 0; }
label { display:block; margin:12px 0 6px; font-weight:500; }
input, textarea {
  width:100%; padding:12px; border:1px solid #d1d5db;
  border-radius:var(--radius); font-size:1rem;
}
input:focus, textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(15,98,254,0.1); }

.footer { background:var(--dark); color:white; text-align:center; padding:40px 16px 24px; }
.disclaimer { margin-top:16px; font-size:0.85rem; opacity:0.8; }

.center { text-align:center; }
.mt-2 { margin-top:2rem; }

/* Адаптив */
@media (min-width:768px) {
  .grid-3 { grid-template-columns:repeat(3,1fr); }
  .grid-2 { grid-template-columns:repeat(2,1fr); }
  .hero h1 { font-size:3.2rem; }
  .nav { display:flex !important; position:static; box-shadow:none; padding:0; }
  .nav-list { flex-direction:row; gap:32px; }
  .burger { display:none; }
}

:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }