@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#101012;--panel:#19191d;--field:#141417;--line:#2b2a2f;--soft:#a6a3ae;--text:#f8f6f4;--accent:#ff7949;--accent-light:#ff9a6a;--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:500 15px/1.5 Inter,Arial,sans-serif}
button,input,select{font:inherit}
button,select,summary{cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
svg:not(.symbols){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.symbols{width:0;height:0;position:absolute}
.shell{width:min(1220px,calc(100% - 100px));margin-inline:auto}
.header{border-bottom:1px solid #252427}
.header-inner{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px;width:max-content;font-size:25px;letter-spacing:-1.3px;font-weight:800}
.brand-second{color:#a9a5ab;margin-left:4px;font-weight:600}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-content:center;gap:3px;transform:rotate(-8deg)}
.brand-mark i{display:block;width:15px;height:2px;background:#22130e;border-radius:2px;transform:skewX(-26deg)}
.brand-mark i:nth-child(2){width:11px}.brand-mark i:nth-child(3){width:7px}
nav{display:flex;align-items:center;gap:34px;color:var(--soft);font-weight:700;font-size:14px;height:100%}
nav a{display:grid;place-items:center;height:100%;position:relative}
nav a:hover,nav .active{color:var(--text)}
nav .active::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent)}
.button-outline,.primary,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:11px;min-height:44px;color:var(--text);background:#19191c;font-weight:800}
.button-outline{justify-self:end;padding:0 15px;font-size:13px;white-space:nowrap}
.button-outline svg{width:17px;height:17px;color:var(--accent)}
.button-outline:hover,.icon-button:hover{background:#29282c}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,476px);gap:clamp(28px,5.7vw,84px);align-items:start;padding:58px 0 51px}
.intro{position:relative;min-width:0;min-height:570px;padding-top:26px;isolation:isolate}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.17em;color:#cfbec0;font-weight:800}
.eyebrow>span,.demo>span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #ff794966}
.eyebrow b{color:#6e5955;font-weight:500}
h1{font-size:clamp(65px,7.25vw,108px);font-weight:800;line-height:.98;letter-spacing:-.085em;margin-top:23px}
h1 em{font-style:normal;color:var(--accent);background:linear-gradient(104deg,#ffc099 1%,#ff8c5d 44%,#fa6134 93%);background-clip:text;-webkit-text-fill-color:transparent}
.intro p{margin-top:24px;font-size:17px;line-height:1.65;color:#bfbbc4}
.art{width:108%;height:355px;position:absolute;z-index:-1;left:-2%;bottom:-32px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0%, black 16%,black 84%, transparent 100%)}
.art img,.art-fallback{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 51%;mask-image:linear-gradient(to right,transparent,black 10%,black 91%,transparent)}
.art img{background:var(--bg)}.art img[hidden]{display:none}
.art-fallback{background:radial-gradient(ellipse at center,#81402a65,transparent 61%)}
.orbit{position:absolute;left:9%;top:32%;width:81%;height:46%;border:1px solid #b87051;box-shadow:0 0 18px #b95d37ab,inset 0 0 20px #b95d37ab;border-radius:50%;rotate:-15deg}
.coin{position:absolute;left:37%;top:19%;width:36%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at center,#ab5838 0 2px,#cd8056 3px,#78371f 5px,#9b472b 6px);border:6px solid #a95734;box-shadow:11px 17px #462216, 0 0 55px #a0442b80;display:grid;place-items:center;color:#ffc392;text-shadow:2px 3px #803a22;font-size:105px;line-height:1;transform:rotate(-19deg) skewX(-13deg)}
.exchange{position:relative;border:1px solid #343036;border-radius:var(--radius);background:linear-gradient(157deg,#1d1b1e,var(--panel) 50%);padding:26px;box-shadow:0 26px 64px #0006}
.exchange-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.exchange h2{font-size:23px;letter-spacing:-.045em;font-weight:800}
.demo{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:5px 9px;border:1px solid #53362d;border-radius:20px;background:#2a201e;color:#ffac8a;font-size:11px;font-weight:800}
.demo span{width:5px;height:5px}
.directions{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#111113;border:1px solid #28262a;border-radius:11px;padding:4px;margin-bottom:15px}
.directions button{border:1px solid transparent;color:var(--soft);background:transparent;border-radius:8px;min-height:42px;font-size:14px;font-weight:800}
.directions button:hover{color:var(--text)}
.directions button[aria-pressed=true]{background:#34241f;border-color:#613b2e;color:#ffac89}
.amounts{position:relative;display:grid;gap:7px}
.amount-box{background:var(--field);border:1px solid var(--line);border-radius:13px;min-width:0;padding:11px 13px 10px}
.amount-box:focus-within{border-color:var(--accent)}
.amount-box label,.amount-label,.method>label{display:block;color:#b8b3bf;font-size:12px;font-weight:700}
.amount-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;min-height:41px}
.amount-row input,.amount-row output{width:100%;min-width:0;color:var(--text);font-size:29px;letter-spacing:-.04em;font-weight:800;background:transparent;border:none;outline:none;font-variant-numeric:tabular-nums}
.amount-row output{overflow-wrap:anywhere}
.currency{white-space:nowrap;display:flex;align-items:center;gap:7px;border-radius:10px;background:#232228;padding:5px 9px 5px 5px;font-size:13px;font-weight:800}
.currency-icon,.bank-icon{display:inline-grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;font-size:16px;line-height:1}
.tenge{background:#5e4925;color:#ffcf82}.tether{background:#1e705b;color:#edfff7}
.swap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:1;width:38px;height:38px;border-radius:10px;border:3px solid #19191d;background:#312629;color:var(--accent-light)}
.swap::after{content:"";position:absolute;inset:-6px}
.swap:hover{background:#51342c}
.swap svg:not(.symbols){width:16px;height:16px}
.method{margin-top:14px}
.select-wrap{position:relative;margin-top:5px}
.select-wrap select{width:100%;appearance:none;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;height:46px;padding:0 38px 0 44px;font-size:13px;font-weight:800}
.select-wrap .bank-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:800}
.kaspi{background:#a92537;color:white}.card{background:#514770;color:#e7ddff}
.select-wrap>svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#a09ba7;width:16px!important}
.quote{display:grid;gap:6px;margin:13px 0 7px;font-size:12px;color:var(--soft)}
.quote>div,.order-data>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.quote strong,.order-data strong{color:var(--text);font-weight:800}
.quote small{margin-left:4px;color:#b7a9b9;font-size:10px}
.limits{color:#a6a3ae;font-size:11px;margin-bottom:12px}
.error{color:#ff9e93;margin-bottom:9px;font-size:12px}
.primary{width:100%;border-color:transparent;background:var(--accent);color:#20140f;min-height:51px;font-size:14px;gap:12px}
.primary:hover{background:#ff9768}
.primary svg{width:17px!important}
.how{padding:24px 0 0;border-top:1px solid #2b272a}
.how h2,.faq h2{font-size:25px;letter-spacing:-.04em;margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.steps article{display:flex;align-items:center;gap:13px;background:#17171a;border:1px solid var(--line);padding:16px 15px;border-radius:14px}
.step-icon{display:grid;place-items:center;flex:none;width:41px;height:41px;border-radius:11px;background:#2e211f;color:var(--accent-light)}
.steps h3{font-size:14px;font-weight:800}
.steps p{margin-top:3px;font-size:12px;color:var(--soft)}
.faq{margin:58px 0 48px;display:grid;grid-template-columns:1fr 2fr;gap:24px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:0 2px}
summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;gap:10px;list-style:none;font-size:14px;font-weight:800}
summary::-webkit-details-marker{display:none}
details[open] summary svg{rotate:180deg}
details p{padding:0 0 16px;color:var(--soft);font-size:14px}
.footer{color:var(--soft);border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:12px}
dialog{width:min(490px,calc(100% - 28px));max-height:calc(100% - 30px);padding:0;border:1px solid #424046;border-radius:var(--radius);color:var(--text);background:var(--panel);box-shadow:0 24px 90px #0008}
dialog::backdrop{background:#050407bb;backdrop-filter:blur(5px)}
.dialog-wrap{padding:26px}
.close{float:right;width:44px}
.dialog-wrap h2{font-size:25px;letter-spacing:-.04em;padding-right:50px;margin-bottom:12px}
.dialog-wrap p{color:var(--soft);font-size:14px}
.dialog-wrap .demo{margin-bottom:12px}
.order-data{display:grid;gap:10px;padding:15px 12px;border:1px solid var(--line);border-radius:12px;margin:16px 0;color:var(--soft);font-size:13px}
.order-data strong{text-align:right;overflow-wrap:anywhere}
.demo-action{margin-top:14px}
.timeline{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px;color:var(--soft);font-size:13px}
.timeline li::before{content:"○";color:var(--soft);display:inline-block;width:22px}
.timeline .done::before{content:"✓";color:var(--accent-light)}
.order-list{display:grid;gap:8px;margin-top:16px}
.order-item{width:100%;text-align:left;display:flex;justify-content:space-between;gap:12px;padding:12px;color:var(--text);border:1px solid var(--line);background:var(--field);border-radius:10px}
.order-item:hover{border-color:var(--accent)}.order-item span{display:block;font-size:12px;color:var(--soft)}
@media(max-width:1050px){.shell{width:calc(100% - 64px)}.hero{grid-template-columns:minmax(0,1fr) minmax(355px,425px);gap:30px}h1{font-size:clamp(58px,8.2vw,84px)}.intro{min-height:545px}.art{height:300px;bottom:-3px}.exchange{padding:22px}}
@media(max-width:770px){.shell{width:calc(100% - 38px)}.header-inner{grid-template-columns:1fr auto;height:66px;gap:9px}.header nav{display:none}.hero{grid-template-columns:1fr;gap:10px;padding-top:25px;padding-bottom:33px}.intro{min-height:285px;padding-top:8px}h1{font-size:clamp(57px,12vw,83px);margin-top:15px}.intro p{font-size:15px;margin-top:13px;max-width:300px}.desktop-break{display:none}.art{width:56%;height:89%;left:auto;right:-5px;bottom:0;opacity:.64;mask-image:linear-gradient(95deg,transparent, black 45%,black 86%,transparent)}.art img{object-fit:contain;mask-image:none}.art-fallback{mask-image:none}.coin{font-size:clamp(30px,11vw,80px)}.exchange{padding:19px}.steps{grid-template-columns:1fr;gap:8px}.faq{grid-template-columns:1fr;gap:0;margin:37px 0}.footer{gap:15px}}
@media(max-width:385px){.brand{font-size:21px;gap:7px}.brand-mark{width:29px;height:29px}.button-outline{padding-inline:9px}.exchange{padding:14px}.exchange h2{font-size:20px}.amount-row input,.amount-row output{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Magic Money */
:root{color-scheme:light;--bg:#ebeae5;--panel:#fbfaf6;--field:#eeede8;--line:#dbd9d0;--soft:#595960;--text:#151521;--accent:#2337e5;--accent-light:#384bea;--radius:25px}
body{background:var(--bg)}
.shell{width:min(1320px,calc(100% - 80px))}
.header{border-bottom:1px solid #d7d5ce}
.header-inner{height:79px}
.brand{font-size:25px;letter-spacing:-1.55px;gap:9px}
.brand-second{margin-left:0;color:inherit;font-weight:800}
.brand-mark{background:none;color:var(--accent);font-size:34px;width:30px;line-height:1;rotate:9deg;transform:none}
nav .active::after{height:3px}
.button-outline,.icon-button{color:var(--text);background:transparent;border-color:#c6c4bc}
.button-outline:hover,.icon-button:hover{background:#dddbd1}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(370px,425px);gap:30px;align-items:center;min-height:654px;padding:38px 34px 38px 44px;margin:22px 0 0;border-radius:26px;overflow:hidden;background:#1829c9;color:white}
.intro{position:static;isolation:auto;padding:0;min-height:0;align-self:center;z-index:1}
.eyebrow{color:#e0e4ff;font-size:12px;letter-spacing:.16em;background:#0c16864d;border:1px solid #c1c8ff55;padding:7px 12px;border-radius:30px}
.eyebrow b{color:#e0e4ff}
.eyebrow>span{display:none}
h1{font-size:clamp(66px,8.7vw,132px);letter-spacing:-.094em;line-height:.86;margin-top:24px}
h1 em{background:none;color:#dcff70;-webkit-text-fill-color:currentColor}
.intro p{font-size:15px;font-weight:600;color:#edf0ff;margin-top:26px;line-height:1.5;text-shadow:0 1px 7px #0c127e}
.art{inset:0;z-index:-1;width:100%;height:100%;opacity:1;mask-image:none;overflow:hidden;background:#1829c9}
.art img{width:78%;height:100%;left:9%;top:0;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 81%,transparent);background:transparent}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111eaaaf 0%,#1727ba32 28%,transparent 61%,#1829c9 88%);pointer-events:none}
.exchange{background:var(--panel);color:var(--text);border:1px solid #fdfcfb;box-shadow:0 20px 54px #060f6f80;border-radius:23px;padding:24px}
.exchange h2{font-size:25px}
.demo{background:#e8edff;color:#2535a3;border-color:#d8defd}
.demo>span{background:#2535d8;box-shadow:none}
.directions{background:#eae8e2;border-color:transparent}
.directions button{color:#585961}
.directions button[aria-pressed=true]{background:#fff;color:#182cc2;border-color:#d9d6ce;box-shadow:0 2px 5px #20203213}
.amount-box label,.amount-label,.method>label{color:#575763}
.currency{background:#fff}
.tenge{background:#e8e4fb;color:#473298}.tether{background:#19765a;color:#fff}
.swap{background:#263ae9;color:#fff;border-color:var(--panel);width:39px;height:39px}
.swap:hover{background:#1524a7}
.select-wrap>svg{color:#545460}
.quote small{color:#505069}
.limits,.steps p,.footer{color:#575762}
.error{color:#ad193c}
.primary{background:#ddff72;color:#162000;border:1px solid #cce963;font-weight:800}
.primary:hover{background:#c9ee5a}
.how{margin-top:30px;padding:0;border-top:0}
.how h2,.faq h2{font-size:clamp(26px,3vw,42px);letter-spacing:-.07em;line-height:1.02}
.steps{gap:0;border:1px solid #d2d0c8;border-radius:18px;background:#f4f3ee;overflow:hidden}
.steps article{background:none;border:none;border-radius:0;padding:17px 16px}
.steps article+article{border-left:1px solid #d2d0c8}
.step-icon{background:#e1e4fd;color:#263be1}
.faq{margin-top:58px}
dialog{border-color:#fff;box-shadow:0 20px 75px #0b143a58}
dialog::backdrop{background:#0c114888}
@media(max-width:1050px){.shell{width:calc(100% - 44px)}.hero{padding-inline:27px;grid-template-columns:minmax(0,1fr) minmax(345px,390px);gap:16px}.art img{left:3%;width:95%;object-position:54% center}}
@media(max-width:770px){.shell{width:calc(100% - 32px)}.header-inner{height:64px}.hero{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;padding:22px 16px 16px;border-radius:20px;margin-top:12px;min-height:0}.intro{padding:4px 2px 0}.art{height:365px}.art img{width:113%;left:10%;height:100%;object-position:50% 55%;mask-image:linear-gradient(90deg,transparent 8%,black 38%,black 100%)}.art::after{background:linear-gradient(0deg,#1829c9,transparent 34%),linear-gradient(90deg,#1021b2a3,transparent 72%)}h1{font-size:clamp(58px,13vw,104px);margin-top:14px}.intro p{max-width:260px;font-size:13px;margin-top:16px}.exchange{padding:16px;border-radius:16px}.exchange h2{font-size:21px}.steps article+article{border-left:0;border-top:1px solid #d2d0c8}.steps{gap:0}.faq{margin-top:38px}}
@media(max-width:365px){.shell{width:calc(100% - 22px)}.hero{padding-inline:10px}.brand{font-size:22px}.brand-mark{font-size:29px}.exchange{padding:12px}.intro p{max-width:220px}}