*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;line-height:1.3}
:root{--logo:clamp(64px,11dvh,104px);--top:clamp(48px,11dvh,96px);--qr:clamp(110px,22dvh,190px)}
html,body{height:100%}
body{height:100dvh;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:var(--top) var(--space-16) var(--space-16);font-family:var(--font-arabic);color:var(--ink);
background:#171638}
.card{width:100%;max-width:440px;max-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(8px,2dvh,24px);border:0;background:var(--white);border-radius:var(--radius-xl);position:relative;z-index:1;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;padding:0 var(--space-24) clamp(24px,4dvh,40px);text-align:center}
.logo{width:var(--logo);height:var(--logo);margin:calc(var(--logo) / -2) auto 0;border-radius:50%;background:var(--white);display:grid;place-items:center;flex:none;animation:float 4s ease-in-out .8s infinite}
.logo img{width:86%;height:86%;display:block}
h1{font-size:clamp(1.4rem,4dvh,2rem);font-weight:700;line-height:1.1}
h1.brand img{display:block;margin:0 auto;height:clamp(32px,6dvh,52px);width:auto}
.tag{color:var(--text-muted);margin-top:var(--space-4)}
.links{display:grid;gap:var(--space-8)}
.link{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg);background:var(--violet-50);color:inherit;text-decoration:none;text-align:start;direction:ltr;transition:transform .15s,background .15s}
.link:hover{background:var(--violet-100);transform:translateY(-2px)}
.link:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ico{width:44px;height:44px;flex:none}
.ico img{width:100%;height:100%;display:block;object-fit:contain}
.txt{flex:1;font-weight:400;font-family:var(--font-latin);letter-spacing:.01em}
.arr{font-size:1.6rem;color:var(--violet-600)}
.qr{padding-top:clamp(8px,2dvh,24px);border-top:1px solid var(--line-soft)}
.qr-box{display:inline-block;padding:clamp(8px,1.6dvh,16px);border:2px solid var(--violet-100);border-radius:var(--radius-lg)}
#qr{display:block;width:var(--qr);height:var(--qr)}
.qr p{color:var(--text-muted);margin:clamp(4px,1dvh,12px) 0;font-size:.9rem}
.actions{display:flex;gap:var(--space-8);justify-content:center}
button{font:inherit;font-size:.8rem;font-weight:600;border:0;cursor:pointer;padding:6px var(--space-12);border-radius:var(--radius-pill);background:var(--violet-50);color:var(--violet-700);min-height:32px}
button:hover{background:var(--violet-100)}
@media(max-width:520px){body{padding:var(--top) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom))}.card{padding-inline:var(--space-16)}}
@media(max-height:680px){.tag{display:none}.links{grid-template-columns:1fr 1fr}.link{flex-direction:column;gap:var(--space-4);padding:var(--space-8);text-align:center}.arr{display:none}.ico{width:36px;height:36px}}
body::before,body::after{content:"";position:fixed;border-radius:50%;background:#2a2766;opacity:.55;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
body::before{width:60vmax;height:60vmax;left:-25vmax;top:-30vmax}
body::after{width:50vmax;height:50vmax;right:-20vmax;bottom:-28vmax;background:#0e0d26;animation-duration:18s}
.link{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.link:nth-child(1){animation-delay:.25s}.link:nth-child(2){animation-delay:.35s}
.qr{animation:rise .6s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-5px)}}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.1)}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}