html, body { margin: 0; padding: 0; background: #050607; }
* { box-sizing: border-box; }
::selection { background: rgba(27,116,188,0.4); color: #fff; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050607; }
::-webkit-scrollbar-thumb { background: rgba(27,116,188,0.32); border-radius: 10px; border: 2px solid #050607; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,116,188,0.5); }
[data-lift] { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease-out, box-shadow 0.35s ease-out; }
[data-lift]:hover { transform: translateY(-4px); border-color: rgba(27,116,188,0.5) !important; box-shadow: 0 14px 40px rgba(27,116,188,0.12); }
@keyframes srFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes srFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes srPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes srArrow { 0%, 100% { transform: translateX(0); opacity: 0.9; } 50% { transform: translateX(8px); opacity: 1; } }
@keyframes srScan { 0% { top: -8%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 104%; opacity: 0; } }
@keyframes srShimmer { 0%, 78% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes srDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.06); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes srTick { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes srDraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes srMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
[data-marquee]:hover > div { animation-play-state: paused; }
@keyframes srNodePulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(27,116,188,0.22); } 50% { box-shadow: 0 0 0 11px rgba(27,116,188,0.08); } }
@keyframes srBarFill { from { width: 0; } to { width: 82%; } }
@keyframes srChip { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes srKenBurns { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes srBreath { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes srSnap { 0% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes srLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* guide-phase HUD build sequence (state-cascade, cannot be inline) */
[data-guide-on="1"] [data-g1] { animation: srFadeUp 0.3s ease-out 0.15s both; }
[data-guide-on="1"] [data-g2] { animation: srFadeUp 0.3s ease-out 0.5s both; }
[data-guide-on="1"] [data-g3] { animation: srLine 0.4s ease-out 0.9s both; }
[data-guide-on="1"] [data-g4] { animation: srSnap 0.5s cubic-bezier(0.22,1,0.36,1) 1.2s both; }
[data-guide-on="0"] [data-g1], [data-guide-on="0"] [data-g2], [data-guide-on="0"] [data-g3], [data-guide-on="0"] [data-g4] { opacity: 0; }
input::placeholder { color: rgba(240,244,248,0.35); }
input:focus { outline: none; border-color: #1B74BC !important; }
a { color: inherit; }
/* use-case hover reveal (parent hover → child, cannot be inline) */
[data-uc] { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease-out, box-shadow 0.35s ease-out; }
[data-uc]:hover, [data-uc]:focus-within { transform: translateY(-5px); border-color: rgba(27,116,188,0.55) !important; box-shadow: 0 12px 44px rgba(27,116,188,0.13); }
[data-uc-hud] { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease-out, margin-top 0.45s cubic-bezier(0.22,1,0.36,1); margin-top: 0; }
[data-uc][data-open="1"] [data-uc-hud] { max-height: 220px; opacity: 1; margin-top: 22px; }
@media (max-width: 720px) {
[data-sr-grid3] { grid-template-columns: 1fr !important; }
[data-sr-grid2] { grid-template-columns: 1fr !important; }
[data-sr-hero-h] { font-size: 42px !important; letter-spacing: -1.5px !important; }
[data-sr-h2] { font-size: 32px !important; letter-spacing: -1px !important; }
[data-sr-pad] { padding-left: 24px !important; padding-right: 24px !important; }
[data-sr-hide-m] { display: none !important; }
[data-sr-row] { flex-direction: column !important; align-items: stretch !important; }
[data-sr-num] { font-size: 120px !important; }
/* scrollytelling degrades to stacked flow */
[data-hiw-section] { height: auto !important; }
[data-hiw-sticky] { position: static !important; height: auto !important; display: block !important; padding: 0 !important; }
[data-hiw-grid] { display: block !important; }
[data-hiw-labels] { display: none !important; }
[data-hiw-stage] { height: auto !important; aspect-ratio: auto !important; margin-top: 24px; }
[data-phase-view] { position: static !important; opacity: 1 !important; transform: none !important; margin-bottom: 20px; min-height: 300px; }
[data-phase-label-m] { display: flex !important; }
[data-guide-on] [data-g1], [data-guide-on] [data-g2], [data-guide-on] [data-g3], [data-guide-on] [data-g4] { opacity: 1 !important; animation: none !important; }
[data-guide-view] { position: relative !important; aspect-ratio: 3 / 3.4; }
[data-plate-hero] { aspect-ratio: 4 / 4.4 !important; }
[data-hud-card] { max-width: 62% !important; right: 16px !important; }
[data-g2] { left: 16px !important; max-width: 55% !important; }
}
/* dual investor/enterprise CTA: stack below tablet so the forms aren't cramped */
@media (max-width: 820px) {
[data-cta-grid] { grid-template-columns: 1fr !important; }
}
/* proof strip: shrink on mobile so it fits ~two lines */
@media (max-width: 720px) {
[data-proof] { font-size: 10px !important; letter-spacing: 0 !important; line-height: 1.7 !important; }
}
/* short-viewport fit for the pinned How-It-Works block */
@media (min-width: 721px) and (max-height: 830px) {
[data-hiw-sticky] { padding: 20px 0 !important; }
[data-hiw-head] { margin-bottom: 20px !important; }
[data-hiw-head] > div:first-child { margin-bottom: 8px !important; }
[data-hiw-head] [data-sr-h2] { font-size: 26px !important; letter-spacing: -0.8px !important; }
[data-hiw-grid] { gap: 32px !important; }
[data-hiw-label] { padding: 10px 14px !important; }
[data-hiw-label] > div > div:first-child { font-size: 16px !important; margin-bottom: 3px !important; }
[data-hiw-label] > div > div:last-child { font-size: 12.5px !important; }
[data-hiw-stage] { height: min(calc(100vh - 280px), 460px) !important; width: auto !important; aspect-ratio: 4 / 3 !important; justify-self: center !important; align-self: center !important; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}