/* ModLB classic homepage — scoped under .classic-home (old modlb design, new backend) */
.classic-home {
--text-primary: #fff;
--text-secondary: #b0bac5;

--text-brand-primary: #db143b;
--text-brand-secondary: #c51034;

--border-primary: #fff;
--border-secondary: #b0bac5;
--border-gray-primary: #33363d;

--bg-body: #16181c;

--bg-gray-primary: #33363d;

--bg-block: #26292f;
--bg-block-inside: #33363d;

--bg-brand-primary: #db143b;
--bg-brand-secondary: #c51034;
}

.classic-home .content {
padding-top: 65px;
background-image: linear-gradient(
180deg,
rgba(42, 123, 155, 0) 60%,
rgba(22, 24, 28, 1) 100%
),
url("../img/bg-hero.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}.classic-home .hero {
padding: 96px 16px;
}.classic-home .hero__wrapper {
margin: 0 auto;
max-width: 800px;
text-align: center;
}.classic-home .hero__logo {
width: 200px;
height: 200px;
margin-bottom: 40px;
fill: var(--text-brand-primary);
}.classic-home .hero__title {
font-size: 96px;
font-weight: 800;
margin-bottom: 20px;
color: var(--text-primary);
}.classic-home .hero__title-brand {
color: var(--text-brand-primary);
}.classic-home .hero__description {
font-size: 18px;
max-width: 700px;
margin: 0 auto 20px auto;
color: var(--text-secondary);
line-height: 1.6;
}.classic-home .hero__cta {
gap: 12px;
display: flex;
align-items: center;
justify-content: center;
}.classic-home .hero__btn {
gap: 8px;
display: flex;
align-items: center;
border-radius: 10px;
justify-content: center;
height: 44px;
width: 135px;
}.classic-home .hero__btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}.classic-home .hero__btn span {
font-size: 16px;
font-weight: 600;
}.classic-home .btn__primary {
color: var(--text-primary);
background-color: var(--bg-brand-primary);
transition: background 0.2s ease;
}.classic-home .btn__primary:hover {
background-color: var(--bg-brand-secondary);
}.classic-home .btn__secondary {
color: var(--text-secondary);
border: 2px solid var(--border-secondary);
transition: color 0.2s ease, border 0.2s ease;
}.classic-home .btn__secondary:hover {
color: var(--text-primary);
border-color: var(--border-primary);
}@media (max-width: 992px) {.classic-home .hero__title {
font-size: 72px;
}
}@media (max-width: 768px) {.classic-home .hero {
padding: 48px 16px;
}.classic-home .hero__title {
font-size: 56px;
margin-bottom: 10px;
}.classic-home .hero__description {
font-size: 16px;
max-width: 500px;
}
}@media (max-width: 568px) {.classic-home .hero__title {
font-size: 40px;
}
}.classic-home .showcase {
position: relative;
overflow: hidden;
}.classic-home .showcase__container {
width: 100%;
max-width: 100%;
overflow-x: hidden;
will-change: transform;
}.classic-home .showcase__slider {
display: flex;
position: relative;
will-change: transform;
gap: 24px;
}.classic-home .showcase__slider--rtl {
animation: slideRTL 30s linear infinite;
padding-bottom: 20px;
}.classic-home .showcase__slider--ltr {
animation: slideLTR 25s linear infinite;
}.classic-home .showcase__item {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 16px;
border: 1px solid var(--border-secondary);
border-radius: 16px;
padding: 16px;
min-width: 320px;
max-width: 320px;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
cursor: pointer;
will-change: transform;
}.classic-home .showcase__item:hover {
border-color: var(--border-primary);
}.classic-home .showcase__item__image {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}.classic-home .showcase__item__info {
display: flex;
flex-direction: column;
flex: 1;
}.classic-home .showcase__item__title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 5px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
line-height: 1.4;
}.classic-home .showcase__item__description {
font-size: 16px;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
line-height: 1.4;
}.classic-home .showcase__empty, .classic-home .showcase__error {
text-align: center;
padding: 40px;
color: var(--text-secondary);
font-size: 16px;
}@keyframes slideRTL {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}@keyframes slideLTR {
0% {
transform: translate3d(-50%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}.classic-home .showcase__slider:hover {
animation-play-state: paused;
}.classic-home .showcase__slider--rtl, .classic-home .showcase__slider--ltr {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}@media (max-width: 992px) {.classic-home .showcase__slider--rtl {
animation-duration: 25s;
}.classic-home .showcase__slider--ltr {
animation-duration: 20s;
}.classic-home .showcase__item {
min-width: 300px;
max-width: 300px;
}
}@media (max-width: 768px) {.classic-home .showcase__slider--rtl {
animation-duration: 15s;
}.classic-home .showcase__slider--ltr {
animation-duration: 12s;
}.classic-home .showcase__item__title {
font-size: 16px;
}
}@media (max-width: 568px) {.classic-home .showcase__slider--rtl {
animation-duration: 10s;
}.classic-home .showcase__slider--ltr {
animation-duration: 8s;
}
}.classic-home .split {
padding: 96px 16px;
background-image: linear-gradient(
180deg,
rgba(42, 123, 155, 0) -100%,
rgba(22, 24, 28, 1) 100%
),
url("../img/bg-hero.webp");
background-position: center center;
background-size: 200%;
background-repeat: no-repeat;
}.classic-home .split__wrapper {
display: flex;
align-items: center;
gap: 60px;
}.classic-home .split__wrapper:last-child {
margin-top: 96px;
}.classic-home .split__content, .classic-home .split__showcase {
width: 50%;
}.classic-home .split__tag {
display: inline-block;
background-color: rgba(219, 20, 59, 0.15);
color: var(--text-brand-primary);
padding: 6px 14px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}.classic-home .split__title {
font-size: 42px;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 20px;
line-height: 1.2;
}.classic-home .split__text {
font-size: 18px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 30px;
}.classic-home .split__btn {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 12px 24px;
border-radius: 8px;
transition: background-color 0.3s ease;
}.classic-home .split__btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}.classic-home .split__btn span {
font-size: 16px;
font-weight: 600;
}.classic-home .split__showcase {
overflow: hidden;
border-radius: 12px;
background-color: var(--bg-block);
}.classic-home .split__list {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}.classic-home .split__subtitle {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
position: relative;
display: inline-block;
margin-bottom: 16px;
}.classic-home .split__subtitle::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background-color: var(--text-brand-primary);
}.classic-home .split__item {
display: grid;
grid-template-areas:
"image title meta"
"image description meta";
grid-template-columns: 80px 1fr auto;
gap: 12px;
padding: 16px;
border-radius: 8px;
background-color: var(--bg-block-inside);
transition: background-color 0.2s ease, transform 0.2s ease;
align-items: start;
}.classic-home .split__item-image {
grid-area: image;
width: 70px;
height: 70px;
border-radius: 8px;
object-fit: cover;
}.classic-home .split__item-title {
grid-area: title;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
line-height: 1.4;
}.classic-home .split__item-description {
grid-area: description;
font-size: 16px;
color: var(--text-secondary);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}.classic-home .split__item-meta {
grid-area: meta;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
justify-content: center;
height: 100%;
}.classic-home .split__item-views, .classic-home .split__item-liked, .classic-home .split__item-downloads {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: var(--text-secondary);
}.classic-home .split__item-views svg, .classic-home .split__item-liked svg, .classic-home .split__item-downloads svg {
width: 16px;
height: 16px;
}@media (max-width: 992px) {.classic-home .split {
background-size: cover;
}.classic-home .split__wrapper {
flex-direction: column;
gap: 40px;
}.classic-home .split__wrapper:last-child {
margin-top: 48px;
flex-direction: column-reverse;
}.classic-home .split__content, .classic-home .split__showcase {
width: 100%;
}.classic-home .split__title {
font-size: 36px;
}
}@media (max-width: 768px) {.classic-home .split {
padding: 48px 16px;
}.classic-home .split__text {
font-size: 16px;
}.classic-home .split__btn {
padding: 12px 16px;
}.classic-home .split__item {
grid-template-areas:
"image title title"
"image description description"
"meta meta meta";
grid-template-columns: 70px 1fr 1fr;
}.classic-home .split__item-meta {
flex-direction: row;
align-items: center;
justify-content: start;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-secondary);
}
}

/* ============================================================
   HERO REDESIGN — modstr fonts + square (no border-radius)
   ============================================================ */
.classic-home .hero__title {
   font-family: var(--font-display), "Arial Black", sans-serif;
   letter-spacing: .01em;
}
.classic-home .hero__description { font-family: var(--font-ui), sans-serif; }
.classic-home .hero__btn,
.classic-home .btn__primary,
.classic-home .btn__secondary,
.classic-home .split__btn {
   border-radius: 0;
   font-family: var(--font-ui), sans-serif;
   font-weight: 700;
}

/* ===== Showcase: original horizontal layout, just remove border-radius ===== */
.classic-home .showcase__item,
.classic-home .showcase__item__image { border-radius: 0; }

/* ===== Remove decorative .hero::before dots (bleeds from base .hero) ===== */
.classic-home .hero::before { content: none !important; display: none !important; }

/* ===== Hero buttons: chunky inset shadow, like the other site buttons ===== */
.classic-home .hero__cta .hero__btn { box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.35); }
.classic-home .hero__cta .hero__btn:hover { box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.35); }

/* ===== Section spacing (restores .home > .container gap, removed with 'home') ===== */
.home-sections { display: flex; flex-direction: column; gap: 24px; }
.classic-home { margin-bottom: 24px; }
@media (max-width: 768px) {
   .home-sections { gap: 16px; }
   .classic-home { margin-bottom: 16px; }
}