/* ============================================================
   ENZO POS — Global Stylesheet
   Shared across: index.html, install.html, privacy.html, terms.html
   ============================================================ */

/* ── Base ── */
* { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #0d9488, #10b981, #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dark canvas background ── */
.dark-canvas { background: #0f172a; }

/* ── Hero gradient ── */
.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(13,148,136,0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 50%,  rgba(13,148,136,0.08), transparent),
    radial-gradient(ellipse 50% 40% at 20% 80%,  rgba(16,185,129,0.06), transparent);
}

/* ── Dot-grid background ── */
.grid-bg {
  background-image: radial-gradient(circle at 1px 1px, rgba(13,148,136,0.08) 1px, transparent 0);
  background-size: 40px 40px;
}

/* ── Scroll-triggered animation classes ── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.slide-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-in-left.visible { opacity: 1; transform: translateX(0); }

.slide-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-in-right.visible { opacity: 1; transform: translateX(0); }

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* ── Staggered children ── */
.stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s;   opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* ── Nav link underline on hover ── */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: #0d9488; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Pulse dot ── */
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Glow pulse (CTA button) ── */
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(13,148,136,0.2); }
  50%       { box-shadow: 0 0 40px rgba(13,148,136,0.4); }
}

/* ── Float animations (decorative icons) ── */
.float-slow       { animation: floatGroup 9s ease-in-out infinite; }
.float-slow-delay { animation: floatGroup 9s ease-in-out infinite; animation-delay: -4s; }
@keyframes floatGroup {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── FAQ accordion ── */
.faq-item {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.875rem;
  background: rgba(255,255,255,0.025);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-item[open] {
  border-color: rgba(13,148,136,0.2);
  background: rgba(13,148,136,0.04);
}
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  color: #f4f4f5;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-summary { color: #fff; }
.faq-icon {
  color: #52525b;
  transition: transform 0.25s ease, color 0.2s ease;
  flex-shrink: 0;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); color: #0d9488; }
details[open] .faq-answer { animation: fadeIn 0.25s ease; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Legal pages (privacy.html & terms.html) ── */
.prose-legal h2 {
  color: #f4f4f5; font-size: 1.125rem; font-weight: 600;
  margin-top: 2.5rem; margin-bottom: 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.prose-legal h3 { color: #e4e4e7; font-size: 0.9375rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-legal p  { color: #a1a1aa; font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.875rem; }
.prose-legal ul { color: #a1a1aa; font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.875rem; padding-left: 1.25rem; list-style: disc; }
.prose-legal ul li { margin-bottom: 0.25rem; }
.prose-legal ol { color: #a1a1aa; font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.875rem; padding-left: 1.25rem; list-style: decimal; }
.prose-legal ol li { margin-bottom: 0.25rem; }
.prose-legal a { color: #2dd4bf; text-decoration: underline; text-underline-offset: 2px; }
.prose-legal a:hover { color: #5eead4; }
.prose-legal strong { color: #e4e4e7; font-weight: 600; }

.section-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 0.875rem; padding: 1.5rem 1.75rem; margin-bottom: 0.75rem; }
.section-card:hover { border-color: rgba(13,148,136,0.15); background: rgba(13,148,136,0.03); }

.toc-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; color: #71717a; font-size: 0.8125rem; transition: color 0.2s, background 0.2s; }
.toc-link:hover { color: #2dd4bf; background: rgba(13,148,136,0.07); }

.highlight-box { background: rgba(13,148,136,0.07); border: 1px solid rgba(13,148,136,0.18); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.highlight-box p { color: #5eead4; margin-bottom: 0; font-size: 0.875rem; }

.warning-box { background: rgba(234,179,8,0.07); border: 1px solid rgba(234,179,8,0.18); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.warning-box p { color: #fde68a; margin-bottom: 0; font-size: 0.875rem; }