@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap');
body{font-family:'Vazirmatn',Tahoma,sans-serif!important;background:#07060a!important;position:relative;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(110px);opacity:.28;z-index:-1;pointer-events:none;animation:fl 16s ease-in-out infinite alternate}
body::before{background:#ff2d46;top:-160px;right:-120px}body::after{background:#ff4fa3;bottom:-200px;left:-140px;animation-delay:-8s}
@keyframes fl{to{transform:translate(70px,60px) scale(1.2)}}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes shine{to{background-position:200% 0}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,45,70,0)}}
.top{backdrop-filter:blur(14px);background:rgba(10,8,13,.78)!important;border-bottom:1px solid rgba(255,255,255,.08)}
.navlinks a{position:relative;transition:.25s}.navlinks a::after{content:"";position:absolute;right:0;left:0;bottom:-6px;height:2px;background:#ff2d46;transform:scaleX(0);transition:.3s}
.navlinks a:hover{color:#fff}.navlinks a:hover::after{transform:scaleX(1)}
main>*,.citizen-profile>*{animation:up .7s both}
main>*:nth-child(2),.citizen-profile>*:nth-child(2){animation-delay:.1s}main>*:nth-child(3),.citizen-profile>*:nth-child(3){animation-delay:.2s}
.citizen-hero,.profile-section,.ticket-card,.card,.ord-prod,.ord-form{background:linear-gradient(160deg,rgba(24,18,30,.92),rgba(14,11,18,.92))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:20px;transition:.35s}
.citizen-hero:hover,.profile-section:hover,.ticket-card:hover,.ord-prod:hover{border-color:rgba(255,45,70,.5)!important;box-shadow:0 18px 50px -18px rgba(255,45,70,.45);transform:translateY(-3px)}
.citizen-hero h1 em,.ord-price{background:linear-gradient(90deg,#ff2d46,#ff4fa3,#ffc857,#ff2d46);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;animation:shine 4s linear infinite}
.btn,button.btn{background:linear-gradient(90deg,#ff2d46,#ff4fa3)!important;border:0!important;color:#fff!important;border-radius:12px;font-weight:800;cursor:pointer;transition:.3s;animation:pulse 2.6s infinite}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px -8px rgba(255,45,70,.7)}
.field,input.field,select.field,textarea.field{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;color:#fff!important;transition:.25s}
.field:focus{border-color:#ff2d46!important;box-shadow:0 0 0 4px rgba(255,45,70,.18)!important;outline:0}
.status-pill{border-radius:99px}.ticket-card summary{cursor:pointer}
.ord{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;margin:30px 0}@media(max-width:800px){.ord{grid-template-columns:1fr}}
.ord-prod,.ord-form{padding:24px}.ord-prod img{width:100%;max-height:300px;object-fit:cover;border-radius:14px;margin-bottom:14px;transition:.5s}.ord-prod:hover img{transform:scale(1.04)}
.ord-ic{font-size:90px;text-align:center;animation:fl 5s ease-in-out infinite alternate;margin-bottom:10px}
.ord-price{font-size:30px;font-weight:800;margin-top:12px}
.ord-form label{display:block;margin:12px 0 6px;color:#b9b2c2;font-size:14px}
.ord-card{margin-top:12px;padding:14px;border:1px dashed #ff4fa3;border-radius:14px;text-align:center;background:rgba(255,79,163,.07)}
.ord-card b{display:block;font-size:22px;letter-spacing:2px;margin:6px 0}
/* richer background */
body{background:radial-gradient(1200px 600px at 85% -10%,rgba(255,45,70,.16),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(255,79,163,.14),transparent 60%),radial-gradient(700px 500px at 50% 50%,rgba(60,90,255,.07),transparent 70%),#07060a!important;background-attachment:fixed!important}
body>main,body>.wrap,.citizen-profile{position:relative;z-index:1}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);animation:grid 30s linear infinite}
@keyframes grid{to{background-position:56px 56px}}

/* animated W logo */
.logo,.footer-logo{position:relative;display:inline-grid;place-items:center;overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.logo::before,.footer-logo::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,#ffc857 80%,transparent 90%);animation:logo-spin 3.5s linear infinite;opacity:.9}
.logo::after,.footer-logo::after{content:"";position:absolute;inset:2px;border-radius:inherit;z-index:-1;background:inherit}
.logo:hover,.footer-logo:hover{transform:scale(1.12) rotate(-6deg)}
.logo{animation:logo-float 3s ease-in-out infinite,wc-pulse 3s infinite}
.logo span,.logo{letter-spacing:0}
.logo-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:logo-shine 3.2s ease-in-out infinite}
@keyframes logo-spin{to{transform:rotate(360deg)}}
@keyframes logo-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes logo-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* home nav + footer logo animation */
.br b{position:relative;display:inline-grid;place-items:center;overflow:hidden;isolation:isolate;animation:logo-float 3s ease-in-out infinite;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.br b::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,#ffc857 80%,transparent 90%);animation:logo-spin 3.5s linear infinite}
.br b::after{content:"";position:absolute;inset:2px;border-radius:inherit;z-index:-1;background:inherit}
.br:hover b{transform:scale(1.12) rotate(-6deg)}