/* ═══════════════════════════════════════════════════════════════
   STUDIO.AI — True Apple Design System v20
   Built from scratch. Every pixel considered.
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --st-white: #fbfbfd;
  --st-black: #1d1d1f;
  --st-gray1: #f5f5f7;
  --st-gray2: #e8e8ed;
  --st-gray3: #d2d2d7;
  --st-gray4: #86868b;
  --st-gray5: #6e6e73;
  --st-blue: #0071e3;
  --st-purple: #5856d6;
  --st-violet: #af52de;
  --st-pink: #ff2d55;
  --st-green: #34c759;
  --st-orange: #ff9500;
  --st-red: #ff3b30;
  --st-font: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;
  --st-spring: cubic-bezier(.16, 1, .3, 1);
  --st-ease: cubic-bezier(.25, .46, .45, .94);
  --s-font: var(--st-font);
  --s-text: var(--st-black);
  --s-text2: var(--st-gray5);
  --s-text3: var(--st-gray4);
  --s-bg: #ffffff;
  --s-bg2: var(--st-gray1);
  --s-surface3: var(--st-gray2);
  --s-border: rgba(0,0,0,.08);
  --s-border-h: rgba(0,0,0,.16);
  --s-accent: var(--st-blue);
  --s-radius: 20px;
  --s-radius-sm: 12px;
  --s-radius-xs: 8px;
  --s-ease: var(--st-ease);
  --s-ease-out: var(--st-spring);
}
/* Final theme lock: Apple-inspired white */
:root{
  --st-bg:#ffffff;
  --st-bg-soft:#f5f5f7;
  --st-bg-card:#ffffff;
  --st-text:#1d1d1f;
  --st-sub:#6e6e73;
  --st-line:rgba(0,0,0,.08);
  --st-blue:#0071e3;
}

/* ── GLOBAL ── */
.px-page {
  font-family: var(--st-font) !important;
  background: #ffffff !important;
  color: var(--st-black) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
[data-theme="dark"] .px-page,
[data-theme="dark"].px-page {
  background: #ffffff !important;
  color: var(--st-black) !important;
}
.px-page *, .px-page *::before, .px-page *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════
   HERO — Apple PixelOS-inspired, clean white
   ═══════════════════════════════════════════════════════════════ */
.st-hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,113,227,.05) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 80%, rgba(175,82,222,.03) 0%, transparent 50%),
              #fbfbfd;
  color: #1d1d1f;
}

/* Subtle ambient orbs */
.st-hero::before {
  content: '';
  position: absolute;
  top: -20%; left: -10%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(0,113,227,.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: stOrb 20s ease-in-out infinite;
}
.st-hero::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -15%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(175,82,222,.04) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: stOrb 25s ease-in-out 3s infinite;
}
@keyframes stOrb {
  0% { transform: translate(0,0) scale(1); }
  25% { transform: translate(30px,-20px) scale(1.1); }
  50% { transform: translate(-10px,25px) scale(.95); }
  75% { transform: translate(-25px,-15px) scale(1.05); }
  100% { transform: translate(0,0) scale(1); }
}

/* Fine grain texture */
.st-hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.st-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

/* Eyebrow pill */
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 980px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  font-weight: 500;
  color: #6e6e73;
  letter-spacing: .02em;
  text-transform: none;
  -webkit-text-fill-color: #6e6e73;
  margin-bottom: 32px;
  opacity: 0;
  animation: stUp .8s var(--st-spring) .15s forwards;
}
.st-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34c759;
  animation: stPulse 2s infinite;
}
@keyframes stPulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:.8; transform:scale(1.08); } }

/* Title — Steve Jobs keynote scale */
.st-hero-title {
  font-size: clamp(80px, 16vw, 180px) !important;
  font-weight: 700 !important;
  letter-spacing: -.065em !important;
  line-height: .86 !important;
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  margin-bottom: 28px !important;
  opacity: 0;
  animation: stUp .9s var(--st-spring) .3s forwards;
  text-shadow: none !important;
}

/* Tagline — below massive title */
.st-hero-tagline {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 500;
  color: #86868b;
  -webkit-text-fill-color: #86868b;
  letter-spacing: -.015em;
  line-height: 1.35;
  max-width: 640px;
  margin: 0 auto 24px;
  opacity: 0;
  animation: stUp .9s var(--st-spring) .4s forwards;
}

/* Subtitle / description */
.st-hero-sub {
  font-size: clamp(16px, 2.2vw, 21px) !important;
  font-weight: 400 !important;
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
  line-height: 1.6 !important;
  letter-spacing: .007em !important;
  max-width: 580px !important;
  margin: 0 auto 56px !important;
  opacity: 0;
  animation: stUp .9s var(--st-spring) .5s forwards;
  text-shadow: none !important;
}

/* CTAs */
.st-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: stUp .8s var(--st-spring) .6s forwards;
}
.st-btn-link {
  color: #0071e3; font-weight: 400; font-size: 17px;
  padding: 16px 8px; background: none; border: none;
  cursor: pointer; font-family: var(--st-font);
  transition: color .2s; text-decoration: none;
}
.st-btn-link:hover { color: #0077ed; text-decoration: none; }
.st-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 36px;
  border-radius: 980px;
  background: #0071e3;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--st-font);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .3s var(--st-spring);
  letter-spacing: -.01em;
}
.st-btn-primary:hover {
  background: #0077ed;
  transform: scale(1.04);
  text-decoration: none;
  color: #fff;
}
.st-btn-primary svg { transition: transform .3s var(--st-spring); }
.st-btn-primary:hover svg { transform: translateX(3px); }

.st-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 36px;
  border-radius: 980px;
  background: rgba(0,0,0,.04);
  color: #1d1d1f;
  font-size: 17px;
  font-weight: 500;
  font-family: var(--st-font);
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  cursor: pointer;
  transition: all .4s var(--st-spring);
  letter-spacing: -.01em;
}
.st-btn-secondary:hover { background: rgba(0,0,0,.06); transform: scale(1.04); color: #1d1d1f; text-decoration: none; }
.st-btn-secondary svg { transition: transform .2s; }
.st-btn-secondary:hover svg { transform: translateY(2px); }

/* Hero Visual */
.st-hero-visual {
  position: relative;
  z-index: 2;
  margin-top: 72px;
  opacity: 0;
  animation: stUp 1s var(--st-spring) .65s forwards;
  width: 100%;
  max-width: 960px;
  padding: 0 20px;
}
.st-hero-mockup { position: relative; }
.st-mockup-frame {
  background: rgba(0,0,0,.02);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  padding: 32px;
}
.st-mockup-split { display: flex; align-items: stretch; gap: 0; }
.st-mockup-before, .st-mockup-after { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.st-mockup-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #86868b; text-align: center;
}
.st-mockup-img {
  border-radius: 12px; overflow: hidden;
  background: #f5f5f7;
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
}
.st-mockup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-mockup-img svg { width: 100%; height: 100%; }
.st-mockup-video {
  border-radius: 12px; overflow: hidden;
  background: #1d1d1f; aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  position: relative; border: 1px solid rgba(0,0,0,.08);
}
.st-mockup-video video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.st-mockup-video svg { width: 100%; height: 100%; }
.st-mockup-led-glow {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center 40%, rgba(88,86,214,.15) 0%, transparent 70%);
  pointer-events: none; animation: ledPulse 3s ease-in-out infinite;
}
@keyframes ledPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.st-play-badge {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; border: 1px solid rgba(255,255,255,.2);
}
.st-mockup-divider { width: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-mockup-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--st-purple), var(--st-violet));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; box-shadow: 0 4px 16px rgba(88,86,214,.4);
}

/* Trust */
.st-hero-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-top: 52px; flex-wrap: wrap;
  opacity: 0; animation: stUp .8s var(--st-spring) .9s forwards;
  position: relative; z-index: 2;
}
.st-hero-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #86868b; font-weight: 500;
}

/* Hero Stats — PixelOS style */
.st-hero-stats {
  display: flex; justify-content: center;
  gap: 80px; margin-top: 80px;
  opacity: 0; animation: stUp .8s var(--st-spring) 1s forwards;
  position: relative; z-index: 2;
}
.st-hstat { text-align: center; }
.st-hstat-num {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700; letter-spacing: -.04em;
  line-height: 1; color: #1d1d1f;
}
.st-hstat-label {
  font-size: 12px; font-weight: 500;
  color: #86868b; margin-top: 8px;
  letter-spacing: .08em; text-transform: uppercase;
}

@keyframes stUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats ribbon — now moved into hero, keep class for backwards compat */
.st-stats-ribbon { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.st-section { padding: 200px 24px !important; position: relative; overflow: hidden; }
.st-section-light { background: #fbfbfd !important; }
.st-section-dark { background: #fbfbfd !important; }
.st-section + .st-section { border-top: 1px solid rgba(0,0,0,.04); }
.st-section-inner { max-width: 1080px; margin: 0 auto; text-align: center !important; }
.st-section-eyebrow {
  font-size: 17px !important; font-weight: 600 !important;
  color: #0071e3 !important; -webkit-text-fill-color: #0071e3 !important;
  letter-spacing: -.01em !important; text-transform: none !important; margin-bottom: 16px !important;
}
.st-section-title {
  font-size: clamp(48px, 8vw, 96px) !important;
  font-weight: 700 !important; letter-spacing: -.045em !important;
  line-height: 1.02 !important; color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  margin-bottom: 28px !important; text-shadow: none !important;
}
.st-section-sub {
  font-size: clamp(17px,2.2vw,21px) !important; font-weight: 400 !important;
  color: #6e6e73 !important; -webkit-text-fill-color: #6e6e73 !important;
  line-height: 1.58 !important; max-width: 640px; margin: 0 auto 80px;
  letter-spacing: .007em;
}
.st-section-gray { background: #f5f5f7 !important; }
.st-section-gray .st-section-eyebrow { color: #0071e3 !important; -webkit-text-fill-color: #0071e3 !important; }
.st-section-gray .st-section-title { color: #1d1d1f !important; -webkit-text-fill-color: #1d1d1f !important; }
.st-section-gray .st-section-sub { color: #6e6e73 !important; -webkit-text-fill-color: #6e6e73 !important; }

/* ═══════════════════════════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════════════════════════ */
.st-steps-showcase {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px; margin-top: 72px; text-align: center !important;
}
.st-step-card {
  background: var(--st-gray1) !important; border-radius: 28px !important;
  padding: 48px 28px 40px !important; position: relative; overflow: hidden;
  transition: transform .5s var(--st-spring), box-shadow .5s var(--st-spring);
  border: 1px solid rgba(0,0,0,.04) !important; box-shadow: none !important;
}
.st-step-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.08) !important;
}
.st-step-num {
  position: absolute; top: 14px; right: 20px;
  font-size: 72px; font-weight: 800;
  color: rgba(0,0,0,.03) !important; -webkit-text-fill-color: rgba(0,0,0,.03) !important;
  line-height: 1; letter-spacing: -.04em; pointer-events: none;
}
.st-step-visual { margin-bottom: 24px; }
.st-step-icon {
  width: 64px; height: 64px; border-radius: 18px;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 24px;
  transition: transform .4s var(--st-spring);
}
.st-step-card:hover .st-step-icon { transform: scale(1.08); }
.st-step-icon.blue { background: rgba(0,113,227,.08) !important; color: var(--st-blue) !important; }
.st-step-icon.purple { background: rgba(88,86,214,.08) !important; color: var(--st-purple) !important; }
.st-step-icon.pink { background: rgba(255,45,85,.08) !important; color: var(--st-pink) !important; }
.st-step-card h3 {
  font-size: 21px !important; font-weight: 700 !important;
  color: var(--st-black) !important; -webkit-text-fill-color: var(--st-black) !important;
  margin-bottom: 10px; letter-spacing: -.02em;
}
.st-step-card p {
  font-size: 15px !important; color: var(--st-gray5) !important;
  -webkit-text-fill-color: var(--st-gray5) !important; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   CAPABILITIES — Dark glass cards
   ═══════════════════════════════════════════════════════════════ */
.st-caps-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px; margin-top: 72px; text-align: left !important;
}
.st-cap-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 24px !important; padding: 36px 28px !important;
  transition: all .5s var(--st-spring);
  box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04) !important;
  position: relative; overflow: hidden;
}
.st-cap-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.07) !important;
}
.st-cap-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(0,113,227,.08) !important;
  display: flex !important; align-items: center; justify-content: center;
  margin-bottom: 20px; color: #0071e3 !important;
  transition: transform .4s var(--st-spring);
}
.st-cap-card:hover .st-cap-icon { transform: scale(1.1); }
.st-cap-card h3 {
  font-size: 19px !important; font-weight: 700 !important;
  color: #1d1d1f !important; -webkit-text-fill-color: #1d1d1f !important;
  margin-bottom: 8px; letter-spacing: -.02em;
}
.st-cap-card p {
  font-size: 15px !important;
  color: #86868b !important; -webkit-text-fill-color: #86868b !important;
  line-height: 1.6;
}

/* Clean CTA section */
.st-cta-clean {
  text-align: center;
}

/* Prevent divider artifacts */
.st-section + .st-section::before,
.st-stats-ribbon + .st-section::before,
.st-section + .st-stats-ribbon::before,
.st-hero + .st-stats-ribbon::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SHOWCASE
   ═══════════════════════════════════════════════════════════════ */
.st-showcase { padding: 120px 24px !important; background: var(--st-gray1) !important; position: relative; overflow: hidden; }
.st-showcase-inner { max-width: 1200px; margin: 0 auto; }
.st-showcase-header { text-align: center !important; margin-bottom: 48px; }
.st-showcase-slider {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 8px 0 20px; scrollbar-width: none;
}
.st-showcase-slider::-webkit-scrollbar { display: none; }
.st-showcase-card {
  flex: 0 0 300px; scroll-snap-align: start;
  border-radius: 20px; overflow: hidden; background: #fff !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  transition: transform .4s var(--st-spring), box-shadow .4s var(--st-spring);
  cursor: pointer; position: relative;
}
.st-showcase-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0,0,0,.1) !important; }
.st-showcase-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #0f0f1a; }
.st-showcase-meta { padding: 14px 16px; }
.st-showcase-meta .st-showcase-name { font-size: 14px !important; font-weight: 600 !important; color: var(--st-black) !important; -webkit-text-fill-color: var(--st-black) !important; margin-bottom: 2px; }
.st-showcase-meta .st-showcase-date { font-size: 12px !important; color: var(--st-gray4) !important; -webkit-text-fill-color: var(--st-gray4) !important; }
.st-showcase-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -80%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; border: 1px solid rgba(255,255,255,.25);
  opacity: 0; transition: opacity .3s;
}
.st-showcase-card:hover .st-showcase-play { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */
.st-reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s var(--st-spring), transform .7s var(--st-spring);
}
.st-reveal.st-visible { opacity: 1; transform: translateY(0); }
.st-reveal[data-st-delay="1"] { transition-delay: .1s; }
.st-reveal[data-st-delay="2"] { transition-delay: .2s; }
.st-reveal[data-st-delay="3"] { transition-delay: .3s; }
.st-reveal[data-st-delay="4"] { transition-delay: .4s; }
.st-reveal[data-st-delay="5"] { transition-delay: .5s; }

/* ═══════════════════════════════════════════════════════════════
   CREATE SECTION
   ═══════════════════════════════════════════════════════════════ */
.s-create {
  padding: 160px 0 120px;
  background: #fff;
}
.s-create-header {
  text-align: center;
  margin-bottom: 56px;
}
.s-wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.s-wrap-wide { max-width: 1120px; }
.s-wrap-narrow { max-width: 660px; }
.s-eyebrow {
  font-size: 17px; font-weight: 600;
  letter-spacing: -.01em;
  color: #0071e3; margin-bottom: 16px;
}
.s-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700; letter-spacing: -.03em;
  line-height: 1.08; color: var(--st-black);
}
.s-subtitle {
  font-size: 17px; color: var(--st-gray5);
  line-height: 1.6; max-width: 520px; margin: 14px auto 0;
}

/* Upload Zone */
.px-upload-zone {
  position: relative;
  border: 2px dashed rgba(0,0,0,.08);
  border-radius: 24px;
  background: var(--st-gray1);
  cursor: pointer;
  transition: all .4s var(--st-spring);
  overflow: hidden;
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.px-upload-zone:hover,
.px-upload-zone.dragover {
  border-color: var(--st-violet);
  background: rgba(175,82,222,.03);
  box-shadow: 0 0 0 4px rgba(175,82,222,.06);
}
.px-upload-zone.has-image {
  border-style: solid; border-color: rgba(0,0,0,.06);
  min-height: auto; background: #fff;
}
.px-upload-content { text-align: center; padding: 60px 32px; }
.px-upload-zone.has-image .px-upload-content { display: none; }
.px-upload-icon { color: var(--st-gray4); margin-bottom: 16px; transition: all .3s; }
.px-upload-zone:hover .px-upload-icon { color: var(--st-violet); transform: translateY(-3px); }
.px-upload-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--st-black); }
.px-upload-sub { font-size: 14px; color: var(--st-gray4); }
.px-upload-input { display: none; }
.px-upload-preview { display: none; width: 100%; max-height: 480px; object-fit: contain; border-radius: 20px; }
.px-upload-zone.has-image .px-upload-preview { display: block; }
.px-upload-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s; border-radius: 24px;
}
.px-upload-zone.has-image:hover .px-upload-overlay { opacity: 1; }
.px-upload-overlay span {
  color: #fff; font-weight: 600; font-size: 14px;
  background: var(--st-blue); padding: 10px 24px;
  border-radius: 980px; display: inline-flex; align-items: center; gap: 6px;
}

/* Controls */
.px-controls {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 24px 0;
}
.px-control-group label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--st-gray4); margin-bottom: 8px;
}
.px-select {
  width: 100%; padding: 13px 16px;
  background: var(--st-gray1); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; color: var(--st-black);
  font-size: 15px; font-family: var(--st-font);
  outline: none; transition: all .25s; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.px-select:focus { border-color: var(--st-purple); box-shadow: 0 0 0 3px rgba(88,86,214,.1); }

/* Prompt */
.px-prompt-group { margin: 0 0 24px; }
.px-prompt-group label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--st-gray4); margin-bottom: 8px;
}
.px-label-dim { color: var(--st-gray4); font-weight: 400; font-size: .9em; text-transform: none; letter-spacing: 0; }
.px-textarea {
  width: 100%; padding: 14px 16px;
  background: var(--st-gray1); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; color: var(--st-black);
  font-size: 15px; font-family: var(--st-font);
  outline: none; resize: vertical; min-height: 80px;
  line-height: 1.6; transition: all .25s;
}
.px-textarea:focus { border-color: var(--st-purple); box-shadow: 0 0 0 3px rgba(88,86,214,.1); }
.px-textarea::placeholder { color: var(--st-gray4); }

/* Token Bar */
.px-token-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--st-gray1);
  border: 1px solid rgba(0,0,0,.06); border-radius: 14px;
  margin: 0 0 20px;
}
.px-token-balance {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--st-black);
}
.px-token-bar.zero .px-token-balance { color: var(--st-red); }
.px-token-bar.zero { border-color: rgba(255,59,48,.1); background: rgba(255,59,48,.03); }
.px-buy-btn {
  padding: 7px 16px; border: none; border-radius: 980px;
  background: var(--st-blue); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 5px;
}
.px-buy-btn:hover { filter: brightness(1.1); }

/* Token Packs */
.px-token-packs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-top: 14px;
}
.px-token-pack {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 22px 14px;
  background: var(--st-gray1); border: 2px solid transparent;
  border-radius: 16px; cursor: pointer; transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.px-token-pack:hover { background: var(--st-gray2); }
.px-token-pack.selected { border-color: var(--st-purple); background: rgba(88,86,214,.04); }
.px-pack-tokens { font-size: 1.8rem; font-weight: 700; color: var(--st-black); line-height: 1; }
.px-pack-label { font-size: 12px; color: var(--st-gray5); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.px-pack-price { font-size: 16px; font-weight: 600; color: var(--st-purple); margin-top: 4px; }
.px-pack-badge {
  position: absolute; top: -9px; right: -4px;
  padding: 3px 9px;
  background: linear-gradient(135deg, var(--st-purple), var(--st-violet));
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; border-radius: 980px;
}
.px-pack-save {
  font-size: 11px; font-weight: 600; color: var(--st-green);
  margin-top: 2px;
}

/* Generate Button */
.px-generate-btn {
  width: 100%; padding: 18px; border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--st-purple), var(--st-violet));
  color: #fff; font-size: 17px; font-weight: 600;
  font-family: var(--st-font); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .3s var(--st-spring);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(88,86,214,.2);
}
.px-generate-btn::after { content: none; }
.px-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(88,86,214,.3);
}
.px-generate-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; box-shadow: none; }
.px-generate-btn:active:not(:disabled) { transform: scale(.98); }

/* Progress */
.px-progress {
  display: none; margin: 24px 0; background: #fff;
  border: 1px solid rgba(0,0,0,.06); border-radius: 24px;
  padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.px-progress.active { display: block; animation: stSlideUp .4s var(--st-spring); }
@keyframes stSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.px-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.px-progress-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; color: var(--st-black); }
.px-progress-title .spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--st-gray2); border-top-color: var(--st-blue);
  border-radius: 50%; animation: stSpin .7s linear infinite;
}
@keyframes stSpin { to { transform: rotate(360deg); } }
.px-progress-time { font-size: 13px; color: var(--st-gray4); font-variant-numeric: tabular-nums; font-weight: 600; }
.px-progress-bar-bg { height: 3px; background: var(--st-gray2); border-radius: 100px; overflow: hidden; margin-bottom: 14px; }
.px-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--st-blue), var(--st-purple), var(--st-violet));
  border-radius: 100px; width: 0%; transition: width .6s;
}
.px-progress-steps { display: flex; gap: 16px; flex-wrap: wrap; }
.px-progress-step { font-size: 12px; font-weight: 500; color: var(--st-gray4); display: flex; align-items: center; gap: 5px; transition: color .3s; }
.px-progress-step.done { color: var(--st-green); }
.px-progress-step.active { color: var(--st-blue); }

/* Error */
.px-error {
  display: none; margin: 24px 0;
  background: rgba(255,59,48,.04);
  border: 1px solid rgba(255,59,48,.1);
  border-radius: 14px; padding: 16px 20px;
  color: var(--st-red); font-size: 14px; font-weight: 500;
}
.px-error.active { display: flex; align-items: center; gap: 10px; animation: stSlideUp .3s var(--st-spring); }

/* Result */
.px-result { display: none; margin: 24px 0; }
.px-result.active { display: block; animation: stSlideUp .4s var(--st-spring); }
.px-result-card {
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.px-result-video { width: 100%; max-height: 480px; display: block; background: #1d1d1f; }
.px-result-actions { display: flex; gap: 10px; padding: 18px; flex-wrap: wrap; }
.px-btn {
  padding: 11px 22px; border-radius: 980px;
  font-size: 14px; font-weight: 600; font-family: var(--st-font);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all .3s;
  border: 1px solid rgba(0,0,0,.1); background: #fff; color: var(--st-black);
}
.px-btn:hover { background: var(--st-gray1); transform: translateY(-1px); }
.px-btn-primary {
  background: linear-gradient(135deg, var(--st-purple), var(--st-violet));
  border-color: var(--st-purple); color: #fff;
}
.px-btn-primary:hover { box-shadow: 0 6px 20px rgba(88,86,214,.25); }

/* ═══════════════════════════════════════════════════════════════
   HISTORY
   ═══════════════════════════════════════════════════════════════ */
.px-history-section { padding: 80px 0; background: #fff; }
.s-history-header { text-align: center; margin-bottom: 40px; }
.px-history-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.px-history-card {
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px; overflow: hidden;
  transition: all .4s var(--st-spring);
}
.px-history-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.1); }
.px-history-card video { width: 100%; height: 180px; object-fit: cover; background: #1d1d1f; display: block; }
.px-history-card .thumb-placeholder {
  width: 100%; height: 180px; background: var(--st-gray1);
  display: flex; align-items: center; justify-content: center;
  color: var(--st-gray4); font-size: 13px;
}
.px-history-meta { padding: 14px 16px; }
.px-history-meta .status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.px-history-meta .status.done { color: var(--st-green); }
.px-history-meta .status.processing { color: var(--st-orange); }
.px-history-meta .status.error { color: var(--st-red); }
.px-history-meta .date { font-size: 12px; color: var(--st-gray4); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.px-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  align-items: center; justify-content: center; padding: 24px;
}
.px-modal-overlay.active { display: flex; animation: stFadeIn .25s; }
@keyframes stFadeIn { from { opacity: 0; } to { opacity: 1; } }
.px-modal {
  background: #fff; border-radius: 28px;
  padding: 44px 36px 32px; max-width: 420px; width: 100%;
  animation: stModalUp .4s var(--st-spring);
  box-shadow: 0 28px 80px rgba(0,0,0,.2);
}
@keyframes stModalUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.px-modal-header { text-align: center; margin-bottom: 24px; }
.px-modal-header h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.03em; color: var(--st-black); }
.px-modal-header p { font-size: 14px; color: var(--st-gray5); line-height: 1.5; }
.px-modal-body { display: flex; flex-direction: column; gap: 16px; }
.px-modal-body .px-control-group label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--st-gray4); margin-bottom: 8px;
}
.px-modal-note { text-align: center; font-size: 12px; color: var(--st-gray4); margin-top: 12px; opacity: .7; }
.px-input {
  width: 100%; padding: 13px 16px;
  background: var(--st-gray1); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; color: var(--st-black);
  font-size: 15px; font-family: var(--st-font);
  outline: none; transition: all .25s;
}
.px-input:focus { border-color: var(--st-blue); box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
.px-input::placeholder { color: var(--st-gray4); }
.px-input.error { border-color: var(--st-red); box-shadow: 0 0 0 3px rgba(255,59,48,.1); }
.px-required { color: var(--st-red); font-weight: 700; }

/* Legacy animation compatibility */
[data-anim] { transition: opacity .7s var(--st-spring), transform .7s var(--st-spring); }
.anim-init { opacity: 0; transform: translateY(32px); }
.anim-init.visible { opacity: 1; transform: translateY(0); }

/* Legacy class compat */
.px-limit-notice { display: none; }
.s-hero-icon, .s-hero-content, .s-hero-badge, .s-hero-title, .s-hero-sub, .s-hero-cta,
.s-scroll-hint, .s-hero-particles, .s-hero-particle,
.s-specs, .s-cta, .s-how, .s-pillars, .s-pillar, .s-footer { /* unused */ }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-caps-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .st-steps-showcase { grid-template-columns: repeat(2, 1fr) !important; }
  .st-stats-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 36px; }
  .st-mockup-split { flex-direction: column; gap: 14px; }
  .st-mockup-divider { width: auto; height: 32px; flex-direction: row; }
  .st-mockup-frame { padding: 24px; }
  .st-section { padding: 100px 24px !important; }
}
@media (max-width: 600px) {
  .st-hero { padding: 100px 16px 56px !important; min-height: auto; }
  .st-hero-title { font-size: clamp(56px, 18vw, 88px) !important; }
  .st-hero-tagline { font-size: clamp(17px, 4.5vw, 22px); margin-bottom: 12px; }
  .st-hero-sub { font-size: 16px !important; margin-bottom: 36px !important; }
  .st-btn-primary, .st-btn-secondary, .st-btn-link { width: 100%; justify-content: center; }
  .st-hero-stats { gap: 24px; margin-top: 60px; flex-wrap: wrap; }
  .st-hero-visual { margin-top: 48px; }
  .st-mockup-frame { padding: 16px; border-radius: 18px; }
  .st-stats-ribbon { padding: 64px 16px !important; }
  .st-stat-num { font-size: 40px !important; }
  .st-steps-showcase, .st-caps-grid { grid-template-columns: 1fr !important; }
  .st-step-card { border-radius: 22px !important; padding: 36px 24px 32px !important; }
  .st-cap-card { border-radius: 18px !important; padding: 28px 22px !important; }
  .st-section { padding: 80px 16px !important; }
  .st-section-title { font-size: clamp(34px, 10vw, 52px) !important; }
  .st-section-sub { font-size: 16px !important; }
  .st-cta-banner { padding: 48px 24px !important; border-radius: 24px !important; }
  .st-showcase { padding: 64px 16px !important; }
  .st-showcase-card { flex: 0 0 260px; }
  .st-hero-trust { gap: 14px; }
  .s-create { padding: 80px 0 60px; }
  .s-create-header { margin-bottom: 32px; }
  .s-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .px-upload-zone { min-height: 200px; border-radius: 18px; }
  .px-upload-content { padding: 44px 20px; }
  .px-controls { grid-template-columns: 1fr; gap: 12px; margin: 18px 0; }
  .px-select { padding: 14px 16px; font-size: 16px; }
  .px-textarea { font-size: 16px; padding: 13px 14px; }
  .px-generate-btn { padding: 16px; font-size: 16px; border-radius: 14px; }
  .px-progress { padding: 22px 18px; border-radius: 18px; }
  .px-result-actions { flex-direction: column; padding: 14px; gap: 8px; }
  .px-btn { padding: 13px 22px; justify-content: center; border-radius: 14px; }
  .px-history-section { padding: 48px 0; }
  .px-history-grid { grid-template-columns: 1fr; }
  .px-modal { padding: 28px 22px 22px; border-radius: 22px; max-width: 100%; }
  .px-modal-overlay { padding: 16px; align-items: flex-end; }
  .s-wrap, .s-wrap-narrow { padding: 0 20px; }
}
@media (max-width: 380px) {
  .st-hero { padding: 80px 14px 44px !important; }
  .st-hero-title { font-size: clamp(48px, 18vw, 64px) !important; }
  .s-create { padding: 60px 0 48px; }
  .s-wrap, .s-wrap-narrow { padding: 0 16px; }
}
@supports (padding: max(0px)) {
  .st-hero { padding-top: max(120px, env(safe-area-inset-top, 0px) + 80px) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PIXELT THEME ALIGNMENT (Light Apple style)
   ═══════════════════════════════════════════════════════════════ */
.px-page {
  background: #fff !important;
  color: #1d1d1f !important;
}

.navbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.st-hero {
  min-height: auto;
  padding: 132px 24px 56px;
  background:
    radial-gradient(1200px 520px at 50% -20%, rgba(0, 113, 227, 0.14), transparent 70%),
    radial-gradient(1000px 500px at 15% 30%, rgba(88, 86, 214, 0.08), transparent 72%),
    #f5f5f7 !important;
}

.st-hero::before,
.st-hero::after {
  display: none !important;
}

.st-eyebrow {
  color: #0071e3;
  -webkit-text-fill-color: #0071e3;
}

.st-hero-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  letter-spacing: -0.036em !important;
}

.st-grad {
  background: linear-gradient(90deg, #0071e3, #34c759) !important;
}

.st-hero-title .st-grad {
  display: inline-block;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.st-hero-sub {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

.st-btn-primary {
  background: #0071e3;
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.25);
}

.st-btn-primary:hover {
  background: #0077ed;
}

.st-btn-secondary {
  color: #0071e3;
  background: rgba(0, 113, 227, 0.1);
  border-radius: 980px;
}

.st-btn-secondary:hover {
  color: #005ec5;
  background: rgba(0, 113, 227, 0.16);
}

.st-mockup-frame {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12);
}

.st-mockup-label {
  color: #6e6e73;
}

.st-mockup-img,
.st-mockup-video {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.st-hero-trust span {
  color: #6e6e73;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 8px 12px;
}

.st-stats-ribbon,
.st-section,
.st-showcase,
.s-create,
.px-history-section {
  background: #f5f5f7 !important;
}

.st-stats-ribbon {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.st-stat-num,
.st-section-title,
.s-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.st-section-sub,
.s-sub,
.px-upload-hint,
.px-history-head p {
  color: #6e6e73 !important;
}

.st-step-card,
.st-cap-card,
.st-showcase-card,
.st-cta-banner,
.px-create-card,
.px-history-card,
.px-result,
.px-progress,
.px-modal {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.st-cap-card h3,
.st-cap-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.st-cap-card p,
.st-cap-desc {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

.px-upload-zone {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-color: rgba(0, 113, 227, 0.22);
}

.px-generate-btn {
  background: linear-gradient(135deg, #0071e3, #2e9eff) !important;
}

.px-generate-btn:hover {
  filter: brightness(1.03);
}

/* Permanent white theme lock for sections originally marked dark */
.px-page .st-section-dark {
  background: #f5f5f7 !important;
}

.px-page .st-section-dark .st-section-eyebrow {
  color: #0071e3 !important;
  -webkit-text-fill-color: #0071e3 !important;
}

.px-page .st-section-dark .st-section-title,
.px-page .st-section-dark .st-reveal.st-section-title,
.px-page .st-section-dark .st-reveal.st-section-title[style] {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  text-shadow: none !important;
}

.px-page .st-section-dark .st-section-sub,
.px-page .st-section-dark .st-reveal.st-section-sub {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

.px-page .st-section-dark .st-cap-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.px-page .st-section-dark .st-cap-card h3,
.px-page .st-section-dark .st-cap-card .st-cap-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.px-page .st-section-dark .st-cap-card p,
.px-page .st-section-dark .st-cap-card .st-cap-desc {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

/* Ensure create card content stays readable in all states */
.px-page .px-create-card,
.px-page .px-create-card * {
  color: inherit;
}

.px-page .px-upload-title,
.px-page .px-control-group label,
.px-page .px-prompt-group label,
.px-page .px-token-balance,
.px-page .px-progress-title,
.px-page .px-result-actions .px-btn {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.px-page .px-upload-sub,
.px-page .px-label-dim,
.px-page .px-progress-time,
.px-page .px-progress-step,
.px-page .px-history-head p {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

/* Global gradient text fix for all section headings, not just hero */
.px-page .st-grad,
.px-page .st-section-title .st-grad,
.px-page .s-title .st-grad {
  display: inline-block;
  background: linear-gradient(90deg, #0071e3, #34c759) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* White-theme CTA banner fix */
.px-page .st-cta-banner {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border: 1px solid rgba(0, 113, 227, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 113, 227, 0.08) !important;
}

.px-page .st-cta-banner::before {
  background: radial-gradient(circle at 30% 30%, rgba(0, 113, 227, 0.08) 0%, transparent 60%) !important;
}

.px-page .st-cta-banner .st-section-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.px-page .st-cta-banner .st-section-sub {
  color: #6e6e73 !important;
  -webkit-text-fill-color: #6e6e73 !important;
}

.px-page .st-cta-banner .st-btn-primary {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.px-page .st-cta-banner .st-btn-primary:hover {
  background: #0077ed !important;
}

.px-page .st-cta-icon {
  background: rgba(0, 113, 227, 0.1) !important;
  border: 1px solid rgba(0, 113, 227, 0.12) !important;
}

.px-page .st-cta-icon img {
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FINAL PIXELOS DARK THEME ALIGNMENT
   ═══════════════════════════════════════════════════════════════ */
.px-page {
  background: #02050b !important;
  color: #f5f5f7 !important;
}

.px-page .navbar {
  background: rgba(5, 8, 16, 0.78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.px-page .nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

.px-page .nav-link.active,
.px-page .nav-link:hover {
  color: #ffffff !important;
}

.px-page .st-hero,
.px-page .st-stats-ribbon,
.px-page .st-section,
.px-page .st-section-light,
.px-page .st-section-dark,
.px-page .st-showcase,
.px-page .s-create,
.px-page .px-history-section {
  background:
    radial-gradient(900px 460px at 20% 10%, rgba(0, 113, 227, 0.16), transparent 72%),
    radial-gradient(900px 480px at 85% 85%, rgba(175, 82, 222, 0.12), transparent 70%),
    #02050b !important;
}

.px-page .st-hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 150px 24px 90px;
}

.px-page .st-eyebrow,
.px-page .st-section-eyebrow,
.px-page .s-eyebrow {
  color: #2997ff !important;
  -webkit-text-fill-color: #2997ff !important;
}

.px-page .st-hero-title,
.px-page .st-section-title,
.px-page .s-title {
  background: linear-gradient(180deg, #ffffff 12%, rgba(255, 255, 255, 0.56) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.px-page .st-grad,
.px-page .st-section-title .st-grad,
.px-page .s-title .st-grad,
.px-page .st-hero-title .st-grad {
  background: linear-gradient(90deg, #2997ff, #7dd3fc, #34c759) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

.px-page .st-hero-sub,
.px-page .st-section-sub,
.px-page .s-subtitle,
.px-page .px-upload-sub,
.px-page .px-label-dim,
.px-page .px-progress-time,
.px-page .px-progress-step,
.px-page .px-history-head p {
  color: rgba(255, 255, 255, 0.52) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.52) !important;
}

.px-page .st-btn-primary,
.px-page .px-generate-btn,
.px-page .px-btn-primary,
.px-page .px-buy-btn {
  background: #2997ff !important;
  border-color: #2997ff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(41, 151, 255, 0.3) !important;
}

.px-page .st-btn-secondary,
.px-page .px-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.px-page .st-btn-secondary:hover,
.px-page .px-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.px-page .st-mockup-frame,
.px-page .st-step-card,
.px-page .st-cap-card,
.px-page .st-showcase-card,
.px-page .st-cta-banner,
.px-page .px-result,
.px-page .px-result-card,
.px-page .px-progress,
.px-page .px-modal,
.px-page .px-history-card,
.px-page .px-upload-zone,
.px-page .px-token-bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.px-page .st-mockup-label,
.px-page .st-hero-trust span,
.px-page .st-stat-label,
.px-page .px-control-group label,
.px-page .px-prompt-group label,
.px-page .px-token-balance,
.px-page .px-progress-title,
.px-page .px-upload-title,
.px-page .px-modal-header h3,
.px-page .px-result-actions .px-btn,
.px-page .st-step-card h3,
.px-page .st-cap-card h3,
.px-page .st-cap-title {
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}

.px-page .st-step-card p,
.px-page .st-cap-card p,
.px-page .st-cap-desc,
.px-page .px-modal-header p,
.px-page .px-upload-sub,
.px-page .px-history-meta .date {
  color: rgba(255, 255, 255, 0.54) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.54) !important;
}

.px-page .px-select,
.px-page .px-textarea,
.px-page .px-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}

.px-page .px-select option {
  background: #11151d;
  color: #f5f5f7;
}

.px-page .px-textarea::placeholder,
.px-page .px-input::placeholder {
  color: rgba(255, 255, 255, 0.36) !important;
}

.px-page .px-upload-zone:hover,
.px-page .px-upload-zone.dragover {
  background: rgba(41, 151, 255, 0.08) !important;
  border-color: rgba(41, 151, 255, 0.35) !important;
  box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.3) !important;
}

.px-page .px-upload-overlay {
  background: rgba(5, 8, 16, 0.7) !important;
}

.px-page .st-cta-banner::before,
.px-page .st-hero::before,
.px-page .st-hero::after {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   PIXELT CLONE — EXACT PALETTE LOCK
   Matches pixelt landing palette: black base, silver text, blue CTA, glass gray
   ═══════════════════════════════════════════════════════════════ */
.px-page {
  background: #000000 !important;
  color: #ffffff !important;
}

.px-page .st-hero,
.px-page .st-stats-ribbon,
.px-page .st-section,
.px-page .st-section-light,
.px-page .st-section-dark,
.px-page .st-showcase,
.px-page .s-create,
.px-page .px-history-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(0,113,227,.16) 0%, transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(175,82,222,.14) 0%, transparent 30%),
    #000000 !important;
}

.px-page .navbar {
  background: rgba(10,10,12,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.px-page .nav-link {
  color: rgba(255,255,255,.68) !important;
}

.px-page .nav-link.active,
.px-page .nav-link:hover {
  color: #ffffff !important;
}

.px-page .st-eyebrow,
.px-page .st-section-eyebrow,
.px-page .s-eyebrow {
  color: #2997ff !important;
  -webkit-text-fill-color: #2997ff !important;
}

.px-page .st-hero-title,
.px-page .st-section-title,
.px-page .s-title,
.px-page .st-hero-title .st-grad,
.px-page .st-section-title .st-grad,
.px-page .s-title .st-grad,
.px-page .st-grad {
  background: linear-gradient(180deg,#ffffff 18%,rgba(255,255,255,.42) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.px-page .st-hero-sub,
.px-page .st-section-sub,
.px-page .s-subtitle,
.px-page .px-upload-sub,
.px-page .px-label-dim,
.px-page .px-progress-time,
.px-page .px-progress-step,
.px-page .px-history-head p,
.px-page .st-cap-card p,
.px-page .st-step-card p,
.px-page .px-modal-header p,
.px-page .px-history-meta .date {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
}

.px-page .st-stat-label,
.px-page .st-mockup-label,
.px-page .st-hero-trust span {
  color: rgba(255,255,255,.35) !important;
  -webkit-text-fill-color: rgba(255,255,255,.35) !important;
}

.px-page .st-step-card,
.px-page .st-cap-card,
.px-page .st-showcase-card,
.px-page .st-cta-banner,
.px-page .st-mockup-frame,
.px-page .px-upload-zone,
.px-page .px-token-bar,
.px-page .px-result,
.px-page .px-result-card,
.px-page .px-progress,
.px-page .px-modal,
.px-page .px-history-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.px-page .st-step-card h3,
.px-page .st-cap-card h3,
.px-page .st-cap-title,
.px-page .px-upload-title,
.px-page .px-control-group label,
.px-page .px-prompt-group label,
.px-page .px-token-balance,
.px-page .px-progress-title,
.px-page .px-modal-header h3,
.px-page .px-result-actions .px-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.px-page .st-btn-primary,
.px-page .px-generate-btn,
.px-page .px-btn-primary,
.px-page .px-buy-btn {
  background: #2997ff !important;
  border-color: #2997ff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 40px rgba(41,151,255,.22) !important;
}

.px-page .st-btn-secondary,
.px-page .px-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.px-page .px-select,
.px-page .px-textarea,
.px-page .px-input {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.px-page .px-select option {
  background: #111111;
  color: #ffffff;
}

.px-page .px-textarea::placeholder,
.px-page .px-input::placeholder {
  color: rgba(255,255,255,.32) !important;
}

.px-page .px-upload-zone:hover,
.px-page .px-upload-zone.dragover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(41,151,255,.35) !important;
}

/* Final winning layer: unified Apple-inspired white theme */
.px-page,
.studio-page {
  background:
    radial-gradient(circle at 16% 10%, rgba(0,113,227,.10) 0%, transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(175,82,222,.07) 0%, transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
  color: var(--st-text) !important;
}

.px-page .navbar,
.px-page .st-navbar,
.px-page .st-floating-nav,
.px-page .st-nav-shell,
.px-page .st-nav,
.px-page .st-glass,
.studio-page .navbar,
.studio-page .st-navbar,
.studio-page .st-floating-nav,
.studio-page .st-nav-shell,
.studio-page .st-nav,
.studio-page .st-glass {
  background: rgba(255,255,255,.82) !important;
  border-color: var(--st-line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.px-page .nav-link,
.px-page .st-nav-link,
.px-page .st-logo,
.px-page .st-logo-text,
.px-page .st-nav-cta,
.studio-page .nav-link,
.studio-page .st-nav-link,
.studio-page .st-logo,
.studio-page .st-logo-text,
.studio-page .st-nav-cta {
  color: var(--st-text) !important;
}

.px-page .nav-link.active,
.px-page .nav-link:hover,
.px-page .st-nav-link:hover,
.studio-page .nav-link.active,
.studio-page .nav-link:hover,
.studio-page .st-nav-link:hover {
  color: var(--st-blue) !important;
}

.px-page .st-hero,
.px-page .st-stats-ribbon,
.px-page .st-section,
.px-page .st-section-light,
.px-page .st-section-dark,
.px-page .st-showcase,
.px-page .s-create,
.px-page .px-history-section,
.px-page .st-cta-banner,
.studio-page .st-hero,
.studio-page .st-section,
.studio-page .st-section-light,
.studio-page .st-section-dark,
.studio-page .s-create,
.studio-page .st-cta-banner {
  background: transparent !important;
  color: var(--st-text) !important;
}

.px-page .st-mockup-frame,
.px-page .st-step-card,
.px-page .st-cap-card,
.px-page .st-showcase-card,
.px-page .st-cta-banner,
.px-page .px-result,
.px-page .px-result-card,
.px-page .px-progress,
.px-page .px-modal,
.px-page .px-history-card,
.px-page .px-upload-zone,
.px-page .px-token-bar,
.px-page .px-option,
.studio-page .st-mockup-frame,
.studio-page .st-step-card,
.studio-page .st-cap-card,
.studio-page .st-showcase-card,
.studio-page .st-cta-banner,
.studio-page .px-result,
.studio-page .px-progress,
.studio-page .px-modal,
.studio-page .px-upload-zone,
.studio-page .px-token-bar,
.studio-page .px-option {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--st-line) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 14px 44px rgba(0,0,0,.07) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.px-page .st-eyebrow,
.px-page .st-section-eyebrow,
.px-page .s-eyebrow,
.studio-page .st-eyebrow,
.studio-page .st-section-eyebrow,
.studio-page .s-eyebrow {
  color: #0071e3 !important;
  -webkit-text-fill-color: #0071e3 !important;
}

.px-page .st-hero-title,
.px-page .st-section-title,
.px-page .s-title,
.px-page .st-cap-title,
.px-page .st-step-card h3,
.px-page .st-cap-card h3,
.px-page .px-upload-title,
.px-page .px-control-group label,
.px-page .px-prompt-group label,
.px-page .px-token-balance,
.px-page .px-progress-title,
.px-page .px-modal-header h3,
.px-page .px-result-actions .px-btn,
.px-page .px-empty-title,
.studio-page .st-hero-title,
.studio-page .st-section-title,
.studio-page .s-title,
.studio-page .st-cap-title,
.studio-page .st-step-card h3,
.studio-page .st-cap-card h3,
.studio-page .px-upload-title,
.studio-page .px-control-group label,
.studio-page .px-prompt-group label,
.studio-page .px-token-balance,
.studio-page .px-progress-title,
.studio-page .px-modal-header h3,
.studio-page .px-result-actions .px-btn,
.studio-page .px-empty-title,
.px-page p[style*="#f5f5f7"],
.px-page h2[style*="#f5f5f7"],
.px-page p[style*="rgba(255,255,255"],
.studio-page p[style*="#f5f5f7"],
.studio-page h2[style*="#f5f5f7"],
.studio-page p[style*="rgba(255,255,255"] {
  color: var(--st-text) !important;
  -webkit-text-fill-color: var(--st-text) !important;
}

.px-page .st-grad,
.px-page .st-section-title .st-grad,
.px-page .s-title .st-grad,
.px-page .st-hero-title .st-grad,
.studio-page .st-grad,
.studio-page .st-section-title .st-grad,
.studio-page .s-title .st-grad,
.studio-page .st-hero-title .st-grad {
  background: linear-gradient(135deg, #1d1d1f 0%, #0071e3 55%, #5ac8fa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

.px-page .st-hero-sub,
.px-page .st-section-sub,
.px-page .s-subtitle,
.px-page .px-upload-sub,
.px-page .px-label-dim,
.px-page .px-progress-time,
.px-page .px-progress-step,
.px-page .px-history-head p,
.px-page .st-cap-card p,
.px-page .st-step-card p,
.px-page .px-modal-header p,
.px-page .px-history-meta .date,
.px-page .st-stat-label,
.px-page .st-mockup-label,
.px-page .st-hero-trust span,
.studio-page .st-hero-sub,
.studio-page .st-section-sub,
.studio-page .s-subtitle,
.studio-page .px-upload-sub,
.studio-page .px-label-dim,
.studio-page .px-progress-time,
.studio-page .px-progress-step,
.studio-page .px-history-head p,
.studio-page .st-cap-card p,
.studio-page .st-step-card p,
.studio-page .px-modal-header p,
.studio-page .px-history-meta .date,
.studio-page .st-stat-label,
.studio-page .st-mockup-label,
.studio-page .st-hero-trust span {
  color: var(--st-sub) !important;
  -webkit-text-fill-color: var(--st-sub) !important;
}

.px-page .st-btn-primary,
.px-page .px-generate-btn,
.px-page .px-btn-primary,
.px-page .px-buy-btn,
.px-page .st-nav-cta,
.studio-page .st-btn-primary,
.studio-page .px-generate-btn,
.studio-page .px-btn-primary,
.studio-page .px-buy-btn,
.studio-page .st-nav-cta {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0,113,227,.22) !important;
}

.px-page .st-btn-secondary,
.px-page .px-btn,
.studio-page .st-btn-secondary,
.studio-page .px-btn {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
  -webkit-text-fill-color: var(--st-text) !important;
}

.px-page .px-select,
.px-page .px-textarea,
.px-page .px-input,
.studio-page .px-select,
.studio-page .px-textarea,
.studio-page .px-input {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: var(--st-text) !important;
  -webkit-text-fill-color: var(--st-text) !important;
}

.px-page .px-select option,
.studio-page .px-select option {
  background: #ffffff;
  color: #1d1d1f;
}

.px-page .px-textarea::placeholder,
.px-page .px-input::placeholder,
.studio-page .px-textarea::placeholder,
.studio-page .px-input::placeholder {
  color: #8e8e93 !important;
}

.px-page .px-upload-zone:hover,
.px-page .px-upload-zone.dragover,
.studio-page .px-upload-zone:hover,
.studio-page .px-upload-zone.dragover {
  background: rgba(0,113,227,.04) !important;
  border-color: rgba(0,113,227,.35) !important;
  box-shadow: 0 0 0 4px rgba(0,113,227,.08), 0 14px 44px rgba(0,0,0,.07) !important;
}

.px-page .px-upload-overlay,
.studio-page .px-upload-overlay,
.px-page .px-modal,
.studio-page .px-modal {
  background: rgba(245,245,247,.74) !important;
}

.px-page .st-cta-icon img,
.studio-page .st-cta-icon img,
.px-page .st-cta-banner img[style*="filter:brightness(10)"],
.studio-page .st-cta-banner img[style*="filter:brightness(10)"] {
  filter: none !important;
}