html { scroll-behavior: smooth; }
body { background:
radial-gradient(1100px 500px at 85% -8%, #EAF1FF 0%, transparent 60%),
radial-gradient(800px 420px at -10% 8%, #E9FBF5 0%, transparent 55%),
#FBFCFE; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(14px); }
.grid-lines { background-image: linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px); background-size: 34px 34px; }
.marquee { animation: scrollx 26s linear infinite; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.no-bar::-webkit-scrollbar { display: none; }
.ill { overflow: visible; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.ill-wrap:hover .ill { transform: translateY(-4px) scale(1.012); }
/* --- scroll-triggered scene animation --- */
.ill.animate-scene > *:not(defs) { opacity: 0; }
.ill.animate-scene.ill-in > *:not(defs) {
animation: illPop .75s cubic-bezier(.2,.8,.25,1) both;
}
.ill-in > *:nth-child(1) { animation-delay: 0.06s; }
.ill-in > *:nth-child(2) { animation-delay: 0.12s; }
.ill-in > *:nth-child(3) { animation-delay: 0.18s; }
.ill-in > *:nth-child(4) { animation-delay: 0.24s; }
.ill-in > *:nth-child(5) { animation-delay: 0.30s; }
.ill-in > *:nth-child(6) { animation-delay: 0.36s; }
.ill-in > *:nth-child(7) { animation-delay: 0.42s; }
.ill-in > *:nth-child(8) { animation-delay: 0.48s; }
.ill-in > *:nth-child(9) { animation-delay: 0.54s; }
.ill-in > *:nth-child(10) { animation-delay: 0.60s; }
.ill-in > *:nth-child(11) { animation-delay: 0.66s; }
.ill-in > *:nth-child(12) { animation-delay: 0.72s; }
.ill-in > *:nth-child(13) { animation-delay: 0.78s; }
.ill-in > *:nth-child(14) { animation-delay: 0.84s; }
.ill-in > *:nth-child(15) { animation-delay: 0.90s; }
.ill-in > *:nth-child(16) { animation-delay: 0.96s; }
.ill-in > *:nth-child(17) { animation-delay: 1.02s; }
.ill-in > *:nth-child(18) { animation-delay: 1.08s; }
/* opacity-only: CSS transforms would override SVG transform="translate(...)" attributes */
@keyframes illPop { from { opacity: 0; } to { opacity: 1; } }
.ill.animate-scene { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.ill.animate-scene.ill-in { opacity: 1; transform: none; }
.ill.animate-scene [data-draw] { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
.ill.animate-scene.ill-in [data-draw] { animation: illPop .4s .3s both, illDraw 1.4s .35s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes illDraw { to { stroke-dashoffset: 0; } }
.ill.animate-scene.ill-in .animate-dash { animation: dash 2.4s linear .9s infinite; }
.ill.animate-scene.ill-in .animate-floaty { animation: illPop .75s cubic-bezier(.2,.8,.25,1) both, floaty 6s ease-in-out 1s infinite; }
.ill.animate-scene.ill-in .animate-sway { animation: illPop .75s cubic-bezier(.2,.8,.25,1) both, sway 7s ease-in-out 1s infinite; }
@media (prefers-reduced-motion: reduce) {
.ill.animate-scene { opacity: 1; transform: none; transition: none; }
.ill.animate-scene > *:not(defs),
.ill.animate-scene.ill-in > *:not(defs) { opacity: 1; animation: none; transform: none; }
.ill.animate-scene [data-draw] { stroke-dashoffset: 0; }
.ill-wrap:hover .ill { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity:1; transform:none; }
.marquee, .animate-floaty, .animate-sway, .animate-dash { animation: none; }
}
/* --- journey builder --- */
.jb-card { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .25s ease, background-color .25s ease; }
.jb-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -18px rgba(15,23,42,.35); }
.jb-card:focus-visible { outline: 3px solid #93B4FF; outline-offset: 3px; }
.jb-card[aria-pressed="true"] { border-color: #2563EB; background: linear-gradient(180deg,#EEF4FF, #FFFFFF); box-shadow: 0 18px 40px -18px rgba(37,99,235,.55); }
.jb-card[aria-pressed="true"] .jb-tick { opacity: 1; transform: scale(1); }
.jb-tick { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes jbPick { 0%{transform:scale(1)} 45%{transform:scale(.94)} 100%{transform:scale(1)} }
.jb-picked { animation: jbPick .4s ease; }
.jb-step { animation: jbIn .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes jbIn { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
.jb-mod { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s ease, transform .5s cubic-bezier(.2,1.2,.4,1); }
.jb-mod.in { opacity: 1; transform: none; }
#jb-magic .jb-spark { animation: floaty 3.2s ease-in-out infinite; }
/* opacity only: a CSS transform would override the SVG transform attribute */
#jb-magic .jb-float { opacity: 0; transition: opacity .55s ease; }
#jb-magic .jb-float.in { opacity: 1; }
#jb-dash { transition: opacity .7s ease; }
.jb-bar { transition: height 1s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
.jb-step, .jb-card, .jb-mod, #jb-magic .jb-float { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}
/* --- AI Business Doctor --- */
.dr-card { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .25s ease, background-color .25s ease; }
.dr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(15,23,42,.35); }
.dr-card:focus-visible { outline: 3px solid #93B4FF; outline-offset: 3px; }
.dr-card[aria-pressed="true"] { border-color: #2563EB; background: linear-gradient(180deg,#EEF4FF,#FFFFFF); box-shadow: 0 16px 34px -18px rgba(37,99,235,.5); }
.dr-card[aria-pressed="true"] .dr-x { opacity: 0; transform: scale(.4); }
.dr-card[aria-pressed="true"] .dr-tick { opacity: 1; transform: scale(1); }
.dr-tick { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
.dr-x { transition: opacity .25s ease, transform .3s ease; }
.dr-pane { animation: jbIn .55s cubic-bezier(.2,.7,.3,1) both; }
.dr-rise { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .45s ease, transform .5s cubic-bezier(.2,1.2,.4,1); }
.dr-rise.in { opacity: 1; transform: none; }
/* heartbeat + scanner + robot micro-animations (SVG-safe: opacity / transform-box set) */
@keyframes drBeat { 0%,100%{ transform: scale(1); } 18%{ transform: scale(1.14); } 34%{ transform: scale(.97); } 52%{ transform: scale(1.07); } }
.dr-beat { transform-box: fill-box; transform-origin: center; animation: drBeat 1.6s ease-in-out infinite; }
@keyframes drScan { 0%{ transform: translateY(-6px); opacity:.15; } 50%{ opacity:.5; } 100%{ transform: translateY(74px); opacity:.15; } }
.dr-scan { animation: drScan 2.8s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes drBlink { 0%,92%,100%{ transform: scaleY(1); } 96%{ transform: scaleY(.08); } }
.dr-eye { transform-box: fill-box; transform-origin: center; animation: drBlink 4.2s ease-in-out infinite; }
@keyframes drTilt { 0%,100%{ transform: rotate(-2.5deg); } 50%{ transform: rotate(2.5deg); } }
.dr-head { transform-box: fill-box; transform-origin: bottom center; animation: drTilt 6s ease-in-out infinite; }
@keyframes drWrite { 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(3px,-2px) rotate(-8deg); } }
.dr-pen { transform-box: fill-box; transform-origin: center; animation: drWrite 1.4s ease-in-out infinite; }
@keyframes drThink { 0%,100%{ opacity:.25; transform: translateY(0); } 50%{ opacity:1; transform: translateY(-3px); } }
.dr-dot { transform-box: fill-box; animation: drThink 1.2s ease-in-out infinite; }
.dr-dot:nth-of-type(2) { animation-delay: .18s; }
.dr-dot:nth-of-type(3) { animation-delay: .36s; }
.dr-orbit { animation: floaty 5.5s ease-in-out infinite; }
.dr-link { stroke-dasharray: 5 7; animation: dash 2.4s linear infinite; }
@keyframes drSpark { 0%{ opacity:0; transform: translateY(4px);} 50%{opacity:.9;} 100%{ opacity:0; transform: translateY(-14px);} }
.dr-particle { transform-box: fill-box; animation: drSpark 3.2s ease-in-out infinite; }
#dr-ring circle.dr-ring-val { transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
.dr-pane, .dr-card, .dr-rise { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
.dr-beat, .dr-scan, .dr-eye, .dr-head, .dr-pen, .dr-dot, .dr-orbit, .dr-link, .dr-particle { animation: none !important; }
}