.ma-portal-phone { position:relative; min-width:0; padding:26px 18px 22px; border:1px solid #ffffff12; border-radius:18px; overflow:clip; color:#e9f4fd; background:radial-gradient(ellipse at 50% 38%,#29526c 0,#132f46 46%,#091623 85%); }
.ma-portal-caption { position:relative; display:flex; justify-content:center; align-items:center; gap:11px; }
.ma-portal-caption img { width:34px; height:34px; }
.ma-craft { --craft-accent:74,158,211; }
.ma-craft-points article { position:relative; padding:20px; margin:-20px; border-radius:18px; transition:background .35s,box-shadow .35s,translate .35s; }
.ma-craft-points article > span { transition:background .35s,color .35s,box-shadow .35s,transform .5s cubic-bezier(.2,.8,.2,1); }
.ma-craft-points article:hover { background:#ffffff80; box-shadow:0 12px 36px #19394b0a; translate:5px 0; }
.ma-craft-points article:hover > span { background:#193e57; color:#c1eaff; box-shadow:0 6px 22px #478db637; transform:rotate(-6deg) scale(1.08); }
.ma-craft-points article:nth-child(2):hover > span { transform:rotate(6deg) scale(1.08); }
.ma-craft .ma-portal-phone { isolation:isolate; transition:box-shadow .5s; }
.ma-craft .ma-portal-phone::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at var(--craft-x,50%) var(--craft-y,40%),rgba(var(--craft-accent),.25),transparent 65%); opacity:0; transition:opacity .6s; }
.ma-craft .ma-portal-phone:hover::before,.ma-craft .ma-portal-phone:focus-within::before { opacity:1; }
.ma-craft .ma-portal-phone:hover { box-shadow:0 24px 65px #173c5425; }
.ma-craft .ma-portal-login { position:relative; display:table; max-width:100%; margin:8px auto 0; padding:12px 20px; border:1px solid #a5d6f238; border-radius:999px; background:#b5def409; text-decoration:none; transition:background .25s,border-color .25s,transform .25s,box-shadow .25s; }
.ma-craft .ma-portal-login:hover { background:#b5def420; border-color:#a5d6f28a; transform:translateY(-3px); box-shadow:0 8px 24px #0003; }
.ma-craft .ma-portal-login:active { transform:translateY(0) scale(.97); }
.ma-craft .ma-portal-home span { transition:width .25s,background .25s,box-shadow .25s; }
.ma-craft .ma-portal-home:hover span { width:140px; background:#b7e6ff; box-shadow:0 0 12px #77caff88; }
.ma-craft .ma-portal-home:active span { width:90px; }
.ma-craft .ma-portal-sleep button { transition:background .25s,transform .25s; }
.ma-craft .ma-portal-sleep button:hover { background:#285975; transform:translateY(-2px); }
.ma-craft .ma-portal-sleep button:active { transform:scale(.96); }
@media (prefers-reduced-motion:no-preference) {
 .ma-craft-intro h2 > span { display:inline-block; }
 .ma-craft .craft-reveal:not(.craft-revealed) { opacity:0; }
 .ma-craft .craft-revealed { --craft-part:0s; }
 .ma-craft .craft-revealed h2,
 .ma-craft .craft-revealed h2 > span,
 .ma-craft .craft-revealed h3,
 .ma-craft .craft-revealed p,
 .ma-craft .craft-revealed > span,
 .ma-craft .craft-revealed strong,
 .ma-craft .craft-revealed div > span,
 .ma-craft .craft-revealed img,
 .ma-craft .ma-portal-hint.craft-revealed,
 .ma-craft .ma-portal-login.craft-revealed {
   animation:craft-arrive 1.05s cubic-bezier(.16,1,.3,1) both;
   animation-delay:calc(var(--craft-delay,0s) + var(--craft-part,0s));
 }
 .ma-craft .craft-revealed h2 > span { --craft-part:.3s; }
 .ma-craft .ma-craft-intro.craft-revealed > p { --craft-part:.65s; }
 .ma-craft .craft-revealed h3,.ma-craft .craft-revealed strong { --craft-part:.2s; }
 .ma-craft .ma-craft-points .craft-revealed p,
 .ma-craft .ma-portal-caption.craft-revealed div > span { --craft-part:.5s; }
 .ma-craft .craft-reveal:focus-within { opacity:1; }
 .ma-craft .ma-portal-login.craft-revealed:focus-visible { animation:none; }
 @keyframes craft-arrive { from { opacity:0; translate:0 30px; filter:blur(4px); } to { opacity:1; translate:0 0; filter:blur(0); } }
}
@media (hover:none) { .ma-craft-points article:hover { translate:none; } }
@media (prefers-reduced-motion:reduce) {
 .ma-craft *, .ma-craft *::before { transition:none!important; animation:none!important; }
 .ma-craft-points article:hover,.ma-craft .ma-portal-login:hover { translate:none; transform:none; }
}
.ma-portal-caption strong { display:block; font-size:16px; font-weight:550; letter-spacing:-.3px; }
.ma-portal-caption span { display:block; margin-top:5px; font-size:11px; color:#abc0cf; }
.ma-portal-viewport { position:relative; height:600px; width:100%; margin:4px auto; }
.ma-portal-viewport canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
.ma-portal-viewport canvas:active { cursor:grabbing; }
.ma-portal-viewport canvas:focus-visible { outline:2px solid #a3d5fc; outline-offset:-6px; border-radius:12px; }
.ma-portal-display { position:absolute; left:50%; top:50%; width:390px; height:802px; transform:translate(-50%,-50%) scale(.68); transform-origin:center; overflow:hidden; border-radius:54px; background:#030a14; border:8px solid #101317; box-shadow:0 20px 60px #0005; }
.phone-ready .ma-portal-display { left:0; top:0; transform-origin:0 0; border:0; box-shadow:none; }
.ma-portal-display iframe { display:block; width:calc(100% - 20px); margin-inline:10px; height:738px; border:0; background:#030a14; }
/* Loaded inside the sample iframe so its fixed navigation clips in that layer. */
.ma-portal-embedded .portal-nav { border-radius:0 0 26px 26px; overflow:hidden; }
@media(prefers-reduced-motion:no-preference) {
 .ma-portal-embedded :is(button,a,select) { transition:background-color .2s,box-shadow .2s,translate .2s,scale .2s!important; }
 .ma-portal-embedded :is(button,a):hover { box-shadow:0 4px 14px #68baff24; }
 .ma-portal-embedded :is(button,a):active { scale:.97; }
 .ma-portal-embedded :is(button,a,select):focus-visible { outline:2px solid #85caff; outline-offset:2px; }
}
.ma-portal-statusbar { height:42px; padding:9px 25px 7px; display:flex; justify-content:space-between; align-items:center; background:#030a14; color:#fff; font:600 13px/1 system-ui,sans-serif; }
.ma-portal-statusbar i { width:106px; height:25px; border-radius:20px; background:#000; position:absolute; left:calc(50% - 53px); top:7px; }
.ma-portal-home { display:flex; width:100%; height:22px; align-items:center; justify-content:center; border:0; background:#030a14; cursor:pointer; }
.ma-portal-home span { width:112px; height:5px; border-radius:4px; background:#e7eef5; }
.ma-portal-phone button:focus-visible,.ma-portal-phone a:focus-visible { outline:2px solid #c1e6ff; outline-offset:3px; }
.ma-portal-hint { margin:15px auto 8px; min-height:2.8em; max-width:340px; text-align:center; color:#a7c0d4; font-size:11px; line-height:1.5; }
.ma-portal-login { display:block; text-align:center; font-size:12px; color:#d0e9fb; text-decoration:underline; text-underline-offset:4px; }
.ma-portal-sleep { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; color:#fff; background:radial-gradient(ellipse at top,#244c68,#030a14 70%); }
.ma-portal-sleep[hidden] { display:none; }
.ma-portal-sleep > span { font-size:64px; font-weight:300; }
.ma-portal-sleep button { padding:14px 26px; color:#d7edff; background:#173349; border:1px solid #a2c8e344; border-radius:30px; }
@media(max-width:600px) {
 .ma-portal-phone { padding:23px 10px; }
 .ma-portal-caption strong { font-size:14px; }
 .ma-portal-caption span { font-size:10px; }
 .ma-portal-viewport { height:580px; }
}

.ma-portal-gesture { position:absolute; inset:0; z-index:5; pointer-events:none; }
.ma-portal-gesture[hidden] { display:none; }
.ma-gesture-hand { position:absolute; left:0; top:0; width:120px; height:160px; transform-origin:0 0; opacity:0; will-change:transform,opacity; }
.ma-gesture-hand svg { display:block; width:120px; height:160px; transform:translate(-44px,-10px); overflow:visible; filter:drop-shadow(0 5px 5px #0004); }
.ma-gesture-contact { position:absolute; width:28px; height:28px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 12px #ffffff4d; opacity:0; }
@media(max-width:600px) { .ma-portal-display { transform:translate(-50%,-50%) scale(.64); } }
@media(max-width:360px) { .ma-portal-display { transform:translate(-50%,-50%) scale(.58); } }