*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--aa-bg);
  color: var(--aa-ink);
  font: var(--aa-weight) var(--aa-size-body)/var(--aa-leading-body) var(--aa-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, b, strong, th { font-weight: var(--aa-weight); }
h1, h2, h3, .aa-display, .aa-h1, .aa-h2, .aa-h3 {
  font-family: var(--aa-font-display);
  color: var(--aa-ink);
  margin: 0;
  text-wrap: balance;
}
.aa-display { font-size: var(--aa-size-display); line-height: 0.98; letter-spacing: var(--aa-track-display); }
h1, .aa-h1 { font-size: var(--aa-size-h1); line-height: 1.02; letter-spacing: -0.02em; }
h2, .aa-h2 { font-size: var(--aa-size-h2); line-height: 1.08; letter-spacing: var(--aa-track-heading); }
h3, .aa-h3 { font-size: var(--aa-size-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--aa-measure); text-wrap: pretty; color: var(--aa-text); }
.aa-lead { font-size: var(--aa-size-lead); line-height: 1.5; color: var(--aa-text); }
.aa-small { font-size: var(--aa-size-small); color: var(--aa-muted); }
a { color: var(--aa-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--aa-focus); outline-offset: 3px; border-radius: 6px; }

.aa-label {
  font: var(--aa-weight) var(--aa-size-label)/1.3 var(--aa-font-sans);
  letter-spacing: var(--aa-track-label);
  text-transform: uppercase;
  color: var(--aa-accent-text);
}
.aa-label--quiet { color: var(--aa-muted); }
.aa-index { font-family: var(--aa-font-display); color: var(--aa-accent-text); font-variant-numeric: tabular-nums; }

.aa-container { width: 100%; max-width: calc(var(--aa-container) + 2 * var(--aa-gutter)); margin-inline: auto; padding-inline: var(--aa-gutter); }
.aa-section { padding-block: var(--aa-section-y); }
.aa-section--alt { background: var(--aa-bg-alt); }
.aa-rule { height: 1px; background: var(--aa-line); border: 0; margin: 0; }

.aa-panel { background: var(--aa-panel); color: #fff; border-radius: var(--aa-radius-lg); padding: clamp(28px, 5vw, 56px); }
.aa-panel :is(h1, h2, h3, .aa-display, p, .aa-label) { color: #fff; }
.aa-panel p { opacity: 0.94; }
.aa-panel .aa-label { opacity: 0.86; }

.aa-btn {
  --_bg: var(--aa-accent); --_fg: var(--aa-on-accent); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--aa-btn-h); padding: 0 var(--aa-btn-pad-x);
  border: 1px solid var(--_bd); border-radius: var(--aa-radius-pill);
  background: var(--_bg); color: var(--_fg);
  font: var(--aa-weight-ui) 1rem/1 var(--aa-font-sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--aa-dur) var(--aa-ease), border-color var(--aa-dur) var(--aa-ease), color var(--aa-dur) var(--aa-ease), transform var(--aa-dur-fast) var(--aa-ease);
}
.aa-btn:hover { --_bg: var(--aa-accent-hover); }
.aa-btn:active { --_bg: var(--aa-accent-press); transform: scale(0.98); }
.aa-btn:focus-visible { outline: none; box-shadow: var(--aa-focus-ring); }
.aa-btn[disabled], .aa-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.aa-btn--soft { --_bg: var(--aa-accent-soft); --_fg: var(--aa-accent-text); }
.aa-btn--soft:hover { --_bg: var(--aa-violet-200); }
.aa-btn--ghost { --_bg: var(--aa-bg); --_fg: var(--aa-ink); --_bd: var(--aa-line-strong); }   
.aa-btn--ghost:hover { --_bg: var(--aa-bg); --_bd: var(--aa-accent-text); --_fg: var(--aa-accent-text); }
.aa-btn--white { --_bg: #fff; --_fg: var(--aa-violet-700); }
.aa-btn--white:hover { --_bg: var(--aa-violet-50); }
.aa-btn--sm { min-height: var(--aa-btn-h-sm); padding: 0 16px; font-size: 0.9375rem; }
.aa-btn__arrow { width: 15px; height: 15px; flex: none; transition: transform var(--aa-dur) var(--aa-ease); }
.aa-btn:hover .aa-btn__arrow { transform: translateX(3px); }

.aa-chip {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  padding: 4px 12px; border-radius: var(--aa-radius-pill);
  background: var(--aa-accent-soft); color: var(--aa-accent-text);
  font: var(--aa-weight) 0.8125rem/1.3 var(--aa-font-sans); white-space: nowrap;
}
.aa-chip--plain { background: var(--aa-surface-soft); color: var(--aa-ink); }
.aa-chip--demo { background: var(--aa-demo-bg); color: var(--aa-demo-text); }
.aa-chip--good { background: var(--aa-good-bg); color: var(--aa-good); }
.aa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aa-live); flex: none; position: relative; }
.aa-dot--pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aa-live);
  animation: aa-pulse 2.4s var(--aa-ease) infinite;
}
@keyframes aa-pulse { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aa-dot--pulse::after { animation: none; } }

.aa-card {
  background: var(--aa-surface); border: var(--aa-border); border-radius: var(--aa-radius-md);
  padding: clamp(20px, 2.6vw, 28px); min-width: 0;
  transition: border-color var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease), transform var(--aa-dur) var(--aa-ease);
}
.aa-card--soft { background: var(--aa-surface-soft); border-color: transparent; }
.aa-card--link { display: block; color: inherit; text-decoration: none; }
.aa-card--link:hover { border-color: var(--aa-violet-300); box-shadow: var(--aa-shadow-md); transform: translateY(-2px); }
.aa-card h3 { font-size: 1.375rem; margin: 10px 0 8px; }
.aa-card p { font-size: 0.97rem; }

.aa-agent { display: grid; gap: 24px; }
@media (min-width: 900px) { .aa-agent { grid-template-columns: 1.1fr 1fr auto; align-items: start; } }
.aa-agent__head { display: grid; gap: 10px; justify-items: start; }
.aa-agent__head h3 { margin: 0; font-size: var(--aa-size-h3); }
.aa-agent__jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.aa-agent__jobs li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.97rem; line-height: 1.45; color: var(--aa-ink); }
.aa-agent__jobs svg { width: 20px; height: 20px; color: var(--aa-accent-text); }
.aa-agent__actions { display: grid; gap: 10px; min-width: 190px; }

.aa-case { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.aa-case__media { position: relative; aspect-ratio: 16 / 9; background: var(--aa-violet-900); overflow: hidden; }
.aa-case__media > img, .aa-case__media > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-case__play {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: var(--aa-radius-pill);
  background: rgba(255, 255, 255, 0.95); color: var(--aa-violet-900);
  font: var(--aa-weight-ui) 0.8125rem/1 var(--aa-font-sans);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.aa-case__play svg { width: 15px; height: 15px; color: var(--aa-violet-600); }
.aa-case__body { display: grid; gap: 12px; padding: 22px 22px 18px; }
.aa-case__body h3 { margin: 0; font-size: 1.375rem; }
.aa-case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.aa-case__result { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px 18px; }
.aa-case__result > div { background: var(--aa-surface-soft); border-radius: 14px; padding: 12px 14px; }
.aa-case__result .aa-label { color: var(--aa-muted); }
.aa-case__result > div + div .aa-label { color: var(--aa-accent-text); }
.aa-case__num { font: var(--aa-weight) 1.75rem/1.05 var(--aa-font-display); color: var(--aa-ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.aa-case__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: var(--aa-border); font-size: 0.8125rem; color: var(--aa-muted); }
.aa-case__foot a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.9rem; }

.aa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.aa-stat { background: var(--aa-surface-soft); border-radius: var(--aa-radius-md); padding: 22px 22px 20px; display: grid; gap: 8px; align-content: start; }
.aa-stat__value {
  font: var(--aa-weight) var(--aa-size-stat)/0.95 var(--aa-font-display);
  letter-spacing: -0.03em; color: var(--aa-accent-text);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0.14em; flex-wrap: nowrap; white-space: nowrap;
}
.aa-stat__from { color: var(--aa-muted); opacity: 0.75; }
.aa-stat__arrow { font-size: 0.5em; color: var(--aa-muted); transform: translateY(-0.2em); }
.aa-stat__unit { font-size: 0.3em; letter-spacing: 0; color: var(--aa-text); margin-left: 0.1em; }
.aa-stat__label { color: var(--aa-ink); font-size: 1rem; line-height: 1.4; }
.aa-stat__source { font-size: 0.8125rem; color: var(--aa-muted); }
.aa-stat--main { background: var(--aa-panel); }
.aa-stat--main :is(.aa-stat__value, .aa-stat__label, .aa-stat__unit, .aa-stat__source, .aa-stat__from, .aa-stat__arrow) { color: #fff; }

.aa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; counter-reset: aa-step; }
.aa-steps > li { border: var(--aa-border); border-radius: var(--aa-radius-md); padding: 20px; counter-increment: aa-step; min-width: 0; }
.aa-steps > li::before { content: counter(aa-step); display: block; font: var(--aa-weight) 1.75rem/1 var(--aa-font-display); color: var(--aa-accent-text); margin-bottom: 10px; }
.aa-steps h3 { font-size: 1.2rem; margin: 0 0 6px; }
.aa-steps p { font-size: 0.95rem; }

.aa-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--aa-bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: var(--aa-border); }
.aa-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.aa-nav__links { display: flex; gap: 26px; }
.aa-nav__links a { font-size: 0.9375rem; color: var(--aa-text); text-decoration: none; }
.aa-nav__links a:hover { color: var(--aa-accent-text); }
@media (max-width: 820px) { .aa-nav__links { display: none; } }

.aa-logo-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--aa-ink); background: var(--aa-surface-soft); border-radius: var(--aa-radius-pill); padding: 5px 12px 5px 6px; white-space: nowrap; }
.aa-logo-pill img { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; padding: 1px; display: block; }

.aa-dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aa-dots canvas { width: 100%; height: 100%; display: block; }
.aa-dots__toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--aa-radius-pill);
  border: var(--aa-border); background: color-mix(in srgb, var(--aa-bg) 80%, transparent); color: var(--aa-muted);
  font: var(--aa-weight) 0.75rem/1 var(--aa-font-sans); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.aa-dots__toggle:hover { color: var(--aa-ink); }
.aa-dots__toggle svg { width: 12px; height: 12px; }