/* =========================================================
   MANIASLT - HOME
========================================================= */

.section {
    padding: 82px 0;
}

.section-white {
    background: var(--white);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sky-600);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.section-head.centered {
    display: block;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 38px;
}

.section-head h2 {
    margin: 5px 0 0;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.04em;
    line-height: 1.08;
}

.section-head p {
    margin: 9px 0 0;
    color: var(--slate-500);
}

.text-link {
    color: var(--sky-600);
    font-weight: 800;
    white-space: nowrap;
}

.text-link:hover {
    color: var(--red);
}

/* HERO */

.hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.28), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f4fbff 52%, #e3f5ff 100%);
    border-bottom: 1px solid #dcecf7;
}

.hero-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    bottom: -220px;
    border-radius: 50%;
    background: rgba(239, 51, 64, .08);
}

.hero-grid {
    position: relative;
    z-index: 1;
    min-height: 590px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 56px;
    padding-block: 56px;
}

.hero-content h1 {
    max-width: 720px;
    margin: 12px 0 20px;
    font-size: clamp(43px, 6vw, 74px);
    line-height: .98;
    letter-spacing: -.055em;
    color: var(--navy-950);
}

.hero-content h1 span {
    display: block;
    color: var(--sky-500);
}

.hero-copy {
    max-width: 620px;
    margin: 0;
    color: var(--slate-700);
    font-size: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.hero-points span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(7,28,51,.08);
    color: var(--navy-800);
    font-size: 13px;
    font-weight: 800;
}

.hero-points span::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sky-400);
}

.hero-art {
    display: flex;
    justify-content: flex-end;
}

.hero-art-card {
    width: min(100%, 520px);
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--navy-900), var(--sky-600));
    box-shadow: var(--shadow-md);
}

.hero-art-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GAME */

.game-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.popular-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.game-card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(7, 28, 51, .05);
    transition: .22s ease;
}

.game-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, .65);
    box-shadow: var(--shadow-md);
}

.game-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--slate-100);
}

.game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}

.game-card:hover .game-thumb img {
    transform: scale(1.035);
}

.game-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 900;
}

.game-info {
    padding: 15px;
}

.game-info h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.game-info p {
    margin: 5px 0 0;
    color: var(--slate-500);
    font-size: 13px;
}

.all-games-section {
    background:
        linear-gradient(180deg, #edf8ff 0%, #f8fcff 100%);
}

.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.catalog-search {
    flex: 1 1 460px;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
}

.catalog-search:focus-within {
    border-color: var(--sky-400);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .12);
}

.catalog-search svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--slate-500);
    stroke-width: 2;
}

.catalog-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--navy-900);
}

.game-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--slate-700);
    font-weight: 800;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--sky-400);
    background: var(--sky-400);
    color: var(--navy-950);
}

.empty-state {
    margin-top: 30px;
    padding: 32px;
    text-align: center;
    border: 1px dashed var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--white);
}

.empty-state strong,
.empty-state span {
    display: block;
}

.empty-state span {
    color: var(--slate-500);
    margin-top: 4px;
}

/* PROMO */

.promo-section {
    background: var(--white);
}

.promo-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    min-height: 340px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.35), transparent 25%),
        linear-gradient(120deg, var(--navy-950), var(--navy-800));
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.promo-copy {
    padding: 54px;
}

.promo-pill {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: var(--radius-pill);
    background: var(--red);
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
}

.promo-copy h2 {
    max-width: 560px;
    margin: 14px 0 12px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.promo-copy p {
    max-width: 560px;
    color: #c6d5e4;
}

.btn-light {
    margin-top: 10px;
    background: var(--white);
    color: var(--navy-950);
}

.btn-light:hover {
    background: var(--sky-300);
}

.promo-visual {
    height: 100%;
    min-height: 340px;
}

.promo-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BENEFITS */

.benefit-grid,
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.benefit-card,
.step-card {
    min-height: 230px;
    padding: 26px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 6px 18px rgba(7, 28, 51, .05);
}

.benefit-number,
.step-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--sky-100);
    color: var(--sky-600);
    font-weight: 900;
}

.benefit-card h3,
.step-card h3 {
    margin: 28px 0 8px;
    font-size: 19px;
}

.benefit-card p,
.step-card p {
    margin: 0;
    color: var(--slate-500);
}

.steps-section {
    background:
        linear-gradient(135deg, var(--navy-950), var(--navy-800));
    color: var(--white);
}

.steps-section .eyebrow {
    color: var(--sky-300);
}

.steps-section .step-card {
    border-color: rgba(255,255,255,.11);
    background: rgba(255,255,255,.06);
    box-shadow: none;
}

.steps-section .step-card > span {
    background: var(--sky-400);
    color: var(--navy-950);
}

.steps-section .step-card p {
    color: #bfd0e1;
}

/* PAYMENT */

.payment-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.payment-item {
    min-height: 86px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    background: var(--white);
}

.payment-item img {
    max-height: 34px;
    max-width: 110px;
    object-fit: contain;
}

/* ARTICLE */

.content-feed-section {
    background: var(--sky-50);
}

.content-feed-section.section-white {
    background: var(--white);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.article-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--slate-200);
    box-shadow: 0 7px 22px rgba(7, 28, 51, .05);
}

.article-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--slate-100);
}

.article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}

.article-card:hover .article-thumb img {
    transform: scale(1.025);
}

.article-content {
    padding: 20px;
}

.article-content > span {
    color: var(--sky-600);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.article-content h3 {
    margin: 9px 0 7px;
    font-size: 20px;
    line-height: 1.28;
}

.article-content h3 a:hover {
    color: var(--sky-600);
}

.article-content p {
    margin: 0;
    color: var(--slate-500);
}

/* FAQ */

.faq-wrap {
    max-width: 900px;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-list details {
    background: var(--sky-50);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    padding: 0 20px;
}

.faq-list summary {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    font-size: 23px;
    color: var(--sky-600);
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list details p {
    margin: -2px 0 20px;
    color: var(--slate-500);
}

/* BRAND */

.brand-section {
    padding: 78px 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(56,189,248,.18), transparent 24%),
        var(--sky-100);
}

.brand-copy {
    max-width: 850px;
}

.brand-copy h2 {
    margin: 8px 0 18px;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.brand-copy p {
    max-width: 760px;
    margin: 0;
    color: var(--slate-700);
    font-size: 17px;
}

@media (max-width: 1080px) {
    .popular-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .game-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-block: 70px;
    }

    .hero-art {
        justify-content: flex-start;
    }

    .game-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .promo-card {
        grid-template-columns: 1fr;
    }

    .promo-visual {
        min-height: 260px;
    }
}

@media (max-width: 720px) {
    .section {
        padding: 62px 0;
    }

    .section-head {
        align-items: flex-start;
    }

    .game-grid,
    .popular-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }

    .game-info {
        padding: 12px;
    }

    .benefit-grid,
    .steps-grid,
    .article-grid {
        grid-template-columns: 1fr;
    }

    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-copy {
        padding: 34px 24px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 42px;
    }

    .section-head {
        display: block;
    }

    .section-head .text-link {
        display: inline-block;
        margin-top: 15px;
    }

    .game-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .filter-btn {
        flex: 0 0 auto;
    }
}


/* QUICK FEATURES */

.quick-features {
    position: relative;
    z-index: 4;
    margin-top: -32px;
}

.quick-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--slate-200);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.quick-feature {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px;
    border-right: 1px solid var(--slate-200);
}

.quick-feature:last-child {
    border-right: 0;
}

.quick-feature-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--sky-100);
    color: var(--sky-600);
    font-size: 11px;
    font-weight: 900;
}

.quick-feature-icon.accent {
    background: rgba(239,51,64,.1);
    color: var(--red);
}

.quick-feature strong,
.quick-feature span {
    display: block;
}

.quick-feature strong {
    color: var(--navy-950);
    font-size: 14px;
}

.quick-feature span {
    margin-top: 2px;
    color: var(--slate-500);
    font-size: 12px;
}

@media (max-width: 900px) {
    .quick-features {
        margin-top: 0;
        padding-top: 18px;
        background: var(--white);
    }

    .quick-features-grid {
        grid-template-columns: repeat(2, 1fr);
        box-shadow: var(--shadow-sm);
    }

    .quick-feature:nth-child(2) {
        border-right: 0;
    }

    .quick-feature:nth-child(-n+2) {
        border-bottom: 1px solid var(--slate-200);
    }
}

@media (max-width: 560px) {
    .quick-features-grid {
        grid-template-columns: 1fr;
    }

    .quick-feature {
        border-right: 0;
        border-bottom: 1px solid var(--slate-200);
    }

    .quick-feature:last-child {
        border-bottom: 0;
    }
}


/* ================ HOME VISUAL REFINEMENT v3 ================ */
.section { padding-block: 72px; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(27px,3.5vw,38px); }
.section-head.centered { margin-bottom: 33px; }
.hero-section {
  background: radial-gradient(circle at 86% 34%, rgba(104,202,249,.2), transparent 37%),
              linear-gradient(115deg,#fff 0%,#fff 42%,#edf9ff 100%);
}
.hero-section::after { right:-220px; bottom:-270px; opacity:.3; }
.hero-grid { min-height: 555px; grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 56px 82px; }
.hero-content h1 { font-size: clamp(44px,5.2vw,68px); letter-spacing:-.06em; line-height:1.035; margin-block: 15px 18px; }
.hero-content h1 span { color: #028ac7; }
.hero-copy { font-size: 17px; max-width: 520px; }
.hero-actions { margin-top: 28px; }
.hero-actions .btn { min-height: 51px; padding-inline:22px; }
.hero-points { gap:8px; margin-top: 31px; }
.hero-points span { background: #fff; border-color: #e0ebf3; }
.hero-art { display:block; width:100%; }
.hero-gallery { position:relative; isolation:isolate; overflow:hidden; min-height: 382px; border-radius:28px; padding: 25px 25px 22px;
  color: #f4fbff; background: radial-gradient(circle at 50% 38%, #164f79 0%, #0b2c4b 55%, #061a2f 100%);
  border:1px solid rgba(255,255,255,.12); box-shadow: 0 32px 60px rgba(7,28,51,.19); }
.gallery-orbit { position:absolute; z-index:-1; border:1px solid rgba(125,211,252,.22); border-radius:50%; pointer-events:none; }
.gallery-orbit-one { width:410px;height:410px;left:50%;top:52%;transform:translate(-50%,-50%); }
.gallery-orbit-two { width:610px;height:610px;left:50%;top:52%;transform:translate(-50%,-50%); }
.hero-gallery-head { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.12em; font-weight:850; color:#e2f3ff; }
.gallery-dot { width:8px;height:8px;border-radius:50%;background:#46c7f9;box-shadow:0 0 0 4px rgba(70,199,249,.13); }
.gallery-menu { margin-left:auto; letter-spacing:.12em; color:#9ed9f4; }
.hero-gallery-cards { display:flex; justify-content:center; align-items:center; padding-block: 35px 30px; }
.hero-gallery-card { display:flex; flex-direction:column; gap:10px; align-items:center; flex:0 0 29%; min-width:0; padding:12px 8px 10px; border-radius:16px;
  background:#fff; color:#102b44; font-weight:850; font-size:12px; text-align:center;
  box-shadow:0 14px 30px rgba(0,0,0,.23); }
.hero-gallery-card img { width:100%;max-width:118px;aspect-ratio:1;object-fit:cover;border-radius:11px; }
.hero-gallery-card span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
.hero-gallery-card-left { transform:rotate(-8deg) translateX(14px) translateY(7px); }
.hero-gallery-card-center { z-index:2; flex-basis:35%;padding:12px 11px 13px;transform:translateY(-8px); border:3px solid #7dd3fc; }
.hero-gallery-card-center img { max-width:143px; }
.hero-gallery-card-center small { color:#0284c7; font-size:10px; font-weight:800; }
.hero-gallery-card-right { transform:rotate(8deg) translateX(-14px) translateY(7px); }
.hero-gallery-foot { display:flex;justify-content:space-between;align-items:center;gap:10px; font-size:12px; }
.hero-gallery-foot > span { color:#c7e3f4; }
.hero-gallery-foot a { color:#fff;font-weight:850;white-space:nowrap; }
.hero-gallery-foot a:hover { color:#7dd3fc; }
.gallery-check { display:inline-grid;place-items:center;background:#36c196;color:#06251c;border-radius:50%;width:17px;height:17px;margin-right:5px; }
.quick-features { margin-top:-28px; }
.quick-features-grid { border-color:#e2edf6;border-radius:16px; box-shadow:0 16px 48px rgba(7,28,51,.075); }
.quick-feature { padding:19px 15px; }
.quick-feature-icon { flex-basis:34px;width:34px;height:34px; }
.game-card { border-radius:15px; box-shadow:0 7px 24px rgba(7,28,51,.045); }
.game-card:hover { transform: translateY(-3px);box-shadow:0 15px 30px rgba(7,28,51,.10); }
.game-thumb { background: #e5f4fe; }
.game-info h3 { font-size:15px; }
.game-info p { font-size:12px; }
.all-games-section { background:linear-gradient(180deg,#f2faff,#f9fcff); }
.game-toolbar { margin-bottom:23px; }
.game-filters .filter-btn { border-radius:10px; }
.promo-section { padding-block:56px; }
.promo-card { min-height: 305px; grid-template-columns: 1.05fr .9fr; background:linear-gradient(115deg,#071c33,#0e3759); }
.promo-copy { padding:clamp(25px,4vw,48px); }
.promo-copy h2 { font-size:clamp(28px,3.6vw,42px); }
.promo-visual { min-height:305px; }
.benefit-card,.step-card { min-height: 215px; border-radius:15px; }
.benefit-card h3,.step-card h3 { font-size:18px; }
.payment-grid { max-width:1010px;margin-inline:auto; }
.content-feed-section { padding-block:46px; }
.feed-empty { display:flex;gap:18px;align-items:center;min-height: 98px;border:1px dashed #c9dfef;background:#fff;border-radius:16px;padding:20px 24px; }
.feed-empty-symbol { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#e2f5ff;color:#0284c7;font-size:22px;font-weight:700; }
.feed-empty strong { color:#0b2a4a;font-size:15px; }
.feed-empty p { margin:4px 0 0;color:#64748b;font-size:13px; }
.section-white.content-feed-section .feed-empty { background:#f5fbff; }
@media (max-width: 1000px) {
  .hero-grid { gap: 24px; }
  .hero-gallery { padding:18px; min-height:340px; }
  .hero-gallery-cards { padding-block:40px 34px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; padding-block:54px 52px; }
  .hero-content h1 { max-width:680px; }
  .hero-art { max-width:570px; }
  .quick-features { margin-top:0; }
  .promo-card { grid-template-columns:1fr; }
  .promo-visual { max-height:260px;min-height:240px; }
  .popular-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .section { padding-block:54px; }
  .hero-grid { gap:32px;padding-block:44px 40px; }
  .hero-content h1 { font-size:clamp(38px,9vw,54px); }
  .hero-copy { font-size:15px; }
  .hero-gallery { min-height:310px;border-radius:19px; }
  .hero-gallery-cards { padding-block:42px 33px; }
  .hero-gallery-foot { font-size:10px; }
  .game-info h3 { font-size:14px; }
  .promo-section { padding-block:40px; }
  .payment-grid { gap:8px; }
  .feed-empty { padding:17px; }
}