.burger,
.dot,
.reviewMore,
.slideNav,
.tDot,
.tNav {
    cursor: pointer
}

*,
.mobileNav a,
::after,
::before {
    box-sizing: border-box
}

.floatingCards,
.grid3 {
    grid-template-columns: 1fr 1fr 1fr
}

#map,
.brand__sub,
.hero {
    overflow: hidden
}

.heroProof,
.mapWrap__head,
.sectionHead--center,
.slide__content,
.topbar__cta,
.trustItem {
    text-align: center
}

body,
html {
    max-width: 100%;
    overflow-x: hidden
}

* {
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter, system-ui, Arial, sans-serif;
    color: #ffeaef;
    background: #200b11;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-left: clamp(14px, 2.2vw, 40px);
    padding-right: clamp(14px, 2.2vw, 40px)
}

.container--xl {
    max-width: 2120px
}

:root {
    --brand: #84213a;
    --wa: #25D366;
    --dark: #151112;
    --dark2: #201a1c;
    --heroBlue: #992a51;
    --muted: #e6c9d1;
    --card: #2d1219;
    --radius: 22px;
    --accent: #ff4f8c;
    --lime: #f4b83d;
    --surface: #271016;
    --surface2: #2d1219;
    --dentalli-bg: #1c070d;
    --dentalli-card: #2a0f17;
    --dentalli-line: rgba(255, 255, 255, .10);
    --dentalli-cyan: #ff508e;
    --dentalli-red: #d71920;
    --dentalli-star: #ffd14a
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.brand,
.header__inner {
    display: flex;
    gap: 12px
}

.header {
    position: relative;
    background: linear-gradient(to bottom, #150e10, #1c1215);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.hero::after,
.mobileNav {
    position: absolute;
    left: 0
}

.header__inner {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 16px
}

.brand,
.contactBox,
.nav,
.tTop {
    align-items: center
}

.brand__logo {
    width: 60px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35))
}

.actCard__image,
.tAvatar {
    object-fit: cover
}

.brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1
}

.brand__name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.1;
    color: #fff
}

.brand__sub {
    font-size: 12px;
    font-weight: 400;
    color: #c9c9c9;
    opacity: .8;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.nav {
    display: flex;
    gap: 18px
}

.nav__link {
    color: #c9c9c9;
    font-size: 14px;
    font-weight: 500;
    opacity: .95
}

.nav__link.is-active,
.nav__link:hover {
    color: #fff
}

.nav__btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 72, 133, .55);
    color: #fff;
    font-weight: 600
}

.nav__btn:hover {
    border-color: rgba(255, 72, 133, .85)
}

.burger {
    display: none;
    background: 0 0;
    border: none;
    color: #ff4d4d;
    font-size: 28px;
    padding: 6px;
    align-self: center;
    margin-left: auto
}

.mobileNav {
    padding: 16px;
    top: 100%;
    width: 100%;
    z-index: 9999;
    background: linear-gradient(#141011, #100c0d);
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.hero-content,
.tNav {
    z-index: 2
}

.floatingCards,
.hero,
.hero-content,
.hero__slider,
.tSlider {
    position: relative
}

.slideNav,
.tNav {
    top: 50%;
    place-items: center
}

.mobileNav a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    color: #c9c9c9
}

.hero {
    background-size: 200% 200%;
    animation: none;
    background: linear-gradient(135deg, #300615, #4f0c24, #821a40);
    color: #fff;
    padding-bottom: 100px
}

.hero::after {
    content: "";
    bottom: -1px;
    width: 100%;
    height: 120px;
    background: #660f2f;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%)
}

.hero h1,
.slide__title {
    margin-bottom: 24px
}

.hero p,
.slide__lead {
    font-size: 18px;
    line-height: 1.5;
    max-width: 340px;
    margin-top: 0;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, .88)
}

.hero__slider {
    min-height: 520px
}

.actCard::after,
.dots,
.slide,
.slide::after,
.slideNav,
.tNav {
    position: absolute
}

.slide {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
    background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15)), var(--bg) center/cover no-repeat
}

.menuOverlay.is-open,
.slide.is-active {
    opacity: 1;
    pointer-events: auto
}

.actCard::after,
.menuOverlay,
.slide::after {
    inset: 0;
    pointer-events: none
}

.slide__inner {
    height: 520px;
    display: flex;
    align-items: center
}

.slide__content {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.slide__pill {
    display: inline-flex;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 500;
    color: #fff2f5;
    margin-bottom: 18px
}

.slide__title {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -.6px;
    margin-bottom: 14px;
    color: #fff
}

.slide__lead {
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    line-height: 1.5;
    max-width: 560px;
    margin-bottom: 22px
}

.slide__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
    margin-bottom: 36px;
    width: 100%
}

.slideNav {
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 28px;
    display: none !important
}

.slideNav--prev {
    left: 16px
}

.slideNav--next {
    right: 16px
}

.dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    display: flex;
    gap: 10px
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .15)
}

.dot.is-active {
    background: #fff;
    border-color: #fff
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    gap: 8px
}

.btn--wa {
    background: var(--wa);
    color: #08210f
}

.btn--ghost {
    border: 2px solid rgba(255, 255, 255, .65);
    background: 0 0;
    color: #fff
}

.btn:active {
    transform: scale(.98)
}

.floatingCards {
    z-index: 2;
    margin-top: 0;
    display: grid;
    gap: 28px
}

.fCard__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15
}

.fCard,
.fCard__icon {
    display: flex;
    align-items: center
}

.fCard__text span {
    font-size: 13px;
    opacity: .8
}

.fCard {
    background: rgba(23, 18, 19, .92);
    border-radius: 26px;
    padding: 22px 28px;
    min-height: 110px;
    gap: 20px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .35), 0 50px 90px rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .08)
}

.fCard--red {
    background: rgba(176, 14, 24, .95);
    border-color: rgba(255, 255, 255, .12)
}

.fCard__icon {
    font-size: 28px;
    width: 42px;
    height: 42px;
    justify-content: center;
    flex-shrink: 0
}

.fCard__text strong {
    font-weight: 800;
    margin: 0;
    display: block;
    font-size: 20px;
    line-height: 1.05;
    color: #fff
}

.fCard__text span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .82);
    font-weight: 500
}

.fCard__arrow {
    margin-left: auto;
    font-size: 22px;
    opacity: .75;
    color: rgba(255, 255, 255, .85)
}

.actIcon,
.tCard p {
    opacity: .95
}

.section {
    padding: 100px 0
}

.section--dark {
    background: #1f1014
}

.sectionHead {
    margin-bottom: 26px
}

.sectionHead h2 {
    font-size: 34px;
    letter-spacing: -.4px;
    color: #fff
}

.sectionHead p {
    color: rgba(255, 255, 255, .78);
    margin-top: 10px
}

.grid3 {
    display: grid;
    gap: 28px
}

.card {
    background: #280f16;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22)
}

.actCard,
.blogCard {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28)
}

.card h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 8px
}

.card p,
.footer,
.miniList,
.muted {
    color: rgba(255, 255, 255, .75)
}

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

.actCard {
    background: #1b1517;
    border-radius: 26px
}

.actIcon {
    font-size: 46px;
    margin-bottom: 10px
}

.actCard p {
    max-width: 320px;
    margin: 0 auto 18px
}

.actBtn {
    display: inline-flex;
    border-radius: 999px;
    font-weight: 800
}

.tAvatar,
.tDot,
.tNav {
    border-radius: 50%
}

.testimonials {
    background: #a6023e
}

.testimonials__title {
    text-align: center;
    font-size: 40px;
    color: #fff
}

.tNav {
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 28px;
    display: grid
}

.tTrack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.tDots,
.tTop {
    display: flex
}

.tTop {
    gap: 14px
}

.tStars {
    letter-spacing: 2px;
    margin-top: 4px
}

.tG {
    margin-left: auto;
    opacity: .35
}

.tDots {
    justify-content: center;
    gap: 12px
}

.tDot {
    border: 1px solid rgba(255, 255, 255, .2)
}

.blogGrid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.blogCard {
    background: #1b1517;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 26px;
    padding: 28px
}

.blogCard h3 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 12px
}

.blogDate {
    display: block;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 18px
}

.blogMore {
    color: #fff;
    font-weight: 800
}

.mapWrap {
    padding: 72px 0;
    background: #160f11
}

.mapWrap__head {
    padding: 0 18px 20px
}

.mapWrap__head h2 {
    font-size: 32px;
    color: #fff;
    letter-spacing: -.3px
}

.mapWrap__head p {
    margin-top: 10px;
    color: rgba(255, 255, 255, .72)
}

.mapShell {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 18px
}

#map {
    height: 520px;
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    background: #f7f2f3
}

.leaflet-tooltip {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: Inter, sans-serif
}

.contactBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: #280f16;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding: 34px 42px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25)
}

.contactActions,
.footer__inner {
    align-items: center;
    display: flex
}

.contactActions {
    gap: 14px;
    flex-wrap: wrap
}

.contactActions .btn {
    width: auto;
    min-width: 220px;
    height: 52px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .1px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22)
}

.contactActions .btn--wa {
    background: linear-gradient(135deg, #25d366, #20c760);
    color: #06210f;
    border: 1px solid rgba(255, 255, 255, .18)
}

.contactActions .btn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(37, 211, 102, .25)
}

.contactActions .btn--ghost {
    background: rgba(255, 255, 255, .04);
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff
}

.contactActions .btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .85);
    transform: translateY(-2px)
}

.miniInfo {
    margin-top: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.miniInfo h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px
}

.miniList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px
}

.footer__inner {
    justify-content: space-between;
    gap: 18px
}

.footer__links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

@media (max-width:680px) {

    .contactBox,
    .footer__inner,
    .miniInfo {
        text-align: center
    }

    .contactBox {
        padding: 28px 18px
    }

    .contactActions {
        justify-content: center
    }

    .contactActions .btn {
        width: 100%;
        max-width: 330px
    }

    .footer {
        padding: 26px 0 34px
    }

    .footer__inner {
        flex-direction: column;
        justify-content: center
    }

    .footer__links {
        justify-content: center;
        gap: 12px 18px
    }
}

.muted {
    margin-top: 8px
}

.contactActions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.miniInfo {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 18px
}

.miniList {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer__inner,
.waFloat {
    display: flex;
    align-items: center
}

.footer {
    padding: 26px 0;
    background: #0f0a0b;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.footer__links a:hover,
.waFloat {
    color: #fff
}

.footer__inner {
    justify-content: space-between;
    gap: 16px
}

.footer__links {
    display: flex;
    gap: 14px
}

.waFloat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #25d366;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.waFloat svg {
    width: 32px;
    height: 32px;
    display: block
}

.waFloat:hover {
    transform: scale(1.08)
}

.topbar {
    background: linear-gradient(#221c1e, #181415);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px
}

.topbar__btn,
.topbar__cta {
    display: flex;
    font-size: 12px
}

.topbar__inner {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.topbar__center,
.topbar__left,
.topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfcfcf
}

.topbar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d7d7d7;
    font-weight: 500
}

.topbar__btn,
.topbar__cta {
    border-radius: 2px;
    color: #fff;
    white-space: nowrap
}

.topbar__link.wa {
    color: #25d366;
    font-weight: 700
}

.topbar__cta {
    height: 32px;
    padding: 0 14px;
    justify-content: center;
    align-items: center;
    background: #b10e18;
    font-weight: 700;
    letter-spacing: .2px
}

.topbar__social {
    display: flex;
    gap: 10px;
    margin-left: 8px
}

.topbar__social a {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: .2s
}

.topbar__social a:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-1px)
}

.topbar .ico {
    width: 14px;
    height: 14px;
    fill: #cfcfcf;
    opacity: .9
}

.topbar .ico.wa {
    fill: #25D366
}

.topbar__btn {
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18)
}

.topbar__btn.call {
    background: rgba(255, 72, 133, .12);
    border-color: rgba(255, 72, 133, .35)
}

.topbar__btn.wa {
    background: rgba(37, 211, 102, .16);
    border-color: rgba(37, 211, 102, .35);
    color: #fff !important
}

.topbar__btn.wa svg {
    width: 16px;
    height: 16px;
    display: block
}

.topbar__btn:hover {
    background: rgba(255, 255, 255, .22)
}

.section--continuo {
    background: #140b0e;
    padding-top: 0
}

@media (min-width:769px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 120
    }
}

@media (max-width:1200px) {
    .tTrack {
        grid-template-columns: repeat(2, 1fr)
    }
}

body.scrolled .header {
    background: #120a0c;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4)
}

.mobileNav {
    display: none;
    transform: translateY(-20px);
    opacity: 0
}

@media (max-width:980px) {

    .nav,
    .topbar {
        display: none !important
    }

    .actGrid,
    .blogGrid,
    .contactBox,
    .floatingCards,
    .grid3 {
        grid-template-columns: 1fr
    }

    .slide__title {
        font-size: 40px
    }

    .floatingCards {
        margin-top: -28px
    }

    .tNav--prev {
        left: 0
    }

    .tNav--next {
        right: 0
    }

    .topbar {
        height: 0 !important;
        overflow: hidden !important
    }

    .header {
        top: 0
    }

    .burger {
        display: block !important;
        margin-left: auto;
        font-size: 28px;
        line-height: 1;
        color: #fff;
        background: 0 0;
        border: 0;
        cursor: pointer
    }

    .mobileNav {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: #141011;
        transition: max-height .28s;
        border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .mobileNav.is-open {
        max-height: 420px
    }

    .mobileNav a {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        color: #c9c9c9
    }

    .header__inner {
        padding-left: 14px;
        padding-right: 14px
    }
}

.blogCard,
.burger,
.menuOverlay,
.mobileNav {
    transition: .25s
}

.menuOverlay {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    z-index: 9998
}

.mobileNav.is-open {
    transform: translateY(0);
    opacity: 1
}

.burger.is-open {
    transform: rotate(90deg)
}

.brand,
.brand__text,
.header,
.header__inner {
    max-width: 100%;
    min-width: 0
}

.header__inner {
    flex-wrap: nowrap
}

.brand__logo,
.burger {
    flex-shrink: 0
}

@keyframes gradientMove {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@media (max-width:768px) {

    .topbar__center,
    .topbar__social {
        display: none
    }

    .topbar__inner {
        justify-content: space-between
    }

    .topbar__cta {
        font-size: 11px;
        padding: 0 12px
    }

    .hero,
    .hero-content,
    .hero__content,
    .slider-content {
        text-align: center
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 80px
    }

    .hero-content,
    .hero__content,
    .slider-content {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .badge {
        margin-left: auto;
        margin-right: auto
    }

    .hero h1,
    .hero-title {
        font-size: 32px;
        line-height: 1.2
    }

    .hero p {
        max-width: 320px
    }

    .cta-buttons,
    .hero-buttons {
        justify-content: center;
        gap: 12px
    }

    .cta-buttons a,
    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
        max-width: 260px
    }

    .slideNav,
    .slideNav--next,
    .slideNav--prev {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important
    }

    .slide__inner {
        align-items: flex-start !important;
        padding-top: 20px !important;
        height: 520px
    }

    .slide__content {
        padding-top: 0 !important
    }
}

.header {
    position: sticky !important;
    z-index: 110
}

.header__inner {
    justify-content: space-between !important;
    min-height: 76px
}

.nav {
    margin-left: auto
}

.btn--wa,
.topbar__cta,
.waFloat {
    transition: transform .2s, box-shadow .2s, filter .2s
}

.btn--wa:hover,
.topbar__cta:hover,
.waFloat:hover {
    transform: translateY(-2px);
    filter: saturate(1.1)
}

.hero {
    background: radial-gradient(circle at 78% 22%, rgba(255, 79, 140, .22), transparent 35%), linear-gradient(135deg, #22040e, #4e0b23, #9a083d)
}

.slide {
    background: linear-gradient(90deg, rgba(18, 2, 6, .78), rgba(18, 2, 6, .36), rgba(18, 2, 6, .14)), var(--bg) center/cover no-repeat
}

.slide::after {
    content: "";
    background: radial-gradient(circle at 18% 30%, rgba(255, 79, 140, .18), transparent 30%)
}

.slide__content,
.slide__inner {
    position: relative;
    z-index: 2
}

.slide__content {
    padding: 28px 0
}

.heroProof {
    display: inline-flex;
    font-size: 14px;
    letter-spacing: .2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45)
}

.slide__title {
    font-weight: 900;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .35)
}

.slide__lead {
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 500
}

.heroBadges {
    display: flex;
    flex-wrap: wrap
}

.dot,
.slideNav,
.tDot,
.tNav {
    transition: transform .2s, background .2s
}

.slideNav:hover,
.tNav:hover {
    transform: translateY(-50%) scale(1.06);
    background: rgba(0, 0, 0, .38)
}

.dot:hover,
.tDot:hover {
    transform: scale(1.2)
}

.actCard,
.blogCard,
.card,
.fCard {
    transition: transform .22s, border-color .22s, box-shadow .22s
}

.actCard:hover,
.blogCard:hover,
.card:hover,
.fCard:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 79, 140, .32);
    box-shadow: 0 22px 56px rgba(0, 0, 0, .36)
}

.trustStrip {
    padding: 34px 0
}

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

.trustItem {
    background: rgba(255, 255, 255, .055);
    padding: 22px
}

.trustItem strong {
    display: block;
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 900;
    color: #fff;
    line-height: 1
}

.trustItem span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .76);
    font-weight: 700;
    font-size: 14px
}

.emergency {
    background: linear-gradient(135deg, #271117, #250711)
}

.emergency__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: center
}

.kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: #f4b83d;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px
}

.emergency__copy h2 {
    font-size: clamp(32px, 3.2vw, 54px);
    line-height: 1.05;
    margin-bottom: 14px;
    color: #fff;
    letter-spacing: -.6px
}

.emergency__copy p {
    color: rgba(255, 255, 255, .78);
    font-size: 18px;
    max-width: 620px;
    margin-bottom: 22px
}

.emergencyList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.emergencyList div {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    font-weight: 800;
    color: #fff
}

.faq {
    background: #200b11
}

.faqGrid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 12px
}

.faqItem {
    background: #271016;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 0 18px;
    overflow: hidden
}

.faqItem summary {
    cursor: pointer;
    padding: 18px 0;
    font-weight: 900;
    color: #fff;
    list-style: none
}

.faqItem summary::-webkit-details-marker {
    display: none
}

.faqItem summary::after {
    content: "+";
    float: right;
    color: #fff;
    font-size: 22px;
    line-height: 1
}

.faqItem[open] summary::after {
    content: "–"
}

.faqItem p {
    padding: 0 0 18px;
    color: rgba(255, 255, 255, .76)
}

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

.reveal.is-visible {
    opacity: 1;
    transform: none
}

.waFloat {
    font-size: 24px;
    animation: 2.3s infinite waPulse
}

.waFloat span {
    transform: translateY(1px)
}

@media (max-width:980px) {
    .header__inner {
        gap: 12px
    }

    .brand {
        align-items: center
    }

    .brand__text {
        line-height: 1.1
    }

    .emergency__copy,
    .mobileNav__cta,
    .slide__content {
        text-align: center
    }

    .header {
        top: 0
    }

    .mobileNav {
        position: fixed !important;
        top: 0;
        right: 0;
        left: auto;
        width: min(86vw, 360px);
        height: 100vh;
        max-height: none !important;
        padding: 88px 22px 24px;
        z-index: 10000;
        background: linear-gradient(180deg, #271016, #12070a);
        border-left: 1px solid rgba(255, 255, 255, .1);
        transform: translateX(105%);
        opacity: 1;
        box-shadow: -18px 0 50px rgba(0, 0, 0, .45)
    }

    .mobileNav.is-open {
        transform: translateX(0)
    }

    .mobileNav a {
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding: 16px 4px
    }

    .mobileNav__cta {
        margin-top: 18px !important;
        background: var(--wa);
        color: #08210f !important;
        border-radius: 999px;
        font-weight: 900;
        border-bottom: 0 !important
    }

    .burger {
        z-index: 10001
    }

    .menuOverlay {
        z-index: 9999
    }

    .slide__inner {
        height: auto !important;
        min-height: 560px;
        align-items: center !important;
        padding-top: 26px !important;
        padding-bottom: 70px
    }

    .slide__content {
        margin: 0 auto
    }

    .heroBadges,
    .slide__actions {
        justify-content: center
    }

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

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

    .emergency__copy .btn {
        margin: auto
    }
}

@media (max-width:620px) {
    .slide__title {
        font-size: 34px !important
    }

    .slide__lead {
        font-size: 16px
    }

    .btn,
    .slide__actions {
        width: 100%
    }

    .slide__actions .btn {
        max-width: 310px
    }

    .heroBadges span {
        width: 100%;
        max-width: 310px
    }

    .emergencyList,
    .trustStrip__grid {
        grid-template-columns: 1fr
    }

    .waFloat {
        width: 58px;
        height: 58px;
        right: 14px;
        bottom: 14px
    }
}

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

    *,
    ::after,
    ::before {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

.heroProof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #fff;
    line-height: 1.4
}

.heroStars {
    color: #ffd34d;
    font-size: 18px;
    line-height: 1
}

@media (max-width:768px) {
    .heroBadges {
        display: none !important
    }

    .slide__actions .btn {
        width: 100%;
        max-width: 320px
    }

    .slide__inner {
        padding-top: 10px !important
    }
}

.googleBadge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
    margin-bottom: 22px;
    animation: 3.2s ease-in-out infinite googleFloat
}

.googleBadge img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 5px
}

.googleBadge strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.1
}

.googleBadge span {
    display: block;
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
    margin-top: 3px
}

@keyframes googleFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@media(max-width:980px) {
    .googleBadge {
        margin-bottom: 18px;
        padding: 10px 16px
    }

    .googleBadge img {
        width: 30px;
        height: 30px
    }

    .googleBadge strong {
        font-size: 14px
    }

    .googleBadge span {
        font-size: 11px
    }
}

@media (min-width:981px) {

    .heroSplitLeft .hero__slider,
    .hero__slider {
        min-height: 620px !important
    }

    .heroSplitLeft .slide__inner,
    .slide__inner {
        height: 620px !important
    }

    .slide__inner {
        align-items: center !important;
        padding-top: 0 !important
    }

    .floatingCards {
        margin-top: 20px !important
    }

    .heroSplitDesktop {
        padding-bottom: 60px
    }

    .heroSplitWrap {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 48px;
        display: grid;
        grid-template-columns: 1fr 520px;
        gap: 70px;
        align-items: center
    }

    .heroSplitLeft {
        min-width: 0
    }

    .heroDoctorBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        isolation: isolate
    }

    .heroDoctorBox::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: 50%;
        top: 46%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 79, 140, .28) 0, rgba(255, 79, 140, .12) 45%, transparent 72%);
        filter: blur(45px);
        z-index: -1;
        animation: none
    }

    .heroDoctorBox>img {
        width: 100%;
        max-width: 500px;
        height: 580px;
        object-fit: cover;
        border-radius: 34px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .38)
    }

    .doctorMiniCard {
        position: absolute;
        left: -35px;
        bottom: 70px;
        width: 250px;
        padding: 22px;
        background: #fff;
        color: #200b11;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28)
    }

    .doctorMiniCard img {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        margin-bottom: 14px
    }

    .doctorMiniCard strong {
        display: block;
        color: #84213a;
        font-size: 18px
    }

    .doctorMiniCard span {
        display: block;
        color: #841231;
        font-weight: 700;
        margin-top: 3px
    }

    .doctorMiniCard small {
        display: block;
        margin-top: 4px;
        color: #806b71
    }
}

@media (max-width:980px) {
    .hero__slider {
        min-height: 560px !important
    }

    .slide__inner {
        height: 560px !important;
        align-items: flex-start !important;
        padding-top: 34px !important;
        padding-bottom: 0 !important
    }

    .slide__content {
        max-width: 360px;
        margin: 0 auto;
        text-align: center;
        align-items: center
    }

    .floatingCards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        position: relative;
        z-index: 5
    }

    .heroSplitWrap {
        display: block
    }

    .heroDoctorBox {
        display: block;
        max-width: 330px;
        margin: 26px auto 40px;
        position: relative
    }

    .heroDoctorBox>img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        object-position: center 60%;
        border-radius: 0;
        box-shadow: none
    }

    .doctorMiniCard {
        display: block;
        position: absolute;
        left: 42%;
        bottom: -78px;
        transform: translateX(-50%);
        width: 260px;
        padding: 20px 22px 18px;
        background: #fff;
        color: #200b11;
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
        text-align: left;
        overflow: hidden
    }

    .doctorMiniCard::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -70%;
        width: 55%;
        height: 180%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
        transform: rotate(22deg);
        animation: none;
        pointer-events: none
    }

    @keyframes cardShine {
        0% {
            left: -80%
        }

        100%,
        20% {
            left: 160%
        }
    }

    .doctorMiniCard>img {
        width: 112px;
        height: 112px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center
    }

    .doctorMiniCard strong {
        display: block;
        color: #fff;
        font-size: 16px;
        margin-bottom: 4px
    }

    .doctorMiniCard span {
        display: block;
        color: #841231;
        font-size: 16px;
        font-weight: 500
    }

    .doctorMiniCard small {
        display: block;
        color: #634b52;
        font-size: 13px;
        margin-top: 2px
    }

    .floatingCards {
        margin-top: 110px !important
    }
}

@media (min-width:981px) {
    .heroSplitWrap {
        max-width: 1540px;
        gap: 110px;
        padding: 0 70px
    }

    .heroSplitLeft .hero__slider {
        background: 0 0 !important;
        box-shadow: none !important
    }

    .heroSplitLeft .slide {
        background: 0 0 !important
    }

    .heroSplitLeft .slide::after {
        display: none !important
    }

    .hero {
        background: radial-gradient(circle at 78% 35%, rgba(255, 79, 140, .22), transparent 34%), linear-gradient(135deg, #1f030c 0, #360616 46%, #870b39 100%) !important
    }

    .heroDoctorBox {
        transform: translateX(20px)
    }

    .heroDoctorBox>img {
        max-width: 520px;
        height: 590px
    }
}

.doctorRate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px
}

.doctorRate img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    border-radius: 0 !important;
    background: 0 0 !important;
    padding: 0 !important;
    margin: 0 !important
}

.doctorRate span {
    color: #ffbf00 !important;
    font-size: 15px !important;
    letter-spacing: 1px
}

.doctorMiniCard {
    opacity: 0;
    transform: translateY(26px) scale(.96);
    transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden !important
}

.doctorMiniCard.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: 4s ease-in-out infinite doctorFloat
}

@keyframes doctorFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.actCard__image {
    border-radius: 20px;
    margin-bottom: 20px
}

.reviewText {
    max-height: 3.2em;
    transition: max-height .45s
}

.reviewMore {
    display: inline-flex;
    transition: .25s
}

.reviewMore:hover {
    opacity: .75
}

.tCard.open {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    min-height: auto !important
}

@media (max-width:680px) {
    .tNav {
        display: none !important
    }

    .tSlider {
        overflow: hidden
    }

    .tTrack {
        grid-template-columns: 1fr;
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        transition: transform .45s;
        will-change: transform
    }

    .tCard {
        min-width: 100% !important;
        flex: 0 0 100% !important
    }
}

@media (min-width:681px) {
    .tSlider {
        overflow: visible
    }

    .tTrack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
        transform: none !important
    }

    .tCard {
        min-width: 0 !important;
        flex: auto !important;
        margin: 0 !important;
        min-height: auto !important;
        background: rgba(55, 8, 23, .28);
        border: 1px solid rgba(255, 255, 255, .12);
        color: #fff
    }

    .tDots,
    .tNav {
        display: none !important
    }
}

@media (max-width:680px) {
    .tNav {
        display: none !important
    }

    .tSlider {
        overflow: hidden
    }

    .tTrack {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        transition: transform .45s;
        will-change: transform
    }

    .tCard {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        min-height: auto !important
    }
}

img {
    max-width: 100%;
    height: auto
}

.header {
    position: sticky;
    top: 44px
}

.actCard,
.btn--pulse,
.tCard {
    position: relative
}

.heroSplitWrap {
    max-width: 2120px;
    margin: 0 auto
}

.heroSplitDesktop .slide__content {
    filter: drop-shadow(0 14px 38px rgba(0, 0, 0, .24))
}

.heroProof {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .16);
    font-weight: 700;
    margin: 14px 0 16px
}

.heroStars {
    color: var(--dentalli-star);
    letter-spacing: 2px;
    text-shadow: 0 1px 10px rgba(255, 209, 74, .35)
}

.heroBadges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px
}

.heroBadges span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 800;
    color: #fff
}

.btn--pulse {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    animation: 2.4s infinite waPulse
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .42);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .55)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
    }
}

.actGrid,
.tTrack {
    align-items: stretch
}

.actCard {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 0 !important;
    text-align: left;
    background: linear-gradient(180deg, #30111a, #200b11);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
    transition: transform .28s, box-shadow .28s, border-color .28s
}

.actCard::after {
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 32%, rgba(0, 0, 0, .24));
    opacity: .75
}

.actCard:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 80, 142, .38);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .44)
}

.actCard__image {
    width: 100%;
    height: 600px;
    object-fit: contain;
    display: block;
    transition: transform .45s, filter .45s
}

.actCard:hover .actCard__image {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04)
}

.actCard .actBtn,
.actCard h3,
.actCard p {
    position: relative;
    z-index: 1;
    margin-left: 22px;
    margin-right: 22px
}

.actCard h3 {
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 25px;
    line-height: 1.08;
    color: #fff
}

.actBtn,
.actCard p {
    margin-bottom: 22px
}

.actCard p {
    max-width: none;
    color: rgba(255, 235, 241, .78);
    font-size: 15px;
    line-height: 1.45
}

.actBtn {
    margin-top: auto;
    align-self: flex-start;
    background: rgba(255, 80, 142, .1);
    border: 1px solid rgba(255, 80, 142, .4);
    color: #fff;
    padding: 12px 18px;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: .24s
}

.actCard:hover .actBtn {
    background: #25d366;
    border-color: #25d366;
    color: #06210f
}

.testimonials {
    background: radial-gradient(circle at 20% 0, rgba(255, 80, 142, .22), transparent 32%), linear-gradient(135deg, #860132, #b70345 52%, #9a0139);
    padding: 86px 0;
    overflow: hidden
}

.testimonials__title {
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.05;
    margin-bottom: 12px
}

.testimonials__title::after {
    content: "";
    display: block;
    width: 86px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85)
}

.tSlider {
    width: 100%;
    max-width: 1920px;
    margin: 26px auto 0;
    padding: 0 24px
}

.tCard {
    display: block !important;
    border-radius: 18px;
    background: rgba(55, 8, 23, .32);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
    padding: 24px !important;
    min-height: auto !important;
    transition: transform .28s, box-shadow .28s, border-color .28s
}

.tCard:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .24);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .22)
}

.tCard::before {
    content: "";
    display: none
}

.tTop {
    align-items: center;
    margin-bottom: 14px;
    padding-right: 46px
}

.tAvatar {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, .42);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18)
}

.reviewMore,
.tG {
    border: 0;
    background: 0 0;
    font-weight: 900
}

.tTop strong {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.2
}

.tStars {
    color: #ffd14a;
    font-size: 15px;
    letter-spacing: 1px;
    text-shadow: none
}

.tG {
    position: absolute;
    right: 24px;
    top: 24px;
    width: auto;
    height: auto;
    display: block;
    color: rgba(255, 255, 255, .45);
    font-family: Arial, sans-serif;
    font-size: 34px;
    opacity: 1
}

.reviewText,
.tCard p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, .94);
    opacity: 1 !important;
    margin: 0;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.tCard.open .reviewText {
    max-height: 500px;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    overflow: visible
}

.reviewMore {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    padding: 0
}

.reviewMore[hidden] {
    display: none !important
}

.tNav {
    background: rgba(255, 255, 255, .96);
    color: #5d0626;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18)
}

.tNav--prev {
    left: -18px
}

.tNav--next {
    right: -18px
}

.tDots {
    margin-top: 24px
}

.tDot {
    width: 11px;
    height: 11px;
    background: rgba(255, 255, 255, .34);
    border-color: rgba(255, 255, 255, .55)
}

.tDot.is-active {
    width: 30px;
    border-radius: 999px;
    background: #fff;
    border-color: #fff
}

.trustStrip {
    background: #1c070d;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.trustStrip__grid {
    gap: 16px
}

.trustItem {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18)
}

.blogCard:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 80, 142, .35)
}

@media (max-width:980px) {
    .header {
        top: 0
    }

    .hero {
        padding-bottom: 54px
    }

    .slide__inner {
        height: 560px;
        align-items: center
    }

    .slide__title {
        font-size: clamp(31px, 9vw, 42px)
    }

    .slide__actions {
        margin-bottom: 20px
    }

    .floatingCards {
        gap: 14px;
        margin-top: 0
    }

    .fCard {
        min-height: 92px;
        padding: 18px 20px;
        border-radius: 20px
    }

    .actGrid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .actCard {
        min-height: 0;
        border-radius: 22px
    }

    .actCard__image {
        height: 230px
    }

    .hero {
        padding-top: 0 !important
    }

    .hero__slider {
        min-height: 540px !important
    }

    .slide__inner {
        padding-top: 22px !important
    }

    .heroDoctorBox {
        overflow: visible !important
    }
}

@media (min-width:681px) {
    .tSlider {
        overflow: visible
    }

    .tTrack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
        transform: none !important
    }

    .tCard {
        min-width: 0 !important;
        flex: auto !important;
        margin: 0 !important
    }

    .tDots,
    .tNav {
        display: none !important
    }
}

@media (max-width:680px) {

    .tCard,
    .tCard.open {
        min-height: auto
    }

    .testimonials {
        padding: 64px 0
    }

    .tSlider {
        overflow: hidden;
        padding: 0 4px
    }

    .tTrack {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        transition: transform .45s;
        will-change: transform
    }

    .tCard {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        margin: 0;
        display: block !important
    }

    .tNav {
        display: none !important
    }

    .tCard::before {
        right: 18px;
        top: 18px;
        font-size: 10px
    }

    .tTop {
        padding-right: 102px;
        gap: 11px
    }

    .tAvatar {
        width: 48px;
        height: 48px
    }

    .reviewText {
        line-clamp: 3;
        -webkit-line-clamp: 3
    }

    .tCard.open .reviewText {
        line-clamp: unset;
        -webkit-line-clamp: unset
    }

    .section {
        padding: 70px 0
    }
}

@media (max-width:480px) {
    .brand__logo {
        width: 52px
    }

    .brand__name {
        font-size: 16px
    }

    .brand__sub {
        font-size: 11px
    }

    .heroBadges span,
    .heroProof {
        font-size: 12px
    }

    .container {
        padding-left: 16px;
        padding-right: 16px
    }

    .heroProof {
        gap: 6px
    }

    .btn {
        width: 100%;
        max-width: 310px
    }

    .actCard__image {
        height: 400px
    }

    .tCard {
        padding: 20px !important
    }
}

.sectionIntro {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .86);
    text-align: center;
    font-size: 17px;
    line-height: 1.55
}

@keyframes doctorGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .8
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1
    }
}

.callBar {
    display: none
}

@media (max-width:768px) {
    .callBar {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 14px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        border-radius: 22px;
        background: linear-gradient(180deg, #1c28dd, #0723be);
        color: #fff;
        text-decoration: none;
        font-weight: 300;
        font-size: 22px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 2px 10px rgba(255, 0, 0, .25);
        z-index: 9998;
        animation: .75s cubic-bezier(.22, 1, .36, 1) callBarEnter
    }

    .callBar svg {
        width: 28px;
        height: 28px;
        flex-shrink: 0
    }

    .callBar span {
        font-size: 22px;
        font-weight: 900;
        letter-spacing: .2px
    }

    body {
        padding-bottom: 88px
    }

    .waFloat {
        bottom: 100px
    }
}

@keyframes callBarEnter {
    from {
        transform: translateX(-120%);
        opacity: 0
    }

    70% {
        transform: translateX(4%)
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.btn--heroWa {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background: linear-gradient(135deg, #25d366, #12b857);
    box-shadow: 0 14px 34px rgba(37, 211, 102, .32);
    isolation: isolate
}

.btn--heroWa::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-80%) rotate(12deg);
    animation: 3.4s ease-in-out infinite waShine;
    z-index: -1
}

.btn--heroWa::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .28);
    opacity: 0;
    animation: 2.6s ease-out infinite waRing
}

.waIcon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    animation: 2.2s ease-in-out infinite waIconPop
}

.waIcon svg {
    width: 22px;
    height: 22px
}

@keyframes waShine {

    0%,
    55% {
        transform: translateX(-85%) rotate(12deg)
    }

    100%,
    75% {
        transform: translateX(85%) rotate(12deg)
    }
}

@keyframes waRing {
    0% {
        transform: scale(.96);
        opacity: .55
    }

    100% {
        transform: scale(1.18);
        opacity: 0
    }
}

@keyframes waIconPop {

    0%,
    100% {
        transform: scale(1) rotate(0)
    }

    45% {
        transform: scale(1.14) rotate(-6deg)
    }

    60% {
        transform: scale(1.05) rotate(4deg)
    }
}

.benefitOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 2, 6, .74);
  backdrop-filter: blur(10px);
}

.benefitOverlay.is-open {
  display: flex;
}

.benefitModal {
  position: relative;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(145deg, #1c070d, #271016);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  animation: benefitIn .35s ease;
}

.benefitClose {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.benefitImage{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#1c060c;
    overflow:hidden;
}

.benefitImage img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}

.benefitContent {
  padding: 42px 34px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.benefitKicker {
  color: #ffd14a;
  font-weight: 900;
  margin-bottom: 10px;
}

.benefitContent h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  margin-bottom: 14px;
}

.benefitContent p {
  color: rgba(255,255,255,.78);
  font-size: 16px;
  margin-bottom: 18px;
}

.benefitTimer {
  display: inline-flex;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,209,74,.12);
  border: 1px solid rgba(255,209,74,.32);
  color: #ffd14a;
  font-weight: 800;
  margin-bottom: 20px;
}

.benefitGift {
  cursor: pointer;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #25d366, #1fa855);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  animation: giftFloat 2.5s ease-in-out infinite;
}

.benefitGift strong {
  color: #06210f;
}

.benefitGift span {
  font-size: 36px;
}

.benefitReveal {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,209,74,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,209,74,.28);
  margin-bottom: 18px;
}

.benefitReveal small {
  display: block;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
}

.benefitReveal > strong {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 14px;
  background: #1c070d;
  color: #ffd14a;
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.benefitOptions {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: #fff;
  font-weight: 700;
}

.benefitWhatsapp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(37,211,102,.32);
  animation: benefitPulse 2.2s infinite;
}

.benefitNo {
  background: none;
  border: 0;
  color: rgba(255,255,255,.58);
  cursor: pointer;
  font-size: 13px;
}

@keyframes benefitIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes giftFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes benefitPulse {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@media (max-width: 780px) {
  .benefitModal {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .benefitImage {
    min-height: 220px;
  }

  .benefitContent {
    padding: 28px 20px;
    text-align: center;
  }

  .benefitTimer {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .slide__inner {
    padding-top: 55px !important;
  }
}