/* css/saas-theme.css — Xtract design system for PrintPalette */

/* ── Typography ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Syne:wght@600;700;800&display=swap');

body { font-family:'Inter',sans-serif; font-size:15px; line-height:1.6; }
h1,h2,h3,.font-display { font-family:'Syne',sans-serif; }

/* ── Layout ── */
.pp-container { max-width:1160px; margin:0 auto; padding:0 1.5rem; }
.pp-section   { padding:5rem 0; }

/* ── Nav ── */
.pp-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(8,8,8,0.85);
  border-bottom:1px solid var(--color-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  will-change:transform;
}
[data-theme="light"] .pp-nav { background:rgba(244,244,248,0.88); }
.pp-nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,0.45); }
.pp-nav.pp-nav--hidden { transform:translateY(-100%); }

/* ── Body offset for fixed header ── */
body { padding-top:60px; }
@media (max-width:767px) { body { padding-top:56px; } }

/* ── Back to top button ── */
#pp-back-top {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:200;
  width:40px; height:40px; border-radius:50%;
  background:var(--color-accent); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
  box-shadow:0 4px 16px rgba(124,58,237,.45);
  opacity:0; transform:translateY(12px) scale(.85);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#pp-back-top.visible {
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}
#pp-back-top:hover { background:#6d28d9; transform:translateY(-2px) scale(1.05); }
@media (max-width:767px) {
  #pp-back-top { bottom:1.1rem; right:1rem; width:36px; height:36px; font-size:.72rem; }
}

/* ── Cards ── */
.pp-card {
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease;
  will-change:transform;
}
.pp-card:hover {
  border-color:var(--color-border-hi);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* ── Buttons ── */
.btn-primary {
  background:var(--color-accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  padding:.65rem 1.5rem;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  position:relative;
  overflow:hidden;
  transition:background .2s ease, transform .15s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.btn-primary::after {
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
.btn-primary:hover { background:var(--color-accent-hi); box-shadow:0 4px 20px var(--color-accent-glow); }
.btn-primary:hover::after { left:160%; transition:left .5s ease; }
.btn-primary:active { transform:scale(0.97); }

.btn-secondary {
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border-hi);
  border-radius:var(--radius-md);
  padding:.65rem 1.5rem;
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:.875rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:border-color .2s ease, background .2s ease, transform .15s cubic-bezier(.22,1,.36,1);
}
.btn-secondary:hover { background:var(--color-card); border-color:var(--color-accent); }
.btn-secondary:active { transform:scale(0.97); }

.btn-ghost {
  background:transparent;
  color:var(--color-text-muted);
  border:none;
  border-radius:var(--radius-sm);
  padding:.45rem .9rem;
  font-family:'Inter',sans-serif;
  font-size:.875rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:color .2s, background .2s;
  text-decoration:none;
}
.btn-ghost:hover { color:var(--color-text); background:rgba(255,255,255,0.05); }
[data-theme="light"] .btn-ghost:hover { background:rgba(0,0,0,0.05); }

/* ── Inputs ── */
.pp-input {
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:.65rem 1rem;
  font-family:'Inter',sans-serif;
  font-size:.875rem;
  color:var(--color-text);
  width:100%;
  outline:none;
  min-height:44px;
  transition:border-color .2s, box-shadow .2s;
}
.pp-input:focus { border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft); }
.pp-input::placeholder { color:var(--color-text-dim); }
.pp-label {
  font-family:'Inter',sans-serif;
  font-size:.75rem;
  font-weight:600;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  display:block;
  margin-bottom:.35rem;
}

/* ── Badges ── */
.badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.2rem .65rem;
  border-radius:9999px;
  font-size:.7rem;
  font-weight:600;
  font-family:'Inter',sans-serif;
  letter-spacing:.02em;
}
.badge-purple { background:var(--color-accent-soft); color:var(--color-accent-hi); border:1px solid rgba(124,92,252,0.2); }
.badge-green  { background:rgba(34,197,94,0.1);  color:#22c55e; border:1px solid rgba(34,197,94,0.2); }
.badge-yellow { background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.2); }
.badge-red    { background:rgba(239,68,68,0.1);  color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.badge-new    { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hi)); color:#fff; font-size:.65rem; }

/* ── Skeleton ── */
.skeleton {
  background:linear-gradient(90deg,var(--color-card) 25%,var(--color-card-hover) 50%,var(--color-card) 75%);
  background-size:300% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
  border-radius:var(--radius-md);
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Toast ── */
#pp-toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem;
  z-index:9999;
  display:flex; flex-direction:column; gap:.5rem;
}
.pp-toast {
  background:var(--color-surface);
  border:1px solid var(--color-border-hi);
  border-radius:var(--radius-md);
  padding:.75rem 1.1rem;
  box-shadow:var(--shadow-lg);
  font-size:.85rem;
  display:flex; align-items:center; gap:.5rem;
  animation:ppToastIn .35s cubic-bezier(.22,1,.36,1);
  max-width:320px;
}
@keyframes ppToastIn { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── Xtract hero orb ── */
.xt-orb {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  opacity:.5;
}

/* ── Ticker / marquee ── */
.xt-ticker-wrap {
  overflow:hidden;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  padding:.6rem 0;
  white-space:nowrap;
}
.xt-ticker {
  display:inline-flex;
  gap:2rem;
  animation:ticker 22s linear infinite;
}
.xt-ticker:hover { animation-play-state:paused; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.xt-ticker-item {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
.xt-ticker-dot {
  width:4px; height:4px;
  background:var(--color-accent);
  border-radius:50%;
  flex-shrink:0;
}

/* ── Section label (Xtract "Our Services" style) ── */
.xt-section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  font-weight:700;
  color:var(--color-accent-hi);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:1rem;
}
.xt-section-label::before {
  content:'';
  width:18px; height:2px;
  background:var(--color-accent);
  border-radius:2px;
  flex-shrink:0;
}

/* ── Xtract product card ── */
.product-card {
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.product-card:hover {
  border-color:var(--color-accent-soft);
  box-shadow:0 8px 32px rgba(124,92,252,0.12), 0 2px 8px rgba(0,0,0,0.3);
  transform:translateY(-4px);
}
.product-card img {
  width:100%; height:200px; object-fit:cover;
  background:var(--color-card);
}
.product-img-placeholder {
  width:100%; height:200px;
  background:var(--color-card);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-dim);
}

/* ── Category filter ── */
.category-btn {
  background:transparent;
  border:1px solid var(--color-border);
  color:var(--color-text-muted);
  border-radius:9999px;
  padding:.3rem 1rem;
  font-size:.78rem;
  font-family:'Inter',sans-serif;
  font-weight:500;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.category-btn.active,.category-btn:hover {
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
  box-shadow:0 0 14px var(--color-accent-glow);
}

/* ── Discount badge ── */
.discount-badge {
  background:var(--color-danger);
  color:#fff;
  border-radius:9999px;
  font-size:.62rem;
  font-weight:700;
  padding:.15rem .5rem;
  font-family:'Inter',sans-serif;
}

/* ── Xtract stat/trust item ── */
.xt-stat {
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.xt-stat-num {
  font-family:'Syne',sans-serif;
  font-size:2rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg,var(--color-accent-hi),#c4b5fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.xt-stat-label {
  font-size:.8rem;
  color:var(--color-text-muted);
}

/* ── Xtract glow divider ── */
.xt-glow-line {
  width:60px; height:2px;
  background:linear-gradient(90deg,var(--color-accent),transparent);
  border-radius:2px;
  margin:.75rem 0 1.5rem;
}

/* ── Modal backdrop ── */
#product-modal {
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
#product-modal > div {
  background:var(--color-surface);
  border:1px solid var(--color-border-hi);
  border-radius:var(--radius-xl);
  will-change:transform,opacity;
}

/* ── Focus rings ── */
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible,.pp-input:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

/* ── Scroll progress ── */
#pp-scroll-progress { pointer-events:none; }

/* ── Animations (Framer-level) ── */
.pp-animate {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pp-animate.pp-visible { opacity:1; transform:translateY(0); }
.pp-animate-scale {
  opacity:0;
  transform:scale(.93) translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.pp-animate-scale.pp-visible { opacity:1; transform:scale(1) translateY(0); }
.pp-animate-left {
  opacity:0; transform:translateX(-28px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.pp-animate-left.pp-visible { opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion:reduce) {
  .pp-animate,.pp-animate-scale,.pp-animate-left { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Xtract hero gradient text ── */
.xt-gradient-text {
  background:linear-gradient(135deg,#fff 30%,var(--color-accent-hi) 80%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
[data-theme="light"] .xt-gradient-text {
  background:linear-gradient(135deg,#0d0d0d 30%,var(--color-accent) 80%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* ── Footer ── */
footer {
  font-size: .82rem;
}
footer a {
  position:relative; text-decoration:none;
  color:var(--color-text-muted);
  transition:color .2s;
}
footer a:hover { color:var(--color-text); }
footer a::after {
  content:'';
  position:absolute; bottom:-1px; left:0;
  width:0%; height:1px;
  background:var(--color-accent);
  transition:width .25s cubic-bezier(.22,1,.36,1);
}
footer a:hover::after { width:100%; }


/* ── Footer compact ── */
footer > .pp-container {
  padding-top: 2rem !important;
  padding-bottom: 1.5rem !important;
}
.pp-footer-grid {
  margin-bottom: 1.5rem !important;
  gap: 2rem !important;
}

/* ── Decorative orb blobs ── */
.pp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* ── Responsive ── */
@media (max-width:768px) {
  .pp-section { padding:3rem 0; }
  .pp-container { padding:0 1rem; }
  #pp-toast-container { left:1rem; right:1rem; bottom:1rem; }
  .pp-toast { max-width:none; }
  #category-filters {
    width:100%; overflow-x:auto; padding-bottom:.25rem;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  #category-filters::-webkit-scrollbar { display:none; }
  #product-grid { grid-template-columns:repeat(2,1fr) !important; gap:.75rem !important; }
  #product-modal > div {
    max-width:100% !important; width:100% !important;
    max-height:92vh !important;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
    position:fixed !important; bottom:0 !important;
    left:0 !important; right:0 !important; margin:0 !important;
  }
  #product-modal { align-items:flex-end !important; padding:0 !important; }
  footer .grid { grid-template-columns:1fr !important; gap:1.5rem !important; }
  .pp-footer-grid { grid-template-columns:1fr !important; gap:1.5rem !important; }
}
@media (max-width:380px) {
  #product-grid { grid-template-columns:1fr !important; }
}

/* ── Xtract "New" badge in hero ── */
.xt-hero-new {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--color-border-hi);
  border-radius:9999px;
  padding:.3rem .9rem .3rem .4rem;
  font-size:.75rem;
  font-weight:500;
  color:var(--color-text-muted);
  margin-bottom:1.5rem;
  background:rgba(255,255,255,0.03);
}
.xt-hero-new .badge-new { font-size:.6rem; padding:.15rem .5rem; }

/* ── Xtract benefit card ── */
.xt-benefit-card {
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  background:var(--color-card);
  transition:border-color .25s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.xt-benefit-card:hover {
  border-color:var(--color-border-hi);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.xt-benefit-icon {
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
  border:1px solid rgba(124,92,252,0.2);
}

/* ── Xtract testimonial card ── */
.xt-testimonial {
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  background:var(--color-card);
  transition:border-color .25s, transform .3s cubic-bezier(.22,1,.36,1);
}
.xt-testimonial:hover { border-color:var(--color-border-hi); transform:translateY(-2px); }

/* ── Xtract loading overlay ── */
#loading-overlay {
  position:fixed; inset:0;
  background:var(--color-bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:998;
  gap:1rem;
  transition:opacity .4s;
  /* CRITICAL: allow clicks to pass through once fading */
}
.spinner {
  width:36px; height:36px;
  border:2px solid var(--color-border);
  border-top-color:var(--color-accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.xt-spinner-ring {
  position:absolute;
  width:52px; height:52px;
  border:1px solid var(--color-accent-soft);
  border-radius:50%;
  animation:ringPulse 1.6s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.2);opacity:0} }

/* ── Table scroll ── */
.table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Button spring ── */
.btn-spring { animation:ppSpring .35s cubic-bezier(.36,.07,.19,.97); }
@keyframes ppSpring { 0%{transform:scale(1)} 30%{transform:scale(.93)} 60%{transform:scale(1.04)} 80%{transform:scale(.98)} 100%{transform:scale(1)} }

/* ── Xtract hero grid bg ── */
.xt-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, black 40%, transparent 100%);
}
[data-theme="light"] .xt-grid-bg {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}