/*
Theme Name: Pixagon
Theme URI: https://pixagon.co/
Author: Pixagon
Author URI: https://pixagon.co/
Description: Pixagon — a fast, conversion-focused classic WordPress theme for a web, commerce & AI engineering agency. Hand-built in PHP with full code control, faithful to the Pixagon brand design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixagon
Tags: agency, business, portfolio, custom-menu, featured-images, translation-ready, threaded-comments
*/

/* ============================================================
   PIXAGON DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --px-pink: #FF1252;
  --px-pink-light: #FF8DA3;
  --px-pink-mid: #FF5C7F;
  --px-pink-deep: #C70E40;

  /* Ink / surfaces */
  --px-ink: #0E0E0F;
  --px-ink-2: #1A1A1C;
  --px-dark-bg: #0A0A0B;
  --px-dark-card: #141416;

  /* Light surfaces */
  --px-paper: #FFFFFF;
  --px-paper-2: #F6F5F2;
  --px-grid-line: #F4F3EF;

  /* Text */
  --px-muted: #56565A;
  --px-muted-2: #646468;
  --px-muted-3: #7A7A78;
  --px-faint: #9A9A97;

  /* Borders */
  --px-border: #EAE9E4;
  --px-border-2: #EEEDE8;
  --px-border-3: #E7E6E1;
  --px-border-4: #DEDDD7;

  /* Type */
  --px-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --px-font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --px-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --px-container: 1280px;
}

/* ============================================================
   BASE / RESET  (from source <style> block)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--px-font-body);
  background: var(--px-paper);
  color: var(--px-ink);
}
img { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--px-pink); color: #fff; }

/* WordPress accessibility helper */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--px-ink);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ============================================================
   KEYFRAMES  (from source <style> block)
   ============================================================ */
@keyframes pxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pxPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes pxScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
@keyframes pxRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blobMorph {
  0%,100% { border-radius:42% 58% 63% 37% / 42% 45% 55% 58%; }
  33% { border-radius:58% 42% 42% 58% / 58% 42% 58% 42%; }
  66% { border-radius:37% 63% 58% 42% / 55% 58% 42% 45%; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SCROLL REVEAL  (driven by assets/js/pixagon.js)
   The hidden state is only applied once pixagon.js adds the
   .px-reveal-ready class to <html> — so if the script ever
   fails to run, all content stays visible (no blank page).
   ============================================================ */
[data-reveal] {
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.px-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
.px-reveal-ready [data-reveal].px-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HOVER STATES
   (the source used a JS "style-hover" attribute; reproduced
   here as real CSS so they work as plain hover interactions)
   ============================================================ */
/* NOTE: the markup keeps the design's inline styles for base appearance.
   Inline styles win over external rules, so hover overrides of an
   inline-set property (color / background / border) need !important. */

.px-btn-ink:hover { background: var(--px-pink) !important; }

.px-btn-outline:hover { border-color: var(--px-ink) !important; }

.px-btn-pink:hover { background: #fff !important; color: var(--px-ink) !important; }

.px-btn-ghost:hover { border-color: #fff !important; }

/* lifting cards */
.px-card:hover { border-color: var(--px-ink) !important; transform: translateY(-3px); }

.px-card-2:hover { border-color: var(--px-ink) !important; transform: translateY(-2px); }

.px-card-dark:hover { transform: translateY(-3px); }

.px-card-flat:hover { border-color: var(--px-ink) !important; }

.px-ai-card:hover { border-color: var(--px-pink) !important; }

.px-chip:hover { border-color: var(--px-ink) !important; }

.px-link-pink:hover { color: var(--px-pink) !important; }

.px-underline-link:hover { color: var(--px-pink) !important; border-color: var(--px-pink) !important; }

/* ============================================================
   PRIMARY NAVIGATION
   Styles both the fallback (bare <a>) and wp_nav_menu (<ul>) output.
   ============================================================ */
.px-desktop-nav { display: flex; align-items: center; gap: 30px; }

.px-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.px-menu li { margin: 0; }

.px-navlink,
.px-menu a {
  font-size: 14.5px;
  color: #3A3A3C;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}
.px-navlink:hover,
.px-menu a:hover,
.px-menu .current-menu-item > a { color: var(--px-ink); }

/* CTA-style item: add the CSS class "px-cta" to a menu item, or it is
   applied automatically to the fallback "Start a Project" link. */
.px-navlink--cta,
.px-menu .px-cta > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff !important;
  background: var(--px-pink);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease,
              transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.px-navlink--cta:hover,
.px-menu .px-cta > a:hover {
  background: var(--px-pink);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(255,18,82,0.55);
}
.px-navlink--cta:active,
.px-menu .px-cta > a:active { transform: translateY(0); }

/* Footer menu (when a "Footer Menu" is assigned) */
.px-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.px-footer-menu li { margin: 0; }
.px-footer-menu a { font-size: 14px; color: #B4B4B8; text-decoration: none; transition: color .2s ease; }
.px-footer-menu a:hover { color: var(--px-pink); }

/* Mobile menu */
.px-mobile-btn { transition: border-color .2s ease; }
.px-mobile-btn:hover { border-color: var(--px-ink); }

.px-mobile-list { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.px-mobile-list li { margin: 0; }
.px-mobile-link,
.px-mobile-list a {
  display: block;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--px-ink);
  text-decoration: none;
  border-bottom: 1px solid #F0EFEA;
}
.px-mobile-list a:hover { color: var(--px-pink); }
.px-mobile-cta,
.px-mobile-list .px-cta > a {
  margin-top: 12px;
  text-align: center;
  padding: 14px;
  font-size: 16px;
  color: #fff !important;
  background: var(--px-ink);
  border-radius: 8px;
  border-bottom: 0;
}
.px-mobile-cta:hover,
.px-mobile-list .px-cta > a:hover { background: var(--px-pink); color: #fff !important; }

/* ============================================================
   RESPONSIVE
   The source flipped grid columns from JavaScript. Reproduced
   here as real media queries keyed on the same data-* hooks,
   so layout is correct with JS disabled too.
   ============================================================ */

/* Tablet — under 1180px */
@media (max-width: 1179px) {
  [data-pillar-grid]   { grid-template-columns: 1fr 1fr !important; }
  [data-ai-grid]       { grid-template-columns: 1fr 1fr !important; }
  [data-ecom-grid]     { grid-template-columns: 1fr 1fr !important; }
  [data-services-grid] { grid-template-columns: 1fr 1fr !important; }
}

/* Mobile — under 900px */
@media (max-width: 899px) {
  [data-desktop-nav] { display: none !important; }
  [data-mobile-btn]  { display: inline-flex !important; }

  [data-hero-grid]     { grid-template-columns: 1fr !important; }
  [data-trust-grid]    { grid-template-columns: repeat(3, 1fr) !important; }
  [data-pillar-grid]   { grid-template-columns: 1fr !important; }
  [data-process-grid]  { grid-template-columns: 1fr !important; }
  [data-ai-grid]       { grid-template-columns: 1fr 1fr !important; }
  [data-ecom-head]     { grid-template-columns: 1fr !important; }
  [data-ecom-grid]     { grid-template-columns: 1fr 1fr !important; }
  [data-services-grid] { grid-template-columns: 1fr !important; }
  [data-work-grid]     { grid-template-columns: 1fr !important; }
  [data-why-grid]      { grid-template-columns: 1fr !important; }
  [data-footer-grid]   { grid-template-columns: 1fr 1fr !important; }

  /* Keep big display headings from overflowing small screens */
  .px-h1 { font-size: 40px !important; }
  .px-h2 { font-size: 30px !important; }
  .px-h2-lg { font-size: 32px !important; }
  .px-section { padding-left: 20px !important; padding-right: 20px !important; }
  .px-hero { padding-top: 120px !important; }
}

@media (max-width: 560px) {
  [data-trust-grid]  { grid-template-columns: repeat(2, 1fr) !important; }
  [data-ai-grid]     { grid-template-columns: 1fr !important; }
  [data-ecom-grid]   { grid-template-columns: 1fr !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; }
  .px-h1 { font-size: 34px !important; }
}

/* ============================================================
   SHARED PAGE / BLOG / ARCHIVE / SINGLE / 404 TEMPLATES
   On-brand styling for the dynamic WordPress templates.
   ============================================================ */
.px-shell {
  max-width: var(--px-container);
  margin: 0 auto;
  padding: 0 32px;
}
.px-shell--narrow { max-width: 760px; }

.px-page-head {
  padding: 132px 32px 48px;
  border-bottom: 1px solid var(--px-border-2);
  background:
    linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
}
.px-page-head__inner { max-width: var(--px-container); margin: 0 auto; }
.px-eyebrow {
  font-family: var(--px-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--px-pink);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.px-page-title {
  font-family: var(--px-font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.px-page-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--px-muted);
  margin: 18px 0 0;
  max-width: 620px;
}

.px-main { padding: 56px 0 88px; }

/* Post card grid (home.php / archive.php) */
.px-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .px-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .px-card-grid { grid-template-columns: 1fr; } }

.px-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--px-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: border-color .25s ease, transform .25s ease;
}
.px-post-card:hover { border-color: var(--px-ink); transform: translateY(-3px); }
.px-post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--px-paper-2); }
.px-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-post-card__media--placeholder {
  background: repeating-linear-gradient(135deg, #F1F0EC, #F1F0EC 11px, #EAE9E4 11px, #EAE9E4 22px);
}
.px-post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.px-post-card__meta {
  font-family: var(--px-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--px-faint);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.px-post-card__title {
  font-family: var(--px-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.px-post-card__title a { text-decoration: none; color: inherit; transition: color .2s ease; }
.px-post-card__title a:hover { color: var(--px-pink); }
.px-post-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--px-muted-2); margin: 0 0 18px; }
.px-post-card__more {
  margin-top: auto;
  font-family: var(--px-font-mono);
  font-size: 12.5px;
  color: var(--px-ink);
  text-decoration: none;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.px-post-card__more:hover { color: var(--px-pink); }

/* Single post */
.px-prose {
  font-size: 17.5px;
  line-height: 1.7;
  color: #26262A;
}
.px-prose > * + * { margin-top: 1.35em; }
.px-prose h2 { font-family: var(--px-font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; margin-top: 1.8em; }
.px-prose h3 { font-family: var(--px-font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; line-height: 1.2; margin-top: 1.6em; }
.px-prose h4 { font-family: var(--px-font-display); font-weight: 600; font-size: 19px; margin-top: 1.5em; }
.px-prose a { color: var(--px-pink); text-decoration: underline; text-underline-offset: 2px; }
.px-prose img, .px-prose figure { border-radius: 12px; }
.px-prose figure { margin-left: 0; margin-right: 0; }
.px-prose figcaption { font-size: 13px; color: var(--px-muted-3); margin-top: 8px; font-family: var(--px-font-mono); }
.px-prose blockquote {
  margin: 1.6em 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--px-pink);
  font-size: 20px;
  line-height: 1.5;
  color: var(--px-ink);
  font-style: italic;
}
.px-prose pre {
  background: var(--px-ink);
  color: #EDEDED;
  border-radius: 12px;
  padding: 18px 20px;
  overflow: auto;
  font-family: var(--px-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
}
.px-prose code { font-family: var(--px-font-mono); font-size: 0.9em; }
.px-prose :not(pre) > code { background: var(--px-paper-2); border-radius: 5px; padding: 2px 6px; }
.px-prose ul, .px-prose ol { padding-left: 1.3em; }
.px-prose li + li { margin-top: 0.4em; }
.px-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.px-prose th, .px-prose td { border: 1px solid var(--px-border); padding: 10px 12px; text-align: left; }

.px-featured {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 40px;
  border: 1px solid var(--px-border);
}
.px-featured img { width: 100%; display: block; }
.px-featured__credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  background: rgba(14, 14, 15, 0.6);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.px-featured__credit a { color: #fff; text-decoration: none; }
.px-featured__credit a:hover { text-decoration: underline; }

/* ===== Contact form ===== */
.px-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .px-form-row { grid-template-columns: 1fr; } }
.px-field { display: block; margin: 0 0 16px; }
.px-field > span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.02em; color: #0E0E0F; margin: 0 0 7px; }
.px-field input, .px-field textarea {
  width: 100%; box-sizing: border-box;
  font: 15px/1.5 'Hanken Grotesk', sans-serif; color: #0E0E0F;
  background: #fff; border: 1px solid #EAE9E4; border-radius: 12px; padding: 13px 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.px-field input:focus, .px-field textarea:focus { outline: none; border-color: #FF1252; box-shadow: 0 0 0 3px rgba(255, 18, 82, 0.12); }
.px-field textarea { resize: vertical; min-height: 130px; }
.px-form-submit {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; margin-top: 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  background: #FF1252; color: #fff; padding: 14px 28px; border-radius: 999px;
  transition: background 0.15s, transform 0.15s;
}
.px-form-submit:hover { background: #C70E40; transform: translateY(-1px); }
.px-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.px-form-note { border-radius: 12px; padding: 14px 16px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
.px-form-note--ok { background: #e7f5ec; color: #1a7f45; border: 1px solid #bfe6cd; }
.px-form-note--err { background: #fdeef1; color: #C70E40; border: 1px solid #f6c9d5; }

/* ===== Fable homepage ===== */
@keyframes pxBlobMorph { 0%,100%{ border-radius:42% 58% 63% 37% / 42% 45% 55% 58%; } 33%{ border-radius:58% 42% 42% 58% / 58% 42% 58% 42%; } 66%{ border-radius:37% 63% 58% 42% / 55% 58% 42% 45%; } }
@keyframes pxGradFlow { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes pxSpin { to { transform:rotate(360deg); } }
.px-blob { animation: pxBlobMorph 4s ease-in-out infinite; }
.px-blob.px-spin { animation: pxBlobMorph 4.6s ease-in-out infinite, pxSpin 13s linear infinite; }
.px-fable-cta { animation: pxGradFlow 14s ease infinite; }
.pillar-card { transition: all .25s ease; }
.pillar-card:hover { border-color: #FF1252 !important; transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(255,18,82,0.3); }
@media (max-width: 1050px) { .px-fable-proof { grid-template-columns: 1fr !important; } }
@media (max-width: 1000px) { .px-fable-2col { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) {
  .px-fable-3col { grid-template-columns: 1fr !important; }
  .px-fable-4col { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 680px) { .px-fable-4col { grid-template-columns: 1fr !important; } }
.ai-card { transition: all .25s ease; }
.ai-card:hover { border-color: #FF1252 !important; transform: translateY(-4px); background: rgba(255,18,82,0.06) !important; }
@keyframes pxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.px-marquee-track { animation: pxMarquee 46s linear infinite; }
.px-marquee:hover .px-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .px-blob, .px-fable-cta, .px-marquee-track { animation: none !important; } }

.px-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-family: var(--px-font-mono);
  font-size: 12.5px;
  color: var(--px-muted-3);
  margin: 18px 0 0;
}
.px-tag-pill {
  font-family: var(--px-font-mono);
  font-size: 11px;
  color: var(--px-muted-3);
  background: var(--px-paper-2);
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.px-tag-pill:hover { color: #fff; background: var(--px-pink); }

/* Buttons reused across templates */
.px-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.px-btn--ink { background: var(--px-ink); color: #fff; }
.px-btn--ink:hover { background: var(--px-pink); }
.px-btn--outline { background: #fff; color: var(--px-ink); border-color: var(--px-border-4); }
.px-btn--outline:hover { border-color: var(--px-ink); }

/* Pagination */
.px-pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 56px;
  justify-content: center;
}
.px-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--px-border);
  border-radius: 10px;
  font-family: var(--px-font-mono);
  font-size: 13.5px;
  text-decoration: none;
  color: var(--px-ink);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.px-pagination .page-numbers:hover { border-color: var(--px-ink); }
.px-pagination .page-numbers.current { background: var(--px-ink); color: #fff; border-color: var(--px-ink); }
.px-pagination .page-numbers.dots { border-color: transparent; }

/* Post navigation (single) */
.px-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--px-border-2);
}
@media (max-width: 600px) { .px-post-nav { grid-template-columns: 1fr; } }
.px-post-nav a {
  display: block;
  border: 1px solid var(--px-border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.px-post-nav a:hover { border-color: var(--px-ink); }
.px-post-nav .px-post-nav__label { font-family: var(--px-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--px-pink); }
.px-post-nav .px-post-nav__title { font-family: var(--px-font-display); font-weight: 600; font-size: 16px; margin-top: 6px; color: var(--px-ink); letter-spacing: -0.01em; }
.px-post-nav .px-next { text-align: right; }

/* Sidebar / widgets (optional, used if a sidebar is registered) */
.px-widget { margin-bottom: 34px; }
.px-widget .widget-title {
  font-family: var(--px-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--px-muted-3);
  margin: 0 0 14px;
}
.px-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.px-widget a { text-decoration: none; color: var(--px-muted); }
.px-widget a:hover { color: var(--px-pink); }

/* Comments */
.px-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--px-border-2); }
.px-comments h2 { font-family: var(--px-font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.px-comments .comment-list { list-style: none; padding: 0; margin: 24px 0 0; }
.px-comments .comment-list ul.children { list-style: none; padding-left: 28px; }
.px-comments li.comment { margin-bottom: 22px; }
.px-comments .comment-body { border: 1px solid var(--px-border); border-radius: 14px; padding: 18px 20px; }
.px-comments .comment-author .fn { font-weight: 600; font-style: normal; }
.px-comments .comment-meta { font-family: var(--px-font-mono); font-size: 11.5px; color: var(--px-faint); margin-bottom: 8px; }
.px-comment-form input[type="text"],
.px-comment-form input[type="email"],
.px-comment-form input[type="url"],
.px-comment-form textarea {
  width: 100%;
  border: 1px solid var(--px-border-3);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  margin-top: 6px;
  background: #fff;
}
.px-comment-form textarea:focus,
.px-comment-form input:focus { outline: 2px solid var(--px-pink); outline-offset: 1px; border-color: transparent; }

/* 404 */
.px-404 {
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 32px 96px;
}
.px-404__code {
  font-family: var(--px-font-display);
  font-weight: 700;
  font-size: clamp(80px, 16vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--px-ink);
}
.px-404__code span { color: var(--px-pink); }

/* Generic search form */
.px-search { display: flex; gap: 8px; max-width: 420px; }
.px-search input[type="search"] {
  flex: 1;
  border: 1px solid var(--px-border-3);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
}
.px-search button {
  border: 0;
  background: var(--px-ink);
  color: #fff;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 600;
  cursor: pointer;
}
.px-search button:hover { background: var(--px-pink); }

/* Sticky footer layout */
html, body { min-height: 100%; }
.px-site { display: flex; flex-direction: column; min-height: 100vh; }
.px-site__content { flex: 1 0 auto; }

/* ============================================================
   PIXAGON HOME v6 — additions
   ============================================================ */
@keyframes sfBlob { 0%,100% { border-radius:42% 58% 63% 37% / 42% 45% 55% 58%; } 33% { border-radius:58% 42% 42% 58% / 58% 42% 58% 42%; } 66% { border-radius:37% 63% 58% 42% / 55% 58% 42% 45%; } }
@keyframes sfSpin { to { transform: rotate(360deg); } }
@keyframes gradFlow { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Nav underline on hover */
.px-navlink, .px-menu a { position: relative; }
.px-navlink::after, .px-menu a::after {
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:#FF1252; border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.px-navlink:hover::after, .px-menu a:hover::after { transform:scaleX(1); }
.px-navlink--cta::after, .px-menu .px-cta > a::after { display:none; }

/* Nav-light mode (while scrolled over the red hero) */
html[data-nav-light] .pxlogo-dark { display:none !important; }
html[data-nav-light] .pxlogo-light { display:block !important; }
html[data-nav-light] .pxlogo-txt { color:#fff !important; }
html[data-nav-light] .px-desktop-nav a { color:rgba(255,255,255,0.92) !important; }
/* CTA button — selectors kept more specific than the rule above so the red
   text isn't overridden to white (which made it vanish on the white pill). */
html[data-nav-light] .px-desktop-nav .px-navlink--cta,
html[data-nav-light] .px-desktop-nav .px-menu .px-cta > a { background:#fff !important; color:#C0142E !important; }
/* White-pill hover over the hero: lift + soft dark-red shadow. */
html[data-nav-light] .px-desktop-nav .px-navlink--cta:hover,
html[data-nav-light] .px-desktop-nav .px-menu .px-cta > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(60,3,12,0.5);
}
html[data-nav-light] .px-mobile-btn { border-color:rgba(255,255,255,0.4) !important; }
html[data-nav-light] .px-mobile-btn .pxbar { background:#fff !important; }

/* While the drawer is open the header is forced to its solid-white/dark state
   (placed after the nav-light rules so it wins on ties). */
html[data-drawer-open] .px-header {
  background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid #EEEDE8 !important;
}
html[data-drawer-open] .pxlogo-dark { display:block !important; }
html[data-drawer-open] .pxlogo-light { display:none !important; }
html[data-drawer-open] .pxlogo-txt { color:#0E0E0F !important; }
html[data-drawer-open] .px-mobile-btn { border-color:#E7E6E1 !important; }
html[data-drawer-open] .px-mobile-btn .pxbar { background:#0E0E0F !important; }

/* ============================================================
   MOBILE DRAWER — slide-in mega menu (under 900px)
   ============================================================ */
/* Hamburger → × : three independent bars. */
.px-mobile-btn .pxbar {
  display:block; width:18px; height:2px; border-radius:2px; background:#0E0E0F;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

/* The drawer: full-width panel below the 72px header; slides in from the right. */
.px-drawer {
  display:none;
  position:fixed; top:72px; left:0; right:0; bottom:0; width:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.32,.72,.28,1);
  z-index:90;
  -webkit-overflow-scrolling:touch;
}
.px-drawer-scroll { height:100%; overflow-y:auto; padding:8px 32px 48px; }

/* Accordion group header (real button); the + box is 42px so it lines up with
   the header's 42px hamburger/× button at the shared 32px inset. */
.px-macc { border-bottom:1px solid #EEEDE8; }
.px-macc-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer;
  padding:17px 0;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; color:#0E0E0F;
  text-align:left;
}
/* +/× indicator drawn as two centered coral bars so the open × is exactly the
   + rotated 45° — identical size, perfectly centered (no glyph-metric drift).
   Kept 42px wide so it lines up with the header's 42px hamburger/× button. */
.px-macc-ind {
  position:relative; flex-shrink:0; width:42px; height:24px;
  transition:transform .25s ease; transform-origin:center center;
}
.px-macc-ind::before,
.px-macc-ind::after {
  content:''; position:absolute; top:50%; left:50%;
  background:#FF1252; border-radius:1px;
}
.px-macc-ind::before { width:17px; height:2px; transform:translate(-50%,-50%); }  /* horizontal arm */
.px-macc-ind::after  { width:2px;  height:17px; transform:translate(-50%,-50%); } /* vertical arm → + */
/* Accordion panel (one open at a time; toggled via [hidden]). */
.px-macc-panel { padding:2px 0 16px; }
.px-macc-grp {
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
  color:#9A9AA2; margin:12px 0 8px;
}
.px-macc-link {
  display:block; padding:8px 0 8px 14px;
  font-family:'Hanken Grotesk',sans-serif; font-size:15.5px; color:#3A3A3C; text-decoration:none;
}
.px-macc-link:hover { color:#FF1252; }
.px-macc-all {
  display:inline-block; margin-top:12px; padding:2px 0 2px 14px;
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:#FF1252; text-decoration:none;
}

/* Flat items + CTA below the accordions. */
.px-drawer-link {
  display:block; padding:17px 0; border-bottom:1px solid #EEEDE8;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; color:#0E0E0F; text-decoration:none;
}
.px-drawer-link:hover { color:#FF1252; }
.px-drawer-cta {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px;
  background:#FF1252; color:#fff; border-radius:11px; padding:16px 22px;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:16px; text-decoration:none;
}
.px-drawer-cta span { font-family:'JetBrains Mono',monospace; }

/* Desktop never shows the drawer. */
@media (min-width:900px) { .px-drawer { display:none !important; } }
@media (prefers-reduced-motion: reduce) {
  .px-drawer { transition:none; }
  .px-mobile-btn .pxbar { transition:none; }
  .px-macc-ind { transition:none; }
}

/* Lift cards (benefit) */
.hv { transition:border-color .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; }
.hv:hover { border-color:#FF1252 !important; transform:translateY(-4px); box-shadow:0 16px 36px -16px rgba(255,18,82,0.3); }

/* Service cards */
.svc-card { transition:border-color .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; }
.svc-card:hover { border-color:#FF1252 !important; transform:translateY(-4px); box-shadow:0 16px 36px -16px rgba(255,18,82,0.32); }
.svc-card .svc-title { transition:color .25s ease; }
.svc-card:hover .svc-title { color:#FF1252; }
.svc-card .svc-arrow { opacity:0; transform:translateX(-8px); transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-arrow { opacity:1; transform:translateX(0); }

/* AI cards */
.aicard { transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s cubic-bezier(.16,1,.3,1),background-color .25s ease,box-shadow .25s ease; }
.aicard:hover { border-color:#FF1252 !important; transform:translateY(-4px); background-color:#1A1A1D !important; box-shadow:0 18px 42px -20px rgba(255,18,82,0.5); }
.ailabel, .aititle { display:block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.aicard:hover .ailabel, .aicard:hover .aititle { transform:translateX(5px); }
.ai-explore { transition:color .25s ease,border-color .25s ease; }
.ai-explore-arrow { display:inline-block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.ai-explore:hover { color:#FF1252 !important; border-color:#FF1252 !important; }
.ai-explore:hover .ai-explore-arrow { transform:translateX(6px); }

/* View-all + ecommerce links */
.viewall { transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1),background-color .25s ease; }
.viewall-arrow { display:inline-block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.viewall:hover { border-color:#FF1252 !important; transform:translateY(-2px); }
.viewall:hover .viewall-arrow { transform:translateX(5px); }
.ecom-link { transition:border-color .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),background-color .25s ease; }
.ecom-link:hover { border-color:#FF1252 !important; transform:translateY(-3px); box-shadow:0 14px 32px -14px rgba(255,18,82,0.38); background-color:#fff; }
.ecom-link .ecom-label { transition:transform .25s cubic-bezier(.16,1,.3,1); display:inline-block; }
.ecom-link:hover .ecom-label { transform:translateX(5px); color:#FF1252; }
.ecom-link .ecom-arrow { opacity:0; transform:translateX(-8px); transition:opacity .25s,transform .25s; color:#FF1252; font-family:'JetBrains Mono',monospace; }
.ecom-link:hover .ecom-arrow { opacity:1; transform:translateX(0); }

/* Misc v6 links/buttons */
.px-textlink:hover { color:#0E0E0F !important; border-color:#0E0E0F !important; }
.px-cta-pink { transition:background .25s ease; }
.px-cta-pink:hover { background:#0E0E0F !important; }
.px-hero-cta { transition:transform .25s ease, box-shadow .25s ease; }
.px-hero-cta:hover { transform:translateY(-2px); box-shadow:0 22px 50px -16px rgba(60,3,12,0.6); }
.px-social { transition:border-color .2s ease, background .2s ease, color .2s ease; }
.px-social:hover { border-color:#FF1252 !important; background:#FF1252; color:#fff !important; }
.px-flink { transition:color .2s ease; }
.px-flink:hover { color:#fff !important; }

/* Marquee */
[data-marquee]:hover [data-marquee-track] { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { [data-marquee-track] { animation:none !important; } }

/* v6 responsive grids (new hooks not covered by the base rules) */
@media (max-width: 899px) {
  [data-ask-grid]     { grid-template-columns: 1fr !important; }
  [data-benefit-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-stats-grid]   { grid-template-columns: 1fr 1fr !important; }
  [data-steps-grid]   { grid-template-columns: 1fr !important; }
  [data-cred-grid]    { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 559px) {
  [data-benefit-grid] { grid-template-columns: 1fr !important; }
  [data-stats-grid]   { grid-template-columns: 1fr 1fr !important; }
  [data-cred-grid]    { grid-template-columns: 1fr 1fr !important; }
  [data-why-cards]    { grid-template-columns: 1fr !important; }
}

/* ============================================================
   DESKTOP MEGA MENU (.pxmm) — Services / E-commerce / AI Solutions
   ============================================================ */
@keyframes pxmmIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.pxmm-bd { position:fixed; left:0; right:0; top:72px; bottom:0; background:rgba(14,14,15,.28); z-index:110; }
.pxmm-bd[hidden] { display:none; }
.pxmm-wrap { position:fixed; left:0; right:0; top:72px; z-index:120; }
.pxmm-panel { background:#fff; border-top:1px solid #EEEDE8; box-shadow:0 34px 60px -34px rgba(14,14,15,.3); animation:pxmmIn .22s cubic-bezier(.16,1,.3,1); }
.pxmm-panel[hidden] { display:none; }
.pxmm-inner { max-width:1280px; margin:0 auto; padding:30px 32px 34px; display:grid; grid-template-columns:repeat(4,1fr) 1fr; gap:30px; }
.pxmm-col { min-width:0; }
.pxmm-head {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em; color:#0E0E0F;
  text-decoration:none; display:inline-block; margin-bottom:12px; transition:color .15s ease;
}
.pxmm-head-mut { color:#9A9A97; }
a.pxmm-head:hover, a.pxmm-head:focus-visible { color:#FF1252; }
.pxmm-link { display:block; font-size:13.5px; color:#56565A; text-decoration:none; padding:6px 0; transition:color .15s ease, transform .15s ease; }
.pxmm-link:hover, .pxmm-link:focus-visible { color:#FF1252; transform:translateX(3px); }
.pxmm-promo { background:#0E0E0F; border-radius:14px; padding:22px; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; }
.pxmm-promo-t { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:#fff; letter-spacing:-.02em; }
.pxmm-promo-s { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#A0A0A4; margin-top:24px; transition:color .15s ease; }
.pxmm-promo:hover .pxmm-promo-s, .pxmm-promo:focus-visible .pxmm-promo-s { color:#FF1252; }
.pxmm-caret { font-size:9px; opacity:.7; margin-left:5px; display:inline-block; }

/* Desktop-only — below 900px the mobile drawer takes over. */
@media (max-width:900px) { .pxmm { display:none !important; } }
@media (prefers-reduced-motion: reduce) { .pxmm-panel { animation:none; } }

/* ============================================================
   SERVICE-DETAIL PAGE BITS
   ============================================================ */
/* Outline button → pink border on hover (service hero secondary). */
.px-hb { transition: border-color .25s ease; }
.px-hb:hover { border-color: #FF1252 !important; }

/* FAQ accordion (native <details>). */
.px-section details > summary { list-style: none; }
.px-section details > summary::-webkit-details-marker { display: none; }
.px-section details[open] .faq-plus { transform: rotate(45deg); }

/* Two-column service sections stack on narrow screens. */
@media (max-width: 820px) { [data-2col] { grid-template-columns: 1fr !important; } }

/* ============================================================
   FREE REVENUE AUDIT landing page
   ============================================================ */
.px-audit-input {
  width: 100%; padding: 13px 15px; font-size: 15px;
  font-family: 'Hanken Grotesk', sans-serif;
  border: 1px solid #DEDDD7; border-radius: 10px; outline: none; color: #0E0E0F; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.px-audit-input:focus { border-color: #FF1252; box-shadow: 0 0 0 3px rgba(255,18,82,0.12); }
.px-audit-submit { transition: background .25s ease, transform .2s ease; }
.px-audit-submit:hover { background: #0E0E0F !important; transform: translateY(-1px); }
.px-audit-cta { animation: pxGradFlow 14s ease infinite; }

/* Hero + form stacks below 960px; deliverables stack below 900px. */
@media (max-width: 959px) { .px-audit-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 899px) { .px-audit-3col { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) { .px-audit-cta { animation: none !important; } }