/* ============ Heroes 9–12 ============ */
.ihero9 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
.ihero9__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ihero9__im { aspect-ratio: 3/4.4; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero9__im img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ihero9__im:hover img { transform: scale(1.05); }
.ihero9__im.down { margin-top: 34px; }
.ihero10 { position: relative; min-height: 420px; border-radius: var(--radius-2xl); overflow: hidden; background-color: var(--primary); background-image: var(--hero-img); background-size: cover; background-position: center; display: grid; place-items: center; padding: clamp(24px,4vw,56px); }
.ihero10__scrim { position: absolute; inset: 0; background: rgba(8,14,32,.5); z-index: 1; }
.ihero10__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 680px; color: #fff; }
.ihero10__inner .ih__title { color: #fff; }
.ihero10__inner .ih__sub { color: rgba(255,255,255,.9); }
.ih__chip--on { background: rgba(255,255,255,.18); color: #fff; }
.ihero10__ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.ihero11 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
.ihero11__media { position: relative; }
.ihero11__main { display: block; aspect-ratio: 4/3.4; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero11__main img { width: 100%; height: 100%; object-fit: cover; }
.ihero11__badge { position: absolute; inset-block-end: -18px; inset-inline-start: -18px; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 6px solid var(--background); box-shadow: var(--cloud-sm); z-index: 2; }
.ihero11__badge img { width: 100%; height: 100%; object-fit: cover; }
.ihero12 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
.ihero12__stack { position: relative; min-height: 420px; }
.ihero12__im { position: absolute; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--cloud); }
.ihero12__im img { width: 100%; height: 100%; object-fit: cover; }
.ihero12__im.a { width: 62%; aspect-ratio: 4/3; inset-block-start: 0; inset-inline-start: 0; z-index: 1; }
.ihero12__im.b { width: 50%; aspect-ratio: 1; inset-block-start: 24%; inset-inline-end: 0; z-index: 3; }
.ihero12__im.c { width: 46%; aspect-ratio: 4/3; inset-block-end: 0; inset-inline-start: 14%; z-index: 2; }
@media (max-width: 900px) { .ihero9, .ihero11, .ihero12 { grid-template-columns: 1fr; } .ihero9__imgs, .ihero11__media, .ihero12__stack { order: -1; } .ihero12__stack { min-height: 320px; } }

/* ============ Categories 9–12 ============ */
.cat-masonry { columns: 4; column-gap: 16px; }
.cmas { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; break-inside: avoid; box-shadow: var(--cloud-sm); }
.cmas__img { display: block; aspect-ratio: 1; background-size: cover; background-position: center; background-color: var(--surface-low); transition: transform .5s; }
.cmas.tall .cmas__img { aspect-ratio: 3/4; }
.cmas:hover .cmas__img { transform: scale(1.06); }
.cmas__scrim { position: absolute; inset: 0; background: rgba(12,18,32,.4); }
.cmas__label { position: absolute; inset-inline: 14px; inset-block-end: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; z-index: 2; display: flex; flex-direction: column; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.cmas__label small { font-weight: 400; opacity: .9; font-size: .76rem; }
@media (max-width: 900px) { .cat-masonry { columns: 2; } }
@media (max-width: 480px) { .cat-masonry { columns: 1; } }
.cat-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.csbig { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 360px; display: block; box-shadow: var(--cloud); }
.csbig__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s; }
.csbig:hover .csbig__img { transform: scale(1.05); }
.csbig__scrim { position: absolute; inset: 0; background: rgba(12,18,32,.42); }
.csbig__label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; color: #fff; }
.csbig__name { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.csbig__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cat-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cssm { display: flex; flex-direction: column; gap: 8px; }
.cssm__img { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface-low); }
.cssm__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cssm:hover .cssm__img img { transform: scale(1.06); }
.cssm__name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
@media (max-width: 760px) { .cat-split { grid-template-columns: 1fr; } }
.cat-ranked { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crank { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--outline-variant); transition: transform .2s, box-shadow .2s; }
.crank:hover { transform: translateY(-3px); box-shadow: var(--cloud-sm); }
.crank__n { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--primary); width: 34px; }
.crank__img { width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--surface-low); }
.crank__img img { width: 100%; height: 100%; object-fit: cover; }
.crank__body { flex: 1; display: flex; flex-direction: column; }
.crank__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.crank__count { color: var(--on-surface-variant); font-size: .82rem; }
.crank__arr { color: var(--primary); }
@media (max-width: 700px) { .cat-ranked { grid-template-columns: 1fr; } }
.cat-circrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.ccirc { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ccirc__ring { width: 100%; aspect-ratio: 1; border-radius: 50%; padding: 8px; background: var(--t); display: grid; place-items: center; transition: transform .3s; }
.ccirc:hover .ccirc__ring { transform: translateY(-6px); }
.ccirc__img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff; }
.ccirc__img img { width: 100%; height: 100%; object-fit: cover; }
.ccirc__name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.ccirc__count { color: var(--on-surface-variant); font-size: .78rem; }

/* ============ Promos 9–12 ============ */
.ipromo9 { display: grid; grid-template-columns: 1fr 1fr; background: var(--primary); color: #fff; align-items: center; }
.ipromo9__text { padding: clamp(28px,4vw,52px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; z-index: 2; }
.ipromo9__text p { opacity: .9; max-width: 38ch; }
.ipromo9__img { align-self: stretch; min-height: 280px; }
.ipromo9__img img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
html[dir=rtl] .ipromo9__img img { clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.ipromo10 { background: var(--surface); border: 2px solid var(--primary); box-shadow: none; padding: clamp(32px,5vw,56px); }
.ipromo10__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ipromo10__inner h2 { color: var(--on-surface); }
.ipromo10__inner p { color: var(--on-surface-variant); max-width: 50ch; }
.ipromo11 { min-height: 300px; display: grid; place-items: center; padding: clamp(24px,4vw,48px); }
.ipromo11__strip { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 0; }
.ipromo11__im img { width: 100%; height: 100%; object-fit: cover; }
.ipromo11__scrim { position: absolute; inset: 0; background: rgba(8,14,32,.55); z-index: 1; }
.ipromo11__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; color: #fff; max-width: 560px; }
.ipromo11__inner h2 { color: #fff; }
.ipromo11__inner p { opacity: .9; }
.ipromo12 { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--primary); color: #fff; align-items: center; }
.ipromo12__text { padding: clamp(28px,4vw,52px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ipromo12__text p { opacity: .9; max-width: 38ch; }
.ipromo12__badge { width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--secondary); display: grid; place-items: center; }
.ipromo12__badge .material-symbols-outlined { font-size: 1.8rem; color: #fff; }
.ipromo12__img { align-self: stretch; min-height: 260px; }
.ipromo12__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .ipromo9, .ipromo12 { grid-template-columns: 1fr; } .ipromo9__img img { clip-path: none; } }