/* Hero visual v13 (founder 2026-11-16): a 4-frame motion graphic in soft-3D icon style (founder's envelope
   reference), on the playground's cobalt background (canvas.css: cobalt wash + grain + drifting white dots).
   Story: feedback is scattered → your team guesses → with Blanks your client tries it → a clear yes, in writing. */
.hv.story { border-radius: 28px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.4' intercept='-1.2'/%3E%3CfeFuncG type='linear' slope='3.4' intercept='-1.2'/%3E%3CfeFuncB type='linear' slope='3.4' intercept='-1.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(34% 44% at 92% 18%, #fff 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,0) 75%),
    radial-gradient(46% 36% at 44% 14%, rgba(232,240,255,.95) 0%, rgba(232,240,255,0) 75%),
    radial-gradient(40% 46% at 34% 70%, rgba(214,228,254,.9) 0%, rgba(214,228,254,0) 75%),
    radial-gradient(38% 48% at 6% 20%, #1b4fc2 0%, rgba(27,79,194,.55) 40%, rgba(27,79,194,0) 75%),
    radial-gradient(46% 54% at 94% 94%, #163fa0 0%, rgba(22,63,160,.55) 40%, rgba(22,63,160,0) 75%),
    linear-gradient(135deg, #3a7cf2 0%, #8fb5fb 50%, #3170e8 100%) !important;
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal; }
.st-dots { position: absolute; inset: -18%; z-index: -1; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='2' y='2' width='3' height='3' fill='white'/%3E%3C/svg%3E") 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(34% 40% at 14% 26%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%), radial-gradient(30% 36% at 86% 70%, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
  mask-image: radial-gradient(34% 40% at 14% 26%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%), radial-gradient(30% 36% at 86% 70%, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
  animation: stdrift 48s ease-in-out infinite alternate; }
@keyframes stdrift { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-5%,3%,0); } 100% { transform: translate3d(3%,-3%,0); } }

/* the white stage card */
.st-card { position: relative; width: min(440px, 84%); background: #fff; border-radius: 26px; padding: 18px 18px 22px; box-shadow: 0 2px 4px rgba(10,20,60,.08), 0 40px 80px -30px rgba(10,30,100,.55); }
.st-art { position: relative; aspect-ratio: 1 / .78; overflow: hidden; border-radius: 16px; background: #fff; }
.st-f { position: absolute; left: 50%; top: 50%; width: 92%; transform: translate(-50%, -46%) scale(.9); opacity: 0; transition: opacity .55s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.st-f.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: stfloat 3.2s ease-in-out .9s infinite alternate; }
.st-f.out { opacity: 0; transform: translate(-50%, -54%) scale(1.05); }
@keyframes stfloat { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -52.5%) scale(1.01); } }
.st-copy { position: relative; height: 104px; margin-top: 4px; }
.st-c { position: absolute; inset: 0; padding: 0 8px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s ease; }
.st-c.on { opacity: 1; transform: none; transition-delay: .15s; }
.st-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px; background: #eceef1; color: #4b5059; font: 400 12.5px/1 var(--sans); }
.st-c b { display: block; margin: 10px 0 4px; font: 600 23px/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.st-c p { margin: 0; font: 400 14.5px/1.45 var(--desc); color: var(--ink-2); }
.st-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px; margin-top: 12px; }
.st-bars i { height: 3px; border-radius: 3px; background: #e3e8f1; overflow: hidden; }
.st-bars s { display: block; height: 100%; width: 0; background: var(--cobalt); }
.st-bars i.done s { width: 100%; }
.st-bars i.run s { width: 100%; transition: width var(--dur, 3.4s) linear; }
@media (max-width: 960px) { .hv.story { min-height: 600px; } }
@media (prefers-reduced-motion: reduce) { .st-dots, .st-f.on { animation: none; } }
.st-f { mix-blend-mode: multiply; }