/* AiServa sub-pages: shared stylesheet. Extracted from the home page design system (2026-09-24). */

 /* ---------------------------------------------------------------
    AiServa design system, locked decisions:
    - ONE theme: light. No section inverts.
    - ONE accent: violet #7c3aed. No secondary accent, no gradient text.
    - ONE radius scale: chip 12px, card/media 16px, feature panel 24px,
      buttons and pills full-round.
    - Motion: CSS transitions + IntersectionObserver only. No scroll listeners.
   --------------------------------------------------------------- */
 :root {
  color-scheme: light;
  --accent:      #7c3aed;
  --accent-deep: #5b21b6;
  --accent-tint: #f5f3ff;
  --ink:         #14142b;
  --muted:       #56556e;
  --line:        #e7e6f0;
  --r-chip: 12px; --r-card: 16px; --r-panel: 24px;
 }
 html, body { background:#ffffff; color:var(--ink); }
 body { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }

 /* Type: tracking is size-specific, tighter as it grows, body sits near zero. */
 .display { font-family:'DM Sans','Inter',sans-serif; }
 .t-hero  { letter-spacing:-0.035em; line-height:1.02; }
 .t-h2    { letter-spacing:-0.028em; line-height:1.06; }
 .t-h3    { letter-spacing:-0.018em; line-height:1.2; }
 .lede    { line-height:1.65; max-width:60ch; }

 /* Emphasis inside a headline comes from colour, never from a gradient fill. */
 .em { color:var(--accent-deep); }

 /* The one small label style. Used at most three times on the whole page. */
 .eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); display:inline-block; max-width:100%; overflow-wrap:break-word; }

 .brandmark { background:linear-gradient(160deg,#8b5cf6,#5b21b6); }
 .accent-band { background:linear-gradient(160deg,#6d28d9 0%,#5b21b6 60%,#4c1d95 100%); }

 .bg-grid {
  background-image: linear-gradient(to right, rgba(124,58,237,.055) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(124,58,237,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(75% 65% at 50% 0%, #000 30%, transparent 100%);
 }

 .card { background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:0 1px 2px rgba(20,20,43,.04); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
 .card-hover:hover { transform:translateY(-3px); box-shadow:0 24px 48px -22px rgba(20,20,43,.28); border-color:#ddd6fe; }
 .card-hover:active { transform:translateY(-1px); }

 .pill { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; background:var(--accent-tint); border:1px solid #ede9fe; color:var(--accent-deep); font-size:.78rem; font-weight:700; }
 .tag  { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; background:#f4f3fa; border:1px solid var(--line); color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

 .btn { border-radius:999px; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
 .btn:active { transform:translateY(0) scale(.985); }
 .btn-primary { background:var(--accent-deep); color:#fff; box-shadow:0 8px 20px -8px rgba(91,33,182,.55); }
 .btn-primary:hover { background:#4c1d95; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(91,33,182,.6); }
 .btn-ghost { background:#fff; border:1px solid var(--line); color:var(--ink); }
 .btn-ghost:hover { border-color:#a78bfa; background:var(--accent-tint); transform:translateY(-2px); }

 .icon-chip { width:44px; height:44px; border-radius:var(--r-chip); display:inline-flex; align-items:center; justify-content:center; background:var(--accent-tint); border:1px solid #ede9fe; color:var(--accent-deep); flex:none; }
 .icon-chip .material-icons-outlined { font-size:22px; }

 .step-num { font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; color:var(--accent-deep); }

 /* Scroll reveal. Motivated: it sequences a section's content as you arrive at it. */
 @keyframes fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
 .reveal { opacity:0; }
 .reveal.in { animation: fade-up .6s cubic-bezier(.16,1,.3,1) forwards; }

 @media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity:1 !important; animation:none !important; transform:none !important; }
  .card, .btn, .card-hover:hover, .btn-primary:hover, .btn-ghost:hover, .app-card:hover { transition:none !important; transform:none !important; }
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
 }
 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }

 .hairline { border:0; border-top:1px solid var(--line); }
 .mono-num { font-family:'JetBrains Mono',monospace; letter-spacing:-.02em; }

 /* Horizontal scroll-snap rail for the 18-app marketplace. */
 .rail { display:grid; grid-auto-flow:column; grid-auto-columns:82%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:16px; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
 .rail > * { scroll-snap-align:start; }
 @media (min-width:640px) { .rail { grid-auto-columns:44%; } }
 @media (min-width:1024px){ .rail { grid-auto-columns:26%; } }
 /* Wider variant for the five adoption phases, same mechanics. */
 .rail-wide { grid-auto-columns:86%; }
 @media (min-width:640px) { .rail-wide { grid-auto-columns:52%; } }
 @media (min-width:1024px){ .rail-wide { grid-auto-columns:34%; } }

 /* Role tabs: same pill geometry as the buttons, selected state carries the accent. */
 .role-tab { background:#fff; border:1px solid var(--line); color:var(--muted); }
 .role-tab:hover { border-color:#a78bfa; color:var(--ink); }
 .role-tab[aria-selected="true"] { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
 .app-card { transition:border-color .25s ease, box-shadow .25s ease; }
 .app-card:hover { border-color:#ddd6fe; box-shadow:0 18px 36px -20px rgba(20,20,43,.3); }

 .cmp-table th, .cmp-table td { padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; font-size:.875rem; vertical-align:top; }
 .cmp-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; background:#faf9fd; }
 .cmp-table tr:last-child td { border-bottom:0; }
 .cmp-win  { color:#15803d; font-weight:600; }
 .cmp-lose { color:#6b6a80; }

 details summary { cursor:pointer; list-style:none; min-height:44px; }
 details summary::-webkit-details-marker { display:none; }
 details[open] > summary .faq-chevron { transform:rotate(180deg); }
 details summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
 a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

 .nav-top { color:var(--muted); transition:color .15s ease, background-color .15s ease; }
 .nav-top:hover, .nav-top[aria-expanded="true"] { color:var(--ink); background:var(--accent-tint); }
 .nav-caret { transition:transform .2s cubic-bezier(.16,1,.3,1); }
 .nav-top[aria-expanded="true"] .nav-caret { transform:rotate(180deg); }
 .nav-panel { transform:translateX(-50%); z-index:60; }
 .nav-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-card); }
 .nav-panel:not([hidden]) > .nav-card { animation:nav-in .18s cubic-bezier(.16,1,.3,1); }
 @keyframes nav-in { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } }
 .nav-item { transition:background-color .15s ease; }
 .nav-item:hover, .nav-item:focus-visible { background:var(--accent-tint); }

 /* ---- Motion effects, vanilla ports of React Bits patterns (reactbits.dev):
    Spotlight Card, Blur Text, Count Up, Magnet, Tilted Card, Click Spark, Aurora.
    Adapted to the locked system: one violet accent, no gradient text.
    Everything below is switched off under prefers-reduced-motion. */
 .fx-aurora { position:absolute; inset:-20% -10% auto -10%; height:120%; pointer-events:none; overflow:hidden; }
 .fx-aurora span { position:absolute; border-radius:50%; filter:blur(70px); opacity:.30; will-change:transform; }
 .fx-aurora span:nth-child(1) { width:46vw; height:46vw; max-width:640px; max-height:640px; right:4%; top:6%; background:#c4b5fd; animation:aur-a 22s ease-in-out infinite alternate; }
 .fx-aurora span:nth-child(2) { width:34vw; height:34vw; max-width:480px; max-height:480px; left:-4%; top:30%; background:#ddd6fe; animation:aur-b 26s ease-in-out infinite alternate; }
 @keyframes aur-a { to { transform:translate(-8%,10%) scale(1.12); } }
 @keyframes aur-b { to { transform:translate(10%,-6%) scale(.92); } }

 .card.fx-spot { background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px), rgba(124,58,237,.075), transparent 60%); }
 .card.fx-spot:hover { border-color:#ddd6fe; }

 .fx-word { display:inline-block; }
 .fx-blur .fx-word { opacity:0; filter:blur(10px); transform:translateY(10px); }
 .fx-blur.fx-in .fx-word { opacity:1; filter:none; transform:none; transition:opacity .6s cubic-bezier(.16,1,.3,1), filter .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * 45ms); }

 .fx-tilt { perspective:1000px; }
 .fx-tilt > img { transform-style:preserve-3d; will-change:transform; }

 .fx-spark { position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:2px; background:var(--accent); pointer-events:none; z-index:80; animation:spark .5s cubic-bezier(.16,1,.3,1) forwards; }
 @keyframes spark { to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }

 @media (prefers-reduced-motion: reduce) {
  .fx-aurora span { animation:none !important; }
  .fx-blur .fx-word { opacity:1 !important; filter:none !important; transform:none !important; }
 }
 @media (prefers-reduced-transparency: reduce) { .fx-aurora { display:none; } }

 ::selection { background:#ede9fe; color:var(--accent-deep); }

 .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 .focus\:not-sr-only:focus { position:absolute; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
 .prose-list li { margin-bottom:.5rem; }
 .stat-num { font-family:'JetBrains Mono',monospace; letter-spacing:-.03em; }
 .chip-filter[aria-pressed="true"] { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
 [hidden] { display:none !important; }
 [id] { scroll-margin-top:84px; }

/* Screenshot bands (shot_band in layout.php). Same tokens as the product tour: one accent, card radius 16px. */
.pg-fig { margin:0; min-width:0; }
.pg-shot { display:block; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(20,20,43,.04), 0 12px 32px -18px rgba(76,29,149,.28); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .2s ease; }
.pg-shot:hover { transform:translateY(-3px); border-color:#c4b5fd; box-shadow:0 22px 44px -20px rgba(76,29,149,.36); }
.pg-shot:active { transform:translateY(-1px) scale(.995); transition-duration:.1s; }
.pg-shot:focus-visible { outline:3px solid #6d28d9; outline-offset:3px; }
.pg-shot img { display:block; width:100%; height:auto; }
.pg-bar { display:flex; gap:6px; padding:9px 14px; border-bottom:1px solid var(--line); background:#faf9fd; }
.pg-bar i { width:9px; height:9px; border-radius:50%; background:#e2e0ee; }
@media (prefers-reduced-motion:reduce){ .pg-shot, .pg-shot:hover, .pg-shot:active { transition:none; transform:none; } }