/* SmartChat Landing v2 — dark theme (ported from Claude Design "SmartChat Landing ES.dc.html") */
/* Component styling stays inline (matching the source design 1:1); this file only
   holds what plain HTML/CSS can't express inline: resets, keyframes, reduced-motion,
   and :hover states (the design used a canvas-only style-hover attribute). */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #131e33;
  color: #eef2fa;
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #9dc0ff; text-decoration: none; }
a:hover { color: #d6e5ff; }
::selection { background: #2f6bff; color: #fff; }

@keyframes scFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes scPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes scTypingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Hero chat "typing…" indicator (hero-chat.js) */
.hero-chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.hero-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #6f7c99; animation: scTypingDot 1.1s ease-in-out infinite; }
.hero-chat-typing span:nth-child(2) { animation-delay: .15s; }
.hero-chat-typing span:nth-child(3) { animation-delay: .3s; }

/* Hero chat scrollable message list */
.hero-chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(125,170,255,.35) transparent; }
.hero-chat-scroll::-webkit-scrollbar { width: 6px; }
.hero-chat-scroll::-webkit-scrollbar-thumb { background: rgba(125,170,255,.35); border-radius: 999px; }
.hero-chat-scroll::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Hover states (canvas used a non-standard style-hover attribute; real CSS needs real classes) */
.nav-link:hover { color: #eef2fa; }
.lang-pill:hover { color: #eef2fa; }
.header-cta:hover { background: #ffffff; transform: translateY(-1px); }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(47, 107, 255, .45), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.cta-banner-btn:hover { transform: translateY(-2px); }
.tour-tab:hover { border-color: rgba(125, 170, 255, .4); }
.tour-nav-btn:hover { background: rgba(255, 255, 255, .1); }
.partner-card:hover { border-color: rgba(125, 170, 255, .35); transform: translateY(-2px); }

/* Tour tab selected state — driven by product-tour.js toggling this class,
   not by each button's inline style (inline background/border-color were
   removed from the buttons so this class is the only thing that moves). */
.tour-tab { background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .09); }
.tour-tab--active { background: rgba(77, 141, 255, .14); border: 1px solid rgba(125, 170, 255, .45); }

/* Product tour panel: one true viewport-width slide per tab, sliding via transform.
   Track/panel widths are set by product-tour.js (not hardcoded here) so the
   tour works with any number of tabs. */
.tour-track {
  display: flex;
  height: clamp(260px, 33vw, 420px);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.tour-panel { position: relative; min-height: 0; }
.tour-panel img, .tour-panel .tour-panel-placeholder {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
  border-radius: 12px;
}
.tour-panel .tour-panel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, .2);
  color: #7f8dab;
  font-size: 13px;
  background: rgba(255, 255, 255, .02);
}