/* Static design for "Эссе Под Ключ" */
:root{
  --esse-bg: #f6f7ff;
  --esse-surface: #ffffff;
  --esse-surface-2: #f1f4ff;
  --esse-line: #d6dcff;
  --esse-text: #1f2a44;
  --esse-muted: #5b6b87;
  --esse-accent: #6d28d9;
  --esse-accent-2: #2563eb;
  --esse-ok: #0f766e;
  --esse-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
  --esse-radius: 18px;
  --esse-container: 1120px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(109,40,217,0.12), transparent 60%),
    radial-gradient(850px 520px at 92% 12%, rgba(37,99,235,0.12), transparent 55%),
    var(--esse-bg);
  color: var(--esse-text);
  min-height: 100vh;
}

a{
  color: inherit;
  text-decoration: none;
}

.esse-shell{
  width: min(calc(100% - 32px), var(--esse-container));
  margin: 0 auto;
  padding: 18px 0 52px;
}

.esse-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--esse-line);
  position: sticky;
  top: 0;
  background: rgba(246,247,255,0.80);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.esse-brand{
  font-weight: 900;
  letter-spacing: 0.2px;
}

.esse-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.esse-nav a{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--esse-muted);
  transition: 0.18s ease;
}

.esse-nav a:hover{
  border-color: rgba(109,40,217,0.25);
  background: rgba(109,40,217,0.08);
  color: var(--esse-text);
}

.esse-nav a.is-active{
  border-color: rgba(109,40,217,0.40);
  background: linear-gradient(135deg, rgba(109,40,217,0.22), rgba(37,99,235,0.12));
  color: var(--esse-text);
}

.esse-main{
  padding-top: 26px;
}

.esse-card{
  background: var(--esse-surface);
  border: 1px solid var(--esse-line);
  border-radius: var(--esse-radius);
  box-shadow: var(--esse-shadow);
  padding: 26px;
}

.esse-card + .esse-card{
  margin-top: 18px;
}

.esse-title{
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 4.2vw, 3.0rem);
  line-height: 1.12;
}

.esse-lead{
  margin: 0 0 14px;
  color: var(--esse-muted);
  line-height: 1.8;
}

.esse-criteria{
  margin: 0;
  padding-left: 18px;
  color: var(--esse-muted);
}

.esse-criteria li{
  margin: 10px 0;
  line-height: 1.8;
}

.esse-top5{
  margin-top: 18px;
}

.esse-top5-head{
  margin-bottom: 14px;
}

.esse-h2{
  margin: 0 0 8px;
  font-size: 1.55rem;
}

.esse-note{
  margin: 0;
  color: var(--esse-muted);
  line-height: 1.75;
}

.esse-rank-stack{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.esse-rank-card{
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(214,220,255,0.85);
  background: linear-gradient(180deg, rgba(241,244,255,0.55), rgba(255,255,255,0.97));
}

.esse-rank-card.is-1{
  border-color: rgba(15,118,110,0.30);
  background: linear-gradient(180deg, rgba(15,118,110,0.12), rgba(255,255,255,0.98));
}

.esse-rank-top{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.esse-rank-badge{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(109,40,217,0.12);
  border: 1px solid rgba(109,40,217,0.20);
}

.esse-rank-card.is-1 .esse-rank-badge{
  background: rgba(15,118,110,0.14);
  border-color: rgba(15,118,110,0.22);
  color: var(--esse-ok);
}

.esse-rank-brand{
  margin: 0;
  font-size: 1.15rem;
}

.esse-score{
  margin: 4px 0 0;
  color: var(--esse-muted);
}

.esse-rank-text{
  margin: 0 0 10px;
  line-height: 1.8;
  color: var(--esse-text);
}

.esse-metrics{
  margin: 0;
  padding-left: 18px;
  color: var(--esse-muted);
}

.esse-metrics li{
  margin: 8px 0;
  line-height: 1.7;
}

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

.esse-links{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--esse-muted);
}

.esse-links li{
  margin: 8px 0;
}

.esse-links a{
  color: var(--esse-accent-2);
  border-bottom: 1px dashed rgba(37,99,235,0.35);
}

.esse-links a:hover{
  border-bottom-color: rgba(37,99,235,0.95);
}

.esse-faq{
  display: grid;
  gap: 12px;
}

.esse-faq-item{
  padding: 16px;
  border: 1px solid var(--esse-line);
  border-radius: 14px;
  background: var(--esse-surface-2);
}

.esse-faq-item h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.esse-faq-item p{
  margin: 0;
  color: var(--esse-muted);
  line-height: 1.75;
}

.esse-review{
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--esse-line);
  background: var(--esse-surface);
}

.esse-review blockquote{
  margin: 0 0 10px;
  color: var(--esse-text);
  line-height: 1.8;
}

.esse-review small{
  color: var(--esse-muted);
}

.esse-footer{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--esse-line);
  color: var(--esse-muted);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 920px){
  .esse-rank-stack,
  .esse-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px){
  .esse-shell{
    width: min(calc(100% - 18px), var(--esse-container));
  }
  .esse-card{
    padding: 20px;
  }
  .esse-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .esse-nav{
    justify-content: flex-start;
  }
}