/* AvaGotYa page — the hero click-stream illustration and the fee calculator. */
.agy-hero { position: relative; height: 420px; border-radius: 24px; border: 1px solid var(--pp-line-2); background: radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--pp-accent) 7%, transparent), transparent 70%), var(--pp-soft); overflow: hidden; }
.agy-lane { position: absolute; left: 22px; right: 22px; height: 52px; border-radius: 14px; border: 1px solid var(--pp-line-2); background: var(--pp-bg); display: flex; align-items: center; padding: 0 16px; font: 600 13px/1 var(--pp-mono); letter-spacing: .06em; color: var(--pp-mute); }
.agy-lane--ad { top: 22px; } .agy-lane--site { bottom: 60px; }
.agy-lane--site::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--pp-green); box-shadow: 0 0 12px var(--pp-green); }
.agy-stream { position: absolute; top: 74px; bottom: 112px; left: 36%; width: 60px; }
.agy-stream .agy-dot { position: absolute; left: 24px; top: 0; animation: agy-fall 4s linear infinite; }
.agy-stream .agy-dot:nth-child(2) { animation-delay: .5s; } .agy-stream .agy-dot:nth-child(3) { animation-delay: 1s; }
.agy-stream .agy-dot:nth-child(4) { animation-delay: 1.5s; } .agy-stream .agy-dot:nth-child(5) { animation-delay: 2s; }
.agy-stream .agy-dot:nth-child(6) { animation-delay: 2.5s; } .agy-stream .agy-dot:nth-child(7) { animation-delay: 3s; }
.agy-stream .agy-dot:nth-child(8) { animation-delay: 3.5s; }
.agy-stream .agy-dot--bad { animation-name: agy-caught; }
.agy-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--pp-green); box-shadow: 0 0 10px rgba(77, 255, 170, .6); vertical-align: middle; }
.agy-dot--bad { background: var(--pp-red); box-shadow: 0 0 10px rgba(255, 69, 102, .7); }
@keyframes agy-fall { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translate(0, 220px); opacity: 0; } }
@keyframes agy-caught { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(0, 100px); } 70%, 92% { transform: translate(150px, 118px) scale(.9); opacity: 1; } 100% { transform: translate(150px, 118px) scale(.4); opacity: 0; } }
.agy-net { position: absolute; right: 22px; top: 150px; width: 40%; padding: 16px; border-radius: 14px; border: 1px dashed rgba(255, 69, 102, .6); background: rgba(255, 69, 102, .06); display: grid; gap: 4px; }
.agy-net b { font: 600 12px/1.2 var(--pp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pp-red); }
.agy-net span { font-size: 13px; color: var(--pp-mute); }
.agy-legend { position: absolute; left: 22px; bottom: 16px; margin: 0; font-size: 13px; color: var(--pp-dim); display: flex; gap: 8px; align-items: center; }
.agy-legend .agy-dot { width: 10px; height: 10px; margin-left: 10px; } .agy-legend .agy-dot:first-child { margin-left: 0; }

.agy-calc { display: grid; gap: 16px; }
.agy-calc label { display: grid; gap: 8px; font-size: 14px; color: var(--pp-mute); }
.agy-in { display: flex; align-items: center; border-radius: 12px; border: 1px solid var(--pp-line-2); background: var(--pp-bg); overflow: hidden; }
.agy-in b { padding: 0 12px 0 16px; color: var(--pp-dim); font-weight: 500; }
.agy-in input { flex: 1; min-height: 50px; border: 0; background: transparent; color: var(--pp-text); font: 400 26px/1 var(--pp-serif); font-variant-numeric: tabular-nums; padding-right: 14px; min-width: 0; }
.agy-in input:focus { outline: none; }
.agy-in:focus-within { border-color: var(--pp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 18%, transparent); }
.agy-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agy-out div { padding: 16px; border-radius: 14px; background: var(--pp-bg); border: 1px solid var(--pp-line); }
.agy-out span { display: block; font: 500 11px/1.3 var(--pp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-dim); }
.agy-out b { display: block; margin-top: 8px; font: 400 34px/1 var(--pp-serif); font-variant-numeric: tabular-nums; }
.agy-out .is-founding { border-color: color-mix(in srgb, var(--pp-accent) 45%, transparent); }
.agy-out .is-founding b { color: var(--pp-accent); }
.agy-note { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--pp-mute); min-height: 3em; }
@media (prefers-reduced-motion: reduce) { .agy-stream .agy-dot { animation: none; opacity: 1; } .agy-stream .agy-dot:nth-child(n+2) { display: none; } }