/* App FAQ: isolated artwork, disclosure motion, and pointer response. */
.ma-faq-interactive { --faq-rgb:128,212,242; --faq-accent:rgb(var(--faq-rgb)); position:relative; isolation:isolate; overflow:clip; padding:110px 0 100px; background:#060f19; border-block:1px solid #b0d5ff12; scroll-margin-top:90px; }
.ma-faq-interactive[data-faq-topic="design"] { --faq-rgb:231,200,146; }
.ma-faq-interactive[data-faq-topic="platforms"] { --faq-rgb:143,180,255; }
.ma-faq-interactive[data-faq-topic="investment"] { --faq-rgb:132,224,189; }
.ma-faq-ambient { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 17% 54%,rgba(var(--faq-rgb),.07),transparent 54%); transition:background .8s; }
.ma-faq-interactive::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(360px circle at var(--faq-x,30%) var(--faq-y,50%),rgba(var(--faq-rgb),.035),transparent); }
.ma-faq-interactive .ma-faq-layout { grid-template-columns:.95fr 1.05fr; align-items:center; gap:clamp(48px,6vw,110px); }
.ma-faq-interactive h2 { font-size:clamp(42px,4.3vw,64px); line-height:1.04; letter-spacing:-.055em; font-weight:550; }
.ma-faq-interactive h2 span { color:var(--faq-accent); background:linear-gradient(105deg,#e7f6ff,var(--faq-accent)); background-clip:text; -webkit-text-fill-color:transparent; transition:color .6s; }
.ma-faq-lede { margin:24px 0 0; color:#9db0c2; font-size:16px; line-height:1.75; }
.ma-faq-visual { position:relative; margin-top:10px; max-width:520px; }
.ma-faq-art { position:relative; height:300px; perspective:900px; color:var(--faq-accent); transition:color .65s; }
.ma-faq-halo { position:absolute; width:66%; aspect-ratio:1; left:17%; top:-7%; border-radius:50%; background:radial-gradient(circle,rgba(var(--faq-rgb),.12),rgba(var(--faq-rgb),.04) 45%,transparent 68%); transition:background .6s; }
.ma-faq-orbit { position:absolute; width:71%; aspect-ratio:1; top:-10%; left:14.5%; border:1px solid rgba(var(--faq-rgb),.1); border-radius:50%; pointer-events:none; }
.ma-faq-orbit-one { transform:rotateX(59deg) rotate(-23deg); border-top-color:rgba(var(--faq-rgb),.45); }
.ma-faq-orbit-two { transform:rotateX(58deg) rotate(48deg); top:-4%; width:87%; left:6.5%; border-right-color:rgba(var(--faq-rgb),.28); }
.ma-faq-scenes { position:relative; width:100%; height:100%; overflow:visible; transform:rotateX(var(--faq-tilt-x,0deg)) rotateY(var(--faq-tilt-y,0deg)); transition:transform .5s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 22px 22px #0005); }
.ma-faq-scene { opacity:0; transform:translateY(14px) scale(.94); transform-origin:50% 50%; transition:opacity .38s,transform .6s cubic-bezier(.2,.75,.2,1); visibility:hidden; }
[data-faq-topic="accounts"] [data-faq-scene="accounts"], [data-faq-topic="design"] [data-faq-scene="design"], [data-faq-topic="platforms"] [data-faq-scene="platforms"], [data-faq-topic="investment"] [data-faq-scene="investment"] { opacity:1; transform:translateY(0) scale(1); visibility:visible; }
.ma-faq-float-a { animation:faq-float 7s ease-in-out infinite; }
.ma-faq-float-b { animation:faq-float 6s ease-in-out -3s infinite reverse; }
.ma-faq-connection { animation:faq-connect 2s linear infinite; }
.ma-faq-core { animation:faq-core 4s ease-in-out infinite; transform-origin:278px 211px; }
.ma-faq-caption { position:relative; text-align:center; min-height:56px; margin:0 45px 0; }
.ma-faq-caption strong { display:block; color:#e8f3fb; font-size:19px; font-weight:500; letter-spacing:-.025em; }
.ma-faq-caption > span { display:block; margin-top:7px; color:#99afc2; font-size:13px; line-height:1.5; }
.ma-faq-motion { position:absolute; right:0; bottom:7px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #bdd9f023; background:#0b1925; border-radius:50%; color:#9ab2c6; cursor:pointer; transition:color .2s,border-color .2s; }
.ma-faq-motion:hover { color:#ecf7ff; border-color:var(--faq-accent); }
.ma-faq-motion svg { width:14px; height:14px; }
.ma-faq-play-icon { display:none; }
.ma-faq-motion[aria-pressed="true"] .ma-faq-pause-icon { display:none; }
.ma-faq-motion[aria-pressed="true"] .ma-faq-play-icon { display:block; }
.ma-faq-list { min-width:0; display:grid; gap:12px; }
.ma-faq-interactive .ma-faq-card { --card-rgb:128,212,242; position:relative; isolation:isolate; box-sizing:border-box; margin:0; padding:0; border:1px solid #bdd7ed20; border-radius:12px; background:linear-gradient(120deg,#14243880,#0b172480); box-shadow:0 7px 25px #00000012; overflow:hidden; transition:border-color .4s,background .4s,box-shadow .4s; }
.ma-faq-card[data-faq-key="design"] { --card-rgb:231,200,146; }
.ma-faq-card[data-faq-key="platforms"] { --card-rgb:143,180,255; }
.ma-faq-card[data-faq-key="investment"] { --card-rgb:132,224,189; }
.ma-faq-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(340px circle at var(--card-x,20%) var(--card-y,0%),rgba(var(--card-rgb),.13),transparent 90%); transition:opacity .35s; }
.ma-faq-card::after { content:""; position:absolute; left:0; top:22px; bottom:22px; width:2px; border-radius:2px; background:rgb(var(--card-rgb)); box-shadow:0 0 20px rgba(var(--card-rgb),.5); opacity:0; transform:scaleY(.4); transition:opacity .4s,transform .45s; }
.ma-faq-interactive .ma-faq-card:hover, .ma-faq-interactive .ma-faq-card:focus-within { border-color:rgba(var(--card-rgb),.4); }
.ma-faq-card:hover::before, .ma-faq-card:focus-within::before, .ma-faq-card[open]::before { opacity:1; }
.ma-faq-interactive .ma-faq-card[open] { border-color:rgba(var(--card-rgb),.48); background:linear-gradient(115deg,rgba(var(--card-rgb),.08),#0a1623 75%); box-shadow:0 15px 45px #0003,inset 0 1px 0 rgba(var(--card-rgb),.08); }
.ma-faq-card[open]::after { opacity:1; transform:scaleY(1); }
.ma-faq-interactive .ma-faq-card summary { box-sizing:border-box; display:grid; grid-template-columns:28px 1fr 32px; gap:19px; min-height:101px; padding:24px 26px; color:#e2edf7; list-style:none; }
.ma-faq-interactive .ma-faq-card summary::marker { content:""; }
.ma-faq-interactive .ma-faq-card summary span, .ma-faq-interactive .ma-faq-card[open] summary span { transform:none; }
.ma-faq-interactive .ma-faq-card .ma-faq-question { color:inherit; font-size:17px; line-height:1.5; font-weight:450; letter-spacing:-.015em; }
.ma-faq-icon { width:26px; height:26px; color:#8da6bc; transition:color .4s,transform .45s; }
.ma-faq-card:hover .ma-faq-icon, .ma-faq-card[open] .ma-faq-icon { color:rgb(var(--card-rgb)); transform:translateY(-2px); }
.ma-faq-interactive .ma-faq-toggle { position:relative; display:block; width:32px; height:32px; border:1px solid #bed8f025; border-radius:50%; transition:background .35s,border-color .35s,transform .4s; }
.ma-faq-toggle::before, .ma-faq-toggle::after { content:""; position:absolute; left:10px; top:15px; width:10px; height:1px; background:#acc5d8; transition:transform .4s,background .3s; }
.ma-faq-toggle::after { transform:rotate(90deg); }
.ma-faq-card[open] .ma-faq-toggle { background:rgba(var(--card-rgb),.13); border-color:rgba(var(--card-rgb),.45); }
.ma-faq-card[open] .ma-faq-toggle::after { transform:rotate(0deg); }
.ma-faq-card[open] .ma-faq-toggle::before,.ma-faq-card[open] .ma-faq-toggle::after { background:rgb(var(--card-rgb)); }
.ma-faq-answer > div { padding:0 32px 28px 73px; }
.ma-faq-interactive .ma-faq-card p { margin:0; max-width:none; font-size:14px; line-height:1.85; color:#afc0d0; }
.ma-faq-takeaway { display:flex; align-items:center; gap:9px; margin-top:21px; color:rgb(var(--card-rgb)); font-size:12px; line-height:1.5; }
.ma-faq-takeaway::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 12px rgba(var(--card-rgb),.5); }
.ma-faq-contact { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 3px 0; color:#94a9bc; text-decoration:none; font-size:13px; line-height:1.5; }
.ma-faq-contact > span { color:#e5f1fa; white-space:nowrap; }
.ma-faq-contact > span > span { display:inline-block; margin-left:8px; color:var(--faq-accent); transition:transform .25s; }
.ma-faq-contact:hover > span > span { transform:translate(3px,-3px); }
.ma-faq-interactive :is(summary,button,a):focus-visible { outline:2px solid #e1f4ff; outline-offset:-5px; border-radius:10px; }
.ma-faq-contact:focus-visible { outline-offset:5px!important; }
.ma-faq-interactive:not(.is-inview) *, .ma-faq-interactive.is-paused *, .ma-motion-paused .ma-faq-interactive * { animation-play-state:paused!important; }
[data-faq-topic="accounts"] .ma-faq-scene:not([data-faq-scene="accounts"]) *, [data-faq-topic="design"] .ma-faq-scene:not([data-faq-scene="design"]) *, [data-faq-topic="platforms"] .ma-faq-scene:not([data-faq-scene="platforms"]) *, [data-faq-topic="investment"] .ma-faq-scene:not([data-faq-scene="investment"]) * { animation-play-state:paused; }
.ma-faq-interactive.is-paused .ma-faq-scenes, .ma-motion-paused .ma-faq-scenes { transform:none; }
@keyframes faq-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes faq-connect { to { stroke-dashoffset:-56; } }
@keyframes faq-core { 0%,100% { transform:scale(1); } 50% { transform:scale(1.065); } }
@media (max-width:1100px) { .ma-faq-interactive .ma-faq-layout { gap:40px; } .ma-faq-interactive .ma-faq-card summary { padding-inline:20px; gap:14px; } .ma-faq-answer > div { padding-left:62px; padding-right:24px; } .ma-faq-interactive .ma-faq-card .ma-faq-question { font-size:16px; } }
@media (max-width:900px) { .ma-faq-interactive { padding-block:80px; } .ma-faq-interactive .ma-faq-layout { grid-template-columns:1fr; gap:40px; max-width:680px; } .ma-faq-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; align-items:center; } .ma-faq-interactive h2 { font-size:42px; align-self:end; } .ma-faq-lede { margin-top:18px; font-size:14px; align-self:start; } .ma-faq-visual { grid-column:2; grid-row:1 / 3; margin:0; width:100%; } .ma-faq-art { height:215px; } .ma-faq-caption { margin:0; padding-bottom:40px; } .ma-faq-caption strong { font-size:16px; } .ma-faq-caption > span { font-size:11px; } .ma-faq-motion { bottom:-6px; right:calc(50% - 22px); } .ma-faq-orbit { top:5%; } .ma-faq-interactive .ma-faq-card summary { min-height:88px; padding:21px 24px; } .ma-faq-answer > div { padding-left:66px; } }
@media (max-width:560px) { .ma-faq-interactive { padding:65px 0; } .ma-faq-interactive .ma-faq-layout { width:calc(100% - 36px); gap:27px; } .ma-faq-intro { display:block; } .ma-faq-interactive h2 { font-size:43px; } .ma-faq-lede { font-size:14px; margin-top:18px; } .ma-faq-visual { max-width:380px; margin:12px auto 0; } .ma-faq-art { height:218px; } .ma-faq-caption { margin:0 38px; min-height:53px; padding:0; } .ma-faq-caption strong { font-size:17px; } .ma-faq-caption > span { font-size:12px; } .ma-faq-motion { right:0; bottom:6px; } .ma-faq-orbit { top:-12%; } .ma-faq-list { gap:10px; } .ma-faq-interactive .ma-faq-card summary { grid-template-columns:23px 1fr 28px; gap:13px; min-height:91px; padding:20px 17px; } .ma-faq-icon { width:23px; height:23px; } .ma-faq-interactive .ma-faq-card .ma-faq-question { font-size:15px; line-height:1.5; } .ma-faq-interactive .ma-faq-toggle { width:28px; height:28px; } .ma-faq-toggle::before, .ma-faq-toggle::after { left:8px; top:13px; } .ma-faq-answer > div { padding:0 22px 25px 53px; } .ma-faq-interactive .ma-faq-card p { font-size:13px; line-height:1.8; } .ma-faq-takeaway { margin-top:18px; font-size:11px; } .ma-faq-contact { font-size:12px; padding-top:13px; } }
@media (prefers-reduced-motion:reduce) { .ma-faq-interactive *, .ma-faq-interactive *::before, .ma-faq-interactive *::after { animation:none!important; transition:none!important; } .ma-faq-scenes { transform:none; } .ma-faq-motion { display:none; } }
@media (forced-colors:active) { .ma-faq-interactive h2 span { background:none; -webkit-text-fill-color:CanvasText; } .ma-faq-interactive .ma-faq-card { border:1px solid ButtonText; } .ma-faq-toggle::before, .ma-faq-toggle::after { background:ButtonText; } }