html {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  overscroll-behavior-y: none;
}

/* Mobile final pass: menu consistency + natural-height hero slides
   This intentionally sits at the end so it wins over older fixed-height mobile rules. */
@media (max-width: 1100px) {
  .pp-header {
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  .pp-header .pp-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    margin-left: auto !important;
    position: relative !important;
    z-index: 1405 !important;
  }

  .pp-header .pp-header-actions > .pp-btn {
    display: none !important;
  }

  .pp-header .pp-menu,
  .login-header .login-menu {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #004652 !important;
    box-shadow: 0 15px 34px rgba(0,70,82,.18) !important;
    position: relative !important;
    z-index: 1410 !important;
  }

  .pp-header .pp-menu i,
  .login-header .login-menu i {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 99px !important;
    background: #fff !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  .pp-header nav,
  .login-header nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: fixed !important;
    top: 98px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    gap: 5px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,70,82,.12) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 26px 70px rgba(0,70,82,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-14px,0) scale(.98) !important;
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease !important;
    z-index: 1398 !important;
  }

  .pp-header.menu-open nav,
  .login-header.menu-open nav,
  body.menu-open .pp-header nav,
  body.menu-open .login-header nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .pp-header nav a,
  .login-header nav a {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,70,82,.07) !important;
    background: linear-gradient(135deg,#fff,#f7fbfb) !important;
    color: #004652 !important;
    font: 800 13px/1.2 "Manrope", sans-serif !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 700px) {
  .hero-slider {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 94px !important;
    padding-bottom: 22px !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
  }

  .hero-slider::before {
    inset: 94px 0 0 !important;
  }

  .hero-slide {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    align-items: start !important;
    gap: 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 16px 18px !important;
    overflow: visible !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
  }

  .hero-slide.active {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero-slide:not(.active) {
    display: none !important;
    pointer-events: none !important;
  }

  .hero-copy,
  .hero-art {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 13.5vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -2.8px !important;
    margin: 16px 0 14px !important;
    max-width: 100% !important;
  }

  .hero-copy > p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 22px !important;
  }

  .hero-buttons .btn,
  .hero-buttons .text-link {
    width: 100% !important;
  }

  .free-website-art,
  .automation-art,
  .reporting-art,
  .apni-custom-slide {
    min-height: 360px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero-automation .automation-art {
    min-height: 430px !important;
  }

  .hero-identity .reporting-art {
    min-height: 440px !important;
  }

  .report-dashboard {
    width: 100% !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  .hero-command .apni-custom-slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .hero-command .apni-left h1 {
    font-size: clamp(40px, 12.8vw, 52px) !important;
    line-height: .92 !important;
    letter-spacing: -2.4px !important;
    margin: 14px 0 10px !important;
  }

  .hero-command .apni-packages {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .hero-command .apni-package {
    min-height: 92px !important;
    padding: 13px 13px 12px 66px !important;
    border-radius: 18px !important;
  }

  .hero-command .apni-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  .slider-nav {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 32px) !important;
    margin: 12px 16px 0 !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 5 !important;
  }

  .slider-nav .slider-dots {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* ABSOLUTE LAST MOBILE FIX — menu + hero slide 1/4 readability */
@media (max-width: 700px) {
  .site-header nav,
  body.menu-open .site-header nav,
  .site-header.menu-open nav {
    z-index: 50000 !important;
  }

  body.menu-open .site-header nav,
  .site-header.menu-open nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .hero-free-website .free-website-art {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .hero-free-website .free-hero-card.main-card,
  .hero-free-website .free-step-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    transform: none !important;
    border-radius: 22px !important;
  }

  .hero-free-website .free-hero-card.main-card {
    padding: 22px !important;
    order: 1 !important;
  }

  .hero-free-website .free-hero-card.main-card h3 {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -.8px !important;
    margin: 10px 0 !important;
  }

  .hero-free-website .free-hero-card.main-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .hero-free-website .free-hero-card.main-card span {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 13px 16px !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .hero-free-website .free-step-card {
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    order: 2 !important;
  }

  .hero-free-website .free-step-card i {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    background: rgba(255,103,0,.12) !important;
    color: #ff6700 !important;
    font-size: 15px !important;
  }

  .hero-free-website .free-step-card b {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .hero-free-website .free-hero-line,
  .hero-free-website .free-hero-orb {
    display: none !important;
  }

  .hero-command .apni-packages {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-command .apni-package {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    grid-template-areas:
      "num title"
      "icon badge"
      "icon small"
      "copy copy" !important;
    gap: 4px 12px !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .hero-command .apni-package span,
  .hero-command .apni-package i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .hero-command .apni-package span {
    grid-area: num !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .hero-command .apni-package i {
    grid-area: icon !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 1px solid currentColor !important;
    font-size: 18px !important;
  }

  .hero-command .apni-package h3 {
    grid-area: title !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .hero-command .apni-package b {
    grid-area: badge !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .hero-command .apni-package small {
    grid-area: small !important;
    display: inline-flex !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .hero-command .apni-package p {
    grid-area: copy !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 6px 0 0 !important;
    padding-left: 58px !important;
  }

  .hero-command .apni-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .hero-command .apni-benefits span {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }
}

/* Mobile preview correction: readable hero art instead of squeezed desktop art */
@media (max-width: 700px) {
  .site-header nav,
  .site-header.menu-open nav,
  body.menu-open .site-header nav {
    z-index: 50000 !important;
  }

  body.menu-open .site-header nav,
  .site-header.menu-open nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .hero-free-website .free-website-art {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .free-hero-card.main-card,
  .free-step-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    transform: none !important;
    border-radius: 22px !important;
  }

  .free-hero-card.main-card {
    padding: 22px !important;
    order: 1 !important;
  }

  .free-hero-card.main-card h3 {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -.8px !important;
    margin: 10px 0 !important;
  }

  .free-hero-card.main-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .free-hero-card.main-card span {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 13px 16px !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .free-step-card {
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    order: 2 !important;
  }

  .free-step-card i {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    background: rgba(255,103,0,.12) !important;
    color: #ff6700 !important;
    font-size: 15px !important;
  }

  .free-step-card b {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .free-hero-line,
  .free-hero-orb {
    display: none !important;
  }

  .hero-command .apni-packages {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-command .apni-package {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    grid-template-areas:
      "num title"
      "icon badge"
      "icon small"
      "copy copy" !important;
    gap: 4px 12px !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .hero-command .apni-package span,
  .hero-command .apni-package i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .hero-command .apni-package span {
    grid-area: num !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .hero-command .apni-package i {
    grid-area: icon !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 1px solid currentColor !important;
    font-size: 18px !important;
  }

  .hero-command .apni-package h3 {
    grid-area: title !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .hero-command .apni-package b {
    grid-area: badge !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .hero-command .apni-package small {
    grid-area: small !important;
    display: inline-flex !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .hero-command .apni-package p {
    grid-area: copy !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 6px 0 0 !important;
    padding-left: 58px !important;
  }

  .hero-command .apni-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .hero-command .apni-benefits span {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }
}

body,
main,
section,
footer,
.section {
  scroll-snap-type: none !important;
  scroll-snap-align: none !important;
}

body {
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
}

.cursor,
.cursor-dot,
.cursor-ring,
.pp-cursor-dot,
.pp-cursor-ring {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-pointer-dot,
.site-pointer-ring,
.site-pointer-ring-two {
  transition:
    width .24s cubic-bezier(.2,.8,.2,1),
    height .24s cubic-bezier(.2,.8,.2,1),
    border-color .24s ease,
    box-shadow .24s ease !important;
}

.site-pointer-ring::after,
.site-pointer-ring-two::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid rgba(255, 103, 0, .66);
  animation: sitePointerBreathe 1.8s cubic-bezier(.2,.7,.2,1) infinite !important;
}

.site-pointer-ring-two::after {
  inset: -9px;
  border-color: rgba(0, 70, 82, .55);
  animation-delay: -.9s !important;
}

@keyframes sitePointerBreathe {
  0% { transform: scale(.72); opacity: 0; }
  22% { opacity: .78; }
  72% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* Premium digital hover language shared by every page. */
:where(
  .official-logo,
  .footer-logo,
  .pp-logo,
  .pp-footer-logo,
  .login-logo,
  .header-tagline,
  .category-card,
  .service-mini-grid > a,
  .video-types article,
  .benefit-grid article,
  .contact-cards article,
  .pp-card,
  .sell-grid article,
  .proof-grid article,
  .commission-cards article
) {
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    box-shadow .42s ease,
    filter .42s ease,
    border-color .42s ease !important;
}

:where(
  .category-card,
  .service-mini-grid > a,
  .video-types article,
  .benefit-grid article,
  .contact-cards article,
  .pp-card,
  .sell-grid article,
  .proof-grid article,
  .commission-cards article
):hover {
  transform: translate3d(0,-8px,0) scale(1.015);
  border-color: rgba(255,103,0,.55) !important;
  box-shadow:
    0 24px 52px rgba(0,70,82,.13),
    0 8px 24px rgba(255,103,0,.12) !important;
}

:where(.official-logo,.footer-logo,.pp-logo,.pp-footer-logo,.login-logo):hover {
  transform: translate3d(0,-3px,0) scale(1.035);
  filter: drop-shadow(0 13px 18px rgba(0,70,82,.18))
          drop-shadow(0 5px 9px rgba(255,103,0,.16));
}

.header-tagline:hover {
  transform: translate3d(4px,-2px,0);
}

.header-tagline:hover b,
.header-tagline:hover span {
  text-shadow: 0 6px 18px rgba(255,103,0,.22);
}

:where(a,button,.btn,.pp-btn,.login-btn) {
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    color .3s ease,
    background-color .3s ease !important;
}

:where(.btn,.pp-btn,.login-btn,button):hover {
  transform: translate3d(0,-3px,0);
  box-shadow: 0 14px 30px rgba(255,103,0,.22);
}

.site-pointer-dot,
.site-pointer-ring,
.site-pointer-ring-two {
  pointer-events: none !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.site-pointer-dot,
.site-pointer-ring,
.site-pointer-ring-two {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647 !important;
  border-radius: 50%;
  pointer-events: none !important;
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  contain: layout style paint;
}

body.site-pointer-ready .site-pointer-dot,
body.site-pointer-ready .site-pointer-ring,
body.site-pointer-ready .site-pointer-ring-two {
  opacity: 1 !important;
}

.site-pointer-dot {
  width: 6px;
  height: 6px;
  background: #ff6700;
  box-shadow: 0 0 14px rgba(255, 103, 0, .72);
}

.site-pointer-ring {
  width: 30px;
  height: 30px;
  border: 2.5px solid rgba(255, 103, 0, .98);
  box-shadow:
    0 0 0 5px rgba(255, 103, 0, .10),
    0 0 20px rgba(255, 103, 0, .34);
  animation: sitePointerCoreBreathe 1.45s ease-in-out infinite !important;
}

.site-pointer-ring-two {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(0, 70, 82, .88);
  box-shadow:
    0 0 0 5px rgba(0, 70, 82, .07),
    0 0 22px rgba(0, 70, 82, .24);
  animation: sitePointerCoreBreatheTwo 1.8s ease-in-out infinite !important;
}

@keyframes sitePointerCoreBreathe {
  0%, 100% { scale: .96; }
  50% { scale: 1.08; }
}

@keyframes sitePointerCoreBreatheTwo {
  0%, 100% { scale: 1.04; }
  50% { scale: .94; }
}

body.site-pointer-hover .site-pointer-ring {
  width: 36px;
  height: 36px;
}

body.site-pointer-hover .site-pointer-ring-two {
  width: 58px;
  height: 58px;
}

body.site-pointer-over-hero .site-pointer-dot,
body.site-pointer-over-hero .site-pointer-ring,
body.site-pointer-over-hero .site-pointer-ring-two {
  transition: none !important;
}

body.site-pointer-over-hero .site-pointer-ring {
  width: 26px;
  height: 26px;
  border-width: 2px;
  animation: sitePointerCoreBreathe 1.45s ease-in-out infinite !important;
  box-shadow: 0 0 10px rgba(255,103,0,.24) !important;
}

body.site-pointer-over-hero .site-pointer-ring-two {
  width: 40px;
  height: 40px;
  border-width: 1.5px;
  animation: sitePointerCoreBreatheTwo 1.8s ease-in-out infinite !important;
  box-shadow: 0 0 12px rgba(0,70,82,.16) !important;
}

body.site-pointer-over-hero .site-pointer-ring::after,
body.site-pointer-over-hero .site-pointer-ring-two::after {
  animation: sitePointerBreathe 1.8s cubic-bezier(.2,.7,.2,1) infinite !important;
  opacity: .62 !important;
}

.hero-slider,
.hero-slide,
.hero-command,
.hero-command .hero-banner-image {
  cursor: default;
}

/* Smooth scrolling over moving ribbons: keep them compositor-only and
   non-interactive so the cursor does not fight the marquee animation. */
.footer-strip,
.brand-strip,
.client-logo-ribbon {
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.footer-strip,
.footer-strip *,
.brand-strip,
.brand-strip * {
  pointer-events: none !important;
}

.footer-strip div,
.brand-strip div,
.client-logo-track {
  will-change: transform;
  transform: translate3d(0,0,0);
}

.js-ribbon-motion {
  animation: none !important;
}

body.is-scrolling .hero-slider::after,
body.is-scrolling .hero-slide::before,
body.is-scrolling .hero-slide::after,
body.is-scrolling .free-website-section::before,
body.is-scrolling .free-website-section::after,
body.is-scrolling .hero-slider *,
body.is-scrolling .free-website-section *,
body.is-scrolling .brand-strip *,
body.is-scrolling .site-pointer-ring::after,
body.is-scrolling .site-pointer-ring-two::after {
  animation-play-state: running !important;
}

body.is-scrolling .hero-slider,
body.is-scrolling .hero-slide,
body.is-scrolling .free-website-section,
body.is-scrolling .footer-strip,
body.is-scrolling .brand-strip {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pp-reveal {
  opacity: 1 !important;
  transform: none !important;
}

.pp-hero,
.pp-section,
.partner-dashboard,
.benefit-cards,
.process-line,
.eligible-grid {
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.is-scrolling .site-pointer-ring,
body.is-scrolling .site-pointer-ring-two {
  animation-play-state: running !important;
  transition: none !important;
}

.copyright span,
.pp-footer p,
.login-footer p,
.header-tagline {
  position: relative;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    color .38s ease,
    text-shadow .38s ease,
    letter-spacing .38s ease,
    filter .38s ease !important;
}

.copyright span::after,
.pp-footer p::after,
.login-footer p::after,
.header-tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ff6700, #004652, transparent);
  opacity: 0;
  transition: right .42s cubic-bezier(.2,.8,.2,1), opacity .32s ease !important;
}

.copyright:hover span,
.copyright span:hover,
.pp-footer:hover p,
.login-footer:hover p,
.header-tagline:hover {
  transform: translate3d(4px,-3px,0) scale(1.025);
  color: #ff6700 !important;
  letter-spacing: .08em;
  text-shadow:
    0 0 16px rgba(255,103,0,.36),
    0 10px 26px rgba(0,70,82,.16) !important;
  filter: saturate(1.18);
}

.copyright:hover span::after,
.copyright span:hover::after,
.pp-footer:hover p::after,
.login-footer:hover p::after,
.header-tagline:hover::after {
  right: 0;
  opacity: 1;
}

@media (pointer: coarse) {
  .site-pointer-dot,
  .site-pointer-ring,
  .site-pointer-ring-two {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Final mobile navigation + hero fit pass */
@media (max-width: 1100px) {
  body.menu-open {
    overflow: auto !important;
  }

  .site-header {
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    margin-left: auto !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 1405 !important;
  }

  .site-header .header-actions > .btn,
  .site-header .header-actions > .round-action {
    display: none !important;
  }

  .site-header .menu-btn,
  .login-menu.pp-menu {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #004652 !important;
    box-shadow: 0 15px 34px rgba(0,70,82,.18) !important;
    position: relative !important;
    z-index: 1410 !important;
  }

  .site-header .menu-btn i,
  .login-menu.pp-menu i {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 99px !important;
    background: #fff !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  body.menu-open .site-header .menu-btn i:first-child,
  .login-header.menu-open .login-menu i:first-child,
  .pp-header.menu-open .pp-menu i:first-child {
    transform: translateY(4px) rotate(45deg) !important;
  }

  body.menu-open .site-header .menu-btn i:last-child,
  .login-header.menu-open .login-menu i:last-child,
  .pp-header.menu-open .pp-menu i:last-child {
    transform: translateY(-4px) rotate(-45deg) !important;
  }

  .site-header nav,
  .login-header nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: fixed !important;
    top: 98px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    gap: 5px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,70,82,.12) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 26px 70px rgba(0,70,82,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-14px,0) scale(.98) !important;
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease !important;
    z-index: 1398 !important;
  }

  body.menu-open .site-header nav,
  .login-header.menu-open nav,
  body.menu-open .login-header nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .site-header nav a,
  .login-header nav a {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,70,82,.07) !important;
    background: linear-gradient(135deg,#fff,#f7fbfb) !important;
    color: #004652 !important;
    font: 800 13px/1.2 "Manrope", sans-serif !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  .site-header nav a:hover,
  .login-header nav a:hover {
    color: #ff6700 !important;
    transform: translate3d(4px,0,0) !important;
    box-shadow: inset 4px 0 0 #ff6700, 0 10px 22px rgba(255,103,0,.09) !important;
  }
}

@media (max-width: 700px) {
  .hero-slider {
    height: 940px !important;
    min-height: 940px !important;
    padding-top: 94px !important;
    margin-bottom: 36px !important;
    overflow: hidden !important;
  }

  .hero-slide {
    inset: 94px 0 64px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(260px, 1fr) !important;
    align-content: start !important;
    align-items: start !important;
    gap: 18px !important;
    padding: 26px 16px 96px !important;
    overflow: hidden !important;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 15vw, 64px) !important;
    line-height: .96 !important;
    letter-spacing: -3.2px !important;
    margin: 18px 0 !important;
  }

  .hero-copy > p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 22px !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
    min-height: 56px !important;
  }

  .hero-art,
  .free-website-art,
  .automation-art,
  .reporting-art,
  .apni-custom-slide,
  .apni-packages {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-free-website .free-website-art {
    min-height: 360px !important;
    transform: none !important;
  }

  .free-hero-card.main-card {
    width: min(100%, 330px) !important;
    left: 50% !important;
    top: 28px !important;
    transform: translateX(-50%) !important;
    padding: 22px !important;
  }

  .free-step-card {
    width: 150px !important;
    min-height: 100px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .fs-one { left: 0 !important; top: 10px !important; }
  .fs-two { right: 0 !important; top: 132px !important; }
  .fs-three { left: 14px !important; bottom: 8px !important; }

  .hero-automation .automation-art {
    min-height: 345px !important;
    transform: scale(.84) translateY(-18px) !important;
    transform-origin: top center !important;
  }

  .hero-identity .reporting-art {
    min-height: 380px !important;
  }

  .report-dashboard {
    transform: scale(.74) translate(-18%, -10%) !important;
    transform-origin: top left !important;
    width: 135% !important;
  }

  .hero-command {
    padding: 26px 16px 96px !important;
  }

  .apni-custom-slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  .apni-left h1 {
    font-size: clamp(50px, 16vw, 72px) !important;
    line-height: .9 !important;
    letter-spacing: -3.4px !important;
  }

  .apni-left h3,
  .apni-left p {
    max-width: 100% !important;
  }

  .apni-packages {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .apni-package {
    min-height: 104px !important;
    padding: 16px 16px 14px 78px !important;
    border-radius: 22px !important;
    position: relative !important;
  }

  .apni-package span {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
  }

  .apni-package i {
    position: absolute !important;
    left: 18px !important;
    bottom: 16px !important;
    margin: 0 !important;
  }

  .apni-benefits {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .slider-nav {
    left: 16px !important;
    right: 16px !important;
    bottom: 20px !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .slider-dots {
    gap: 2px !important;
  }
}

@media (max-width: 700px) {
  .hero-slider {
    height: 1040px !important;
    min-height: 1040px !important;
  }

  /* Compact fourth hero slide so the complete Apni Pehchaan banner fits inside mobile */
  .hero-command .apni-custom-slide {
    gap: 12px !important;
  }

  .hero-command .apni-left {
    padding-left: 0 !important;
  }

  .hero-command .apni-left .eyebrow {
    font-size: 8px !important;
    letter-spacing: 1.8px !important;
  }

  .hero-command .apni-left h1 {
    font-size: clamp(42px, 13vw, 52px) !important;
    line-height: .9 !important;
    letter-spacing: -2.8px !important;
    margin: 13px 0 9px !important;
  }

  .hero-command .apni-left h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }

  .hero-command .apni-left p {
    font-size: 13px !important;
    line-height: 1.42 !important;
    margin: 8px 0 !important;
  }

  .hero-command .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .hero-command .hero-buttons .btn {
    min-height: 48px !important;
    padding: 13px 16px !important;
  }

  .hero-command .apni-packages {
    gap: 8px !important;
  }

  .hero-command .apni-package {
    min-height: 84px !important;
    height: auto !important;
    padding: 12px 12px 10px 62px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .hero-command .apni-package span {
    left: 12px !important;
    top: 12px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }

  .hero-command .apni-package i {
    left: 14px !important;
    bottom: 12px !important;
    font-size: 18px !important;
  }

  .hero-command .apni-package h3 {
    font-size: 16px !important;
    line-height: 1.08 !important;
    margin: 0 0 2px !important;
    letter-spacing: -.2px !important;
  }

  .hero-command .apni-package b,
  .hero-command .apni-package small,
  .hero-command .apni-package p {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .hero-command .apni-package p {
    margin-top: 4px !important;
  }

  .hero-command .apni-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    margin-top: 0 !important;
  }

  .hero-command .apni-benefits span {
    min-height: 34px !important;
    padding: 9px 8px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
}

/* TRUE FINAL mobile pass: this must stay last. */
@media (max-width: 1100px) {
  .pp-header {
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  .pp-header .pp-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    margin-left: auto !important;
    position: relative !important;
    z-index: 1405 !important;
  }

  .pp-header .pp-header-actions > .pp-btn {
    display: none !important;
  }

  .pp-header .pp-menu,
  .login-header .login-menu {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #004652 !important;
    box-shadow: 0 15px 34px rgba(0,70,82,.18) !important;
    position: relative !important;
    z-index: 1410 !important;
  }

  .pp-header .pp-menu i,
  .login-header .login-menu i {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 99px !important;
    background: #fff !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  .pp-header nav,
  .login-header nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: fixed !important;
    top: 98px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    gap: 5px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,70,82,.12) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 26px 70px rgba(0,70,82,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-14px,0) scale(.98) !important;
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease !important;
    z-index: 1398 !important;
  }

  .pp-header.menu-open nav,
  .login-header.menu-open nav,
  body.menu-open .pp-header nav,
  body.menu-open .login-header nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .pp-header nav a,
  .login-header nav a {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,70,82,.07) !important;
    background: linear-gradient(135deg,#fff,#f7fbfb) !important;
    color: #004652 !important;
    font: 800 13px/1.2 "Manrope", sans-serif !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 700px) {
  .hero-slider {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 94px !important;
    padding-bottom: 22px !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
  }

  .hero-slider::before {
    inset: 94px 0 0 !important;
  }

  .hero-slide {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    align-items: start !important;
    gap: 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 16px 18px !important;
    overflow: visible !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
  }

  .hero-slide.active {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero-slide:not(.active) {
    display: none !important;
    pointer-events: none !important;
  }

  .hero-copy,
  .hero-art {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 13.5vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -2.8px !important;
    margin: 16px 0 14px !important;
    max-width: 100% !important;
  }

  .hero-copy > p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 22px !important;
  }

  .hero-buttons .btn,
  .hero-buttons .text-link {
    width: 100% !important;
  }

  .free-website-art,
  .automation-art,
  .reporting-art,
  .apni-custom-slide {
    min-height: 360px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero-automation .automation-art {
    min-height: 430px !important;
  }

  .hero-identity .reporting-art {
    min-height: 440px !important;
  }

  .report-dashboard {
    width: 100% !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  .hero-command .apni-custom-slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .hero-command .apni-left h1 {
    font-size: clamp(40px, 12.8vw, 52px) !important;
    line-height: .92 !important;
    letter-spacing: -2.4px !important;
    margin: 14px 0 10px !important;
  }

  .hero-command .apni-packages {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .hero-command .apni-package {
    min-height: 92px !important;
    padding: 13px 13px 12px 66px !important;
    border-radius: 18px !important;
  }

  .hero-command .apni-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  .slider-nav {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 32px) !important;
    margin: 12px 16px 0 !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 5 !important;
  }

  .slider-nav .slider-dots {
    flex: 1 !important;
    justify-content: center !important;
  }
}