/* Homepage hero illustration: input cards → arrow → code window + dashboard,
   recreated from the banner in HTML/CSS/SVG so it scales and stays crisp.
   Sizes use container-query units (cqi) so text tracks the art's width. */
.hero-art { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; width: 100%; color: var(--dark); }
.hero-art * { min-width: 0; }

/* Blue sparkle, top right */
.art-spark { position: absolute; z-index: 2; top: 0; right: 0; width: 8%; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; }

/* Stack of "what you bring" cards */
.art-inputs { position: absolute; left: 1%; top: 12%; width: 33%; display: grid; gap: 2.2cqi; }
.art-card {
  display: flex; align-items: center; gap: 1.8cqi; padding: 2.2cqi;
  background: #fff; border: 1px solid var(--line); border-radius: 2cqi;
  font-weight: 700; font-size: 2.2cqi; line-height: 1.2; letter-spacing: -0.01em;
  box-shadow: 0 1.5cqi 3cqi -1.5cqi rgba(15, 27, 51, 0.35), 0.8cqi 0.8cqi 0 -0.2cqi var(--accent-tint);
}
.art-card:nth-child(odd) { transform: rotate(-2deg); }
.art-card:nth-child(even) { transform: rotate(1.5deg) translateX(1.5cqi); }
.art-card .icon { width: 4.2cqi; height: 4.2cqi; color: var(--accent); flex: none; }

/* Curved arrow from the cards to the product */
.art-arrow { position: absolute; z-index: 2; left: 31%; top: 0; width: 18%; color: var(--dark); fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* Code editor window */
.art-editor {
  position: absolute; right: 0; top: 6%; width: 62%; height: 56%;
  background: #121b31; border-radius: 2cqi; overflow: hidden;
  box-shadow: 0 4cqi 6cqi -3cqi rgba(15, 27, 51, 0.5);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.7cqi; line-height: 1.6; color: #c9d4ea;
}
.art-bar { display: flex; align-items: center; gap: 1cqi; padding: 1.6cqi 2.2cqi; background: #0c1328; }
.art-bar i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #ff5f57; }
.art-bar i:nth-child(2) { background: #febc2e; }
.art-bar i:nth-child(3) { background: #28c840; }
.art-bar span { margin-left: 1.6cqi; padding: 0.4cqi 1.6cqi; border-radius: 0.8cqi; background: #1f2d4f; color: #fff; font-size: 1.7cqi; }
.art-editor pre { padding: 2cqi 2.6cqi; white-space: pre; font: inherit; }
.art-editor .k { color: #c792ea; }
.art-editor .s { color: #8ce99a; }
.art-editor .f { color: #82aaff; }
.art-editor .t { color: #7fdbff; }
.art-editor .a { color: #ffcb6b; }

/* Dashboard window on a laptop base */
.art-app {
  position: absolute; left: 36%; right: 10%; bottom: 16%; height: 64%;
  display: grid; grid-template-columns: 25% 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: 2cqi; overflow: hidden;
  box-shadow: 0 5cqi 8cqi -4cqi rgba(15, 27, 51, 0.55);
}
.art-app::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -2.4cqi; height: 2.4cqi;
  background: linear-gradient(#d9dfe9, #aab4c6); border-radius: 0 0 1.6cqi 1.6cqi;
}
.art-side { background: #16213f; padding: 2.4cqi 1.8cqi; color: #aab8d6; font-size: 1.7cqi; font-weight: 600; display: grid; gap: 1.2cqi; align-content: start; }
.art-side b { display: block; width: 3cqi; height: 3cqi; border-radius: 0.8cqi; background: var(--accent); margin-bottom: 1.6cqi; }
.art-side span { padding: 0.8cqi 1.4cqi; border-radius: 0.8cqi; }
.art-side .on { background: var(--accent); color: #fff; }
.art-main { padding: 2cqi 2.4cqi; display: grid; gap: 1.8cqi; align-content: start; }
.art-main h4 { font-size: 2.2cqi; font-weight: 800; letter-spacing: -0.02em; }
.art-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqi; }
.art-kpi { display: grid; grid-template-columns: auto 1fr; gap: 0 1cqi; align-items: center; padding: 1.2cqi; border: 1px solid var(--line); border-radius: 1.4cqi; font-size: 1.5cqi; color: var(--text-muted); }
.art-kpi i { grid-row: span 3; width: 3.6cqi; height: 3.6cqi; border-radius: 1cqi; background: var(--accent); }
.art-kpi i.g { background: #22c55e; }
.art-kpi i.p { background: #7c3aed; }
.art-kpi b { font-size: 1.9cqi; color: var(--dark); letter-spacing: -0.02em; }
.art-kpi em { font-style: normal; color: #16a34a; font-weight: 700; font-size: 1.3cqi; }
.art-chart { border: 1px solid var(--line); border-radius: 1.4cqi; padding: 1.4cqi 1.6cqi 1cqi; }
.art-chart h5 { font-size: 1.7cqi; font-weight: 700; margin-bottom: 0.6cqi; }
.art-chart svg { width: 100%; height: auto; display: block; }
.art-chart .grid { stroke: var(--line); stroke-width: 1; }
.art-chart .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.art-chart .fill { fill: var(--accent-tint); opacity: 0.8; }
.art-chart circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.art-chart text { font-size: 10px; fill: var(--text-muted); font-family: var(--font-body); }

/* Marker notes */
.art-note { position: absolute; font-family: var(--font-marker); font-size: 2.8cqi; letter-spacing: 0.02em; line-height: 1.1; text-transform: uppercase; color: var(--dark); }
.art-note span { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.4cqi; text-underline-offset: 0.5cqi; }
.art-note-from { left: 2%; bottom: 6%; transform: rotate(-5deg); border-bottom: 0.5cqi solid var(--accent); padding-bottom: 0.3cqi; }
.art-note-to { right: 0; bottom: 0; width: 32%; text-align: center; transform: rotate(-4deg); }

@media (max-width: 560px) { .art-note { font-size: 3.4cqi; } }