:root{
 --domlian-green:#8CB563;
 --domlian-green-dark:#5C940D;
 --domlian-bg:#F3F3F6;

 --card:#ffffff;
 --text:#2b2b2b;
 --muted:#6b6b6b;
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:system-ui,-apple-system,Segoe UI,Roboto;
}

body{
 background:var(--domlian-bg);
 min-height:100vh;
 display:flex;
 justify-content:center;
}

.app{
 width:100%;
 max-width:480px;
 padding:24px 16px 60px;
 position:relative;
}

.leaves{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 pointer-events:none;
}

.leaf{
 position:absolute;
 width:90px;
 opacity:.9;
 animation:leafFloat 12s ease-in-out infinite alternate;
}

.leaf.l1{left:-20px; top:-10px;}
.leaf.l2{right:-10px; top:0;}
.leaf.l3{left:40%; top:-20px;}

@keyframes leafFloat{
 from{transform:translateY(0px) rotate(0deg)}
 to{transform:translateY(15px) rotate(3deg)}
}

.profile{
 text-align:center;
 margin-top:70px;
}

.avatar{
 width:110px;
 height:110px;
 border-radius:50%;
 object-fit:cover;
 margin-bottom:20px;
}

.profile h1{
 font-size:28px;
 color:var(--domlian-green-dark);
 font-weight:600;
}

.profile p{
 color:var(--domlian-green-dark);
 font-size:20px;
 margin-top:6px;
 letter-spacing:1px;
}

.links{
 margin-top:40px;
 display:flex;
 flex-direction:column;
 gap:18px;
}

.link{
 display:block;
 background:var(--domlian-green);
 color:white;
 text-align:center;
 padding:20px;
 border-radius:40px;
 font-weight:600;
 text-decoration:none;
 font-size:18px;
 transition:.25s;
}

.link:hover{
 transform:translateY(-3px);
 box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.footer{
 margin-top:50px;
 text-align:center;
 font-size:13px;
 color:#777;
}





/*     tuk nadolu e za qr */


/* FAB BUTTON */

.qr-fab{
 position:fixed;
 bottom:25px;
 right:25px;
 width:65px;
 height:65px;
 border-radius:50%;
 background:#8CB563;
 color:white;
 font-size:26px;
 border:none;
 box-shadow:0 10px 25px rgba(0,0,0,.25);
 cursor:pointer;
 z-index:999;
 transition:.25s;
}

.qr-fab:hover{
 transform:scale(1.1);
}

/* MODAL */

.qr-modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.65);
 backdrop-filter:blur(10px);
 display:flex;
 align-items:center;
 justify-content:center;
 opacity:0;
 pointer-events:none;
 transition:.35s;
 z-index:1000;
}

.qr-modal.active{
 opacity:1;
 pointer-events:auto;
}

/* CARD */

.qr-card{
 background:white;
 border-radius:28px;
 padding:35px 25px;
 text-align:center;
 max-width:360px;
 width:90%;
 position:relative;
 animation:qrPop .35s ease;
}

@keyframes qrPop{
 from{
  transform:scale(.8);
  opacity:0;
 }
 to{
  transform:scale(1);
  opacity:1;
 }
}

/* CLOSE */

.qr-close{
 position:absolute;
 right:15px;
 top:15px;
 border:none;
 background:#eee;
 width:38px;
 height:38px;
 border-radius:50%;
 cursor:pointer;
 font-size:18px;
}

/* QR IMAGE */

.qr-image{
 width:240px;
 max-width:100%;
 margin:20px auto;
 border-radius:16px;
 box-shadow:0 10px 30px rgba(0,0,0,.15);
}