:root.fx-sa { --fx-bg: radial-gradient(1200px 700px at 70% 20%, #1d3a8a 0%, #0a1a46 45%, #050c24 100%); --fx-accent: #c9d6f2; --fx-accent2: #ffffff; --fx-glow: rgba(70,110,255,.55); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.fx-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-content: center; gap: 18px; justify-items: center; background: var(--fx-bg); transition: opacity .6s ease, visibility .6s; }
.fx-loader.fx-gone { opacity: 0; visibility: hidden; }
.fx-loader-mark { width: 74px; height: 74px; position: relative; perspective: 400px; }
.fx-loader-mark span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--fx-accent); border-right-color: var(--fx-accent2); animation: fxspin 1.2s linear infinite; }
.fx-loader-mark span:nth-child(2) { inset: 10px; animation-duration: 1.6s; animation-direction: reverse; transform: rotateX(60deg); }
.fx-loader-mark span:nth-child(3) { inset: 22px; animation-duration: .9s; transform: rotateY(60deg); }
.fx-loader-name { font: 600 13px/1 system-ui, -apple-system, Segoe UI, sans-serif; letter-spacing: .32em; color: var(--fx-accent2); }
@keyframes fxspin { to { rotate: 360deg; } }
body.fx-ready { animation: fxenter .5s ease both; }
body.fx-leave { opacity: 0; transform: translateY(-6px) scale(.995); transition: opacity .22s ease, transform .22s ease; }
@keyframes fxenter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms); }
.fx-rv.fx-in { opacity: 1; transform: none; }
.fx-tilt { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .25s ease, box-shadow .3s ease; transform-style: preserve-3d; position: relative; }
.fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(500px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%); opacity: 0; transition: opacity .3s; }
.fx-tilt:hover::after { opacity: 1; }
.fx-tilt:hover { box-shadow: 0 24px 60px -24px var(--fx-glow); }
.fx-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .25s ease; }
.fx-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.fx-btn:hover::before { transform: translateX(120%); }
.fx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--fx-glow); }
.fx-hero { position: relative; overflow: hidden; isolation: isolate; }
.fx-hero > * { position: relative; z-index: 2; }
.fx-hero > .fx-particles, .fx-hero > .fx-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-hero > .fx-3d { opacity: 0; transition: opacity 1.2s ease; }
.fx-hero > .fx-3d.fx-3d-on { opacity: 1; }
.fx-hero > .fx-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 899px) { .fx-hero > .fx-3d { opacity: .0; } .fx-hero > .fx-3d.fx-3d-on { opacity: .35; } }
.fx-reduce *, .fx-reduce *::before, .fx-reduce *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { .fx-rv { opacity: 1; transform: none; } .fx-particles, .fx-3d { display: none; } }

.fx-sa .fx-hero { background-image: radial-gradient(900px 500px at 80% 10%, rgba(80,120,255,.28), transparent 60%), radial-gradient(700px 400px at 10% 90%, rgba(190,205,240,.12), transparent 60%); }
.fx-sa .card { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(160,180,230,.28); }
.fx-sa .fx-grid > .card { animation: fxfloat 7s ease-in-out infinite; animation-delay: calc(var(--fx-i,0) * -1.1s); }
@keyframes fxfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.fx-sa h1, .fx-sa h2 { letter-spacing: -.01em; }
.fx-sa .fx-hero h1 { background: linear-gradient(100deg, #0b1d4d 0%, #1e3a8a 35%, #6f86c4 50%, #1e3a8a 65%, #0b1d4d 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: fxsheen 8s linear infinite; }
.fx-sa .fx-hero h1:not([style*="color"]) { -webkit-text-fill-color: transparent; }
@keyframes fxsheen { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .fx-sa .fx-grid > .card, .fx-sa .fx-hero h1 { animation: none; } }

/* v2 page experiences */
.fx-sa .fx-img { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; } .fx-sa .fx-img:hover { transform: perspective(800px) rotateY(-4deg) scale(1.02); box-shadow: 0 30px 60px -30px rgba(20,40,120,.5); }
.sx { padding: 56px 0; background: radial-gradient(1000px 500px at 80% 0%, #1d3a8a 0%, #0b1d4d 55%, #071338 100%); color: #e6ecfa; overflow: hidden; }
.sx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; text-align: center; } .sx h2 { color: #fff; margin: 0 0 6px; } .sx-sub { color: #b9c6e6; margin: 0 auto 24px; max-width: 640px; }
.sx-stage { height: 260px; perspective: 1100px; display: grid; place-items: center; }
.sx-ring { position: relative; width: 150px; height: 64px; transform-style: preserve-3d; transform: rotateX(-8deg) rotateY(var(--a,0deg)); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.sx-chip { position: absolute; inset: 0; transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(min(330px, 40vw)); border-radius: 16px; border: 1px solid rgba(200,215,250,.45); background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 700 15px/1 system-ui, -apple-system, sans-serif; cursor: pointer; box-shadow: 0 14px 40px -18px rgba(0,0,0,.6); backface-visibility: hidden; }
.sx-chip:hover, .sx-chip:focus-visible { background: linear-gradient(135deg, #ffffff, #c9d6f2); color: #0b1d4d; }
.sx-ctrl { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 10px; }
.sx-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(200,215,250,.5); background: rgba(255,255,255,.08); color: #fff; font-size: 24px; cursor: pointer; }
.sx-cta { display: inline-block; padding: 13px 24px; border-radius: 12px; background: linear-gradient(135deg, #ffffff, #c9d6f2); color: #0b1d4d; font-weight: 800; text-decoration: none; margin-top: 18px; }
.sx-flash { outline: 3px solid #6f86c4; outline-offset: 6px; border-radius: 10px; transition: outline-color 1.8s; }
.sx-give-grid { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: center; text-align: left; } @media (max-width: 760px) { .sx-give-grid { grid-template-columns: 1fr; text-align: center; } .sx-coin { margin: 0 auto; } }
.sx-coin { width: 190px; height: 190px; position: relative; transform-style: preserve-3d; animation: sxcoin 9s linear infinite; }
.sx-coin.spin { animation: sxflip 1s cubic-bezier(.2,.7,.2,1); }
.sx-coin-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font: 900 54px/1 system-ui, sans-serif; color: #0b1d4d; background: radial-gradient(circle at 30% 30%, #ffffff, #c9d6f2 45%, #8ea2d0 80%); box-shadow: inset 0 0 0 8px rgba(255,255,255,.5), 0 30px 70px -20px rgba(0,0,0,.6); }
.sx-coin-edge { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(-10px); background: #6f86c4; }
@keyframes sxcoin { to { transform: rotateY(360deg); } } @keyframes sxflip { from { transform: rotateY(0) scale(.9); } to { transform: rotateY(720deg) scale(1); } }
.sx-amts { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 760px) { .sx-amts { justify-content: center; } }
.sx-amt { padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(200,215,250,.45); background: rgba(255,255,255,.08); color: #fff; font-weight: 800; cursor: pointer; transition: transform .2s; } .sx-amt.on, .sx-amt:hover { background: #fff; color: #0b1d4d; transform: translateY(-2px); }
.sx-flip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1000px; } @media (max-width: 760px) { .sx-flip { grid-template-columns: 1fr; } }
.sx-card { position: relative; height: 170px; border: 0; background: none; padding: 0; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .sx-card.flip, .sx-card:hover { transform: rotateY(180deg); }
.sx-front, .sx-back { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 18px; border-radius: 16px; backface-visibility: hidden; border: 1px solid rgba(200,215,250,.4); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); color: #fff; font: 700 18px/1.3 system-ui, sans-serif; }
.sx-front b { font-size: 34px; color: #c9d6f2; } .sx-back { transform: rotateY(180deg); font-weight: 500; font-size: 15px; background: linear-gradient(135deg, #ffffff, #dbe4f7); color: #0b1d4d; }
.sx-showcase main img, .sx-showcase section img { transition: transform .8s cubic-bezier(.2,.7,.2,1); } .sx-showcase main img:hover, .sx-showcase section img:hover { transform: perspective(900px) rotateX(3deg) rotateY(-5deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .sx-coin, .sx-coin.spin { animation: none; } .sx-ring, .sx-card { transition: none; } }