:root{
  --bg:#f5f7fb;
  --text:#0f172a;
  --muted:#475569;
  --surface:#ffffff;
  --green:#16a34a;
  --green-2:#15803d;
  --green-soft: rgba(22,163,74,.10);
  --border: rgba(22,163,74,.55);
  --shadow: 0 14px 30px rgba(2, 8, 23, .08);
  --radius: 20px;
  --container: 980px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 380px at 18% -10%, rgba(22,163,74,.12), transparent 55%),
    radial-gradient(800px 360px at 85% 0%, rgba(22,163,74,.10), transparent 60%),
    var(--bg);
  line-height: 1.55;
}

main{
  flex:1 0 auto;
}

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

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.skip-link{
  position:absolute;
  top:10px;
  left:10px;
  transform: translateY(-150%);
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 10px 20px rgba(2,8,23,.10);
  z-index: 10;
}
.skip-link:focus{
  transform: translateY(0);
  outline:none;
  box-shadow: 0 10px 20px rgba(2,8,23,.10), 0 0 0 4px rgba(22,163,74,.18);
}

.header{
  flex-shrink:0;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(22,163,74,.35);
  box-shadow: 0 8px 24px rgba(2, 8, 23, .04);
}

.header__inner{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding: 16px 0;
  min-width:0;
}

.header__logo{
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 18px);
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.25;
}

.header__nav{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 24px;
  min-width:0;
  max-width:100%;
}

.header__link{
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.header__link:hover{
  color: var(--green);
}

.header__link:focus-visible{
  outline: none;
  color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.22);
  border-radius: 4px;
}

.page{
  padding: 54px 0 64px;
}

.course-title{
  margin: 0 0 22px;
  font-size: clamp(22px, 3.1vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.module-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.module-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(2, 8, 23, .11);
  border-color: rgba(22,163,74,.75);
}
.module-card:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
}

.module-card__title{
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
}

.author-page,
.contacts-page{
  padding: 54px 0 64px;
}

.author-card,
.contacts-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}

.author-card__title{
  margin: 0 0 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

.author-card__text{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.author-card__text:last-of-type{
  margin-bottom: 0;
}

.contacts-card__title{
  margin: 0 0 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

.contacts-card__text{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.contacts-card__text:last-of-type{
  margin-bottom: 0;
}

.contacts-card__email{
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  transition: color 0.2s ease;
}

.contacts-card__email:hover{
  color: var(--green);
}

.contacts-card__email:focus-visible{
  outline: none;
  color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.22);
  border-radius: 4px;
}

.back-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.back-button:hover{
  background: var(--green-soft);
  border-color: rgba(22,163,74,.45);
}

.back-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.22);
}

.footer{
  flex-shrink:0;
  margin-top: auto;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(22,163,74,.35);
  box-shadow: 0 -8px 24px rgba(2, 8, 23, .04);
  padding: 14px 0 12px;
  text-align: center;
}

.footer__copyright{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(71,85,105,.95);
}

@media (max-width: 560px){
  .container{ width: min(var(--container), calc(100% - 28px)); }
  .header__inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 0;
    gap: 12px 20px;
  }
  .header__nav{
    width: 100%;
    justify-content: flex-start;
    gap: 0 20px;
    row-gap: 10px;
  }
  .header__link{
    white-space: normal;
  }
  .module-card{
    padding: 16px 14px;
  }
  .module-card__title{ font-size: 14px; }
  .author-page,
  .contacts-page{
    padding: 40px 0 48px;
  }
  .author-card,
  .contacts-card{
    padding: 16px 14px;
  }
  .author-card__text{
    font-size: 14px;
  }
  .contacts-card__text{
    font-size: 14px;
  }
  .back-button{
    margin-top: 16px;
  }
  .footer{
    padding: 12px 0 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}