.cmsubjects {
    --ink:#252a3a;
    --muted:#697183;
    --purple:#6548df;
    --line:#e5e7ef;
    background:#fff;
}
.cmsubjects * { box-sizing:border-box; }
.cmsubjects-container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.cmsubjects-hero {
    padding:84px 0 76px;
    background:
        radial-gradient(circle at 8% 0%,rgba(101,72,223,.17),transparent 31%),
        radial-gradient(circle at 92% 16%,rgba(43,155,114,.11),transparent 27%),
        #f7f8fc;
}
.cmsubjects-hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
    gap:54px;
    align-items:center;
}
.cmsubjects-badge {
    display:inline-flex;
    padding:7px 11px;
    color:#5c42c5;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.07em;
    background:#ece8ff;
    border-radius:999px;
}
.cmsubjects h1 {
    max-width:830px;
    margin:17px 0 18px;
    color:var(--ink);
    font-size:clamp(43px,5.6vw,69px);
    line-height:1.02;
    letter-spacing:-.045em;
}
.cmsubjects-hero p,
.cmsubjects-principle p,
.cmsubjects-grid p,
.cmsubjects-rules p,
.cmsubjects-final p {
    color:var(--muted);
    line-height:1.72;
}
.cmsubjects-hero-grid > div > p {
    max-width:760px;
    margin:0;
    font-size:18px;
}
.cmsubjects-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}
.cmsubjects-button {
    display:inline-flex;
    min-height:49px;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    color:#fff;
    font-weight:900;
    text-decoration:none;
    background:var(--purple);
    border:1px solid var(--purple);
    border-radius:13px;
}
.cmsubjects-button:hover { color:#fff; text-decoration:none; }
.cmsubjects-button.secondary {
    color:#514185;
    background:#fff;
    border-color:#dcd7f1;
}
.cmsubjects-principle {
    padding:34px;
    color:#fff;
    background:linear-gradient(145deg,#271b5d,#6548df);
    border-radius:29px;
    box-shadow:0 26px 64px rgba(53,37,128,.20);
}
.cmsubjects-principle > span {
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.72;
}
.cmsubjects-principle h2 {
    margin:15px 0 12px;
    color:#fff;
    font-size:clamp(28px,3.1vw,42px);
    line-height:1.08;
    letter-spacing:-.035em;
}
.cmsubjects-principle p { margin:0; color:rgba(255,255,255,.79); }
.cmsubjects-list { padding:82px 0; }
.cmsubjects-heading { max-width:780px; margin:0 auto 42px; text-align:center; }
.cmsubjects-heading > span {
    color:var(--purple);
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.07em;
}
.cmsubjects-heading h2 {
    margin:10px 0 0;
    color:var(--ink);
    font-size:clamp(34px,4vw,50px);
    letter-spacing:-.035em;
}
.cmsubjects-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
}
.cmsubjects-grid article {
    display:flex;
    min-height:310px;
    flex-direction:column;
    padding:27px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 14px 34px rgba(34,38,54,.05);
}
.cmsubjects-grid b {
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    color:#5c42c5;
    font-size:16px;
    background:#eeeaff;
    border-radius:13px;
}
.cmsubjects-grid h3 {
    margin:18px 0 9px;
    color:#2c3142;
    font-size:20px;
}
.cmsubjects-grid p { margin:0 0 18px; }
.cmsubjects-grid small {
    margin-top:auto;
    color:#5b47b6;
    font-weight:850;
    line-height:1.45;
}
.cmsubjects-rules { padding:76px 0; background:#f7f8fc; }
.cmsubjects-rule-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.cmsubjects-rules article {
    padding:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
}
.cmsubjects-rules span {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    color:#5c42c5;
    font-size:11px;
    font-weight:950;
    background:#eeeaff;
    border-radius:12px;
}
.cmsubjects-rules h3 {
    margin:18px 0 9px;
    color:#2c3142;
    font-size:20px;
}
.cmsubjects-rules p { margin:0; }
.cmsubjects-final { padding:76px 0 84px; }
.cmsubjects-final-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:40px;
    color:#fff;
    background:linear-gradient(135deg,#271a5d,#6548df);
    border-radius:28px;
}
.cmsubjects-final h2 {
    max-width:790px;
    margin:13px 0 8px;
    color:#fff;
    font-size:clamp(30px,4vw,45px);
    line-height:1.08;
}
.cmsubjects-final p {
    max-width:740px;
    margin:0;
    color:rgba(255,255,255,.78);
}
.cmsubjects-badge.dark { color:#fff; background:rgba(255,255,255,.14); }
.cmsubjects-button.light {
    flex:0 0 auto;
    color:#4d35af;
    background:#fff;
    border-color:#fff;
}
html[dir="rtl"] .cmsubjects { text-align:right; }

@media (max-width:1000px) {
    .cmsubjects-hero-grid { grid-template-columns:1fr; }
    .cmsubjects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cmsubjects-rule-grid { grid-template-columns:1fr; }
    .cmsubjects-final-card { align-items:flex-start; flex-direction:column; }
}
@media (max-width:640px) {
    .cmsubjects-container { width:min(100% - 28px,1180px); }
    .cmsubjects-hero,
    .cmsubjects-list,
    .cmsubjects-rules,
    .cmsubjects-final { padding:58px 0; }
    .cmsubjects-grid { grid-template-columns:1fr; }
    .cmsubjects-grid article { min-height:0; }
    .cmsubjects-actions { display:grid; }
    .cmsubjects-button { width:100%; }
    .cmsubjects-final-card { padding:28px 22px; }
}