:root {
    --pink: #f34866;
    --pink-deep: #de3257;
    --ink: #2b2030;
    --muted: #857c87;
    --light: #fff6f8;
    --line: #f0dfe4;
    --radius: 22px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    background: #fffafc;
    font-size: 15px;
    line-height: 1.65
}

a {
    text-decoration: none;
    color: inherit
}

button {
    font: inherit;
    cursor: pointer
}

img {
    max-width: 100%;
    display: block
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.container {
    width: min(1220px, calc(100% - 64px));
    margin: auto
}

.site-header {
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 250, 252, .94);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(237, 209, 218, .68)
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 30px
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.2;
    color: #e73659;
    white-space: nowrap
}

.brand img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 14px;
    background: #f3536e
}

.brand small {
    display: block;
    font-size: 10px;
    color: #a18292;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 5px
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto
}

.desktop-nav a {
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 700;
    color: #655c66;
    white-space: nowrap;
    transition: .25s
}

.desktop-nav a.active,
.desktop-nav a:hover {
    color: #e7375c;
    background: #ffeaef
}

.header-actions {
    display: flex;
    gap: 14px;
    align-items: center
}

.category-toggle {
    border: 1px solid #ead8dd;
    background: #fff;
    border-radius: 12px;
    padding: 11px 16px;
    color: #42333e;
    font-weight: 750;
    white-space: nowrap
}

.category-toggle:hover {
    border-color: var(--pink);
    color: var(--pink)
}

.hamburger {
    margin-right: 4px
}

.btn {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    gap: 13px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .23s, box-shadow .23s, background .23s
}

.btn:hover {
    transform: translateY(-3px)
}

.btn-primary {
    color: white;
    background: linear-gradient(115deg, #fc5a76, #e93a61);
    box-shadow: 0 12px 25px rgba(228, 56, 96, .2)
}

.btn-primary:hover {
    box-shadow: 0 18px 28px rgba(228, 56, 96, .28)
}

.btn-ghost {
    background: #fff;
    color: #e3385d;
    border: 1px solid #f5cdd8
}

.download-pop {
    position: relative;
    display: inline-flex
}

.qr-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    width: 192px;
    padding: 12px;
    background: white;
    border: 1px solid #f4e0e5;
    box-shadow: 0 15px 55px #65273a35;
    border-radius: 16px;
    z-index: 80;
    transform: translate(-50%, 9px) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .2s
}

.download-pop:hover .qr-pop,
.download-pop:focus-within .qr-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1)
}

.qr-pop img {
    width: 168px;
    height: 168px
}

.qr-pop span {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 750
}

.download-pop.is-header .qr-pop {
    bottom: auto;
    top: calc(100% + 14px);
    transform: translate(-50%, -9px) scale(.97)
}

.download-pop.is-header:hover .qr-pop,
.download-pop.is-header:focus-within .qr-pop {
    transform: translate(-50%, 0) scale(1)
}

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 85% 20%, #ffe4e9 0, transparent 43%), linear-gradient(135deg, #fff8fa, #fff0f4 50%, #ffe5ec);
    min-height: 630px
}

.hero-aurora {
    position: absolute;
    width: 62vw;
    height: 62vw;
    right: -25vw;
    top: -20vw;
    border-radius: 50%;
    background: radial-gradient(circle, #ffa9bb70, transparent 68%);
    animation: breathe 8s ease-in-out infinite alternate
}

.hero-content {
    position: relative;
    min-height: 630px;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: center;
    gap: 20px
}

.hero-text {
    z-index: 2;
    padding: 70px 0 85px
}

.hero-label,
.eyebrow {
    font-size: 12px;
    letter-spacing: 2.3px;
    font-weight: 900;
    color: #e9446a;
    text-transform: uppercase
}

.hero-label {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ffe0e8;
    padding: 9px 17px;
    border-radius: 30px;
    letter-spacing: 1px
}

.glow-dot {
    display: inline-block;
    background: #ff486e;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 9px;
    box-shadow: 0 0 0 5px #ffe2e9
}

.hero h1 {
    font-size: clamp(40px, 4.7vw, 67px);
    line-height: 1.27;
    letter-spacing: -2px;
    margin: 27px 0 22px;
    font-weight: 950
}

.hero h1 span {
    color: #e93a60;
    font-size: clamp(32px, 4.2vw, 55px)
}

.hero-text>p {
    font-size: 17px;
    line-height: 2;
    color: #746772;
    max-width: 540px
}

.hero-buttons {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px
}

.hero-buttons .btn {
    min-width: 154px
}

.hero-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #a08591;
    font-size: 13px;
    margin-top: 30px
}

.hero-gallery {
    height: 510px;
    position: relative;
    isolation: isolate
}

.hero-glow {
    position: absolute;
    inset: 55px -2% 5px;
    border-radius: 50%;
    background: #ffafc4;
    filter: blur(90px);
    opacity: .6;
    animation: breathe 5s ease-in-out infinite alternate
}

.hero-picture {
    position: absolute;
    border: 7px solid #fff;
    border-radius: 23px;
    overflow: hidden;
    box-shadow: 0 25px 65px rgba(121, 33, 59, .25);
    background: #fbdbe4
}

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

.pic-main {
    width: 50%;
    height: 390px;
    left: 26%;
    top: 58px;
    z-index: 3;
    transform: rotate(2deg);
    animation: bob 6s ease-in-out infinite
}

.pic-left {
    width: 41%;
    height: 310px;
    left: 0;
    top: 135px;
    z-index: 1;
    transform: rotate(-12deg)
}

.pic-right {
    width: 39%;
    height: 330px;
    right: 0;
    top: 118px;
    z-index: 2;
    transform: rotate(12deg)
}

.hero-picture-label {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #fffefd;
    color: #e4365d;
    border-radius: 100px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800
}

.petal {
    position: absolute;
    font-size: 65px;
    color: #fc84a3;
    z-index: 4;
    opacity: .8
}

.p1 {
    right: 1%;
    top: 3%;
    animation: spin 15s linear infinite
}

.p2 {
    left: 4%;
    bottom: 0;
    animation: bob 3s ease-in-out infinite
}

.marquee {
    overflow: hidden;
    background: linear-gradient(90deg, #fa6482, #e53b65, #f96786);
    color: white;
    padding: 13px 0;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent)
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 45px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
    animation: marquee 30s linear infinite alternate
}

.marquee-track span {
    white-space: nowrap
}

.section {
    padding: 88px 0
}

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

.section-head h2,
.faq-layout h2,
.download-copy h2,
.copy-panel h2 {
    font-size: clamp(27px, 3vw, 39px);
    letter-spacing: -1px;
    line-height: 1.3;
    margin: 10px 0
}

.section-head p {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 0
}

.text-link {
    font-weight: 800;
    color: #ed4167;
    white-space: nowrap
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 27px 18px
}

.poster-card {
    min-width: 0
}

.poster-art {
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #f6e5e9;
    box-shadow: 0 9px 22px #7a284310
}

.poster-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.poster-card:hover .poster-art img {
    transform: scale(1.055)
}

.poster-tag {
    position: absolute;
    top: 12px;
    left: 10px;
    background: #fbf7f0e8;
    color: #b53155;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 900
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: #ffffffdb;
    color: #e73c61;
    border-radius: 50%;
    font-size: 21px;
    transform: translate(-50%, -43%) scale(.7);
    opacity: 0;
    transition: .3s;
    box-shadow: 0 10px 28px #0003
}

.poster-card:hover .play-icon {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
}

.poster-meta h3 {
    font-size: 16px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 12px 0 4px
}

.poster-meta p {
    color: #938792;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0
}

.topics-section {
    background: #fff0f4
}

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

.topic-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 210px;
    overflow: hidden;
    border-radius: 22px;
    padding: 26px;
    background: linear-gradient(115deg, #fad5df, #fff0f4);
    transition: transform .25s
}

.topic-card:nth-child(2n) {
    background: linear-gradient(115deg, #f4d8f0, #ffecef)
}

.topic-card:hover {
    transform: translateY(-5px)
}

.topic-card>div {
    position: relative;
    z-index: 2;
    max-width: 63%
}

.topic-card small {
    font-size: 11px;
    color: #9d657e
}

.topic-card h3 {
    font-size: 27px;
    margin: 6px 0 10px;
    color: #7e2b4c
}

.topic-card span {
    font-size: 13px;
    font-weight: 850;
    color: #e74168
}

.topic-card img {
    position: absolute;
    width: 43%;
    height: 110%;
    right: 0;
    bottom: -10%;
    object-fit: cover;
    object-position: top center;
    transform: rotate(7deg);
    border: 4px solid white;
    border-radius: 15px;
    box-shadow: 0 8px 22px #69243c30
}

.download-section {
    overflow: hidden;
    background: linear-gradient(130deg, #fa7090 0%, #f44769 47%, #e5315c 100%);
    color: white
}

.download-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 470px;
    align-items: center;
    gap: 35px
}

.download-copy {
    padding: 65px 0
}

.eyebrow.light {
    color: #ffe1e9
}

.download-copy h2 {
    font-size: clamp(36px, 4vw, 53px);
    margin: 19px 0
}

.download-copy p {
    color: #fff3f5;
    font-size: 16px;
    max-width: 520px;
    line-height: 1.9
}

.download-section .btn-primary {
    color: #e63e62;
    background: #fff;
    box-shadow: 0 13px 30px #9c204a36
}

.download-qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 28px;
    color: #ffe1e7;
    font-size: 13px
}

.download-visual {
    height: 470px;
    display: flex;
    justify-content: center;
    position: relative
}

.phone {
    position: absolute;
    bottom: -74px;
    width: 250px;
    height: 455px;
    padding: 9px;
    border: 5px solid #503047;
    background: #fff;
    border-radius: 38px;
    box-shadow: 0 30px 70px #8022417a;
    transform: rotate(8deg)
}

.phone>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px
}

.phone-top {
    position: absolute;
    width: 92px;
    height: 22px;
    background: #503047;
    border-radius: 0 0 20px 20px;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3
}

.phone-caption {
    position: absolute;
    bottom: 26px;
    left: 25px;
    right: 25px;
    color: white;
    text-shadow: 0 2px 8px #000;
    display: grid
}

.phone-caption b {
    font-size: 16px
}

.phone-caption small {
    font-size: 11px
}

.float-star {
    position: absolute;
    font-size: 85px;
    opacity: .44;
    animation: spin 18s linear infinite
}

.st1 {
    top: 18px;
    left: 14%
}

.st2 {
    bottom: 85px;
    right: 9%
}

.reviews-section {
    background: #fff7fa
}

.barrage-box {
    overflow: hidden;
    display: grid;
    gap: 13px;
    padding: 20px 0 30px;
    mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent)
}

.barrage-line {
    display: flex;
    gap: 17px;
    width: max-content;
    animation: marquee 23s linear infinite alternate
}

.barrage-line.two {
    animation-duration: 29s;
    animation-direction: alternate-reverse
}

.barrage-line span {
    background: white;
    padding: 9px 17px;
    border: 1px solid #f2dce4;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 13px;
    color: #815366
}

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

.review-grid article {
    background: white;
    border: 1px solid #f5e5e9;
    padding: 28px;
    border-radius: 19px;
    min-height: 210px
}

.review-stars {
    color: #fa9a26;
    letter-spacing: 3px;
    font-size: 17px
}

.review-grid article>p {
    font-size: 15px;
    color: #534450;
    line-height: 1.9;
    margin: 13px 0 22px
}

.reviewer {
    display: grid;
    grid-template-columns: 38px auto;
    column-gap: 10px;
    align-items: center
}

.avatar {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffd9e2;
    color: #d83c65;
    font-weight: 900
}

.avatar.a2 {
    background: #ebe0fb
}

.avatar.a3 {
    background: #ffead0
}

.reviewer strong {
    font-size: 13px;
    line-height: 1.2
}

.reviewer small {
    font-size: 11px;
    color: #aaa
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 75px
}

.faq-layout em {
    font-style: normal;
    color: #ed4266
}

.intro-text {
    max-width: 280px;
    color: #8b7a84
}

.faq-list details {
    border-bottom: 1px solid #eddce2;
    padding: 20px 0
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
    font-size: 16px
}

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

.faq-list summary:after {
    content: '+';
    font-size: 21px;
    color: #e94669
}

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

.faq-list details p {
    margin: 12px 30px 4px 0;
    color: #81747e;
    font-size: 14px;
    line-height: 1.9
}

.site-footer {
    background: #30212d;
    color: #ddd0d8;
    padding: 57px 0 0
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 50px
}

.footer-brand {
    color: #ff90aa;
    font-weight: 900;
    font-size: 27px
}

.footer-top p {
    max-width: 340px;
    font-size: 14px;
    color: #bcaab5;
    line-height: 1.9;
    margin-top: 12px
}

.footer-top>div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.footer-top strong {
    font-size: 15px;
    color: white;
    margin-bottom: 10px
}

.footer-top a:not(.footer-brand) {
    font-size: 13px;
    color: #c6b7c1
}

.footer-top a:hover {
    color: #ff99b0
}

.footer-bottom {
    border-top: 1px solid #5b4353;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #aa97a3;
    font-size: 12px
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: #21151c91;
    z-index: 90;
    backdrop-filter: blur(3px)
}

.category-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(385px, 90vw);
    padding: 31px;
    background: #fff9fb;
    z-index: 91;
    box-shadow: -30px 0 70px #25152125;
    transform: translateX(110%);
    transition: transform .32s;
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.category-drawer.open {
    transform: translateX(0)
}

.drawer-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.drawer-top strong {
    font-size: 27px
}

.drawer-close {
    border: 0;
    background: #ffebf0;
    border-radius: 12px;
    color: #df3b61;
    width: 39px;
    height: 39px
}

.category-drawer>p {
    color: #a18c98;
    font-size: 13px
}

.drawer-nav {
    display: grid;
    gap: 9px;
    margin-top: 20px
}

.drawer-nav a {
    padding: 14px 16px;
    background: white;
    border: 1px solid #f4e5e9;
    border-radius: 13px;
    font-weight: 750
}

.drawer-nav a.active,
.drawer-nav a:hover {
    background: #ffe5ed;
    border-color: #f9aec1;
    color: #e63b61
}

.drawer-bottom {
    margin-top: auto;
    padding-top: 30px;
    display: grid;
    gap: 16px;
    color: #aa7d91;
    font-size: 13px
}

.inner-hero {
    background: radial-gradient(circle at 70% 30%, #ffd1df, transparent 50%), linear-gradient(130deg, #fff6f8, #ffeaef);
    overflow: hidden
}

.inner-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    min-height: 440px;
    align-items: center;
    gap: 30px
}

.inner-layout h1 {
    font-size: clamp(36px, 4vw, 59px);
    margin: 18px 0 18px
}

.inner-layout p {
    max-width: 630px;
    color: #836c7a;
    line-height: 2;
    font-size: 16px
}

.inner-images {
    height: 410px;
    position: relative
}

.inner-images img {
    position: absolute;
    object-fit: cover;
    width: 220px;
    height: 300px;
    border: 7px solid white;
    border-radius: 20px;
    box-shadow: 0 20px 55px #9e3a5836
}

.inner-front {
    top: 57px;
    left: 15%;
    transform: rotate(-10deg)
}

.inner-back {
    top: 65px;
    right: 5%;
    transform: rotate(12deg)
}

.feature-copy {
    background: #fff0f4
}

.copy-panel {
    max-width: 920px;
    margin: auto;
    text-align: center
}

.copy-panel p {
    font-size: 16px;
    line-height: 2;
    color: #867581
}

.copy-panel .text-link {
    display: inline-block;
    margin-top: 14px
}

.download-gateway {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background: #fff3f7
}

.download-gateway img {
    border-radius: 25px
}

.download-gateway h1 {
    font-size: 33px
}

.download-gateway p {
    color: #817181
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s, transform .6s
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0)
}

@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-30%)
    }
}

@keyframes breathe {
    from {
        transform: scale(.85);
        opacity: .35
    }

    to {
        transform: scale(1.16);
        opacity: .7
    }
}

@keyframes bob {

    0%,
    100% {
        translate: 0 0
    }

    50% {
        translate: 0 -13px
    }
}

@keyframes spin {
    to {
        rotate: 360deg
    }
}

@media(max-width:1050px) {
    .desktop-nav {
        display: none
    }

    .header-inner {
        justify-content: space-between
    }

    .poster-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .hero-content {
        grid-template-columns: 1fr 1fr
    }

    .hero-gallery {
        height: 430px
    }

    .pic-main {
        height: 330px
    }

    .pic-left,
    .pic-right {
        height: 260px
    }

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

@media(max-width:700px) {
    .container {
        width: calc(100% - 32px)
    }

    .site-header {
        height: 66px
    }

    .brand {
        font-size: 20px
    }

    .brand small {
        font-size: 9px;
        letter-spacing: 1px
    }

    .brand img {
        width: 37px;
        height: 37px
    }

    .header-inner {
        gap: 8px
    }

    .header-actions {
        gap: 8px
    }

    .category-toggle {
        padding: 9px 10px;
        font-size: 13px
    }

    .header-actions .btn {
        min-height: 39px;
        padding: 0 11px;
        font-size: 12px;
        border-radius: 10px
    }

    .header-actions .btn span {
        display: none
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0
    }

    .hero-text {
        padding: 52px 0 7px
    }

    .hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
        margin: 20px 0 13px
    }

    .hero h1 span {
        font-size: 33px
    }

    .hero-text>p {
        font-size: 14px;
        line-height: 1.85
    }

    .hero-foot {
        margin-top: 22px;
        gap: 10px;
        font-size: 11px
    }

    .hero-gallery {
        height: 360px;
        margin-bottom: 10px
    }

    .pic-main {
        width: 48%;
        height: 295px;
        top: 32px;
        left: 28%
    }

    .pic-left {
        width: 41%;
        height: 228px;
        top: 90px
    }

    .pic-right {
        width: 39%;
        height: 234px;
        top: 83px
    }

    .petal {
        font-size: 40px
    }

    .section {
        padding: 55px 0
    }

    .section-head {
        align-items: flex-start;
        margin-bottom: 22px
    }

    .section-head h2 {
        font-size: 27px
    }

    .section-head p {
        font-size: 13px
    }

    .section-head .text-link {
        font-size: 12px;
        margin-top: 29px
    }

    .poster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px
    }

    .poster-art {
        border-radius: 12px
    }

    .poster-meta h3 {
        font-size: 14px
    }

    .poster-meta p {
        font-size: 11px
    }

    .topics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .topic-card {
        min-height: 143px;
        padding: 14px;
        border-radius: 14px
    }

    .topic-card h3 {
        font-size: 20px
    }

    .topic-card small {
        font-size: 9px
    }

    .topic-card span {
        font-size: 10px
    }

    .topic-card img {
        width: 49%;
        border-radius: 9px
    }

    .download-inner {
        grid-template-columns: 1fr;
        gap: 0
    }

    .download-copy {
        padding: 57px 0 5px
    }

    .download-copy h2 {
        font-size: 37px
    }

    .download-copy p {
        font-size: 14px
    }

    .download-visual {
        height: 320px
    }

    .phone {
        width: 190px;
        height: 345px;
        bottom: -60px
    }

    .download-qualities {
        gap: 12px;
        font-size: 11px
    }

    .review-grid {
        grid-template-columns: 1fr
    }

    .review-grid article {
        min-height: 0
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .faq-layout h2 {
        font-size: 29px
    }

    .faq-list summary {
        font-size: 14px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 26px
    }

    .footer-top>div:first-child {
        grid-column: 1/-1
    }

    .footer-bottom {
        font-size: 11px;
        flex-wrap: wrap
    }

    .inner-layout {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0
    }

    .inner-layout>div:first-child {
        padding-top: 52px
    }

    .inner-layout h1 {
        font-size: 37px
    }

    .inner-layout p {
        font-size: 14px
    }

    .inner-images {
        height: 270px
    }

    .inner-images img {
        width: 152px;
        height: 216px
    }

    .inner-front {
        left: 23%;
        top: 15px
    }

    .inner-back {
        right: 16%;
        top: 18px
    }

    .qr-pop {
        display: none
    }
}

@media(max-width:360px) {
    .header-actions .btn {
        padding: 0 8px;
        font-size: 11px
    }

    .category-toggle {
        font-size: 12px;
        padding: 8px
    }

    .brand small {
        display: none
    }

    .hero h1 {
        font-size: 35px
    }

    .hero h1 span {
        font-size: 29px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}


/* 2026 visual refresh: editorial hero, discover cards and dynamic download displays */
.hero-gallery {
    height: 570px;
    isolation: isolate;
    perspective: 1100px
}

.hero-gallery .hero-glow {
    inset: 55px 5% 25px;
    border-radius: 40%;
    background: radial-gradient(circle, #ffd7e3 6%, #fe8caa 46%, transparent 72%);
    filter: blur(50px);
    opacity: .7;
    animation: breathe 5s ease-in-out infinite alternate
}

.gallery-orbit {
    position: absolute;
    left: 12%;
    top: 11%;
    width: 76%;
    height: 79%;
    border: 1px solid #ffffffa5;
    border-radius: 50%;
    transform: rotate(-18deg);
    pointer-events: none
}

.orbit-two {
    left: 23%;
    top: 17%;
    width: 57%;
    height: 65%;
    transform: rotate(28deg);
    border-style: dashed;
    opacity: .85
}

.hero-gallery .hero-picture {
    border: 5px solid #fffbfc;
    border-radius: 23px;
    box-shadow: 0 26px 65px #942c5352;
    transition: filter .35s, box-shadow .35s;
    will-change: transform
}

.hero-gallery .hero-picture:hover {
    filter: saturate(1.18);
    box-shadow: 0 32px 85px #942c5373
}

.hero-gallery .pic-main {
    width: 48%;
    height: 435px;
    top: 55px;
    left: 26%;
    z-index: 3;
    transform: rotate(0deg);
    animation: gallery-drift 6s ease-in-out infinite alternate
}

.hero-gallery .pic-left {
    width: 35%;
    height: 315px;
    left: 1%;
    top: 139px;
    transform: rotate(-13deg);
    z-index: 2;
    animation: gallery-left 6.5s ease-in-out infinite alternate
}

.hero-gallery .pic-right {
    width: 34%;
    height: 330px;
    right: 0;
    top: 104px;
    transform: rotate(12deg);
    z-index: 2;
    animation: gallery-right 7.2s ease-in-out infinite alternate
}

.hero-gallery .hero-picture img {
    object-position: center 18%
}

.gallery-caption-top {
    position: absolute;
    top: 19px;
    left: 42%;
    z-index: 7;
    background: #fffdfbea;
    color: #d83561;
    border: 1px solid white;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 850;
    font-size: 12px;
    box-shadow: 0 11px 28px #c344633b;
    transform: rotate(-4deg)
}

.hero-gallery .cover-badge {
    position: absolute;
    top: 13px;
    left: 10px;
    background: #fff9;
    color: #bf2859;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    backdrop-filter: blur(10px)
}

.hero-gallery .hero-picture-label {
    font-size: 12px;
    padding: 9px 17px;
    bottom: 13px;
    box-shadow: 0 5px 20px #310c3255
}

.gallery-float {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffffed;
    box-shadow: 0 18px 40px #9c345a3b;
    border: 1px solid white;
    border-radius: 17px;
    padding: 11px 15px;
    color: #942b52;
    backdrop-filter: blur(14px)
}

.gallery-float b,
.gallery-float small {
    display: block;
    white-space: nowrap
}

.gallery-float b {
    font-size: 13px
}

.gallery-float small {
    font-size: 10px;
    color: #ad768d;
    margin-top: 3px
}

.gallery-float-top {
    right: -12px;
    top: 52px;
    animation: float-card 4s ease-in-out infinite alternate
}

.gallery-float-bottom {
    left: 1%;
    bottom: 40px;
    animation: float-card 4.5s ease-in-out infinite alternate-reverse
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f0527c;
    box-shadow: 0 0 0 5px #ffc7d7;
    animation: pulse-new 2s infinite
}

.float-icon {
    font-size: 26px;
    color: #ef5780
}

.marquee {
    position: relative;
    background: linear-gradient(110deg, #fff8fb, #ffe7ef 55%, #fff4f7);
    padding: 18px 0;
    mask-image: none;
    color: #732944;
    border-top: 1px solid #ffffffdf;
    border-bottom: 1px solid #fbd1e0;
    overflow: hidden
}

.marquee::before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -24%;
    width: 35%;
    background: linear-gradient(90deg, transparent, #ffffff84, transparent);
    transform: skewX(-18deg);
    animation: marquee-shine 9s linear infinite;
    pointer-events: none
}

.marquee-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 1
}

.marquee-head {
    flex: 0 0 auto;
    display: flex;
    gap: 11px;
    align-items: center;
    padding-right: 21px;
    border-right: 1px solid #efc7d5
}

.marquee-head strong,
.marquee-head small {
    display: block;
    white-space: nowrap
}

.marquee-head strong {
    font-size: 16px;
    font-weight: 900
}

.marquee-head small {
    font-size: 11px;
    color: #aa7c8d;
    margin-top: 4px
}

.marquee-spark {
    font-size: 26px;
    color: #f15b82
}

.marquee .marquee-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
    animation: none;
    letter-spacing: 0
}

.marquee .marquee-track a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid #f7d6e1;
    background: #ffffffb5;
    box-shadow: 0 4px 12px #e3608710;
    transition: transform .22s, background .22s, box-shadow .22s
}

.marquee .marquee-track a:hover {
    transform: translateY(-4px);
    background: white;
    box-shadow: 0 10px 22px #bd49633b
}

.marquee .marquee-track a>span:nth-child(2) {
    min-width: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900
}

.marquee .marquee-track small {
    display: block;
    margin-top: 3px;
    font-weight: 500;
    font-size: 10px;
    color: #a87f90
}

.marquee .marquee-track i {
    margin-left: auto;
    font-size: 12px;
    font-style: normal;
    color: #e4547b
}

.category-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    background: #ffe0e9;
    border-radius: 10px;
    color: #e54270;
    font-size: 20px;
    font-weight: 700
}

.download-mini {
    position: absolute;
    bottom: 58px;
    left: 8%;
    width: 150px;
    height: 210px;
    border: 5px solid white;
    border-radius: 23px;
    transform: rotate(-13deg);
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 19px 50px #7027446e;
    animation: mini-float 5s ease-in-out infinite alternate
}

.download-mini img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top
}

.download-mini>span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px;
    text-align: center;
    background: linear-gradient(transparent, #402536bb);
    font-weight: 900;
    font-size: 12px;
    color: white
}

.download-mini b {
    color: #ffe09f
}

.download-bubble {
    position: absolute;
    right: 1%;
    top: 80px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    color: #e63b65;
    font-weight: 850;
    font-size: 13px;
    box-shadow: 0 14px 32px #762e5070;
    z-index: 4;
    transform: rotate(7deg);
    animation: float-card 5s ease-in-out infinite alternate
}

.download-visual .phone {
    z-index: 2;
    right: 20%;
    transform: rotate(9deg)
}

.review-grid .avatar {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #f6c4d3;
    display: block
}

.review-grid .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%
}

.review-grid .reviewer {
    grid-template-columns: 44px auto
}

@keyframes gallery-drift {
    from {
        transform: translateY(7px) rotate(-2deg)
    }

    to {
        transform: translateY(-12px) rotate(2deg)
    }
}

@keyframes gallery-left {
    from {
        transform: translateY(8px) rotate(-14deg)
    }

    to {
        transform: translateY(-12px) rotate(-9deg)
    }
}

@keyframes gallery-right {
    from {
        transform: translateY(-8px) rotate(13deg)
    }

    to {
        transform: translateY(12px) rotate(8deg)
    }
}

@keyframes float-card {
    from {
        translate: 0 0
    }

    to {
        translate: 0 -11px
    }
}

@keyframes mini-float {
    from {
        translate: 0 0
    }

    to {
        translate: 0 -13px
    }
}

@keyframes pulse-new {
    50% {
        box-shadow: 0 0 0 9px #ffc7d700
    }
}

@keyframes marquee-shine {
    from {
        left: -35%
    }

    to {
        left: 140%
    }
}

@media(max-width:1120px) {
    .marquee-inner {
        display: block
    }

    .marquee-head {
        border: 0;
        margin-bottom: 12px
    }

    .marquee .marquee-track {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .marquee .marquee-track a {
        gap: 5px;
        padding: 9px 6px
    }

    .marquee .marquee-track i {
        display: none
    }

    .category-icon {
        width: 24px;
        height: 24px;
        font-size: 16px
    }
}

@media(max-width:700px) {
    .hero-gallery {
        height: 395px;
        margin-top: 0
    }

    .hero-gallery .pic-main {
        width: 48%;
        height: 297px;
        top: 35px;
        left: 26%
    }

    .hero-gallery .pic-left {
        width: 36%;
        height: 219px;
        top: 101px;
        left: -2%
    }

    .hero-gallery .pic-right {
        width: 34%;
        height: 223px;
        top: 89px;
        right: -2%
    }

    .gallery-caption-top {
        top: 8px;
        left: 30%;
        font-size: 10px;
        padding: 6px 11px
    }

    .gallery-float {
        padding: 7px 9px;
        border-radius: 11px;
        gap: 7px
    }

    .gallery-float b {
        font-size: 10px
    }

    .gallery-float small {
        font-size: 8px
    }

    .gallery-float-top {
        top: 26px;
        right: -1%
    }

    .gallery-float-bottom {
        bottom: 34px;
        left: 0
    }

    .float-icon {
        font-size: 17px
    }

    .hero-gallery .cover-badge {
        font-size: 8px;
        padding: 4px 6px
    }

    .hero-gallery .hero-picture-label {
        font-size: 9px;
        padding: 5px 7px;
        bottom: 8px
    }

    .marquee {
        padding: 17px 0
    }

    .marquee-head {
        margin-bottom: 11px
    }

    .marquee .marquee-track {
        display: flex;
        gap: 9px;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px
    }

    .marquee .marquee-track::-webkit-scrollbar {
        display: none
    }

    .marquee .marquee-track a {
        flex: 0 0 125px;
        padding: 10px;
        scroll-snap-align: start
    }

    .marquee .marquee-track i {
        display: block
    }

    .download-mini {
        width: 105px;
        height: 148px;
        left: 6%;
        bottom: 29px;
        border-width: 4px;
        border-radius: 15px
    }

    .download-bubble {
        right: 1%;
        top: 35px;
        font-size: 10px;
        padding: 9px
    }

    .download-visual .phone {
        right: 18%
    }
}

@media(max-width:380px) {
    .hero-gallery {
        height: 345px
    }

    .hero-gallery .pic-main {
        height: 260px
    }

    .hero-gallery .pic-left,
    .hero-gallery .pic-right {
        height: 195px
    }

    .gallery-float-bottom {
        bottom: 20px
    }

    .gallery-float small {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-gallery .hero-picture,
    .gallery-float,
    .download-mini,
    .download-bubble,
    .marquee::before {
        animation: none !important
    }
}

/* Editorial hero + cinematic topic rail | October 2026 */
.hero-gallery-editorial {
    height: 570px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .87fr);
    grid-template-rows: 45px 1fr 112px;
    gap: 12px;
    perspective: none;
    padding: 12px;
    background: linear-gradient(145deg, #fff5f9cc, #ffe2ed90);
    border: 1px solid #fff9;
    border-radius: 30px;
    box-shadow: 0 32px 80px #962f5640;
    overflow: hidden
}

.hero-gallery-editorial:before {
    content: "";
    position: absolute;
    inset: -70%;
    background: conic-gradient(from 0deg, transparent, #fff5 21%, transparent 36%);
    animation: editorial-turn 16s linear infinite;
    pointer-events: none
}

.hero-editorial-header {
    position: relative;
    z-index: 2;
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #a33055;
    font-size: 11px;
    letter-spacing: 1.5px
}

.hero-editorial-header b {
    font-size: 13px;
    letter-spacing: 0
}

.hero-editorial-header i {
    color: #ec507d
}

.editorial-feature {
    grid-column: 1;
    grid-row: 2/4;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 16px 40px #68233a42;
    min-height: 0
}

.editorial-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform .6s
}

.editorial-feature:hover img {
    transform: scale(1.05)
}

.editorial-feature:after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, #240c20bd)
}

.editorial-feature-info {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 22px;
    right: 15px;
    display: grid;
    gap: 5px;
    color: white
}

.editorial-feature-info span {
    font-size: 12px;
    color: #ffe0ed
}

.editorial-feature-info strong {
    font-size: 39px;
    letter-spacing: 4px;
    text-shadow: 0 4px 15px #0005
}

.editorial-feature-info small {
    font-size: 12px
}

.editorial-side {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.editorial-side-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    min-width: 0;
    min-height: 0;
    background: #ca8c9f;
    box-shadow: 0 9px 20px #792e5138
}

.editorial-side-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s
}

.editorial-side-card:hover img {
    transform: scale(1.07)
}

.editorial-side-card:after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(transparent, #1c0714d9)
}

.editorial-side-card>span {
    position: absolute;
    z-index: 1;
    bottom: 14px;
    left: 11px;
    right: 8px;
    color: #ffdfeb;
    font-size: 10px
}

.editorial-side-card b {
    display: block;
    color: white;
    font-size: 16px;
    margin-top: 5px;
    line-height: 1.3
}

.editorial-bottom {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 24px #903b5930;
    padding: 9px;
    min-width: 0
}

.editorial-bottom>img {
    width: 64px;
    height: 94px;
    object-fit: cover;
    border-radius: 11px;
    flex: 0 0 64px
}

.editorial-bottom span {
    display: grid;
    gap: 5px;
    min-width: 0
}

.editorial-bottom em {
    font-style: normal;
    font-size: 9px;
    color: #e64d7c;
    letter-spacing: 1px
}

.editorial-bottom b {
    font-size: 20px;
    color: #402233;
    white-space: nowrap
}

.editorial-bottom small {
    font-size: 10px;
    color: #9c7783;
    white-space: nowrap
}

.editorial-bottom>i {
    margin-left: auto;
    margin-right: 7px;
    font-style: normal;
    color: #e44a78;
    font-size: 20px
}

.editorial-stamp {
    position: absolute;
    z-index: 3;
    top: 51px;
    right: 23px;
    background: #f64d80;
    color: white;
    padding: 9px 11px;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    text-align: center;
    transform: rotate(15deg);
    font-size: 17px;
    box-shadow: 0 7px 20px #70283a7a;
    line-height: 1
}

.editorial-stamp span {
    display: block;
    font-size: 9px;
    line-height: 1.1
}

.marquee-editorial {
    padding: 30px 0 35px;
    background: linear-gradient(120deg, #fff6fa, #ffe8f1 50%, #fff9fb);
    overflow: hidden
}

.marquee-editorial .marquee-title {
    display: flex;
    align-items: end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.marquee-title .marquee-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #e25580;
    flex-basis: 100%
}

.marquee-title>strong {
    font-size: 24px;
    letter-spacing: -.5px;
    color: #5d293e
}

.marquee-title>a {
    margin-left: auto;
    font-size: 12px;
    color: #da4b77
}

.marquee-editorial .marquee-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
    overflow: visible;
    padding: 0;
    animation: none
}

.marquee-editorial .marquee-tile {
    display: block;
    position: relative;
    height: 173px;
    min-width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 9px 24px #ba6c8530;
    isolation: isolate;
    scroll-snap-align: start;
    transition: transform .3s, box-shadow .3s
}

.marquee-tile:hover {
    transform: translateY(-7px);
    box-shadow: 0 17px 34px #b5537847
}

.marquee-tile>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform .5s
}

.marquee-tile:hover>img {
    transform: scale(1.09)
}

.marquee-tile:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1c091622 5%, #2b0e18bd 90%)
}

.marquee-tile>span {
    position: absolute;
    z-index: 1;
    left: 13px;
    bottom: 16px;
    right: 5px;
    color: #fff;
    display: grid;
    gap: 4px
}

.marquee-tile small {
    font-size: 9px;
    color: #ffd7e3;
    letter-spacing: 1px
}

.marquee-tile strong {
    font-size: 18px
}

.marquee-tile em {
    font-style: normal;
    font-size: 10px;
    color: #ffe0e9
}

.marquee-tile>b {
    position: absolute;
    z-index: 1;
    right: 11px;
    top: 10px;
    border: 1px solid #fff6;
    color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 23px;
    font-size: 13px;
    font-weight: 400
}

@keyframes editorial-turn {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:1100px) {
    .hero-gallery-editorial {
        height: 485px;
        grid-template-rows: 34px 1fr 100px
    }

    .editorial-side-card b {
        font-size: 13px
    }

    .marquee-editorial .marquee-tile {
        height: 145px
    }

    .marquee-tile strong {
        font-size: 15px
    }
}

@media(max-width:700px) {
    .hero-gallery-editorial {
        height: 385px;
        grid-template-rows: 26px 1fr 75px;
        gap: 7px;
        padding: 8px;
        border-radius: 21px;
        margin-top: 15px
    }

    .hero-editorial-header {
        font-size: 8px;
        padding: 0 4px;
        letter-spacing: 0
    }

    .hero-editorial-header b {
        font-size: 9px
    }

    .editorial-feature {
        border-radius: 13px
    }

    .editorial-feature-info {
        bottom: 11px;
        left: 11px
    }

    .editorial-feature-info span {
        font-size: 9px
    }

    .editorial-feature-info strong {
        font-size: 25px
    }

    .editorial-feature-info small {
        font-size: 9px
    }

    .editorial-side {
        gap: 6px
    }

    .editorial-side-card {
        border-radius: 11px
    }

    .editorial-side-card>span {
        bottom: 8px;
        left: 6px;
        font-size: 8px
    }

    .editorial-side-card b {
        font-size: 10px;
        margin-top: 3px
    }

    .editorial-bottom {
        border-radius: 11px;
        padding: 5px;
        gap: 6px
    }

    .editorial-bottom>img {
        width: 42px;
        height: 62px;
        flex-basis: 42px;
        border-radius: 6px
    }

    .editorial-bottom em {
        font-size: 7px
    }

    .editorial-bottom b {
        font-size: 13px
    }

    .editorial-bottom small {
        font-size: 8px;
        white-space: normal
    }

    .editorial-bottom>i {
        font-size: 12px;
        margin-right: 1px
    }

    .editorial-stamp {
        top: 37px;
        right: 11px;
        width: 34px;
        height: 34px;
        font-size: 12px;
        padding: 5px;
        line-height: 1
    }

    .editorial-stamp span {
        font-size: 7px
    }

    .marquee-editorial {
        padding: 25px 0
    }

    .marquee-title>strong {
        font-size: 20px
    }

    .marquee-editorial .marquee-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scrollbar-width: none;
        padding: 3px 1px 10px
    }

    .marquee-editorial .marquee-tile {
        flex: 0 0 148px;
        height: 165px;
        border-radius: 14px
    }

    .marquee-tile strong {
        font-size: 16px
    }
}

@media(max-width:360px) {
    .hero-gallery-editorial {
        height: 330px
    }

    .editorial-side-card b {
        font-size: 9px
    }

    .editorial-bottom small {
        display: none
    }

    .hero-editorial-header b {
        font-size: 8px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-gallery-editorial:before {
        animation: none
    }
}

/* Footer download CTA on every page */
.footer-download {
    padding: 6px 0 46px
}

.footer-download-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(110deg, #543044, #7b3459 55%, #a33d63);
    border: 1px solid rgba(255, 181, 204, .23);
    border-radius: 26px;
    padding: 32px 38px;
    box-shadow: 0 22px 50px rgba(24, 8, 19, .13)
}

.footer-download-brand {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0
}

.footer-download-brand>img {
    width: 68px;
    height: 68px;
    flex: none;
    border-radius: 19px;
    object-fit: cover;
    box-shadow: 0 10px 26px #210c1744
}

.footer-download-overline {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    color: #ffb3c9
}

.footer-download-brand h2 {
    color: #fff;
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.3;
    margin: 5px 0
}

.footer-download-brand p {
    color: #f4d4e0;
    font-size: 13px;
    margin: 4px 0 0
}

.footer-download-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: none
}

.footer-download-action .btn {
    color: #b6315d;
    background: #fff;
    min-width: 188px
}

.footer-download-tip {
    color: #efbbcc;
    font-size: 11px;
    text-align: center
}

@media(max-width:700px) {
    .footer-download {
        padding: 0 0 32px
    }

    .footer-download-inner {
        padding: 24px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        border-radius: 20px
    }

    .footer-download-brand {
        gap: 14px
    }

    .footer-download-brand>img {
        width: 56px;
        height: 56px;
        border-radius: 15px
    }

    .footer-download-brand h2 {
        font-size: 22px
    }

    .footer-download-brand p {
        font-size: 12px
    }

    .footer-download-action {
        align-items: stretch
    }

    .footer-download-action .download-pop,
    .footer-download-action .btn {
        width: 100%
    }

    .footer-download-action .qr-pop {
        display: none
    }
}