.section-title,
.section-title h2 {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  background: linear-gradient(178deg, #ffffff 0%, #ffffff 58%, #ecddff 82%, #c77dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 16px rgba(191, 64, 191, 0.16));
  margin: 0 auto 8px;
  text-align: center !important;
  text-wrap: balance;
}

.section-subtitle,
.section-subtitle p {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 auto 20px;
  max-width: 36rem;
  text-align: center !important;
}

.text-highlight {
  background: linear-gradient(135deg, #BF40BF, #7C3AED) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #BF40BF !important;
}
/* ===== zz product-block shared styles (extracted from zaza-product-block.njk) ===== */
.zz{--v:#BF40BF;--b:#7C3AED;--g:#22c55e;--a:#eab308;--r:#ef4444;
  --panel:#0c0e1c;--void:#06070f;--edge:#1b1f3a;--ink:#e7ecff;--mut:rgba(231,236,255,.6);
  color:var(--ink);font-family:'Satoshi','Inter',system-ui,sans-serif;max-width:1100px;margin:0 auto}
.zz *{box-sizing:border-box}
.zz-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--v);font-size:.8rem;letter-spacing:.18em;margin:0 0 .5rem}
.zz-h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;line-height:1.06;letter-spacing:-.02em;margin:.2rem 0 0}
.zz-h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;margin:.2rem 0 0;letter-spacing:-.01em}
.zz-h3{font-size:1.4rem;font-weight:800;margin:0}
.zz-h4{font-size:1rem;font-weight:700;margin:.6rem 0 .2rem}
.zz-grad{background:linear-gradient(90deg,var(--v),var(--b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.zz-lead{color:var(--mut);font-size:1.05rem;line-height:1.7;max-width:42rem;margin:1rem 0 0}
.zz-p{color:var(--mut);font-size:.9rem;line-height:1.5;margin:0}

.zz-hero{position:relative;overflow:hidden;border:1px solid var(--edge);background:var(--panel);
  border-radius:20px;padding:2.2rem 1.6rem;margin:0 0 1.4rem}
.zz-hero__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:36rem;height:18rem;
  background:radial-gradient(circle,rgba(191,64,191,.22),transparent 70%);filter:blur(60px);pointer-events:none}
.zz-badges{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.zz-chip{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--mut);
  border:1px solid var(--edge);background:var(--void);border-radius:999px;padding:.32rem .7rem;display:inline-flex;align-items:center;gap:.4rem}
.zz-chip--green{color:var(--g);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.zz-chip--link{text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.zz-chip--link:hover{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.14);color:var(--g)}
.zz-dot{width:6px;height:6px;border-radius:50%;background:var(--g);animation:zzdp 1.6s ease-in-out infinite}
@keyframes zzdp{0%,100%{opacity:1}50%{opacity:.4}}
.zz-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.4rem}
.zz-trust__item{font-family:'JetBrains Mono',monospace;font-size:.68rem;text-align:center;
  border:1px solid var(--edge);background:rgba(12,14,28,.7);border-radius:10px;padding:.55rem}

.zz-block{border:1px solid var(--edge);background:rgba(12,14,28,.45);border-radius:20px;padding:1.8rem 1.6rem;margin:0 0 1.4rem}
.zz-grid{display:grid;gap:.8rem;margin-top:1.4rem}
.zz-grid--3{grid-template-columns:repeat(3,1fr)}
.zz-card{border:1px solid var(--edge);background:var(--void);border-radius:16px;padding:1.4rem}
.zz-num{font-family:'JetBrains Mono',monospace;color:var(--v);font-size:1.3rem}
.zz-ico{font-size:1.5rem}

.zz-table-wrap{margin-top:1.4rem;border:1px solid var(--edge);border-radius:16px;overflow:hidden}
.zz-table{width:100%;border-collapse:collapse;font-size:.88rem}
.zz-table th{background:var(--panel);text-align:center;padding:.9rem;font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.zz-table th:first-child{text-align:left}
.zz-th-accent{color:var(--v)!important}
.zz-table td{padding:.9rem;text-align:center;border-top:1px solid var(--edge);color:var(--mut)}
.zz-table td:first-child{text-align:left;color:var(--ink)}
.zz-table tbody tr:nth-child(odd){background:rgba(6,7,15,.4)}
.zz-good{color:var(--g)!important;font-weight:600}
.zz-bad{color:var(--r)!important}
.zz-mut{color:rgba(231,236,255,.45)!important}


.zz-review{border:1px solid var(--edge);background:var(--void);border-radius:16px;padding:1.2rem}
.zz-reviews-stat{display:inline-flex;align-items:center;gap:10px;margin-top:1rem;padding:.5rem .9rem;
  border:1px solid rgba(234,179,8,.22);background:rgba(234,179,8,.06);border-radius:999px}
.zz-reviews-stat__stars{color:var(--a);font-size:.9rem;letter-spacing:1px}
.zz-reviews-stat__txt{font-size:.82rem;color:var(--mut);font-weight:600}
.zz-reviews-grid{margin-top:1.4rem}
.zz-review__head{display:flex;align-items:center;gap:.7rem}
.zz-review__av{width:36px;height:36px;border-radius:50%;background:rgba(191,64,191,.2);color:var(--v);
  display:grid;place-items:center;font-weight:700}
.zz-review__user{font-weight:600;font-size:.85rem}
.zz-review__stars{color:var(--a);font-size:.78rem}
.zz-review__text{color:var(--mut);font-size:.88rem;line-height:1.5;margin:.8rem 0 0}

.zz-faq{display:flex;flex-direction:column;gap:10px;margin-top:1.4rem}
.zz-faq__item{border:1px solid var(--edge);background:var(--void);border-radius:12px;overflow:hidden;transition:border-color .25s}
.zz-faq__item[open]{border-color:rgba(191,64,191,.35)}
.zz-faq__q{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  padding:1rem 1.2rem;font-weight:600;font-size:.95rem;color:var(--ink);transition:color .2s}
.zz-faq__q::-webkit-details-marker{display:none}
.zz-faq__q:hover{color:#fff}
.zz-faq__plus{position:relative;width:14px;height:14px;flex-shrink:0}
.zz-faq__plus::before,.zz-faq__plus::after{content:'';position:absolute;background:var(--v);border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.zz-faq__plus::before{top:6px;left:0;width:14px;height:2px}
.zz-faq__plus::after{top:0;left:6px;width:2px;height:14px}
.zz-faq__item[open] .zz-faq__plus::after{transform:rotate(90deg);opacity:0}
.zz-faq__a{padding:0 1.2rem 1.1rem;color:var(--mut);font-size:.9rem;line-height:1.6;
  animation:zzFaq .3s ease both}
.zz-faq__a a{color:#a8c4ff;text-decoration:none}
.zz-faq__a a:hover{color:#fff;text-decoration:underline}
@keyframes zzFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.zz-cta{border:1px solid var(--edge);background:linear-gradient(135deg,rgba(191,64,191,.15),rgba(124,58,237,.08));
  border-radius:18px;padding:1.8rem;text-align:center}
.zz-cta__btn{display:inline-flex;align-items:center;gap:9px;margin-top:1.1rem;padding:.85rem 1.6rem;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--v),var(--b));border-radius:12px;font-weight:700;font-size:.95rem;
  color:#fff;text-decoration:none;box-shadow:0 10px 30px -10px rgba(191,64,191,.7);
  transition:filter .25s,transform .25s,gap .25s}
.zz-cta__btn:hover{filter:brightness(1.1);transform:translateY(-2px);gap:13px}
.zz-cta__btn svg{transition:transform .25s}
.zz-cta__btn:hover svg{transform:translateY(2px)}
.zz-cta__btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
  animation:zzCtaShine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes zzCtaShine{0%{left:-60%}55%{left:150%}100%{left:150%}}
.zz-cta__btn:hover::after{animation-duration:1.1s}
.zz-cta__meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:rgba(231,236,255,.45);margin:.8rem 0 0}

@media (max-width:760px){
  .zz-grid--3{grid-template-columns:1fr}
  .zz-table{font-size:.8rem}
  .zz-table th,.zz-table td{padding:.7rem .5rem}
}

/* scroll-reveal */
.zz-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.zz-reveal.zz-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .zz *{animation:none!important}
  .zz-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===== homepage render-perf: skip layout/paint of below-fold sections
   until they approach the viewport. Sizes are conservative estimates so
   the scrollbar stays stable; browsers without support simply ignore. ===== */
.fbq, .faq-section, .cta-section, .comparison, .zzhf, .zz-pair{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
/* keep anchored/warped sections from hiding under the floating navbar */
.hero, .zed, #products, .fbq, .faq-section, .cta-section{
  scroll-margin-top:84px;
}

/* ===== .zznx — shared "next step" conversion row appended to homepage
   sections that previously dead-ended. One primary action + one low-
   pressure secondary, honest microcopy only. ===== */
.zznx{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:38px auto 0;max-width:640px;padding:0 18px;text-align:center;position:relative;z-index:2}
.zznx__line{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(231,236,255,.5)}
.zznx__line strong{color:rgba(255,255,255,.9);font-weight:700}
.zznx__row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.zznx__btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:9px;
  font-size:.86rem;font-weight:700;text-decoration:none;line-height:1;
  background:var(--cl-accent,#BF40BF);color:#fff;border:1px solid transparent;
  box-shadow:0 6px 22px rgba(var(--cl-accent-rgb,191,64,191),.32);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.zznx__btn:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 10px 28px rgba(var(--cl-accent-rgb,191,64,191),.45)}
.zznx__btn--ghost{background:rgba(255,255,255,.04);color:rgba(235,238,255,.85);
  border-color:rgba(255,255,255,.14);box-shadow:none}
.zznx__btn--ghost:hover{border-color:rgba(var(--cl-accent-rgb,191,64,191),.5);filter:none}
.zznx--charged .zznx__btn:not(.zznx__btn--ghost){animation:zznxPulse 1.6s ease-in-out infinite}
@keyframes zznxPulse{0%,100%{box-shadow:0 6px 22px rgba(var(--cl-accent-rgb,191,64,191),.32)}
  50%{box-shadow:0 6px 30px rgba(var(--cl-accent-rgb,191,64,191),.62)}}
@media (prefers-reduced-motion:reduce){.zznx--charged .zznx__btn{animation:none}}

/* products grid under-strip */
.zzps{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:26px auto 0;font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;color:rgba(231,236,255,.55);position:relative;z-index:2}
.zzps__i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.zzps__d{width:3px;height:3px;border-radius:50%;background:rgba(var(--cl-accent-rgb,191,64,191),.6)}

/* footer final CTA line */
.zzfc{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:20px 18px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06)}
.zzfc__t{font-size:.86rem;color:rgba(231,236,255,.6)}
.zzfc__t strong{color:#fff}

/* ── copy-success pulse (cart code + scratch-card coupon) ──
   is-done is toggled by the existing copy handlers; this just adds a single
   soft green ring pulse for tactile confirmation. */
@keyframes zzCopyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}
.cart-code__copy.is-done,
.zz-sc__copy.is-done {
  animation: zzCopyPulse 0.55s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .cart-code__copy.is-done,
  .zz-sc__copy.is-done { animation: none; }
}

/* =============================================================================
   MOBILE PASS 2026-07 — perf + touch ergonomics for small screens.
   ============================================================================= */

/* 1. scroll reveals: blur() filters are the single most expensive part of the
   entrance animations on phone GPUs, and the long 34px rise reads slower on a
   small viewport. Mobile gets a cheap, snappy fade+rise instead — same look,
   fraction of the paint cost. (!important needed: the base rules live in a
   later <style> block in master.njk.) */
@media (max-width: 768px), (pointer: coarse) {
  html.zz-motion .components > * {
    filter: none !important;
    transform: translateY(18px) !important;
    transition-duration: .55s !important;
  }
  html.zz-motion .components > *.zz-in,
  html.zz-motion.zz-revealed .components > * {
    transform: none !important;
  }
  html.zz-motion [data-zz-reveal] { transition-duration: .5s !important; }
}

/* 2. touch feedback: hover states never fire on touch, so taps felt dead.
   Buttons and cards now compress slightly on press, and the grey iOS tap
   flash is replaced by that feedback. */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn:active:not(:disabled),
  .pf-btn:active:not(:disabled),
  .zzct__btn:active,
  .zzbb__cta:active,
  .ppx-bar a:active,
  .nb-getkey:active {
    transform: scale(.965);
    transition-duration: .08s;
  }
  .pc:active { transform: scale(.985); transition-duration: .1s; }
}

/* 3. iOS auto-zoom guard: Safari zooms the whole page when a focused input's
   font-size is under 16px. Force 16px on small screens so checkout and login
   fields never trigger the zoom-and-reflow. */
@media (max-width: 768px) {
  input.form-control,
  textarea.form-control,
  select.form-select,
  .choices__inner,
  .choices__input {
    font-size: 16px !important;
  }
}