/* ============================================
   QUANTUM LEAF SOFTWARE — SERVICES PAGE STYLES
   Service detail sections, platform demos
   ============================================ */

/* --- Service Detail Layout --- */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.service-row-reverse {
  direction: rtl;
}
.service-row-reverse > * {
  direction: ltr;
}

/* --- Service Text --- */
.service-text .eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.service-features {
  margin: var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.service-features li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding-left: var(--sp-4);
  position: relative;
}
.service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 768px) {
  .service-row { grid-template-columns: 1fr; gap: var(--sp-8); }
  .service-row-reverse { direction: ltr; }
  .service-demo { order: -1; }
}

/* --- Demo 1: Browser Frame — GSAP-driven build sequence (Website) --- */
.device-frame { background: var(--bg-elevated); border: 1px solid var(--bg-border); border-radius: var(--r-lg); padding: var(--sp-4); min-height: 280px; }
.device-bar { display: flex; gap: 6px; padding-bottom: var(--sp-3); }
.device-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-border-bright); }
.build-stage { position: relative; display: flex; flex-direction: column; gap: 8px; }
.build-caret {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 20px;
  background: var(--accent);
  opacity: 0;
  will-change: transform, opacity;
}
.build-block {
  height: 0;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform, opacity;
}
.build-nav     { height: 24px; }
.build-hero    { height: 70px; }
.build-section { height: 50px; }
.build-footer  { height: 30px; }
.build-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, var(--accent-glow) 50%, transparent 60%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* --- Demo 2: Phone Frame — GSAP-driven line draw + CTA + toast (Landing) --- */
.phone-frame { background: var(--bg-elevated); border: 1px solid var(--bg-border); border-radius: 28px; padding: var(--sp-6) var(--sp-4); max-width: 220px; margin: 0 auto; min-height: 320px; position: relative; }
.phone-notch { width: 50px; height: 6px; background: var(--bg-border-bright); border-radius: var(--r-full); margin: 0 auto var(--sp-6); }
.phone-screen { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; position: relative; }
.phone-line { width: 100%; height: 10px; background: var(--bg-border-bright); border-radius: var(--r-sm); transform: scaleX(0); transform-origin: left; will-change: transform; }
.phone-line-lg { width: 90%; height: 14px; }
.phone-line-sm { width: 60%; }
.phone-cta-pulse {
  margin-top: var(--sp-6);
  background: var(--accent); color: var(--bg-base);
  font-size: var(--text-sm); font-weight: 600;
  padding: 10px 24px; border-radius: var(--r-full);
  opacity: 0;
  will-change: transform, opacity, box-shadow;
}
.phone-toast {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-full);
  white-space: nowrap;
  will-change: transform, opacity;
}

/* --- Demo: Chat Window (Chatbot) --- */
.demo-chat {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 380px;
  width: 100%;
}
.demo-chat-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bg-border);
  font-size: var(--text-sm);
  font-weight: 600;
}
.demo-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}
.demo-chat-body {
  padding: var(--sp-4);
  height: 240px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.demo-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  line-height: 1.5;
  opacity: 0;
  will-change: transform, opacity;
}
.demo-msg-bot {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  color: var(--text-secondary);
  align-self: flex-start;
  transform: translateY(8px);
}
.demo-msg-user {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border-bright);
  color: var(--text-primary);
  align-self: flex-end;
  transform: translateX(16px);
}
.demo-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-border);
  opacity: 0;
  height: 0;
  overflow: hidden;
  will-change: transform, opacity;
}
.demo-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  will-change: transform, opacity;
}

/* --- Demo: Dashboard (SaaS) --- */
.demo-dashboard {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  min-height: 200px;
}
.demo-dash-sidebar {
  width: 48px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--bg-border);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.demo-dash-logo {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.5;
}
.demo-dash-nav-item {
  width: 20px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 2px;
  opacity: 0.3;
  will-change: opacity;
}
.demo-dash-nav-active {
  background: var(--accent);
  opacity: 0.7;
}
.demo-dash-main {
  flex: 1;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.demo-dash-stats {
  display: flex;
  gap: var(--sp-4);
}
.demo-dash-stat {
  flex: 1;
  text-align: center;
}
.demo-dash-stat-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
}
.demo-dash-stat-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.demo-dash-chart { width: 100%; height: 44px; overflow: visible; }
.demo-dash-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: stroke-dashoffset;
}
.demo-dash-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.demo-dash-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 9px;
  color: var(--text-muted);
  border-radius: 4px;
}
.demo-dash-row-head {
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--bg-border);
  padding-bottom: 8px;
}
.demo-dash-badge {
  color: var(--accent);
  font-weight: 600;
}
.demo-dash-badge-pending {
  color: var(--text-muted);
}

/* --- Demo 5: SERP Frame — climbing rank list (SEO) --- */
.serp-frame { background: var(--bg-elevated); border: 1px solid var(--bg-border); border-radius: var(--r-lg); padding: var(--sp-4); min-height: 280px; }
.serp-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-base); border: 1px solid var(--bg-border); border-radius: var(--r-full); padding: 6px 14px; margin-bottom: var(--sp-4); }
.serp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.serp-search { font-size: var(--text-sm); color: var(--text-secondary); }
.serp-rank-list { position: relative; display: flex; flex-direction: column; gap: 8px; }
.serp-rank-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  will-change: transform, background-color, border-color;
}
.serp-rank-pos {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-muted);
  width: 16px;
}
.serp-rank-name { font-size: var(--text-sm); color: var(--text-secondary); flex: 1; }
.serp-rank-arrow { color: var(--accent); font-weight: 800; opacity: 0; will-change: transform, opacity; }
.serp-rank-you {
  position: relative;
  z-index: 1;
  background: var(--bg-elevated);
  border-color: var(--bg-border-bright);
}
.serp-rank-you .serp-rank-name { color: var(--text-primary); font-weight: 600; }
.serp-rank-you.serp-rank-win {
  background: var(--accent-dim);
  border-color: var(--border-accent);
}
.serp-rank-you.serp-rank-win .serp-rank-pos { color: var(--accent); }

/* --- Demo 6: Workflow Automation (horizontal flow) --- */
.flow-frame { background: var(--bg-elevated); border: 1px solid var(--bg-border); border-radius: var(--r-lg); padding: var(--sp-6); min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }
.flow-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.3; will-change: opacity; }
.flow-icon { position: relative; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 1rem; will-change: background-color, border-color; }
.flow-node.active .flow-icon { background: var(--accent-dim); border: 1px solid var(--border-accent); }
.flow-check {
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--status-online);
  color: var(--bg-base);
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  will-change: transform, opacity;
}
.flow-node span { font-size: var(--text-xs); color: var(--text-muted); }
.flow-arrow { color: var(--text-muted); font-size: 0.85rem; }
.flow-done-chip {
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--r-full);
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}

/* --- CTA Banner (reuses home page styles, defined here too) --- */
.cta-banner {
  background: var(--bg-surface);
  border-top: 1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
}
.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.cta-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.cta-content p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--sp-8);
}
.cta-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn-lg { width: 100%; max-width: 300px; justify-content: center; }
}

/* --- Reduced motion — demo stages shown in finished state --- */
@media (prefers-reduced-motion: reduce) {
  .build-caret, .build-sheen { display: none; }
  .build-block { opacity: 1; transform: scaleY(1); }
  .phone-line { transform: scaleX(1); }
  .phone-cta-pulse { opacity: 1; }
  .phone-toast { display: none; }
  .demo-typing { display: none; }
  .demo-msg { opacity: 1; transform: none; }
  .serp-rank-arrow { opacity: 1; }
  .flow-node { opacity: 1; }
  .flow-node .flow-icon { background: var(--accent-dim); border: 1px solid var(--border-accent); }
  .flow-check { opacity: 1; transform: scale(1); }
  .flow-done-chip { opacity: 1; transform: none; }
}