/* Styles aligned to old-site structure, modern minimalist look */
:root{
  --bg:#fbf8f4;
  --paper:#ffffff;
  --text:#262422;
  --muted:#6b6762;
  --accent:#7a3b2e;   /* тёплый акцент */
  --accent-2:#2e5a47; /* глубокий зелёный */
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
.container{width:min(1120px,92vw); margin-inline:auto}

.site-header{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(6px);}
.site-header nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; text-decoration:none; color:var(--text)}
.nav-links a{margin-left:18px; text-decoration:none; color:var(--text)}
.nav-links a:hover{color:var(--accent-2)}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; background:var(--accent-2); color:#fff; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow); font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent; border:1px solid #ddd; color:var(--text); box-shadow:none; border-radius:999px; padding:10px 14px}
.btn--ghost:hover{border-color:var(--accent-2); color:var(--accent-2)}
.btn--big{padding:14px 22px; font-size:1.1rem}

.hero{padding:56px 0 24px}
.hero__wrap{display:grid; gap:28px; grid-template-columns: 1.2fr .8fr; align-items:center}
.kicker{color:var(--muted); font-size:.95rem; letter-spacing:.02em}
.hero h1{margin:.2rem 0 .4rem; font-size:clamp(28px,5vw,40px)}
.lead{color:#3b3a38}
.cta{display:flex; gap:12px; margin-top:14px}
.hero__photo img{width:100%; border-radius:12px; box-shadow:var(--shadow); background:#fff}

.section{padding:56px 0}
.section--alt{background:var(--paper)}

.grid-2{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tick{padding-left:1.2rem}
.tick li{margin:.35rem 0}

.speaker-gallery{display:grid; gap:12px}
.speaker-gallery figure{margin:0; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.speaker-gallery img{width:100%; height:200px; object-fit:cover}
.speaker-gallery figcaption{padding:8px 10px; color:var(--muted); font-size:.92rem}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:12px}
.gallery figure{margin:0; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.gallery img{width:100%; height:220px; object-fit:cover}
.gallery figcaption{padding:10px 12px; color:var(--muted); font-size:.95rem}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{background:var(--paper); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:0}

.contact-only{text-align:center}
.muted{color:var(--muted)}

.site-footer{padding:32px 0; color:var(--muted)}

@media (max-width:840px){ .hero__wrap{grid-template-columns:1fr} .cta{justify-content:center} .hero__photo{order:-1} .hero{padding:40px 0 12px} }


/* Brand with logo */
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{width:32px; height:32px; border-radius:50%; display:inline-block}

/* Hide photo captions */
.speaker-gallery figcaption, .gallery figcaption{display:none}


/* Diagram block */
.diagram{margin:18px 0 8px}
.diagram img{display:block; width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow); background:#fff}

/* Numbered steps */
.steps{counter-reset: step; list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.steps li{background:var(--paper); border-radius:12px; box-shadow:var(--shadow); padding:16px}
.steps li h4{margin:0 0 6px; font-size:1.05rem; display:flex; align-items:center; gap:10px}
.steps li h4::before{counter-increment: step; content: counter(step); display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent-2); color:#fff; font-weight:700; font-size:.95rem}
.steps p{margin:.25rem 0 0; color:var(--muted)}


/* --- Mobile kebab menu --- */
.nav-toggle{display:none; background:transparent; border:1px solid #ddd; color:var(--text); border-radius:10px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer}
.nav-toggle .dots{font-size:20px; line-height:1}
@media (max-width:840px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none; position:fixed; top:60px; right:12px; background:var(--paper); border-radius:12px; box-shadow:var(--shadow); padding:10px; gap:8px; flex-direction:column; min-width:220px}
  .nav-links a{margin:0; padding:8px 10px; border-radius:8px}
  .nav-links a:hover{background:#f3efe9}
  .nav-open .nav-links{display:flex}
}

/* --- Step number circles: crisper, centered, with ring --- */
.steps li h4::before{
  width:32px; height:32px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#fff; color:var(--accent-2);
  border:2px solid var(--accent-2);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  font-weight:800; font-variant-numeric: tabular-nums;
}
.steps li{padding:18px}
.steps li h4{align-items:center}


/* --- fix: keep step numbers perfectly circular on all devices --- */
.steps li h4::before{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:32px !important;
  aspect-ratio:1 / 1;
  height:auto !important;
  border-radius:9999px !important;
  box-sizing:border-box;
  flex:0 0 auto;
  line-height:1;
}