/* Реєстрація: полотно 1440x780 з Figma, масштаб під ширину вікна (signup.js) */
.sg-ray { left: 236.27px; top: -78.78px; width: 509.313px; height: 509.313px; transform: rotate(20.63deg); }

.sg-effect {
    left: 0;
    top: 0;
    width: 1440px;
    height: 780px;
    -webkit-mask-image: linear-gradient(to bottom, #000 330px, transparent 500px);
    mask-image: linear-gradient(to bottom, #000 330px, transparent 500px);
}
.sg-effect > * { position: absolute; }
.sg-fill--1 { background: #101e3d; filter: blur(94.604px); left: -195.12px; top: -0.04px; width: 494.567px; height: 312.02px; }
.sg-fill--2 { background: #0b162f; filter: blur(160.835px); left: -327px; top: -0.04px; width: 626.452px; height: 394.85px; }
.sg-fill--3 { background: #163681; filter: blur(160.835px); mix-blend-mode: saturation; left: -327px; top: -0.04px; width: 626.452px; height: 114.997px; }
.sg-fill--4 { background: #163681; filter: blur(160.835px); mix-blend-mode: saturation; left: -327px; top: 20.87px; width: 626.452px; height: 410.129px; }
.sg-lray, .sg-beam, .sg-spark { display: flex; align-items: center; justify-content: center; mix-blend-mode: plus-lighter; }
.sg-lray > *, .sg-beam > div, .sg-spark > div { flex: none; }
.sg-lray { width: 264.487px; height: 256.954px; }
.sg-lray img { width: 66.824px; height: 372.057px; transform: rotate(-134deg); }
.sg-lray--1 { left: -133.43px; top: -22.97px; }
.sg-lray--2 { left: -13.96px; top: -96px; }
.sg-beam > div { transform: rotate(-47.63deg); }
.sg-beam--1 { left: -203.16px; top: -34.62px; width: 241.802px; height: 256.646px; mix-blend-mode: normal; }
.sg-beam--1 > div { width: 290.792px; height: 62.036px; background: rgba(165, 243, 252, 0.25); filter: blur(47.496px); }
.sg-beam--2 { left: -133.37px; top: -11.35px; width: 207.7px; height: 225.54px; }
.sg-beam--2 > div { width: 290.792px; height: 15.878px; border-radius: 135.839px; opacity: .79; filter: blur(29.213px); background: linear-gradient(-0.998deg, #6dc5d8 40.06%, #6a77e8 48.11%); }
.sg-beam--3 { left: -23.31px; top: -11.35px; width: 202.67px; height: 220.025px; }
.sg-beam--3 > div { width: 283.327px; height: 15.878px; border-radius: 135.839px; opacity: .79; filter: blur(29.213px); background: linear-gradient(0.117deg, #6dc5d8 28.444%, #6a77e8 35.123%); }
.sg-spark { left: -27.74px; top: -19.31px; width: 105.225px; height: 103.631px; }
.sg-spark > div { width: 41.548px; height: 106.158px; border-radius: 101.923px; filter: blur(12.08px); transform: rotate(-134deg); background: linear-gradient(262.98deg, #fff 52.92%, rgba(255, 255, 255, 0) 53.57%); }

.sg-mountains { left: 0; top: 501px; width: 651px; height: 279px; }
.sg-mountains img { width: 100%; height: 100%; }
.sg-mountains::after { content: ''; position: absolute; left: 519px; top: 0; width: 132px; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0), #000); }

.sg-flow { left: 0; top: 0; width: 580px; height: 500px; overflow: hidden; pointer-events: none; }
.sg-flow > * { position: absolute; }
.sg-flow .fg-flow {
    -webkit-mask-image: radial-gradient(110% 100% at 0 0, #000 20%, rgba(0, 0, 0, .5) 50%, transparent 80%);
    mask-image: radial-gradient(110% 100% at 0 0, #000 20%, rgba(0, 0, 0, .5) 50%, transparent 80%);
}
.sg-dust { left: 286px; top: -46px; width: 440px; height: 330px; pointer-events: none; }
.sg-logo-art { left: 0; top: 0; width: 0; height: 0; }
.sg-logo-art > * { position: absolute; }
.sg-logo-pic { left: 436.07px; top: 55.07px; width: 140px; height: 140px; transform: rotate(20.48deg); transition: opacity .6s ease; }
.sg-logo-art.is-3d > .sg-logo-pic { opacity: 0; }
.sg-logo-3d { left: 397.32px; top: 16.32px; width: 217.5px; height: 217.5px; pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; }
.sg-logo-3d.is-dragging { cursor: grabbing; }
.sg-logo-3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 0 24px rgba(70, 110, 255, 0.5)); }
.sg-logo-3d.is-ready canvas { opacity: 1; }

.sg-brand { left: 60px; top: 40px; width: 125px; height: 30px; -webkit-user-drag: none; }
.sg-brand > * { position: absolute; }
.sg-brand img { left: 0; top: 0; width: 30px; height: 30px; object-fit: cover; transition: opacity .6s ease; -webkit-user-drag: none; }
.sg-brand.is-3d img { opacity: 0; }
.sg-brand-3d { left: -3.81px; top: -4.69px; width: 40px; height: 40px; pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; }
.sg-brand-3d.is-dragging { cursor: grabbing; }
.sg-brand-3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.sg-brand-3d.is-ready canvas { opacity: 1; }
.sg-brand span { left: 38px; top: 5px; font-size: 20px; font-weight: 700; line-height: .95; letter-spacing: -0.4px; white-space: nowrap; }

.sg-back { left: 60px; top: 151px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; white-space: nowrap; transition: opacity .2s ease; }
.sg-back img { width: 20px; height: 20px; }
.sg-back span { opacity: .3; }
.sg-back:hover { opacity: .7; }

.sg-title { left: 60px; top: 203px; width: 429px; font-size: 72px; font-weight: 700; line-height: .95; letter-spacing: -1.44px; }
.sg-grad {
    background: #8a63f9 linear-gradient(192.94deg, var(--grad-b) 49.5%, var(--grad-c) 82.9%) no-repeat;
    background-size: var(--gw, 100%) var(--gh, 100%);
    background-position: var(--gx, 0) var(--gy, 0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sg-lead { left: 60px; top: 431px; width: 445px; font-size: 16px; line-height: 1.3; opacity: .4; }
.sg-features { left: 60px; top: 513px; display: flex; flex-direction: column; gap: 16px; }
.sg-features li { display: flex; align-items: center; gap: 14px; }
.sg-features img { width: 32px; height: 32px; }
.sg-features div { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.sg-features b { font-weight: 600; }
.sg-features span { opacity: .5; }

/* ---------- Картка форми ---------- */
.sg-card {
    left: 617px;
    top: 16px;
    width: 807px;
    height: 748px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: var(--glass-bg);
    box-shadow: var(--glass-glow);
}
.sg-form {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    height: 732px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}
.sg-form > * { position: absolute; margin: 0; }
.sg-heading { left: 0; right: 0; top: 39px; text-align: center; font-size: 32px; font-weight: 700; line-height: .95; letter-spacing: -0.64px; }

.sg-tab { top: 109px; width: 350px; height: 35px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.3; }
.sg-tab::after { content: ''; position: absolute; left: 0; right: 0; top: 31px; height: 4px; border-radius: 46px; background: rgba(255, 255, 255, 0.15); transition: background-color .2s ease; }
.sg-tab.is-active::after { background: linear-gradient(90deg, var(--grad-b) 3.79%, var(--grad-c) 96.21%); }
a.sg-tab:hover::after { background: rgba(255, 255, 255, 0.35); }

.sg-role { top: 163px; width: 350px; height: 88px; border-radius: 12px; overflow: clip; background: rgba(255, 255, 255, 0.15); color: #fff; transition: background-color .25s ease, color .25s ease; }
.sg-role:hover { background: rgba(255, 255, 255, 0.2); }
.sg-role.is-active { background: #fff; color: #000; }
.sg-role:focus-visible { outline: 2px solid var(--grad-b); outline-offset: 2px; }
.sg-role > * { position: absolute; }
.sg-role__icon { left: 12px; top: 12px; width: 42px; height: 42px; }
.sg-role b { left: 80px; top: 16px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sg-role span { left: 80px; top: 38px; width: 207px; font-size: 14px; font-weight: 500; line-height: 1.3; opacity: .5; }
.sg-role__on, .sg-role__off { left: 314px; top: 12px; width: 24px; height: 24px; transition: opacity .25s ease; }
.sg-role__on { opacity: 0; }
.sg-role.is-active .sg-role__on { opacity: 1; }
.sg-role.is-active .sg-role__off { opacity: 0; }

.sg-label { font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.sg-input {
    width: 350px;
    height: 56px;
    padding: 0 19px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 8px 0 rgba(255, 255, 255, 0.15);
    color: #fff;
    font: 500 14px/1.3 'Fixel Display', system-ui, sans-serif;
    outline: none;
    transition: border-color .2s ease;
}
.sg-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.sg-input:focus { border-color: rgba(255, 255, 255, 0.3); }
.sg-input.is-invalid { color: #d60000; }
.sg-input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.sg-pass { width: 350px; height: 56px; }
.sg-pass .sg-input { padding-right: 56px; }
.sg-eye { position: absolute; right: 20.18px; top: 16px; width: 24px; height: 24px; }
.sg-eye img { position: absolute; left: 0; top: 0; width: 24px; height: 24px; transition: opacity .2s ease; }
.sg-eye__on, .sg-eye[aria-pressed="true"] .sg-eye__off { opacity: 0; }
.sg-eye[aria-pressed="true"] .sg-eye__on { opacity: 1; }
.sg-site { left: 399px; top: 484px; width: 350px; height: 56px; }
.sg-site .sg-input { width: 100%; padding: 0 56px 0 53px; }
.sg-site__link, .sg-site__info { position: absolute; top: 16px; width: 24px; height: 24px; pointer-events: none; }
.sg-site__link { left: 20px; }
.sg-site__info { left: 306px; top: 16.14px; }

.sg-check { left: 39px; display: block; height: 18px; font-size: 12px; line-height: 1.3; white-space: nowrap; color: rgba(255, 255, 255, 0.4); cursor: pointer; }
.sg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sg-check i { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, border-color .2s ease; }
.sg-check i img { width: 12px; height: 12px; opacity: 0; transition: opacity .2s ease; }
.sg-check input:checked + i { background: #0095ff; border-color: #0095ff; }
.sg-check input:checked + i img { opacity: 1; }
.sg-check input:focus-visible + i { outline: 2px solid var(--grad-b); outline-offset: 2px; }
.sg-check span { position: absolute; left: 30px; top: 1px; }
.sg-check a, .sg-have a { color: #0095ff; text-decoration: underline; text-underline-position: from-font; }
.sg-check a:hover, .sg-have a:hover { color: #4db5ff; }

.sg-error { left: 39px; top: 604px; width: 710px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.3; color: #d60000; }
.sg-submit { left: 39px; top: 624px; width: 710px; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(181.49deg, var(--grad-a) 15.744%, var(--grad-b) 46.475%, var(--grad-c) 72.42%); }
.sg-submit .btn-label, .sg-submit .arrow { position: relative; left: auto; top: auto; }
.sg-submit .btn-label { transform: none; }
.sg-have { left: 0; right: 0; top: 691px; text-align: center; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.4); }

/* ---------- Вхід: та сама картка без ролей і галочок ---------- */
.sg-card--login { top: 133px; height: 514px; }
.sg-card--login .sg-form { height: 498px; }
.sg-input--wide, .sg-pass--wide { width: 710px; }
.sg-pass--wide .sg-input { width: 100%; }
.sg-card--login .sg-error { left: 59px; top: 352px; width: 690px; }
.sg-card--login .sg-submit { top: 390px; }
.sg-card--login .sg-have { top: 458px; }

/* ---------- Кнопка під час відправки: градієнт заповнює її, як смуга прогресу (signup.js) ---------- */
.sg-submit.is-loading { background: #282f40; cursor: progress; }
.sg-submit.is-loading > :is(.glint, .liquid-fill, .arrow) { display: none; }
.sg-submit.sg-submit.is-loading .btn-label { color: #f0fefd; }
.sg-progress {
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    background: linear-gradient(184.81deg, var(--grad-a) 15.744%, var(--grad-b) 46.475%, var(--grad-c) 72.42%);
    box-shadow: inset 0 0 8px 1px rgba(255, 255, 255, 0.75);
    animation: sg-progress 8s cubic-bezier(.2, .8, .3, 1) forwards;
}
.sg-progress .glint { left: 118px; top: 2.41px; }
@keyframes sg-progress {
    0% { width: 0; }
    8% { width: 31%; }
    100% { width: 92%; }
}

/* ---------- Успішна реєстрація: кроки, заголовки, картка Telegram ---------- */
.sg-step-glow { left: .84px; top: .84px; width: 120.33px; height: 120.33px; pointer-events: none; }
.sg-step-line { left: 82px; top: 60px; width: 140px; height: 4px; border-radius: 46px; background: rgba(255, 255, 255, 0.15); }
.sg-step-line i { position: absolute; left: 0; top: 0; width: 86px; height: 4px; border-radius: 46px; background: linear-gradient(113.87deg, var(--grad-b) 0%, var(--grad-c) 43.576%); transform-origin: left; }
.sg-step {
    top: 39px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.2);
}
.sg-step--done {
    border: .745px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8.94px);
    backdrop-filter: blur(8.94px);
    box-shadow: inset 0 2.98px 8.94px 0 rgba(255, 255, 255, 0.25);
}
.sg-step b {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), linear-gradient(218.83deg, var(--grad-a) 9.93%, var(--grad-b) 49.5%, var(--grad-c) 82.9%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sg-step--done b { background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), linear-gradient(230.37deg, var(--grad-a) 9.93%, var(--grad-b) 49.5%, var(--grad-c) 82.9%); }
.sg-step-label { top: 99px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sg-step--1, .sg-step-label--1 { left: 39px; }
.sg-step--2, .sg-step-label--2 { left: 199px; }

.sg-done-title { left: 39px; top: 171px; font-size: 46px; font-weight: 700; line-height: .95; letter-spacing: -0.92px; white-space: nowrap; }
.sg-done-sub { left: 39px; top: 352px; width: 710px; font-size: 46px; font-weight: 700; line-height: 1; text-wrap: balance; }
@property --sh { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sg-grad--sub {
    background-image: linear-gradient(90deg, var(--grad-b), var(--grad-c) 50%, var(--grad-b));
    background-repeat: repeat-x;
    background-position: calc(var(--gx, 0px) + var(--sh)) var(--gy, 0px);
    animation: sg-shimmer 4s linear infinite;
}
@keyframes sg-shimmer { to { --sh: var(--gw, 0px); } }
.sg-done-text { left: 39px; top: 468px; width: 582px; font-size: 16px; line-height: 1.3; }

.sg-tg {
    left: 39px;
    top: 550px;
    width: 710px;
    height: 141px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    background: rgba(7, 89, 248, 0.15);
    transition: border-color .3s ease;
}
.sg-tg > * { position: absolute; }
.sg-tg__glow { left: -9.5px; top: -8.5px; width: 159px; height: 159px; pointer-events: none; transition: opacity .3s ease; }
.sg-tg__link { inset: 0; overflow: hidden; border-radius: 19px; color: #fff; }
.sg-tg__link > * { position: absolute; }
.sg-tg__link::before, .sg-tg__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity .3s ease, box-shadow .3s ease; }
.sg-tg__link::before { background: linear-gradient(182.1deg, var(--grad-a) 4.72%, var(--grad-b) 47.82%, var(--grad-c) 84.21%); opacity: 0; }
.sg-tg__link::after { box-shadow: inset 0 0 40px 0 rgba(255, 255, 255, 0.2); }
.sg-tg__link:focus-visible { outline: 2px solid var(--grad-b); outline-offset: 2px; }
.sg-tg__glint { left: 378px; top: -18px; width: 198.86px; height: 193.78px; display: flex; align-items: center; justify-content: center; mix-blend-mode: plus-lighter; opacity: 0; transition: opacity .3s ease; }
.sg-tg__glint i { flex: none; width: 35.91px; height: 241.78px; border-radius: 126.56px; filter: blur(15px); transform: rotate(-134deg); background: linear-gradient(267.32deg, #fff 52.92%, rgba(255, 255, 255, 0) 53.57%); }
.sg-tg__icon {
    left: 31.39px;
    top: 31.39px;
    width: 76.5px;
    height: 76.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .898px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10.77px);
    backdrop-filter: blur(10.77px);
    box-shadow: inset 0 3.59px 10.77px 0 rgba(255, 255, 255, 0.25);
}
.sg-tg__icon img { width: 40px; height: 40px; }
.sg-tg__label { left: 136px; top: 33px; font-size: 14px; font-weight: 500; line-height: 1.3; opacity: .5; white-space: nowrap; }
.sg-tg__handle { left: 136px; top: 59px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: underline; text-underline-position: from-font; }
.sg-tg__status { left: 136px; top: 93px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.sg-tg__dot { width: 12px; height: 12px; transition: opacity .3s ease; }
.sg-tg__dot--hover { position: absolute; left: 0; top: 1.2px; opacity: 0; }
.sg-tg__arrow { left: 633px; top: 48px; width: 44px; height: 44px; transform: rotate(-90deg) scaleY(-1); }
.sg-tg__copy { left: 308px; top: 55px; width: 24px; height: 24px; z-index: 1; transition: opacity .2s ease; }
.sg-tg__copy img { position: absolute; left: 0; top: 0; width: 24px; height: 24px; transition: opacity .2s ease; }
.sg-tg__copy-ok { padding: 4px; opacity: 0; }
.sg-tg__copy.is-copied .sg-tg__copy-icon { opacity: 0; }
.sg-tg__copy.is-copied .sg-tg__copy-ok { opacity: 1; }
.sg-tg__copy:hover { opacity: .7; }
.sg-tg__copy:focus-visible { outline: 2px solid var(--grad-b); outline-offset: 2px; border-radius: 4px; }
.sg-tg:hover { border-color: rgba(255, 255, 255, 0.25); }
.sg-tg:hover .sg-tg__glow { opacity: 0; }
.sg-tg:hover .sg-tg__link::before, .sg-tg:hover .sg-tg__glint { opacity: 1; }
.sg-tg:hover .sg-tg__glint { animation: sg-tg-glint 3s infinite; }
@keyframes sg-tg-glint {
    0% { transform: translateX(-620px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    38%, 100% { transform: translateX(380px); }
}
.sg-tg:hover .sg-tg__link::after { box-shadow: inset 0 0 8px 1px rgba(255, 255, 255, 0.75); }
.sg-tg:hover .sg-tg__dot--hover { opacity: 1; }

/* ---------- Появлення: рядки тексту з-під маски, поля й кнопка блоком (signup.js) ---------- */
rv-line { display: block; overflow: hidden; padding: .15em 0 .2em; margin: -.15em 0 -.2em; }
rv-in { display: block; white-space: nowrap; }
.sg-wait :is(.sg-brand span, .sg-back, .sg-title, .sg-lead, .sg-features, .sg-heading, .sg-tab, .sg-role, .sg-label, .sg-form > .sg-input, .sg-pass, .sg-site, .sg-check, .sg-error, .sg-submit, .sg-have, .sg-step-glow, .sg-step, .sg-step-line, .sg-step-label, .sg-done-title, .sg-done-sub, .sg-done-text, .sg-tg) { opacity: 0; }
.sg-in .sg-tab::after { animation: sg-bar .8s cubic-bezier(.22, 1, .36, 1) .2s both; }
.sg-in .sg-step-line i { animation: sg-bar .9s cubic-bezier(.22, 1, .36, 1) .35s both; }
.sg-in .sg-step-glow { animation: sg-fade 1s ease .3s both; }
@keyframes sg-fade { from { opacity: 0; } }
@keyframes sg-bar { from { transform: scaleX(0); } }

.sg-logo-pic { opacity: 0; }
.sg-logo-art.is-fallback:not(.is-3d) .sg-logo-pic { opacity: 1; }
.sg-logo-3d.is-ready canvas, .sg-logo-art.is-fallback:not(.is-3d) .sg-logo-pic { animation: sg-pop 1s cubic-bezier(.34, 1.56, .64, 1) both; }
.sg-logo-art.is-fallback:not(.is-3d) .sg-logo-pic { --r: 20.48deg; }
@keyframes sg-pop { from { transform: scale(0) rotate(var(--r, 0deg)); } to { transform: scale(1) rotate(var(--r, 0deg)); } }
.sg-brand img { opacity: 0; }
.sg-brand.is-fallback:not(.is-3d) img { opacity: 1; }
.sg-brand-3d.is-ready canvas { animation: sg-pop 1s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .sg-grad--sub, .sg-brand-3d.is-ready canvas, .sg-in .sg-tab::after, .sg-in .sg-step-line i, .sg-in .sg-step-glow, .sg-logo-3d.is-ready canvas, .sg-logo-art.is-fallback:not(.is-3d) .sg-logo-pic { animation: none; }
    .sg-progress { animation: none; width: 31%; }
    .sg-tg:hover .sg-tg__glint { animation: none; }
}

/* ---------- Мобільні вхід і реєстрація: полотно 375 з Figma, висота за карткою (signup.js) ---------- */
.fit--mobile .sg-card:has(> form) { height: auto; }
.fit--mobile form.sg-form {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    margin: 5px;
    padding: 31px 16px 31px 15px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 150px 150px;
    column-gap: 10px;
}
.fit--mobile form.sg-form > * { position: relative !important; left: auto !important; top: auto !important; right: auto; grid-column: 1 / -1; }
.fit--mobile form.sg-form > :is(.sg-tab, .sg-role) { grid-column: auto; }

.fit--mobile .sg-heading { margin-bottom: 24.2px; font-size: 24px; letter-spacing: -0.48px; }
.fit--mobile .sg-tab { width: auto; margin-bottom: 19px; }
.fit--mobile .sg-role { width: auto; height: 86px; margin-bottom: 24px; }
.fit--mobile .sg-role__icon { width: 32px; height: 32px; }
.fit--mobile .sg-role b { left: 12px; top: 56px; font-size: 14px; }
.fit--mobile .sg-role span { display: none; }
.fit--mobile :is(.sg-role__on, .sg-role__off) { left: 118px; top: 18px; width: 20px; height: 20px; }

.fit--mobile .sg-label { margin: 0 0 5.8px 20px; }
.fit--mobile .sg-tab + .sg-label { margin-top: 5px; }
.fit--mobile .sg-card--login .sg-pass { margin-bottom: 16px; }
.fit--mobile :is(.sg-input, .sg-pass, .sg-site) { width: 100%; margin-bottom: 14px; }
.fit--mobile :is(.sg-pass, .sg-site) .sg-input { margin: 0; }
.fit--mobile .sg-eye { right: 20px; top: 17px; width: 20px; height: 20px; }
.fit--mobile .sg-eye img { width: 20px; height: 20px; }
.fit--mobile .sg-site .sg-input { padding: 0 50px 0 49px; }
.fit--mobile :is(.sg-site__link, .sg-site__info) { top: 17px; width: 20px; height: 20px; }
.fit--mobile .sg-site__link { left: 19px; }
.fit--mobile .sg-site__info { left: auto; right: 20px; }

.fit--mobile .sg-check { height: auto; margin: 2px 0 12.8px; white-space: normal; }
.fit--mobile .sg-check ~ .sg-check { margin: 0 0 16.8px; }
.fit--mobile .sg-check > span { position: static; display: block; max-width: 270px; padding-left: 30px; }
.fit--mobile .sg-check > span span { position: static; }
.fit--mobile .sg-check > span a { white-space: nowrap; }
.fit--mobile .sg-error { width: auto; margin: -4px 0 12px; white-space: normal; }
.fit--mobile .sg-submit { width: auto; margin-bottom: 16px; border-color: rgba(255, 255, 255, 0.25); background: linear-gradient(183.41deg, var(--grad-a) 15.744%, var(--grad-b) 46.475%, var(--grad-c) 72.42%); }
.fit--mobile .sg-submit .glint:nth-of-type(1) { left: 0 !important; top: 4.49px !important; }
.fit--mobile .sg-submit .glint:nth-of-type(2) { left: 207px !important; top: -1px !important; }

.sg:not(.sg-done) .sg-m-mountains { top: auto; bottom: 0; height: 178px; overflow: hidden; }
.sg:not(.sg-done) .sg-m-mountains img { height: 229px; }
.sg:not(.sg-done) .sg-m-features { top: auto; bottom: 156px; }

/* ---------- Мобільна успішна реєстрація: полотно 375x1274 з Figma ---------- */
.sg-m-rays { left: 0; top: 0; width: 375px; height: 385px; overflow: hidden; }
.sg-m-ray { position: absolute; width: 389.052px; height: 389.052px; mix-blend-mode: screen; transform: rotate(159.37deg) scaleY(-1); }
.sg-m-ray--r { left: 248.07px; top: -88.94px; }
.sg-m-ray--l { left: -134.94px; top: -59.94px; }
.fit--mobile .sg-flow { width: 300px; height: 300px; }
.fit--mobile .sg-dust { left: -32.5px; top: -40px; width: 440px; height: 330px; }
.sg-m-mountains { left: 0; top: 1045px; width: 375px; height: 229px; }
.sg-m-mountains img { width: 100%; height: 100%; }

.fit--mobile .sg-brand { left: 133px; top: 24px; width: 108px; }
.fit--mobile .sg-brand span { top: 8px; font-size: 16px; letter-spacing: -0.32px; }
.fit--mobile .sg-title { left: 16px; top: 106px; width: 343px; font-size: 46px; letter-spacing: -0.92px; text-align: center; }
.fit--mobile .sg-title .sg-grad { background-image: linear-gradient(190.53deg, var(--grad-b) 49.5%, var(--grad-c) 82.9%); }
.fit--mobile .sg-lead { left: 16px; top: 252px; width: 343px; font-size: 14px; text-align: center; }

.fit--mobile .sg-card { left: 10px; top: 328px; width: 355px; height: 680px; }
.fit--mobile .sg-form { left: 5px; right: 5px; top: 5px; height: 668px; border-radius: 14px; }
.fit--mobile .sg-step-glow { left: 31.84px; top: -15.16px; }
.fit--mobile .sg-step-line { left: 113px; top: 44px; }
.fit--mobile .sg-step { top: 23px; }
.fit--mobile .sg-step--1 { left: 70px; }
.fit--mobile .sg-step--2 { left: 230px; }
.fit--mobile .sg-step-label { top: 83px; width: 120px; font-size: 14px; text-align: center; }
.fit--mobile .sg-step-label--1 { left: 32px; }
.fit--mobile .sg-step-label--2 { left: 192px; }
.fit--mobile .sg-done-title { left: 70.5px; top: 151px; width: 200px; font-size: 36px; letter-spacing: -0.72px; text-align: center; white-space: normal; }
.fit--mobile .sg-done-sub { left: 50.5px; top: 239px; width: 240px; font-size: 24px; line-height: .95; letter-spacing: -0.48px; text-align: center; text-wrap: wrap; }
.fit--mobile .sg-done-text { left: 15px; top: 328px; width: 310px; font-size: 14px; text-align: center; }

.fit--mobile .sg-tg { left: 17px; top: 424px; width: 307px; height: 219px; border-color: rgba(255, 255, 255, 0.25); border-radius: 14px; background: none; }
.fit--mobile .sg-tg__glow { display: none; }
.fit--mobile .sg-tg__link { border-radius: 13px; }
.fit--mobile .sg-tg__link::before { opacity: 1; background: linear-gradient(187.5deg, var(--grad-a) 4.72%, var(--grad-b) 47.82%, var(--grad-c) 84.21%); }
.fit--mobile .sg-tg__link::after { box-shadow: inset 0 0 8px 1px rgba(255, 255, 255, 0.75); }
.fit--mobile .sg-tg__glint { left: 118.55px; top: -49.26px; width: 212.395px; height: 249.422px; opacity: 1; animation: sg-tg-glint-m 3.6s infinite; }
.fit--mobile .sg-tg__glint i { width: 35.906px; height: 292.363px; filter: blur(20px); transform: rotate(140.86deg); background: linear-gradient(267.79deg, #fff 52.92%, rgba(255, 255, 255, 0) 53.57%); }
@keyframes sg-tg-glint-m {
    0% { transform: translateX(-340px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    45%, 100% { transform: translateX(220px); }
}
.fit--mobile .sg-tg__icon { left: 23px; top: 23px; width: 76px; height: 76px; }
.fit--mobile .sg-tg__label { left: 23px; top: 120px; }
.fit--mobile .sg-tg__handle { left: 23px; top: 146px; }
.fit--mobile .sg-tg__status { left: 21px; top: 180px; gap: 9px; }
.fit--mobile .sg-tg__dot--hover { opacity: 1; }
.fit--mobile .sg-tg__arrow { left: 250px; top: 23px; width: 32px; height: 32px; }
.fit--mobile .sg-tg__copy { top: 142px; }

.sg-m-features { left: 16px; top: 1040px; display: flex; gap: 10px; }
.sg-m-features li { width: 108px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sg-m-features img { width: 32px; height: 32px; }
.sg-m-features b { font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; }
.sg-wait .sg-m-features { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .fit--mobile .sg-tg__glint { animation: none; opacity: 0; }
}

html.lp-noblur :is([class*="sg-fill--"], [class*="sg-beam--"] > div, .sg-spark > div, .sg-tg__glint i) { filter: none; -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 55%, transparent); mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 55%, transparent); }
html.lp-noblur [class*="sg-fill--"] { scale: 1.7; }
html.lp-noblur .sg-logo-3d canvas { filter: none; }