/* График отпусков 2027 — общий стиль сайта */
:root{
  --bg:#f7f8f7; --card:#ffffff; --text:#1b2523; --muted:#5d6b68;
  --border:#e3e7e5; --accent:#0f766e; --accent-2:#0b5f59; --accent-soft:#e6f4f2;
  --radius:14px; --max:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Шапка */
header.site{position:sticky; top:0; z-index:10; background:rgba(247,248,247,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
header.site .wrap{display:flex; align-items:center; gap:24px; height:60px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.logo svg{display:block}
nav.main{margin-left:auto; display:flex; gap:20px}
nav.main a{color:var(--muted); font-weight:500}
nav.main a:hover{color:var(--accent); text-decoration:none}

/* Кнопки */
.btn{display:inline-block; padding:12px 22px; border-radius:10px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-size:15px; transition:.15s}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.ghost{background:var(--card); color:var(--text); border-color:var(--border)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* Герой */
.hero{padding:72px 0 56px; text-align:left}
.hero h1{font-size:clamp(30px,5vw,46px); line-height:1.15; margin:0 0 16px; letter-spacing:-.02em}
.hero p.lead{font-size:19px; color:var(--muted); max-width:640px; margin:0 0 28px}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap}
.badge{display:inline-block; background:var(--accent-soft); color:var(--accent-2);
  font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; margin-bottom:18px}

/* Секции */
section{padding:44px 0}
section.alt{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
h2{font-size:28px; letter-spacing:-.01em; margin:0 0 8px}
.sub{color:var(--muted); margin:0 0 28px; max-width:720px}
.grid{display:grid; gap:18px}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px}
section.alt .card{background:var(--bg)}
.card h3{margin:12px 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:15px}
.icon{width:40px; height:40px; border-radius:10px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:20px}

/* Шаги */
.steps{counter-reset:s; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.step::before{counter-increment:s; content:counter(s); display:inline-flex; width:32px; height:32px;
  align-items:center; justify-content:center; border-radius:50%; background:var(--accent);
  color:#fff; font-weight:700; font-size:15px; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:17px}
.step p{margin:0; color:var(--muted); font-size:15px}

/* Таблица */
table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:15px}
th{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
tr:last-child td{border-bottom:none}

/* FAQ */
details.faq{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px 20px; margin-bottom:10px}
details.faq summary{font-weight:600; cursor:pointer}
details.faq p{margin:10px 0 0; color:var(--muted); font-size:15px}

/* Подвал */
footer.site{border-top:1px solid var(--border); padding:32px 0; margin-top:40px;
  color:var(--muted); font-size:14px}
footer.site .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer.site a{color:var(--muted)}
footer.site .right{margin-left:auto}

@media (max-width:640px){
  .hero{padding:48px 0 40px}
  nav.main{gap:14px; font-size:14px}
  header.site .wrap{gap:12px}
}