/* ==========================================================================
   Theme: Tech Product - mature product marketing and operational proof.
   ========================================================================== */

[data-theme="saas"] {
  --bg: #f5f7fb;
  --bg-soft: #edf1f8;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #667087;
  --accent: #3157d5;
  --accent-ink: #ffffff;
  --accent-2: #14a58b;
  --line: #dce2ed;
  --border-w: 1px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 10px 28px rgba(29,49,91,0.08);
  --shadow-strong: 0 20px 48px rgba(29,49,91,0.14);
  --font-display: "Inter", system-ui, sans-serif;
  --h-weight: 800;
  --h-tracking: -0.04em;
  --h-transform: none;
  --kicker-font: "IBM Plex Mono", monospace;
  --btn-radius: 9px;
  --container-max: 1200px;
  --section-space: clamp(4.5rem, 8vw, 7rem);
}

[data-theme="saas"] body {
  background:
    radial-gradient(circle at 50% -12rem, rgba(49,87,213,0.18), transparent 32rem),
    var(--bg);
}
[data-theme="saas"] .site-header {
  width: min(1160px, calc(100% - 1.5rem));
  margin: 0.65rem auto 0;
  border: 1px solid rgba(220,226,237,0.9);
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow);
}
[data-theme="saas"] .brand-name i { color: var(--accent); }
[data-theme="saas"] .nav-link { font-weight: 600; }
[data-theme="saas"] .hero { padding-top: clamp(5rem, 10vw, 8rem); }
[data-theme="saas"] .hero-title { font-size: clamp(2.7rem, 6vw, 4.8rem); line-height: 0.98; }
[data-theme="saas"] .hero-title em { color: var(--accent); }
[data-theme="saas"] .hero-sub { font-size: 1.07rem; }
[data-theme="saas"] .kicker { color: var(--accent-2); }

[data-theme="saas"] .btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 18px rgba(49,87,213,0.22); }
[data-theme="saas"] .btn--primary:hover { background: #2548bd; transform: translateY(-2px); }
[data-theme="saas"] .hp { background: #fff; box-shadow: var(--shadow); }

[data-theme="saas"] .ticker { border-block: 1px solid var(--line); background: #172033; }
[data-theme="saas"] .tk-item { color: #cbd4e5; }
[data-theme="saas"] .tk-sep::before { content: "●"; color: var(--accent-2); }

[data-theme="saas"] .section--alt {
  background:
    linear-gradient(to right, rgba(49,87,213,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(49,87,213,0.035) 1px, transparent 1px),
    var(--bg-soft);
  background-size: 32px 32px;
}

[data-theme="saas"] .svc-card,
[data-theme="saas"] .why-card,
[data-theme="saas"] .demo-card,
[data-theme="saas"] .step,
[data-theme="saas"] .price-card,
[data-theme="saas"] .form,
[data-theme="saas"] .mode-panel,
[data-theme="saas"] .win--admin {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
[data-theme="saas"] .svc-card:hover,
[data-theme="saas"] .demo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); border-color: #bdc9e5; }
[data-theme="saas"] .svc-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; padding: 0.55rem; border-radius: 9px; color: var(--accent); background: #eef2ff; }
[data-theme="saas"] .why-num { color: var(--accent-2); font-weight: 700; }
[data-theme="saas"] .step-num { border: 0; border-radius: 8px; background: #e9edff; color: var(--accent); }
[data-theme="saas"] .demo-thumb { border: 0; border-radius: 10px; }
[data-theme="saas"] .demo-status { border: 0; border-radius: 6px; background: #e8f6f3; color: #087965; }
[data-theme="saas"] .price-card--featured { border: 2px solid var(--accent); }
[data-theme="saas"] .price-badge { background: var(--accent); }
[data-theme="saas"] .field input,
[data-theme="saas"] .field select,
[data-theme="saas"] .field textarea { background: #f8f9fc; }
[data-theme="saas"] .field input:focus,
[data-theme="saas"] .field select:focus,
[data-theme="saas"] .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49,87,213,0.12); }
[data-theme="saas"] .site-footer { background: #172033; color: #fff; }
[data-theme="saas"] .site-footer p,
[data-theme="saas"] .site-footer a { color: #cbd4e5; }

.mode-card[data-mode="saas"] .mc-prev {
  border: 1px solid #dce2ed;
  border-radius: 10px;
  background: #f5f7fb;
  box-shadow: 0 4px 12px rgba(29,49,91,0.12);
}
.mode-card[data-mode="saas"] .mp-a { inset: 0.5rem 0.5rem auto; height: 0.75rem; border-radius: 5px; background: #172033; }
.mode-card[data-mode="saas"] .mp-b { left: 0.55rem; bottom: 0.55rem; width: 2rem; height: 2.5rem; border-radius: 5px; background: #3157d5; }
.mode-card[data-mode="saas"] .mp-c { right: 0.55rem; bottom: 0.55rem; width: 2.65rem; height: 2.5rem; border-radius: 5px; background: repeating-linear-gradient(to top, #14a58b 0 0.35rem, transparent 0.35rem 0.65rem), #fff; border: 1px solid #dce2ed; }
.mode-card[data-mode="saas"] .mc-aa { left: 0.7rem; top: 1.65rem; color: #172033; font: 700 0.85rem/1 "IBM Plex Mono", monospace; }