:root { 
  --bg: #f0f8ff; 
  --text: #1a365d; 
  --brand: #3182ce; 
  --accent: #2c5282; 
  --muted: #4a5568; 
  --success: #38a169;
  --warning: #d69e2e;
  --error: #e53e3e;
  --light-blue: #ebf8ff;
  --dark-blue: #1a365d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:2px solid var(--light-blue);position:sticky;top:0;z-index:10;box-shadow:0 2px 4px rgba(49,130,206,0.1)}
.brand{display:flex;align-items:center;gap:10px;padding:10px 0}
.site-name{font-weight:700;color:var(--accent)}
.main-nav .nav-toggle{display:none;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:10px 12px;font-size:18px;cursor:pointer;transition:background 0.3s ease}
.main-nav .nav-toggle:hover{background:var(--accent)}
.main-nav ul{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--text);text-decoration:none;padding:12px 16px;border-radius:8px;transition:all 0.3s ease;font-weight:500}
.main-nav a:hover{background:var(--light-blue);color:var(--brand);transform:translateY(-1px)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;padding:24px 0}
.hero img{width:100%;height:auto;border-radius:20px;box-shadow:0 15px 35px rgba(49,130,206,0.15);transition:transform 0.3s ease}
.hero img:hover{transform:scale(1.02)}
.hero h1{margin:0 0 12px;font-size:2.5rem;color:var(--accent);font-weight:700;line-height:1.2}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.card{background:#fff;border:2px solid var(--light-blue);border-radius:20px;padding:24px;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(49,130,206,0.08)}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(49,130,206,0.15);border-color:var(--brand)}
.card h3{margin:0 0 8px}
.section{padding:26px 0}
.site-footer{background:#fff;border-top:1px solid #e5f1f3;margin-top:40px}
.site-footer .wrap{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:20px 16px}
.site-footer a{color:var(--brand)}
.copy{color:var(--muted);font-size:.9rem}
img{max-width:100%;height:auto}
.cookie-banner{position:fixed;inset:auto 12px 12px 12px;background:var(--dark-blue);color:#fff;padding:16px 20px;border-radius:16px;display:none;gap:12px;box-shadow:0 8px 32px rgba(26,54,93,0.3);z-index:1000}
.cookie-banner .btn{background:var(--brand);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:background 0.3s ease}
.cookie-banner .btn:hover{background:var(--accent)}
.notice{background:var(--light-blue);border:2px dashed var(--brand);padding:16px;border-radius:12px;color:var(--dark-blue)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
blockquote{border-left:4px solid var(--brand);padding-left:16px;color:var(--accent);font-style:italic;background:var(--light-blue);padding:16px;border-radius:8px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(49,130,206,0.08)}
th,td{border:1px solid var(--light-blue);padding:12px;text-align:left}
th{background:var(--brand);color:#fff;font-weight:600}
tr:nth-child(even){background:var(--light-blue)}

/* Details/Summary стили для FAQ */
details{background:#fff;border:2px solid var(--light-blue);border-radius:12px;margin:12px 0;overflow:hidden}
summary{padding:16px;cursor:pointer;font-weight:600;color:var(--accent);background:var(--light-blue);transition:background 0.3s ease}
summary:hover{background:var(--brand);color:#fff}
details[open] summary{background:var(--brand);color:#fff}
details p{padding:16px;margin:0;color:var(--text)}

/* Кнопки */
.btn{background:var(--brand);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.3s ease;text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(49,130,206,0.3)}

/* Ссылки */
a{color:var(--brand);text-decoration:none;transition:color 0.3s ease}
a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr}
  .main-nav .nav-toggle{display:inline-block}
  .main-nav .nav-list{display:none}
  .main-nav .nav-list.active{display:flex}
}