@media (max-width: 820px) {
  html.facebook-mobile,
  html.facebook-mobile body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html.facebook-mobile body.home-mode {
    overflow-y: auto !important;
  }

  html.facebook-mobile body.home-mode .page {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: 72px 14px 26px !important;
  }

  html.facebook-mobile body.home-mode .hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center !important;
    transform: none !important;
  }

  html.facebook-mobile body.home-mode .hero-kicker {
    position: static !important;
    width: min(92%, 390px) !important;
    max-width: 390px !important;
    margin: 16px auto 18px !important;
    transform: none !important;
    font-size: clamp(13px, 3.55vw, 16px) !important;
    line-height: 1.42 !important;
    letter-spacing: 1px !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.home-mode .hero h1 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    font-size: clamp(38px, 12.9vw, 56px) !important;
    line-height: .9 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.home-mode .hero h1 span {
    display: block !important;
    max-width: 100% !important;
  }

  html.facebook-mobile body.home-mode .hero > p:not(.hero-kicker) {
    position: static !important;
    width: min(92%, 390px) !important;
    max-width: 390px !important;
    margin: 24px auto 0 !important;
    transform: none !important;
    font-size: clamp(17px, 4.35vw, 20px) !important;
    line-height: 1.44 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.home-mode .content {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    min-height: 0 !important;
    margin: 28px auto 0 !important;
    transform: none !important;
    align-items: start !important;
  }

  html.facebook-mobile body.home-mode .skill-card,
  html.facebook-mobile body.home-mode .skill-card:nth-child(2),
  html.facebook-mobile body.home-mode .skill-card:nth-child(3),
  html.facebook-mobile body.home-mode[data-home-step="1"] .skill-card,
  html.facebook-mobile body.home-mode[data-home-step="2"] .skill-card {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 20px 18px !important;
    border-radius: 23px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    row-gap: 10px !important;
    align-items: center !important;
    align-content: center !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  html.facebook-mobile body.home-mode .skill-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    font-size: 30px !important;
  }

  html.facebook-mobile body.home-mode .skill-card h2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(23px, 6.4vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: .2px !important;
    color: #fff !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.home-mode .skill-card p {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    font-size: clamp(15px, 3.95vw, 17px) !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
    color: var(--soft) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.facebook-mobile body.home-mode .service-note {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    margin-top: 1px !important;
    font-size: clamp(14px, 3.55vw, 16px) !important;
    line-height: 1.24 !important;
    overflow-wrap: anywhere !important;
  }

  html.facebook-mobile body.home-mode .home-end-actions {
    display: none !important;
  }

  html.facebook-mobile .footer,
  html.facebook-mobile body.home-mode .footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 28px) !important;
    max-width: 390px !important;
    margin: 22px auto 26px !important;
    padding: 13px 14px !important;
    border-radius: 19px !important;
    font-size: clamp(12px, 3.25vw, 14px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.facebook-mobile .whatsapp-btn {
    right: 14px !important;
    bottom: 18px !important;
    width: 54px !important;
    height: 54px !important;
  }

  html.facebook-mobile .whatsapp-btn img {
    width: 54px !important;
    height: 54px !important;
  }

  html.facebook-mobile .menu-btn {
    top: 16px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }

  html.facebook-mobile .moon {
    width: 98px !important;
    height: 98px !important;
    right: -28px !important;
    top: 7.2% !important;
  }

  html.facebook-mobile .crater1 {
    width: 18px !important;
    height: 18px !important;
    top: 28px !important;
    left: 29px !important;
  }

  html.facebook-mobile .crater2 {
    width: 12px !important;
    height: 12px !important;
    top: 56px !important;
    left: 20px !important;
  }

  html.facebook-mobile .crater3 {
    width: 24px !important;
    height: 24px !important;
    right: 18px !important;
    top: 38px !important;
  }

  html.facebook-mobile .crater4 {
    width: 14px !important;
    height: 14px !important;
    right: 34px !important;
    bottom: 18px !important;
  }

  html.facebook-mobile .planet-ring {
    width: 145px !important;
    height: 145px !important;
    top: -36px !important;
    left: -42px !important;
  }

  html.facebook-mobile .planet-ring .ring,
  html.facebook-mobile .planet-ring .ring-front {
    width: 230px !important;
    height: 74px !important;
    left: -42px !important;
    top: 37px !important;
    border-width: 8px !important;
  }

  html.facebook-mobile .giant-planet {
    width: 170px !important;
    height: 170px !important;
    right: -68px !important;
    bottom: -62px !important;
  }

  html.facebook-mobile .broken-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    mix-blend-mode: screen !important;
  }
}

@media (max-width: 820px) and (max-height: 760px) {
  html.facebook-mobile body.home-mode .page {
    padding-top: 54px !important;
  }

  html.facebook-mobile body.home-mode .hero-kicker {
    margin-top: 10px !important;
    margin-bottom: 13px !important;
    font-size: clamp(12px, 3.25vw, 14px) !important;
  }

  html.facebook-mobile body.home-mode .hero h1 {
    font-size: clamp(36px, 12.2vw, 52px) !important;
  }

  html.facebook-mobile body.home-mode .hero > p:not(.hero-kicker) {
    margin-top: 18px !important;
    font-size: clamp(15px, 3.9vw, 17px) !important;
    line-height: 1.38 !important;
  }

  html.facebook-mobile body.home-mode .content {
    margin-top: 22px !important;
    max-width: 376px !important;
  }

  html.facebook-mobile body.home-mode .skill-card {
    padding: 17px 16px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  html.facebook-mobile body.home-mode .skill-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 28px !important;
  }

  html.facebook-mobile body.home-mode .skill-card h2 {
    font-size: clamp(21px, 5.9vw, 28px) !important;
  }

  html.facebook-mobile body.home-mode .skill-card p {
    font-size: clamp(14px, 3.75vw, 16px) !important;
  }
}

@media (max-width: 820px) {
  html.facebook-mobile body.home-mode {
    overflow: hidden !important;
  }

  html.facebook-mobile body.home-mode .page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    padding-bottom: 78px !important;
  }

  html.facebook-mobile body.home-mode[data-home-step="2"] {
    overflow-y: auto !important;
  }

  html.facebook-mobile body.home-mode[data-home-step="2"] .page {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding-bottom: 126px !important;
  }

  html.facebook-mobile body.section-mode {
    overflow-y: auto !important;
  }

  html.facebook-mobile body.section-mode .page {
    width: 100% !important;
    max-width: none !important;
    padding: 72px 14px 118px !important;
    overflow: visible !important;
  }

  html.facebook-mobile body.section-mode .hero {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center !important;
    transform: none !important;
  }

  html.facebook-mobile body.section-mode .hero-kicker {
    width: min(92%, 390px) !important;
    max-width: 390px !important;
    margin: 14px auto 15px !important;
    font-size: clamp(12px, 3.35vw, 15px) !important;
    line-height: 1.38 !important;
    letter-spacing: .9px !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.section-mode .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(34px, 11.4vw, 50px) !important;
    line-height: .9 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
    text-wrap: balance;
    transform: none !important;
  }

  html.facebook-mobile body.section-mode .hero h1 span {
    display: block !important;
    max-width: 100% !important;
  }

  html.facebook-mobile body.section-mode .hero > p:not(.hero-kicker) {
    width: min(92%, 390px) !important;
    max-width: 390px !important;
    margin: 22px auto 0 !important;
    font-size: clamp(16px, 4vw, 18px) !important;
    line-height: 1.44 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.section-mode .content {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 28px auto 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html.facebook-mobile body.section-mode .service-section,
  html.facebook-mobile body.section-mode .proof-section,
  html.facebook-mobile body.section-mode .privacy-section {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 24px auto 0 !important;
    padding: 24px 18px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    scroll-margin-top: 84px !important;
  }

  html.facebook-mobile body.section-mode .content > .service-section {
    width: min(100%, 390px) !important;
  }

  html.facebook-mobile body.section-mode .service-heading {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  html.facebook-mobile body.section-mode .service-heading-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    font-size: 29px !important;
  }

  html.facebook-mobile body.section-mode .service-heading h2,
  html.facebook-mobile body.section-mode .service-section h2,
  html.facebook-mobile body.section-mode .proof-section h2,
  html.facebook-mobile body.section-mode .privacy-section h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    font-size: clamp(22px, 5.55vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    text-wrap: balance;
  }

  html.facebook-mobile body.section-mode #advergame-title {
    font-size: clamp(19px, 4.9vw, 24px) !important;
    line-height: 1.08 !important;
  }

  html.facebook-mobile body.section-mode #web-design-title,
  html.facebook-mobile body.section-mode #social-media-title {
    font-size: clamp(24px, 6.1vw, 30px) !important;
    line-height: 1.05 !important;
  }

  html.facebook-mobile body.section-mode #advergame-title span {
    display: block !important;
    color: var(--gold) !important;
  }

  html.facebook-mobile body.section-mode .service-section p,
  html.facebook-mobile body.section-mode .proof-section p,
  html.facebook-mobile body.section-mode .privacy-section p {
    max-width: 100% !important;
    font-size: clamp(15px, 3.95vw, 17px) !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  html.facebook-mobile body.section-mode .service-grid,
  html.facebook-mobile body.section-mode .proof-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }

  html.facebook-mobile body.section-mode .service-box,
  html.facebook-mobile body.section-mode .proof-box {
    padding: 17px !important;
    border-radius: 16px !important;
  }

  html.facebook-mobile body.section-mode .service-box h3,
  html.facebook-mobile body.section-mode .proof-box h3 {
    font-size: clamp(18px, 4.8vw, 21px) !important;
    line-height: 1.15 !important;
  }

  html.facebook-mobile body.section-mode .section-actions,
  html.facebook-mobile body.section-mode .cta-row {
    margin-top: 24px !important;
    gap: 12px !important;
  }

  html.facebook-mobile .broken-screen {
    z-index: 9999 !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 13px rgba(255,255,255,.72)) contrast(1.35) brightness(1.18) !important;
  }

  html.facebook-mobile .broken-screen::before {
    opacity: .58 !important;
  }

  html.facebook-mobile .broken-screen::after {
    opacity: .44 !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(1) {
    --cw: min(142vw, 1180px) !important;
    --ch: min(118vh, 1040px) !important;
    --o: .98 !important;
    --m: 1 !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(2) {
    --cw: min(148vw, 1240px) !important;
    --ch: min(122vh, 1080px) !important;
    --o: .95 !important;
    --m: .94 !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(3) {
    --cw: min(154vw, 1300px) !important;
    --ch: min(126vh, 1120px) !important;
    --o: .9 !important;
    --m: .88 !important;
  }
}
@media (max-width: 820px) {
  html.facebook-mobile .footer,
  html.facebook-mobile body.home-mode .footer {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(var(--footer-nudge,0px)) !important;
  }

  html.facebook-mobile .footer.footer-hidden {
    transform: translateX(var(--footer-nudge,0px)) translateY(calc(100% + 34px)) !important;
  }

  html.facebook-mobile body.page-glitch .footer {
    animation: footerGlitch 230ms steps(2,end) !important;
  }

  html.facebook-mobile .broken-screen {
    opacity: 1 !important;
    filter: drop-shadow(0 0 16px rgba(255,255,255,.78)) contrast(1.48) brightness(1.18) !important;
  }

  html.facebook-mobile .broken-screen::before {
    opacity: .72 !important;
    background: radial-gradient(circle at var(--impact-x,48%) var(--impact-y,42%),rgba(255,255,255,.9) 0 .55%,rgba(125,211,252,.6) .78% 1.18%,transparent 4.9%),repeating-conic-gradient(from 14deg at var(--impact-x,48%) var(--impact-y,42%),transparent 0 9deg,rgba(255,255,255,.42) 9.25deg 9.9deg,transparent 10.2deg 23deg),radial-gradient(circle at 18% 30%,rgba(255,255,255,.38) 0 1.5%,transparent 9.5%),radial-gradient(circle at 76% 26%,rgba(255,255,255,.3) 0 1.4%,transparent 9%),radial-gradient(circle at 52% 72%,rgba(125,211,252,.28) 0 1.3%,transparent 8.5%) !important;
  }

  html.facebook-mobile .broken-screen::after {
    opacity: .54 !important;
    background: linear-gradient(112deg,transparent 0 49.45%,rgba(255,255,255,.68) 49.85% 50.08%,transparent 50.44% 100%),linear-gradient(36deg,transparent 0 49.48%,rgba(125,211,252,.48) 49.85% 50.08%,transparent 50.42% 100%),linear-gradient(156deg,transparent 0 49.52%,rgba(255,255,255,.38) 49.88% 50.05%,transparent 50.36% 100%) !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(1) {
    --cx: -24% !important;
    --cy: -10% !important;
    --cw: min(154vw,1320px) !important;
    --ch: min(126vh,1120px) !important;
    --o: .98 !important;
    --m: 1 !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(2) {
    --cx: 32% !important;
    --cy: -28% !important;
    --cw: min(150vw,1280px) !important;
    --ch: min(124vh,1080px) !important;
    --o: .95 !important;
    --m: .96 !important;
  }

  html.facebook-mobile .broken-screen i:nth-of-type(3) {
    --cx: 0% !important;
    --cy: 34% !important;
    --cw: min(158vw,1360px) !important;
    --ch: min(128vh,1160px) !important;
    --o: .92 !important;
    --m: .92 !important;
  }
}