/* ==========================================================================
   pp-polish.css — visual refinement layer
   Loaded LAST (after pp-theme.css + pp-rtl.css) on the landing page.
   Focus: contrast, depth, motion and rhythm — without changing the
   PerfectPanel structure or the purple identity.
   Palette: #151b26 page · #171f2e card · #aa56ff / #8756ff accent
   ========================================================================== */

:root {
  --pp-glow-1: rgba(170, 86, 255, .38);
  --pp-glow-2: rgba(135, 86, 255, .28);
  --pp-hair: rgba(255, 255, 255, .06);
  --pp-text-soft: #9aa3b5;
}

/* ======================================================================
   1. TYPOGRAPHY & CONTRAST
   ====================================================================== */

/* --- hero title: bright, animated, readable ------------------------- */
.nk-section-title {
  background: linear-gradient(100deg, #ffffff 0%, #ece2ff 30%, #cba6ff 62%, #aa56ff 100%) !important;
  background-size: 240% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(30px, 3.5vw, 54px) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: -.6px !important;
  padding-bottom: 10px;
  animation: ppTitleShift 10s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 30px rgba(170, 86, 255, .28));
}
@keyframes ppTitleShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* --- section titles: stop the purple blur washing them out ---------- */
.section-title_title {
  background: linear-gradient(180deg, #ffffff 0%, #e6d9ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(23px, 2.5vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5));
}
.section-title_title span {
  -webkit-text-fill-color: #bb8dff !important;
  position: relative;
  z-index: 2;
}
/* the glow behind the highlighted word: softer + tighter */
.section-title_title span::before {
  filter: blur(34px) !important;
  opacity: .5 !important;
  height: 100% !important;
}
.section-title_text {
  color: var(--pp-text-soft) !important;
  font-size: 15.5px !important;
  line-height: 2 !important;
  max-width: 720px;
}
.section-title__content { gap: 18px !important; }

/* --- the little pill above each section ---------------------------- */
.label.label-home {
  border: 1px solid rgba(170, 86, 255, .28) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
}
.label.label-home .label-text {
  color: #d8c8ff !important;
  font-weight: 600 !important;
}
.label.label-home .label-icon {
  background: linear-gradient(135deg, rgba(170, 86, 255, .3), rgba(135, 86, 255, .18)) !important;
  color: #d9b8ff !important;
}

/* ======================================================================
   2. HERO DEPTH  (kills the banding in the background image)
   ====================================================================== */
.homeHeader { isolation: isolate; }
.homeHeader .homeBg img {
  filter: saturate(1.05) brightness(.78);
  transform: scale(1.03);
}
.homeHeader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1000px 560px at 50% 0%, rgba(170, 86, 255, .26), transparent 68%),
    radial-gradient(760px 460px at 8% 88%, rgba(135, 86, 255, .18), transparent 70%),
    radial-gradient(700px 420px at 95% 20%, rgba(86, 116, 255, .14), transparent 72%),
    linear-gradient(180deg, rgba(21, 27, 38, .10) 0%, rgba(21, 27, 38, .55) 58%, #151b26 100%);
}
.homeHeader .container { position: relative; z-index: 3; }
.homeHeader .hhSide { padding: 84px 0 60px !important; }

/* hero pill (#1 badge) */
.home-rates-item {
  border: 1px solid rgba(170, 86, 255, .35) !important;
  box-shadow: 0 12px 30px rgba(170, 86, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
}
.home-rates-item .home-rates-icon { color: #d9b8ff !important; }

/* hero buttons: a little more presence */
.nk-btn-group .header-btn {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.nk-btn-group .header-btn.h-btn-blue {
  background: linear-gradient(135deg, #5674ff, #7d5cff) !important;
}
.nk-btn-group .header-btn:hover { transform: translateY(-2px); }

/* ======================================================================
   3. SURFACES & DEPTH
   ====================================================================== */
.card,
.step-card,
.diff-item,
.product-article,
.login-pm,
.recomm-wrapper .item,
.tab-content-area .tc-content {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .42),
    inset 0 1px 0 var(--pp-hair) !important;
}
.card,
.diff-item,
.product-article {
  border-color: rgba(255, 255, 255, .075) !important;
}

/* login card gets a purple rim so it reads as the focal point */
.home-login .card {
  border: 1px solid rgba(170, 86, 255, .2) !important;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(170, 86, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
.home-login .card .form-control {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.home-login .card .form-control:hover { border-color: rgba(170, 86, 255, .45) !important; }

/* stats strip */
.hfs-content .hfs-item {
  position: relative;
  padding-inline-start: 18px;
  margin-bottom: 15px;
}
.hfs-content .hfs-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #aa56ff, rgba(170, 86, 255, 0));
}
.hfs-content .hfs-item .hfs-count {
  font-size: clamp(22px, 2.3vw, 30px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  text-shadow: 0 6px 24px rgba(170, 86, 255, .35);
}
.hfs-content .hfs-item .hfs-title {
  color: #b08cff !important;
  font-weight: 600 !important;
}

/* recommended-services panel */
.recomm-container {
  box-shadow: 0 30px 70px rgba(170, 86, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
.recomm-wrapper .item { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.recomm-wrapper .item:hover { transform: translateY(-2px); opacity: 1; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }

/* comparison columns */
.diff-item.diff-our {
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(170, 86, 255, .18) !important;
}

/* tabs */
.tab-content-area .tc-menu .nav-link {
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.tab-content-area .tc-menu .nav-link:hover { transform: translateX(-3px); }
.tab-content-area .tc-menu .nav-link.active {
  box-shadow: 0 12px 28px rgba(170, 86, 255, .35);
}

/* growth panel */
#home-growth .growth-bg {
  box-shadow: 0 28px 64px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  border: 1px solid rgba(170, 86, 255, .16);
}

/* ======================================================================
   4. FEATURES CAROUSEL  (soft edge fade so cut cards look intentional)
   ====================================================================== */
@media (min-width: 1200px) {
  .step-box-container {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}
.step-box-container .step-box {
  box-shadow: 0 20px 46px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step-box-container .step-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
.step-box-container .btn-step {
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 24px rgba(170, 86, 255, .35);
}
.step-box-container .btn-step:not(:disabled):hover {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(170, 86, 255, .5);
}

/* ======================================================================
   5. MOTION  (buttons, scroll progress, focus)
   ====================================================================== */
.btn-primary,
.btn-order,
.header-btn,
.google-login-wrap {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-order::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 38%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-order:hover::after { inset-inline-start: 120%; }

/* scroll progress bar */
#ppProgress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: transparent;
}
#ppProgress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8756ff, #aa56ff, #e0c6ff);
  box-shadow: 0 0 14px rgba(170, 86, 255, .75);
  transition: width .1s linear;
}

/* accessible focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #aa56ff;
  outline-offset: 2px;
  border-radius: 8px;
}

/* smooth reveal already exists; make it a touch softer */
.homeSection,
#home-diff { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }

/* ======================================================================
   6. FOOTER & SMALL DETAILS
   ====================================================================== */
.footer.active { border-top: 1px solid rgba(255, 255, 255, .07); }
.footer-card {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.footer-card:hover { border-color: rgba(170, 86, 255, .35); }
.footer__logo .logo-text,
.footer__logo img { filter: drop-shadow(0 6px 18px rgba(170, 86, 255, .25)); }

.country-item,
.login-pm { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.country-item:hover {
  transform: translateY(-4px);
  border-color: rgba(170, 86, 255, .4) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}
.login-pm:hover { border-color: rgba(170, 86, 255, .4) !important; transform: translateY(-3px); }

/* scrollbar rules removed - scrollbar hidden cleanly across theme */
html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ======================================================================
   7. RESPONSIVE TRIM
   ====================================================================== */
@media (max-width: 991.98px) {
  .nk-section-title { font-size: 30px !important; }
  .section-title_title { font-size: 24px !important; }
  .homeHeader .hhSide { padding: 48px 0 36px !important; }
  .section-title_text { font-size: 14.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nk-section-title { animation: none !important; }
  .btn-primary::after, .btn-order::after { display: none !important; }
  .homeSection, #home-diff { transition: none !important; }
}

/* ======================================================================
   8. FIXES FROM VISUAL REVIEW
   ====================================================================== */

/* the hero background must not bleed past its own box */
.homeHeader { overflow: hidden; }
.homeHeader .homeBg img { transform: none; }

/* brighter, cleaner section titles (the drop-shadow was muting them) */
.section-title_title {
  background: linear-gradient(180deg, #ffffff 0%, #f0e8ff 60%, #dcc9ff 100%) !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55)) !important;
}
.section-title_title span { -webkit-text-fill-color: #c79cff !important; }

/* hero: soften the transition into the login section */
.homeHeader::after {
  background:
    radial-gradient(1000px 560px at 50% 0%, rgba(170, 86, 255, .26), transparent 68%),
    radial-gradient(760px 460px at 8% 88%, rgba(135, 86, 255, .18), transparent 70%),
    radial-gradient(700px 420px at 95% 20%, rgba(86, 116, 255, .14), transparent 72%),
    linear-gradient(180deg, rgba(21, 27, 38, .08) 0%, rgba(21, 27, 38, .45) 52%, rgba(21, 27, 38, .92) 84%, #151b26 100%);
}

/* login card: tighter, better-proportioned fields */
@media (min-width: 992px) {
  .home-login .card .form-control { height: 54px; }
  .home-login .card .card-body { padding: 26px 28px; }
}

/* ======================================================================
   9. SECTION TITLES — solid colours
   Chromium sometimes paints `background-clip:text` as a filled block when a
   child creates a stacking context (the blurred `::before` does). Solid
   colours are crisper, always readable, and artefact-free.
   ====================================================================== */
.section-title_title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  filter: none !important;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .6);
}
.section-title_title span {
  color: #c79cff !important;
  -webkit-text-fill-color: #c79cff !important;
  text-shadow: 0 0 30px rgba(170, 86, 255, .5);
}
.section-title_title span::before { display: none !important; }

/* the same treatment for the SEO article headings */
.product-article-content h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* ======================================================================
   10. GLASSMORPHISM
   Frosted panels: translucent fill + backdrop blur + a 1px inner
   highlight on the top edge (that highlight is what sells "glass").
   `backdrop-filter` is progressive — the fallback colour keeps text
   readable on engines that ignore it.
   ====================================================================== */

:root {
  --pp-glass-bg:      rgba(23, 31, 46, .55);
  --pp-glass-bg-soft: rgba(23, 31, 46, .38);
  --pp-glass-brd:     rgba(255, 255, 255, .10);
  --pp-glass-brd-hi:  rgba(170, 86, 255, .30);
  --pp-glass-blur:    blur(18px) saturate(150%);
  --pp-glass-shadow:
    0 20px 50px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
}

/* --- sticky nav becomes a frosted bar ------------------------------- */
.header {
  background: rgba(17, 22, 32, .62) !important;
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border-bottom: 1px solid var(--pp-glass-brd);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}
.header.is-sticky,
.header.sticky {
  background: rgba(17, 22, 32, .78) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.header .mh-menu .menu > li > a {
  border-radius: 10px;
  padding: 8px 12px;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.header .mh-menu .menu > li > a:hover {
  background: rgba(170, 86, 255, .14);
  transform: translateY(-1px);
}

/* --- hero badge pill ------------------------------------------------ */
.home-rates-item {
  background: var(--pp-glass-bg) !important;
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-brd-hi) !important;
  box-shadow:
    0 12px 32px rgba(170, 86, 255, .20),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* --- hero secondary button: glass, primary stays solid -------------- */
.nk-btn-group .header-btn {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .06) !important;
}
.nk-btn-group .header-btn.h-btn-blue {
  background: linear-gradient(135deg, #7d5cff, #aa56ff) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

/* --- the big login card: frosted, purple-rimmed focal point --------- */
.home-login .card {
  background: var(--pp-glass-bg) !important;
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-brd-hi) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(170, 86, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.home-login .card .form-control {
  background: rgba(17, 22, 32, .55) !important;
  border: 1px solid var(--pp-glass-brd) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-login .card .form-control:focus {
  background: rgba(17, 22, 32, .72) !important;
  border-color: rgba(170, 86, 255, .6) !important;
  box-shadow: 0 0 0 4px rgba(170, 86, 255, .16) !important;
}

/* --- content cards -------------------------------------------------- */
.card,
.step-card,
.diff-item,
.product-article,
.login-pm,
.recomm-wrapper .item {
  background: var(--pp-glass-bg-soft) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--pp-glass-brd) !important;
}
.step-box-container .step-box,
#home-growth .growth-bg {
  background: var(--pp-glass-bg) !important;
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-brd-hi) !important;
}

/* ======================================================================
   11. AMBIENT AURORA  (the "life" in the hero)
   Four blurred orbs drift on long, offset loops so the background never
   looks static, plus a faint grid for texture. Everything is
   pointer-events:none and sits below the content (z-index 2 vs 3).
   ====================================================================== */

.pp-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.pp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.pp-orb-1 {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(170, 86, 255, .85), rgba(170, 86, 255, 0) 70%);
  animation: ppOrbDrift1 22s ease-in-out infinite;
}
.pp-orb-2 {
  width: 460px; height: 460px;
  top: 8%; right: -140px;
  background: radial-gradient(circle at 60% 40%, rgba(86, 116, 255, .75), rgba(86, 116, 255, 0) 70%);
  animation: ppOrbDrift2 27s ease-in-out infinite;
}
.pp-orb-3 {
  width: 400px; height: 400px;
  bottom: -160px; left: 32%;
  background: radial-gradient(circle at 50% 50%, rgba(135, 86, 255, .7), rgba(135, 86, 255, 0) 70%);
  animation: ppOrbDrift3 31s ease-in-out infinite;
}
.pp-orb-4 {
  width: 300px; height: 300px;
  top: 42%; left: 12%;
  background: radial-gradient(circle at 50% 50%, rgba(224, 198, 255, .55), rgba(224, 198, 255, 0) 70%);
  animation: ppOrbDrift2 19s ease-in-out infinite reverse;
}

/* faint technical grid, faded out at the edges */
.pp-fx-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(170, 86, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 86, 255, .35) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
}

@keyframes ppOrbDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(90px, 60px, 0) scale(1.12); }
  66%  { transform: translate3d(40px, 130px, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ppOrbDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(-110px, 80px, 0) scale(1.15); }
  75%  { transform: translate3d(-50px, -60px, 0) scale(.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ppOrbDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(120px, -70px, 0) scale(1.1); }
  70%  { transform: translate3d(-70px, -110px, 0) scale(.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ======================================================================
   12. HERO ENTRANCE + MICRO-INTERACTIONS
   Staggered rise on load. `both` fill-mode keeps elements hidden until
   their delay elapses, so nothing flashes at the wrong position.
   ====================================================================== */

@keyframes ppRiseIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}
/* The title carries a purple drop-shadow. Because ppRiseIn uses
   `animation-fill-mode: both`, its final `filter: blur(0)` would overwrite
   that shadow for good — so the title gets its own keyframe that ends with
   the shadow still applied. */
@keyframes ppTitleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    filter: blur(6px) drop-shadow(0 10px 30px rgba(170, 86, 255, .28));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0) drop-shadow(0 10px 30px rgba(170, 86, 255, .28));
  }
}
@keyframes ppBadgePop {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ppPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(170, 86, 255, .45); }
  70%  { box-shadow: 0 0 0 14px rgba(170, 86, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(170, 86, 255, 0); }
}
@keyframes ppCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes ppSheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* --- staggered hero entrance ---------------------------------------- */
.homeHeader .home-rates-container {
  animation: ppBadgePop .7s cubic-bezier(.22, .61, .36, 1) both;
}
.homeHeader .nk-section-title {
  animation:
    ppTitleIn .8s cubic-bezier(.22, .61, .36, 1) .12s both,
    ppTitleShift 10s ease-in-out 1s infinite alternate;
}
.homeHeader .nk-section-text {
  animation: ppRiseIn .8s cubic-bezier(.22, .61, .36, 1) .26s both;
}
.homeHeader .nk-btn-group {
  animation: ppRiseIn .8s cubic-bezier(.22, .61, .36, 1) .4s both;
}

/* --- badge: slow breathing halo -------------------------------------
   Animated via an ::after ring, not box-shadow on the element itself:
   the glass rule above sets box-shadow with !important, and !important
   always beats an animated value. A pseudo-element sidesteps the clash.
   ------------------------------------------------------------------- */
.home-rates-item {
  position: relative;
}
.home-rates-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: ppPulseRing 3.4s ease-out 1.2s infinite;
}

/* --- login card: gentle float + top sheen ---------------------------
   NOTE: this card must NOT clip its overflow. On desktop the Google
   sign-in pill is absolutely positioned at `top:-135px` (pp-rtl.css) and
   sits ABOVE the card — `overflow:hidden` here was swallowing it, which is
   why the button only showed on mobile. The sheen below is inset instead so
   it still cannot poke out of the rounded corners. */
.home-login .card {
  animation: ppCardFloat 7s ease-in-out infinite;
  position: relative;
  overflow: visible;
}
.home-login .card::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: 0;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(170, 86, 255, .85), transparent);
  background-size: 200% 100%;
  animation: ppSheen 4.5s linear infinite;
  pointer-events: none;
}

/* --- buttons: lift + glow on hover ---------------------------------- */
.nk-btn-group .header-btn {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1),
              box-shadow .25s ease, border-color .25s ease;
}
.nk-btn-group .header-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(170, 86, 255, .55) !important;
  box-shadow:
    0 20px 44px rgba(170, 86, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
.nk-btn-group .header-btn:active { transform: translateY(-1px) scale(.99); }
.nk-btn-group .header-btn .icon-ri {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.nk-btn-group .header-btn:hover .icon-ri { transform: scale(1.14) rotate(-6deg); }

/* --- glass surfaces: subtle hover response -------------------------- */
.card, .step-card, .diff-item, .product-article, .login-pm {
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.card:hover, .diff-item:hover, .product-article:hover {
  border-color: rgba(170, 86, 255, .32) !important;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(170, 86, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* ======================================================================
   13. PERFORMANCE + ACCESSIBILITY GUARDS
   ====================================================================== */

/* Blurred orbs are fill-rate heavy on phones — shrink and soften them,
   and stop the perpetual float so scrolling stays smooth. */
@media (max-width: 991.98px) {
  .pp-orb { filter: blur(52px); opacity: .42; }
  .pp-orb-1 { width: 340px; height: 340px; }
  .pp-orb-2 { width: 300px; height: 300px; }
  .pp-orb-3 { width: 260px; height: 260px; }
  .pp-orb-4 { display: none; }
  .pp-fx-grid { background-size: 48px 48px; opacity: .12; }

  .home-login .card { animation: none; }
  .home-login .card::before { animation: none; }
  .home-rates-item::after { animation: none; }
}

@media (max-width: 575.98px) {
  .pp-orb-3 { display: none; }
  .header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* Respect the OS "reduce motion" setting: keep the glass, drop the motion. */
@media (prefers-reduced-motion: reduce) {
  .pp-orb,
  .pp-orb-1, .pp-orb-2, .pp-orb-3, .pp-orb-4,
  .homeHeader .home-rates-container,
  .homeHeader .nk-section-title,
  .homeHeader .nk-section-text,
  .homeHeader .nk-btn-group,
  .home-rates-item::after,
  .home-login .card,
  .home-login .card::before {
    animation: none !important;
  }
  /* entrance animations used `both` fill — force the final state */
  .homeHeader .home-rates-container,
  .homeHeader .nk-section-title,
  .homeHeader .nk-section-text,
  .homeHeader .nk-btn-group {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .pp-fx-grid { opacity: .10; }
}