:root{--text: #e6eef6;--light-text: #f3f3f3;--secondary-text: #e0e0e0;--hover-cv: #58a6ff;--hover-blog: #3fb950;--hover-projects: #f97316;--hover-resources: #ec4899;--dark-bg: #000000}*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--dark-bg);color:var(--text);overflow-x:hidden}body{min-height:100vh;background:transparent}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 50%,rgba(68,224,255,.08),transparent 60%),radial-gradient(circle at 80% 50%,rgba(209,12,2,.08),transparent 55%),repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 4px);mix-blend-mode:screen}.main-center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100vw;max-width:100vw;padding:40px 0 32px;position:relative;z-index:1}.animated-title{width:clamp(220px,35vw,350px);height:auto;margin:0 0 30px;display:block;object-fit:contain;animation:imagePulse 7s ease-in-out infinite}@keyframes imagePulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.grid{display:flex;justify-content:center;gap:20px;width:100%;padding:0 16px 20px;flex-wrap:wrap;margin:0 auto}.btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:50px 16px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff05;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none;color:var(--text);width:210px;min-height:400px;margin:20px 0;flex-shrink:0;position:relative;overflow:hidden;text-align:center;box-shadow:0 2px 12px #0000001a;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,background .18s;perspective:1000px;outline:none}.btn-logo{width:90px;height:90px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.3,1.2,.3,1),filter .4s;filter:grayscale(1) brightness(.92) contrast(1.1);will-change:transform,filter;z-index:2;position:relative}.btn-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:12px;backface-visibility:visible;transform:rotateY(180deg);will-change:transform,filter;transition:transform .6s cubic-bezier(.3,1.2,.3,1),filter .4s}.btn-title{font-family:Segoe UI,Cairo,Tajawal,system-ui,sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:.5px;margin-bottom:6px;color:var(--light-text);text-shadow:0 2px 8px rgba(0,0,10,.67),0 1px 0 rgba(255,255,255,.13);transition:transform .6s cubic-bezier(.3,1.2,.3,1),color .3s;z-index:1;position:relative}.btn-desc{font-size:1rem;font-weight:500;color:var(--secondary-text);opacity:.92;line-height:1.4;margin-bottom:0;transition:transform .6s cubic-bezier(.3,1.2,.3,1),opacity .3s;z-index:1;position:relative}.btn:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,currentColor,transparent);transform:translate(-100%);transition:transform .5s ease}.btn:hover{transform:translateY(-8px) scale(1.04);background:#ffffff12;box-shadow:0 20px 44px #06142852;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:2}.btn:hover .btn-logo,.btn.touch-active .btn-logo{transform:scale(1.35) translateY(20px);filter:grayscale(0) brightness(1.08);z-index:3}.btn:hover .btn-logo img,.btn.touch-active .btn-logo img{transform:rotateY(0);filter:drop-shadow(0 0 12px rgba(255,255,255,.3))}.btn:hover .btn-title,.btn.touch-active .btn-title{transform:translateY(38px);color:#fff;text-shadow:0 4px 18px rgba(0,0,11,.73),0 1px 0 rgba(255,255,255,.19)}.btn:hover .btn-desc,.btn.touch-active .btn-desc{transform:translateY(38px);opacity:1}.btn:hover:after{transform:translate(100%)}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px #44e0ff99,0 0 0 6px #44e0ff33}.btn:nth-child(1):hover{border-color:var(--hover-cv);color:var(--hover-cv)}.btn:nth-child(2):hover{border-color:var(--hover-blog);color:var(--hover-blog)}.btn:nth-child(3):hover{border-color:var(--hover-projects);color:var(--hover-projects)}.btn:nth-child(4):hover{border-color:var(--hover-resources);color:var(--hover-resources)}@media(max-aspect-ratio:1/1){.animated-title{width:clamp(160px,28vw,240px);max-height:200px}}@media(max-width:900px){.grid{gap:16px}}@media(max-width:640px){.main-center{padding:30px 0 24px}.grid{gap:14px;padding:0 12px 20px;margin:0;width:100%}.btn{width:calc(50% - 7px);min-height:280px;margin:0;padding:20px 12px 16px}.btn-logo{width:70px;height:70px;margin:0 auto 8px}.btn-title{font-size:1.1rem;margin-bottom:4px}.btn-desc{font-size:.85rem;line-height:1.3}}@media(max-width:480px){.main-center{padding:20px 0}.grid{gap:12px;padding:0 10px 16px}.btn{width:calc(50% - 6px);min-height:240px;padding:16px 10px 14px}.btn-logo{width:60px;height:60px;margin:0 auto 6px}.btn-title{font-size:1rem;margin-bottom:3px}.btn-desc{font-size:.8rem}.btn:hover .btn-logo,.btn.touch-active .btn-logo{transform:scale(1.25) translateY(14px)}.btn:hover .btn-title,.btn.touch-active .btn-title,.btn:hover .btn-desc,.btn.touch-active .btn-desc{transform:translateY(28px)}}