/* Mobiles Tashkent — an outline of a phone, the handle of a shopping bag. */
:root{--ink:#20211e;--muted:#777a71;--green:#242621;--pale:#eff0ea;--line:#e5e7df;--paper:#fcfcfa}
.logo{gap:12px;align-items:center;flex-shrink:0;letter-spacing:0;line-height:1}
.brand-mark{display:block;width:33px;height:48px;flex-shrink:0;overflow:visible;color:currentColor;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.brand-stroke{stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.logo>.brand-wordmark{display:flex;flex-direction:column;gap:2px;margin:0;font-family:'Manrope',sans-serif;font-size:20px;font-weight:750;letter-spacing:-.8px;line-height:1.12}
.logo .brand-wordmark>span{font-size:inherit;line-height:inherit}
.brand-period{color:#7a8b6a}
.header .brand-stroke{animation:brand-draw 1.15s cubic-bezier(.45,0,.2,1) both}
.header .brand-bag{animation-delay:.16s}
.header .brand-handle{animation-delay:.36s}
.header .brand-notch{animation:brand-appear .6s .6s both}
.logo:hover .brand-mark,.logo:focus-visible .brand-mark{transform:translateY(-3px) rotate(-5deg)}
.header-inner{gap:64px}
.button.dark:hover{background:#3b4034}
.hero{background:#edeee8}
.hero-art{background:radial-gradient(ellipse at 50% 65%,#d9dfcc 0%,#edeee8 75%);background-color:#edeee8}
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>p,.hero-copy>.button,.hero-pager{animation:content-enter .75s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>h1{animation-delay:.09s}.hero-copy>p{animation-delay:.17s}.hero-copy>.button{animation-delay:.24s}.hero-pager{animation-delay:.3s}
.hero-art>img{animation:phone-float 7s ease-in-out infinite}
.hero-caption,.hero-more{animation:content-enter .8s .35s both}
.reveal-pending{opacity:0;transform:translateY(20px);transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.reveal-pending.revealed{opacity:1;transform:translateY(0)}
.product-card.revealed:hover{transform:translateY(-4px);transition-delay:0ms}
.button svg,.detail-button svg,.header-pay>span:last-child{transition:transform .25s ease}
.button:hover>svg:last-child{transform:translateX(3px)}
.detail-button:hover svg,.header-pay:hover>span:last-child{transform:translate(2px,-2px)}
.payment-promo{background:#eff1e9}
.bank-card{background:linear-gradient(125deg,#20251f,#454e3c);box-shadow:3px 16px 27px #2c302324}
.bank-card>div>.card-brand{display:flex;gap:10px;align-items:center;letter-spacing:-.5px;font-size:16px;line-height:1.05;font-family:'Manrope',sans-serif;font-weight:700}
.card-brand .brand-mark{width:24px;height:35px}
.bank-card{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.payment-promo:hover .bank-card{transform:translateY(-5px) rotate(-9deg)}
.floating-payment{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.payment-promo:hover .floating-payment{transform:translateY(-3px) rotate(1deg)}
.summary-mark .brand-mark{width:21px;height:31px}
.footer-top .logo{gap:10px}
.footer-top .logo>.brand-wordmark{font-size:16px;letter-spacing:-.5px}
.footer-top .brand-mark{width:27px;height:39px}
.payment-heading,.payment-layout,.result-page{animation:content-enter .55s cubic-bezier(.2,.7,.2,1) both}
.payment-layout{animation-delay:.1s}
dialog[open]{animation:dialog-enter .25s cubic-bezier(.2,.7,.2,1) both}
dialog[open]::backdrop{animation:brand-appear .2s both}
@keyframes brand-draw{from{stroke-dasharray:100;stroke-dashoffset:100}to{stroke-dasharray:100;stroke-dashoffset:0}}
@keyframes brand-appear{from{opacity:0}to{opacity:1}}
@keyframes content-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(-8deg) scale(2.6)}50%{transform:translateY(-9px) rotate(-6deg) scale(2.6)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1100px){.header-inner{gap:38px}}
@media(max-width:800px){.header-inner{gap:28px}.logo>.brand-wordmark{font-size:17px}.brand-mark{width:29px;height:42px}.logo{gap:9px}}
@media(max-width:580px){.header-inner{gap:17px}.logo{gap:7px}.logo>.brand-wordmark{font-size:13px;letter-spacing:-.3px;gap:2px}.brand-mark{width:25px;height:36px}.header nav{gap:12px}.header-actions{gap:8px}.header nav>a{font-size:10px}.footer-top .logo>.brand-wordmark{font-size:13px}.footer-top .brand-mark{width:23px;height:33px}.footer-top{gap:15px}.footer-top p{font-size:9px}.bank-card>div>.card-brand{font-size:14px;gap:8px}.card-brand .brand-mark{width:20px;height:29px}}
@media(max-width:360px){.header-inner{gap:12px}.header nav{gap:10px}.header-actions{gap:5px}.header-pay{padding:7px}.logo>.brand-wordmark{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1;transform:none}.header .brand-stroke{stroke-dasharray:none;stroke-dashoffset:0}.hero-art>img{transform:rotate(-8deg) scale(2.6)}}