.hero { background-image: url('/images/home-hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #2a1450; position: relative; padding: 92px 0 110px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%); color: #ffffff; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.55); }
.hero-content { position: relative; z-index: 2; width: 90%; max-width: 900px; margin: 0 auto; text-align: center; }
.hero h1, .hero p, .hero strong { color: #ffffff; }
.hero h1 { font-size: 42px; font-weight: 700; line-height: 1.6; margin: 0 0 16px; }
.hero-text { font-size: 18px; line-height: 1.6; margin: 0 auto 26px; max-width: 760px; }
.btn { display: inline-block; background-color: #22c55e; color: #111; font-weight: 700; line-height: 1.6; text-decoration: none; padding: 13px 28px; border-radius: 6px; border: 2px solid #22c55e; transition: background-color 0.2s, color 0.2s; text-transform: uppercase; }
.btn:hover, .btn:focus { background-color: #ffffff; color: #111; }
.wrap { width: 90%; max-width: 1280px; margin: 0 auto; }
section { padding: 56px 0; }
h2 { font-size: 30px; font-weight: 700; line-height: 1.6; color: #6d28d9; margin: 0 0 18px; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.6; color: #333; margin: 0 0 10px; }
p, li { font-size: 17px; line-height: 1.6; color: #333; font-weight: 400; }
.section-intro { max-width: 820px; margin: 0 0 26px; }
.editorial-a { background-color: #f0eafc; }
.editorial-a h2, .editorial-a p, .editorial-a li { color: #333; }
.editorial-a h2 { color: #6d28d9; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.split-media img { width: 100%; height: 420px; object-fit: cover; border-radius: 8px; display: block; }
.media-note { font-size: 14px; color: #555; margin: 0 0 12px; }
.plain-list { margin: 16px 0 0; padding-left: 22px; }
.plain-list li { margin-bottom: 8px; }
.themes { background-color: #6d28d9; color: #ffffff; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 calc(100% - 28px)); padding: 82px 0; }
.themes h2, .themes p, .themes li, .themes span, .themes strong { color: #ffffff; }
.themes h2 { color: #ffffff; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 19px; }
.theme-card { display: block; text-decoration: none; color: inherit; background-color: #ffffff; border-radius: 8px; padding: 22px; transition: box-shadow 0.2s, transform 0.2s; }
.theme-card strong { display: block; color: #6d28d9; font-weight: 700; font-size: 19px; line-height: 1.6; margin-bottom: 8px; }
.theme-card span { color: #333; font-size: 16px; line-height: 1.6; }
.theme-card:hover, .theme-card:focus { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
.articles { background-color: #ffffff; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.article-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background-color: #ffffff; min-width: 0; transition: box-shadow 0.2s, transform 0.2s; }
.article-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); transform: translateY(-2px); }
.article-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.article-body { padding: 20px; }
.article-body h3 a { color: #6d28d9; text-decoration: none; }
.article-body h3 a:hover, .article-body h3 a:focus { text-decoration: underline; }
.reading-time { font-size: 14px; color: #666; margin-top: 12px; }
.numbers { background-color: #f0eafc; clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%); padding-top: 76px; }
.numbers h2 { color: #6d28d9; }
.numbers p, .numbers li, .numbers td { color: #333; }
table { width: 100%; border-collapse: collapse; background-color: #ffffff; }
th { background-color: #6d28d9; color: #ffffff; font-weight: 700; line-height: 1.6; text-align: left; padding: 13px; text-transform: uppercase; }
td { padding: 13px; border-bottom: 1px solid #ddd; line-height: 1.6; vertical-align: top; }
.workshop { background-color: #ffffff; }
.workshop-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.workshop-nav a { color: #6d28d9; font-weight: 700; border: 1px solid #6d28d9; border-radius: 4px; padding: 8px 16px; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.workshop-nav a:hover, .workshop-nav a:focus { background-color: #6d28d9; color: #ffffff; }
.circles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 21px; margin-bottom: 26px; }
.circle-item { text-align: center; border: 1px solid #ddd; border-radius: 12px; padding: 22px; min-width: 0; }
.circle-item strong { display: block; font-weight: 700; color: #6d28d9; line-height: 1.6; margin-top: 10px; }
.circle-item text { font-weight: 700; fill: #6d28d9; }
.circle-value { transition: stroke-dashoffset 0.3s; }
.circle-item:hover .circle-value { stroke-dashoffset: 40; }
.loader { height: 10px; background-color: #ddd; border-radius: 4px; overflow: hidden; max-width: 640px; }
.loader-bar { display: block; height: 100%; width: 38%; background-color: #6d28d9; animation: dossier 2.4s infinite alternate; }
@keyframes dossier { from { transform: translateX(0); } to { transform: translateX(160%); } }
.loader-text { font-size: 14px; color: #555; max-width: 640px; }
.panel { border-top: 2px solid #6d28d9; padding: 20px 0 6px; margin-top: 20px; }
.faq { background-color: #6d28d9; color: #ffffff; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); padding: 82px 0 64px; }
.faq h2, .faq h3, .faq p, .faq li, .faq span, .faq strong { color: #ffffff; }
.faq-item { background-color: #ffffff; border-radius: 8px; padding: 22px; margin-bottom: 18px; }
.faq-item h3, .faq-item p { color: #333; }
.faq-item h3 { color: #6d28d9; }
.disclaimer { font-size: 14px; margin: 22px 0; }
@media (max-width: 768px) {
.hero { padding: 56px 0 76px; }
.hero h1 { font-size: 28px; }
h2 { font-size: 25px; }
section { padding: 38px 15px; }
.themes, .faq { padding: 58px 15px; }
.split { grid-template-columns: 1fr; }
.split-media img { height: auto; }
.article-grid, .theme-grid, .circles { grid-template-columns: 1fr; }
.btn { width: 100%; text-align: center; box-sizing: border-box; }
th, td { padding: 10px; font-size: 14px; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 24px; }
p, li { font-size: 16px; }
.hero-text { font-size: 16px; }
}